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

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() {