@hprint/core 0.0.1-alpha.0

package/dist/interface/Editor.d.ts

@@ -0,0 +1,35 @@
+import { default as Editor } from '@hprint/core';
+export interface IEditor extends Editor {
+}
+export type IEditorHooksType = 'hookImportBefore' | 'hookImportAfter' | 'hookSaveBefore' | 'hookSaveAfter' | 'hookTransform';
+export declare class IPluginTempl {
+    constructor(canvas: fabric.Canvas, editor: IEditor, options?: IPluginOption);
+    static pluginName: string;
+    static events: string[];
+    static apis: string[];
+    hotkeyEvent?: (name: string, e: KeyboardEvent) => void;
+    hookImportBefore?: (...args: unknown[]) => Promise<unknown>;
+    hookImportAfter?: (...args: unknown[]) => Promise<unknown>;
+    hookSaveBefore?: (...args: unknown[]) => Promise<unknown>;
+    hookSaveAfter?: (...args: unknown[]) => Promise<unknown>;
+    hookTransform?: (...args: unknown[]) => Promise<unknown>;
+    [propName: string]: any;
+    canvas?: fabric.Canvas;
+    editor?: IEditor;
+}
+export declare interface IPluginOption {
+    [propName: string]: unknown | undefined;
+}
+declare class IPluginClass2 extends IPluginTempl {
+    constructor();
+}
+export declare interface IPluginClass {
+    new (canvas: fabric.Canvas, editor: Editor, options?: IPluginOption): IPluginClass2;
+}
+export declare interface IPluginMenu {
+    text: string;
+    command?: () => void;
+    child?: IPluginMenu[];
+}
+export {};
+//# sourceMappingURL=Editor.d.ts.map

package/dist/interface/Editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/interface/Editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAIvC,MAAM,WAAW,OAAQ,SAAQ,MAAM;CAAG;AAG1C,MAAM,MAAM,gBAAgB,GACtB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,CAAC;AAGtB,MAAM,CAAC,OAAO,OAAO,YAAY;gBAEzB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO,EACf,OAAO,CAAC,EAAE,aAAa;IAE3B,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,WAAW,aAAa;IAClC,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC3C;AAED,OAAO,OAAO,aAAc,SAAQ,YAAY;;CAE/C;AAED,MAAM,CAAC,OAAO,WAAW,YAAY;IACjC,KACI,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,aAAa,GACxB,aAAa,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,WAAW,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB"}

package/dist/objects/CustomRect.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof fabric.Rect;
+export default _default;
+//# sourceMappingURL=CustomRect.d.ts.map

package/dist/objects/CustomRect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomRect.d.ts","sourceRoot":"","sources":["../../src/objects/CustomRect.js"],"names":[],"mappings":""}

package/dist/objects/CustomTextbox.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof fabric.Rect;
+export default _default;
+//# sourceMappingURL=CustomTextbox.d.ts.map

package/dist/objects/CustomTextbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomTextbox.d.ts","sourceRoot":"","sources":["../../src/objects/CustomTextbox.js"],"names":[],"mappings":""}

package/dist/plugin.d.ts

@@ -0,0 +1,30 @@
+import { default as Editor } from './Editor';
+type IEditor = Editor;
+declare class FontPlugin {
+    canvas: fabric.Canvas;
+    editor: IEditor;
+    static pluginName: string;
+    static apis: string[];
+    static events: string[];
+    hotkeys: string[];
+    repoSrc: string;
+    constructor(canvas: fabric.Canvas, editor: IEditor, config: {
+        repoSrc: string;
+    });
+    hookImportBefore(json: string): void;
+    downFontByJSON(): void;
+    _createFontCSS(): void;
+    contextMenu(): ({
+        text: string;
+        hotkey: string;
+        subitems: {
+            text: string;
+            hotkey: string;
+            onclick: () => any;
+        }[];
+    } | null)[] | undefined;
+    hotkeyEvent(eventName: string, { type }: KeyboardEvent): void;
+    destroy(): void;
+}
+export default FontPlugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,cAAM,UAAU;IACL,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,UAAU,SAAgB;IAEjC,MAAM,CAAC,IAAI,WAAsB;IAEjC,MAAM,CAAC,MAAM,WAAgC;IAEtC,OAAO,EAAE,MAAM,EAAE,CAA0B;IAElD,OAAO,EAAE,MAAM,CAAC;gBAGZ,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO,EACf,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE;IAU/B,gBAAgB,CAAC,IAAI,EAAE,MAAM;IAK7B,cAAc;IAKd,cAAc;IAMd,WAAW;;;;;;;;;IA0BX,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,aAAa;IAUtD,OAAO;CAGV;AAED,eAAe,UAAU,CAAC"}

