1 line
6.5 KiB
Plaintext
1 line
6.5 KiB
Plaintext
|
{"version":3,"file":"controlRendering.mjs","names":[],"sources":["../../extensions/cropping_controls/controlRendering.ts"],"sourcesContent":["import {\n type ControlRenderingStyleOverride,\n type InteractiveFabricObject,\n type TCornerPoint,\n Intersection,\n Point,\n util,\n type Control,\n} from 'fabric';\n\nconst { degreesToRadians } = util;\n\nconst {\n createRotateMatrix,\n createTranslateMatrix,\n multiplyTransformMatrixArray,\n} = util;\n\n/**\n * Custom shouldActivate for L-shaped corner controls.\n * Checks if pointer is within either arm of the L.\n */\nexport function shouldActivateCorner(\n this: Control,\n controlKey: string,\n fabricObject: InteractiveFabricObject,\n pointer: Point,\n corner: TCornerPoint,\n) {\n if (\n fabricObject.canvas?.getActiveObject() !== fabricObject ||\n !fabricObject.isControlVisible(controlKey)\n ) {\n return false;\n }\n\n const { tl, tr, br, bl } = corner;\n const center = new Point(\n (tl.x + tr.x + br.x + bl.x) / 4,\n (tl.y + tr.y + br.y + bl.y) / 4,\n );\n\n const sizeX = this.sizeX || fabricObject.cornerSize;\n const sizeY = this.sizeY || fabricObject.cornerSize;\n const length = sizeX;\n const thickness = sizeY;\n const halfT = thickness / 2;\n\n const objectAngle = fabricObject.angle || 0;\n const totalAngle = objectAngle + (this.angle || 0);\n const t = multiplyTransformMatrixArray([\n createTranslateMatrix(center.x, center.y),\n createRotateMatrix({ angle: totalAngle }),\n ]);\n\n const hArm = [\n new Point(-halfT, -halfT).transform(t),\n new Point(length + halfT, -halfT).transform(t),\n new Point(length + halfT, halfT).transform(t),\n new Point(-halfT, halfT).transform(t),\n ];\n\n const vArm = [\n new Point(-halfT, -halfT).transform(t),\n new Point(halfT, -halfT).transform(t),\n new Point(halfT, length + halfT).transform(t),\n new Point(-halfT, length + halfT).transform(t),\n ];\n\n return (\n Intersection.isPointInPolygon(pointer, hArm) ||\n Intersection.isPointInPolygon(pointer, vArm)\n );\n}\n\n/**\n * Render a rounded segment control (line with round caps).\n * Useful for edge resize handles.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for FabricObject controls style\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\n */\nexport function renderRoundedSegmentControl(\n this: Control,\n ctx: CanvasRenderingContext2D,\n left: number,\n top: number,\n styleOverride: ControlRenderingStyleOverride,\n fabricObject: InteractiveFabricObject,\n) {\n ctx.save();\n const { stroke, xSize, ySize } = this.commonRenderProps(\n ctx,\n left,\n top,\n fabricObject,\n styleOverride,\n ),\n length = Math.max(xSize, ySize),\n thickness = Math.min(xSize, ySize),\n halfLength = length / 2,\n strokeWidth = fabricObject.borderScaleFactor * 2;\n\n ctx.rotate(degreesToRadians(this.angle));\n ctx.lineCap = 'round';\n ctx.beginPath();\n ctx.moveTo(-halfLength, 0);\n ctx.lineTo(halfLength, 0);\n\n if (stroke) {\n ctx.lineWidth = thickness;\n ctx.stroke();\n }\n\n ctx.strokeStyle = ctx.fillStyle;\n ctx.lineWidth = stroke ? thickness - strokeWidth : thickness;\n ctx.stroke();\n ctx.restore();\n}\n\n/**\n * Render an L-shaped corner control using two rounded segments.\n * Matches the style of renderRoundedSegmentControl.\n */\nexport function renderCornerControl(\n this: Control,\n ctx: CanvasRenderingContext2D,\n left: number,\n top: number,\n styleOverride: ControlRenderingStyleOverride,\n fabricObject: InteractiveFabricObject,\n) {\n ctx.save();\n const { stroke, xSize, ySize } = this.commonRenderProps(\n ctx,\n left,\n top,\n fabricObject,\n styleOverride,\n ),\n length = xSize,\n thickness = ySize,\n strokeWidth = fabricObject.borderScaleFactor * 2;\n\n
|