@hprint/core 0.0.1-alpha.0

package/src/Editor.ts

@@ -0,0 +1,215 @@
+import EventEmitter from 'events';
+import hotkeys from 'hotkeys-js';
+import ContextMenu from './ContextMenu.js';
+import ServersPlugin from './ServersPlugin';
+import { AsyncSeriesHook } from 'tapable';
+import { fabric } from '@hprint/shared';
+import type {
+    IPluginMenu,
+    IPluginClass,
+    IPluginOption,
+    IEditorHooksType,
+    IPluginTempl,
+} from '@hprint/core';
+
+import Utils from './utils/utils';
+import { LengthConvert } from '@hprint/shared';
+
+class Editor extends EventEmitter {
+    private canvas: fabric.Canvas | null = null;
+    contextMenu: ContextMenu | null = null;
+    [key: string]: any;
+    private pluginMap: {
+        [propName: string]: IPluginTempl;
+    } = {};
+    // 自定义事件
+    private customEvents: string[] = [];
+    // 自定义API
+    private customApis: string[] = [];
+    // 生命周期函数名
+    private hooks: IEditorHooksType[] = [
+        'hookImportBefore',
+        'hookImportAfter',
+        'hookSaveBefore',
+        'hookSaveAfter',
+        'hookTransform',
+    ];
+    public hooksEntity: {
+        [propName: string]: AsyncSeriesHook<any, any>;
+    } = {};
+
+    init(canvas: fabric.Canvas) {
+        this.canvas = canvas;
+        this._initContextMenu();
+        this._bindContextMenu();
+        this._initActionHooks();
+        this._initServersPlugin();
+
+        this.Utils = Utils;
+    }
+
+
+    get fabricCanvas() {
+        return this.canvas;
+    }
+
+    // 引入组件
+    use(plugin: IPluginTempl, options?: IPluginOption) {
+        if (this._checkPlugin(plugin) && this.canvas) {
+            this._saveCustomAttr(plugin);
+            const pluginRunTime = new (plugin as IPluginClass)(
+                this.canvas,
+                this,
+                options || {}
+            );
+            // 添加插件名称
+            pluginRunTime.pluginName = plugin.pluginName;
+            this.pluginMap[plugin.pluginName] = pluginRunTime;
+            this._bindingHooks(pluginRunTime);
+            this._bindingHotkeys(pluginRunTime);
+            this._bindingApis(pluginRunTime);
+        }
+        return this;
+    }
+
+    destory() {
+        this.canvas = null;
+        this.contextMenu = null;
+        this.pluginMap = {};
+        this.customEvents = [];
+        this.customApis = [];
+        this.hooksEntity = {};
+    }
+    // 获取插件
+    getPlugin(name: string) {
+        if (this.pluginMap[name]) {
+            return this.pluginMap[name];
+        }
+    }
+
+    // 检查组件
+    private _checkPlugin(plugin: IPluginTempl) {
+        const { pluginName, events = [], apis = [] } = plugin;
+        //名称检查
+        if (this.pluginMap[pluginName]) {
+            throw new Error(pluginName + '插件重复初始化');
+        }
+        events.forEach((eventName: string) => {
+            if (this.customEvents.find((info) => info === eventName)) {
+                throw new Error(pluginName + '插件中' + eventName + '重复');
+            }
+        });
+
+        apis.forEach((apiName: string) => {
+            if (this.customApis.find((info) => info === apiName)) {
+                throw new Error(pluginName + '插件中' + apiName + '重复');
+            }
+        });
+        return true;
+    }
+
+    // 绑定hooks方法
+    private _bindingHooks(plugin: IPluginTempl) {
+        this.hooks.forEach((hookName) => {
+            const hook = plugin[hookName];
+            if (hook) {
+                this.hooksEntity[hookName].tapPromise(
+                    plugin.pluginName + hookName,
+                    function () {
+                        // console.log(hookName, ...arguments);
+                        // eslint-disable-next-line prefer-rest-params
+                        const result = hook.apply(plugin, [...arguments]);
+                        // hook 兼容非 Promise 返回值
+                        const promise: Promise<any> =
+                            (result as any) instanceof Promise
+                                ? (result as Promise<any>)
+                                : Promise.resolve(result as any);
+                        return promise as Promise<void>;
+                    }
+                );
+            }
+        });
+    }
+
+    // 绑定快捷键
+    private _bindingHotkeys(plugin: IPluginTempl) {
+        plugin?.hotkeys?.forEach((keyName: string) => {
+            // 支持 keyup
+            hotkeys(keyName, { keyup: true }, (e) => {
+                plugin.hotkeyEvent && plugin.hotkeyEvent(keyName, e);
+            });
+        });
+    }
+
+    // 保存组件自定义事件与API
+    private _saveCustomAttr(plugin: IPluginTempl) {
+        const { events = [], apis = [] } = plugin;
+        this.customApis = this.customApis.concat(apis);
+        this.customEvents = this.customEvents.concat(events);
+    }
+    // 代理API事件
+    private _bindingApis(pluginRunTime: IPluginTempl) {
+        const { apis = [] } = (pluginRunTime.constructor as any) || {};
+        apis.forEach((apiName: string) => {
+            this[apiName] = function () {
+                // eslint-disable-next-line prefer-rest-params
+                return pluginRunTime[apiName].apply(pluginRunTime, [
+                    ...arguments,
+                ]);
+            };
+        });
+    }
+
+    // 右键菜单
+    private _bindContextMenu() {
+        this.canvas &&
+            this.canvas.on('mouse:down', (opt) => {
+                if (opt.button === 3) {
+                    let menu: IPluginMenu[] = [];
+                    Object.keys(this.pluginMap).forEach((pluginName) => {
+                        const pluginRunTime = this.pluginMap[pluginName];
+                        const pluginMenu =
+                            pluginRunTime.contextMenu &&
+                            pluginRunTime.contextMenu();
+                        if (pluginMenu) {
+                            menu = menu.concat(pluginMenu);
+                        }
+                    });
+                    this._renderMenu(opt, menu);
+                }
+            });
+    }
+
+    // 渲染右键菜单
+    private _renderMenu(opt: { e: MouseEvent }, menu: IPluginMenu[]) {
+        if (menu.length !== 0 && this.contextMenu) {
+            this.contextMenu.hideAll();
+            this.contextMenu.setData(menu);
+            this.contextMenu.show(opt.e.clientX, opt.e.clientY);
+        }
+    }
+
+    // 生命周期事件
+    _initActionHooks() {
+        this.hooks.forEach((hookName) => {
+            this.hooksEntity[hookName] = new AsyncSeriesHook(['data']);
+        });
+    }
+
+    _initContextMenu() {
+        this.contextMenu = new ContextMenu(this.canvas!.wrapperEl, []);
+        this.contextMenu.install();
+    }
+
+    _initServersPlugin() {
+        this.use(ServersPlugin);
+    }
+
+    // 解决 listener 为 undefined 的时候卸载错误
+    off(eventName: string, listener: any): this {
+        // noinspection TypeScriptValidateTypes
+        return listener ? super.off(eventName, listener) : this;
+    }
+}
+
+export default Editor;

