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

package/src/plugins/HistoryPlugin.ts

@@ -1,181 +1,181 @@
-import Editor, { fabric } from '@hprint/core';
-import type { IPluginTempl } from '@hprint/core';
-
-type IEditor = Editor;
-type callback = () => void;
-
-class HistoryPlugin implements IPluginTempl {
-    static pluginName = 'HistoryPlugin';
-    static apis = [
-        'undo',
-        'redo',
-        'historyUpdate',
-        'clearAndSaveState',
-        'saveState',
-    ];
-    static events = [];
-
-    // 历史记录相关属性
-    private stack: string[] = [];
-    private currentIndex = 0;
-    private maxLength = 100;
-    private isProcessing = false;
-    private isLoading = false;
-
-    hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z'];
-
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {
-        this._init();
-    }
-
-    private _init() {
-        // 监听对象变更事件
-        const events = {
-            'object:removed': () => this.saveState(),
-            'object:modified': () => this.saveState(),
-            'object:skewing': () => this.saveState(),
-        };
-
-        // 绑定事件
-        Object.entries(events).forEach(([event, handler]) => {
-            this.canvas.on(event, handler);
-        });
-
-        // 初始化状态
-        this.saveState();
-
-        // 更新历史记录状态
-        this.canvas.on('history:append', () => {
-            this.historyUpdate();
-        });
-
-        // 页面离开提示
-        // window.addEventListener('beforeunload', (e) => {
-        //   const { undoCount } = this.getState();
-        //   if (undoCount > 0) {
-        //     (e || window.event).returnValue = '确认离开';
-        //   }
-        // });
-    }
-
-    // 获取当前状态
-    private getCurrentState() {
-        return this.editor.getJson();
-    }
-
-    // 保存状态
-    private saveState() {
-        if (this.isProcessing) return;
-
-        // 清除当前索引后的记录
-        this.stack.splice(this.currentIndex);
-        this.stack.push(this.getCurrentState());
-
-        // 维护最大长度
-        if (this.stack.length > this.maxLength) {
-            this.stack.shift();
-        } else {
-            this.currentIndex++;
-        }
-        this.historyUpdate();
-    }
-
-    // 加载状态
-    private _loadState(state: string, eventName: string, callback?: callback) {
-        this.isLoading = true;
-        this.isProcessing = true;
-
-        // 处理 workspace 的特殊情况
-        const parsedState = JSON.parse(state);
-        const workspace = parsedState.objects?.find(
-            (item: any) => item.id === 'workspace'
-        );
-        if (workspace) {
-            workspace.evented = false;
-        }
-
-        this.canvas.loadFromJSON(state, () => {
-            this.canvas.renderAll();
-            this.canvas.fire(eventName);
-            this.isProcessing = false;
-            this.isLoading = false;
-            callback?.();
-        });
-    }
-
-    // 获取历史记录状态
-    private getState() {
-        return {
-            undoCount: this.currentIndex - 1,
-            redoCount: this.stack.length - this.currentIndex,
-        };
-    }
-
-    // 清空历史记录
-    private clear() {
-        this.stack = [];
-        this.currentIndex = 0;
-        this.saveState();
-    }
-
-    // 公开方法
-    historyUpdate() {
-        const { undoCount, redoCount } = this.getState();
-        this.editor.emit('historyUpdate', undoCount, redoCount);
-    }
-
-    hookImportAfter() {
-        this.clear();
-        this.historyUpdate();
-        return Promise.resolve();
-    }
-
-    undo() {
-        if (this.isLoading || this.currentIndex <= 1) return;
-
-        this.currentIndex--;
-        const state = this.stack[this.currentIndex - 1];
-        if (state) {
-            this._loadState(JSON.stringify(state), 'history:undo');
-            this.historyUpdate();
-        }
-    }
-
-    redo() {
-        if (this.isLoading || this.currentIndex >= this.stack.length) return;
-
-        const state = this.stack[this.currentIndex];
-        if (state) {
-            this._loadState(JSON.stringify(state), 'history:redo');
-            this.currentIndex++;
-            this.historyUpdate();
-        }
-    }
-
-    hotkeyEvent(eventName: string, e: KeyboardEvent) {
-        if (e.type === 'keydown') {
-            switch (eventName) {
-                case 'ctrl+z':
-                case '⌘+z':
-                    this.undo();
-                    break;
-                case 'ctrl+shift+z':
-                case '⌘+shift+z':
-                    this.redo();
-                    break;
-            }
-        }
-    }
-
-    clearAndSaveState() {
-        const currentState = this.getCurrentState();
-        this.stack = [currentState]; // 只保留当前状态作为第一条记录
-        this.currentIndex = 1;
-        this.historyUpdate();
-    }
-}
-
-export default HistoryPlugin;
+import Editor, { fabric } from '@hprint/core';
+import type { IPluginTempl } from '@hprint/core';
+
+type IEditor = Editor;
+type callback = () => void;
+
+class HistoryPlugin implements IPluginTempl {
+    static pluginName = 'HistoryPlugin';
+    static apis = [
+        'undo',
+        'redo',
+        'historyUpdate',
+        'clearAndSaveState',
+        'saveState',
+    ];
+    static events = [];
+
+    // 历史记录相关属性
+    private stack: string[] = [];
+    private currentIndex = 0;
+    private maxLength = 100;
+    private isProcessing = false;
+    private isLoading = false;
+
+    hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z'];
+
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this._init();
+    }
+
+    private _init() {
+        // 监听对象变更事件
+        const events = {
+            'object:removed': () => this.saveState(),
+            'object:modified': () => this.saveState(),
+            'object:skewing': () => this.saveState(),
+        };
+
+        // 绑定事件
+        Object.entries(events).forEach(([event, handler]) => {
+            this.canvas.on(event, handler);
+        });
+
+        // 初始化状态
+        this.saveState();
+
+        // 更新历史记录状态
+        this.canvas.on('history:append', () => {
+            this.historyUpdate();
+        });
+
+        // 页面离开提示
+        // window.addEventListener('beforeunload', (e) => {
+        //   const { undoCount } = this.getState();
+        //   if (undoCount > 0) {
+        //     (e || window.event).returnValue = '确认离开';
+        //   }
+        // });
+    }
+
+    // 获取当前状态
+    private getCurrentState() {
+        return this.editor.getJson();
+    }
+
+    // 保存状态
+    private saveState() {
+        if (this.isProcessing) return;
+
+        // 清除当前索引后的记录
+        this.stack.splice(this.currentIndex);
+        this.stack.push(this.getCurrentState());
+
+        // 维护最大长度
+        if (this.stack.length > this.maxLength) {
+            this.stack.shift();
+        } else {
+            this.currentIndex++;
+        }
+        this.historyUpdate();
+    }
+
+    // 加载状态
+    private _loadState(state: string, eventName: string, callback?: callback) {
+        this.isLoading = true;
+        this.isProcessing = true;
+
+        // 处理 workspace 的特殊情况
+        const parsedState = JSON.parse(state);
+        const workspace = parsedState.objects?.find(
+            (item: any) => item.id === 'workspace'
+        );
+        if (workspace) {
+            workspace.evented = false;
+        }
+
+        this.canvas.loadFromJSON(state, () => {
+            this.canvas.renderAll();
+            this.canvas.fire(eventName);
+            this.isProcessing = false;
+            this.isLoading = false;
+            callback?.();
+        });
+    }
+
+    // 获取历史记录状态
+    private getState() {
+        return {
+            undoCount: this.currentIndex - 1,
+            redoCount: this.stack.length - this.currentIndex,
+        };
+    }
+
+    // 清空历史记录
+    private clear() {
+        this.stack = [];
+        this.currentIndex = 0;
+        this.saveState();
+    }
+
+    // 公开方法
+    historyUpdate() {
+        const { undoCount, redoCount } = this.getState();
+        this.editor.emit('historyUpdate', undoCount, redoCount);
+    }
+
+    hookImportAfter() {
+        this.clear();
+        this.historyUpdate();
+        return Promise.resolve();
+    }
+
+    undo() {
+        if (this.isLoading || this.currentIndex <= 1) return;
+
+        this.currentIndex--;
+        const state = this.stack[this.currentIndex - 1];
+        if (state) {
+            this._loadState(JSON.stringify(state), 'history:undo');
+            this.historyUpdate();
+        }
+    }
+
+    redo() {
+        if (this.isLoading || this.currentIndex >= this.stack.length) return;
+
+        const state = this.stack[this.currentIndex];
+        if (state) {
+            this._loadState(JSON.stringify(state), 'history:redo');
+            this.currentIndex++;
+            this.historyUpdate();
+        }
+    }
+
+    hotkeyEvent(eventName: string, e: KeyboardEvent) {
+        if (e.type === 'keydown') {
+            switch (eventName) {
+                case 'ctrl+z':
+                case '⌘+z':
+                    this.undo();
+                    break;
+                case 'ctrl+shift+z':
+                case '⌘+shift+z':
+                    this.redo();
+                    break;
+            }
+        }
+    }
+
+    clearAndSaveState() {
+        const currentState = this.getCurrentState();
+        this.stack = [currentState]; // 只保留当前状态作为第一条记录
+        this.currentIndex = 1;
+        this.historyUpdate();
+    }
+}
+
+export default HistoryPlugin;

