@hprint/plugins 0.0.1-alpha.0

package/src/plugins/GroupTextEditorPlugin.ts

@@ -0,0 +1,198 @@
+import { fabric } from '@hprint/core';
+import { utils } from '@hprint/shared';
+import { v4 as uuid } from 'uuid';
+import { pick } from 'lodash-es';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+class GroupTextEditorPlugin implements IPluginTempl {
+    static pluginName = 'GroupTextEditorPlugin';
+    isDown = false;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this._init();
+    }
+
+    // 组内文本输入
+    _init() {
+        this.canvas.on('mouse:down', (opt) => {
+            this.isDown = true;
+            // 重置选中controls
+            if (
+                opt.target &&
+                !opt.target.lockMovementX &&
+                !opt.target.lockMovementY &&
+                !opt.target.lockRotation &&
+                !opt.target.lockScalingX &&
+                !opt.target.lockScalingY
+            ) {
+                opt.target.hasControls = true;
+            }
+        });
+
+        this.canvas.on('mouse:up', () => {
+            this.isDown = false;
+        });
+
+        this.canvas.on('mouse:dblclick', (opt) => {
+            if (utils.isGroup(opt.target)) {
+                const selectedObject = this._getGroupObj(opt) as fabric.IText;
+                if (!selectedObject) return;
+                selectedObject.selectable = true;
+                // 由于组内的元素，双击以后会导致controls偏移，因此隐藏他
+                if (selectedObject.hasControls) {
+                    selectedObject.hasControls = false;
+                }
+                if (this.isText(selectedObject)) {
+                    this._bedingTextEditingEvent(selectedObject, opt.target);
+                    return;
+                }
+                this.canvas.setActiveObject(selectedObject);
+                this.canvas.renderAll();
+            }
+        });
+    }
+
+    // 获取点击区域内的组内文字元素
+    _getGroupTextObj(opt: fabric.IEvent<MouseEvent>) {
+        const pointer = this.canvas.getPointer(opt.e, true);
+        if (!utils.isGroup(opt.target)) return false;
+        const clickObj = this.canvas._searchPossibleTargets(
+            opt.target._objects,
+            pointer
+        );
+        if (clickObj && this.isText(clickObj)) {
+            return clickObj;
+        }
+        return false;
+    }
+
+    _getGroupObj(opt: fabric.IEvent<MouseEvent>) {
+        const pointer = this.canvas.getPointer(opt.e, true);
+        if (!utils.isGroup(opt.target)) return false;
+        const clickObj = this.canvas._searchPossibleTargets(
+            opt.target._objects,
+            pointer
+        );
+        return clickObj;
+    }
+
+    // 通过组合重新组装来编辑文字，可能会耗性能。
+    _bedingTextEditingEvent(textObject: fabric.IText, groupObj: fabric.Group) {
+        const textObjectJSON = textObject.toObject();
+
+        const groupMatrix: number[] = groupObj.calcTransformMatrix();
+
+        const a: number = groupMatrix[0];
+        const b: number = groupMatrix[1];
+        const c: number = groupMatrix[2];
+        const d: number = groupMatrix[3];
+        const e: number = groupMatrix[4];
+        const f: number = groupMatrix[5];
+
+        const newX = a * (textObject.left ?? 0) + c * (textObject.top ?? 0) + e;
+        const newY = b * (textObject.left ?? 0) + d * (textObject.top ?? 0) + f;
+
+        const tempText = new (textObject.constructor as typeof fabric.IText)(
+            textObject.text ?? '',
+            {
+                ...textObjectJSON,
+                scaleX: textObjectJSON.scaleX * a,
+                scaleY: textObjectJSON.scaleY * a,
+                textAlign: textObject.textAlign,
+                left: newX,
+                top: newY,
+                styles: textObject.styles,
+                groupCopyed: textObject.group,
+            }
+        );
+        tempText.id = uuid();
+        textObject.visible = false;
+        groupObj.addWithUpdate();
+        tempText.visible = true;
+        tempText.selectable = true;
+        tempText.hasControls = false;
+        tempText.editable = true;
+        this.canvas.add(tempText);
+        this.canvas.setActiveObject(tempText);
+        tempText.enterEditing();
+        tempText.selectAll();
+
+        tempText.on('editing:exited', () => {
+            const attrs = tempText.toObject();
+
+            // 进入编辑模式时触发
+            textObject.set({
+                ...pick(attrs, [
+                    'fill',
+                    'fontSize',
+                    'fontStyle',
+                    'fontFamily',
+                    'lineHeight',
+                    'backgroundColor',
+                ]),
+                text: tempText.text,
+                visible: true,
+            });
+            groupObj.addWithUpdate();
+            tempText.visible = false;
+            this.canvas.remove(tempText);
+            this.canvas.setActiveObject(groupObj);
+        });
+    }
+
+    // 绑定编辑取消事件
+    _bedingEditingEvent(
+        textObject: fabric.IText,
+        opt: fabric.IEvent<MouseEvent>
+    ) {
+        if (!opt.target) return;
+        const left = opt.target.left;
+        const top = opt.target.top;
+        const ids = this._unGroup() || [];
+
+        const resetGroup = () => {
+            const groupArr = this.canvas
+                .getObjects()
+                .filter((item) => item.id && ids.includes(item.id));
+            // 删除元素
+            groupArr.forEach((item) => this.canvas.remove(item));
+
+            // 生成新组
+            const group = new fabric.Group([...groupArr]);
+            group.set('left', left);
+            group.set('top', top);
+            group.set('id', uuid());
+            textObject.off('editing:exited', resetGroup);
+            this.canvas.add(group);
+            this.canvas.discardActiveObject().renderAll();
+        };
+        // 绑定取消事件
+        textObject.on('editing:exited', resetGroup);
+    }
+
+    // 拆分组合并返回ID
+    _unGroup() {
+        const ids: string[] = [];
+        const activeObj = this.canvas.getActiveObject() as fabric.Group;
+        if (!activeObj) return;
+        activeObj.getObjects().forEach((item) => {
+            const id = uuid();
+            ids.push(id);
+            item.set('id', id);
+        });
+        activeObj.toActiveSelection();
+        return ids;
+    }
+
+    isText(obj: fabric.Object) {
+        return obj.type && ['i-text', 'text', 'textbox'].includes(obj.type);
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default GroupTextEditorPlugin;

package/src/plugins/HistoryPlugin.ts

@@ -0,0 +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;

package/src/plugins/ImageStroke.ts

@@ -0,0 +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;

package/src/plugins/LayerPlugin.ts

@@ -0,0 +1,108 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<LayerPlugin, 'up' | 'down' | 'toFront' | 'toBack'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class LayerPlugin implements IPluginTempl {
+    static pluginName = 'LayerPlugin';
+    static apis = ['up', 'down', 'toFront', 'toBack'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    _getWorkspace() {
+        return this.canvas.getObjects().find((item) => item.id === 'workspace');
+    }
+
+    _workspaceSendToBack() {
+        const workspace = this._getWorkspace();
+        workspace && workspace.sendToBack();
+    }
+
+    up() {
+        const actives = this.canvas.getActiveObjects();
+        if (actives && actives.length === 1) {
+            const activeObject = this.canvas.getActiveObjects()[0];
+            activeObject && activeObject.bringForward();
+            this.canvas.renderAll();
+            this._workspaceSendToBack();
+        }
+    }
+
+    down() {
+        const actives = this.canvas.getActiveObjects();
+        if (actives && actives.length === 1) {
+            const activeObject = this.canvas.getActiveObjects()[0];
+            activeObject && activeObject.sendBackwards();
+            this.canvas.renderAll();
+            this._workspaceSendToBack();
+        }
+    }
+
+    toFront() {
+        const actives = this.canvas.getActiveObjects();
+        if (actives && actives.length === 1) {
+            const activeObject = this.canvas.getActiveObjects()[0];
+            activeObject && activeObject.bringToFront();
+            this.canvas.renderAll();
+            this._workspaceSendToBack();
+        }
+    }
+
+    toBack() {
+        const actives = this.canvas.getActiveObjects();
+        if (actives && actives.length === 1) {
+            const activeObject = this.canvas.getActiveObjects()[0];
+            activeObject && activeObject.sendToBack();
+            this.canvas.renderAll();
+            this._workspaceSendToBack();
+        }
+    }
+
+    contextMenu() {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            return [
+                {
+                    text: '图层管理',
+                    hotkey: '❯',
+                    subitems: [
+                        {
+                            text: '上一个',
+                            hotkey: '',
+                            onclick: () => this.up(),
+                        },
+                        {
+                            text: '下一个',
+                            hotkey: '',
+                            onclick: () => this.down(),
+                        },
+                        {
+                            text: '置顶',
+                            hotkey: '',
+                            onclick: () => this.toFront(),
+                        },
+                        {
+                            text: '置底',
+                            hotkey: '',
+                            onclick: () => this.toBack(),
+                        },
+                    ],
+                },
+            ];
+            // return [{ text: '复制', hotkey: 'Ctrl+V', disabled: false, onclick: () => this.clone() }];
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default LayerPlugin;