@hprint/plugins 0.0.1-alpha.3 → 0.0.1-alpha.4

package/src/plugins/CopyPlugin.ts

@@ -1,255 +1,255 @@
-import { fabric } from '@hprint/core';
-import { v4 as uuid } from 'uuid';
-import { utils } from '@hprint/shared';
-import type { IEditor, IPluginTempl } from '@hprint/core';
-
-type IPlugin = Pick<CopyPlugin, 'clone'>;
-
-declare module '@hprint/core' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IEditor extends IPlugin {}
-}
-
-class CopyPlugin implements IPluginTempl {
-    static pluginName = 'CopyPlugin';
-    static apis = ['clone'];
-    hotkeys: string[] = ['ctrl+v', 'ctrl+c'];
-    private cache: null | fabric.ActiveSelection | fabric.Object = null;
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {
-        this.initPaste();
-    }
-
-    // 多选对象复制
-    _copyActiveSelection(activeObject: fabric.Object) {
-        // 间距设置
-        const grid = 10;
-        const canvas = this.canvas;
-        const keys = this.editor.getExtensionKey();
-        activeObject?.clone((cloned: fabric.Object) => {
-            // 再次进行克隆，处理选择多个对象的情况
-            cloned.clone((clonedObj: fabric.ActiveSelection) => {
-                canvas.discardActiveObject();
-                if (clonedObj.left === undefined || clonedObj.top === undefined)
-                    return;
-                // 将克隆的画布重新赋值
-                clonedObj.canvas = canvas;
-                // 设置位置信息
-                clonedObj.set({
-                    left: clonedObj.left + grid,
-                    top: clonedObj.top + grid,
-                    evented: true,
-                    id: uuid(),
-                });
-                clonedObj.forEachObject((obj: fabric.Object) => {
-                    obj.id = uuid();
-                    canvas.add(obj);
-                });
-                // 解决不可选择问题
-                clonedObj.setCoords();
-                canvas.setActiveObject(clonedObj);
-                canvas.requestRenderAll();
-            });
-        }, keys);
-    }
-
-    // 单个对象复制
-    _copyObject(activeObject: fabric.Object) {
-        // 间距设置
-        const grid = 10;
-        const canvas = this.canvas;
-        const keys = this.editor.getExtensionKey();
-        activeObject?.clone((cloned: fabric.Object) => {
-            if (cloned.left === undefined || cloned.top === undefined) return;
-            canvas.discardActiveObject();
-            // 设置位置信息
-            cloned.set({
-                left: cloned.left + grid,
-                top: cloned.top + grid,
-                evented: true,
-                id: uuid(),
-            });
-            canvas.add(cloned);
-            canvas.setActiveObject(cloned);
-            canvas.requestRenderAll();
-        }, keys);
-    }
-
-    // 复制元素
-    clone(paramsActiveObeject?: fabric.ActiveSelection | fabric.Object) {
-        const activeObject =
-            paramsActiveObeject || this.canvas.getActiveObject();
-        if (!activeObject) return;
-        if (activeObject?.type === 'activeSelection') {
-            this._copyActiveSelection(activeObject);
-        } else {
-            this._copyObject(activeObject);
-        }
-    }
-
-    // 快捷键扩展回调
-    hotkeyEvent(eventName: string, e: KeyboardEvent) {
-        if (eventName === 'ctrl+c' && e.type === 'keydown') {
-            const activeObject = this.canvas.getActiveObject();
-            this.cache = activeObject;
-            // 清空剪切板
-            navigator.clipboard.writeText('');
-        }
-        if (eventName === 'ctrl+v' && e.type === 'keydown') {
-            // 确保clone元素操作的执行晚于pasteListener
-            setTimeout(() => {
-                if (this.cache) {
-                    this.clone(this.cache);
-                }
-            }, 0);
-        }
-    }
-
-    contextMenu() {
-        const activeObject = this.canvas.getActiveObject();
-        if (activeObject) {
-            return [
-                {
-                    text: '复制',
-                    hotkey: 'Ctrl+V',
-                    disabled: false,
-                    onclick: () => this.clone(),
-                },
-            ];
-        }
-    }
-
-    destroy() {
-        console.log('pluginDestroy');
-        window.removeEventListener('paste', (e) => this.pasteListener(e));
-    }
-
-    initPaste() {
-        window.addEventListener('paste', (e) => this.pasteListener(e));
-    }
-
-    async pasteListener(event: any) {
-        const canvas = this.canvas;
-        if (document.activeElement === document.body) {
-            event.preventDefault(); // 阻止默认粘贴行为
-        } else {
-            return;
-        }
-
-        const items = (event.clipboardData || event.originalEvent.clipboardData)
-            .items;
-        const fileAccept =
-            '.pdf,.psd,.cdr,.ai,.svg,.jpg,.jpeg,.png,.webp,.json';
-        for (const item of items) {
-            if (item.kind === 'file') {
-                const file = item.getAsFile();
-                const curFileSuffix: string | undefined = file.name
-                    .split('.')
-                    .pop();
-                if (!fileAccept.split(',').includes(`.${curFileSuffix}`))
-                    return;
-                if (curFileSuffix === 'svg') {
-                    const svgFile = await utils.getImgStr(file);
-                    if (!svgFile) throw new Error('file is undefined');
-                    fabric.loadSVGFromURL(
-                        svgFile as string,
-                        (objects, options) => {
-                            const item = fabric.util.groupSVGElements(objects, {
-                                ...options,
-                                name: 'defaultSVG',
-                                id: uuid(),
-                            });
-                            canvas.add(item).centerObject(item).renderAll();
-                        }
-                    );
-                }
-                // if (curFileSuffix === 'json') {
-                //   const dataText = await getImageText(file);
-                //   const template = JSON.parse(dataText);
-                //   addTemplate(template);
-                // }
-                if (item.type.indexOf('image/') === 0) {
-                    // 这是一个图片文件
-                    const imageUrl = URL.createObjectURL(file);
-                    const imgEl = document.createElement('img');
-                    imgEl.src = imageUrl;
-                    // 插入页面
-                    document.body.appendChild(imgEl);
-                    imgEl.onload = () => {
-                        // 创建图片对象
-                        const imgInstance = new fabric.Image(imgEl, {
-                            id: uuid(),
-                            name: '图片1',
-                            left: 100,
-                            top: 100,
-                        });
-                        // 设置缩放
-                        canvas.add(imgInstance);
-                        canvas.setActiveObject(imgInstance);
-                        canvas.renderAll();
-                        // 删除页面中的图片元素
-                        imgEl.remove();
-                    };
-                }
-            } else if (
-                item.kind === 'string' &&
-                item.type.indexOf('text/plain') === 0
-            ) {
-                // 文本数据
-                item.getAsString((text: any) => {
-                    // 插入到文本框
-                    const activeObject =
-                        canvas.getActiveObject() as fabric.Textbox;
-                    // 如果是激活的文字把复制的内容插入到对应光标位置
-                    if (
-                        activeObject &&
-                        (activeObject.type === 'textbox' ||
-                            activeObject.type === 'i-text') &&
-                        activeObject.text
-                    ) {
-                        const cursorPosition = activeObject.selectionStart;
-                        const textBeforeCursorPosition =
-                            activeObject.text.substring(0, cursorPosition);
-                        const textAfterCursorPosition =
-                            activeObject.text.substring(
-                                cursorPosition as number
-                            );
-
-                        // 更新文本对象的文本
-                        activeObject.set(
-                            'text',
-                            textBeforeCursorPosition +
-                                text +
-                                textAfterCursorPosition
-                        );
-
-                        // 重新设置光标的位置
-                        activeObject.selectionStart =
-                            cursorPosition + text.length;
-                        activeObject.selectionEnd =
-                            cursorPosition + text.length;
-
-                        // 重新渲染画布展示更新后的文本
-                        activeObject.dirty = true;
-                        canvas.renderAll();
-                    } else {
-                        const fabricText = new fabric.IText(text, {
-                            left: 100,
-                            top: 100,
-                            fontSize: 80,
-                            id: uuid(),
-                        });
-                        canvas.add(fabricText);
-                        canvas.setActiveObject(fabricText);
-                    }
-                });
-            }
-        }
-        // 复制浏览器外的元素时，清空暂存的画布内粘贴元素
-        if (items.length) this.cache = null;
-    }
-}
-
-export default CopyPlugin;
+import { fabric } from '@hprint/core';
+import { v4 as uuid } from 'uuid';
+import { utils } from '@hprint/shared';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<CopyPlugin, 'clone'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class CopyPlugin implements IPluginTempl {
+    static pluginName = 'CopyPlugin';
+    static apis = ['clone'];
+    hotkeys: string[] = ['ctrl+v', 'ctrl+c'];
+    private cache: null | fabric.ActiveSelection | fabric.Object = null;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.initPaste();
+    }
+
+    // 多选对象复制
+    _copyActiveSelection(activeObject: fabric.Object) {
+        // 间距设置
+        const grid = 10;
+        const canvas = this.canvas;
+        const keys = this.editor.getExtensionKey();
+        activeObject?.clone((cloned: fabric.Object) => {
+            // 再次进行克隆，处理选择多个对象的情况
+            cloned.clone((clonedObj: fabric.ActiveSelection) => {
+                canvas.discardActiveObject();
+                if (clonedObj.left === undefined || clonedObj.top === undefined)
+                    return;
+                // 将克隆的画布重新赋值
+                clonedObj.canvas = canvas;
+                // 设置位置信息
+                clonedObj.set({
+                    left: clonedObj.left + grid,
+                    top: clonedObj.top + grid,
+                    evented: true,
+                    id: uuid(),
+                });
+                clonedObj.forEachObject((obj: fabric.Object) => {
+                    obj.id = uuid();
+                    canvas.add(obj);
+                });
+                // 解决不可选择问题
+                clonedObj.setCoords();
+                canvas.setActiveObject(clonedObj);
+                canvas.requestRenderAll();
+            });
+        }, keys);
+    }
+
+    // 单个对象复制
+    _copyObject(activeObject: fabric.Object) {
+        // 间距设置
+        const grid = 10;
+        const canvas = this.canvas;
+        const keys = this.editor.getExtensionKey();
+        activeObject?.clone((cloned: fabric.Object) => {
+            if (cloned.left === undefined || cloned.top === undefined) return;
+            canvas.discardActiveObject();
+            // 设置位置信息
+            cloned.set({
+                left: cloned.left + grid,
+                top: cloned.top + grid,
+                evented: true,
+                id: uuid(),
+            });
+            canvas.add(cloned);
+            canvas.setActiveObject(cloned);
+            canvas.requestRenderAll();
+        }, keys);
+    }
+
+    // 复制元素
+    clone(paramsActiveObeject?: fabric.ActiveSelection | fabric.Object) {
+        const activeObject =
+            paramsActiveObeject || this.canvas.getActiveObject();
+        if (!activeObject) return;
+        if (activeObject?.type === 'activeSelection') {
+            this._copyActiveSelection(activeObject);
+        } else {
+            this._copyObject(activeObject);
+        }
+    }
+
+    // 快捷键扩展回调
+    hotkeyEvent(eventName: string, e: KeyboardEvent) {
+        if (eventName === 'ctrl+c' && e.type === 'keydown') {
+            const activeObject = this.canvas.getActiveObject();
+            this.cache = activeObject;
+            // 清空剪切板
+            navigator.clipboard.writeText('');
+        }
+        if (eventName === 'ctrl+v' && e.type === 'keydown') {
+            // 确保clone元素操作的执行晚于pasteListener
+            setTimeout(() => {
+                if (this.cache) {
+                    this.clone(this.cache);
+                }
+            }, 0);
+        }
+    }
+
+    contextMenu() {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            return [
+                {
+                    text: '复制',
+                    hotkey: 'Ctrl+V',
+                    disabled: false,
+                    onclick: () => this.clone(),
+                },
+            ];
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+        window.removeEventListener('paste', (e) => this.pasteListener(e));
+    }
+
+    initPaste() {
+        window.addEventListener('paste', (e) => this.pasteListener(e));
+    }
+
+    async pasteListener(event: any) {
+        const canvas = this.canvas;
+        if (document.activeElement === document.body) {
+            event.preventDefault(); // 阻止默认粘贴行为
+        } else {
+            return;
+        }
+
+        const items = (event.clipboardData || event.originalEvent.clipboardData)
+            .items;
+        const fileAccept =
+            '.pdf,.psd,.cdr,.ai,.svg,.jpg,.jpeg,.png,.webp,.json';
+        for (const item of items) {
+            if (item.kind === 'file') {
+                const file = item.getAsFile();
+                const curFileSuffix: string | undefined = file.name
+                    .split('.')
+                    .pop();
+                if (!fileAccept.split(',').includes(`.${curFileSuffix}`))
+                    return;
+                if (curFileSuffix === 'svg') {
+                    const svgFile = await utils.getImgStr(file);
+                    if (!svgFile) throw new Error('file is undefined');
+                    fabric.loadSVGFromURL(
+                        svgFile as string,
+                        (objects, options) => {
+                            const item = fabric.util.groupSVGElements(objects, {
+                                ...options,
+                                name: 'defaultSVG',
+                                id: uuid(),
+                            });
+                            canvas.add(item).centerObject(item).renderAll();
+                        }
+                    );
+                }
+                // if (curFileSuffix === 'json') {
+                //   const dataText = await getImageText(file);
+                //   const template = JSON.parse(dataText);
+                //   addTemplate(template);
+                // }
+                if (item.type.indexOf('image/') === 0) {
+                    // 这是一个图片文件
+                    const imageUrl = URL.createObjectURL(file);
+                    const imgEl = document.createElement('img');
+                    imgEl.src = imageUrl;
+                    // 插入页面
+                    document.body.appendChild(imgEl);
+                    imgEl.onload = () => {
+                        // 创建图片对象
+                        const imgInstance = new fabric.Image(imgEl, {
+                            id: uuid(),
+                            name: '图片1',
+                            left: 100,
+                            top: 100,
+                        });
+                        // 设置缩放
+                        canvas.add(imgInstance);
+                        canvas.setActiveObject(imgInstance);
+                        canvas.renderAll();
+                        // 删除页面中的图片元素
+                        imgEl.remove();
+                    };
+                }
+            } else if (
+                item.kind === 'string' &&
+                item.type.indexOf('text/plain') === 0
+            ) {
+                // 文本数据
+                item.getAsString((text: any) => {
+                    // 插入到文本框
+                    const activeObject =
+                        canvas.getActiveObject() as fabric.Textbox;
+                    // 如果是激活的文字把复制的内容插入到对应光标位置
+                    if (
+                        activeObject &&
+                        (activeObject.type === 'textbox' ||
+                            activeObject.type === 'i-text') &&
+                        activeObject.text
+                    ) {
+                        const cursorPosition = activeObject.selectionStart;
+                        const textBeforeCursorPosition =
+                            activeObject.text.substring(0, cursorPosition);
+                        const textAfterCursorPosition =
+                            activeObject.text.substring(
+                                cursorPosition as number
+                            );
+
+                        // 更新文本对象的文本
+                        activeObject.set(
+                            'text',
+                            textBeforeCursorPosition +
+                                text +
+                                textAfterCursorPosition
+                        );
+
+                        // 重新设置光标的位置
+                        activeObject.selectionStart =
+                            cursorPosition + text.length;
+                        activeObject.selectionEnd =
+                            cursorPosition + text.length;
+
+                        // 重新渲染画布展示更新后的文本
+                        activeObject.dirty = true;
+                        canvas.renderAll();
+                    } else {
+                        const fabricText = new fabric.IText(text, {
+                            left: 100,
+                            top: 100,
+                            fontSize: 80,
+                            id: uuid(),
+                        });
+                        canvas.add(fabricText);
+                        canvas.setActiveObject(fabricText);
+                    }
+                });
+            }
+        }
+        // 复制浏览器外的元素时，清空暂存的画布内粘贴元素
+        if (items.length) this.cache = null;
+    }
+}
+
+export default CopyPlugin;