package/src/plugins/ImageStroke.ts

@@ -1,121 +1,121 @@
-import { fabric } from '@hprint/core';
-import type { IEditor, IPluginTempl } from '@hprint/core';
-
-type IPlugin = Pick<ImageStrokePlugin, 'imageStrokeDraw'>;
-
-declare module '@hprint/core' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IEditor extends IPlugin {}
-}
-
-/*type IStrokeOps = {
-  enabled: boolean;
-  width: number;
-  color: string;
-  type: 'destination-out' | 'source-over' | 'source-in';
-};*/
-interface IExtendImage {
-    [x: string]: any;
-    originWidth?: number;
-    originHeight?: number;
-    originSrc?: string;
-}
-class ImageStrokePlugin implements IPluginTempl {
-    static pluginName = 'ImageStroke';
-    static apis = ['imageStrokeDraw'];
-    //   public options: Required<IStrokeOps>;
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {
-        // this.options = Object.assign(
-        //   {
-        //     enabled: false,
-        //     width: 5,
-        //     color: '#000',
-        //     type: 'source-over',
-        //   },
-        //   _options
-        // );
-    }
-
-    private addImage(src: string): Promise<HTMLImageElement | undefined> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => resolve(img);
-            img.onerror = () => reject();
-            img.src = src;
-        });
-    }
-
-    //   imageStrokeEnable() {
-    //     this.options.enabled = true;
-    //   }
-
-    //   imageStrokeDisable() {
-    //     this.options.enabled = false;
-    //   }
-
-    //   imageStrokeSet(key: 'enabled' | 'width' | 'color' | 'type', val: any) {
-    //     this.options[key] = val;
-    //   }
-
-    async imageStrokeDraw(
-        stroke: string,
-        strokeWidth: number,
-        type = 'source-over'
-    ) {
-        const activeObject = this.canvas.getActiveObject() as
-            | (fabric.Image & IExtendImage)
-            | undefined;
-        if (!activeObject) return;
-        const w = activeObject.originWidth || 0,
-            h = activeObject.originHeight || 0,
-            src = activeObject?.originSrc || activeObject.getSrc();
-        let canvas: HTMLCanvasElement | null = document.createElement('canvas');
-        const ctx = canvas!.getContext('2d');
-        if (!ctx) return;
-        // 描边等于0 说明关闭了开关或者不需要描边  直接从原图绘制
-        if (strokeWidth === 0) {
-            activeObject.setSrc(src, () => {
-                activeObject.canvas?.renderAll();
-            });
-            return;
-        }
-        ctx.save();
-        ctx.clearRect(0, 0, canvas!.width, canvas!.height);
-        ctx.restore();
-        canvas!.width = w + strokeWidth * 2;
-        canvas!.height = h + strokeWidth * 2;
-        const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];
-        const img = await this.addImage(src);
-        if (!img) return;
-        for (let i = 0; i < dArr.length; i += 2) {
-            ctx.drawImage(
-                img,
-                strokeWidth + dArr[i] * strokeWidth,
-                strokeWidth + dArr[i + 1] * strokeWidth,
-                w,
-                h
-            );
-        }
-        ctx.globalCompositeOperation = 'source-in';
-        ctx.fillStyle = stroke;
-        ctx.fillRect(0, 0, w + strokeWidth * 2, h + strokeWidth * 2);
-        ctx.globalCompositeOperation = type as any;
-        ctx.drawImage(img, strokeWidth, strokeWidth, w, h);
-        const res = canvas?.toDataURL();
-        canvas = null;
-        if (!res) return;
-        activeObject.setSrc(res, () => {
-            activeObject.canvas?.renderAll();
-        });
-    }
-
-    destroy() {
-        // this.editor.off('sizeChange', this.drawWaterMark);
-    }
-}
-
-export default ImageStrokePlugin;
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<ImageStrokePlugin, 'imageStrokeDraw'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+/*type IStrokeOps = {
+  enabled: boolean;
+  width: number;
+  color: string;
+  type: 'destination-out' | 'source-over' | 'source-in';
+};*/
+interface IExtendImage {
+    [x: string]: any;
+    originWidth?: number;
+    originHeight?: number;
+    originSrc?: string;
+}
+class ImageStrokePlugin implements IPluginTempl {
+    static pluginName = 'ImageStroke';
+    static apis = ['imageStrokeDraw'];
+    //   public options: Required<IStrokeOps>;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        // this.options = Object.assign(
+        //   {
+        //     enabled: false,
+        //     width: 5,
+        //     color: '#000',
+        //     type: 'source-over',
+        //   },
+        //   _options
+        // );
+    }
+
+    private addImage(src: string): Promise<HTMLImageElement | undefined> {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = () => reject();
+            img.src = src;
+        });
+    }
+
+    //   imageStrokeEnable() {
+    //     this.options.enabled = true;
+    //   }
+
+    //   imageStrokeDisable() {
+    //     this.options.enabled = false;
+    //   }
+
+    //   imageStrokeSet(key: 'enabled' | 'width' | 'color' | 'type', val: any) {
+    //     this.options[key] = val;
+    //   }
+
+    async imageStrokeDraw(
+        stroke: string,
+        strokeWidth: number,
+        type = 'source-over'
+    ) {
+        const activeObject = this.canvas.getActiveObject() as
+            | (fabric.Image & IExtendImage)
+            | undefined;
+        if (!activeObject) return;
+        const w = activeObject.originWidth || 0,
+            h = activeObject.originHeight || 0,
+            src = activeObject?.originSrc || activeObject.getSrc();
+        let canvas: HTMLCanvasElement | null = document.createElement('canvas');
+        const ctx = canvas!.getContext('2d');
+        if (!ctx) return;
+        // 描边等于0 说明关闭了开关或者不需要描边  直接从原图绘制
+        if (strokeWidth === 0) {
+            activeObject.setSrc(src, () => {
+                activeObject.canvas?.renderAll();
+            });
+            return;
+        }
+        ctx.save();
+        ctx.clearRect(0, 0, canvas!.width, canvas!.height);
+        ctx.restore();
+        canvas!.width = w + strokeWidth * 2;
+        canvas!.height = h + strokeWidth * 2;
+        const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];
+        const img = await this.addImage(src);
+        if (!img) return;
+        for (let i = 0; i < dArr.length; i += 2) {
+            ctx.drawImage(
+                img,
+                strokeWidth + dArr[i] * strokeWidth,
+                strokeWidth + dArr[i + 1] * strokeWidth,
+                w,
+                h
+            );
+        }
+        ctx.globalCompositeOperation = 'source-in';
+        ctx.fillStyle = stroke;
+        ctx.fillRect(0, 0, w + strokeWidth * 2, h + strokeWidth * 2);
+        ctx.globalCompositeOperation = type as any;
+        ctx.drawImage(img, strokeWidth, strokeWidth, w, h);
+        const res = canvas?.toDataURL();
+        canvas = null;
+        if (!res) return;
+        activeObject.setSrc(res, () => {
+            activeObject.canvas?.renderAll();
+        });
+    }
+
+    destroy() {
+        // this.editor.off('sizeChange', this.drawWaterMark);
+    }
+}
+
+export default ImageStrokePlugin;