@hprint/plugins 0.0.9-alpha.0 → 0.0.10

package/src/plugins/ControlsPlugin.ts

@@ -4,7 +4,12 @@ import verticalImg from '../assets/middlecontrol.svg?url';
 import horizontalImg from '../assets/middlecontrolhoz.svg?url';
 import edgeImg from '../assets/edgecontrol.svg?url';
 import rotateImg from '../assets/rotateicon.svg?url';
-import type { IEditor, IPluginTempl } from '@hprint/core';
+import type { IEditor, IPluginOption, IPluginTempl } from '@hprint/core';
+
+interface ControlsPluginOptions extends IPluginOption {
+    /** 是否禁用多选对象的整体缩放，默认保留 Fabric 的缩放能力。 */
+    disableActiveSelectionScaling?: boolean;
+}
 
 /**
  * 实际场景: 在进行某个对象缩放的时候，由于fabricjs默认精度使用的是toFixed(2)。
@@ -224,13 +229,14 @@ function rotationControl() {
     });
 }
 
-class ControlsPlugin implements IPluginTempl {
-    static pluginName = 'ControlsPlugin';
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {
-        this.init();
+class ControlsPlugin implements IPluginTempl {
+    static pluginName = 'ControlsPlugin';
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor,
+        private options: ControlsPluginOptions = {}
+    ) {
+        this.init();
     }
     init() {
         // 删除图标
@@ -274,7 +280,39 @@ class ControlsPlugin implements IPluginTempl {
     /**
      * 自定义多选控制点，添加白色填充并确保在边框上方
      */
