fabric/dist-extensions/linear_gradient_controls/linearGradientHandlers.mjs

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import { Point, controlsUtils, iMatrix, util } from "fabric";
//#region extensions/linear_gradient_controls/linearGradientHandlers.ts
/** A deduping code block */
const commonGradientInfo = (fabricObject, gradient) => {
	const { width, height } = fabricObject;
	const { colorStops, coords, gradientUnits } = gradient;
	const isPerc = gradientUnits === "percentage";
	const matrix = fabricObject.calcTransformMatrix();
	const vpt = fabricObject.getViewportTransform();
	return {
		width,
		height,
		colorStops,
		coords,
		isPerc,
		_finalMatrix: util.multiplyTransformMatrixArray([vpt, matrix])
	};
};
const linearGradientColorPositionHandlerGenerator = (gradient, stopIndex) => function linearGradientColorPositionHandler(dim, finalMatrix, fabricObject) {
	const { width, height, isPerc, coords, colorStops, _finalMatrix } = commonGradientInfo(fabricObject, gradient);
	const p1 = new Point(coords.x1 * (isPerc ? width : 1) - width / 2, coords.y1 * (isPerc ? height : 1) - height / 2);
	const p2 = new Point(coords.x2 * (isPerc ? width : 1) - width / 2, coords.y2 * (isPerc ? height : 1) - height / 2);
	const offset = colorStops[stopIndex].offset;
	return p1.lerp(p2, offset).transform(_finalMatrix);
};
const linearGradientCoordPositionHandlerGenerator = (gradient, pointNumber) => function linearGradientCoordPositionHandler(dim, finalMatrix, fabricObject) {
	const { width, height, isPerc, coords, _finalMatrix } = commonGradientInfo(fabricObject, gradient);
	return (pointNumber === 1 ? new Point(coords.x1 * (isPerc ? width : 1) - width / 2, coords.y1 * (isPerc ? height : 1) - height / 2) : new Point(coords.x2 * (isPerc ? width : 1) - width / 2, coords.y2 * (isPerc ? height : 1) - height / 2)).transform(_finalMatrix);
};
const linearGradientColorActionHandlerGenerator = (gradient, colorIndex) => (eventData, { target }, x, y) => {
	const { width, height, isPerc, coords: { x1, x2, y1, y2 }, colorStops } = commonGradientInfo(target, gradient);
	const point = util.sendPointToPlane(new Point(x, y), void 0, target.calcTransformMatrix()).add(new Point(width / 2, height / 2));
	const p1 = new Point(x1 * (isPerc ? width : 1), y1 * (isPerc ? height : 1));
	const v = util.createVector(p1, new Point(x2 * (isPerc ? width : 1), y2 * (isPerc ? height : 1)));
	const u = util.createVector(p1, point);
	const t = util.dotProduct(u, v) / util.dotProduct(v, v);
	colorStops[colorIndex].offset = util.capValue(0, t, 1);
	target.set("dirty", true);
	return true;
};
const linearGradientCoordsActionHandlerGenerator = (gradient, pointIndex) => (eventData, { target }, x, y) => {
	const { width, height, isPerc, coords } = commonGradientInfo(target, gradient);
	const point = util.sendPointToPlane(new Point(x, y), void 0, target.calcTransformMatrix()).add(new Point(width / 2, height / 2));
	if (pointIndex === 1) {
		coords.x1 = point.x / (isPerc ? width : 1);
		coords.y1 = point.y / (isPerc ? height : 1);
	}
	if (pointIndex === 2) {
		coords.x2 = point.x / (isPerc ? width : 1);
		coords.y2 = point.y / (isPerc ? height : 1);
	}
	target.set("dirty", true);
	return true;
};
const linearGradientControlLineRender = (gradient) => function renderCircleControlWithLine(ctx, left, top, styleOverride, fabricObject) {
	var _fabricObject$canvas$, _fabricObject$canvas;
	ctx.save();
	const { width, height, isPerc, coords } = commonGradientInfo(fabricObject, gradient);
	const finalP = util.sendPointToPlane(new Point(coords.x2 * (isPerc ? width : 1) - width / 2, coords.y2 * (isPerc ? height : 1) - height / 2), util.multiplyTransformMatrices((_fabricObject$canvas$ = (_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.viewportTransform) !== null && _fabricObject$canvas$ !== void 0 ? _fabricObject$canvas$ : iMatrix, fabricObject.calcTransformMatrix()));
	ctx.lineWidth = fabricObject.borderScaleFactor;
	ctx.beginPath();
	ctx.moveTo(left, top);
	ctx.lineTo(finalP.x, finalP.y);
	ctx.stroke();
	controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
	ctx.restore();
};
//#endregion
export { linearGradientColorActionHandlerGenerator, linearGradientColorPositionHandlerGenerator, linearGradientControlLineRender, linearGradientCoordPositionHandlerGenerator, linearGradientCoordsActionHandlerGenerator };

//# sourceMappingURL=linearGradientHandlers.mjs.map