fabric 7.3.1 → 7.5.0-beta.1

package/dist-extensions/westures_integration/index.mjs

@@ -1,60 +0,0 @@
-import { util } from "fabric";
-import wes from "westures";
-//#region extensions/westures_integration/index.ts
-/**
-* Register this handler on canvas.on('pinch', pinchEventHandler);
-* To get an out of the box functionality for the pinch to zoom
-*/
-function pinchEventHandler({ scale, target, scenePoint }) {
-	if (target && this.getActiveObject() === target) {
-		target.scaleX *= scale;
-		target.scaleY *= scale;
-	} else this.zoomToPoint(scenePoint, this.getZoom() * scale);
-}
-function rotateEventHandler({ rotation, target }) {
-	if (target && this.getActiveObject() === target) target.rotate(target.angle + util.radiansToDegrees(rotation));
-}
-const tripleTapGesture = (canvas) => {
-	return new wes.Tap(canvas.upperCanvasEl, ({ event }) => {
-		canvas.fireEventFromPointerEvent(event, "mouse:tripleclick", "mousetripleclick", void 0);
-		event.preventDefault();
-	}, {
-		numTaps: 3,
-		maxRetain: 400
-	});
-};
-const doubleTapGesture = (canvas) => {
-	return new wes.Tap(canvas.upperCanvasEl, ({ event }) => {
-		canvas.fireEventFromPointerEvent(event, "mouse:dblclick", "mousedblclick", void 0);
-		event.preventDefault();
-	}, {
-		numTaps: 2,
-		maxRetain: 300
-	});
-};
-const pinchGesture = (canvas) => {
-	return new wes.Pinch(canvas.upperCanvasEl, ({ scale, event }) => {
-		canvas.fireEventFromPointerEvent(event, "pinch", "pinch", { scale });
-	});
-};
-const rotateGesture = (canvas) => {
-	return new wes.Rotate(canvas.upperCanvasEl, ({ rotation, event }) => {
-		canvas.fireEventFromPointerEvent(event, "rotate", "rotate", { rotation });
-	});
-};
-/**
-* Add a serie of gestures recognition on the canvas
-*/
-const addGestures = (canvas) => {
-	const canvasRegion = new wes.Region(canvas.upperCanvasEl);
-	canvas.addOrRemove((el, ...args) => el.removeEventListener(...args));
-	canvasRegion.addGesture(rotateGesture(canvas));
-	canvasRegion.addGesture(pinchGesture(canvas));
-	canvasRegion.addGesture(tripleTapGesture(canvas));
-	canvasRegion.addGesture(doubleTapGesture(canvas));
-	canvas.addOrRemove((el, ...args) => el.addEventListener(...args), true);
-};
-//#endregion
-export { addGestures, pinchEventHandler, rotateEventHandler };
-
-//# sourceMappingURL=index.mjs.map

