kritzel-stencil 0.1.78 → 0.1.80

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

@@ -31,13 +31,13 @@ export class KritzelEngine {
         }
         // Let batched prop updates settle, then perform an idempotent re-check.
         await Promise.resolve();
-        const currentWorkspaceId = this.core.store.state.activeWorkspace?.id;
+        const currentWorkspaceId = this.core.store.activeWorkspace?.id;
         if (currentWorkspaceId === newWorkspaceId) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(newWorkspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
@@ -137,6 +137,11 @@ export class KritzelEngine {
     }
     /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
     wheelEnabled = true;
+    /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
+    isLoading = false;
+    onIsLoadingChange() {
+        this.syncLoadingState();
+    }
     /** Emitted when the engine has fully initialized and is ready for interaction. */
     isEngineReady;
     /** Emitted when the active drawing tool changes. */
@@ -245,7 +250,7 @@ export class KritzelEngine {
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerLeave() {
-        this.core.store.state.objects?.clearCursorPosition();
+        this.core.store.objects?.clearCursorPosition();
     }
     handleLongPress(ev) {
         this.contextMenuHandler.handleContextMenu(ev.detail);
@@ -428,9 +433,9 @@ export class KritzelEngine {
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
         this.core.store.state.isContextMenuVisible = false;
-        this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
+        this.core.store.objects?.remove(o => o instanceof KritzelSelectionBox);
         this.core.store.setSelectionBox(null);
-        this.core.store.state.objects.clearLocalSelectionBox();
+        this.core.store.objects?.clearLocalSelectionBox();
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
         this.core.rerender();
@@ -484,7 +489,7 @@ export class KritzelEngine {
         object._core = this.core;
         object.scale = this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
-        object.workspaceId = this.core.store.state.activeWorkspace.id;
+        object.workspaceId = this.core.store.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
@@ -505,7 +510,7 @@ export class KritzelEngine {
                 child._core = this.core;
                 child.scale = this.core.store.state.scale;
                 child.zIndex = this.core.store.currentZIndex;
-                child.workspaceId = this.core.store.state.activeWorkspace.id;
+                child.workspaceId = this.core.store.activeWorkspace.id;
                 idRemapping.set(oldId, child.id);
                 object.childIds.push(child.id);
             });
@@ -559,8 +564,12 @@ export class KritzelEngine {
      * @returns The removed object.
      */
     async removeObject(object) {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap) {
+            return null;
+        }
         this.core.deselectAllObjects();
-        this.core.store.state.objects.remove(o => o.id === object.id);
+        objectsMap.remove(o => o.id === object.id);
         this.core.rerender();
         this.emitObjectsRemoved([object]);
         return object;
@@ -579,15 +588,23 @@ export class KritzelEngine {
      * @param objects - The objects to select.
      */
     async selectObjects(objects) {
+        const selectionTool = KritzelToolRegistry.getTool('selection');
+        if (!selectionTool) {
+            return;
+        }
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', selectionTool);
         this.core.deselectAllObjects();
         this.core.selectObjects(objects);
     }
     /** Selects all objects currently visible in the viewport. Switches to the selection tool automatically. */
     async selectAllObjectsInViewport() {
+        const selectionTool = KritzelToolRegistry.getTool('selection');
+        if (!selectionTool) {
+            return;
+        }
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', selectionTool);
         this.core.deselectAllObjects();
         this.core.selectAllObjectsInViewport();
     }
@@ -693,8 +710,8 @@ export class KritzelEngine {
             return null;
         // Save critical state before screenshot to restore after
         const savedState = {
-            objects: this.core.store.state.objects,
-            activeWorkspace: this.core.store.state.activeWorkspace,
+            objects: this.core.store.objects,
+            activeWorkspace: this.core.store.activeWorkspace,
             workspaces: this.core.store.state.workspaces,
             activeTool: this.core.store.state.activeTool,
             isReady: this.core.store.state.isReady,
@@ -745,6 +762,10 @@ export class KritzelEngine {
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.png`;
             const dataUrl = await this.getScreenshot('png');
+            if (!dataUrl) {
+                console.error('Failed to export viewport as PNG: screenshot could not be generated');
+                return;
+            }
             const link = document.createElement('a');
             link.download = filename;
             link.href = dataUrl;
@@ -762,6 +783,10 @@ export class KritzelEngine {
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.svg`;
             const dataUrl = await this.getScreenshot('svg');
+            if (!dataUrl) {
+                console.error('Failed to export viewport as SVG: screenshot could not be generated');
+                return;
+            }
             const link = document.createElement('a');
             link.download = filename;
             link.href = dataUrl;
@@ -884,7 +909,10 @@ export class KritzelEngine {
      * @returns A JSON string representing the complete workspace state.
      */
     async exportAsJson() {
-        const workspace = this.core.store.state.activeWorkspace;
+        const workspace = this.core.store.activeWorkspace;
+        if (!workspace) {
+            throw new Error('Cannot export workspace: no active workspace is loaded');
+        }
         const serialized = workspace.serialize({ includeObjects: true });
         return JSON.stringify(serialized, null, 2);
     }
@@ -957,7 +985,11 @@ export class KritzelEngine {
         if (data.version && data.version !== WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
-        const currentWorkspaceId = this.core.store.state.activeWorkspace.id;
+        const activeWorkspace = this.core.store.activeWorkspace;
+        if (!activeWorkspace) {
+            throw new Error('Cannot load objects: no active workspace is loaded');
+        }
+        const currentWorkspaceId = activeWorkspace.id;
         let loadedCount = 0;
         // Revive and add objects to the current workspace
         if (data.objects && Array.isArray(data.objects)) {
@@ -1093,7 +1125,11 @@ export class KritzelEngine {
     }
     /** Returns the currently active workspace. */
     async getActiveWorkspace() {
-        return this.core.store.state.activeWorkspace;
+        const activeWorkspace = this.core.store.activeWorkspace;
+        if (!activeWorkspace) {
+            throw new Error('No active workspace is loaded');
+        }
+        return activeWorkspace;
     }
     /**
      * Gets whether the active workspace is publicly accessible.
@@ -1122,7 +1158,7 @@ export class KritzelEngine {
         this.workspacesChange.emit(this.core.store.state.workspaces);
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     /**
      * Reinitializes sync by performing a full teardown and re-initialization.
@@ -1132,8 +1168,8 @@ export class KritzelEngine {
      */
     async reinitSync() {
         this.core.setSyncConfig(this.syncConfig);
-        this.core.store.state.objects?.clearCursorPosition();
-        this.core.store.state.objects?.destroy();
+        this.core.store.objects?.clearCursorPosition();
+        this.core.store.objects?.destroy();
         this.core.appStateMap.destroy();
         this._isYjsInitialized = false;
         await this.initializeSyncAndWorkspace();
@@ -1151,6 +1187,16 @@ export class KritzelEngine {
     _workspaceInitializationTargetKey = null;
     _syncInitPromise = null;
     _syncConfigRevision = 0;
+    _isWorkspaceLoading = false;
+    _defaultUndoState = {
+        canUndo: false,
+        canRedo: false,
+        undoStackSize: 0,
+        redoStackSize: 0,
+    };
+    syncLoadingState() {
+        this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
+    }
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -1163,10 +1209,10 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         // Clear cursor position in awareness before destroying
-        this.core.store.state.objects?.clearCursorPosition();
+        this.core.store.objects?.clearCursorPosition();
         // Clean up current workspace's ObjectMap
-        if (this.core.store.state.objects) {
-            this.core.store.state.objects.destroy();
+        if (this.core.store.objects) {
+            this.core.store.objects.destroy();
         }
         // Clean up AppStateMap (workspaces Y.Doc)
         this.core.appStateMap.destroy();
@@ -1184,6 +1230,8 @@ export class KritzelEngine {
         this.core.store.state.viewportBoundaryRight = this.viewportBoundaryRight;
         this.core.store.state.viewportBoundaryTop = this.viewportBoundaryTop;
         this.core.store.state.viewportBoundaryBottom = this.viewportBoundaryBottom;
+        this._isWorkspaceLoading = true;
+        this.syncLoadingState();
     }
     async componentDidLoad() {
         setTimeout(async () => {
@@ -1192,7 +1240,9 @@ export class KritzelEngine {
             this.viewport = new KritzelViewport(this.core, this.host);
             // Initialize cursor manager with target element and shadow root
             this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
-            this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
+            if (this.host.shadowRoot) {
+                this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
+            }
             // Initialize theme manager with kritzel-editor as target element
             const editorElement = this.host.closest('kritzel-editor');
             this.core.themeManager.setTargetElement(editorElement || this.host);
@@ -1253,7 +1303,7 @@ export class KritzelEngine {
             await this.initializeWorkspaceIfNeeded(startupWorkspace);
         }
         // Emit initial active workspace once startup initialization has completed
-        const initialActiveWorkspace = this.core.store.state.activeWorkspace;
+        const initialActiveWorkspace = this.core.store.activeWorkspace;
         if (initialActiveWorkspace) {
             this.activeWorkspaceChange.emit(initialActiveWorkspace);
         }
@@ -1282,7 +1332,7 @@ export class KritzelEngine {
         if (!this.activeWorkspaceId || this._isResolvingActiveWorkspaceId) {
             return;
         }
-        if (this.core.store.state.activeWorkspace?.id === this.activeWorkspaceId) {
+        if (this.core.store.activeWorkspace?.id === this.activeWorkspaceId) {
             return;
         }
         this._isResolvingActiveWorkspaceId = true;
@@ -1298,24 +1348,25 @@ export class KritzelEngine {
             }
             return;
         }
-        if (this.core.store.state.activeWorkspace?.id === workspace.id) {
+        if (this.core.store.activeWorkspace?.id === workspace.id) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
     }
     async initializeWorkspaceIfNeeded(workspace, options) {
         const targetWorkspaceId = workspace?.id ?? null;
         const targetKey = targetWorkspaceId ?? (options?.skipFallbackCreation ? '__NO_FALLBACK__' : '__AUTO__');
-        if (targetWorkspaceId && this.core.store.state.activeWorkspace?.id === targetWorkspaceId) {
+        if (targetWorkspaceId && this.core.store.activeWorkspace?.id === targetWorkspaceId) {
             return;
         }
         if (this._workspaceInitializationPromise && this._workspaceInitializationTargetKey === targetKey) {
             await this._workspaceInitializationPromise;
             return;
         }
-        this.core.store.state.isWorkspaceLoading = true;
+        this._isWorkspaceLoading = true;
+        this.syncLoadingState();
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
@@ -1327,12 +1378,23 @@ export class KritzelEngine {
                 this._workspaceInitializationPromise = null;
                 this._workspaceInitializationTargetKey = null;
             }
-            this.core.store.state.isWorkspaceLoading = false;
+            this._isWorkspaceLoading = false;
+            this.syncLoadingState();
         }
     }
     emitObjectsChange() {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap) {
+            this.objectsChange.emit([]);
+            this.undoStateChange.emit(this._defaultUndoState);
+            if (this._lastHadSelectionGroup) {
+                this._lastHadSelectionGroup = false;
+                this.objectsSelectionChange.emit();
+            }
+            return;
+        }
         const objects = this.core.store.allObjects;
-        const undoState = this.core.store.state.objects.undoState;
+        const undoState = objectsMap.undoState;
         const hasSelectionGroup = this.core.store.selectionGroup !== null;
         this.objectsChange.emit(objects);
         this.undoStateChange.emit(undoState);
@@ -1363,22 +1425,24 @@ export class KritzelEngine {
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
             this.core.clearSelection();
-            this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
+            this.core.store.objects?.remove(o => o instanceof KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
-            this.core.store.state.objects.clearLocalSelectionBox();
+            this.core.store.objects?.clearLocalSelectionBox();
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
         }
         this.core.store.state.skipContextMenu = false;
-        this.core.store.state.copiedObjects = null;
-        this.activeToolChange.emit(activeTool);
+        this.core.store.state.copiedObjects = undefined;
+        if (activeTool) {
+            this.activeToolChange.emit(activeTool);
+        }
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
     render() {
         if (!this.viewport) {
-            return null;
+            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
         }
         const currentTheme = this.core.themeManager.getStoredTheme();
         const computedStyle = window.getComputedStyle(this.host);
@@ -1395,7 +1459,7 @@ export class KritzelEngine {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (h(Host, null, this.core.store.state.isWorkspaceLoading && (h("div", { class: "workspace-loading-overlay" }, "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
+        return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { 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, id: object.id, class: "object", style: {
@@ -1404,7 +1468,7 @@ export class KritzelEngine {
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -1415,7 +1479,7 @@ export class KritzelEngine {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -1426,7 +1490,7 @@ export class KritzelEngine {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el && object.mount(el), src: object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1444,7 +1508,7 @@ export class KritzelEngine {
                     overflow: 'visible',
                     userSelect: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1461,7 +1525,7 @@ export class KritzelEngine {
                     padding: object.padding + 'px',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1471,7 +1535,7 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1495,7 +1559,7 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }, h("div", { id: "text-object", ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -1505,7 +1569,7 @@ export class KritzelEngine {
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1524,7 +1588,7 @@ export class KritzelEngine {
                     height: '100%',
                     overflow: 'visible',
                     pointerEvents: 'none',
-                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), h("div", { ref: el => object.mountTextEditor(el), style: {
+                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), h("div", { ref: el => el && object.mountTextEditor(el), style: {
                     position: 'absolute',
                     top: '0',
                     left: '0',
@@ -1545,8 +1609,8 @@ export class KritzelEngine {
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
-                    const localClientId = this.core.store.state.objects?.localClientId;
-                    const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
+                    const localClientId = this.core.store.objects?.localClientId;
+                    const awarenessStates = this.core.store.objects?.awareness?.getStates();
                     const isRemoteSelection = isSelectionGroup && (
                     // Different user
                     (object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
@@ -1774,18 +1838,20 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { 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", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), 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`,
                 zIndex: '10002',
             }, onActionSelected: event => {
-                event.detail.action({
-                    x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
-                    y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
-                }, this.core.store.selectionGroup?.objects);
+                if (event.detail.action) {
+                    event.detail.action({
+                        x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
+                        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.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -1926,7 +1992,7 @@ export class KritzelEngine {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -1950,7 +2016,7 @@ export class KritzelEngine {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -2163,7 +2229,7 @@ export class KritzelEngine {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -2191,6 +2257,26 @@ export class KritzelEngine {
                 "reflect": false,
                 "attribute": "wheel-enabled",
                 "defaultValue": "true"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External loading state. Combined with internal workspace-loading state to drive the overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading",
+                "defaultValue": "false"
             }
         };
     }
@@ -2530,7 +2616,7 @@ export class KritzelEngine {
             },
             "registerTool": {
                 "complexType": {
-                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig) => Promise<KritzelBaseTool>",
+                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig) => Promise<KritzelBaseTool | null>",
                     "parameters": [{
                             "name": "toolName",
                             "type": "string",
@@ -2578,6 +2664,10 @@ export class KritzelEngine {
                             "path": "../../../interfaces/toolbar-control.interface",
                             "id": "src/interfaces/toolbar-control.interface.ts::KritzelShapeToolConfig",
                             "referenceLocation": "KritzelShapeToolConfig"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
                         }
                     },
                     "return": "Promise<KritzelBaseTool>"
@@ -3029,10 +3119,10 @@ export class KritzelEngine {
             },
             "findObjects": {
                 "complexType": {
-                    "signature": "<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject) => boolean) => Promise<T[]>",
+                    "signature": "<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject<Element>) => boolean) => Promise<T[]>",
                     "parameters": [{
                             "name": "predicate",
-                            "type": "(obj: KritzelBaseObject<HTMLElement | SVGElement>) => boolean",
+                            "type": "(obj: KritzelBaseObject<Element>) => boolean",
                             "docs": "- A filter function called for each object. Return `true` to include."
                         }],
                     "references": {
@@ -3049,6 +3139,12 @@ export class KritzelEngine {
                             "path": "../../../classes/objects/base-object.class",
                             "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
                             "referenceLocation": "KritzelBaseObject"
+                        },
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
+                            "referenceLocation": "Element"
                         }
                     },
                     "return": "Promise<T[]>"
@@ -3691,7 +3787,7 @@ export class KritzelEngine {
             },
             "getScreenshot": {
                 "complexType": {
-                    "signature": "(format?: \"png\" | \"svg\") => Promise<string>",
+                    "signature": "(format?: \"png\" | \"svg\") => Promise<string | null>",
                     "parameters": [{
                             "name": "format",
                             "type": "\"svg\" | \"png\"",
@@ -4245,6 +4341,9 @@ export class KritzelEngine {
             }, {
                 "propName": "debugInfo",
                 "methodName": "onDebugInfoChange"
+            }, {
+                "propName": "isLoading",
+                "methodName": "onIsLoadingChange"
             }];
     }
     static get listeners() {

package/dist/collection/configs/default-engine-config.js

@@ -1,5 +1,5 @@
 export const DEFAULT_ENGINE_CONFIG = {
-    activeWorkspace: null,
+    activeWorkspace: undefined,
     activeTool: null,
     copiedObjects: null,
     objects: null,
@@ -25,7 +25,7 @@ export const DEFAULT_ENGINE_CONFIG = {
     isDrawing: false,
     isErasing: false,
     isWriting: false,
-    isWorkspaceLoading: false,
+    isLoading: false,
     isCtrlKeyPressed: false,
     isContextMenuVisible: false,
     contextMenuItems: [],

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.1.78';
+export const KRITZEL_VERSION = '0.1.80';