kritzel-stencil 0.3.22 → 0.3.23

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

@@ -20,6 +20,7 @@ import { KritzelColorHelper } from "../../../helpers/color.helper";
 import { KritzelSvgExportHelper } from "../../../helpers/svg-export.helper";
 import { toPng, toSvg } from "html-to-image";
 import { ObjectHelper } from "../../../helpers/object.helper";
+import { KritzelWheelHelper } from "../../../helpers/wheel.helper";
 export class KritzelEngine {
     host;
     /** The workspace to load and display. Changing this prop switches the active workspace. */
@@ -206,6 +207,7 @@ export class KritzelEngine {
     onDebugInfoChange(newValue) {
         if (newValue) {
             this.core.store.state.debugInfo = newValue;
+            this.core.assetResolver.setShowInfo(newValue.showAssetResolverInfo);
         }
     }
     /** When false, non-modified wheel events do not pan the viewport. */
@@ -259,6 +261,12 @@ export class KritzelEngine {
         if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
+        const hoveredObject = this.core.getObjectFromPointerEvent(ev);
+        if (hoveredObject &&
+            ObjectHelper.isClass(hoveredObject, 'KritzelCustomElement') &&
+            KritzelWheelHelper.shouldKeepWheelInCustomElement(ev, hoveredObject)) {
+            return;
+        }
         if (ev.ctrlKey) {
             if (this.isZoomingEnabled) {
                 this.viewport.handleWheel(ev);
@@ -275,6 +283,11 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
+        // Interactive custom-element content should receive native pointer events
+        // whenever the object is marked interactive.
+        if (this.isEmbeddedCustomElementInteraction(ev)) {
+            return;
+        }
         if (KritzelDevicesHelper.isTouchDevice()) {
             KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         }
@@ -291,6 +304,10 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
+        // Ignore drag/move sequences when their pointerdown was intentionally bypassed.
+        if (ev.buttons > 0 && !this.core.store.state.pointers.has(ev.pointerId)) {
+            return;
+        }
         if (this.core.store.state.pointers.has(ev.pointerId)) {
             this.core.store.state.pointers.set(ev.pointerId, ev);
         }
@@ -339,6 +356,56 @@ export class KritzelEngine {
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
+    isEmbeddedCustomElementInteraction(event) {
+        const path = event.composedPath();
+        const objectElement = path.find((entry) => {
+            return entry instanceof HTMLElement && entry.classList.contains('object');
+        });
+        if (!objectElement?.id) {
+            return false;
+        }
+        const object = this.core.store.objects.findById(objectElement.id);
+        if (!object || !KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            return false;
+        }
+        const isSelected = !!this.core.store.selectionGroup?.objects?.some(selectedObject => selectedObject.id === object.id);
+        if (!isSelected) {
+            return false;
+        }
+        if (object.isInteractive !== true) {
+            return false;
+        }
+        const potentialRoots = [];
+        if (object.element instanceof HTMLElement) {
+            potentialRoots.push(object.element);
+        }
+        if (object.elementRef instanceof HTMLElement) {
+            potentialRoots.push(object.elementRef);
+        }
+        if (potentialRoots.length === 0) {
+            return false;
+        }
+        // Only bypass canvas tool handling when the pointer event came from an
+        // actually interactive descendant inside the custom element subtree.
+        return potentialRoots.some(root => this.isNativeInteractiveEmbeddedTarget(path, root));
+    }
+    isNativeInteractiveEmbeddedTarget(path, customElementRoot) {
+        const interactiveSelector = 'input, button, textarea, select, a[href], [contenteditable="true"], [contenteditable=""]';
+        const rootIndex = path.findIndex(entry => entry === customElementRoot);
+        if (rootIndex === -1) {
+            return false;
+        }
+        for (const entry of path.slice(0, rootIndex)) {
+            if (!(entry instanceof HTMLElement)) {
+                continue;
+            }
+            const interactiveEntry = entry;
+            if (interactiveEntry.matches(interactiveSelector)) {
+                return true;
+            }
+        }
+        return false;
+    }
     handlePointerLeave() {
         this.core.store.objects?.clearCursorPosition();
     }
@@ -410,7 +477,7 @@ export class KritzelEngine {
         void this.core.clipboardManager.paste(undefined, undefined, ev);
     }
     /**
-      * Determines if the engine should handle a keyboard/clipboard shortcut event.
+     * Determines if the engine should handle a keyboard/clipboard shortcut event.
      * Returns true only if:
      * - The event originates from within the engine component, OR
      * - The event target is not an interactive element that needs keyboard input
@@ -1624,6 +1691,8 @@ export class KritzelEngine {
     _syncConfigRevision = 0;
     _assetStorageConfigRevision = 0;
     _isWorkspaceLoading = false;
+    _hasLoggedUnlicensedWelcomeBanner = false;
+    _previousVisibleCustomElements = new Set();
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -1671,6 +1740,14 @@ export class KritzelEngine {
     }
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
+        // Unmount all remaining custom elements
+        if (this.core.store.allObjects) {
+            this.core.store.allObjects.forEach(object => {
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                    object.unmount();
+                }
+            });
+        }
         // Clear cursor position in awareness before destroying
         this.core.store.objects?.clearCursorPosition();
         // Clean up current workspace's ObjectMap
@@ -1727,6 +1804,7 @@ export class KritzelEngine {
             await this.initializeSyncAndWorkspace();
             if (this.core.store.state.isReady === false) {
                 this.core.store.state.isReady = true;
+                this.logUnlicensedWelcomeBanner();
                 this.isEngineReady.emit(this.core.store.state);
             }
         }, 50);
@@ -1766,6 +1844,14 @@ export class KritzelEngine {
         }
         this._isAssetStorageInitialized = true;
     }
+    logUnlicensedWelcomeBanner() {
+        if (this.core.licenseManager.isLicensed || this._hasLoggedUnlicensedWelcomeBanner) {
+            return;
+        }
+        this._hasLoggedUnlicensedWelcomeBanner = true;
+        console.info('%c👋 Welcome to Kritzel', 'color: #007AFF; font-weight: 700;');
+        console.info(`This version of Kritzel is not licensed. Get a license at: https://kritzel.io`);
+    }
     async doInitializeSyncAndWorkspace() {
         // Capture sync config revision to detect prop updates that happen while
         // initialization is in-flight.
@@ -1969,8 +2055,7 @@ export class KritzelEngine {
         if (normalizedScale <= this._objectDistanceFadeFarScale) {
             return this._objectDistanceFadeMinOpacity;
         }
-        const progress = (this._objectDistanceFadeNearScale - normalizedScale) /
-            (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
+        const progress = (this._objectDistanceFadeNearScale - normalizedScale) / (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
         const smooth = progress * progress * (3 - 2 * progress);
         return 1 - smooth * (1 - this._objectDistanceFadeMinOpacity);
     }
@@ -1981,8 +2066,7 @@ export class KritzelEngine {
         if (normalizedScale >= this._objectDistanceFadeCloseMaxScale) {
             return this._objectDistanceFadeCloseMinOpacity;
         }
-        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) /
-            (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
+        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) / (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
         const smooth = progress * progress * (3 - 2 * progress);
         return 1 - smooth * (1 - this._objectDistanceFadeCloseMinOpacity);
     }
@@ -1992,13 +2076,18 @@ export class KritzelEngine {
     }
     getObjectEffectiveOpacity(object, viewportScale) {
         const safeObjectOpacity = Number.isFinite(object.opacity) ? object.opacity : 1;
-        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object)
-            ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale)
-            : 1;
+        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object) ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale) : 1;
         const multiplied = (object.markedForRemoval ? 0.5 : 1) * safeObjectOpacity * distanceFadeMultiplier;
         const overridden = ((object.markedForRemoval ? 0.5 : safeObjectOpacity) * distanceFadeMultiplier).toString();
         return { multiplied, overridden };
     }
+    getSelectionHandleCapabilities(object) {
+        const selectedObjects = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') ? object.objects : [object];
+        return {
+            canRenderResizeHandles: selectedObjects.every(selectedObject => selectedObject.isResizable !== false),
+            canRenderRotationHandle: selectedObjects.every(selectedObject => selectedObject.isRotatable !== false),
+        };
+    }
     render() {
         if (!this.viewport) {
             return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), this.core.localizationManager.translate('engine.loading')))));
@@ -2012,6 +2101,45 @@ export class KritzelEngine {
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
         const visibleObjects = this.core.store.objectsInViewport;
+        const getObjectWrapperPointerEvents = (object) => {
+            if (this.core.store.state.isScaling) {
+                return 'none';
+            }
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
+                return 'none';
+            }
+            return 'auto';
+        };
+        const getSelectionGroupOverlayPointerEvents = (object) => {
+            if (object.markedForRemoval) {
+                return 'none';
+            }
+            if (!KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
+                return 'auto';
+            }
+            if (object.objects.length === 1 && KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelCustomElement')) {
+                return 'none';
+            }
+            return 'auto';
+        };
+        // Track visible custom elements and unmount culled ones
+        const currentVisibleCustomElements = new Set();
+        visibleObjects.forEach(object => {
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                currentVisibleCustomElements.add(object.id);
+            }
+        });
+        // Unmount custom elements that left the viewport
+        this._previousVisibleCustomElements.forEach(id => {
+            if (!currentVisibleCustomElements.has(id)) {
+                const object = this.core.store.objects.findById(id);
+                if (object && KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                    object.unmount();
+                }
+            }
+        });
+        // Update tracking set for next render
+        this._previousVisibleCustomElements = currentVisibleCustomElements;
         this.core.cursorManager.applyCursor();
         if (this.core.store.state.hasViewportChanged) {
             this.viewportChange.emit(this.viewport.getViewport());
@@ -2028,7 +2156,7 @@ export class KritzelEngine {
                     transformOrigin: 'top left',
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                    pointerEvents: getObjectWrapperPointerEvents(object),
                 } }, 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',
@@ -2117,7 +2245,7 @@ export class KritzelEngine {
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     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',
+                    pointerEvents: getSelectionGroupOverlayPointerEvents(object),
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
@@ -2152,60 +2280,65 @@ export class KritzelEngine {
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const fillResolved = KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
-                const strokeResolved = KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
-                const isFilled = !!fillResolved && fillResolved !== 'transparent';
-                const strokeMatchesFill = isFilled && strokeResolved === fillResolved;
-                return (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',
-                        width: object.totalWidth + 'px',
-                        height: object.totalHeight + 'px',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                        overflow: 'visible',
-                        pointerEvents: 'none',
-                    }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.applyOpacity(object.fillColor, effectiveOpacity, currentTheme), stroke: strokeMatchesFill ? 'none' : KritzelColorHelper.applyOpacity(object.strokeColor, effectiveOpacity, currentTheme), "stroke-width": strokeMatchesFill ? 0 : object.strokeWidth })), h("div", { ref: el => el && object.mountTextEditor(el), style: {
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        textAlign: 'center',
-                        overflow: 'hidden',
-                        pointerEvents: object.isEditing ? 'auto' : 'none',
-                    } })));
-            })(), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') &&
+                (() => {
+                    const fillResolved = KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
+                    const strokeResolved = KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
+                    const isFilled = !!fillResolved && fillResolved !== 'transparent';
+                    const strokeMatchesFill = isFilled && strokeResolved === fillResolved;
+                    return (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',
+                            width: object.totalWidth + 'px',
+                            height: object.totalHeight + 'px',
+                            transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                            transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                            pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                            overflow: 'visible',
+                        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                            overflow: 'visible',
+                            pointerEvents: 'none',
+                        }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: KritzelColorHelper.applyOpacity(object.fillColor, effectiveOpacity, currentTheme), stroke: strokeMatchesFill ? 'none' : KritzelColorHelper.applyOpacity(object.strokeColor, effectiveOpacity, currentTheme), "stroke-width": strokeMatchesFill ? 0 : object.strokeWidth })), h("div", { ref: el => el && object.mountTextEditor(el), style: {
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            textAlign: 'center',
+                            overflow: 'hidden',
+                            pointerEvents: object.isEditing ? 'auto' : 'none',
+                        } })));
+                })(), this.core.store.state.debugInfo.showObjectInfo && (h("div", { style: {
                     pointerEvents: 'none',
                     position: 'absolute',
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, 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' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, 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' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     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) ||
-                        // Same user but different client that is still actively connected (e.g. same account on another device)
-                        (object.userId != null && this.core.user?.id != null && object.userId === this.core.user.id &&
-                            object.clientId != null && localClientId != null && object.clientId !== localClientId &&
-                            awarenessStates?.has(object.clientId) === true));
+                    const isRemoteSelection = isSelectionGroup &&
+                        // Different user
+                        ((object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
+                            // Same user but different client that is still actively connected (e.g. same account on another device)
+                            (object.userId != null &&
+                                this.core.user?.id != null &&
+                                object.userId === this.core.user.id &&
+                                object.clientId != null &&
+                                localClientId != null &&
+                                object.clientId !== localClientId &&
+                                awarenessStates?.has(object.clientId) === true));
                     let remoteUserColor;
                     if (isRemoteSelection) {
                         if (awarenessStates) {
@@ -2224,10 +2357,10 @@ export class KritzelEngine {
                             }
                         }
                     }
-                    const selectionBorderColor = remoteUserColor
-                        ?? (KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
-                    const selectionHandleStrokeColor = remoteUserColor
-                        ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const selectionBorderColor = remoteUserColor ?? (KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
+                    const selectionHandleStrokeColor = remoteUserColor ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const handleScale = object.scale ?? 1;
+                    const { canRenderResizeHandles, canRenderRotationHandle } = this.getSelectionHandleCapabilities(object);
                     return (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                             zIndex: (object.zIndex + 1).toString(),
                             height: object?.totalHeight.toString(),
@@ -2271,50 +2404,50 @@ export class KritzelEngine {
                                 strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                                 strokeLinecap: 'square',
                             } })));
-                    })(), !this.isSelecting && !isRemoteSelection && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                    })(), !this.isSelecting && !isRemoteSelection && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, canRenderResizeHandles && (h("g", null, h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                        } }))), canRenderRotationHandle && (h("g", null, h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * handleScale) / this.core.store.state?.scale), style: {
                             stroke: selectionBorderColor,
-                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                        } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${handleScale} / ${this.core.store.state?.scale})`,
+                        } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * handleScale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * handleScale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }))))), this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                        } }))))))), this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
                             stroke: selectionBorderColor,
                             strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                             strokeLinecap: 'round',
@@ -2439,7 +2572,7 @@ export class KritzelEngine {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, 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 }), !this.core.licenseManager.isLicensed && (h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') }))));
+            }, 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 }), !this.core.licenseManager.isLicensed && h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js

@@ -13,6 +13,7 @@ const DEFAULT_DEBUG_INFO = {
     showObjectInfo: false,
     showSyncProviderInfo: true,
     showMigrationInfo: true,
+    showAssetResolverInfo: false,
 };
 const SETTINGS_CATEGORY_IDS = ['general', 'viewport', 'shortcuts', 'developer', 'about'];
 export class KritzelSettings {
@@ -217,7 +218,7 @@ export class KritzelSettings {
         }
     }
     render() {
-        return (h(Host, { key: '6f26bd23bf7bb51653f09b96bafef221c51c2bfa' }, h("kritzel-dialog", { key: '49ffda0a422ae1c2c9c8e6e608bce532e7d4099e', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'ab5dc7952e555cae6f841ef4de2ab50d7039279b', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '8b96261465efeabb2eb0cf724d29699de5e230a8' }, h("kritzel-dialog", { key: '273a9df290bb97d59000a97f91821e7bad3f3896', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '64d17dfaa2a0baf2d4a5d00fe5fc65ad40c96ec6', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,8 +36,9 @@ export const DEFAULT_ENGINE_CONFIG = {
     debugInfo: {
         showObjectInfo: false,
         showViewportInfo: false,
-        showSyncProviderInfo: true,
-        showMigrationInfo: true
+        showSyncProviderInfo: false,
+        showAssetResolverInfo: false,
+        showMigrationInfo: false,
     },
     host: null,
     pointerX: 0,

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.3.22';
+export const KRITZEL_VERSION = '0.3.23';

package/dist/collection/helpers/html.helper.js

@@ -3,6 +3,58 @@ export class KritzelHTMLHelper {
         const value = window.getComputedStyle(element).getPropertyValue(property);
         return parseFloat(value) || 0;
     }
+    static isScrollableElement(element) {
+        if (!(element instanceof HTMLElement)) {
+            return false;
+        }
+        const style = window.getComputedStyle(element);
+        const overflowX = style.overflowX;
+        const overflowY = style.overflowY;
+        const overflow = style.overflow;
+        const canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') && element.scrollWidth > element.clientWidth;
+        const canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && element.scrollHeight > element.clientHeight;
+        const canScroll = overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay';
+        return canScrollX || canScrollY || (canScroll && (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight));
+    }
+    static findScrollableElement(root) {
+        if (!root) {
+            return null;
+        }
+        const visited = new Set();
+        const walk = (element) => {
+            if (visited.has(element)) {
+                return null;
+            }
+            visited.add(element);
+            if (this.isScrollableElement(element)) {
+                return element;
+            }
+            if (element.shadowRoot) {
+                for (const child of Array.from(element.shadowRoot.children)) {
+                    const scrollable = walk(child);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            if (element.tagName === 'SLOT') {
+                for (const assignedElement of element.assignedElements({ flatten: true })) {
+                    const scrollable = walk(assignedElement);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            for (const child of Array.from(element.children)) {
+                const scrollable = walk(child);
+                if (scrollable) {
+                    return scrollable;
+                }
+            }
+            return null;
+        };
+        return walk(root);
+    }
     static getScrollableParent(element) {
         if (!element) {
             return window;

package/dist/collection/helpers/object.helper.js

@@ -12,4 +12,7 @@ export class ObjectHelper {
         }
         return Object?.keys(obj).length === 0 && obj?.constructor === Object;
     }
+    static isClass(object, className) {
+        return !!object && object.__class__ === className;
+    }
 }