-    customizeActiveSelection() {
+    customizeActiveSelection() {
+        const shouldDisableActiveSelectionScaling =
+            this.options.disableActiveSelectionScaling === true;
+        const scaleControlVisibility = {
+            tl: false,
+            tr: false,
+            bl: false,
+            br: false,
+            ml: false,
+            mr: false,
+            mt: false,
+            mb: false,
+        };
+
+        const disableActiveSelectionScaling = (target?: fabric.Object) => {
+            if (!shouldDisableActiveSelectionScaling) return;
+
+            const activeObject = target || this.canvas.getActiveObject();
+            if (!activeObject || activeObject.type !== 'activeSelection') return;
+
+            if (!activeObject.lockScalingX || !activeObject.lockScalingY) {
+                activeObject.set({
+                    lockScalingX: true,
+                    lockScalingY: true,
+                });
+            }
+            Object.entries(scaleControlVisibility).forEach(([key, visible]) => {
+                if (activeObject.isControlVisible(key) !== visible) {
+                    activeObject.setControlVisible(key, visible);
+                }
+            });
+        };
+
         // 自定义控制点渲染函数
         const renderCircleControl = (
             ctx: CanvasRenderingContext2D,
@@ -326,25 +364,37 @@ class ControlsPlugin implements IPluginTempl {
             }
         });
 
-        // 应用样式配置
-        fabric.ActiveSelection.prototype.set(CONTROL_STYLES);
+        // hprint 默认保留多选缩放；由业务方按编辑器实例决定是否关闭。
+        fabric.ActiveSelection.prototype.set(CONTROL_STYLES);
+        if (shouldDisableActiveSelectionScaling) {
+            this.canvas.on('selection:created', (e: any) => {
+                disableActiveSelectionScaling(e.target);
+            });
+            this.canvas.on('selection:updated', (e: any) => {
+                disableActiveSelectionScaling(e.target);
+            });
+            // 覆盖鼠标框选和代码创建 ActiveSelection 未经过选择事件的情况。
+            this.canvas.on('before:render', () => {
+                disableActiveSelectionScaling();
+            });
+        }
         
-        // 跟踪是否正在移动或缩放对象
-        let isTransforming = false;
+        // 跟踪是否正在移动、缩放或旋转对象
+        let isTransforming = false;
         
         // 监听对象移动开始
-        this.canvas.on('object:moving', (e: any) => {
+        this.canvas.on('object:moving', (e: any) => {
             if (e.target && e.target.type === 'activeSelection') {
                 isTransforming = true;
             }
-        });
-        
-        // 监听对象缩放开始
-        this.canvas.on('object:scaling', (e: any) => {
-            if (e.target && e.target.type === 'activeSelection') {
-                isTransforming = true;
-            }
-        });
+        });
+
+        // 未关闭多选缩放时，缩放期间不重复绘制控制点。
+        this.canvas.on('object:scaling', (e: any) => {
+            if (e.target && e.target.type === 'activeSelection') {
+                isTransforming = true;
+            }
+        });
         
         // 监听对象旋转开始
         this.canvas.on('object:rotating', (e: any) => {
@@ -371,7 +421,7 @@ class ControlsPlugin implements IPluginTempl {
         
         // 监听canvas的after:render事件，在所有内容渲染完成后额外绘制多选控制点
         this.canvas.on('after:render', () => {
-            // 如果正在变换（移动、缩放、旋转），不绘制控制点
+            // 如果正在变换（移动、旋转），不绘制控制点
             if (isTransforming) return;
             
             const activeObject = this.canvas.getActiveObject();

package/src/plugins/CreateElementPlugin.ts

@@ -314,7 +314,7 @@ class CreateElementPlugin implements IPluginTempl {
             }
             return originalSet(key, value);
         };
-        (obj as any).syncOriginSizeByUnit = function (fieldsOrDpi?: any, dpi?: number) {
+        (obj as any).syncOriginSizeByUnit = function (fieldsOrDpi?: any, dpi?: number) {
             const unit = getUnit(editorRef);
             if (unit === 'px') return;
             const hasFieldsArray = Array.isArray(fieldsOrDpi);
@@ -325,10 +325,10 @@ class CreateElementPlugin implements IPluginTempl {
             const isLineObject = (this as any).type === 'line' || (this as any).type === 'arrow' || (this as any).type === 'thinTailArrow';
             const targetFields: string[] =
                 hasFieldsArray && (fieldsOrDpi as string[])?.length ? (fieldsOrDpi as string[]) : singleFields;
-            targetFields.forEach((field) => {
-                if (field === 'points') return;
-                let currentVal: number | undefined;
-                if (isImageObject && (field === 'width' || field === 'height')) {
+            targetFields.forEach((field) => {
+                if (field === 'points') return;
+                let currentVal: number | undefined;
+                if (isImageObject && (field === 'width' || field === 'height')) {
                     if (field === 'width') {
                         currentVal = (this as any).getScaledWidth?.();
                     } else {

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/HistoryPlugin.ts

@@ -86,7 +86,11 @@ class HistoryPlugin implements IPluginTempl {
     // 加载状态
     private _loadState(state: string, eventName: string, callback?: callback) {
         this.isLoading = true;
-        this.isProcessing = true;
+        this.isProcessing = true;
+        const activeIds = this.canvas
+            .getActiveObjects()
+            .map((object: any) => object?.id)
+            .filter(Boolean);
 
         // 处理 workspace 的特殊情况
         const parsedState = JSON.parse(state);
@@ -97,17 +101,53 @@ class HistoryPlugin implements IPluginTempl {
             workspace.evented = false;
         }
 
-        this.canvas.loadFromJSON(state, () => {
-            this.canvas.renderAll();
-            this.canvas.fire(eventName);
-            this.isProcessing = false;
-            this.isLoading = false;
-            callback?.();
-        });
-    }
-
-    // 获取历史记录状态
-    private getState() {
+        const hookPromises: Promise<void>[] = [];
+        this.canvas.loadFromJSON(
+            state,
+            () => {
+                Promise.all(hookPromises).then(() => {
+                    this.restoreActiveObjects(activeIds);
+                    this.canvas.renderAll();
+                    this.canvas.fire(eventName);
+                    this.isProcessing = false;
+                    this.isLoading = false;
+                    callback?.();
+                });
+            },
+            (originObject: any, fabricObject: fabric.Object) => {
+                hookPromises.push(
+                    new Promise((resolve) => {
+                        this.editor.hooksEntity.hookTransformObjectEnd.callAsync(
+                            { originObject, fabricObject },
+                            () => resolve()
+                        );
+                    })
+                );
+            }
+        );
+    }
+
+    private restoreActiveObjects(activeIds: string[]) {
+        this.canvas.discardActiveObject();
+        if (!activeIds.length) return;
+
+        const objects = this.canvas
+            .getObjects()
+            .filter((object: any) => activeIds.includes(object?.id));
+        if (objects.length === 1) {
+            this.canvas.setActiveObject(objects[0]);
+            return;
+        }
+        if (objects.length > 1) {
+            const selection = new fabric.ActiveSelection(objects, {
+                canvas: this.canvas,
+            });
+            this.canvas.setActiveObject(selection);
+        }
+    }
+
+    // 获取历史记录状态
+    private getState() {
         return {
             undoCount: this.currentIndex - 1,
             redoCount: this.stack.length - this.currentIndex,