@hprint/plugins 0.0.1-alpha.0

package/src/plugins/FontPlugin.ts

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

package/src/plugins/FreeDrawPlugin.ts

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

package/src/plugins/GroupAlignPlugin.ts

@@ -0,0 +1,365 @@
+import { fabric } from '@hprint/core';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<
+    GroupAlignPlugin,
+    | 'left'
+    | 'right'
+    | 'xcenter'
+    | 'ycenter'
+    | 'top'
+    | 'bottom'
+    | 'xequation'
+    | 'yequation'
+>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class GroupAlignPlugin implements IPluginTempl {
+    static pluginName = 'GroupAlignPlugin';
+    static apis = [
+        'left',
+        'right',
+        'xcenter',
+        'ycenter',
+        'top',
+        'bottom',
+        'xequation',
+        'yequation',
+    ];
+    // public hotkeys: string[] = ['space'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    left() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { left = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    left: left - bounding.left + Number(item.left),
+                });
+                item.setCoords();
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    right() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { left = 0, width = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    left:
+                        left +
+                        width -
+                        (bounding.left + bounding.width) +
+                        Number(item.left),
+                });
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    xcenter() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { left = 0, width = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    left:
+                        left +
+                        width / 2 -
+                        (bounding.left + bounding.width / 2) +
+                        Number(item.left),
+                });
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    ycenter() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { top = 0, height = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    top:
+                        top +
+                        height / 2 -
+                        (bounding.top + bounding.height / 2) +
+                        Number(item.top),
+                });
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    top() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { top = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    top: top - bounding.top + Number(item.top),
+                });
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    bottom() {
+        const { canvas } = this;
+
+        const activeObject = canvas.getActiveObject();
+        const selectObjects = canvas.getActiveObjects();
+        if (activeObject) {
+            const { top = 0, height = 0 } = activeObject;
+            canvas.discardActiveObject();
+            selectObjects.forEach((item) => {
+                const bounding = item.getBoundingRect(true);
+                item.set({
+                    top:
+                        top +
+                        height -
+                        (bounding.top + bounding.height) +
+                        Number(item.top),
+                });
+            });
+            const activeSelection = new fabric.ActiveSelection(selectObjects, {
+                canvas: canvas,
+            });
+            canvas.setActiveObject(activeSelection);
+            canvas.requestRenderAll();
+        }
+    }
+
+    xequation() {
+        const { canvas } = this;
+        const activeObject = canvas.getActiveObject() as fabric.ActiveSelection;
+        // width属性不准确，需要坐标换算
+        function getItemWidth(item: fabric.Object) {
+            let x1 = Infinity,
+                x2 = -Infinity;
+            for (const key in item.aCoords) {
+                if (item.aCoords[key].x < x1) {
+                    x1 = item.aCoords[key].x;
+                }
+                if (item.aCoords[key].x > x2) {
+                    x2 = item.aCoords[key].x;
+                }
+            }
+            return x2 - x1;
+        }
+
+        // 获取所有元素高度
+        function getAllItemHeight() {
+            let count = 0;
+            if (activeObject) {
+                activeObject.forEachObject((item: fabric.Object) => {
+                    count += getItemWidth(item);
+                });
+            }
+
+            return count;
+        }
+        // 获取平均间距
+        function spacWidth() {
+            const count = getAllItemHeight();
+            if (activeObject) {
+                const allSpac = Number(activeObject.width) - count;
+                return allSpac / (activeObject._objects.length - 1);
+            }
+        }
+
+        // 获取当前元素之前所有元素的高度
+        function getItemLeft(i: number) {
+            if (i === 0) return 0;
+            let width = 0;
+            if (activeObject) {
+                for (let index = 0; index < i; index++) {
+                    width += getItemWidth(activeObject._objects[index]);
+                }
+            }
+
+            return width;
+        }
+        if (activeObject && activeObject.type === 'activeSelection') {
+            const activeSelection = activeObject;
+            // 排序
+            activeSelection._objects.sort((a, b) => a.left - b.left);
+
+            // 平均间距计算
+            const itemSpac = spacWidth() as number;
+            // 组原点高度
+            const yHeight = Number(activeObject.width) / 2;
+
+            activeObject.forEachObject((item: fabric.Object, i: number) => {
+                // 获取当前元素之前所有元素的高度
+                const preHeight = getItemLeft(i);
+                // 顶部距离 间距 * 索引 + 之前元素高度 - 原点高度
+                const top = itemSpac * i + preHeight - yHeight;
+                item.set('left', top);
+            });
+        }
+
+        const objecs = canvas.getActiveObjects();
+        canvas.discardActiveObject();
+        objecs.forEach((item: fabric.Object) => {
+            let x = Infinity;
+            for (const key in item.aCoords) {
+                if (item.aCoords[key].x < x) {
+                    x = item.aCoords[key].x;
+                }
+            }
+            item.set('left', 2 * item.left - x);
+        });
+
+        const sel = new fabric.ActiveSelection(objecs, {
+            canvas: canvas,
+        });
+        canvas.setActiveObject(sel);
+        canvas.requestRenderAll();
+    }
+
+    yequation() {
+        const { canvas } = this;
+        const activeObject =
+            (canvas.getActiveObject() as fabric.ActiveSelection) || {
+                top: 0,
+                height: 0,
+            };
+        // width属性不准确，需要坐标换算
+        function getItemHeight(item: fabric.Object) {
+            let y1 = Infinity,
+                y2 = -Infinity;
+            for (const key in item.aCoords) {
+                if (item.aCoords[key].y < y1) {
+                    y1 = item.aCoords[key].y;
+                }
+                if (item.aCoords[key].y > y2) {
+                    y2 = item.aCoords[key].y;
+                }
+            }
+            return y2 - y1;
+        }
+        // 获取所有元素高度
+        function getAllItemHeight() {
+            let count = 0;
+            activeObject.forEachObject((item: fabric.Object) => {
+                count += getItemHeight(item);
+            });
+            return count;
+        }
+        // 获取平均间距
+        function spacHeight() {
+            const count = getAllItemHeight();
+            const allSpac = activeObject.height - count;
+            return allSpac / (activeObject._objects.length - 1);
+        }
+
+        // 获取当前元素之前所有元素的高度
+        function getItemTop(i: number) {
+            if (i === 0) return 0;
+            let height = 0;
+            for (let index = 0; index < i; index++) {
+                height += getItemHeight(activeObject._objects[index]);
+            }
+            return height;
+        }
+
+        if (activeObject && activeObject.type === 'activeSelection') {
+            const activeSelection = activeObject;
+            // 排序
+            activeSelection._objects.sort((a, b) => a.top - b.top);
+
+            // 平均间距计算
+            const itemSpac = spacHeight();
+            // 组原点高度
+            const yHeight = Number(activeObject.height) / 2;
+
+            activeObject.forEachObject((item: fabric.Object, i: number) => {
+                // 获取当前元素之前所有元素的高度
+                const preHeight = getItemTop(i);
+                // 顶部距离 间距 * 索引 + 之前元素高度 - 原点高度
+                const top = itemSpac * i + preHeight - yHeight;
+                item.set('top', top);
+            });
+        }
+
+        const objecs = canvas.getActiveObjects();
+        canvas.discardActiveObject();
+        objecs.forEach((item) => {
+            let y = Infinity;
+            for (const key in item.aCoords) {
+                if (item.aCoords[key].y < y) {
+                    y = item.aCoords[key].y;
+                }
+            }
+            item.set('top', 2 * item.top - y);
+        });
+
+        const sel = new fabric.ActiveSelection(objecs, {
+            canvas: canvas,
+        });
+        canvas.setActiveObject(sel);
+        canvas.requestRenderAll();
+    }
+
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default GroupAlignPlugin;

