kritzel-stencil 0.0.126 → 0.0.128

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -0,0 +1,670 @@
+import { Host, h } from "@stencil/core";
+import { KritzelIconRegistry } from "../../../classes/registries/icon-registry.class";
+import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
+import { KritzelEraserTool } from "../../../classes/tools/eraser-tool.class";
+import { KritzelImageTool } from "../../../classes/tools/image-tool.class";
+import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
+import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { DEFAULT_BRUSH_CONFIG } from "../../../configs/default-brush-tool.config";
+import { DEFAULT_TEXT_CONFIG } from "../../../configs/default-text-tool.config";
+import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
+export class KritzelEditor {
+    constructor() {
+        this.scaleMax = ABSOLUTE_SCALE_MAX;
+        this.scaleMin = ABSOLUTE_SCALE_MIN;
+        this.controls = [
+            {
+                name: 'selection',
+                type: 'tool',
+                tool: KritzelSelectionTool,
+                icon: 'cursor',
+            },
+            {
+                name: 'brush',
+                type: 'tool',
+                tool: KritzelBrushTool,
+                icon: 'pen',
+                isDefault: true,
+                config: DEFAULT_BRUSH_CONFIG,
+            },
+            {
+                name: 'eraser',
+                type: 'tool',
+                tool: KritzelEraserTool,
+                icon: 'eraser',
+            },
+            {
+                name: 'text',
+                type: 'tool',
+                tool: KritzelTextTool,
+                icon: 'type',
+                config: DEFAULT_TEXT_CONFIG,
+            },
+            {
+                name: 'image',
+                type: 'tool',
+                tool: KritzelImageTool,
+                icon: 'image',
+            },
+            {
+                name: 'divider',
+                type: 'divider',
+            },
+            {
+                name: 'config',
+                type: 'config',
+            },
+        ];
+        this.globalContextMenuItems = [
+            {
+                label: 'Paste',
+                icon: 'paste',
+                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+                action: menu => this.engineRef.paste(menu.x, menu.y),
+            },
+            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
+        ];
+        this.objectContextMenuItems = [
+            {
+                label: 'Edit',
+                icon: 'pen',
+                visible: (_, objects) => objects.length === 1 && objects[0].isEditable,
+                action: (_, objects) => {
+                    if (objects.length === 1) {
+                        const object = objects[0];
+                        if (object.isEditable) {
+                            object.edit();
+                        }
+                    }
+                },
+            },
+            { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
+            {
+                label: 'Paste',
+                icon: 'paste',
+                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+                action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
+            },
+            { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
+            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
+            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+        ];
+        this.customSvgIcons = {};
+        this.isControlsVisible = true;
+        this.isUtilityPanelVisible = true;
+        this.isEngineReady = false;
+        this.isControlsReady = false;
+        this.isWorkspaceManagerReady = false;
+        this.workspaces = [];
+    }
+    onIsEngineReady(newValue) {
+        if (newValue && this.isControlsReady) {
+            this.checkIsReady();
+        }
+    }
+    onIsControlsReady(newValue) {
+        if (newValue && this.isEngineReady) {
+            this.checkIsReady();
+        }
+    }
+    async getObjectById(id) {
+        return this.engineRef.getObjectById(id);
+    }
+    async addObject(object) {
+        return this.engineRef.addObject(object);
+    }
+    async updateObject(object, updatedProperties) {
+        return this.engineRef.updateObject(object, updatedProperties);
+    }
+    async removeObject(object) {
+        return this.engineRef.removeObject(object);
+    }
+    async getSelectedObjects() {
+        return this.engineRef.getSelectedObjects();
+    }
+    async selectObjects(objects) {
+        return this.engineRef.selectObjects(objects);
+    }
+    async selectAllObjectsInViewport() {
+        return this.engineRef.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.engineRef.clearSelection();
+    }
+    async centerObjectInViewport(object) {
+        return this.engineRef.centerObjectInViewport(object);
+    }
+    handleTouchStart(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+    }
+    componentDidLoad() {
+        this.registerCustomSvgIcons();
+    }
+    async checkIsReady() {
+        await customElements.whenDefined('kritzel-editor');
+        await customElements.whenDefined('kritzel-workspace-manager');
+        await customElements.whenDefined('kritzel-controls');
+        await customElements.whenDefined('kritzel-engine');
+        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
+            return;
+        }
+        this.isReady.emit(this.host);
+    }
+    onEngineReady(event) {
+        this.isEngineReady = true;
+        this.activeWorkspace = event.detail.activeWorkspace;
+        this.workspaces = event.detail.workspaces;
+    }
+    registerCustomSvgIcons() {
+        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
+            KritzelIconRegistry.register(name, svg);
+        }
+    }
+    render() {
+        return (h(Host, { key: '9fe00d70c1a875076e545ca447e2f8d817ebb2fd' }, h("kritzel-workspace-manager", { key: 'ca9ce9f8f277e92f78315e7eaba2bc523da5b9cb', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => this.activeWorkspace = event.detail, onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '098a4690198f0678e7b4c6c897f86ad1698f510f', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.workspaces = event.detail }), h("kritzel-controls", { key: 'e1795f5a7460617628c09766f213c212e48f25e5', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+    }
+    static get is() { return "kritzel-editor"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-editor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scaleMax": {
+                "type": "number",
+                "attribute": "scale-max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ABSOLUTE_SCALE_MAX"
+            },
+            "scaleMin": {
+                "type": "number",
+                "attribute": "scale-min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ABSOLUTE_SCALE_MIN"
+            },
+            "controls": {
+                "type": "unknown",
+                "attribute": "controls",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelToolbarControl[]",
+                    "resolved": "KritzelToolbarControl[]",
+                    "references": {
+                        "KritzelToolbarControl": {
+                            "location": "import",
+                            "path": "../../../interfaces/toolbar-control.interface",
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      icon: 'pen',\r\n      isDefault: true,\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'divider',\r\n      type: 'divider',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
+            },
+            "globalContextMenuItems": {
+                "type": "unknown",
+                "attribute": "global-context-menu-items",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[]",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n  ]"
+            },
+            "objectContextMenuItems": {
+                "type": "unknown",
+                "attribute": "object-context-menu-items",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[]",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    {\r\n      label: 'Edit',\r\n      icon: 'pen',\r\n      visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n      action: (_, objects) => {\r\n        if (objects.length === 1) {\r\n          const object = objects[0];\r\n          if (object.isEditable) {\r\n            object.edit();\r\n          }\r\n        }\r\n      },\r\n    },\r\n    { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n    { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n    { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n  ]"
+            },
+            "customSvgIcons": {
+                "type": "unknown",
+                "attribute": "custom-svg-icons",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "isControlsVisible": {
+                "type": "boolean",
+                "attribute": "is-controls-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "isUtilityPanelVisible": {
+                "type": "boolean",
+                "attribute": "is-utility-panel-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isEngineReady": {},
+            "isControlsReady": {},
+            "isWorkspaceManagerReady": {},
+            "workspaces": {},
+            "activeWorkspace": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isReady",
+                "name": "isReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getObjectById": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(id: string) => Promise<T | null>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "addObject": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(object: T) => Promise<T | null>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "T",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateObject": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "T",
+                            "docs": ""
+                        }, {
+                            "name": "updatedProperties",
+                            "type": "{ [P in keyof T]?: T[P]; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        }
+                    },
+                    "return": "Promise<T>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "removeObject": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(object: T) => Promise<T | null>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "T",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getSelectedObjects": {
+                "complexType": {
+                    "signature": "() => Promise<KritzelBaseObject[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
+                        }
+                    },
+                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "selectObjects": {
+                "complexType": {
+                    "signature": "(objects: KritzelBaseObject[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "selectAllObjectsInViewport": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "centerObjectInViewport": {
+                "complexType": {
+                    "signature": "(object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
+                        }
+                    },
+                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "isEngineReady",
+                "methodName": "onIsEngineReady"
+            }, {
+                "propName": "isControlsReady",
+                "methodName": "onIsControlsReady"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dblclick",
+                "method": "handleTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-editor.js.map