package/dist-extensions/westures_integration/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../extensions/westures_integration/index.ts"],"sourcesContent":["import wes from 'westures';\nimport { type Canvas, type CanvasEvents, type XY, util } from 'fabric';\n\ntype PinchEventData = {\n  centroid: XY;\n  event: PointerEvent;\n  phase: string;\n  type: 'pinch';\n  scale: number;\n  target: HTMLElement;\n};\n\ntype RotateEventData = {\n  centroid: XY;\n  event: PointerEvent;\n  phase: string;\n  type: 'rotate';\n  rotation: number;\n  target: HTMLElement;\n};\n\ntype TapEventData = {\n  centroid: XY;\n  event: PointerEvent;\n  phase: string;\n  type: 'tap';\n  target: HTMLElement;\n};\n\n/**\n * Register this handler on canvas.on('pinch', pinchEventHandler);\n * To get an out of the box functionality for the pinch to zoom\n */\nexport function pinchEventHandler(\n  this: Canvas,\n  { scale, target, scenePoint }: CanvasEvents['pinch'],\n) {\n  if (target && this.getActiveObject() === target) {\n    // if we are pinching on the active object, let's scale it\n    target.scaleX *= scale;\n    target.scaleY *= scale;\n  } else {\n    this.zoomToPoint(scenePoint, this.getZoom() * scale);\n  }\n}\n\nexport function rotateEventHandler(\n  this: Canvas,\n  { rotation, target }: CanvasEvents['rotate'],\n) {\n  if (target && this.getActiveObject() === target) {\n    target.rotate(target.angle + util.radiansToDegrees(rotation));\n  }\n}\n\nexport const tripleTapGesture = (canvas: Canvas) => {\n  return new wes.Tap(\n    canvas.upperCanvasEl,\n    ({ event }: TapEventData) => {\n      canvas.fireEventFromPointerEvent(\n        event,\n        'mouse:tripleclick',\n        'mousetripleclick',\n        undefined,\n      );\n      event.preventDefault();\n    },\n    {\n      numTaps: 3,\n      maxRetain: 400,\n    },\n  );\n};\n\nexport const doubleTapGesture = (canvas: Canvas) => {\n  return new wes.Tap(\n    canvas.upperCanvasEl,\n    ({ event }: TapEventData) => {\n      canvas.fireEventFromPointerEvent(\n        event,\n        'mouse:dblclick',\n        'mousedblclick',\n        undefined,\n      );\n      event.preventDefault();\n    },\n    {\n      numTaps: 2,\n      maxRetain: 300,\n    },\n  );\n};\n\nexport const pinchGesture = (canvas: Canvas) => {\n  return new wes.Pinch(\n    canvas.upperCanvasEl,\n    ({ scale, event }: PinchEventData) => {\n      canvas.fireEventFromPointerEvent(event, 'pinch', 'pinch', { scale });\n    },\n  );\n};\n\nexport const rotateGesture = (canvas: Canvas) => {\n  return new wes.Rotate(\n    canvas.upperCanvasEl,\n    ({ rotation, event }: RotateEventData) => {\n      canvas.fireEventFromPointerEvent(event, 'rotate', 'rotate', { rotation });\n    },\n  );\n};\n\n/**\n * Add a serie of gestures recognition on the canvas\n */\nexport const addGestures = (canvas: Canvas) => {\n  const canvasRegion = new wes.Region(canvas.upperCanvasEl);\n  canvas.addOrRemove(\n    (\n      el: HTMLElement,\n      ...args: Parameters<HTMLElement['removeEventListener']>\n    ) => el.removeEventListener(...args),\n  );\n  canvasRegion.addGesture(rotateGesture(canvas));\n  canvasRegion.addGesture(pinchGesture(canvas));\n  canvasRegion.addGesture(tripleTapGesture(canvas));\n  canvasRegion.addGesture(doubleTapGesture(canvas));\n  // add back events, excluding the click one\n  canvas.addOrRemove(\n    (el: HTMLElement, ...args: Parameters<HTMLElement['addEventListener']>) =>\n      el.addEventListener(...args),\n    true,\n  );\n};\n"],"mappings":";;;;;;;AAiCA,SAAgB,kBAEd,EAAE,OAAO,QAAQ,cACjB;AACA,KAAI,UAAU,KAAK,iBAAiB,KAAK,QAAQ;AAE/C,SAAO,UAAU;AACjB,SAAO,UAAU;OAEjB,MAAK,YAAY,YAAY,KAAK,SAAS,GAAG,MAAM;;AAIxD,SAAgB,mBAEd,EAAE,UAAU,UACZ;AACA,KAAI,UAAU,KAAK,iBAAiB,KAAK,OACvC,QAAO,OAAO,OAAO,QAAQ,KAAK,iBAAiB,SAAS,CAAC;;AAIjE,MAAa,oBAAoB,WAAmB;AAClD,QAAO,IAAI,IAAI,IACb,OAAO,gBACN,EAAE,YAA0B;AAC3B,SAAO,0BACL,OACA,qBACA,oBACA,KAAA,EACD;AACD,QAAM,gBAAgB;IAExB;EACE,SAAS;EACT,WAAW;EACZ,CACF;;AAGH,MAAa,oBAAoB,WAAmB;AAClD,QAAO,IAAI,IAAI,IACb,OAAO,gBACN,EAAE,YAA0B;AAC3B,SAAO,0BACL,OACA,kBACA,iBACA,KAAA,EACD;AACD,QAAM,gBAAgB;IAExB;EACE,SAAS;EACT,WAAW;EACZ,CACF;;AAGH,MAAa,gBAAgB,WAAmB;AAC9C,QAAO,IAAI,IAAI,MACb,OAAO,gBACN,EAAE,OAAO,YAA4B;AACpC,SAAO,0BAA0B,OAAO,SAAS,SAAS,EAAE,OAAO,CAAC;GAEvE;;AAGH,MAAa,iBAAiB,WAAmB;AAC/C,QAAO,IAAI,IAAI,OACb,OAAO,gBACN,EAAE,UAAU,YAA6B;AACxC,SAAO,0BAA0B,OAAO,UAAU,UAAU,EAAE,UAAU,CAAC;GAE5E;;;;;AAMH,MAAa,eAAe,WAAmB;CAC7C,MAAM,eAAe,IAAI,IAAI,OAAO,OAAO,cAAc;AACzD,QAAO,aAEH,IACA,GAAG,SACA,GAAG,oBAAoB,GAAG,KAAK,CACrC;AACD,cAAa,WAAW,cAAc,OAAO,CAAC;AAC9C,cAAa,WAAW,aAAa,OAAO,CAAC;AAC7C,cAAa,WAAW,iBAAiB,OAAO,CAAC;AACjD,cAAa,WAAW,iBAAiB,OAAO,CAAC;AAEjD,QAAO,aACJ,IAAiB,GAAG,SACnB,GAAG,iBAAiB,GAAG,KAAK,EAC9B,KACD"}

package/eslint.config.mjs

@@ -1,119 +0,0 @@
-import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import prettier from 'eslint-config-prettier';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-export default tseslint.config(
-  {
-    ignores: [
-      'dist/*',
-      'dist-extensions/*',
-      '.codesandbox/**/*',
-      'e2e/*',
-      'src/mixins/eraser_brush.mixin.ts',
-      'src/util/lang_class.ts',
-      'src/parkinglot',
-    ],
-  },
-  eslint.configs.recommended,
-  tseslint.configs.recommended,
-  prettier,
-
-  {
-    languageOptions: {
-      ecmaVersion: 5,
-      sourceType: 'script',
-      globals: {
-        console: 'readonly',
-      },
-      parserOptions: {
-        project: 'tsconfig.spec.json',
-        tsconfigRootDir: __dirname,
-      },
-    },
-  },
-
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@typescript-eslint/consistent-type-exports': 'error',
-      '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-unnecessary-type-arguments': 'error',
-      '@typescript-eslint/no-restricted-types': 1,
-      '@typescript-eslint/ban-ts-comment': 1,
-      '@typescript-eslint/no-explicit-any': ['warn'],
-      '@typescript-eslint/no-unused-expressions': [
-        'error',
-        {
-          allowShortCircuit: true,
-        },
-      ],
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        {
-          ignoreRestSiblings: true,
-          argsIgnorePattern: '^_',
-        },
-      ],
-      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
-      'no-restricted-globals': [
-        'error',
-        {
-          name: 'window',
-          message: 'Use fabric window or other utils instead.',
-        },
-        {
-          name: 'document',
-          message: 'Use fabric document or other utils instead.',
-        },
-      ],
-
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector: '[callee.object.name="Math"][callee.property.name="hypot"]',
-          message:
-            '`Math.hypot` is not accurate on chrome, use `Math.sqrt` instead.\nSee https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox',
-        },
-        {
-          selector: 'VariableDeclarator[init.name="Math"]',
-          message:
-            'Aliasing or destructing `Math` is not allowed due to restrictions on `Math.hypot` usage.',
-        },
-        {
-          selector: '[callee.object.name="console"]',
-          message: 'Use the `log` util',
-        },
-        {
-          selector: 'NewExpression[callee.name="Error"]',
-          message: 'Use `FabricError`',
-        },
-      ],
-    },
-  },
-
-  {
-    files: ['playwright.setup.ts'],
-    rules: {
-      'no-restricted-syntax': 'off',
-    },
-  },
-  {
-    files: ['e2e/**/*.ts'],
-    languageOptions: {
-      parserOptions: {
-        project: 'e2e/tsconfig.json',
-        tsconfigRootDir: __dirname,
-      },
-    },
-    rules: {
-      '@typescript-eslint/consistent-type-imports': 'off',
-      '@typescript-eslint/no-require-imports': 'off',
-      'no-restricted-globals': 'off',
-      'no-restricted-syntax': 'off',
-    },
-  },
-);

