kritzel-stencil 0.0.148 → 0.0.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/kritzel-color_22.cjs.entry.js +20 -9
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +21 -10
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
- package/dist/components/index.js +2 -2
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/{p-CABZ6Ce4.js → p-CE48HcKx.js} +23 -12
- package/dist/components/p-CE48HcKx.js.map +1 -0
- package/dist/esm/kritzel-color_22.entry.js +20 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/{p-1d8aaa54.entry.js → p-824023c3.entry.js} +2 -2
- package/dist/stencil/p-824023c3.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +2 -2
- package/package.json +1 -1
- package/dist/components/p-CABZ6Ce4.js.map +0 -1
- package/dist/stencil/p-1d8aaa54.entry.js.map +0 -1
|
@@ -19413,14 +19413,22 @@ const KritzelEngine = class {
|
|
|
19413
19413
|
return;
|
|
19414
19414
|
}
|
|
19415
19415
|
this.core.store.state.pointers.set(ev.pointerId, ev);
|
|
19416
|
-
|
|
19417
|
-
this.
|
|
19416
|
+
// Use different throttle functions based on pointer count
|
|
19417
|
+
if (this.core.store.state.pointers.size > 1) {
|
|
19418
|
+
this.throttledPointerMoveMulti(ev);
|
|
19419
|
+
}
|
|
19420
|
+
else {
|
|
19421
|
+
this.throttledPointerMoveSingle(ev);
|
|
19422
|
+
}
|
|
19418
19423
|
}
|
|
19419
|
-
|
|
19420
|
-
|
|
19424
|
+
throttledPointerMoveSingle = lodashExports.throttle((ev) => {
|
|
19425
|
+
this.viewport.handlePointerMove(ev);
|
|
19426
|
+
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
19427
|
+
}, 0);
|
|
19428
|
+
throttledPointerMoveMulti = lodashExports.throttle((ev) => {
|
|
19421
19429
|
this.viewport.handlePointerMove(ev);
|
|
19422
19430
|
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
19423
|
-
},
|
|
19431
|
+
}, 100);
|
|
19424
19432
|
handlePointerUp(ev) {
|
|
19425
19433
|
if (this.core.store.isDisabled) {
|
|
19426
19434
|
return;
|
|
@@ -19625,7 +19633,8 @@ const KritzelEngine = class {
|
|
|
19625
19633
|
this.core = new KritzelCore(this);
|
|
19626
19634
|
}
|
|
19627
19635
|
disconnectedCallback() {
|
|
19628
|
-
this.
|
|
19636
|
+
this.throttledPointerMoveSingle.cancel();
|
|
19637
|
+
this.throttledPointerMoveMulti.cancel();
|
|
19629
19638
|
}
|
|
19630
19639
|
componentWillLoad() {
|
|
19631
19640
|
this.validateScaleMax(this.scaleMax);
|
|
@@ -19677,8 +19686,9 @@ const KritzelEngine = class {
|
|
|
19677
19686
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
19678
19687
|
const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
|
|
19679
19688
|
const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
|
|
19680
|
-
return (index.h(index.Host, { key: '
|
|
19689
|
+
return (index.h(index.Host, { key: '17bf6a3ff6eb5b5d94d786267d3bdff8805cb533' }, index.h("div", { key: 'f188bf94dcd66074b9e1f71b2c683955f020cb49', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'fbb921e10faf42b323decc4871537191c145fc14' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '826207310bbdc2f5e28de541de79016df759aebb' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '42dbb74aa75858a540acabd868a6a16428857028' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'b3e88f31170b9ac6e107cf96e31173e6e8e193a9' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'b8f9ac44d9488ab10d7118ec676c6897e08f3cd6' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '1a4b6c1ded1d6cda9e2a1777dc3aafeb58f00c46' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '993d90e986fe0b5c60dfa15f952e5f752526518c' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '32ba561e1129ea5550f03daa81cb5ba5bedbea53' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'de89601fd42ae57349eae765242ebf9151d9b561' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'e661fd788007ef0e0ac68d9950d8a65c54288bc4' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: 'f3c00e656c78ad4e12ebe7dd201f53237687dda0' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '00e6183e59a302678ea48b3738e32607f34b06bb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: 'c9cc3a645e47e78e79f28704a3a7a1338c3b14dc' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '4b1a5e76f1bfd1b8f6de5bab444622d5a937caf5' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '326852e22e526f67b75da99947427a50ff9b1b3c' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'ca2b54a494f27aff9b9cfa7a09a24c8220412937' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7ede9aee3c18143ac66823b78157e4ed35813c6c' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'fdf9863a45c4861bbd1a45817d029cc7be57e305' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'b8352a9390586a99adbdfeaead3a53c2f2adcccb' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '8685bfb218fc405abd1e4e060958f05ee5604f5a' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'bc35c91f407a5d5c06216a6b549bf1870a10b9f8' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '49ca83379e9cd80be9afe8e51ece26bd860e8b2c' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '61923c56ee0bbde62ecaf15844465fa2552b2e3a' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), index.h("div", { key: '01fad2fea8986db5b423b9ad50fdc729b93f5564', id: "origin", class: "origin", style: {
|
|
19681
19690
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
19691
|
+
willChange: 'transform',
|
|
19682
19692
|
} }, this.core.store.state.objectsMap.allObjects()?.map(object => {
|
|
19683
19693
|
return (index.h("div", { key: object.id, style: {
|
|
19684
19694
|
display: object.isInViewport() ? 'block' : 'none',
|
|
@@ -19687,6 +19697,7 @@ const KritzelEngine = class {
|
|
|
19687
19697
|
zIndex: object.zIndex.toString(),
|
|
19688
19698
|
position: 'absolute',
|
|
19689
19699
|
pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
|
|
19700
|
+
willChange: this.core.store.state.isScaling ? 'transform' : 'auto',
|
|
19690
19701
|
} }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
|
|
19691
19702
|
height: object?.totalHeight.toString(),
|
|
19692
19703
|
width: object?.totalWidth.toString(),
|
|
@@ -19783,7 +19794,7 @@ const KritzelEngine = class {
|
|
|
19783
19794
|
fill: 'transparent',
|
|
19784
19795
|
cursor: 'grab',
|
|
19785
19796
|
}, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whitespace: 'nowrap' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY)))))));
|
|
19786
|
-
})), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '
|
|
19797
|
+
})), this.core.store.state.isContextMenuVisible && (index.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: {
|
|
19787
19798
|
position: 'fixed',
|
|
19788
19799
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
19789
19800
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -19794,7 +19805,7 @@ const KritzelEngine = class {
|
|
|
19794
19805
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
19795
19806
|
}, this.core.store.selectionGroup?.objects);
|
|
19796
19807
|
this.hideContextMenu();
|
|
19797
|
-
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultTextTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '
|
|
19808
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultTextTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '5793c405666b73a93ba473edf9477653683ef786', core: this.core })));
|
|
19798
19809
|
}
|
|
19799
19810
|
static get watchers() { return {
|
|
19800
19811
|
"workspace": ["onWorkspaceChange"],
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[
|
|
9
|
+
return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/stencil.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[
|
|
22
|
+
return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -83,14 +83,22 @@ export class KritzelEngine {
|
|
|
83
83
|
return;
|
|
84
84
|
}
|
|
85
85
|
this.core.store.state.pointers.set(ev.pointerId, ev);
|
|
86
|
-
|
|
87
|
-
this.
|
|
86
|
+
// Use different throttle functions based on pointer count
|
|
87
|
+
if (this.core.store.state.pointers.size > 1) {
|
|
88
|
+
this.throttledPointerMoveMulti(ev);
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
this.throttledPointerMoveSingle(ev);
|
|
92
|
+
}
|
|
88
93
|
}
|
|
89
|
-
|
|
90
|
-
throttledPointerMove = throttle((ev) => {
|
|
94
|
+
throttledPointerMoveSingle = throttle((ev) => {
|
|
91
95
|
this.viewport.handlePointerMove(ev);
|
|
92
96
|
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
93
|
-
},
|
|
97
|
+
}, 0);
|
|
98
|
+
throttledPointerMoveMulti = throttle((ev) => {
|
|
99
|
+
this.viewport.handlePointerMove(ev);
|
|
100
|
+
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
101
|
+
}, 100);
|
|
94
102
|
handlePointerUp(ev) {
|
|
95
103
|
if (this.core.store.isDisabled) {
|
|
96
104
|
return;
|
|
@@ -290,7 +298,8 @@ export class KritzelEngine {
|
|
|
290
298
|
this.core = new KritzelCore(this);
|
|
291
299
|
}
|
|
292
300
|
disconnectedCallback() {
|
|
293
|
-
this.
|
|
301
|
+
this.throttledPointerMoveSingle.cancel();
|
|
302
|
+
this.throttledPointerMoveMulti.cancel();
|
|
294
303
|
}
|
|
295
304
|
componentWillLoad() {
|
|
296
305
|
this.validateScaleMax(this.scaleMax);
|
|
@@ -342,8 +351,9 @@ export class KritzelEngine {
|
|
|
342
351
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
343
352
|
const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
|
|
344
353
|
const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
|
|
345
|
-
return (h(Host, { key: '
|
|
354
|
+
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: {
|
|
346
355
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
356
|
+
willChange: 'transform',
|
|
347
357
|
} }, this.core.store.state.objectsMap.allObjects()?.map(object => {
|
|
348
358
|
return (h("div", { key: object.id, style: {
|
|
349
359
|
display: object.isInViewport() ? 'block' : 'none',
|
|
@@ -352,6 +362,7 @@ export class KritzelEngine {
|
|
|
352
362
|
zIndex: object.zIndex.toString(),
|
|
353
363
|
position: 'absolute',
|
|
354
364
|
pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
|
|
365
|
+
willChange: this.core.store.state.isScaling ? 'transform' : 'auto',
|
|
355
366
|
} }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
|
|
356
367
|
height: object?.totalHeight.toString(),
|
|
357
368
|
width: object?.totalWidth.toString(),
|
|
@@ -448,7 +459,7 @@ export class KritzelEngine {
|
|
|
448
459
|
fill: 'transparent',
|
|
449
460
|
cursor: 'grab',
|
|
450
461
|
}, 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)))))));
|
|
451
|
-
})), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '
|
|
462
|
+
})), 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: {
|
|
452
463
|
position: 'fixed',
|
|
453
464
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
454
465
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -459,7 +470,7 @@ export class KritzelEngine {
|
|
|
459
470
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
460
471
|
}, this.core.store.selectionGroup?.objects);
|
|
461
472
|
this.hideContextMenu();
|
|
462
|
-
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '
|
|
473
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '5793c405666b73a93ba473edf9477653683ef786', core: this.core })));
|
|
463
474
|
}
|
|
464
475
|
static get is() { return "kritzel-engine"; }
|
|
465
476
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1472,7 +1483,7 @@ export class KritzelEngine {
|
|
|
1472
1483
|
"method": "handlePointerMove",
|
|
1473
1484
|
"target": undefined,
|
|
1474
1485
|
"capture": false,
|
|
1475
|
-
"passive":
|
|
1486
|
+
"passive": false
|
|
1476
1487
|
}, {
|
|
1477
1488
|
"name": "pointerup",
|
|
1478
1489
|
"method": "handlePointerUp",
|