1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
|
{"version":3,"file":"index.mjs","names":[],"sources":["../../extensions/aligning_guidelines/index.ts"],"sourcesContent":["import {\n type BasicTransformEvent,\n type Canvas,\n type FabricObject,\n type Point,\n util,\n} from 'fabric';\nimport {\n collectHorizontalPoint,\n collectVerticalPoint,\n} from './util/collect-point';\nimport {\n drawHorizontalLine,\n drawLine,\n drawPointList,\n drawVerticalLine,\n drawX,\n} from './util/draw';\nimport { collectLine } from './util/collect-line';\nimport type { AligningLineConfig, OriginMap } from './typedefs';\nimport { getObjectsByTarget } from './util/get-objects-by-target';\nimport { getContraryMap, getPointMap } from './util/basic';\n\ntype TransformEvent = BasicTransformEvent & {\n target: FabricObject;\n};\n\nexport class AligningGuidelines {\n canvas: Canvas;\n horizontalLines = new Set<string>();\n verticalLines = new Set<string>();\n cacheMap = new Map<string, Point[]>();\n /**\n * When we drag to resize using center points like mt, ml, mb, and mr,\n * we do not need to draw line segments; we only need to draw the target points.\n */\n onlyDrawPoint = false;\n /** Alignment method is required when customizing. */\n contraryOriginMap: OriginMap = {\n tl: ['right', 'bottom'],\n tr: ['left', 'bottom'],\n br: ['left', 'top'],\n bl: ['right', 'top'],\n mt: ['center', 'bottom'],\n mr: ['left', 'center'],\n mb: ['center', 'top'],\n ml: ['right', 'center'],\n };\n xSize = 2.4;\n lineDash: number[] | undefined;\n /** At what distance from the shape does alignment begin? */\n margin = 4;\n /** Aligning line dimensions */\n width = 1;\n /** Aligning line color */\n color = 'rgba(255,0,0,0.9)';\n /** Close Vertical line, default false. */\n closeVLine = false;\n /** Close horizontal line, default false. */\n closeHLine = false;\n\n constructor(canvas: Canvas, options: Partial<AligningLineConfig> = {}) {\n this.canvas = canvas;\n Object.assign(this, options);\n\n this.mouseUp = this.mouseUp.bind(this);\n this.scalingOrResizing = this.scalingOrResizing.bind(this);\n this.moving = this.moving.bind(this);\n this.beforeRender = this.beforeRender.bind(this);\n this.afterRender = this.afterRender.bind(this);\n\n this.initBehavior();\n }\n initBehavior() {\n this.canvas.on('mouse:up', this.mouseUp);\n this.canvas.on('object:resizing', this.scalingOrResizing);\n this.canvas.on('object:scaling', this.scalingOrResizing);\n this.canvas.on('object:moving', this.moving);\n this.canvas.on('before:render', this.beforeRender);\n this.canvas.on('after:render', this.afterRender);\n }\n /** Returns shapes that can draw aligning lines, default returns all shapes on the canvas excluding groups. */\n getObjectsByTarget(target: FabricObject) {\n return getObjectsByTarget(target);\n }\n /** When the user customizes the controller, this property is set to enable or disable automatic alignment through point scaling/resizing. */\n getPointMap(target: FabricObject) {\n return getPointMap(target);\n }\n /** When the user customizes the controller, this property is used to enable or disable alignment positioning through points. */\n getContraryMap(target: FabricObject) {\n return getContraryMap(target);\n }\n /** Users can customize. */\n getCaCheMapValue(object: FabricObject) {\n const cacheKey = [\n object.calcTransformMatrix().toString(),\n object.width,\n object.height,\n ].join();\n const cacheValue = this.cacheMap.get(cacheKey);\n if (cacheValue) return cacheValue;\n const value = object.getCoords();\n value.push(object.getCenterPoint());\n this.cacheMap.set(cacheKey, value);\n return value;\n }\n drawLine(origin: Point, target: Point) {\n drawLine.call(this, origin, target);\n }\n drawX(point: Point, dir: number) {\n drawX.call(this, point, dir);\n }\n mouseUp() {\n this.verticalLines.clear();\n this.horizontalLines.clear();\n this.cacheMap.clear();\n this.canvas.requestRenderAll();\n }\n\n scalingOrResizing(e: Tr
|