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

package/src/plugins/FlipPlugin.ts

@@ -1,59 +1,59 @@
-import { fabric } from '@hprint/core';
-import type { IEditor, IPluginTempl } from '@hprint/core';
-import { SelectMode } from '../types/eventType';
-
-type IPlugin = Pick<FlipPlugin, 'flip'>;
-
-declare module '@hprint/core' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IEditor extends IPlugin {}
-}
-
-// import event from '@/utils/event/notifier';
-
-export default class FlipPlugin implements IPluginTempl {
-    static pluginName = 'FlipPlugin';
-    static apis = ['flip'];
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {}
-
-    flip(type: 'X' | 'Y') {
-        const activeObject = this.canvas.getActiveObject();
-        if (activeObject) {
-            activeObject
-                .set(`flip${type}`, !activeObject[`flip${type}`])
-                .setCoords();
-            this.canvas.requestRenderAll();
-        }
-    }
-
-    contextMenu() {
-        const selectedMode = this.editor.getSelectMode();
-        if (selectedMode === SelectMode.ONE) {
-            return [
-                {
-                    text: '翻转',
-                    hotkey: '❯',
-                    subitems: [
-                        {
-                            text: '水平翻转',
-                            hotkey: '|',
-                            onclick: () => this.flip('X'),
-                        },
-                        {
-                            text: '垂直翻转',
-                            hotkey: '-',
-                            onclick: () => this.flip('Y'),
-                        },
-                    ],
-                },
-            ];
-        }
-    }
-
-    destroy() {
-        console.log('pluginDestroy');
-    }
-}
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+import { SelectMode } from '../types/eventType';
+
+type IPlugin = Pick<FlipPlugin, 'flip'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+// import event from '@/utils/event/notifier';
+
+export default class FlipPlugin implements IPluginTempl {
+    static pluginName = 'FlipPlugin';
+    static apis = ['flip'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    flip(type: 'X' | 'Y') {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            activeObject
+                .set(`flip${type}`, !activeObject[`flip${type}`])
+                .setCoords();
+            this.canvas.requestRenderAll();
+        }
+    }
+
+    contextMenu() {
+        const selectedMode = this.editor.getSelectMode();
+        if (selectedMode === SelectMode.ONE) {
+            return [
+                {
+                    text: '翻转',
+                    hotkey: '❯',
+                    subitems: [
+                        {
+                            text: '水平翻转',
+                            hotkey: '|',
+                            onclick: () => this.flip('X'),
+                        },
+                        {
+                            text: '垂直翻转',
+                            hotkey: '-',
+                            onclick: () => this.flip('Y'),
+                        },
+                    ],
+                },
+            ];
+        }
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}

package/src/plugins/FontPlugin.ts

@@ -1,165 +1,165 @@
-import { fabric } from '@hprint/core';
-import FontFaceObserver from 'fontfaceobserver';
-import axios from 'axios';
-import { utils } from '@hprint/shared';
-import type { IEditor, IPluginTempl } from '@hprint/core';
-
-type IPlugin = Pick<
-    FontPlugin,
-    'getFontList' | 'loadFont' | 'getFontJson' | 'downFontByJSON'
->;
-
-declare module '@hprint/core' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IEditor extends IPlugin {}
-}
-
-interface Font {
-    type: string;
-    fontFamily: string;
-}
-
-interface FontSource {
-    name: string;
-    type: string;
-    file: string;
-    img: string;
-}
-
-class FontPlugin implements IPluginTempl {
-    private tempPromise: Promise<FontSource[]> | null;
-    static pluginName = 'FontPlugin';
-    static apis = ['getFontList', 'loadFont', 'getFontJson', 'downFontByJSON'];
-    repoSrc: string;
-    cacheList: FontSource[];
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor,
-        config: { repoSrc: string }
-    ) {
-        this.repoSrc = config.repoSrc;
-        this.cacheList = [];
-        this.tempPromise = null;
-    }
-
-    hookImportBefore(json: string) {
-        return this.downFontByJSON(json);
-    }
-    getFontList() {
-        // 返回暂存字体
-        if (this.cacheList.length) {
-            return Promise.resolve(this.cacheList);
-        }
-        if (this.tempPromise) return this.tempPromise;
-        this.tempPromise = axios
-            .get(
-                `${this.repoSrc}/api/fonts?populate=*&pagination[pageSize]=100`
-            )
-            .then((res) => {
-                const list = res.data.data.map((item: any) => {
-                    return {
-                        name: item.attributes.name,
-                        type: item.attributes.type,
-                        file:
-                            this.repoSrc +
-                            item.attributes.file.data.attributes.url,
-                        img:
-                            this.repoSrc +
-                            item.attributes.img.data.attributes.url,
-                    };
-                });
-                this.cacheList = list;
-                this.createFontCSS(list);
-                return list;
-            });
-        return this.tempPromise;
-    }
-
-    downFontByJSON(str: string) {
-        const object = JSON.parse(str);
-        let fontFamilies: string[] = [];
-        const skipFonts = ['arial'];
-        if (object.objects) {
-            fontFamilies = JSON.parse(str)
-                .objects.filter((item: Font) => {
-                    const hasFontFile = this.cacheList.find(
-                        (font) => font.name === item.fontFamily
-                    );
-                    return (
-                        item.type.includes('text') &&
-                        !skipFonts.includes(item.fontFamily) &&
-                        hasFontFile
-                    );
-                })
-                .map((item: Font) => item.fontFamily);
-        } else {
-            fontFamilies = skipFonts.includes(object.fontFamily)
-                ? []
-                : [object.fontFamily];
-        }
-
-        const fontFamiliesAll = fontFamilies.map((fontName) => {
-            const font = new FontFaceObserver(fontName);
-            return font.load(null, 150000);
-        });
-        return Promise.all(fontFamiliesAll);
-    }
-
-    // 获取字体数据 新增字体样式使用
-    getFontJson() {
-        const activeObject = this.canvas.getActiveObject();
-        if (activeObject) {
-            const json = activeObject.toJSON([
-                'id',
-                'gradientAngle',
-                'selectable',
-                'hasControls',
-            ]);
-            const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent(
-                JSON.stringify(json, null, '\t')
-            )}`;
-            const dataUrl = activeObject.toDataURL({});
-            utils.downFile(fileStr, 'font.json');
-            utils.downFile(dataUrl, 'font.png');
-        }
-    }
-
-    loadFont(fontName: string) {
-        const font = new FontFaceObserver(fontName);
-        return font.load(null, 150000).then(() => {
-            const activeObject = this.canvas.getActiveObjects()[0];
-            if (activeObject) {
-                activeObject.set('fontFamily', fontName);
-                this.canvas.renderAll();
-            }
-        });
-    }
-
-    createFontCSS(arr: any[]) {
-        let code = '';
-        arr.forEach((item) => {
-            code =
-                code +
-                `
-    @font-face {
-      font-family: ${item.name};
-      src: url('${item.file}');
-    }
-    `;
-        });
-        const style = document.createElement('style');
-        try {
-            style.appendChild(document.createTextNode(code));
-        } catch (error) {
-            // style.styleSheet.cssText = code;
-        }
-        const head = document.getElementsByTagName('head')[0];
-        head.appendChild(style);
-    }
-
-    destroy() {
-        console.log('pluginDestroy');
-    }
-}
-
-export default FontPlugin;
+import { fabric } from '@hprint/core';
+import FontFaceObserver from 'fontfaceobserver';
+import axios from 'axios';
+import { utils } from '@hprint/shared';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    FontPlugin,
+    'getFontList' | 'loadFont' | 'getFontJson' | 'downFontByJSON'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+interface Font {
+    type: string;
+    fontFamily: string;
+}
+
+interface FontSource {
+    name: string;
+    type: string;
+    file: string;
+    img: string;
+}
+
+class FontPlugin implements IPluginTempl {
+    private tempPromise: Promise<FontSource[]> | null;
+    static pluginName = 'FontPlugin';
+    static apis = ['getFontList', 'loadFont', 'getFontJson', 'downFontByJSON'];
+    repoSrc: string;
+    cacheList: FontSource[];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor,
+        config: { repoSrc: string }
+    ) {
+        this.repoSrc = config.repoSrc;
+        this.cacheList = [];
+        this.tempPromise = null;
+    }
+
+    hookImportBefore(json: string) {
+        return this.downFontByJSON(json);
+    }
+    getFontList() {
+        // 返回暂存字体
+        if (this.cacheList.length) {
+            return Promise.resolve(this.cacheList);
+        }
+        if (this.tempPromise) return this.tempPromise;
+        this.tempPromise = axios
+            .get(
+                `${this.repoSrc}/api/fonts?populate=*&pagination[pageSize]=100`
+            )
+            .then((res) => {
+                const list = res.data.data.map((item: any) => {
+                    return {
+                        name: item.attributes.name,
+                        type: item.attributes.type,
+                        file:
+                            this.repoSrc +
+                            item.attributes.file.data.attributes.url,
+                        img:
+                            this.repoSrc +
+                            item.attributes.img.data.attributes.url,
+                    };
+                });
+                this.cacheList = list;
+                this.createFontCSS(list);
+                return list;
+            });
+        return this.tempPromise;
+    }
+
+    downFontByJSON(str: string) {
+        const object = JSON.parse(str);
+        let fontFamilies: string[] = [];
+        const skipFonts = ['arial'];
+        if (object.objects) {
+            fontFamilies = JSON.parse(str)
+                .objects.filter((item: Font) => {
+                    const hasFontFile = this.cacheList.find(
+                        (font) => font.name === item.fontFamily
+                    );
+                    return (
+                        item.type.includes('text') &&
+                        !skipFonts.includes(item.fontFamily) &&
+                        hasFontFile
+                    );
+                })
+                .map((item: Font) => item.fontFamily);
+        } else {
+            fontFamilies = skipFonts.includes(object.fontFamily)
+                ? []
+                : [object.fontFamily];
+        }
+
+        const fontFamiliesAll = fontFamilies.map((fontName) => {
+            const font = new FontFaceObserver(fontName);
+            return font.load(null, 150000);
+        });
+        return Promise.all(fontFamiliesAll);
+    }
+
+    // 获取字体数据 新增字体样式使用
+    getFontJson() {
+        const activeObject = this.canvas.getActiveObject();
+        if (activeObject) {
+            const json = activeObject.toJSON([
+                'id',
+                'gradientAngle',
+                'selectable',
+                'hasControls',
+            ]);
+            const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent(
+                JSON.stringify(json, null, '\t')
+            )}`;
+            const dataUrl = activeObject.toDataURL({});
+            utils.downFile(fileStr, 'font.json');
+            utils.downFile(dataUrl, 'font.png');
+        }
+    }
+
+    loadFont(fontName: string) {
+        const font = new FontFaceObserver(fontName);
+        return font.load(null, 150000).then(() => {
+            const activeObject = this.canvas.getActiveObjects()[0];
+            if (activeObject) {
+                activeObject.set('fontFamily', fontName);
+                this.canvas.renderAll();
+            }
+        });
+    }
+
+    createFontCSS(arr: any[]) {
+        let code = '';
+        arr.forEach((item) => {
+            code =
+                code +
+                `
+    @font-face {
+      font-family: ${item.name};
+      src: url('${item.file}');
+    }
+    `;
+        });
+        const style = document.createElement('style');
+        try {
+            style.appendChild(document.createTextNode(code));
+        } catch (error) {
+            // style.styleSheet.cssText = code;
+        }
+        const head = document.getElementsByTagName('head')[0];
+        head.appendChild(style);
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default FontPlugin;

package/src/plugins/FreeDrawPlugin.ts

@@ -1,49 +1,49 @@
-import { fabric } from '@hprint/core';
-import { v4 as uuid } from 'uuid';
-import type { IEditor, IPluginTempl } from '@hprint/core';
-
-type IPlugin = Pick<FreeDrawPlugin, 'startDraw' | 'endDraw'>;
-
-declare module '@hprint/core' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IEditor extends IPlugin {}
-}
-
-type DrawOptions = {
-    width: number;
-};
-
-export default class FreeDrawPlugin implements IPluginTempl {
-    static pluginName = 'FreeDrawPlugin';
-    static apis = ['startDraw', 'endDraw'];
-    constructor(
-        public canvas: fabric.Canvas,
-        public editor: IEditor
-    ) {}
-
-    _bindEvent() {
-        this.canvas.on('path:created', this._createdHandler);
-    }
-
-    _unbindEvent() {
-        this.canvas.off('path:created', this._createdHandler);
-    }
-
-    _createdHandler = (opt: any) => {
-        opt.path.set('id', uuid());
-    };
-
-    startDraw(options: DrawOptions) {
-        this.canvas.isDrawingMode = true;
-        this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
-        this.canvas.freeDrawingBrush.width = options.width;
-        this._bindEvent();
-    }
-    endDraw() {
-        if (this.canvas.isDrawingMode) {
-            this.canvas.isDrawingMode = false;
-            this._unbindEvent();
-            return;
-        }
-    }
-}
+import { fabric } from '@hprint/core';
+import { v4 as uuid } from 'uuid';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<FreeDrawPlugin, 'startDraw' | 'endDraw'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+type DrawOptions = {
+    width: number;
+};
+
+export default class FreeDrawPlugin implements IPluginTempl {
+    static pluginName = 'FreeDrawPlugin';
+    static apis = ['startDraw', 'endDraw'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    _bindEvent() {
+        this.canvas.on('path:created', this._createdHandler);
+    }
+
+    _unbindEvent() {
+        this.canvas.off('path:created', this._createdHandler);
+    }
+
+    _createdHandler = (opt: any) => {
+        opt.path.set('id', uuid());
+    };
+
+    startDraw(options: DrawOptions) {
+        this.canvas.isDrawingMode = true;
+        this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
+        this.canvas.freeDrawingBrush.width = options.width;
+        this._bindEvent();
+    }
+    endDraw() {
+        if (this.canvas.isDrawingMode) {
+            this.canvas.isDrawingMode = false;
+            this._unbindEvent();
+            return;
+        }
+    }
+}