@hprint/plugins 0.0.9-alpha.1 → 0.0.10

package/src/plugins/GroupAlignPlugin.ts

@@ -1,5 +1,5 @@
-import { fabric } from '@hprint/core';
-import type { IEditor, IPluginTempl } from '@hprint/core';
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
 
 type IPlugin = Pick<
     GroupAlignPlugin,
@@ -31,10 +31,22 @@ class GroupAlignPlugin implements IPluginTempl {
         'yequation',
     ];
     // public hotkeys: string[] = ['space'];
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) { }
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) { }
+
+    _refreshObjectCoordinates(objects: fabric.Object[]) {
+        objects.forEach((item) => {
+            item.setCoords();
+            (item as any).syncOriginSizeByUnit?.(['left', 'top']);
+        });
+    }
+
+    _notifySelectionModified(selection: fabric.ActiveSelection) {
+        this.canvas.fire('object:modified', { target: selection });
+        this.canvas.requestRenderAll();
+    }
 
     left() {
         const { canvas } = this;
@@ -51,15 +63,16 @@ class GroupAlignPlugin implements IPluginTempl {
                 });
                 item.setCoords();
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
-    right() {
+    right() {
         const { canvas } = this;
 
         const activeObject = canvas.getActiveObject();
@@ -77,15 +90,16 @@ class GroupAlignPlugin implements IPluginTempl {
                         Number(item.left),
                 });
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
-    xcenter() {
+    xcenter() {
         const { canvas } = this;
 
         const activeObject = canvas.getActiveObject();
@@ -103,15 +117,16 @@ class GroupAlignPlugin implements IPluginTempl {
                         Number(item.left),
                 });
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
-    ycenter() {
+    ycenter() {
         const { canvas } = this;
 
         const activeObject = canvas.getActiveObject();
@@ -129,15 +144,16 @@ class GroupAlignPlugin implements IPluginTempl {
                         Number(item.top),
                 });
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
-    top() {
+    top() {
         const { canvas } = this;
 
         const activeObject = canvas.getActiveObject();
@@ -151,15 +167,16 @@ class GroupAlignPlugin implements IPluginTempl {
                     top: top - bounding.top + Number(item.top),
                 });
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
-    bottom() {
+    bottom() {
         const { canvas } = this;
 
         const activeObject = canvas.getActiveObject();
@@ -177,11 +194,12 @@ class GroupAlignPlugin implements IPluginTempl {
                         Number(item.top),
                 });
             });
-            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+            this._refreshObjectCoordinates(selectObjects);
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
                 canvas: canvas,
             });
             canvas.setActiveObject(activeSelection);
-            canvas.requestRenderAll();
+            this._notifySelectionModified(activeSelection);
         }
     }
 
