@hprint/plugins 0.0.9-alpha.1 → 0.0.11-alpha.1

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';