@hprint/plugins 0.0.9-alpha.0 → 0.0.10

package/src/plugins/QrCodePlugin.ts

@@ -45,11 +45,29 @@ class QrCodePlugin implements IPluginTempl {
         }
     }
 
-    async hookTransformObjectEnd({ originObject, fabricObject }: { originObject: any, fabricObject: any }) {
-        if (originObject.extensionType === 'qrcode') {
-            this.initQrcodeEvents(fabricObject);
-        }
-    }
+    async hookTransformObjectEnd({ originObject, fabricObject }: { originObject: any, fabricObject: any }) {
+        if (originObject.extensionType === 'qrcode') {
+            this.initQrcodeEvents(fabricObject);
+        }
+    }
+
+    async hookImportAfter() {
+        const qrcodeObjects = this.canvas
+            .getObjects()
+            .filter(
+                (obj: any) =>
+                    obj.type === 'image' && obj.extensionType === 'qrcode'
+            ) as fabric.Image[];
+
+        await Promise.all(
+            qrcodeObjects.map(async (imgEl) => {
+                this.initQrcodeEvents(imgEl);
+                await this._updateQrCodeImage(imgEl, true);
+            })
+        );
+
+        this.canvas.renderAll();
+    }
 
     async _getQrCodeResult(options: any): Promise<{ url: string; width: number; height: number }> {
         const zoom = this.canvas.getZoom() || 1;
@@ -123,11 +141,11 @@ class QrCodePlugin implements IPluginTempl {
         return options;
     }
 
-    private async _updateQrCodeImage(imgEl: fabric.Image, immediate = false) {
-        const extension = imgEl.get('extension');
-        if (!extension) return;
-        const updateFn = async () => {
-            const currentWidth = imgEl.getScaledWidth();
+    private async _updateQrCodeImage(imgEl: fabric.Image, immediate = false) {
+        const extension = imgEl.get('extension');
+        if (!extension) return;
+        const updateFn = async () => {
+            const currentWidth = imgEl.getScaledWidth();
             const currentHeight = imgEl.getScaledHeight();
             const size = Math.max(currentWidth, currentHeight);
             const options = {
@@ -135,11 +153,11 @@ class QrCodePlugin implements IPluginTempl {
                 width: size,
                 height: size,
             };
-            const paramsOption = this._paramsToOption(options);
-            try {
-                const url = await this._getBase64Str(paramsOption);
-                await new Promise<void>((resolve) => {
-                    imgEl.setSrc(url, () => {
+            const paramsOption = this._paramsToOption(options);
+            try {
+                const url = await this._getBase64Str(paramsOption);
+                await new Promise<void>((resolve) => {
+                    imgEl.setSrc(url, () => {
                         this._setImageScale(imgEl, currentWidth, currentHeight);
                         imgEl.set('extension', options);
                         this.canvas.renderAll();

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