@@ -256,21 +274,23 @@ class GroupAlignPlugin implements IPluginTempl {
 
         const objecs = canvas.getActiveObjects();
         canvas.discardActiveObject();
-        objecs.forEach((item: fabric.Object) => {
-            let x = Infinity;
+        objecs.forEach((item: fabric.Object) => {
+            let x = Infinity;
             for (const key in item.aCoords) {
                 if (item.aCoords[key].x < x) {
                     x = item.aCoords[key].x;
                 }
             }
-            item.set('left', 2 * item.left - x);
-        });
-
-        const sel = new fabric.ActiveSelection(objecs, {
+            item.set('left', 2 * item.left - x);
+        });
+
+        this._refreshObjectCoordinates(objecs);
+
+        const sel = new fabric.ActiveSelection(objecs, {
             canvas: canvas,
         });
         canvas.setActiveObject(sel);
-        canvas.requestRenderAll();
+        this._notifySelectionModified(sel);
     }
 
     yequation() {
@@ -340,21 +360,23 @@ class GroupAlignPlugin implements IPluginTempl {
 
         const objecs = canvas.getActiveObjects();
         canvas.discardActiveObject();
-        objecs.forEach((item) => {
-            let y = Infinity;
+        objecs.forEach((item) => {
+            let y = Infinity;
             for (const key in item.aCoords) {
                 if (item.aCoords[key].y < y) {
                     y = item.aCoords[key].y;
                 }
             }
-            item.set('top', 2 * item.top - y);
-        });
-
-        const sel = new fabric.ActiveSelection(objecs, {
+            item.set('top', 2 * item.top - y);
+        });
+
+        this._refreshObjectCoordinates(objecs);
+
+        const sel = new fabric.ActiveSelection(objecs, {
             canvas: canvas,
         });
         canvas.setActiveObject(sel);
-        canvas.requestRenderAll();
+        this._notifySelectionModified(sel);
     }
 
     destroy() {

package/src/plugins/UnitPlugin.ts

@@ -1,7 +1,6 @@
-import type { IEditor, IPluginTempl } from '@hprint/core';
-import { LengthConvert } from '@hprint/shared';
-import { syncMmFromObject } from '../utils/units';
-import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { LengthConvert } from '@hprint/shared';
+import { fabric } from '@hprint/core';
 import { throttle } from 'lodash-es';
 
 type IPlugin = Pick<
@@ -305,14 +304,17 @@ class UnitPlugin implements IPluginTempl {
         }
     }
 
-    _bindEvents() {
-        const throttledSync = throttle((obj: fabric.Object) => {
-            syncMmFromObject(obj, undefined, this.precision);
-        }, 30);
-
-        this.canvas.on('object:modified', (e: any) => {
-            const target = e.target as fabric.Object | undefined;
-            if (target) syncMmFromObject(target, undefined, this.precision);
+    _bindEvents() {
+        const throttledSync = throttle((obj: fabric.Object) => {
+            // 多选坐标只需在 object:modified 时同步，避免拖动过程中反复创建计算对象。
+            if (obj.type !== 'activeSelection') {
+                (obj as any).syncOriginSizeByUnit?.();
+            }
+        }, 30);
+
+        this.canvas.on('object:modified', (e: any) => {
+            const target = e.target as fabric.Object | undefined;
+            if (target) this._syncTargetOriginSize(target);
         });
 
         this.canvas.on('object:moving', (e: any) => {
@@ -330,15 +332,46 @@ class UnitPlugin implements IPluginTempl {
             if (target) throttledSync(target);
         });
 
-        this.editor.on?.('sizeChange', (event: { width: number, height: number }) => {
+        this.editor.on?.('sizeChange', (event: { width: number, height: number }) => {
             const unit = this.getUnit();
             if (unit === 'px') return;
             if (unit === 'mm') {
                 this._syncOriginSize(event.width, event.height);
                 return
             }
-        });
-    }
+        });
+    }
+
+    _syncTargetOriginSize(target: fabric.Object) {
+        if (target.type !== 'activeSelection') {
+            (target as any).syncOriginSizeByUnit?.();
+            return;
+        }
+
+        // 将 ActiveSelection 的平移和旋转真正应用到每个子元素。
+        // 之后重新创建选区，避免子元素继续保留相对于旧选区的坐标。
+        const objects = (target as fabric.ActiveSelection).getObjects();
+        const absoluteAngles = new Map<fabric.Object, number>();
+        objects.forEach((item: fabric.Object) => {
+            // item.angle 在 ActiveSelection 内是相对角度。必须先通过完整变换矩阵
+            // 取得画布上的绝对角度，再销毁选区并写回子元素。
+            const { angle } = fabric.util.qrDecompose(item.calcTransformMatrix());
+            absoluteAngles.set(item, ((angle % 360) + 360) % 360);
+        });
+        this.canvas.discardActiveObject();
+        objects.forEach((item: fabric.Object) => {
+            item.set('angle', absoluteAngles.get(item) ?? 0);
+            item.setCoords();
+            // 仅同步位置；旋转角度已由 ActiveSelection 变换写回 item.angle。
+            (item as any).syncOriginSizeByUnit?.(['left', 'top']);
+        });
+
+        const normalizedSelection = new fabric.ActiveSelection(objects, {
+            canvas: this.canvas,
+        });
+        this.canvas.setActiveObject(normalizedSelection);
+        this.canvas.requestRenderAll();
+    }
 
     destroy() {
         console.log('pluginDestroy');

package/src/utils/units.ts

@@ -49,7 +49,7 @@ export function applyMmToObject(
   };
 }
 
-export function syncMmFromObject(obj: fabric.Object, dpi?: number, precision?: number) {
+export function syncMmFromObject(obj: fabric.Object, dpi?: number, precision?: number) {
   const isImage = obj.type === 'image';
   const toMm = (v: number | undefined) =>
     v === undefined ? undefined : applyPrecision(LengthConvert.pxToMm(v, dpi), precision);
@@ -76,10 +76,10 @@ export function syncMmFromObject(obj: fabric.Object, dpi?: number, precision?: n
       strokeWidth: toMm(strokeWidth),
       fontSize: toMm(fontSize),
     },
-  };
-}
-
-export type UnitType = 'px' | 'mm' | 'inch';
+  };
+}
+
+export type UnitType = 'px' | 'mm' | 'inch';
 
 export function getUnit(editor: IEditor): UnitType {
   return (editor as any).getUnit?.() ?? 'px';