package/src/plugins/GroupPlugin.ts

@@ -0,0 +1,82 @@
+import { fabric } from '@hprint/core';
+import { utils } from '@hprint/shared';
+import { v4 as uuid } from 'uuid';
+import type { IEditor, IPluginTempl } from '@hprint/core';
+
+type IPlugin = Pick<GroupPlugin, 'unGroup' | 'group'>;
+
+declare module '@hprint/core' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IEditor extends IPlugin {}
+}
+
+class GroupPlugin implements IPluginTempl {
+    static pluginName = 'GroupPlugin';
+    static apis = ['unGroup', 'group'];
+    constructor(
+        public canvas: fabric.Canvas,
+        public editor: IEditor
+    ) {}
+
+    // 拆分组
+    unGroup() {
+        const activeObject = this.canvas.getActiveObject() as fabric.Group;
+        if (!activeObject) return;
+        // 先获取当前选中的对象，然后打散
+        const activeObjectList = activeObject.getObjects();
+        activeObject.toActiveSelection();
+        for (const item of activeObjectList) {
+            item.set('id', uuid());
+        }
+        this.canvas.discardActiveObject().renderAll();
+    }
+
+    group() {
+        // 组合元素
+        const activeObj =
+            this.canvas.getActiveObject() as fabric.ActiveSelection;
+        if (!activeObj) return;
+        const activegroup = activeObj.toGroup();
+        const objectsInGroup = activegroup.getObjects();
+        activegroup.clone((newgroup: fabric.Group) => {
+            newgroup.set('id', uuid());
+            this.canvas.remove(activegroup);
+            objectsInGroup.forEach((object) => {
+                this.canvas.remove(object);
+            });
+            this.canvas.add(newgroup);
+            this.canvas.setActiveObject(newgroup);
+        });
+    }
+
+    contextMenu() {
+        const activeObject = this.canvas.getActiveObject();
+
+        if (utils.isActiveSelection(activeObject)) {
+            return [
+                {
+                    text: '组合',
+                    hotkey: 'Ctrl+V',
+                    disabled: false,
+                    onclick: () => this.group(),
+                },
+            ];
+        }
+
+        if (utils.isGroup(activeObject)) {
+            return [
+                {
+                    text: '拆分组合',
+                    hotkey: 'Ctrl+V',
+                    disabled: false,
+                    onclick: () => this.unGroup(),
+                },
+            ];
+        }
+    }
+    destroy() {
+        console.log('pluginDestroy');
+    }
+}
+
+export default GroupPlugin;