kritzel-stencil 0.1.20 → 0.1.21

package/dist/cjs/{default-line-tool.config-BeAHPilg.js → default-line-tool.config-Bva9deYM.js}

@@ -14883,7 +14883,9 @@ class KritzelText extends KritzelBaseObject {
         element.style.fontSize = `${this.fontSize}pt`;
         element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
-            requestAnimationFrame(() => this.adjustSizeOnInput());
+            if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
+                requestAnimationFrame(() => this.adjustSizeOnInput());
+            }
             return;
         }
         this.elementRef = element;
@@ -18473,6 +18475,8 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         const pointerY = this._core.store.state.pointerY;
         const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
         for (const object of overlappingObjects) {
+            if (object instanceof KritzelSelectionBox)
+                continue;
             if (object.hitTest(pointerX, pointerY)) {
                 return object;
             }

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-BeAHPilg.js');
+var defaultLineTool_config = require('./default-line-tool.config-Bva9deYM.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-i21-qqbc.js');
-var defaultLineTool_config = require('./default-line-tool.config-BeAHPilg.js');
+var defaultLineTool_config = require('./default-line-tool.config-Bva9deYM.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19172,10 +19172,10 @@ class KritzelViewport {
     handleWheel(event) {
         // Cancel any ongoing viewport animation when user scrolls
         this.cancelViewportAnimation();
-        if (event.ctrlKey === true && Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0) {
+        if (event.ctrlKey) {
             this.handleZoom(event);
         }
-        if (!event.ctrlKey) {
+        else {
             this.handlePan(event);
         }
     }
@@ -19214,6 +19214,10 @@ class KritzelViewport {
         this._core.store.state.scale = newScale;
         this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
         this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        // Apply horizontal pan from trackpad pinch+drag gestures
+        if (event.deltaX !== 0) {
+            this._core.store.state.translateX -= event.deltaX * 0.8;
+        }
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
@@ -22422,13 +22426,13 @@ const KritzelEngine = class {
         return (index.h(index.Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, index.h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
-            return (index.h("div", { key: object.id, style: {
+            return (index.h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     zIndex: object.zIndex.toString(),
+                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                } }, defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22438,8 +22442,7 @@ const KritzelEngine = class {
                     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',
-                } }, index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                    zIndex: object.zIndex.toString(),
+                } }, index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -22449,7 +22452,7 @@ const KritzelEngine = class {
                     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',
-                } }, index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (index.h("defs", null, object.hasStartArrow && (index.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" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: defaultLineTool_config.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 })))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", { id: object.id, class: "object", style: {
+                } }, index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (index.h("defs", null, object.hasStartArrow && (index.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" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: defaultLineTool_config.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 })))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22457,7 +22460,6 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22472,7 +22474,7 @@ const KritzelEngine = class {
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { id: object.id, class: "object", style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22480,7 +22482,6 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22495,7 +22496,7 @@ const KritzelEngine = class {
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { id: object.id, class: "object", style: {
+                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22503,13 +22504,12 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, index.h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { id: object.id, class: "object", style: {
+                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22517,7 +22517,6 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -22527,7 +22526,7 @@ const KritzelEngine = class {
                 } }, index.h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { id: object.id, class: "object", style: {
+                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22535,7 +22534,6 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, index.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: {
@@ -22549,7 +22547,7 @@ const KritzelEngine = class {
                     backgroundColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { id: object.id, class: "object", style: {
+                } }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -22557,7 +22555,6 @@ const KritzelEngine = class {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
@@ -22772,7 +22769,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '81e182d8edd6bcfcbaf649a3c0d42e0f8e070037', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'b9171dfffeb4a88bc4ad9a7b0196a18f5427183f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -22783,7 +22780,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'a799d3665a67b5530a4ab1e49b155c7e737a72e3', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23794,7 +23791,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.20';
+const KRITZEL_VERSION = '0.1.21';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 

package/dist/collection/classes/core/viewport.class.js

@@ -153,10 +153,10 @@ export class KritzelViewport {
     handleWheel(event) {
         // Cancel any ongoing viewport animation when user scrolls
         this.cancelViewportAnimation();
-        if (event.ctrlKey === true && Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0) {
+        if (event.ctrlKey) {
             this.handleZoom(event);
         }
-        if (!event.ctrlKey) {
+        else {
             this.handlePan(event);
         }
     }
@@ -195,6 +195,10 @@ export class KritzelViewport {
         this._core.store.state.scale = newScale;
         this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
         this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        // Apply horizontal pan from trackpad pinch+drag gestures
+        if (event.deltaX !== 0) {
+            this._core.store.state.translateX -= event.deltaX * 0.8;
+        }
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();

package/dist/collection/classes/handlers/selection.handler.js

@@ -203,6 +203,8 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         const pointerY = this._core.store.state.pointerY;
         const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
         for (const object of overlappingObjects) {
+            if (object instanceof KritzelSelectionBox)
+                continue;
             if (object.hitTest(pointerX, pointerY)) {
                 return object;
             }

package/dist/collection/classes/objects/text.class.js

@@ -83,7 +83,9 @@ export class KritzelText extends KritzelBaseObject {
         element.style.fontSize = `${this.fontSize}pt`;
         element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
-            requestAnimationFrame(() => this.adjustSizeOnInput());
+            if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
+                requestAnimationFrame(() => this.adjustSizeOnInput());
+            }
             return;
         }
         this.elementRef = element;

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

@@ -510,13 +510,13 @@ export class KritzelEngine {
         return (h(Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
-            return (h("div", { key: object.id, style: {
+            return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     zIndex: object.zIndex.toString(),
+                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -526,8 +526,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("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { 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", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                    zIndex: object.zIndex.toString(),
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { 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", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -537,7 +536,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("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { 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("div", { id: object.id, class: "object", style: {
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { 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("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -545,7 +544,6 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -560,7 +558,7 @@ export class KritzelEngine {
                     userSelect: 'none',
                     pointerEvents: '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", { id: object.id, class: "object", style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -568,7 +566,6 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -583,7 +580,7 @@ export class KritzelEngine {
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -591,13 +588,12 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -605,7 +601,6 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
@@ -615,7 +610,7 @@ export class KritzelEngine {
                 } }, h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -623,7 +618,6 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     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: {
@@ -637,7 +631,7 @@ export class KritzelEngine {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { id: object.id, class: "object", style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -645,7 +639,6 @@ export class KritzelEngine {
                     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,
-                    zIndex: object.zIndex.toString(),
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
@@ -860,7 +853,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81e182d8edd6bcfcbaf649a3c0d42e0f8e070037', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'b9171dfffeb4a88bc4ad9a7b0196a18f5427183f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -871,7 +864,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a799d3665a67b5530a4ab1e49b155c7e737a72e3', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

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

package/dist/components/index.js

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

package/dist/components/kritzel-controls.js

@@ -1 +1 @@
-import{K as r,d as o}from"./p-BvhyHrHr.js";const s=r,p=o;export{s as KritzelControls,p as defineCustomElement}
+import{K as s,d as o}from"./p-DqtvAhfs.js";const t=s,p=o;export{t as KritzelControls,p as defineCustomElement}