kritzel-stencil 0.3.22 → 0.3.23

package/dist/collection/classes/structures/app-state-map.structure.js

@@ -68,7 +68,8 @@ export class KritzelAppStateMap {
         const docName = core.editorId ? `kritzel-app-state-${core.editorId}-${instanceId}` : `kritzel-app-state-${instanceId}`;
         const finalConfig = config ?? DEFAULT_SYNC_CONFIG;
         // Instantiate providers from configuration
-        const quiet = !core.store.state.debugInfo.showSyncProviderInfo;
+        const showSyncProviderInfo = !!core.store.state.debugInfo.showSyncProviderInfo;
+        const quiet = !showSyncProviderInfo;
         for (const providerConfig of finalConfig.providers) {
             let provider;
             // Check if it's a class constructor or a factory
@@ -82,6 +83,10 @@ export class KritzelAppStateMap {
             }
             this._providers.push(provider);
         }
+        if (showSyncProviderInfo) {
+            const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
+            console.info(`[Kritzel] App-state sync providers initialized for ${docName}: ${providerList || 'none'}`);
+        }
         // Observe changes to workspaces and sync with application state
         this._workspacesObserver = event => {
             this.handleWorkspacesChange(event);
@@ -94,15 +99,24 @@ export class KritzelAppStateMap {
         const networkProviders = this._providers.filter(p => p.type === 'network');
         // Await local providers for immediate data availability
         const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        if (showSyncProviderInfo) {
+            const connectedLocalCount = localResults.filter(result => result.status === 'fulfilled').length;
+            console.info(`[Kritzel] App-state local providers connected: ${connectedLocalCount}/${localProviders.length}`);
+        }
         localResults.forEach((result, i) => {
-            if (result.status === 'rejected') {
+            if (showSyncProviderInfo && result.status === 'rejected') {
                 console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
         // Connect network providers in the background (remote data arrives via Yjs observers)
+        if (showSyncProviderInfo && networkProviders.length > 0) {
+            console.info(`[Kritzel] App-state network providers connecting in background: ${networkProviders.length}`);
+        }
         for (const provider of networkProviders) {
             provider.connect().catch(err => {
-                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                if (showSyncProviderInfo) {
+                    console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                }
             });
         }
         this._isReady = true;

package/dist/collection/classes/structures/object-map.structure.js

@@ -274,7 +274,8 @@ export class KritzelObjectMap {
         const docName = core.editorId ? `kritzel-workspace-${core.editorId}-${workspaceId}` : `kritzel-workspace-${workspaceId}`;
         const finalConfig = config ?? DEFAULT_SYNC_CONFIG;
         // Instantiate providers from configuration
-        const quiet = !core.store?.state?.debugInfo?.showSyncProviderInfo;
+        const showSyncProviderInfo = !!core.store?.state?.debugInfo?.showSyncProviderInfo;
+        const quiet = !showSyncProviderInfo;
         for (const providerConfig of finalConfig.providers) {
             let provider;
             // Check if it's a class constructor or a factory
@@ -288,6 +289,10 @@ export class KritzelObjectMap {
             }
             this._providers.push(provider);
         }
+        if (showSyncProviderInfo) {
+            const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
+            console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
+        }
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -328,15 +333,24 @@ export class KritzelObjectMap {
         const networkProviders = this._providers.filter(p => p.type === 'network');
         // Await local providers for immediate data availability
         const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        if (showSyncProviderInfo) {
+            const connectedLocalCount = localResults.filter(result => result.status === 'fulfilled').length;
+            console.info(`[Kritzel] Workspace local providers connected: ${connectedLocalCount}/${localProviders.length}`);
+        }
         localResults.forEach((result, i) => {
-            if (result.status === 'rejected') {
+            if (showSyncProviderInfo && result.status === 'rejected') {
                 console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
         // Connect network providers in the background (remote data arrives via Yjs observers)
+        if (showSyncProviderInfo && networkProviders.length > 0) {
+            console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
+        }
         for (const provider of networkProviders) {
             provider.connect().catch(err => {
-                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                if (showSyncProviderInfo) {
+                    console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                }
             });
         }
         this._isReady = true;

package/dist/collection/classes/tools/selection-tool.class.js

@@ -370,8 +370,18 @@ export class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.removeSelectionGroup();
                     this._core.rerender();
                 }
-                if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
-                    return;
+                if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1) {
+                    const firstObj = selectedObject.objects[0];
+                    if (KritzelClassHelper.isInstanceOf(firstObj, 'KritzelCustomElement')) {
+                        // Selected single custom elements hand pointer interaction to their
+                        // embedded DOM content. Unselected custom elements remain selectable.
+                        if (firstObj.isSelected && this._core.store.selectionGroup?.objects.length === 1)
+                            return;
+                    }
+                    else if (firstObj.isInteractive) {
+                        // Preserve existing behavior for text/shape edit mode
+                        return;
+                    }
                 }
             }
             this.lineHandleHandler.handlePointerDown(event);
@@ -383,6 +393,14 @@ export class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isScaling === true) {
+                const activePointerCount = this._core.store.state.pointers.size;
+                // During a real pinch (two active pointers), keep touch handling suspended.
+                // If only one pointer is active, scaling is stale (debounce window after pinch),
+                // so resume normal touch selection behavior immediately.
+                if (activePointerCount === 1) {
+                    this._core.store.state.isScaling = false;
+                    this._savedSelectionGroupForPinch = null;
+                }
                 // A second finger has arrived to start a pinch-zoom gesture. If we
                 // cleared a selection group on the first finger-down, restore it now
                 // so the user's selection is preserved while zooming.
@@ -391,7 +409,10 @@ export class KritzelSelectionTool extends KritzelBaseTool {
                     this._savedSelectionGroupForPinch = null;
                     this._core.rerender();
                 }
-                return;
+                if (this._core.store.state.isScaling === true) {
+                    return;
+                }
+                // Continue with normal touch handling when scaling was stale.
             }
             if (this._core.store.state.pointers.size === 1) {
                 this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
@@ -423,7 +444,10 @@ export class KritzelSelectionTool extends KritzelBaseTool {
             this.rotationHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.moveHandler.handlePointerDown(event);
-            this.selectionHandler.handlePointerDown(event);
+            // Only process selection handler if we are not scaling (2 pointers)
+            if (this._core.store.state.pointers.size === 1) {
+                this.selectionHandler.handlePointerDown(event);
+            }
             this._core.rerender();
         }
     }
@@ -497,7 +521,7 @@ export class KritzelSelectionTool extends KritzelBaseTool {
      * @returns A KritzelSelectionGroup containing the object, or null if no object at that location
      */
     getSelectedObject(event) {
-        const path = event.composedPath().slice(1);
+        const path = event.composedPath();
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
         const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
         if (!object) {
@@ -507,6 +531,10 @@ export class KritzelSelectionTool extends KritzelBaseTool {
         if (!object.hitTest(x, y)) {
             return null;
         }
+        const currentSelectionGroup = this._core.store.selectionGroup;
+        if (currentSelectionGroup?.objects.some(selectedObject => selectedObject.id === object.id)) {
+            return currentSelectionGroup;
+        }
         if (object instanceof KritzelSelectionGroup) {
             return object;
         }
@@ -514,7 +542,7 @@ export class KritzelSelectionTool extends KritzelBaseTool {
             const group = KritzelSelectionGroup.create(this._core);
             group.translateX = 0;
             group.translateY = 0;
-            group.addOrRemove(object);
+            group.objectIds = [object.id];
             return group;
         }
     }

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

@@ -38,6 +38,7 @@ export class KritzelEditor {
         showObjectInfo: false,
         showSyncProviderInfo: true,
         showMigrationInfo: true,
+        showAssetResolverInfo: false,
     };
     user;
     activeUsers;
@@ -949,31 +950,31 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '07fe246b722ca64cfbdd8cc3474e6288c39d1128', style: {
+        return (h(Host, { key: '56b172459e6d940229dc1d4f409157e403ad5f27', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '2d0db1e78161edb061779b5875114e901f8e79f8', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '8fee1d57b0b868b673c41015453fd39a19f8cb43', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'f2a0305bf73bd14d7522974b7956a289a0a44258', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '918fe80193999ec072042500cd1eaf3670f5ed3c', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '0a5609b2b32f9f04bac03618803c14d9a891742c', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'eb1ff7aeaee3a237baf3ba2d96a10ba03a8bf7fb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '8783a87101f308029482ced926a8d2163aae1428', ref: el => {
+            } }, h("div", { key: '93a2195c14402f38416b2d377c684e2650418edb', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '1b42b21bc35e1fc56202e19a78053e46d87ca51a', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '3b90b69a5b83a6e5593d4f752c4094a2a3af8c4d', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '9c2ee1e10212145bf2f97a1a7f27746aa18cfc98', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'a77b025329da64e1f1223a2f749aa2fc60e5c469', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '9ced0bc5213ec8c3387915cd71272a1f56161405', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '884b7f088e164a51c49158c409904ca5419f2d55', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event) }), h("kritzel-controls", { key: '73a94f6baef4e0e26be4540ecd44d24588f5761b', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event) }), h("kritzel-controls", { key: '3a7c22f037d551636c53190eb07b318c2b857162', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'b0653098e5e15b81f453a7f3c2b27f137eb38f2e', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '33384aeb6bd32d17fb428bd9ed48e5d588ac60c0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '37bed04c062b63a99c930362fb8ce30b58ed8872', class: "top-right-buttons" }, h("kritzel-settings", { key: '4e339573e3d8d48bc9803b9dd40a549bd056d147', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c0dad9086679397c46f5550c38686a9b7d8bae6c', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '1639d6d2092ecd3fbc657dfdcfc3f12c02539329', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '45313b28a5e4bd75d09980e4765c2241d54fe1df', class: "top-right-buttons" }, h("kritzel-settings", { key: '33737a005cd6580505ee741be0dc40bd69873276', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '2a726ea5b56cd36ecf92bbab17d69d04baf73009', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '9e13001850b15b9ce9d8a502466ed9fa05ac1518', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '26d9bbf922b1d4158a0875ba42e7b598011973d5', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8179cc3e940c9fd8d97978af2bf52543f661a0fd', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (h("kritzel-button", { key: 'd4aa5bc108043eb103754d14f1b5df42ab73f8c4', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '17ac617bde379d7484dbeed39ac7168349b634a1', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '881729b36d34ef3ac3d87fc51ad828fc20fa36cd', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'f2494af1241ecc068ace09b23cfd405c76bd1273', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '7f199e3493805977b5e5b8d2c736f31729919f96', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (h("kritzel-button", { key: 'c6c192ddb1245acc771ac550c1fe3e4f9bc08eab', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '869194078a4c90d42c5ebd604bc58b4f55fc4cb6', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '8daed8fd7267aca056b6a53626c721e2f23cead4', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '5e34b647ac4c3e18981042d765b4d443422c5db3', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'b65ea0940cee31b152b60881180fab2445c92b0c', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1155,7 +1156,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\n    showViewportInfo: false,\n    showObjectInfo: false,\n    showSyncProviderInfo: true,\n    showMigrationInfo: true,\n  }"
+                "defaultValue": "{\n    showViewportInfo: false,\n    showObjectInfo: false,\n    showSyncProviderInfo: true,\n    showMigrationInfo: true,\n    showAssetResolverInfo: false,\n  }"
             },
             "user": {
                 "type": "unknown",