package/dist/utils/fabric-history.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=fabric-history.d.ts.map

package/dist/utils/fabric-history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fabric-history.d.ts","sourceRoot":"","sources":["../../src/utils/fabric-history.js"],"names":[],"mappings":""}

package/dist/utils/utils.d.ts

@@ -0,0 +1,61 @@
+import { useClipboard } from '@vueuse/core';
+/**
+ * @description: 图片文件转字符串
+ * @param {Blob|File} file 文件
+ * @return {String}
+ */
+export declare function getImgStr(file: File | Blob): Promise<FileReader['result']>;
+/**
+ * @description: 选择文件
+ * @param {Object} options accept = '', capture = '', multiple = false
+ * @return {Promise}
+ */
+export declare function selectFiles(options: {
+    accept?: string;
+    capture?: string;
+    multiple?: boolean;
+}): Promise<FileList | null>;
+/**
+ * @description: 创建图片元素
+ * @param {String} str 图片地址或者base64图片
+ * @return {Promise} element 图片元素
+ */
+export declare function insertImgFile(str: string): Promise<unknown>;
+/**
+ * Copying text to the clipboard
+ * @param source Copy source
+ * @param options Copy options
+ * @returns Promise that resolves when the text is copied successfully, or rejects when the copy fails.
+ */
+export declare const clipboardText: (source: string, options?: Parameters<typeof useClipboard>[0]) => Promise<void>;
+export declare function downFile(fileStr: string, fileType: string): void;
+export declare function drawImg(ctx: CanvasRenderingContext2D, left: number, top: number, img: HTMLImageElement, wSize: number, hSize: number, angle: number | undefined): void;
+export declare function shiftAngle(start: fabric.Point, end: fabric.Point): {
+    x: number;
+    y: number;
+};
+/**
+ * 类型工具
+ */
+export declare const isImage: (thing: unknown) => thing is fabric.Image;
+export declare const isGroup: (thing: unknown) => thing is fabric.Group;
+export declare const isIText: (thing: unknown) => thing is fabric.IText;
+export declare const isActiveSelection: (thing: unknown) => thing is fabric.ActiveSelection;
+export declare function blobToBase64(blob: Blob): Promise<unknown>;
+export declare function base64ToBlob(base64Data: string): (string | Blob)[] | null;
+declare const _default: {
+    getImgStr: typeof getImgStr;
+    downFile: typeof downFile;
+    selectFiles: typeof selectFiles;
+    insertImgFile: typeof insertImgFile;
+    clipboardText: (source: string, options?: Parameters<typeof useClipboard>[0]) => Promise<void>;
+    drawImg: typeof drawImg;
+    isImage: (thing: unknown) => thing is fabric.Image;
+    isGroup: (thing: unknown) => thing is fabric.Group;
+    isIText: (thing: unknown) => thing is fabric.IText;
+    isActiveSelection: (thing: unknown) => thing is fabric.ActiveSelection;
+    blobToBase64: typeof blobToBase64;
+    base64ToBlob: typeof base64ToBlob;
+};
+export default _default;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAA4B,MAAM,cAAc,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAE1E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAQ3B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,oBAUxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACtB,QAAQ,MAAM,EACd,UAAU,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,kBAG/C,CAAC;AAEF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAOzD;AAED,wBAAgB,OAAO,CACnB,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,QAQ5B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK;;;EAgBhE;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAExD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAExD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAExD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC1B,OAAO,OAAO,KACf,KAAK,IAAI,MAAM,CAAC,eAElB,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,oBAQtC;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,4BAa9C;;;;;;4BA9FW,MAAM,YACJ,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;;qBAoDjB,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAAK;qBAI/B,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAAK;qBAI/B,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,KAAK;+BAKnD,OAAO,KACf,KAAK,IAAI,MAAM,CAAC,eAAe;;;;AA6BlC,wBAaE"}

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@hprint/core",
+    "version": "0.0.1-alpha.0",
+    "description": "",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
+    "scripts": {
+        "build": "vite build",
+        "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
+        "type-check": "tsc --noEmit",
+        "watch": "vite build --watch",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "devDependencies": {
+        "@types/fabric": "~5.3.10",
+        "@types/fontfaceobserver": "~2.1.3",
+        "@types/qs": "^6.14.0",
+        "rimraf": "^6.1.2",
+        "vite": "^7.2.4",
+        "vite-plugin-dts": "^4.5.4"
+    },
+    "keywords": [],
+    "author": "george-hong",
+    "license": "ISC",
+    "publishConfig": {
+        "access": "public"
+    },
+    "packageManager": "pnpm@10.20.0",
+    "dependencies": {
+        "@hprint/shared": "workspace:*",
+        "@vueuse/core": "~10.11.1",
+        "events": "^3.3.0",
+        "fabric": "~5.3.0",
+        "hotkeys-js": "~3.8.9",
+        "tapable": "~2.3.0",
+        "uuid": "~8.3.2"
+    }
+}

package/src/ContextMenu.js

@@ -0,0 +1,277 @@
+import './styles/contextMenu.css';
+
+class ContextMenu {
+    constructor(container, items) {
+        this.container = container;
+        this.dom = null;
+        this.shown = false;
+        this.root = true;
+        this.parent = null;
+        this.submenus = [];
+        this.items = items;
+
+        this._onclick = (e) => {
+            if (
+                this.dom &&
+                e.target != this.dom &&
+                e.target.parentElement != this.dom &&
+                !e.target.classList.contains('item') &&
+                !e.target.parentElement.classList.contains('item')
+            ) {
+                this.hideAll();
+            }
+        };
+
+        this._oncontextmenu = (e) => {
+            e.preventDefault();
+            if (
+                e.target != this.dom &&
+                e.target.parentElement != this.dom &&
+                !e.target.classList.contains('item') &&
+                !e.target.parentElement.classList.contains('item')
+            ) {
+                this.hideAll();
+                this.show(e.clientX, e.clientY);
+            }
+        };
+
+        this._oncontextmenu_keydown = (e) => {
+            if (e.keyCode != 93) return;
+            e.preventDefault();
+
+            this.hideAll();
+            this.show(e.clientX, e.clientY);
+        };
+
+        this._onblur = () => {
+            this.hideAll();
+        };
+    }
+
+    getMenuDom() {
+        const menu = document.createElement('div');
+        menu.classList.add('context');
+
+        for (const item of this.items) {
+            menu.appendChild(this.itemToDomEl(item));
+        }
+
+        return menu;
+    }
+
+    itemToDomEl(data) {
+        const item = document.createElement('div');
+
+        if (data === null) {
+            item.classList = 'separator';
+            return item;
+        }
+
+        if (
+            data.hasOwnProperty('color') &&
+            /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
+                data.color.toString()
+            )
+        ) {
+            item.style.cssText = `color: ${data.color}`;
+        }
+
+        item.classList.add('item');
+
+        const label = document.createElement('span');
+        label.classList = 'label';
+        label.innerText = data.hasOwnProperty('text')
+            ? data['text'].toString()
+            : '';
+        item.appendChild(label);
+
+        if (data.hasOwnProperty('disabled') && data['disabled']) {
+            item.classList.add('disabled');
+        } else {
+            item.classList.add('enabled');
+        }
+
+        const hotkey = document.createElement('span');
+        hotkey.classList = 'hotkey';
+        hotkey.innerText = data.hasOwnProperty('hotkey')
+            ? data['hotkey'].toString()
+            : '';
+        item.appendChild(hotkey);
+
+        if (
+            data.hasOwnProperty('subitems') &&
+            Array.isArray(data['subitems']) &&
+            data['subitems'].length > 0
+        ) {
+            const menu = new ContextMenu(this.container, data['subitems']);
+            menu.root = false;
+            menu.parent = this;
+
+            const openSubItems = () => {
+                if (data.hasOwnProperty('disabled') && data['disabled'] == true)
+                    return;
+
+                this.hideSubMenus();
+
+                const x =
+                    this.dom.offsetLeft +
+                    this.dom.clientWidth +
+                    item.offsetLeft;
+                const y = this.dom.offsetTop + item.offsetTop;
+
+                if (!menu.shown) {
+                    menu.show(x, y);
+                } else {
+                    menu.hide();
+                }
+            };
+
+            this.submenus.push(menu);
+
+            item.classList.add('has-subitems');
+            item.addEventListener('click', openSubItems);
+            item.addEventListener('mousemove', openSubItems);
+        } else if (
+            data.hasOwnProperty('submenu') &&
+            data['submenu'] instanceof ContextMenu
+        ) {
+            const menu = data['submenu'];
+            menu.root = false;
+            menu.parent = this;
+
+            const openSubItems = () => {
+                if (data.hasOwnProperty('disabled') && data['disabled'] == true)
+                    return;
+
+                this.hideSubMenus();
+
+                const x =
+                    this.dom.offsetLeft +
+                    this.dom.clientWidth +
+                    item.offsetLeft;
+                const y = this.dom.offsetTop + item.offsetTop;
+
+                if (!menu.shown) {
+                    menu.show(x, y);
+                } else {
+                    menu.hide();
+                }
+            };
+
+            this.submenus.push(menu);
+
+            item.classList.add('has-subitems');
+            item.addEventListener('click', openSubItems);
+            item.addEventListener('mousemove', openSubItems);
+        } else {
+            item.addEventListener('click', () => {
+                this.hideSubMenus();
+
+                if (item.classList.contains('disabled')) return;
+
+                if (
+                    data.hasOwnProperty('onclick') &&
+                    typeof data['onclick'] === 'function'
+                ) {
+                    const event = {
+                        handled: false,
+                        item: item,
+                        label: label,
+                        hotkey: hotkey,
+                        items: this.items,
+                        data: data,
+                    };
+
+                    data['onclick'](event);
+
+                    if (!event.handled) {
+                        this.hide();
+                    }
+                } else {
+                    this.hide();
+                }
+            });
+
+            item.addEventListener('mousemove', () => {
+                this.hideSubMenus();
+            });
+        }
+
+        return item;
+    }
+
+    hideAll() {
+        if (this.root && !this.parent) {
+            if (this.shown) {
+                this.hideSubMenus();
+
+                this.shown = false;
+                this.container.removeChild(this.dom);
+
+                if (this.parent && this.parent.shown) {
+                    this.parent.hide();
+                }
+            }
+
+            return;
+        }
+
+        this.parent.hide();
+    }
+
+    hide() {
+        if (this.dom && this.shown) {
+            this.shown = false;
+            this.hideSubMenus();
+            this.container.removeChild(this.dom);
+
+            if (this.parent && this.parent.shown) {
+                this.parent.hide();
+            }
+        }
+    }
+
+    hideSubMenus() {
+        for (const menu of this.submenus) {
+            if (menu.shown) {
+                menu.shown = false;
+                menu.container.removeChild(menu.dom);
+            }
+            menu.hideSubMenus();
+        }
+    }
+
+    show(x, y) {
+        this.dom = this.getMenuDom();
+
+        this.dom.style.left = `${x}px`;
+        this.dom.style.top = `${y}px`;
+
+        this.shown = true;
+        this.container.appendChild(this.dom);
+    }
+
+    install() {
+        this.container.addEventListener('contextmenu', this._oncontextmenu);
+        this.container.addEventListener('keydown', this._oncontextmenu_keydown);
+        this.container.addEventListener('click', this._onclick);
+        window.addEventListener('blur', this._onblur);
+    }
+
+    setData(data) {
+        this.items = data;
+    }
+
+    uninstall() {
+        this.dom = null;
+        // this.container.removeEventListener('contextmenu', this._oncontextmenu);
+        this.container.removeEventListener(
+            'keydown',
+            this._oncontextmenu_keydown
+        );
+        this.container.removeEventListener('click', this._onclick);
+        window.removeEventListener('blur', this._onblur);
+    }
+}
+
+export default ContextMenu;