5dbcebf7a2
- Fix router import path in main.js - Handle Django REST Framework pagination format in API calls - Add getTemplates function to project API - Restart frontend development server
71 lines
4.3 KiB
JavaScript
71 lines
4.3 KiB
JavaScript
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
|