kritzel-stencil 0.1.4 → 0.1.5

package/dist/cjs/kritzel-color_24.cjs.entry.js

@@ -20788,6 +20788,7 @@ const KritzelEngine = class {
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
+    _lastHadSelectionGroup = false;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof defaultLineTool_config.KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -20842,8 +20843,13 @@ const KritzelEngine = class {
     emitObjectsChange() {
         const objects = this.core.store.allObjects;
         const undoState = this.core.store.state.objects.undoState;
+        const hasSelectionGroup = this.core.store.selectionGroup !== null;
         this.objectsChange.emit(objects);
         this.undoStateChange.emit(undoState);
+        if (this._lastHadSelectionGroup !== hasSelectionGroup) {
+            this._lastHadSelectionGroup = hasSelectionGroup;
+            this.objectsSelectionChange.emit();
+        }
     }
     _registerStateChangeListeners() {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
@@ -20879,7 +20885,7 @@ const KritzelEngine = class {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (index.h(index.Host, { key: '49fbba9ba7044acb82cb23627bf08435f8683b80' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: '7e18e66bdbae71ec35a6ea14bfdcd735e537a37b', class: "debug-panel" }, index.h("div", { key: '562ff35d3803b80f3c02c075741f1c4b81ba0739' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '82d08ac0527017c9f3674e1d551a071b0002477e' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: 'e4e3b8c6f18714dbf141a900768b2fb78ef8ec3a' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '68823a22db98800c7ec7b18770f38f03dd53f826' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '4683676eca0796b927ac8c10fe9ea48770366ee5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: 'fcbd728c4483f06cffe1e9d581399a9619b3c172' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: 'f713005a414bd05b187327b5ffa021c51f227d97' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: 'fdb4892c0b5df0a599d4e457d656ca8e71086033' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '7c1ceb6398ceccb891d5854a731467771d88e688' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'fddfb8b396ab095dd99158b32bf4c9a06745c65f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '8b807879e83bada98ff44a9124dddc7e7f8d8516' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '93827fa7bf4c27db8b3165a1d2be5d0cde5a65b6' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '923455fb261bc9aa8d6cd22c74894e41dc6a2f93' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '33579a767be0a80bed4a177da9577e6304d4900c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '950c340bf725d7c8c92a51c61066c1aa7d09aa41' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '2a8ce1e6d68ea030f42521b25615bf60a1a8267e' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '9fd5a4b1a842c9aa178dc98dc9a210cf7d947615' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '81f9c6f9f5c38b48db1faaa8da08476cd747e906' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: 'bbea182105ab1f1856d8ffe7ee6dae2c96cefbae' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '0e57b3b517fc6f4780a6bf8b13a18e7d595e2e91' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '5be12fd92b4ccb6890680e725aea0f29fa16eda4' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: '51402f4730b8e482ee534bb83944c50462d895af' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'dddf5bed76a1755aec71ae7f30eab8dd0c39fdb0' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '367166d068f34090eb895116d8ac1ddd3ab5aaad' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: 'e88d10e302e4ff3e8cb877a509a883e2cffcc067' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '12bf294a8640947230611690f71b8c8116e861f4', id: "origin", class: "origin", style: {
+        return (index.h(index.Host, { key: '63df549b813938e30a97af08471ac6380aab2ae2' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: 'cf88a5fe1fe91d173947af113f364fce72a3a5af', class: "debug-panel" }, index.h("div", { key: '884889e8ef09a9129469448a9e54200edd54463c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'f56d2c154c4b15ab963b29c79faf3549b2ee18b1' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: 'ea8e048460a2be6c94c4aa62b35740f061240122' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '963516a6bfc5bcd4818ab7c2db170bf87941e2b9' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'cda48483b0ca4f0505b1b8642e75cd60d188a67b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: 'b52e53f31f5422f2c389cc31c637327d76c32970' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '563352b4a642edce71d9edfabd66c126bd9e1e55' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '77d49c8937eed39d535a391dcb8c707acd01e075' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'e8c865c2584a97f0b1dac093daecdaffb954521f' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '86d4f04cb85aa2c1c3b1b1002cf622972b36037f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '3cbc1656429a14245bd8bc19ec11ac89fbb0541e' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '2bcde1a46e33beea53701e4ad7b24f4cedaac6bf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '8dfe802d98cc856cb3648d164170a55c17270315' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '288e9c0ecb0970d9599db60d9d4c3680122cd317' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'ed7fab2c394d39408323eea8192e02fb7628b86b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'a83960034a48dbbab3df12a5dba5b7fa4d49509a' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '088f6abddbe6cf4e057ce2acf9c9d85d8181d619' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'c7bb206ef5d0ebb6e237989b354ed6a7e1ac0cf3' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: 'b83a1b9fd6bda4766dd1ca593c9eb441138484a8' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'a65053a1749fa35f5709601e0c8a5d7ab1fc0251' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '3ddab151e447915b827e21453fe145bcdff50149' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: 'b385820dbbdd4006d0790594d2dad4ea00395599' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'b6646ffc238cbce5ca65a64e9ab1302672c7b818' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '91f99a7dc908e25d579b75fe4d19c473de157d15' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '8205e2c011344533922f5f509605d41efaa33f2b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: 'c2cc85f5618d7e4b65ee57b2ffcda0bc83d4cc4b', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (index.h("div", { key: object.id, style: {
@@ -21128,7 +21134,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '9d17520994c59b7eca2940d1a05f4f150b790767', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'dcfc313a78c9365c1bbd580fbc32770debd43e06', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -21139,7 +21145,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'b86989f2a710324e420994f74bd8c4990cc52060', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'f1a927c2a0ddf0120d0e278aa0620556d2f4bacc', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{

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

@@ -316,6 +316,7 @@ export class KritzelEngine {
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
+    _lastHadSelectionGroup = false;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -362,8 +363,13 @@ export class KritzelEngine {
     emitObjectsChange() {
         const objects = this.core.store.allObjects;
         const undoState = this.core.store.state.objects.undoState;
+        const hasSelectionGroup = this.core.store.selectionGroup !== null;
         this.objectsChange.emit(objects);
         this.undoStateChange.emit(undoState);
+        if (this._lastHadSelectionGroup !== hasSelectionGroup) {
+            this._lastHadSelectionGroup = hasSelectionGroup;
+            this.objectsSelectionChange.emit();
+        }
     }
     _registerStateChangeListeners() {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
@@ -399,7 +405,7 @@ export class KritzelEngine {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: '49fbba9ba7044acb82cb23627bf08435f8683b80' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '7e18e66bdbae71ec35a6ea14bfdcd735e537a37b', class: "debug-panel" }, h("div", { key: '562ff35d3803b80f3c02c075741f1c4b81ba0739' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '82d08ac0527017c9f3674e1d551a071b0002477e' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'e4e3b8c6f18714dbf141a900768b2fb78ef8ec3a' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '68823a22db98800c7ec7b18770f38f03dd53f826' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '4683676eca0796b927ac8c10fe9ea48770366ee5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'fcbd728c4483f06cffe1e9d581399a9619b3c172' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'f713005a414bd05b187327b5ffa021c51f227d97' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'fdb4892c0b5df0a599d4e457d656ca8e71086033' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '7c1ceb6398ceccb891d5854a731467771d88e688' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'fddfb8b396ab095dd99158b32bf4c9a06745c65f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '8b807879e83bada98ff44a9124dddc7e7f8d8516' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '93827fa7bf4c27db8b3165a1d2be5d0cde5a65b6' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '923455fb261bc9aa8d6cd22c74894e41dc6a2f93' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '33579a767be0a80bed4a177da9577e6304d4900c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '950c340bf725d7c8c92a51c61066c1aa7d09aa41' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '2a8ce1e6d68ea030f42521b25615bf60a1a8267e' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '9fd5a4b1a842c9aa178dc98dc9a210cf7d947615' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '81f9c6f9f5c38b48db1faaa8da08476cd747e906' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'bbea182105ab1f1856d8ffe7ee6dae2c96cefbae' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '0e57b3b517fc6f4780a6bf8b13a18e7d595e2e91' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '5be12fd92b4ccb6890680e725aea0f29fa16eda4' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '51402f4730b8e482ee534bb83944c50462d895af' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'dddf5bed76a1755aec71ae7f30eab8dd0c39fdb0' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '367166d068f34090eb895116d8ac1ddd3ab5aaad' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'e88d10e302e4ff3e8cb877a509a883e2cffcc067' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '12bf294a8640947230611690f71b8c8116e861f4', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '63df549b813938e30a97af08471ac6380aab2ae2' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'cf88a5fe1fe91d173947af113f364fce72a3a5af', class: "debug-panel" }, h("div", { key: '884889e8ef09a9129469448a9e54200edd54463c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'f56d2c154c4b15ab963b29c79faf3549b2ee18b1' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'ea8e048460a2be6c94c4aa62b35740f061240122' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '963516a6bfc5bcd4818ab7c2db170bf87941e2b9' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'cda48483b0ca4f0505b1b8642e75cd60d188a67b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'b52e53f31f5422f2c389cc31c637327d76c32970' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '563352b4a642edce71d9edfabd66c126bd9e1e55' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '77d49c8937eed39d535a391dcb8c707acd01e075' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'e8c865c2584a97f0b1dac093daecdaffb954521f' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '86d4f04cb85aa2c1c3b1b1002cf622972b36037f' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '3cbc1656429a14245bd8bc19ec11ac89fbb0541e' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '2bcde1a46e33beea53701e4ad7b24f4cedaac6bf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '8dfe802d98cc856cb3648d164170a55c17270315' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '288e9c0ecb0970d9599db60d9d4c3680122cd317' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'ed7fab2c394d39408323eea8192e02fb7628b86b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'a83960034a48dbbab3df12a5dba5b7fa4d49509a' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '088f6abddbe6cf4e057ce2acf9c9d85d8181d619' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c7bb206ef5d0ebb6e237989b354ed6a7e1ac0cf3' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'b83a1b9fd6bda4766dd1ca593c9eb441138484a8' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'a65053a1749fa35f5709601e0c8a5d7ab1fc0251' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3ddab151e447915b827e21453fe145bcdff50149' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'b385820dbbdd4006d0790594d2dad4ea00395599' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'b6646ffc238cbce5ca65a64e9ab1302672c7b818' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '91f99a7dc908e25d579b75fe4d19c473de157d15' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8205e2c011344533922f5f509605d41efaa33f2b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'c2cc85f5618d7e4b65ee57b2ffcda0bc83d4cc4b', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -648,7 +654,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '9d17520994c59b7eca2940d1a05f4f150b790767', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'dcfc313a78c9365c1bbd580fbc32770debd43e06', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -659,7 +665,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'b86989f2a710324e420994f74bd8c4990cc52060', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f1a927c2a0ddf0120d0e278aa0620556d2f4bacc', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BxS4Pdpz.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-DX-VWb90.js";import{w as t,a as i,t as o,r as n,b as l,e as u,c as m,d as p,f as z,g as C,s as k,h as y,i as S,v as x,j as w,o as j,k as v,l as T,m as P,O as W,n as B,p as U,q as M,u as H,x as A,y as L,z as O,A as _,B as $,C as N,H as V,D as R}from"./p-pUJV_yVP.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-pUJV_yVP.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class X{doc;channel;_synced=!1;constructor(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(e,s)=>{if(s!==this){const s=z();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=C(new Uint8Array(e));switch(n(s)){case 0:const e=l(s);m(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=l(s),r=u(this.doc,n);if(r.length>0){const e=z();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=z();t(e,2),i(e,p(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const Y=new Map,q="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:S(e.newValue||"")}),j(this._onChange)}postMessage(t){x.setItem(this.room,w(v(t)))}close(){T(this._onChange)}}:BroadcastChannel,Q=t=>k(Y,t,(()=>{const e=y(),s=new q(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),Z=(t,e,s=null)=>{const i=Q(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},tt=(e,s)=>{t(e,0);const o=p(s);i(e,o)},et=(e,s,o)=>{t(e,1),i(e,u(s,o))},st=(t,e,s,i)=>{try{m(e,l(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},it=st;class ot extends W{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=U();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&nt(this,e,"timeout")}),B(3e3)),t.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:U()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),M(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const nt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:U()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},rt=(e,s,i=e.states)=>{const n=s.length,r=z();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),H(r,JSON.stringify(l))}return o(r)},lt=[];lt[0]=(e,s,i,o)=>{t(e,0);const r=((t,e,s,i,o)=>{const r=n(t);switch(r){case 0:((t,e,s)=>{et(e,s,l(t))})(t,e,s);break;case 1:st(t,s,i,o);break;case 2:it(t,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},lt[3]=(e,s,o)=>{t(e,1),i(e,rt(o.awareness,Array.from(o.awareness.getStates().keys())))},lt[1]=(t,e,s)=>{((t,e,s)=>{const i=C(e),o=U(),r=[],l=[],c=[],a=[],h=n(i);for(let e=0;e<h;e++){const e=n(i);let s=n(i);const h=JSON.parse(P(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:o}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(M(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,l(e),s)},lt[2]=(t,e,s)=>{((t,e,s)=>{0===n(t)&&s(0,P(t))})(e,0,((t,e)=>ct(s,e)))};const ct=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),at=(t,e,s)=>{const i=C(e),o=z(),r=n(i),l=t.messageHandlers[r];return l?l(o,i,t,s,r):console.error("Unable to compute message"),o},ht=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,nt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(dt,$(100*N(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},dt=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=U();const i=at(e,new Uint8Array(t.data),!0);O(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{ht(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=U(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=z();if(t(n,0),tt(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=z();t(n,1),i(n,rt(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},ut=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&Z(t.bcChannel,e,t)};class mt extends L{constructor(e,s,n,{connect:r=!0,awareness:l=new ot(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=c,this.protocols=a,this.roomname=s,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=lt.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,d>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=z();t(e,0),tt(e,n),this.ws.send(o(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=at(this,new Uint8Array(t),!1);O(e)>1&&Z(this.bcChannel,o(e),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=z();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),ut(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),c=z();t(c,1),i(c,rt(l,r)),ut(this,o(c))},this._exitHandler=()=>{nt(this.awareness,[n.clientID],"app closed")},_&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<U()-this.wsLastMessageReceived&&ht(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>A(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),_&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((t,e)=>{Q(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const e=z();t(e,0),tt(e,this.doc),Z(this.bcChannel,o(e),this);const s=z();t(s,0),et(s,this.doc),Z(this.bcChannel,o(s),this);const n=z();t(n,3),Z(this.bcChannel,o(n),this);const r=z();t(r,1),i(r,rt(this.awareness,[this.doc.clientID])),Z(this.bcChannel,o(r),this)}disconnectBc(){const e=z();t(e,1),i(e,rt(this.awareness,[this.doc.clientID],new Map)),ut(this,o(e)),this.bcconnected&&(((t,e)=>{const s=Q(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),Y.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&ht(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(dt(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new mt(i,o,e,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ft{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ft.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new V(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new V(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(ft.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ft.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),ft.sharedWebSocketProvider=new R(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),ft.sharedWebSocketProvider}static destroySharedWebSocket(){ft.sharedWebSocketProvider&&(ft.sharedWebSocketProvider.destroy(),ft.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ft.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new ft(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{X as BroadcastSyncProvider,ft as HocuspocusSyncProvider,pt as WebSocketSyncProvider}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BxS4Pdpz.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-DX-VWb90.js";import{w as t,a as i,t as o,r as n,b as l,e as u,c as m,d as p,f as z,g as C,s as k,h as y,i as S,v as x,j as w,o as v,k as T,l as j,m as P,O as W,n as B,p as A,q as U,u as M,x as H,y as L,z as O,A as $,B as _,C as N,H as R,D as X}from"./p-DrAebvAT.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-DrAebvAT.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class Y{doc;channel;_synced=!1;constructor(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(e,s)=>{if(s!==this){const s=z();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=C(new Uint8Array(e));switch(n(s)){case 0:const e=l(s);m(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=l(s),r=u(this.doc,n);if(r.length>0){const e=z();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=z();t(e,2),i(e,p(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:S(e.newValue||"")}),v(this._onChange)}postMessage(t){x.setItem(this.room,w(T(t)))}close(){j(this._onChange)}}:BroadcastChannel,Q=t=>k(q,t,(()=>{const e=y(),s=new V(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),Z=(t,e,s=null)=>{const i=Q(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},tt=(e,s)=>{t(e,0);const o=p(s);i(e,o)},et=(e,s,o)=>{t(e,1),i(e,u(s,o))},st=(t,e,s,i)=>{try{m(e,l(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},it=st;class ot extends W{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=A();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&nt(this,e,"timeout")}),B(3e3)),t.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:A()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),U(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const nt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:A()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},rt=(e,s,i=e.states)=>{const n=s.length,r=z();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),M(r,JSON.stringify(l))}return o(r)},lt=[];lt[0]=(e,s,i,o)=>{t(e,0);const r=((t,e,s,i,o)=>{const r=n(t);switch(r){case 0:((t,e,s)=>{et(e,s,l(t))})(t,e,s);break;case 1:st(t,s,i,o);break;case 2:it(t,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},lt[3]=(e,s,o)=>{t(e,1),i(e,rt(o.awareness,Array.from(o.awareness.getStates().keys())))},lt[1]=(t,e,s)=>{((t,e,s)=>{const i=C(e),o=A(),r=[],l=[],c=[],a=[],h=n(i);for(let e=0;e<h;e++){const e=n(i);let s=n(i);const h=JSON.parse(P(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:o}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(U(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,l(e),s)},lt[2]=(t,e,s)=>{((t,e,s)=>{0===n(t)&&s(0,P(t))})(e,0,((t,e)=>ct(s,e)))};const ct=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),at=(t,e,s)=>{const i=C(e),o=z(),r=n(i),l=t.messageHandlers[r];return l?l(o,i,t,s,r):console.error("Unable to compute message"),o},ht=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,nt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(dt,_(100*N(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},dt=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=A();const i=at(e,new Uint8Array(t.data),!0);O(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{ht(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=A(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=z();if(t(n,0),tt(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=z();t(n,1),i(n,rt(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},ut=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&Z(t.bcChannel,e,t)};class mt extends L{constructor(e,s,n,{connect:r=!0,awareness:l=new ot(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=c,this.protocols=a,this.roomname=s,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=lt.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,d>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=z();t(e,0),tt(e,n),this.ws.send(o(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=at(this,new Uint8Array(t),!1);O(e)>1&&Z(this.bcChannel,o(e),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=z();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),ut(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),c=z();t(c,1),i(c,rt(l,r)),ut(this,o(c))},this._exitHandler=()=>{nt(this.awareness,[n.clientID],"app closed")},$&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<A()-this.wsLastMessageReceived&&ht(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>H(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),$&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((t,e)=>{Q(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const e=z();t(e,0),tt(e,this.doc),Z(this.bcChannel,o(e),this);const s=z();t(s,0),et(s,this.doc),Z(this.bcChannel,o(s),this);const n=z();t(n,3),Z(this.bcChannel,o(n),this);const r=z();t(r,1),i(r,rt(this.awareness,[this.doc.clientID])),Z(this.bcChannel,o(r),this)}disconnectBc(){const e=z();t(e,1),i(e,rt(this.awareness,[this.doc.clientID],new Map)),ut(this,o(e)),this.bcconnected&&(((t,e)=>{const s=Q(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),q.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&ht(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(dt(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new mt(i,o,e,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ft{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ft.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new R(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new R(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(ft.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ft.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),ft.sharedWebSocketProvider=new X(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),ft.sharedWebSocketProvider}static destroySharedWebSocket(){ft.sharedWebSocketProvider&&(ft.sharedWebSocketProvider.destroy(),ft.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ft.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new ft(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{Y as BroadcastSyncProvider,ft as HocuspocusSyncProvider,pt as WebSocketSyncProvider}

package/dist/components/kritzel-editor.js

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as o,d as i,t as a}from"./p-BxS4Pdpz.js";import{K as r,d as n}from"./p-DgCGSL2Q.js";import{D as l,S as c,h as p,e as m,f as k,g as d,i as h,j as u}from"./p-DX-VWb90.js";import{L as b,M as g,K as y,E as f,N as z}from"./p-pUJV_yVP.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as w}from"./p-e1r5dgeP.js";import{d as E}from"./p-DMJI6opm.js";import{d as x}from"./p-Cnpk2hfo.js";import{d as I}from"./p-_uKelBZg.js";import{d as R}from"./p-BlUr7oVq.js";import{d as S}from"./p-CCj8nmQH.js";import{d as O}from"./p-DLijNISu.js";import{d as v}from"./p-9XZbc_qK.js";import{d as W}from"./p-FOxrXeq4.js";import{d as M}from"./p-CNneo_RD.js";import{d as V,a as D}from"./p-CLOnpu42.js";import{d as K}from"./p-BVIY50lR.js";import{d as P}from"./p-Ctv4NAxk.js";import{d as A}from"./p-pKbfOI5a.js";import{d as B}from"./p-wRXL928z.js";import{d as U}from"./p-S5GeUsJP.js";import{d as T}from"./p-Z7y6A4a9.js";import{d as F}from"./p-83YX0-FS.js";import{d as L}from"./p-DKgqzi2Y.js";import{d as Y}from"./p-DV_h5Jo2.js";const N={type:"pen",color:"#000000",size:16,palettes:{pen:[...l]}},X={color:"#000000",size:8,fontFamily:"Arial",palette:[...l]},_={color:"#000000",size:4,palette:[...l],arrows:{end:{enabled:!0,style:"triangle"}}},q={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:[...l]},G=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange")}get host(){return this}scaleMax=b;scaleMin=g;controls=[{name:"selection",type:"tool",isDefault:!0,tool:p,icon:"cursor"},{name:"brush",type:"tool",tool:m,icon:"pen",config:N},{name:"line",type:"tool",tool:k,icon:"arrow",config:_},{name:"eraser",type:"tool",tool:y,icon:"eraser"},{name:"text",type:"tool",tool:d,icon:"type",config:X},{name:"shape",type:"tool",tool:h,icon:"shape-rectangle",config:q,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:f,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.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()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))r.register(e,t)}listenForMobileKeyboard(){u.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"08dae992458f6440295e59a12934c76ad4f9931e"},o("kritzel-workspace-manager",{key:"43a980a7aadbc3fef9f375c99f1577f771612835",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-engine",{key:"471133030308d915fb9fa1e8e818662e56d483db",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e)}),o("kritzel-controls",{key:"7e7c7111e0629309c4bda9d94b95623dbe835f0f",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,onIsControlsReady:()=>this.isControlsReady=!0}))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}"}},[512,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),J=G,Z=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dropdown","kritzel-engine","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-menu","kritzel-menu-item","kritzel-opacity-slider","kritzel-portal","kritzel-shape-fill","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(a(e))||customElements.define(a(e),G);break;case"kritzel-color":customElements.get(a(e))||w();break;case"kritzel-color-palette":customElements.get(a(e))||E();break;case"kritzel-context-menu":customElements.get(a(e))||x();break;case"kritzel-controls":customElements.get(a(e))||I();break;case"kritzel-cursor-trail":customElements.get(a(e))||R();break;case"kritzel-dropdown":customElements.get(a(e))||S();break;case"kritzel-engine":customElements.get(a(e))||z();break;case"kritzel-font":customElements.get(a(e))||O();break;case"kritzel-font-family":customElements.get(a(e))||v();break;case"kritzel-font-size":customElements.get(a(e))||W();break;case"kritzel-icon":customElements.get(a(e))||n();break;case"kritzel-line-endings":customElements.get(a(e))||M();break;case"kritzel-menu":customElements.get(a(e))||D();break;case"kritzel-menu-item":customElements.get(a(e))||V();break;case"kritzel-opacity-slider":customElements.get(a(e))||K();break;case"kritzel-portal":customElements.get(a(e))||P();break;case"kritzel-shape-fill":customElements.get(a(e))||A();break;case"kritzel-split-button":customElements.get(a(e))||B();break;case"kritzel-stroke-size":customElements.get(a(e))||U();break;case"kritzel-tool-config":customElements.get(a(e))||T();break;case"kritzel-tooltip":customElements.get(a(e))||F();break;case"kritzel-utility-panel":customElements.get(a(e))||L();break;case"kritzel-workspace-manager":customElements.get(a(e))||Y()}}))};export{N as D,J as KritzelEditor,X as a,_ as b,Z as defineCustomElement}
+import{p as e,H as t,c as s,h as o,d as i,t as a}from"./p-BxS4Pdpz.js";import{K as r,d as n}from"./p-DgCGSL2Q.js";import{D as l,S as c,h as p,e as m,f as k,g as d,i as h,j as u}from"./p-DX-VWb90.js";import{L as b,M as g,K as y,E as f,N as z}from"./p-DrAebvAT.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as w}from"./p-e1r5dgeP.js";import{d as E}from"./p-DMJI6opm.js";import{d as x}from"./p-Cnpk2hfo.js";import{d as I}from"./p-_uKelBZg.js";import{d as R}from"./p-BlUr7oVq.js";import{d as S}from"./p-CCj8nmQH.js";import{d as O}from"./p-DLijNISu.js";import{d as v}from"./p-9XZbc_qK.js";import{d as W}from"./p-FOxrXeq4.js";import{d as M}from"./p-CNneo_RD.js";import{d as V,a as D}from"./p-CLOnpu42.js";import{d as A}from"./p-BVIY50lR.js";import{d as K}from"./p-Ctv4NAxk.js";import{d as P}from"./p-pKbfOI5a.js";import{d as B}from"./p-wRXL928z.js";import{d as T}from"./p-S5GeUsJP.js";import{d as U}from"./p-Z7y6A4a9.js";import{d as F}from"./p-83YX0-FS.js";import{d as L}from"./p-DKgqzi2Y.js";import{d as Y}from"./p-DV_h5Jo2.js";const N={type:"pen",color:"#000000",size:16,palettes:{pen:[...l]}},X={color:"#000000",size:8,fontFamily:"Arial",palette:[...l]},q={color:"#000000",size:4,palette:[...l],arrows:{end:{enabled:!0,style:"triangle"}}},G={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:[...l]},_=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange")}get host(){return this}scaleMax=b;scaleMin=g;controls=[{name:"selection",type:"tool",isDefault:!0,tool:p,icon:"cursor"},{name:"brush",type:"tool",tool:m,icon:"pen",config:N},{name:"line",type:"tool",tool:k,icon:"arrow",config:q},{name:"eraser",type:"tool",tool:y,icon:"eraser"},{name:"text",type:"tool",tool:d,icon:"type",config:X},{name:"shape",type:"tool",tool:h,icon:"shape-rectangle",config:G,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:f,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.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()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))r.register(e,t)}listenForMobileKeyboard(){u.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"08dae992458f6440295e59a12934c76ad4f9931e"},o("kritzel-workspace-manager",{key:"43a980a7aadbc3fef9f375c99f1577f771612835",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-engine",{key:"471133030308d915fb9fa1e8e818662e56d483db",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e)}),o("kritzel-controls",{key:"7e7c7111e0629309c4bda9d94b95623dbe835f0f",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,onIsControlsReady:()=>this.isControlsReady=!0}))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}"}},[512,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),J=_,Z=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dropdown","kritzel-engine","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-menu","kritzel-menu-item","kritzel-opacity-slider","kritzel-portal","kritzel-shape-fill","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(a(e))||customElements.define(a(e),_);break;case"kritzel-color":customElements.get(a(e))||w();break;case"kritzel-color-palette":customElements.get(a(e))||E();break;case"kritzel-context-menu":customElements.get(a(e))||x();break;case"kritzel-controls":customElements.get(a(e))||I();break;case"kritzel-cursor-trail":customElements.get(a(e))||R();break;case"kritzel-dropdown":customElements.get(a(e))||S();break;case"kritzel-engine":customElements.get(a(e))||z();break;case"kritzel-font":customElements.get(a(e))||O();break;case"kritzel-font-family":customElements.get(a(e))||v();break;case"kritzel-font-size":customElements.get(a(e))||W();break;case"kritzel-icon":customElements.get(a(e))||n();break;case"kritzel-line-endings":customElements.get(a(e))||M();break;case"kritzel-menu":customElements.get(a(e))||D();break;case"kritzel-menu-item":customElements.get(a(e))||V();break;case"kritzel-opacity-slider":customElements.get(a(e))||A();break;case"kritzel-portal":customElements.get(a(e))||K();break;case"kritzel-shape-fill":customElements.get(a(e))||P();break;case"kritzel-split-button":customElements.get(a(e))||B();break;case"kritzel-stroke-size":customElements.get(a(e))||T();break;case"kritzel-tool-config":customElements.get(a(e))||U();break;case"kritzel-tooltip":customElements.get(a(e))||F();break;case"kritzel-utility-panel":customElements.get(a(e))||L();break;case"kritzel-workspace-manager":customElements.get(a(e))||Y()}}))};export{N as D,J as KritzelEditor,X as a,q as b,Z as defineCustomElement}

package/dist/components/kritzel-engine.js

@@ -1 +1 @@
-import{P as o,N as p}from"./p-pUJV_yVP.js";const s=o,r=p;export{s as KritzelEngine,r as defineCustomElement}
+import{P as o,N as r}from"./p-DrAebvAT.js";const s=o,p=r;export{s as KritzelEngine,p as defineCustomElement}