package/extensions/aligning_guidelines/README.MD

@@ -1,178 +0,0 @@
-# Aligning guidelines
-
-## How to use it
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-const config = {
-  /** At what distance from the shape does alignment begin? */
-  margin: 4,
-  /** Aligning line dimensions */
-  width: 1,
-  /** Aligning line color */
-  color: 'rgba(255,0,0,0.9)',
-  /** Close Vertical line, default false. */
-  closeVLine: false,
-  /** Close horizontal line, default false. */
-  closeHLine: false,
-};
-
-const aligningGuidelines = new AligningGuidelines(myCanvas, options);
-
-// in order to disable alignment guidelines later:
-
-aligningGuidelines.dispose();
-```
-
-### custom function
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-import { FabricObject } from 'fabric';
-
-// You can customize the return graphic, and the example will only compare it with sibling elements
-new AligningGuidelines(myCanvas, {
-  getObjectsByTarget: function (target) {
-    const set = new Set<FabricObject>();
-    const p = target.parent ?? target.canvas;
-    p?.getObjects().forEach((o) => {
-      set.add(o);
-    });
-    // Please remember to exclude yourself, or you will always align with yourself.
-    set.delete(target);
-    return set;
-  },
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-// You can customize the alignment point, the example only aligns the TL control point
-new AligningGuidelines(myCanvas, {
-  getPointMap: function (target) {
-    const tl = target.getCoords().tl;
-    return { tl };
-  },
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-import { InteractiveFabricObject } from 'fabric';
-
-// deactivate constructor control assignment
-InteractiveFabricObject.createControls = function () {
-  return {};
-};
-// custom controllers
-InteractiveFabricObject.ownDefaults.controls = {
-  abc: new Control({}),
-};
-
-// You can set control points for custom controllers
-new AligningGuidelines(myCanvas, {
-  getPointMap: function (target) {
-    const abc = target.getCoords().tl;
-    return { abc };
-  },
-  getContraryMap: function (target) {
-    const abc = target.aCoords.br;
-    return { abc };
-  },
-  contraryOriginMap: {
-    // If abc is the top-left point, then the reference point is the bottom-right.
-    abc: ['right', 'bottom'],
-  },
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-// You can close all
-new AligningGuidelines(myCanvas, {
-  closeVLine: true,
-  closeHLine: true,
-  getPointMap: function (_) {
-    return {};
-  },
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-// You can set dashed lines.
-// You can adjust the size of endpoint x.
-new AligningGuidelines(myCanvas, {
-  lineDash: [2, 2],
-  xSize: 10,
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-// You can customize drawing line segments. What if you want to draw a Bézier curve?
-new AligningGuidelines(myCanvas, {
-  drawLine(origin, target) {
-    const ctx = this.canvas.getTopContext();
-    const viewportTransform = this.canvas.viewportTransform;
-    const zoom = this.canvas.getZoom();
-
-    ctx.save();
-    ctx.transform(...viewportTransform);
-    ctx.lineWidth = this.width / zoom;
-    if (this.lineDash) ctx.setLineDash(this.lineDash);
-    ctx.strokeStyle = this.color;
-
-    ctx.beginPath();
-    ctx.moveTo(origin.x, origin.y);
-    const controlPoint1 = { x: (origin.x + target.x) / 3, y: origin.y - 50 }; // 控制点1
-    const controlPoint2 = { x: (origin.x + target.x) / 3, y: target.y + 50 }; // 控制点2
-    ctx.bezierCurveTo(
-      controlPoint1.x,
-      controlPoint1.y,
-      controlPoint2.x,
-      controlPoint2.y,
-      target.x,
-      target.y,
-    );
-    ctx.stroke();
-
-    if (this.lineDash) ctx.setLineDash([]);
-
-    this.drawX(origin, -1);
-    this.drawX(target, 1);
-
-    ctx.restore();
-  },
-});
-```
-
-```ts
-import { AligningGuidelines } from 'fabric/extensions';
-
-// If you don't like the endpoints being "X," you can customize the endpoints. For example, the start point can be a solid circle, and the end point can be a hollow circle.
-new AligningGuidelines(myCanvas, {
-  drawX(point: Point, dir: number) {
-    const ctx = this.canvas.getTopContext();
-    const zoom = this.canvas.getZoom();
-    const size = this.xSize / zoom;
-
-    ctx.save();
-    ctx.translate(point.x, point.y);
-    ctx.beginPath();
-    ctx.arc(0, 0, size, 0, Math.PI * 2);
-    if (dir == -1) {
-      ctx.fillStyle = this.color;
-      ctx.fill();
-    } else {
-      ctx.stroke();
-    }
-    ctx.restore();
-  },
-});
-```

