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

package/src/plugins/MaterialPlugin.ts

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

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

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