@hprint/plugins 0.0.1-alpha.0

package/src/plugins/LockPlugin.ts

@@ -0,0 +1,240 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import lockImg from '../assets/lock.svg?url';
+import { SelectEvent, SelectMode } from '../types/eventType';
+// import lockImg from '../assets/rotateicon.svg?url';
+// import unlockImg from '../assets/unlock.svg?url'
+
+type IPlugin = Pick<LockPlugin, 'lock' | 'unLock'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+enum ItypeKey {
+    lockMovementX = 'lockMovementX',
+    lockMovementY = 'lockMovementY',
+    lockRotation = 'lockRotation',
+    lockScalingX = 'lockScalingX',
+    lockScalingY = 'lockScalingY',
+}
+
+enum IControlKey {
+    bl = 'bl',
+    br = 'br',
+    mb = 'mb',
+    ml = 'ml',
+    mr = 'mr',
+    mt = 'mt',
+    tl = 'tl',
+    tr = 'tr',
+    mtr = 'mtr',
+    lock = 'lock',
+}
+
+export default class LockPlugin implements IPluginTempl {
+    static pluginName = 'LockPlugin';
+    static apis = ['lock', 'unLock'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+
+    init() {
+        const imgEl = document.createElement('img');
+        imgEl.src = lockImg;
+        const that = this;
+        function renderIcon(
+            ctx: CanvasRenderingContext2D,
+            left: number,
+            top: number,
+            styleOverride: any,
+            fabricObject: fabric.Object
+        ) {
+            const iconWith = 25;
+            ctx.save();
+            ctx.translate(left, top);
+            const angle = fabricObject.angle as number;
+            ctx.rotate(fabric.util.degreesToRadians(angle));
+            ctx.drawImage(
+                imgEl,
+                -iconWith / 2,
+                -iconWith / 2,
+                iconWith,
+                iconWith
+            );
+            ctx.restore();
+        }
+
+        function unLockObject(eventData: any, transform: any): boolean {
+            that.unLock();
+            return true;
+        }
+
+        fabric.Object.prototype.controls.lock = new fabric.Control({
+            x: 0.5,
+            y: 0.5,
+            offsetY: 0,
+            cursorStyle: 'pointer',
+            mouseUpHandler: unLockObject,
+            render: renderIcon,
+        });
+
+        fabric.Textbox.prototype.controls.lock = new fabric.Control({
+            x: 0.5,
+            y: 0.5,
+            offsetY: 0,
+            cursorStyle: 'pointer',
+            mouseUpHandler: unLockObject,
+            render: renderIcon,
+        });
+        this.canvas.on('selection:created', () =>
+            this.renderCornerByActiveObj()
+        );
+        this.canvas.on('selection:updated', () =>
+            this.renderCornerByActiveObj()
+        );
+
+        // 鼠标框选不能多选锁定元素
+        (fabric.Canvas.prototype as any)._groupSelectedObjects = function (
+            e: any
+        ) {
+            const group = this._collectObjects(e);
+            let aGroup;
+
+            for (let i = group.length - 1; i >= 0; i--) {
+                if (group[i].lockMovementX) {
+                    group.splice(i, 1);
+                }
+            }
+
+            // do not create group for 1 element only
+            if (group.length === 1) {
+                this.setActiveObject(group[0], e);
+            } else if (group.length > 1) {
+                aGroup = new fabric.ActiveSelection(group.reverse(), {
+                    canvas: this,
+                });
+                this.setActiveObject(aGroup, e);
+            }
+        };
+
+        // shift+左键点选不能多选锁定元素
+        (fabric.Canvas.prototype as any)._handleGrouping = function (
+            e: any,
+            target: fabric.Object
+        ) {
+            const activeObject = this._activeObject;
+            // avoid multi select when shift click on a corner
+            if (activeObject.__corner) {
+                return;
+            }
+
+            if (target.lockMovementX) return;
+            if (activeObject.lockMovementX) return;
+
+            if (target === activeObject) {
+                // if it's a group, find target again, using activeGroup objects
+                target = this.findTarget(e, true);
+                // if even object is not found or we are on activeObjectCorner, bail out
+                if (!target || !target.selectable) {
+                    return;
+                }
+                if (target.lockMovementX) return;
+            }
+            if (activeObject && activeObject.type === 'activeSelection') {
+                this._updateActiveSelection(target, e);
+            } else {
+                this._createActiveSelection(target, e);
+            }
+        };
+    }
+
+    controlCornersVisible(obj: fabric.Object) {
+        const isLocked = obj.lockMovementX;
+        Object.values(IControlKey).forEach((key: IControlKey) => {
+            if (key === IControlKey.lock) {
+                obj.setControlVisible(key, isLocked);
+            } else {
+                obj.setControlVisible(key, !isLocked);
+            }
+        });
+    }
+
+    renderCornerByActiveObj() {
+        const actives = this.canvas
+            .getActiveObjects()
+            .filter((item) => !(item instanceof fabric.GuideLine));
+        if (actives && actives.length === 1) {
+            const active = actives[0];
+            this.controlCornersVisible(active);
+        } else if (actives && actives.length > 1) {
+            const active = this.canvas.getActiveObject();
+            if (active) {
+                this.controlCornersVisible(active);
+            }
+        }
+    }
+
+    hookImportAfter() {
+        this.canvas.forEachObject((obj: fabric.Object) => {
+            if (obj.hasControls === false && obj.selectable === false) {
+                this.canvas.setActiveObject(obj);
+                this.lock();
+            }
+        });
+        return Promise.resolve();
+    }
+
+    lock() {
+        const activeObject = this.canvas.getActiveObject() as fabric.Object;
+        if (activeObject) {
+            // 修改默认属性
+            Object.values(ItypeKey).forEach((key: ItypeKey) => {
+                activeObject[key] = true;
+            });
+            this.controlCornersVisible(activeObject);
+            this.canvas.renderAll();
+            this.editor.emit(SelectEvent.ONE, [activeObject]);
+        }
+    }
+
+    unLock() {
+        const activeObject = this.canvas.getActiveObject() as fabric.Object;
+        if (activeObject) {
+            activeObject.hasControls = true;
+            activeObject.selectable = true;
+            activeObject.evented = true;
+            // 修改默认属性
+            Object.values(ItypeKey).forEach((key: ItypeKey) => {
+                activeObject[key] = false;
+            });
+            this.controlCornersVisible(activeObject);
+            this.canvas.renderAll();
+            this.editor.emit(SelectEvent.ONE, [activeObject]);
+        }
+    }
+
+    contextMenu() {
+        const selectedMode = this.editor.getSelectMode();
+        const activeObject = this.canvas.getActiveObject();
+        if (selectedMode === SelectMode.ONE && activeObject) {
+            if (activeObject.selectable) {
+                return [
+                    { text: '锁定', hotkey: '', onclick: () => this.lock() },
+                ];
+            } else {
+                return [
+                    { text: '解锁', hotkey: '', onclick: () => this.unLock() },
+                ];
+            }
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}

package/src/plugins/MaskPlugin.ts

@@ -0,0 +1,155 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    MaskPlugin,
+    'setCoverMask' | 'workspaceMaskToggle' | 'getworkspaceMaskStatus'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class MaskPlugin implements IPluginTempl {
+    static pluginName = 'MaskPlugin';
+    static apis = [
+        'setCoverMask',
+        'workspaceMaskToggle',
+        'getworkspaceMaskStatus',
+    ];
+    coverMask: null | fabric.Rect = null;
+    workspace: null | fabric.Rect = null;
+    workspaceEl!: HTMLElement;
+    hackFlag = false;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+
+    private init() {
+        const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+        if (!workspaceEl) {
+            throw new Error('element #workspace is missing, plz check!');
+        }
+        this.workspaceEl = workspaceEl;
+    }
+
+    /**
+     * @desc 蒙版开关
+     * @param val Boolean false
+     */
+    workspaceMaskToggle() {
+        const workspaceMask = this.getWorkspaceMask();
+        if (!workspaceMask) {
+            this.initMask();
+        } else {
+            // 如果有 则删除
+            workspaceMask && this.canvas.remove(workspaceMask);
+            this.workspace?.clone((cloned: fabric.Rect) => {
+                this.canvas.clipPath = cloned;
+                this.coverMask = null;
+                this.canvas.requestRenderAll();
+            });
+            this.editor.off('loadJson', this.initMask);
+        }
+    }
+    /**
+     * @desc 获取蒙版开关
+     */
+    getworkspaceMaskStatus() {
+        return this.coverMask !== null;
+    }
+
+    /**
+     * @desc 获取蒙版
+     * @returns Object
+     */
+    getWorkspaceMask() {
+        return this.canvas
+            .getObjects()
+            .find((item) => item.id === 'coverMask') as fabric.Rect;
+    }
+
+    // 返回workspace对象
+    getWorkspase() {
+        return this.canvas
+            .getObjects()
+            .find((item) => item.id === 'workspace') as fabric.Rect;
+    }
+
+    setCoverMask(hack = false) {
+        if (!this.coverMask || !this.workspace) {
+            return;
+        }
+        const center = this.canvas.getCenter();
+        const zoom = this.canvas.getZoom();
+        let zoomToPointNumber = zoom;
+        if (hack) {
+            // 比较hack的方法，判断为fabric内部的数据更新问题
+            zoomToPointNumber += 0.0000001 * (this.hackFlag ? 1 : -1);
+            this.hackFlag = !this.hackFlag;
+        }
+
+        this.canvas.zoomToPoint(
+            new fabric.Point(center.left, center.top),
+            zoomToPointNumber
+        );
+        if (zoom) {
+            const { workspaceEl } = this;
+            const width = workspaceEl.offsetWidth;
+            const height = workspaceEl.offsetHeight;
+            const cWidth = width / zoom;
+            const cHeight = height / zoom;
+            this.coverMask.width = cWidth;
+            this.coverMask.height = cHeight;
+            this.coverMask.left =
+                (this.workspace.left || 0) +
+                (this.workspace.width! - cWidth) / 2;
+            this.coverMask.top =
+                (this.workspace.top || 0) +
+                (this.workspace.height! - cHeight) / 2;
+            this.workspace.clone((clone: fabric.Rect) => {
+                clone.left = -clone.width! / 2;
+                clone.top = -clone.height! / 2;
+                clone.inverted = true;
+                this.coverMask!.clipPath = clone;
+                this.canvas.requestRenderAll();
+            });
+        }
+    }
+
+    initMask(needBindLoadJSON = true) {
+        this.workspace = this.getWorkspase();
+        if (!this.workspace) {
+            throw new Error('MaskPlugin must be used after WorkspacePlugin!');
+        }
+        const coverMask = new fabric.Rect({
+            fill: 'rgba(0,0,0,0.5)',
+            id: 'coverMask',
+            strokeWidth: 0,
+        });
+        coverMask.set('selectable', false);
+        coverMask.set('hasControls', false);
+        coverMask.set('evented', false);
+        coverMask.hoverCursor = 'default';
+        this.canvas.on('object:added', () => {
+            coverMask.bringToFront();
+        });
+        this.canvas.clipPath = undefined;
+        this.canvas.add(coverMask);
+        this.coverMask = coverMask;
+        this.setCoverMask();
+        // 适配模板和psd的loadjson，在加载完成后再入mask
+        needBindLoadJSON &&
+            this.editor.on('loadJson', () => this.initMask(false));
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default MaskPlugin;

package/src/plugins/MaterialPlugin.ts

@@ -0,0 +1,224 @@
+import { fabric } from '@hprint/core';
+import axios from 'axios';
+import qs from 'qs';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    MaterialPlugin,
+    | 'getTemplTypeList'
+    | 'getTemplList'
+    | 'getMaterialTypeList'
+    | 'getMaterialList'
+    | 'getSizeList'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class MaterialPlugin implements IPluginTempl {
+    static pluginName = 'MaterialPlugin';
+    static apis = [
+        'getTemplTypeList',
+        'getTemplList',
+        'getMaterialTypeList',
+        'getMaterialList',
+        'getSizeList',
+    ];
+    apiMapUrl: { [propName: string]: string };
+    repoSrc: string;
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor,
+        config: { repoSrc: string }
+    ) {
+        this.repoSrc = config.repoSrc;
+        this.apiMapUrl = {
+            template: config.repoSrc + '/template/type.json',
+            svg: config.repoSrc + '/svg/type.json',
+        };
+    }
+    // 获取模板分类
+    getTemplTypeList() {
+        return axios
+            .get(`${this.repoSrc}/api/templ-types?pagination[pageSize]=100`)
+            .then((res) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        value: item.id,
+                        label: item.attributes.name,
+                    };
+                });
+                return list;
+            });
+    }
+    // 分页获取模板列表
+    getTemplList(templType = '', index = 1, searchKeyword = '') {
+        const query = {
+            fields: '*',
+            populate: {
+                img: '*',
+            },
+            filters: {},
+            pagination: {
+                page: index,
+                pageSize: 10,
+            },
+        };
+
+        const queryParams = this._getQueryParams(query, [
+            {
+                key: 'templ_type',
+                value: templType,
+                type: '$eq',
+            },
+            {
+                key: 'name',
+                value: searchKeyword,
+                type: '$contains',
+            },
+        ]);
+
+        return axios
+            .get(`${this.repoSrc}/api/templs?${queryParams}`)
+            .then((res: any) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        name: item.attributes.name,
+                        desc: item.attributes.desc,
+                        src: this._getMaterialPreviewUrl(item.attributes.img),
+                        json: item.attributes.json,
+                    };
+                });
+                return { list, pagination: res?.data?.meta?.pagination };
+            });
+    }
+
+    /**
+     * @description: 获取素材分类
+     * @return {Promise<any>}
+     */
+    getMaterialTypeList() {
+        return axios
+            .get(`${this.repoSrc}/api/material-types?pagination[pageSize]=100`)
+            .then((res) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        value: item.id,
+                        label: item.attributes.name,
+                    };
+                });
+                return list;
+            });
+    }
+
+    /**
+     * @description: 获取素材列表
+     * @returns Promise<Array>
+     */
+    getMaterialList(materialType = '', index = 1, searchKeyword = '') {
+        const query = {
+            populate: {
+                img: '*',
+            },
+            // fields: ['materialType'],
+            filters: {},
+            pagination: {
+                page: index,
+                pageSize: 50,
+            },
+        };
+
+        const queryParams = this._getQueryParams(query, [
+            {
+                key: 'material_type',
+                value: materialType,
+                type: '$eq',
+            },
+            {
+                key: 'name',
+                value: searchKeyword,
+                type: '$contains',
+            },
+        ]);
+
+        return axios
+            .get(`${this.repoSrc}/api/materials?${queryParams}`)
+            .then((res: any) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        name: item.attributes.name,
+                        desc: item.attributes.desc,
+                        src: this._getMaterialInfoUrl(item.attributes.img),
+                        previewSrc: this._getMaterialPreviewUrl(
+                            item.attributes.img
+                        ),
+                    };
+                });
+                return { list, pagination: res?.data?.meta?.pagination };
+            });
+    }
+
+    getSizeList() {
+        return axios
+            .get(`${this.repoSrc}/api/sizes?pagination[pageSize]=100`)
+            .then((res) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        value: item.id,
+                        name: item.attributes.name,
+                        width: Number(item.attributes.width),
+                        height: Number(item.attributes.height),
+                        unit: item.attributes.unit,
+                    };
+                });
+                return list;
+            });
+    }
+    getFontList() {
+        return axios
+            .get(`${this.repoSrc}/api/fonts?pagination[pageSize]=100`)
+            .then((res) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        value: item.id,
+                        label: item.attributes.name,
+                    };
+                });
+                return list;
+            });
+    }
+
+    _getMaterialInfoUrl(info: any) {
+        const imgUrl = info?.data?.attributes?.url || '';
+        return this.repoSrc + imgUrl;
+    }
+
+    _getMaterialPreviewUrl(info: any) {
+        const imgUrl =
+            info?.data?.attributes?.formats?.small?.url ||
+            info?.data?.attributes?.url ||
+            '';
+        return this.repoSrc + imgUrl;
+    }
+
+    // 拼接查询条件参数
+    _getQueryParams(option: any, filters: any) {
+        filters.forEach((item: any) => {
+            const { key, value, type } = item;
+            if (value) {
+                option.filters[key] = { [type]: value };
+            }
+        });
+        return qs.stringify(option);
+    }
+
+    async getMaterialInfo(typeId: string) {
+        const url = this.apiMapUrl[typeId];
+        const res = await axios.get(url, { params: { typeId } });
+        return res.data.data;
+    }
+}
+
+export default MaterialPlugin;

