kritzel-stencil 0.0.148 → 0.0.150
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 +15 -11
- 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 +16 -12
- 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-D6oQxYXs.js} +18 -14
- package/dist/components/p-D6oQxYXs.js.map +1 -0
- package/dist/esm/kritzel-color_22.entry.js +15 -11
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/{p-1d8aaa54.entry.js → p-7d732b05.entry.js} +2 -2
- package/dist/stencil/p-7d732b05.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +1 -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
|
@@ -19408,19 +19408,21 @@ const KritzelEngine = class {
|
|
|
19408
19408
|
this.viewport.handlePointerDown(ev);
|
|
19409
19409
|
this.core.store.state?.activeTool?.handlePointerDown(ev);
|
|
19410
19410
|
}
|
|
19411
|
+
throttledPointerMoveMulti = lodashExports.throttle((ev) => {
|
|
19412
|
+
this.viewport.handlePointerMove(ev);
|
|
19413
|
+
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
19414
|
+
}, 16);
|
|
19411
19415
|
handlePointerMove(ev) {
|
|
19412
19416
|
if (this.core.store.isDisabled) {
|
|
19413
19417
|
return;
|
|
19414
19418
|
}
|
|
19415
19419
|
this.core.store.state.pointers.set(ev.pointerId, ev);
|
|
19416
|
-
|
|
19417
|
-
|
|
19418
|
-
|
|
19419
|
-
throttleTimeout = 0;
|
|
19420
|
-
throttledPointerMove = lodashExports.throttle((ev) => {
|
|
19420
|
+
if (this.core.store.state.pointers.size > 1) {
|
|
19421
|
+
this.throttledPointerMoveMulti(ev);
|
|
19422
|
+
}
|
|
19421
19423
|
this.viewport.handlePointerMove(ev);
|
|
19422
19424
|
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
19423
|
-
}
|
|
19425
|
+
}
|
|
19424
19426
|
handlePointerUp(ev) {
|
|
19425
19427
|
if (this.core.store.isDisabled) {
|
|
19426
19428
|
return;
|
|
@@ -19625,7 +19627,7 @@ const KritzelEngine = class {
|
|
|
19625
19627
|
this.core = new KritzelCore(this);
|
|
19626
19628
|
}
|
|
19627
19629
|
disconnectedCallback() {
|
|
19628
|
-
this.
|
|
19630
|
+
this.throttledPointerMoveMulti.cancel();
|
|
19629
19631
|
}
|
|
19630
19632
|
componentWillLoad() {
|
|
19631
19633
|
this.validateScaleMax(this.scaleMax);
|
|
@@ -19677,7 +19679,7 @@ const KritzelEngine = class {
|
|
|
19677
19679
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
19678
19680
|
const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
|
|
19679
19681
|
const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
|
|
19680
|
-
return (index.h(index.Host, { key: '
|
|
19682
|
+
return (index.h(index.Host, { key: '3e05ce246b599985a06e54e0d81a63b4765ff506' }, index.h("div", { key: '6169eb0566bb2965c7d1569492a62a1ef1d4b7ef', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '598db5c39099553997248086e392c168c583aca9' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '6d5de3390f2e32dbaa7fe52521b8fd9c0e8706de' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '6006c27d020aeea24170a09140e3bc5c2ea459cf' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'edfa3cb59d47df747dc9f003ce08345348ba586d' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '799f714d6e4b129f59be7cbc52f657e9b21f9879' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '4a8f545cf72fe496abf18a4907743ac6b46ef889' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '8e665e3c23424cb4e76b2d4354bb4472a5b3ddbe' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: 'c168b114e204b90dafaf8736a571171a748047c1' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'bee83601a571727a06235c674e7300cdc398dfac' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '0a2f5f36143c587ddc9b3ae487ce32196cd17232' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '515959ec3700ecdc9dd3ca9183bfacd854d173d2' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '5a9ca8f3ba91f10e9d6bec07c6005c1e43713d69' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: 'f5d1a5d59828be47be31e794b3b41c1e14c50780' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '1db8cdad160c131542fd787d104b4b979415ec4c' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'baae83187cfb4c21ea07c7834017df92a7340d5b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '6b248cb6fad7fb4dd5162fb2529dfec821a708fc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '0eae863f48c27867d0fa0f8c767b50c13be48271' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'a4ca58af5858725d4f1d0e00547e6e42365cb8fe' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '8f978714060623d3daa9454e04ef929b1f02b143' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '9b274d7785a9e4a36128c273bcee6b692d815a86' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '0c248bc24c164c4c52fb06b17347f107e3f0995f' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '21f3664f0978f308d88a976c47b875dd5bb08b95' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: 'e1161aa45ea02de914e01a93ec159447b5e17e8b' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), index.h("div", { key: '87249fcc3f23632739631b8fdbc64371694d6206', id: "origin", class: "origin", style: {
|
|
19681
19683
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
19682
19684
|
} }, this.core.store.state.objectsMap.allObjects()?.map(object => {
|
|
19683
19685
|
return (index.h("div", { key: object.id, style: {
|
|
@@ -19711,11 +19713,12 @@ const KritzelEngine = class {
|
|
|
19711
19713
|
width: object?.width.toString(),
|
|
19712
19714
|
position: 'absolute',
|
|
19713
19715
|
overflow: 'visible',
|
|
19714
|
-
}, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
19716
|
+
}, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": this.core.store.state.isScaling ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
19715
19717
|
width: '100%',
|
|
19716
19718
|
height: '100%',
|
|
19717
19719
|
userSelect: 'none',
|
|
19718
19720
|
pointerEvents: 'none',
|
|
19721
|
+
imageRendering: this.core.store.state.isScaling ? 'pixelated' : 'auto',
|
|
19719
19722
|
}, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
|
|
19720
19723
|
minWidth: object.initialWidth + 'px',
|
|
19721
19724
|
minHeight: object.initialHeight + 'px',
|
|
@@ -19726,6 +19729,7 @@ const KritzelEngine = class {
|
|
|
19726
19729
|
transform: `scale(${object.scaleFactor})`,
|
|
19727
19730
|
backgroundColor: object.backgroundColor,
|
|
19728
19731
|
overflow: 'visible',
|
|
19732
|
+
textRendering: this.core.store.state.isScaling ? 'optimizeSpeed' : 'auto',
|
|
19729
19733
|
} })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => object.mount(el), style: {
|
|
19730
19734
|
width: '100%',
|
|
19731
19735
|
height: '100%',
|
|
@@ -19783,7 +19787,7 @@ const KritzelEngine = class {
|
|
|
19783
19787
|
fill: 'transparent',
|
|
19784
19788
|
cursor: 'grab',
|
|
19785
19789
|
}, 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: '
|
|
19790
|
+
})), this.core.store.state.isContextMenuVisible && (index.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: {
|
|
19787
19791
|
position: 'fixed',
|
|
19788
19792
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
19789
19793
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -19794,7 +19798,7 @@ const KritzelEngine = class {
|
|
|
19794
19798
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
19795
19799
|
}, this.core.store.selectionGroup?.objects);
|
|
19796
19800
|
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: '
|
|
19801
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultTextTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'a7301f377705b93d2dd1b0f0e8da2bc40522b0a3', core: this.core })));
|
|
19798
19802
|
}
|
|
19799
19803
|
static get watchers() { return {
|
|
19800
19804
|
"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;
|
|
@@ -78,19 +78,21 @@ export class KritzelEngine {
|
|
|
78
78
|
this.viewport.handlePointerDown(ev);
|
|
79
79
|
this.core.store.state?.activeTool?.handlePointerDown(ev);
|
|
80
80
|
}
|
|
81
|
+
throttledPointerMoveMulti = throttle((ev) => {
|
|
82
|
+
this.viewport.handlePointerMove(ev);
|
|
83
|
+
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
84
|
+
}, 16);
|
|
81
85
|
handlePointerMove(ev) {
|
|
82
86
|
if (this.core.store.isDisabled) {
|
|
83
87
|
return;
|
|
84
88
|
}
|
|
85
89
|
this.core.store.state.pointers.set(ev.pointerId, ev);
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
throttleTimeout = 0;
|
|
90
|
-
throttledPointerMove = throttle((ev) => {
|
|
90
|
+
if (this.core.store.state.pointers.size > 1) {
|
|
91
|
+
this.throttledPointerMoveMulti(ev);
|
|
92
|
+
}
|
|
91
93
|
this.viewport.handlePointerMove(ev);
|
|
92
94
|
this.core.store.state?.activeTool?.handlePointerMove(ev);
|
|
93
|
-
}
|
|
95
|
+
}
|
|
94
96
|
handlePointerUp(ev) {
|
|
95
97
|
if (this.core.store.isDisabled) {
|
|
96
98
|
return;
|
|
@@ -290,7 +292,7 @@ export class KritzelEngine {
|
|
|
290
292
|
this.core = new KritzelCore(this);
|
|
291
293
|
}
|
|
292
294
|
disconnectedCallback() {
|
|
293
|
-
this.
|
|
295
|
+
this.throttledPointerMoveMulti.cancel();
|
|
294
296
|
}
|
|
295
297
|
componentWillLoad() {
|
|
296
298
|
this.validateScaleMax(this.scaleMax);
|
|
@@ -342,7 +344,7 @@ export class KritzelEngine {
|
|
|
342
344
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
343
345
|
const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
|
|
344
346
|
const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
|
|
345
|
-
return (h(Host, { key: '
|
|
347
|
+
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: {
|
|
346
348
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
347
349
|
} }, this.core.store.state.objectsMap.allObjects()?.map(object => {
|
|
348
350
|
return (h("div", { key: object.id, style: {
|
|
@@ -376,11 +378,12 @@ export class KritzelEngine {
|
|
|
376
378
|
width: object?.width.toString(),
|
|
377
379
|
position: 'absolute',
|
|
378
380
|
overflow: 'visible',
|
|
379
|
-
}, 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: {
|
|
381
|
+
}, 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: {
|
|
380
382
|
width: '100%',
|
|
381
383
|
height: '100%',
|
|
382
384
|
userSelect: 'none',
|
|
383
385
|
pointerEvents: 'none',
|
|
386
|
+
imageRendering: this.core.store.state.isScaling ? 'pixelated' : 'auto',
|
|
384
387
|
}, 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: {
|
|
385
388
|
minWidth: object.initialWidth + 'px',
|
|
386
389
|
minHeight: object.initialHeight + 'px',
|
|
@@ -391,6 +394,7 @@ export class KritzelEngine {
|
|
|
391
394
|
transform: `scale(${object.scaleFactor})`,
|
|
392
395
|
backgroundColor: object.backgroundColor,
|
|
393
396
|
overflow: 'visible',
|
|
397
|
+
textRendering: this.core.store.state.isScaling ? 'optimizeSpeed' : 'auto',
|
|
394
398
|
} })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
|
|
395
399
|
width: '100%',
|
|
396
400
|
height: '100%',
|
|
@@ -448,7 +452,7 @@ export class KritzelEngine {
|
|
|
448
452
|
fill: 'transparent',
|
|
449
453
|
cursor: 'grab',
|
|
450
454
|
}, 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: '
|
|
455
|
+
})), 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: {
|
|
452
456
|
position: 'fixed',
|
|
453
457
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
454
458
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -459,7 +463,7 @@ export class KritzelEngine {
|
|
|
459
463
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
460
464
|
}, this.core.store.selectionGroup?.objects);
|
|
461
465
|
this.hideContextMenu();
|
|
462
|
-
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '
|
|
466
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a7301f377705b93d2dd1b0f0e8da2bc40522b0a3', core: this.core })));
|
|
463
467
|
}
|
|
464
468
|
static get is() { return "kritzel-engine"; }
|
|
465
469
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1472,7 +1476,7 @@ export class KritzelEngine {
|
|
|
1472
1476
|
"method": "handlePointerMove",
|
|
1473
1477
|
"target": undefined,
|
|
1474
1478
|
"capture": false,
|
|
1475
|
-
"passive":
|
|
1479
|
+
"passive": false
|
|
1476
1480
|
}, {
|
|
1477
1481
|
"name": "pointerup",
|
|
1478
1482
|
"method": "handlePointerUp",
|