UNPKG

fabric

Version:

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

1 lines 8.68 kB
{"version":3,"file":"controlRendering.mjs","sources":["../../../src/controls/controlRendering.ts"],"sourcesContent":["import { FILL, STROKE, twoMathPi } from '../constants';\nimport type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport type { Control } from './Control';\n\nexport type ControlRenderingStyleOverride = Partial<\n Pick<\n InteractiveFabricObject,\n | 'cornerStyle'\n | 'cornerSize'\n | 'cornerColor'\n | 'cornerStrokeColor'\n | 'cornerDashArray'\n | 'transparentCorners'\n >\n>;\n\nexport type ControlRenderer<\n O extends InteractiveFabricObject = InteractiveFabricObject,\n> = (\n ctx: CanvasRenderingContext2D,\n left: number,\n top: number,\n styleOverride: ControlRenderingStyleOverride,\n fabricObject: O,\n) => void;\n\n/**\n * Render a round control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\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 renderCircleControl(\n this: Control,\n ctx: CanvasRenderingContext2D,\n left: number,\n top: number,\n styleOverride: ControlRenderingStyleOverride,\n fabricObject: InteractiveFabricObject,\n) {\n styleOverride = styleOverride || {};\n const xSize =\n this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners =\n typeof styleOverride.transparentCorners !== 'undefined'\n ? styleOverride.transparentCorners\n : fabricObject.transparentCorners,\n methodName = transparentCorners ? STROKE : FILL,\n stroke =\n !transparentCorners &&\n (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);\n let myLeft = left,\n myTop = top,\n size;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\n ctx.strokeStyle =\n styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\n // TODO: use proper ellipse code.\n if (xSize > ySize) {\n size = xSize;\n ctx.scale(1.0, ySize / xSize);\n myTop = (top * xSize) / ySize;\n } else if (ySize > xSize) {\n size = ySize;\n ctx.scale(xSize / ySize, 1.0);\n myLeft = (left * ySize) / xSize;\n } else {\n size = xSize;\n }\n ctx.beginPath();\n ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);\n ctx[methodName]();\n if (stroke) {\n ctx.stroke();\n }\n ctx.restore();\n}\n\n/**\n * Render a square control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\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 renderSquareControl(\n this: Control,\n ctx: CanvasRenderingContext2D,\n left: number,\n top: number,\n styleOverride: ControlRenderingStyleOverride,\n fabricObject: InteractiveFabricObject,\n) {\n styleOverride = styleOverride || {};\n const xSize =\n this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners =\n typeof styleOverride.transparentCorners !== 'undefined'\n ? styleOverride.transparentCorners\n : fabricObject.transparentCorners,\n methodName = transparentCorners ? STROKE : FILL,\n stroke =\n !transparentCorners &&\n (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\n xSizeBy2 = xSize / 2,\n ySizeBy2 = ySize / 2;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\n ctx.strokeStyle =\n styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\n ctx.translate(left, top);\n // angle is relative to canvas plane\n const angle = fabricObject.getTotalAngle();\n ctx.rotate(degreesToRadians(angle));\n // this does not work, and fixed with ( && ) does not make sense.\n // to have real transparent corners we need the controls on upperCanvas\n // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);\n if (stroke) {\n ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n }\n ctx.restore();\n}\n"],"names":["renderCircleControl","ctx","left","top","styleOverride","fabricObject","xSize","sizeX","cornerSize","ySize","sizeY","transparentCorners","methodName","STROKE","FILL","stroke","cornerStrokeColor","myLeft","myTop","size","save","fillStyle","cornerColor","strokeStyle","scale","beginPath","arc","twoMathPi","restore","renderSquareControl","xSizeBy2","ySizeBy2","translate","angle","getTotalAngle","rotate","degreesToRadians","concat","strokeRect"],"mappings":"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"}