package/src/plugins/MiddleMousePlugin.ts

@@ -0,0 +1,45 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+class MiddleMousePlugin implements IPluginTempl {
+    static pluginName = 'MiddleMousePlugin';
+    workspaceEl!: HTMLElement;
+
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {
+        this.init();
+    }
+
+    private init() {
+        const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+        if (!workspaceEl) {
+            throw new Error('element #workspace is missing, plz check!');
+        }
+        this.workspaceEl = workspaceEl;
+        this.initListener();
+    }
+
+    private handleMouseUp = (e: MouseEvent) =>
+        e.button === 1 && this.canvas.fire('mouse:up', { e });
+
+    private handleMouseDown = (e: MouseEvent) =>
+        e.button === 1 && this.canvas.fire('mouse:down', { e });
+
+    /**
+     * @desc 初始化鼠标中键监听事件
+     */
+    private initListener() {
+        this.workspaceEl.addEventListener('mouseup', this.handleMouseUp);
+        this.workspaceEl.addEventListener('mousedown', this.handleMouseDown);
+    }
+
+    destroy() {
+        this.workspaceEl.removeEventListener('mouseup', this.handleMouseUp);
+        this.workspaceEl.removeEventListener('mousedown', this.handleMouseDown);
+        console.log('pluginDestroy');
+    }
+}
+
+export default MiddleMousePlugin;

package/src/plugins/MoveHotKeyPlugin.ts

@@ -0,0 +1,46 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+class MoveHotKeyPlugin implements IPluginTempl {
+    static pluginName = 'MoveHotKeyPlugin';
+    hotkeys: string[] = ['left', 'right', 'down', 'up'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    // 快捷键扩展回调
+    hotkeyEvent(eventName: string, e: KeyboardEvent) {
+        if (e.type === 'keydown') {
+            const { canvas } = this;
+            const activeObject = canvas.getActiveObject();
+            if (!activeObject) return;
+            switch (eventName) {
+                case 'left':
+                    if (activeObject.left === undefined) return;
+                    activeObject.set('left', activeObject.left - 1);
+                    break;
+                case 'right':
+                    if (activeObject.left === undefined) return;
+                    activeObject.set('left', activeObject.left + 1);
+                    break;
+                case 'down':
+                    if (activeObject.top === undefined) return;
+                    activeObject.set('top', activeObject.top + 1);
+                    break;
+                case 'up':
+                    if (activeObject.top === undefined) return;
+                    activeObject.set('top', activeObject.top - 1);
+                    break;
+                default:
+            }
+            canvas.renderAll();
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default MoveHotKeyPlugin;