kritzel-stencil 0.0.129 → 0.0.131

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

@@ -15,6 +15,17 @@ import { KritzelEventHelper } from "../../../helpers/event.helper";
 import { KritzelClassHelper } from "../../../helpers/class.helper";
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 export class KritzelEngine {
+    workspace;
+    activeTool;
+    globalContextMenuItems;
+    objectContextMenuItems;
+    scaleMax = ABSOLUTE_SCALE_MAX;
+    scaleMin = ABSOLUTE_SCALE_MIN;
+    isEngineReady;
+    activeToolChange;
+    workspacesChange;
+    host;
+    forceUpdate = 0;
     onWorkspaceChange(newWorkspace) {
         if (newWorkspace) {
             this.store.initializeWorkspace(newWorkspace);
@@ -40,6 +51,11 @@ export class KritzelEngine {
             this.store.state.scaleMin = newValue;
         }
     }
+    store;
+    viewport;
+    contextMenuHandler;
+    keyHandler;
+    contextMenuElement = null;
     get isSelecting() {
         return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
     }
@@ -47,10 +63,6 @@ export class KritzelEngine {
         return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
     }
     constructor() {
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.forceUpdate = 0;
-        this.contextMenuElement = null;
         this.store = new KritzelStore(this);
     }
     componentWillLoad() {
@@ -70,7 +82,6 @@ export class KritzelEngine {
         }
     }
     handleWheel(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
@@ -78,10 +89,9 @@ export class KritzelEngine {
             this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
+        this.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
@@ -98,36 +108,33 @@ export class KritzelEngine {
         this.host.setPointerCapture(ev.pointerId);
         this.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
+        this.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
+        this.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
         this.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.store.state?.activeTool?.handlePointerUp(ev);
     }
     handleContextMenu(ev) {
         ev.preventDefault();
@@ -176,11 +183,10 @@ export class KritzelEngine {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', tool);
         this.store.deselectAllObjects();
-        tool === null || tool === void 0 ? void 0 : tool.onActivate();
+        tool?.onActivate();
     }
     async setFocus() {
         this.host.focus();
@@ -257,15 +263,13 @@ export class KritzelEngine {
         return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
     }
     async selectObjects(objects) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         this.store.deselectAllObjects();
         this.store.selectObjects(objects);
     }
     async selectAllObjectsInViewport() {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         this.store.deselectAllObjects();
         this.store.selectAllObjectsInViewport();
@@ -280,8 +284,7 @@ export class KritzelEngine {
         return object;
     }
     async getCopiedObjects() {
-        var _a;
-        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
+        return this.store.state.copiedObjects?.objects || [];
     }
     async createWorkspace(workspace) {
         return this.store.createWorkspace(workspace).then(() => {
@@ -294,8 +297,8 @@ export class KritzelEngine {
         });
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        return this.store.deleteWorkspace(workspace).then(async () => {
+            this.workspacesChange.emit(this.store.state.workspaces);
         });
     }
     async getWorkspaces() {
@@ -319,147 +322,133 @@ export class KritzelEngine {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'c7e747aa6106e7904cf9f44db37fa285a6fb4434' }, h("div", { key: 'b75652ab9f9531dce765cbe448ad3131c172d06a', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: 'fd1355bd640b9296949f6bbcf084589578654db6' }, "ActiveWorkspaceId: ", (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 :
-            _b.id), h("div", { key: '8520e3e774e97ebc42ee86401fbfbafbe41c88e8' }, "ActiveWorkspaceName: ", (_d = (_c = this.store.state) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 :
-            _d.name), h("div", { key: 'f247b4d76cd018e787a9b59829deedeb6c5c5272' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.translateX), h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
-            _f.translateY), h("div", { key: '1735fde66588e285039bcc090dee71630608d666' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
-            _g.viewportWidth), h("div", { key: '15f8b3305c27a395b8aa6463c5acec42bb3e3ddd' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
-            _h.viewportHeight), h("div", { key: 'd2e39bae191c7256967d0140f38e75dccf95f24c' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: 'cd3f53ff4a8f119a2ef975133f69fc3798fe0f71' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
-            _j.scale), h("div", { key: 'b1f8c77589a80fe49d0947602bda46438921f7a8' }, "ActiveTool: ", (_l = (_k = this.store.state) === null || _k === void 0 ? void 0 : _k.activeTool) === null || _l === void 0 ? void 0 :
-            _l.name), h("div", { key: '41cd94f58f71cd5c1cffc679ada5fc51f6ceeea7' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'bf8495bb924673aad3a9ca57ed0bf9ac23874dfb' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), h("div", { key: '3823936f5b46b100742f94fac8d7e87ed93ddb58' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), h("div", { key: '62eb836fff78b050cdab8cbef54f88f9d5b644ba' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'), h("div", { key: 'dac6b8d18ae8f6317bdd318ad48a9612f9942613' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: 'af232e2cd738e255029f5611531c246ac63a28ce' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '95a44fef4b6befe95bfadfc62957103b48bf76b6' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'e8162d4de449a0d6756c2f540fca28353c193438' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '4440d023cd4982c834736e06863698c3baf72353' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'd3e467dd18e53850df4d5bedf2b69f54b1fbe5c6' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'df6e4bca16cbe4346786a544d6f6c53d87bdb699' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '532aebf1ff35cc578f12e36cdaf00713ffc76b97' }, "PointerX: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
-            _r.pointerX), h("div", { key: 'f710f8c8d27979da4a40e50452e2cdd63cdefa98' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
-            _s.pointerY), h("div", { key: '0175010e1d5a22be81ca0b2d88dd1aff217eacfd' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), h("div", { key: 'dc2964c479405ed147bd5f090e24262595a474e2', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale}, 0, 0, ${(_v = this.store.state) === null || _v === void 0 ? void 0 : _v.scale}, ${(_w = this.store.state) === null || _w === void 0 ? void 0 : _w.translateX}, ${(_x = this.store.state) === null || _x === void 0 ? void 0 : _x.translateY})`,
-            } }, (_y = this.store.state.objectsOctree.allObjects()) === null || _y === void 0 ? void 0 :
-            _y.map(object => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                        height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: `rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
-                        opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                        minHeight: '0',
-                        minWidth: '0',
-                        backgroundColor: object.backgroundColor,
-                        borderColor: object.borderColor,
-                        borderWidth: object.borderWidth + 'px',
-                        borderStyle: 'solid',
-                        padding: object.padding + 'px',
-                        overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object === null || object === void 0 ? void 0 : object.height.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.width.toString(),
-                        position: 'absolute',
-                        overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
-                        width: '100%',
-                        height: '100%',
-                        userSelect: 'none',
-                        pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                        width: '100%',
-                        height: '100%',
-                        color: object.fontColor,
-                        fontSize: ((_a = object.fontSize) === null || _a === void 0 ? void 0 : _a.toString()) + 'px',
-                        fontFamily: object.fontFamily,
-                        border: 'none',
-                        outline: 'none',
-                        resize: 'none',
-                        overflow: 'hidden',
-                        display: 'block',
-                        padding: '1px',
-                        whiteSpace: 'nowrap',
-                        pointerEvents: object.isReadonly ? 'none' : 'auto',
-                        cursor: object.isReadonly ? 'default' : 'text',
-                        caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                        pointerEvents: 'auto',
-                        overflow: 'hidden',
-                        display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
-                        fill: 'transparent',
-                        cursor: 'grab',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), h("svg", { key: '86f9a08bea3ac2d261b14b2eec471fafd20ca11f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.height.toString(),
-                width: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.width.toString(),
+        return (h(Host, { key: 'fd353ff17bcde1a9ab646b6f463d1c6ce00a3dff' }, h("div", { key: '45bc2af8f1a3a2bfa3aa76a478c7bf208027da0c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '50e932febc35c7dbe852ad99d96ca4f0e0b742fc' }, "ActiveWorkspaceId: ", this.store.state?.activeWorkspace?.id), h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", this.store.state?.activeWorkspace?.name), h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", this.store.state?.translateX), h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", this.store.state?.translateY), h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", this.store.state?.viewportWidth), h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", this.store.state?.viewportHeight), h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", this.store.state?.scale), h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", this.store.state?.activeTool?.name), h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", this.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", this.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", this.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", this.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1713185b36a50dfe0f9efa0c92394222db80a377' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '5104f428b808e7d843712302ad2e58b619876bee' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cb3b27a00627188e7082fa94169eb961a1ae6ed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '7407656e61be665f27e706738faa6d318e2c1d04' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '701bf05c25cb3d3728af6602f694e6064627ea59' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '772c345ea9c64ef800fdbb26919f1a54ca889025' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'dc687c8ba24182b8b61979ad334b989d3be72ec6' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '10cbc575a7905396a76eca4e7b56be719755aeb4' }, "PointerX: ", this.store.state?.pointerX), h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", this.store.state?.pointerY), h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", this.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', id: "origin", class: "origin", style: {
+                transform: `matrix(${this.store.state?.scale}, 0, 0, ${this.store.state?.scale}, ${this.store.state?.translateX}, ${this.store.state?.translateY})`,
+            } }, this.store.state.objectsMap.allObjects()?.map(object => {
+            return (h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object?.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+                    height: object?.totalHeight.toString(),
+                    width: object?.totalWidth.toString(),
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: `rotate(${object.rotationDegrees}deg)`,
+                    transformOrigin: 'center',
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                    minHeight: '0',
+                    minWidth: '0',
+                    backgroundColor: object.backgroundColor,
+                    borderColor: object.borderColor,
+                    borderWidth: object.borderWidth + 'px',
+                    borderStyle: 'solid',
+                    padding: object.padding + 'px',
+                    overflow: 'visible',
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.height.toString(),
+                    width: object?.width.toString(),
+                    position: 'absolute',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
+                    width: '100%',
+                    height: '100%',
+                    userSelect: 'none',
+                    pointerEvents: 'none',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    width: '100%',
+                    height: '100%',
+                    color: object.fontColor,
+                    fontSize: object.fontSize?.toString() + 'px',
+                    fontFamily: object.fontFamily,
+                    border: 'none',
+                    outline: 'none',
+                    resize: 'none',
+                    overflow: 'hidden',
+                    display: 'block',
+                    padding: '1px',
+                    whiteSpace: 'nowrap',
+                    pointerEvents: object.isReadonly ? 'none' : 'auto',
+                    cursor: object.isReadonly ? 'default' : 'text',
+                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    overflow: 'hidden',
+                    display: 'block',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.store.state?.scale), style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    cursor: 'grab',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+        }), h("svg", { key: '0098f1b8233d45f49dc8bdcc13c08f20c04b65e1', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                height: this.store.state.currentPath?.height.toString(),
+                width: this.store.state.currentPath?.width.toString(),
                 left: '0',
                 top: '0',
-                zIndex: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.zIndex.toString(),
+                zIndex: this.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
+                transform: this.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_3 = this.store.state.currentPath) === null || _3 === void 0 ? void 0 : _3.viewBox }, h("path", { key: '66ebcf1791c993d62b34a2e4da1d4279428a17dd', d: (_4 = this.store.state.currentPath) === null || _4 === void 0 ? void 0 : _4.d, fill: (_5 = this.store.state.currentPath) === null || _5 === void 0 ? void 0 : _5.fill, stroke: (_6 = this.store.state.currentPath) === null || _6 === void 0 ? void 0 : _6.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'af91784e3afc84b71d5186237d287c31d472d80a', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_7 = this.store.state.selectionGroup) === null || _7 === void 0 ? void 0 : _7.objects) || [], style: {
+            }, viewBox: this.store.state.currentPath?.viewBox }, h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', d: this.store.state.currentPath?.d, fill: this.store.state.currentPath?.fill, stroke: this.store.state.currentPath?.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '2529447e26ba02689303be39cc593dfafc25b96c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: this.store.state.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
             }, onActionSelected: event => {
-                var _a;
                 event.detail.action({
                     x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
                     y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
+                }, this.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            } })), ((_8 = this.store.state) === null || _8 === void 0 ? void 0 : _8.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '573a4422b742044df5f240b260bc66e83d004520', store: this.store })));
+            } })), this.store.state?.activeTool instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }