kritzel-stencil 0.0.149 → 0.0.151

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { P as KritzelEngine$1, N as defineCustomElement$1 } from './p-CE48HcKx.js';
+import { P as KritzelEngine$1, N as defineCustomElement$1 } from './p-D6oQxYXs.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-CE48HcKx.js → p-D6oQxYXs.js}

@@ -34909,27 +34909,21 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.viewport.handlePointerDown(ev);
         this.core.store.state?.activeTool?.handlePointerDown(ev);
     }
+    throttledPointerMoveMulti = lodashExports.throttle((ev) => {
+        this.viewport.handlePointerMove(ev);
+        this.core.store.state?.activeTool?.handlePointerMove(ev);
+    }, 16);
     handlePointerMove(ev) {
         if (this.core.store.isDisabled) {
             return;
         }
         this.core.store.state.pointers.set(ev.pointerId, ev);
-        // Use different throttle functions based on pointer count
         if (this.core.store.state.pointers.size > 1) {
             this.throttledPointerMoveMulti(ev);
         }
-        else {
-            this.throttledPointerMoveSingle(ev);
-        }
-    }
-    throttledPointerMoveSingle = lodashExports.throttle((ev) => {
         this.viewport.handlePointerMove(ev);
         this.core.store.state?.activeTool?.handlePointerMove(ev);
-    }, 0);
-    throttledPointerMoveMulti = lodashExports.throttle((ev) => {
-        this.viewport.handlePointerMove(ev);
-        this.core.store.state?.activeTool?.handlePointerMove(ev);
-    }, 100);
+    }
     handlePointerUp(ev) {
         if (this.core.store.isDisabled) {
             return;
@@ -35138,7 +35132,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
-        this.throttledPointerMoveSingle.cancel();
         this.throttledPointerMoveMulti.cancel();
     }
     componentWillLoad() {
@@ -35191,9 +35184,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
         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;
-        return (h(Host, { key: '17bf6a3ff6eb5b5d94d786267d3bdff8805cb533' }, h("div", { key: 'f188bf94dcd66074b9e1f71b2c683955f020cb49', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: 'fbb921e10faf42b323decc4871537191c145fc14' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '826207310bbdc2f5e28de541de79016df759aebb' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '42dbb74aa75858a540acabd868a6a16428857028' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'b3e88f31170b9ac6e107cf96e31173e6e8e193a9' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'b8f9ac44d9488ab10d7118ec676c6897e08f3cd6' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '1a4b6c1ded1d6cda9e2a1777dc3aafeb58f00c46' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '993d90e986fe0b5c60dfa15f952e5f752526518c' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '32ba561e1129ea5550f03daa81cb5ba5bedbea53' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'de89601fd42ae57349eae765242ebf9151d9b561' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'e661fd788007ef0e0ac68d9950d8a65c54288bc4' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'f3c00e656c78ad4e12ebe7dd201f53237687dda0' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '00e6183e59a302678ea48b3738e32607f34b06bb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'c9cc3a645e47e78e79f28704a3a7a1338c3b14dc' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '4b1a5e76f1bfd1b8f6de5bab444622d5a937caf5' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '326852e22e526f67b75da99947427a50ff9b1b3c' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'ca2b54a494f27aff9b9cfa7a09a24c8220412937' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7ede9aee3c18143ac66823b78157e4ed35813c6c' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'fdf9863a45c4861bbd1a45817d029cc7be57e305' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'b8352a9390586a99adbdfeaead3a53c2f2adcccb' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '8685bfb218fc405abd1e4e060958f05ee5604f5a' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'bc35c91f407a5d5c06216a6b549bf1870a10b9f8' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '49ca83379e9cd80be9afe8e51ece26bd860e8b2c' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '61923c56ee0bbde62ecaf15844465fa2552b2e3a' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '01fad2fea8986db5b423b9ad50fdc729b93f5564', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '3e05ce246b599985a06e54e0d81a63b4765ff506' }, h("div", { key: '6169eb0566bb2965c7d1569492a62a1ef1d4b7ef', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '598db5c39099553997248086e392c168c583aca9' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '6d5de3390f2e32dbaa7fe52521b8fd9c0e8706de' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '6006c27d020aeea24170a09140e3bc5c2ea459cf' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'edfa3cb59d47df747dc9f003ce08345348ba586d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '799f714d6e4b129f59be7cbc52f657e9b21f9879' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '4a8f545cf72fe496abf18a4907743ac6b46ef889' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '8e665e3c23424cb4e76b2d4354bb4472a5b3ddbe' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'c168b114e204b90dafaf8736a571171a748047c1' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'bee83601a571727a06235c674e7300cdc398dfac' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '0a2f5f36143c587ddc9b3ae487ce32196cd17232' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '515959ec3700ecdc9dd3ca9183bfacd854d173d2' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '5a9ca8f3ba91f10e9d6bec07c6005c1e43713d69' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'f5d1a5d59828be47be31e794b3b41c1e14c50780' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1db8cdad160c131542fd787d104b4b979415ec4c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'baae83187cfb4c21ea07c7834017df92a7340d5b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '6b248cb6fad7fb4dd5162fb2529dfec821a708fc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '0eae863f48c27867d0fa0f8c767b50c13be48271' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a4ca58af5858725d4f1d0e00547e6e42365cb8fe' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '8f978714060623d3daa9454e04ef929b1f02b143' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9b274d7785a9e4a36128c273bcee6b692d815a86' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0c248bc24c164c4c52fb06b17347f107e3f0995f' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '21f3664f0978f308d88a976c47b875dd5bb08b95' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'e1161aa45ea02de914e01a93ec159447b5e17e8b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '87249fcc3f23632739631b8fdbc64371694d6206', 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})`,
-                willChange: 'transform',
             } }, this.core.store.state.objectsMap.allObjects()?.map(object => {
             return (h("div", { key: object.id, style: {
                     display: object.isInViewport() ? 'block' : 'none',
@@ -35202,7 +35194,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     zIndex: object.zIndex.toString(),
                     position: 'absolute',
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                    willChange: this.core.store.state.isScaling ? 'transform' : 'auto',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
@@ -35227,11 +35218,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     width: object?.width.toString(),
                     position: 'absolute',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": this.core.store.state.isScaling ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
+                    imageRendering: this.core.store.state.isScaling ? 'pixelated' : 'auto',
                 }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
@@ -35242,6 +35234,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: object.backgroundColor,
                     overflow: 'visible',
+                    textRendering: this.core.store.state.isScaling ? 'optimizeSpeed' : 'auto',
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
@@ -35299,7 +35292,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     fill: 'transparent',
                     cursor: 'grab',
                 }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whitespace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY)))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '9a4985baa6f90aeeeca3a32958f79ebee9645c6d', 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: 'e99d647c9be209966a4e302773eef855667800e2', 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`,
@@ -35310,7 +35303,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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: '5793c405666b73a93ba473edf9477653683ef786', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a7301f377705b93d2dd1b0f0e8da2bc40522b0a3', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -35391,6 +35384,6 @@ function defineCustomElement() {
 }
 
 export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelEraserTool as E, KritzelImageTool as F, KritzelSelectionTool as G, HocuspocusProvider as H, IndexedDBSyncProvider as I, KritzelAppStateMap as J, KritzelImage as K, ABSOLUTE_SCALE_MAX as L, ABSOLUTE_SCALE_MIN as M, defineCustomElement as N, Observable$1 as O, KritzelEngine as P, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=p-CE48HcKx.js.map
+//# sourceMappingURL=p-D6oQxYXs.js.map
 
-//# sourceMappingURL=p-CE48HcKx.js.map
+//# sourceMappingURL=p-D6oQxYXs.js.map