package/src/plugins/CreateElementPlugin.ts

@@ -54,7 +54,11 @@ class CreateElementPlugin implements IPluginTempl {
         public editor: IEditor
     ) { }
 
-
+    async hookTransformObjectEnd({ originObject, fabricObject }: { originObject: any, fabricObject: any }) {
+        if (fabricObject) {
+            this.addSetAndSyncByUnit(fabricObject);
+        }
+    }
 
     private _processPoints(points: Array<{ x: number; y: number }>, dpi?: number): { processed: Array<{ x: number; y: number }>; originByUnit: Record<string, Record<string, any>> } {
         const hasCfg = CreateElementPlugin.lengthFieldConfigs.some(
@@ -101,6 +105,12 @@ class CreateElementPlugin implements IPluginTempl {
                     if (value !== undefined) {
                         const processedVal = convertSingle(value, unit, dpi);
                         mergeOrigin(this, unit, { [field]: value });
+                        if (this.type === 'image' && (field === 'width' || field === 'height')) {
+                            if (field === 'width') {
+                                return originalSet('scaleX', processedVal / (this.width || 1));
+                            }
+                            return originalSet('scaleY', processedVal / (this.height || 1));
+                        }
                         return originalSet(field, processedVal);
                     }
                 }
@@ -136,7 +146,18 @@ class CreateElementPlugin implements IPluginTempl {
                 const { processed, originByUnit } = processOptions(opts, unit, dpi, singleFields);
                 const originUnit = originByUnit[unit] || {};
                 if (Object.keys(originUnit).length) mergeOrigin(this, unit, originUnit);
-                return originalSet({ ...opts, ...processed });
+                const finalProps = { ...opts, ...processed };
+                if (this.type === 'image') {
+                    if (finalProps.width !== undefined) {
+                        finalProps.scaleX = finalProps.width / (this.width || 1);
+                        delete finalProps.width;
+                    }
+                    if (finalProps.height !== undefined) {
+                        finalProps.scaleY = finalProps.height / (this.height || 1);
+                        delete finalProps.height;
+                    }
+                }
+                return originalSet(finalProps);
             }
             return originalSet(key, value);
         };