package/src/Instance.ts

@@ -0,0 +1,79 @@
+import Editor from './Editor';
+import UnitPlugin from '../../plugins/src/plugins/UnitPlugin';
+import DringPlugin from '../../plugins/src/plugins/DringPlugin';
+import AlignGuidLinePlugin from '../../plugins/src/plugins/AlignGuidLinePlugin';
+import ControlsPlugin from '../../plugins/src/plugins/ControlsPlugin';
+import ControlsRotatePlugin from '../../plugins/src/plugins/ControlsRotatePlugin';
+import CenterAlignPlugin from '../../plugins/src/plugins/CenterAlignPlugin';
+import LayerPlugin from '../../plugins/src/plugins/LayerPlugin';
+import CopyPlugin from '../../plugins/src/plugins/CopyPlugin';
+import MoveHotKeyPlugin from '../../plugins/src/plugins/MoveHotKeyPlugin';
+import DeleteHotKeyPlugin from '../../plugins/src/plugins/DeleteHotKeyPlugin';
+import GroupPlugin from '../../plugins/src/plugins/GroupPlugin';
+import DrawLinePlugin from '../../plugins/src/plugins/DrawLinePlugin';
+import GroupTextEditorPlugin from '../../plugins/src/plugins/GroupTextEditorPlugin';
+import GroupAlignPlugin from '../../plugins/src/plugins/GroupAlignPlugin';
+import WorkspacePlugin from '../../plugins/src/plugins/WorkspacePlugin';
+import MaskPlugin from '../../plugins/src/plugins/MaskPlugin';
+import HistoryPlugin from '../../plugins/src/plugins/HistoryPlugin';
+import FlipPlugin from '../../plugins/src/plugins/FlipPlugin';
+import RulerPlugin from '../../plugins/src/plugins/RulerPlugin';
+import MaterialPlugin from '../../plugins/src/plugins/MaterialPlugin';
+import WaterMarkPlugin from '../../plugins/src/plugins/WaterMarkPlugin';
+import FontPlugin from '../../plugins/src/plugins/FontPlugin';
+import PolygonModifyPlugin from '../../plugins/src/plugins/PolygonModifyPlugin';
+import DrawPolygonPlugin from '../../plugins/src/plugins/DrawPolygonPlugin';
+import FreeDrawPlugin from '../../plugins/src/plugins/FreeDrawPlugin';
+import PathTextPlugin from '../../plugins/src/plugins/PathTextPlugin';
+import PsdPlugin from '../../plugins/src/plugins/PsdPlugin';
+import SimpleClipImagePlugin from '../../plugins/src/plugins/SimpleClipImagePlugin';
+import BarCodePlugin from '../../plugins/src/plugins/BarCodePlugin';
+import QrCodePlugin from '../../plugins/src/plugins/QrCodePlugin';
+import ImageStroke from '../../plugins/src/plugins/ImageStroke';
+import ResizePlugin from '../../plugins/src/plugins/ResizePlugin';
+import LockPlugin from '../../plugins/src/plugins/LockPlugin';
+import AddBaseTypePlugin from '../../plugins/src/plugins/AddBaseTypePlugin';
+import PrintPlugin from '../../plugins/src/plugins/PrintPlugin';
+
+const AllEditor = {
+    Editor,
+    UnitPlugin,
+    DringPlugin,
+    AlignGuidLinePlugin,
+    ControlsPlugin,
+    ControlsRotatePlugin,
+    CenterAlignPlugin,
+    LayerPlugin,
+    CopyPlugin,
+    MoveHotKeyPlugin,
+    DeleteHotKeyPlugin,
+    GroupPlugin,
+    DrawLinePlugin,
+    GroupTextEditorPlugin,
+    GroupAlignPlugin,
+    WorkspacePlugin,
+    MaskPlugin,
+    HistoryPlugin,
+    FlipPlugin,
+    RulerPlugin,
+    MaterialPlugin,
+    WaterMarkPlugin,
+    FontPlugin,
+    PolygonModifyPlugin,
+    DrawPolygonPlugin,
+    FreeDrawPlugin,
+    PathTextPlugin,
+    PsdPlugin,
+    SimpleClipImagePlugin,
+    BarCodePlugin,
+    QrCodePlugin,
+    ImageStroke,
+    ResizePlugin,
+    LockPlugin,
+    AddBaseTypePlugin,
+    PrintPlugin,
+};
+
+declare type HPrintEditor = typeof AllEditor;
+
+export default HPrintEditor;