package/extensions/aligning_guidelines/index.ts

@@ -1,263 +0,0 @@
-import {
-  type BasicTransformEvent,
-  type Canvas,
-  type FabricObject,
-  type Point,
-  util,
-} from 'fabric';
-import {
-  collectHorizontalPoint,
-  collectVerticalPoint,
-} from './util/collect-point';
-import {
-  drawHorizontalLine,
-  drawLine,
-  drawPointList,
-  drawVerticalLine,
-  drawX,
-} from './util/draw';
-import { collectLine } from './util/collect-line';
-import type { AligningLineConfig, OriginMap } from './typedefs';
-import { getObjectsByTarget } from './util/get-objects-by-target';
-import { getContraryMap, getPointMap } from './util/basic';
-
-type TransformEvent = BasicTransformEvent & {
-  target: FabricObject;
-};
-
-export class AligningGuidelines {
-  canvas: Canvas;
-  horizontalLines = new Set<string>();
-  verticalLines = new Set<string>();
-  cacheMap = new Map<string, Point[]>();
-  /**
-   * When we drag to resize using center points like mt, ml, mb, and mr,
-   * we do not need to draw line segments; we only need to draw the target points.
-   */
-  onlyDrawPoint = false;
-  /** Alignment method is required when customizing. */
-  contraryOriginMap: OriginMap = {
-    tl: ['right', 'bottom'],
-    tr: ['left', 'bottom'],
-    br: ['left', 'top'],
-    bl: ['right', 'top'],
-    mt: ['center', 'bottom'],
-    mr: ['left', 'center'],
-    mb: ['center', 'top'],
-    ml: ['right', 'center'],
-  };
-  xSize = 2.4;
-  lineDash: number[] | undefined;
-  /** At what distance from the shape does alignment begin? */
-  margin = 4;
-  /** Aligning line dimensions */
-  width = 1;
-  /** Aligning line color */
-  color = 'rgba(255,0,0,0.9)';
-  /** Close Vertical line, default false. */
-  closeVLine = false;
-  /** Close horizontal line, default false. */
-  closeHLine = false;
-
-  constructor(canvas: Canvas, options: Partial<AligningLineConfig> = {}) {
-    this.canvas = canvas;
-    Object.assign(this, options);
-
-    this.mouseUp = this.mouseUp.bind(this);
-    this.scalingOrResizing = this.scalingOrResizing.bind(this);
-    this.moving = this.moving.bind(this);
-    this.beforeRender = this.beforeRender.bind(this);
-    this.afterRender = this.afterRender.bind(this);
-
-    this.initBehavior();
-  }
-  initBehavior() {
-    this.canvas.on('mouse:up', this.mouseUp);
-    this.canvas.on('object:resizing', this.scalingOrResizing);
-    this.canvas.on('object:scaling', this.scalingOrResizing);
-    this.canvas.on('object:moving', this.moving);
-    this.canvas.on('before:render', this.beforeRender);
-    this.canvas.on('after:render', this.afterRender);
-  }
-  /** Returns shapes that can draw aligning lines, default returns all shapes on the canvas excluding groups. */
-  getObjectsByTarget(target: FabricObject) {
-    return getObjectsByTarget(target);
-  }
-  /** When the user customizes the controller, this property is set to enable or disable automatic alignment through point scaling/resizing. */
-  getPointMap(target: FabricObject) {
-    return getPointMap(target);
-  }
-  /** When the user customizes the controller, this property is used to enable or disable alignment positioning through points. */
-  getContraryMap(target: FabricObject) {
-    return getContraryMap(target);
-  }
-  /** Users can customize. */
-  getCaCheMapValue(object: FabricObject) {
-    const cacheKey = [
-      object.calcTransformMatrix().toString(),
-      object.width,
-      object.height,
-    ].join();
-    const cacheValue = this.cacheMap.get(cacheKey);
-    if (cacheValue) return cacheValue;
-    const value = object.getCoords();
-    value.push(object.getCenterPoint());
-    this.cacheMap.set(cacheKey, value);
-    return value;
-  }
-  drawLine(origin: Point, target: Point) {
-    drawLine.call(this, origin, target);
-  }
-  drawX(point: Point, dir: number) {
-    drawX.call(this, point, dir);
-  }
-  mouseUp() {
-    this.verticalLines.clear();
-    this.horizontalLines.clear();
-    this.cacheMap.clear();
-    this.canvas.requestRenderAll();
-  }
-
-  scalingOrResizing(e: TransformEvent) {
-    const target = e.target;
-    // We need to obtain the real-time coordinates of the current object, so we need to update them in real-time
-    target.setCoords();
-    // The value of action can be scaleX, scaleY, scale, resize, etc.
-    // If it does not start with "scale," it is considered a modification of size.
-    const isScale = String(e.transform.action).startsWith('scale');
-    this.verticalLines.clear();
-    this.horizontalLines.clear();
-
-    const objects = this.getObjectsByTarget(target);
-    // When the shape is flipped, the tl obtained through getCoords is actually tr,
-    // and tl is actually tr. We need to make correction adjustments.
-    // tr <-> tl、 bl <-> br、  mb <-> mt、 ml <-> mr
-    let corner = e.transform.corner;
-    if (target.flipX) {
-      if (corner.includes('l')) corner = corner.replace('l', 'r');
-      else if (corner.includes('r')) corner = corner.replace('r', 'l');
-    }
-    if (target.flipY) {
-      if (corner.includes('t')) corner = corner.replace('t', 'b');
-      else if (corner.includes('b')) corner = corner.replace('b', 't');
-    }
-
-    // Obtain the coordinates of the current operation point through the value of corner.
-    // users can be allowed to customize and pass in custom corners.
-    const pointMap = this.getPointMap(target);
-    if (!(corner in pointMap)) return;
-    this.onlyDrawPoint = corner.includes('m');
-    if (this.onlyDrawPoint) {
-      const angle = target.getTotalAngle();
-      // When the shape is rotated, it is meaningless to draw points using the center point.
-      if (angle % 90 != 0) return;
-    }
-    // If manipulating tl, then when the shape changes size, it should be positioned by br,
-    // and the same applies to others.
-    // users can be allowed to customize and pass in custom corners.
-    const contraryMap = this.getContraryMap(target);
-    const point = pointMap[corner];
-    let diagonalPoint = contraryMap[corner];
-    // When holding the centerKey (default is altKey), the shape will scale based on the center point, with the reference point being the center.
-    const isCenter =
-      e.transform.original.originX == 'center' &&
-      e.transform.original.originY == 'center';
-    if (isCenter) {
-      const p = target.group
-        ? point.transform(
-            util.invertTransform(target.group.calcTransformMatrix()),
-          )
-        : point;
-      diagonalPoint = diagonalPoint.add(p).scalarDivide(2);
-    }
-    const uniformIsToggled = e.e[this.canvas.uniScaleKey!];
-    let isUniform =
-      (this.canvas.uniformScaling && !uniformIsToggled) ||
-      (!this.canvas.uniformScaling && uniformIsToggled);
-    // When controlling through the center point,
-    // if isUniform is true, it actually changes the skew, so it is meaningless.
-    if (this.onlyDrawPoint) isUniform = false;
-
-    const list: Point[] = [];
-    for (const object of objects) {
-      const d = this.getCaCheMapValue(object);
-      list.push(...d);
-    }
-
-    const props = {
-      target,
-      point,
-      diagonalPoint,
-      corner,
-      list,
-      isScale,
-      isUniform,
-      isCenter,
-    };
-
-    // Obtain horizontal and vertical reference lines.
-    const noNeedToCollectV =
-      this.onlyDrawPoint && (corner.includes('t') || corner.includes('b'));
-    const noNeedToCollectH =
-      this.onlyDrawPoint && (corner.includes('l') || corner.includes('r'));
-    const vList = noNeedToCollectV
-      ? []
-      : collectVerticalPoint.call(this, props);
-    const hList = noNeedToCollectH
-      ? []
-      : collectHorizontalPoint.call(this, props);
-    vList.forEach((o) => {
-      // Objects cannot be deduplicated; convert them to strings for deduplication.
-      this.verticalLines.add(JSON.stringify(o));
-    });
-    hList.forEach((o) => {
-      // Objects cannot be deduplicated; convert them to strings for deduplication.
-      this.horizontalLines.add(JSON.stringify(o));
-    });
-  }
-  moving(e: TransformEvent) {
-    const target = e.target;
-    // We need to obtain the real-time coordinates of the current object, so we need to update them in real-time
-    target.setCoords();
-    this.onlyDrawPoint = false;
-    this.verticalLines.clear();
-    this.horizontalLines.clear();
-
-    // Find the shapes associated with the current graphic to draw reference lines for it.
-    const objects = this.getObjectsByTarget(target);
-    const points: Point[] = [];
-    // Collect all the points to draw reference lines.
-    for (const object of objects) points.push(...this.getCaCheMapValue(object));
-
-    // Obtain horizontal and vertical reference lines.
-    const { vLines, hLines } = collectLine.call(this, target, points);
-    vLines.forEach((o) => {
-      // Objects cannot be deduplicated; convert them to strings for deduplication.
-      this.verticalLines.add(JSON.stringify(o));
-    });
-    hLines.forEach((o) => {
-      // Objects cannot be deduplicated; convert them to strings for deduplication.
-      this.horizontalLines.add(JSON.stringify(o));
-    });
-  }
-  beforeRender() {
-    this.canvas.clearContext(this.canvas.contextTop);
-  }
-  afterRender() {
-    if (this.onlyDrawPoint) {
-      drawPointList.call(this);
-    } else {
-      drawVerticalLine.call(this);
-      drawHorizontalLine.call(this);
-    }
-  }
-
-  dispose() {
-    this.canvas.off('mouse:up', this.mouseUp);
-    this.canvas.off('object:resizing', this.scalingOrResizing);
-    this.canvas.off('object:scaling', this.scalingOrResizing);
-    this.canvas.off('object:moving', this.moving);
-    this.canvas.off('before:render', this.beforeRender);
-    this.canvas.off('after:render', this.afterRender);
-  }
-}

