fix: aligning

fabricjs · Sep 10, 2024 · 326e756 · 326e756
1 parent c1054f1
commit 326e756
Showing 1 changed file with 7 additions and 35 deletions.
diff --git a/extensions/aligning_guidelines/util/collect-point.ts b/extensions/aligning_guidelines/util/collect-point.ts
@@ -1,4 +1,4 @@
-import type { FabricObject, Point, TOriginX, TOriginY } from 'fabric';
+import type { FabricObject, Point } from 'fabric';
 import { aligningLineConfig } from '../constant';
 import { getDistance } from './basic';
 
@@ -15,8 +15,6 @@ type CollectPointProps = {
   /** Which specific point to operate on, 0-3 correspond to top-left, top-right, bottom-right, bottom-left */
   index: number;
 };
-const originXArr: TOriginX[] = ['left', 'center', 'right'];
-const originYArr: TOriginY[] = ['top', 'center', 'bottom'];
 
 export function collectVerticalPoint(props: CollectPointProps) {
   const aligningLineMargin = aligningLineConfig.margin;
@@ -27,28 +25,20 @@ export function collectVerticalPoint(props: CollectPointProps) {
   let v = arr[arr.length - 1].x - point.x;
   // To the left or to the right?
   const dirX = index == 0 || index == 3 ? -1 : 1;
-  // To the top or to the bottom?
-  const dirY = index < 2 ? -1 : 1;
   v *= dirX;
 
-  const { width, height, scaleX, scaleY, left, top } = activeObject;
+  const { width, height, scaleX, scaleY } = activeObject;
   const dim = activeObject._getTransformedDimensions();
   const sx = (v + dim.x) / dim.x;
+  const tl = activeObject.aCoords.tl;
   if (isScale) {
     activeObject.set('scaleX', scaleX * sx);
     if (isUniform) activeObject.set('scaleY', scaleY * sx);
   } else {
     activeObject.set('width', width * sx);
     if (isUniform) activeObject.set('height', height * sx);
   }
-  const dx = getDisByOriginX(activeObject, v * dirX);
-  if (isUniform) {
-    const h = activeObject._getTransformedDimensions().y - dim.y;
-    const dy = getDisByOriginY(activeObject, h * dirY);
-    activeObject.set('top', top + dy);
-  }
-  activeObject.set('left', left + dx);
-
+  activeObject.setRelativeXY(tl, 'left', 'top');
   activeObject.setCoords();
   return arr.map((item) => ({
     x: item.x,
@@ -64,29 +54,22 @@ export function collectHorizontalPoint(props: CollectPointProps) {
   const margin = aligningLineMargin / (activeObject.canvas?.getZoom() ?? 1);
   if (dis > margin) return [];
   let v = arr[arr.length - 1].y - point.y;
-  // To the left or to the right?
-  const dirX = index == 0 || index == 3 ? -1 : 1;
   // To the top or to the bottom?
   const dirY = index < 2 ? -1 : 1;
   v *= dirY;
 
-  const { width, height, scaleX, scaleY, left, top } = activeObject;
+  const { width, height, scaleX, scaleY } = activeObject;
   const dim = activeObject._getTransformedDimensions();
   const sy = (v + dim.y) / dim.y;
+  const tl = activeObject.aCoords.tl;
   if (isScale) {
     activeObject.set('scaleY', scaleY * sy);
     if (isUniform) activeObject.set('scaleX', scaleX * sy);
   } else {
     activeObject.set('height', height * sy);
     if (isUniform) activeObject.set('width', width * sy);
   }
-  const dy = getDisByOriginY(activeObject, v * dirY);
-  if (isUniform) {
-    const w = activeObject._getTransformedDimensions().x - dim.x;
-    const dx = getDisByOriginX(activeObject, w * dirX);
-    activeObject.set('left', left + dx);
-  }
-  activeObject.set('top', top + dy);
+  activeObject.setRelativeXY(tl, 'left', 'top');
   activeObject.setCoords();
   return arr.map((item) => ({
     y: item.y,
@@ -110,14 +93,3 @@ function getDistanceList(point: Point, list: Point[], type: 'x' | 'y') {
   }
   return { dis, arr };
 }
-
-function getDisByOriginX(target: FabricObject, v: number) {
-  const dArr = [0, v / 2, v];
-  if (v < 0) dArr.reverse();
-  return dArr[originXArr.indexOf(target.originX)];
-}
-function getDisByOriginY(target: FabricObject, v: number) {
-  const dArr = [0, v / 2, v];
-  if (v < 0) dArr.reverse();
-  return dArr[originYArr.indexOf(target.originY)];
-}