package/src/ServersPlugin.ts

@@ -0,0 +1,387 @@
+import { v4 as uuid } from 'uuid';
+import { selectFiles, clipboardText, downFile } from './utils/utils';
+import { fabric, StaticCanvas } from 'fabric';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { SelectEvent, SelectMode } from '../../plugins/src/types/eventType';
+
+type IPlugin = Pick<
+    ServersPlugin,
+    | 'insert'
+    | 'loadJSON'
+    | 'getJson'
+    | 'dragAddItem'
+    | 'clipboard'
+    | 'clipboardBase64'
+    | 'saveJson'
+    | 'saveSvg'
+    | 'getBase64'
+    | 'saveImg'
+    | 'clear'
+    | 'preview'
+    | 'staticPreview'
+    | 'getSelectMode'
+    | 'getExtensionKey'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+function transformText(objects: any) {
+    if (!objects) return;
+    objects.forEach((item: any) => {
+        if (item.objects) {
+            transformText(item.objects);
+        } else {
+            item.type === 'text' && (item.type = 'textbox');
+        }
+    });
+}
+
+class ServersPlugin implements IPluginTempl {
+    public selectedMode: SelectMode;
+    static pluginName = 'ServersPlugin';
+    static apis = [
+        'insert',
+        'loadJSON',
+        'getJson',
+        'dragAddItem',
+        'clipboard',
+        'clipboardBase64',
+        'saveJson',
+        'saveSvg',
+        'saveImg',
+        'getBase64',
+        'clear',
+        'preview',
+        'staticPreview',
+        'getSelectMode',
+        'getExtensionKey',
+    ];
+    static events = [SelectMode.ONE, SelectMode.MULTI, SelectEvent.CANCEL];
+    // public hotkeys: string[] = ['left', 'right', 'down', 'up'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.selectedMode = SelectMode.EMPTY;
+        this._initSelectEvent();
+    }
+
+    private _initSelectEvent() {
+        this.canvas.on('selection:created', () => this._emitSelectEvent());
+        this.canvas.on('selection:updated', () => this._emitSelectEvent());
+        this.canvas.on('selection:cleared', () => this._emitSelectEvent());
+    }
+
+    private _emitSelectEvent() {
+        if (!this.canvas) {
+            throw TypeError('还未初始化');
+        }
+
+        const actives = this.canvas
+            .getActiveObjects()
+            .filter((item) => !(item instanceof fabric.GuideLine)); // 过滤掉辅助线
+        if (actives && actives.length === 1) {
+            this.selectedMode = SelectMode.ONE;
+            this.editor.emit(SelectEvent.ONE, actives);
+        } else if (actives && actives.length > 1) {
+            this.selectedMode = SelectMode.MULTI;
+            this.editor.emit(SelectEvent.MULTI, actives);
+        } else {
+            this.editor.emit(SelectEvent.CANCEL);
+        }
+    }
+
+    getSelectMode() {
+        return String(this.selectedMode);
+    }
+
+    insert(callback?: () => void) {
+        selectFiles({ accept: '.json' }).then((files) => {
+            if (files && files.length > 0) {
+                const file = files[0];
+                const reader = new FileReader();
+                reader.readAsText(file, 'UTF-8');
+                reader.onload = () => {
+                    this.loadJSON(reader.result as string, callback);
+                };
+            }
+        });
+    }
+
+    // 设置path属性
+    renderITextPath(textPaths: Record<'id' | 'path', any>[]) {
+        textPaths.forEach((item) => {
+            const object = this.canvas
+                .getObjects()
+                .find((o) => o.id === item.id);
+            if (object) {
+                fabric.Path.fromObject(item.path, (e) => {
+                    object.set('path', e);
+                });
+            }
+        });
+    }
+
+    async loadJSON(jsonFile: string | object, callback?: () => void) {
+        // 确保元素存在id
+        const temp =
+            typeof jsonFile === 'string' ? JSON.parse(jsonFile) : jsonFile;
+        const textPaths: Record<'id' | 'path', any>[] = [];
+        temp.objects.forEach((item: any) => {
+            !item.id && (item.id = uuid());
+            // 收集所有路径文本元素i-text，并设置path为null
+            if (item.type === 'i-text' && item.path) {
+                textPaths.push({ id: item.id, path: item.path });
+                item.path = null;
+            }
+        });
+
+        // hookTransform遍历
+        const tempTransform = await this._transform(temp);
+
+        jsonFile = JSON.stringify(tempTransform);
+        // 加载前钩子
+        this.editor.hooksEntity.hookImportBefore.callAsync(jsonFile, () => {
+            this.canvas.loadFromJSON(jsonFile, () => {
+                // 把i-text对应的path加上
+                this.renderITextPath(textPaths);
+                this.canvas.renderAll();
+                // 加载后钩子
+                this.editor.hooksEntity.hookImportAfter.callAsync(
+                    jsonFile,
+                    () => {
+                        // 修复导入带水印的json无法清除问题 #359
+                        this.editor?.updateDrawStatus &&
+                            typeof this.editor.updateDrawStatus ===
+                                'function' &&
+                            this.editor.updateDrawStatus(
+                                !!temp['overlayImage']
+                            );
+                        this.canvas.renderAll();
+                        callback && callback();
+                        this.editor.emit('loadJson');
+                    }
+                );
+            });
+        });
+    }
+
+    async _transform(json: any) {
+        await this.promiseCallAsync(json);
+        if (json.objects) {
+            const all = json.objects.map((item: any) => {
+                return this._transform(item);
+            });
+            await Promise.all(all);
+        }
+        return json;
+    }
+
+    promiseCallAsync(item: any) {
+        return new Promise((resolve) => {
+            this.editor.hooksEntity.hookTransform.callAsync(item, () => {
+                resolve(item);
+            });
+        });
+    }
+
+    getJson() {
+        const keys = this.getExtensionKey();
+        return this.canvas.toJSON(keys);
+    }
+
+    getExtensionKey() {
+        return [
+            'id',
+            'gradientAngle',
+            'selectable',
+            'hasControls',
+            'linkData',
+            'editable',
+            'extensionType',
+            'extension',
+            'verticalAlign',
+            'roundValue',
+            'getBase64',
+        ];
+    }
+
+    /**
+     * @description: 拖拽添加到画布
+     * @param {Event} event
+     * @param {Object} item
+     */
+    dragAddItem(item: fabric.Object, event?: DragEvent) {
+        if (event) {
+            const { left, top } = this.canvas
+                .getSelectionElement()
+                .getBoundingClientRect();
+            if (event.x < left || event.y < top || item.width === undefined)
+                return;
+
+            const point = {
+                x: event.x - left,
+                y: event.y - top,
+            };
+            const pointerVpt = this.canvas.restorePointerVpt(point);
+            item.left = pointerVpt.x - item.width / 2;
+            item.top = pointerVpt.y;
+        }
+        const { width } = this._getSaveOption();
+        width && item.scaleToWidth(width / 2);
+        this.canvas.add(item);
+        this.canvas.setActiveObject(item);
+
+        !event && this.editor.position('center');
+        this.canvas.requestRenderAll();
+    }
+
+    clipboard() {
+        const jsonStr = this.getJson();
+        return clipboardText(JSON.stringify(jsonStr, null, '\t'));
+    }
+
+    async clipboardBase64() {
+        const dataUrl = await this.preview();
+        return clipboardText(dataUrl);
+    }
+
+    async saveJson() {
+        const dataUrl = this.getJson();
+        // 把文本text转为textgroup，让导入可以编辑
+        await transformText(dataUrl.objects);
+        const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent(
+            JSON.stringify(dataUrl, null, '\t')
+        )}`;
+        downFile(fileStr, 'json');
+    }
+
+    saveSvg() {
+        this.editor.hooksEntity.hookSaveBefore.callAsync('', () => {
+            const { fontOption, svgOption } = this._getSaveSvgOption();
+            fabric.fontPaths = {
+                ...fontOption,
+            };
+            const dataUrl = this.canvas.toSVG(svgOption);
+            const fileStr = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(dataUrl)}`;
+            this.editor.hooksEntity.hookSaveAfter.callAsync(fileStr, () => {
+                downFile(fileStr, 'svg');
+            });
+        });
+    }
+
+    saveImg() {
+        this.editor.hooksEntity.hookSaveBefore.callAsync('', () => {
+            const option = this._getSaveOption();
+            this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+            const dataUrl = this.canvas.toDataURL(option);
+            this.editor.hooksEntity.hookSaveAfter.callAsync(dataUrl, () => {
+                downFile(dataUrl, 'png');
+            });
+        });
+    }
+
+    getBase64() {
+        return new Promise<string>((resolve) => {
+            this.editor.hooksEntity.hookSaveBefore.callAsync('', () => {
+                const option = this._getSaveOption();
+                this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+                const dataUrl = this.canvas.toDataURL(option);
+                this.editor.hooksEntity.hookSaveAfter.callAsync(dataUrl, () =>
+                    resolve(dataUrl)
+                );
+            });
+        });
+    }
+
+    preview() {
+        return new Promise<string>((resolve) => {
+            this.editor.hooksEntity.hookSaveBefore.callAsync('', () => {
+                const option = this._getSaveOption();
+                this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+                this.canvas.renderAll();
+                const dataUrl = this.canvas.toDataURL(option);
+                this.editor.hooksEntity.hookSaveAfter.callAsync(dataUrl, () => {
+                    resolve(dataUrl);
+                });
+            });
+        });
+    }
+
+    staticPreview() {
+        return new Promise<string>((resolve) => {});
+    }
+
+    _getSaveSvgOption() {
+        const workspace = this.canvas
+            .getObjects()
+            .find((item) => item.id === 'workspace');
+        let fontFamilyArry = this.canvas
+            .getObjects()
+            .filter((item) => item.type == 'textbox')
+            .map((item) => item.fontFamily);
+        fontFamilyArry = Array.from(new Set(fontFamilyArry));
+
+        const fontList = this.editor.getPlugin('FontPlugin').cacheList;
+
+        const fontEntry = {};
+        for (const font of fontFamilyArry) {
+            const item = fontList.find((item) => item.name === font);
+            fontEntry[font] = item.file;
+        }
+
+        console.log('_getSaveSvgOption', fontEntry);
+        const { left, top, width, height } = workspace as fabric.Object;
+        return {
+            fontOption: fontEntry,
+            svgOption: {
+                width,
+                height,
+                viewBox: {
+                    x: left,
+                    y: top,
+                    width,
+                    height,
+                },
+            },
+        };
+    }
+
+    _getSaveOption() {
+        const workspace = this.canvas
+            .getObjects()
+            .find((item: fabric.Object) => item.id === 'workspace');
+        const { left, top, width, height } = workspace as fabric.Object;
+        const option = {
+            name: 'New Image',
+            format: 'jpeg',
+            quality: 1,
+            multiplier: 5,
+            width,
+            height,
+            left,
+            top,
+        };
+        return option;
+    }
+
+    clear() {
+        this.canvas.getObjects().forEach((obj) => {
+            if (obj.id !== 'workspace') {
+                this.canvas.remove(obj);
+            }
+        });
+        this.editor?.setWorkspaseBg('#fff');
+        this.canvas.discardActiveObject();
+        this.canvas.renderAll();
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default ServersPlugin;

package/src/index.ts

@@ -0,0 +1,11 @@
+import Editor from './Editor';
+import Utils from './utils/utils';
+import CustomRect from './objects/CustomRect';
+import CustomTextbox from './objects/CustomTextbox';
+import { fabric } from 'fabric';
+import type { Canvas, Point, IEvent } from 'fabric/fabric-impl';
+
+export { Utils, CustomRect, CustomTextbox, fabric, Canvas, Point, IEvent };
+export default Editor;
+
+export * from './interface/Editor';