package/extensions/aligning_guidelines/typedefs.ts

@@ -1,41 +0,0 @@
-import type { FabricObject, Point, TOriginX, TOriginY } from 'fabric';
-
-export type LineProps = {
-  origin: Point;
-  target: Point;
-};
-
-export type PointMap = { [props: string]: Point };
-
-export type OriginMap = { [props: string]: [TOriginX, TOriginY] };
-
-export type AligningLineConfig = {
-  /** At what distance from the shape does alignment begin? */
-  margin: number;
-  /** Aligning line dimensions */
-  width: number;
-  /** Aligning line color */
-  color: string;
-  /** The size of endpoint x, default is 2.4 */
-  xSize: number;
-  /** Dashed Line Style */
-  lineDash: number[] | undefined;
-  /** Close Vertical line, default false. */
-  closeVLine: boolean;
-  /** Close horizontal line, default false. */
-  closeHLine: boolean;
-  /** Returns shapes that can draw aligning lines, default returns all shapes on the canvas excluding groups. */
-  getObjectsByTarget?: (target: FabricObject) => Set<FabricObject>;
-  /** When the user customizes the controller, this property is set to enable or disable automatic alignment through point scaling/resizing. */
-  getPointMap?: (target: FabricObject) => PointMap;
-  /** When the user customizes the controller, this property is used to enable or disable alignment positioning through points. */
-  getContraryMap?: (target: FabricObject) => PointMap;
-  /** Alignment method is required when customizing. */
-  contraryOriginMap?: OriginMap;
-  /** Custom Line Drawing */
-  drawLine?: (origin: Point, target: Point) => void;
-  /** Custom Endpoint Drawing */
-  drawX?: (point: Point, dir: number) => void;
-  /** When moving a shape, the coordinates of other shapes are calculated only once. You can customize how to cache or clear them */
-  getCaCheMapValue?: Point[];
-};