kritzel-stencil 0.1.21 → 0.1.22
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/{default-line-tool.config-Bva9deYM.js → default-line-tool.config-DSutud0N.js} +22 -6
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js +39 -49
- package/dist/collection/classes/objects/text.class.js +19 -3
- package/dist/collection/classes/tools/text-tool.class.js +3 -3
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +20 -34
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +17 -13
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/p-B6WmB4Lk.js +1 -0
- package/dist/components/{p-CYX7RMRZ.js → p-BAVx6TLg.js} +1 -1
- package/dist/components/{p-Dmy0R-7y.js → p-BP6ggkYA.js} +1 -1
- package/dist/components/{p-BbHELXEC.js → p-CEHVU-Ri.js} +2 -2
- package/dist/components/{p-BsvZ2juR.js → p-DBUd8DTC.js} +1 -1
- package/dist/esm/{default-line-tool.config-DDIFE6oX.js → default-line-tool.config-_PqPRv7q.js} +22 -6
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-back-to-content_32.entry.js +39 -49
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-0472bdc3.entry.js +9 -0
- package/dist/stencil/p-_PqPRv7q.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +1 -0
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-DqtvAhfs.js +0 -1
- package/dist/stencil/p-3fc743ee.entry.js +0 -9
- package/dist/stencil/p-DDIFE6oX.js +0 -1
package/dist/cjs/{default-line-tool.config-Bva9deYM.js → default-line-tool.config-DSutud0N.js}
RENAMED
|
@@ -14969,7 +14969,7 @@ class KritzelText extends KritzelBaseObject {
|
|
|
14969
14969
|
focus(coords) {
|
|
14970
14970
|
if (this.editor) {
|
|
14971
14971
|
const doc = this.editor.state.doc;
|
|
14972
|
-
if (coords.x && coords.y) {
|
|
14972
|
+
if (coords.x && coords.y && !this.isEmpty) {
|
|
14973
14973
|
const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
|
|
14974
14974
|
if (pos) {
|
|
14975
14975
|
this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
|
|
@@ -15030,13 +15030,29 @@ class KritzelText extends KritzelBaseObject {
|
|
|
15030
15030
|
if (!this.isEditing) {
|
|
15031
15031
|
return;
|
|
15032
15032
|
}
|
|
15033
|
-
|
|
15033
|
+
// Only stop propagation if the engine is not tracking this pointer.
|
|
15034
|
+
// During text creation, the engine adds the pointer before the text element
|
|
15035
|
+
// is in the DOM. We must let move events propagate so the engine can
|
|
15036
|
+
// update its pointer state.
|
|
15037
|
+
if (!this._core.store.state.pointers.has(event.pointerId)) {
|
|
15038
|
+
event.stopPropagation();
|
|
15039
|
+
}
|
|
15034
15040
|
}
|
|
15035
15041
|
handlePointerUp(event) {
|
|
15036
15042
|
if (!this.isEditing) {
|
|
15037
15043
|
return;
|
|
15038
15044
|
}
|
|
15039
|
-
|
|
15045
|
+
// Only stop propagation if the engine is not tracking this pointer.
|
|
15046
|
+
// When a text is created during pointerdown, the engine adds the pointer
|
|
15047
|
+
// to its map before the text element exists in the DOM. By the time
|
|
15048
|
+
// pointerup fires, the text element may intercept the event (especially
|
|
15049
|
+
// on iOS where pointer capture may not redirect events in shadow DOM).
|
|
15050
|
+
// We must let the event propagate so the engine can clean up the pointer.
|
|
15051
|
+
// Without this, stale pointers accumulate and single-finger touches
|
|
15052
|
+
// get misinterpreted as two-finger zoom gestures.
|
|
15053
|
+
if (!this._core.store.state.pointers.has(event.pointerId)) {
|
|
15054
|
+
event.stopPropagation();
|
|
15055
|
+
}
|
|
15040
15056
|
}
|
|
15041
15057
|
copy() {
|
|
15042
15058
|
const copiedObject = super.copy();
|
|
@@ -17573,10 +17589,10 @@ class KritzelTextTool extends KritzelBaseTool {
|
|
|
17573
17589
|
}
|
|
17574
17590
|
}
|
|
17575
17591
|
handlePointerUp(event) {
|
|
17576
|
-
|
|
17577
|
-
|
|
17592
|
+
const activeText = this._core.store.activeText;
|
|
17593
|
+
if (activeText && activeText.isMounted && !activeText.editor?.hasFocus()) {
|
|
17594
|
+
activeText.focus({ x: event.clientX, y: event.clientY });
|
|
17578
17595
|
}
|
|
17579
|
-
this._core.store.activeText?.edit(event);
|
|
17580
17596
|
}
|
|
17581
17597
|
}
|
|
17582
17598
|
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-i21-qqbc.js');
|
|
4
|
-
var defaultLineTool_config = require('./default-line-tool.config-
|
|
4
|
+
var defaultLineTool_config = require('./default-line-tool.config-DSutud0N.js');
|
|
5
5
|
|
|
6
6
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
7
7
|
|
|
@@ -632,14 +632,23 @@ const KritzelControls = class {
|
|
|
632
632
|
componentDidLoad() {
|
|
633
633
|
this.updateScrollIndicators();
|
|
634
634
|
}
|
|
635
|
+
componentDidRender() {
|
|
636
|
+
this.updateScrollIndicators();
|
|
637
|
+
}
|
|
635
638
|
updateScrollIndicators() {
|
|
636
639
|
if (!this.toolsScrollRef)
|
|
637
640
|
return;
|
|
638
641
|
const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
|
|
639
642
|
const threshold = 2; // Small threshold to account for rounding
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
+
const canScrollLeft = scrollLeft > threshold;
|
|
644
|
+
const canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
|
|
645
|
+
const needsScrolling = scrollWidth > clientWidth;
|
|
646
|
+
if (this.canScrollLeft !== canScrollLeft)
|
|
647
|
+
this.canScrollLeft = canScrollLeft;
|
|
648
|
+
if (this.canScrollRight !== canScrollRight)
|
|
649
|
+
this.canScrollRight = canScrollRight;
|
|
650
|
+
if (this.needsScrolling !== needsScrolling)
|
|
651
|
+
this.needsScrolling = needsScrolling;
|
|
643
652
|
}
|
|
644
653
|
handleToolsScroll = () => {
|
|
645
654
|
this.updateScrollIndicators();
|
|
@@ -739,18 +748,13 @@ const KritzelControls = class {
|
|
|
739
748
|
// Separate tool controls from config control
|
|
740
749
|
const toolControls = this.controls.filter(c => c.type === 'tool');
|
|
741
750
|
const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
|
|
742
|
-
return (index.h(index.Host, { key: '
|
|
751
|
+
return (index.h(index.Host, { key: '7e6687a1c3aa5da1a3f70f93fbc31ff27071a5d8', class: {
|
|
743
752
|
mobile: this.isTouchDevice,
|
|
744
|
-
} }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '
|
|
753
|
+
} }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'ba600940a33609b8150aacf5a63a781c06d9d9fe', style: {
|
|
745
754
|
position: 'absolute',
|
|
746
755
|
bottom: '56px',
|
|
747
756
|
left: '12px',
|
|
748
|
-
}, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '
|
|
749
|
-
this.toolsScrollRef = el;
|
|
750
|
-
// Update indicators when ref is set
|
|
751
|
-
if (el)
|
|
752
|
-
this.updateScrollIndicators();
|
|
753
|
-
}, onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
757
|
+
}, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '6c31fb4ccf4c1022426847d0b3684f6dd54c6cbf', class: "kritzel-controls" }, index.h("div", { key: 'aad8c170278b0d46bef5a9e94546dec502b179db', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '7652a3ed5536f845899481ef98540ed6c09a31d5', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
754
758
|
// Check if this control has sub-options (split-button)
|
|
755
759
|
if (control.subOptions?.length) {
|
|
756
760
|
const selectedSubOption = this.getSelectedSubOption(control);
|
|
@@ -775,10 +779,10 @@ const KritzelControls = class {
|
|
|
775
779
|
'kritzel-control': true,
|
|
776
780
|
'selected': this.activeControl?.name === control?.name,
|
|
777
781
|
}, key: control.name, onClick: _event => this.handleControlClick?.(control) }, index.h("kritzel-icon", { name: control.icon })));
|
|
778
|
-
})), index.h("div", { key: '
|
|
782
|
+
})), index.h("div", { key: 'f1dd9f702185a32004fecf48798f5767e20c99e7', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
|
|
779
783
|
'kritzel-config-container': true,
|
|
780
784
|
'visible': hasConfigUI,
|
|
781
|
-
}, key: configControl.name }, index.h("div", { key: '
|
|
785
|
+
}, key: configControl.name }, index.h("div", { key: 'ad44b915f2ebe292fa8f17de771e637b22089396', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '9e750ed1f0e37f4a07bb99446effdc1fe7d2d7ce', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, index.h("kritzel-tool-config", { key: '4f87a184a3b395368c94752e5fedcf66164f0baa', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '37cb99e360419fe35820e9de8ac042f44b71e496', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
|
|
782
786
|
if (event.key === 'Enter') {
|
|
783
787
|
this.handleConfigClick?.(event);
|
|
784
788
|
}
|
|
@@ -22033,7 +22037,9 @@ const KritzelEngine = class {
|
|
|
22033
22037
|
return;
|
|
22034
22038
|
}
|
|
22035
22039
|
this.core.store.state.pointers.delete(ev.pointerId);
|
|
22036
|
-
this.host.
|
|
22040
|
+
if (this.host.hasPointerCapture(ev.pointerId)) {
|
|
22041
|
+
this.host.releasePointerCapture(ev.pointerId);
|
|
22042
|
+
}
|
|
22037
22043
|
// Reset cursor to default when all pointers are released
|
|
22038
22044
|
if (this.core.store.state.pointers.size === 0) {
|
|
22039
22045
|
this.core.cursorManager.resetToDefault();
|
|
@@ -22045,7 +22051,9 @@ const KritzelEngine = class {
|
|
|
22045
22051
|
if (this.core.store.isDisabled) {
|
|
22046
22052
|
return;
|
|
22047
22053
|
}
|
|
22048
|
-
this.host.
|
|
22054
|
+
if (this.host.hasPointerCapture(ev.pointerId)) {
|
|
22055
|
+
this.host.releasePointerCapture(ev.pointerId);
|
|
22056
|
+
}
|
|
22049
22057
|
this.core.store.state.pointers.delete(ev.pointerId);
|
|
22050
22058
|
// Reset cursor to default when all pointers are released
|
|
22051
22059
|
if (this.core.store.state.pointers.size === 0) {
|
|
@@ -22423,7 +22431,7 @@ const KritzelEngine = class {
|
|
|
22423
22431
|
if (this.core.store.totalObjectCount > 0) {
|
|
22424
22432
|
this.objectsInViewportChange.emit(visibleObjects);
|
|
22425
22433
|
}
|
|
22426
|
-
return (index.h(index.Host, { key: '
|
|
22434
|
+
return (index.h(index.Host, { key: '6cc974d4e3fdcfe1b185a014fa9eb6b1243dde91' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: '8f8ac08f2d643b664e2b39fbaf50e0c474c5255d', class: "debug-panel" }, index.h("div", { key: '79ad4f3db958d8b17b2efdb3a1a6ab24d81bb436' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '0cdaa6abeebc865eec1c3026d5fd38e00bd388a7' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '125ca4bb69ca2fcc647bd55e9cb8c4072fbaa600' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '02aee9b8359b9cdefa2f54afc26d328dab984ea3' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '8398e28a5c70318dace386182633088e5e3267d5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '0e17a7fbf96acbe1cbf2769b0fa853eaf7fb6f3b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: 'd214e66618d2c38ca94154e7b06f681d815ffadc' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '35695f7f82605bf6ba0fd512f814a7da723f623c' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '6935c9e5cedb8f7bd6d81a5d02b383fbb0e4d3a2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '6a7490a07ca3019157d6a4b10b9164d3a504c4c0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: 'ba70d5d01cad9e0fb6e80a4955e3361723af3531' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: 'be3a408762c8bada64224c4da92baf987ae62f6d' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '9cf44848dbcb7e8b1a40618db1ee6cf019e01720' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: 'b53633b5c099b338089294c897cfbc32973d360d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '0cab012a88532c69ba0aeb1daa7646e91c4f029d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '1c47bfd56352b70a8eafb771470d9912240e9885' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '1147a866a58f3d50c8751fc02f6614e899b13bc0' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'a308df3601fd5ba49741f2efbc3d262059daed2d' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: 'af5ceafa9bb39c2e2085815c691198f7a0b48017' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '8abffd4f1e3e7b174ee5e5e9070fc0ca0703d1aa' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'e127318f52e25d65b323d3325b02a0125864c3be' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: 'b8f21b1a1bd674f7403e3096e7cb52e629b2df89' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '892abdc68df061495f88ceea2037766b537f82ab' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '04f08e11cb67cedf31900d01803960caaa0a5a0b' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '6a6efb9f05cb70eaff83cea1a22e1151a08e2ec9' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: 'c9e2392f43cf54b57f0fb49a361d47a2c4156ca3', id: "origin", class: "origin", style: {
|
|
22427
22435
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
22428
22436
|
} }, visibleObjects?.map(object => {
|
|
22429
22437
|
return (index.h("div", { key: object.id, id: object.id, class: "object", style: {
|
|
@@ -22432,7 +22440,7 @@ const KritzelEngine = class {
|
|
|
22432
22440
|
position: 'absolute',
|
|
22433
22441
|
zIndex: object.zIndex.toString(),
|
|
22434
22442
|
pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
|
|
22435
|
-
} }, defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
|
|
22443
|
+
} }, defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
|
|
22436
22444
|
height: object?.totalHeight + 'px',
|
|
22437
22445
|
width: object?.totalWidth + 'px',
|
|
22438
22446
|
left: '0',
|
|
@@ -22442,7 +22450,8 @@ const KritzelEngine = class {
|
|
|
22442
22450
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
22443
22451
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
22444
22452
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
22445
|
-
|
|
22453
|
+
overflow: 'visible',
|
|
22454
|
+
}, 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", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
|
|
22446
22455
|
height: object?.totalHeight + 'px',
|
|
22447
22456
|
width: object?.totalWidth + 'px',
|
|
22448
22457
|
left: '0',
|
|
@@ -22452,7 +22461,8 @@ const KritzelEngine = class {
|
|
|
22452
22461
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
22453
22462
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
22454
22463
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
22455
|
-
|
|
22464
|
+
overflow: 'visible',
|
|
22465
|
+
}, 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("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
22456
22466
|
position: 'absolute',
|
|
22457
22467
|
left: '0',
|
|
22458
22468
|
top: '0',
|
|
@@ -22468,13 +22478,9 @@ const KritzelEngine = class {
|
|
|
22468
22478
|
borderStyle: 'solid',
|
|
22469
22479
|
padding: object.padding + 'px',
|
|
22470
22480
|
overflow: 'visible',
|
|
22471
|
-
} }, index.h("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
22472
|
-
width: '100%',
|
|
22473
|
-
height: '100%',
|
|
22474
22481
|
userSelect: 'none',
|
|
22475
|
-
pointerEvents: 'none',
|
|
22476
22482
|
imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
|
|
22477
|
-
}, draggable: false, onDragStart: e => e.preventDefault() }))
|
|
22483
|
+
}, draggable: false, onDragStart: e => e.preventDefault() })), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => object.mount(el), style: {
|
|
22478
22484
|
position: 'absolute',
|
|
22479
22485
|
left: '0',
|
|
22480
22486
|
top: '0',
|
|
@@ -22489,14 +22495,9 @@ const KritzelEngine = class {
|
|
|
22489
22495
|
borderWidth: object.borderWidth + 'px',
|
|
22490
22496
|
borderStyle: 'solid',
|
|
22491
22497
|
padding: object.padding + 'px',
|
|
22492
|
-
overflow: 'visible',
|
|
22493
|
-
} }, index.h("div", { ref: el => object.mount(el), style: {
|
|
22494
|
-
width: '100%',
|
|
22495
|
-
height: '100%',
|
|
22496
|
-
pointerEvents: 'auto',
|
|
22497
22498
|
overflow: 'hidden',
|
|
22498
22499
|
display: 'block',
|
|
22499
|
-
} }))
|
|
22500
|
+
} })), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => object.mount(el), style: {
|
|
22500
22501
|
position: 'absolute',
|
|
22501
22502
|
left: '0',
|
|
22502
22503
|
top: '0',
|
|
@@ -22506,10 +22507,7 @@ const KritzelEngine = class {
|
|
|
22506
22507
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
22507
22508
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
22508
22509
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
22509
|
-
} }, index.h("div", { ref: el => object.mount(el), style: {
|
|
22510
|
-
width: '100%',
|
|
22511
|
-
height: '100%',
|
|
22512
|
-
} }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { style: {
|
|
22510
|
+
} })), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { ref: el => object.mount(el), style: {
|
|
22513
22511
|
position: 'absolute',
|
|
22514
22512
|
left: '0',
|
|
22515
22513
|
top: '0',
|
|
@@ -22523,10 +22521,7 @@ const KritzelEngine = class {
|
|
|
22523
22521
|
borderColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
|
|
22524
22522
|
borderWidth: object.borderWidth + 'px',
|
|
22525
22523
|
borderStyle: 'solid',
|
|
22526
|
-
} }, index.h("div", {
|
|
22527
|
-
width: '100%',
|
|
22528
|
-
height: '100%',
|
|
22529
|
-
} }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { style: {
|
|
22524
|
+
} })), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { style: {
|
|
22530
22525
|
position: 'absolute',
|
|
22531
22526
|
left: '0',
|
|
22532
22527
|
top: '0',
|
|
@@ -22546,8 +22541,7 @@ const KritzelEngine = class {
|
|
|
22546
22541
|
transform: `scale(${object.scaleFactor})`,
|
|
22547
22542
|
backgroundColor: defaultLineTool_config.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
|
|
22548
22543
|
overflow: 'visible',
|
|
22549
|
-
|
|
22550
|
-
} }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { style: {
|
|
22544
|
+
} }))), defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
|
|
22551
22545
|
position: 'absolute',
|
|
22552
22546
|
left: '0',
|
|
22553
22547
|
top: '0',
|
|
@@ -22557,10 +22551,6 @@ const KritzelEngine = class {
|
|
|
22557
22551
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
22558
22552
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
22559
22553
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
22560
|
-
} }, index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
|
|
22561
|
-
width: '100%',
|
|
22562
|
-
height: '100%',
|
|
22563
|
-
position: 'relative',
|
|
22564
22554
|
overflow: 'visible',
|
|
22565
22555
|
} }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
|
|
22566
22556
|
position: 'absolute',
|
|
@@ -22582,7 +22572,7 @@ const KritzelEngine = class {
|
|
|
22582
22572
|
textAlign: 'center',
|
|
22583
22573
|
overflow: 'hidden',
|
|
22584
22574
|
pointerEvents: object.isEditing ? 'auto' : 'none',
|
|
22585
|
-
} })))
|
|
22575
|
+
} }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (index.h("div", { style: {
|
|
22586
22576
|
pointerEvents: 'none',
|
|
22587
22577
|
position: 'absolute',
|
|
22588
22578
|
left: `${object.totalWidth}px`,
|
|
@@ -22769,7 +22759,7 @@ const KritzelEngine = class {
|
|
|
22769
22759
|
stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
|
|
22770
22760
|
strokeWidth: data.indicatorStrokeWidth,
|
|
22771
22761
|
} }))));
|
|
22772
|
-
})()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '
|
|
22762
|
+
})()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '307012661cd1021e7e3c3db48f1671700f5de91b', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
|
|
22773
22763
|
position: 'fixed',
|
|
22774
22764
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
22775
22765
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -22780,7 +22770,7 @@ const KritzelEngine = class {
|
|
|
22780
22770
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
22781
22771
|
}, this.core.store.selectionGroup?.objects);
|
|
22782
22772
|
this.hideContextMenu();
|
|
22783
|
-
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '
|
|
22773
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'bd48d2a8e7c83e2c5d80c92548b00720650391ab', core: this.core })));
|
|
22784
22774
|
}
|
|
22785
22775
|
static get watchers() { return {
|
|
22786
22776
|
"workspace": [{
|
|
@@ -23791,7 +23781,7 @@ const KritzelPortal = class {
|
|
|
23791
23781
|
* This file is auto-generated by the version bump scripts.
|
|
23792
23782
|
* Do not modify manually.
|
|
23793
23783
|
*/
|
|
23794
|
-
const KRITZEL_VERSION = '0.1.
|
|
23784
|
+
const KRITZEL_VERSION = '0.1.22';
|
|
23795
23785
|
|
|
23796
23786
|
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}`;
|
|
23797
23787
|
|
|
@@ -169,7 +169,7 @@ export class KritzelText extends KritzelBaseObject {
|
|
|
169
169
|
focus(coords) {
|
|
170
170
|
if (this.editor) {
|
|
171
171
|
const doc = this.editor.state.doc;
|
|
172
|
-
if (coords.x && coords.y) {
|
|
172
|
+
if (coords.x && coords.y && !this.isEmpty) {
|
|
173
173
|
const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
|
|
174
174
|
if (pos) {
|
|
175
175
|
this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
|
|
@@ -230,13 +230,29 @@ export class KritzelText extends KritzelBaseObject {
|
|
|
230
230
|
if (!this.isEditing) {
|
|
231
231
|
return;
|
|
232
232
|
}
|
|
233
|
-
|
|
233
|
+
// Only stop propagation if the engine is not tracking this pointer.
|
|
234
|
+
// During text creation, the engine adds the pointer before the text element
|
|
235
|
+
// is in the DOM. We must let move events propagate so the engine can
|
|
236
|
+
// update its pointer state.
|
|
237
|
+
if (!this._core.store.state.pointers.has(event.pointerId)) {
|
|
238
|
+
event.stopPropagation();
|
|
239
|
+
}
|
|
234
240
|
}
|
|
235
241
|
handlePointerUp(event) {
|
|
236
242
|
if (!this.isEditing) {
|
|
237
243
|
return;
|
|
238
244
|
}
|
|
239
|
-
|
|
245
|
+
// Only stop propagation if the engine is not tracking this pointer.
|
|
246
|
+
// When a text is created during pointerdown, the engine adds the pointer
|
|
247
|
+
// to its map before the text element exists in the DOM. By the time
|
|
248
|
+
// pointerup fires, the text element may intercept the event (especially
|
|
249
|
+
// on iOS where pointer capture may not redirect events in shadow DOM).
|
|
250
|
+
// We must let the event propagate so the engine can clean up the pointer.
|
|
251
|
+
// Without this, stale pointers accumulate and single-finger touches
|
|
252
|
+
// get misinterpreted as two-finger zoom gestures.
|
|
253
|
+
if (!this._core.store.state.pointers.has(event.pointerId)) {
|
|
254
|
+
event.stopPropagation();
|
|
255
|
+
}
|
|
240
256
|
}
|
|
241
257
|
copy() {
|
|
242
258
|
const copiedObject = super.copy();
|
|
@@ -91,9 +91,9 @@ export class KritzelTextTool extends KritzelBaseTool {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
handlePointerUp(event) {
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
const activeText = this._core.store.activeText;
|
|
95
|
+
if (activeText && activeText.isMounted && !activeText.editor?.hasFocus()) {
|
|
96
|
+
activeText.focus({ x: event.clientX, y: event.clientY });
|
|
96
97
|
}
|
|
97
|
-
this._core.store.activeText?.edit(event);
|
|
98
98
|
}
|
|
99
99
|
}
|
|
@@ -126,7 +126,9 @@ export class KritzelEngine {
|
|
|
126
126
|
return;
|
|
127
127
|
}
|
|
128
128
|
this.core.store.state.pointers.delete(ev.pointerId);
|
|
129
|
-
this.host.
|
|
129
|
+
if (this.host.hasPointerCapture(ev.pointerId)) {
|
|
130
|
+
this.host.releasePointerCapture(ev.pointerId);
|
|
131
|
+
}
|
|
130
132
|
// Reset cursor to default when all pointers are released
|
|
131
133
|
if (this.core.store.state.pointers.size === 0) {
|
|
132
134
|
this.core.cursorManager.resetToDefault();
|
|
@@ -138,7 +140,9 @@ export class KritzelEngine {
|
|
|
138
140
|
if (this.core.store.isDisabled) {
|
|
139
141
|
return;
|
|
140
142
|
}
|
|
141
|
-
this.host.
|
|
143
|
+
if (this.host.hasPointerCapture(ev.pointerId)) {
|
|
144
|
+
this.host.releasePointerCapture(ev.pointerId);
|
|
145
|
+
}
|
|
142
146
|
this.core.store.state.pointers.delete(ev.pointerId);
|
|
143
147
|
// Reset cursor to default when all pointers are released
|
|
144
148
|
if (this.core.store.state.pointers.size === 0) {
|
|
@@ -507,7 +511,7 @@ export class KritzelEngine {
|
|
|
507
511
|
if (this.core.store.totalObjectCount > 0) {
|
|
508
512
|
this.objectsInViewportChange.emit(visibleObjects);
|
|
509
513
|
}
|
|
510
|
-
return (h(Host, { key: '
|
|
514
|
+
return (h(Host, { key: '6cc974d4e3fdcfe1b185a014fa9eb6b1243dde91' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '8f8ac08f2d643b664e2b39fbaf50e0c474c5255d', class: "debug-panel" }, h("div", { key: '79ad4f3db958d8b17b2efdb3a1a6ab24d81bb436' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '0cdaa6abeebc865eec1c3026d5fd38e00bd388a7' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '125ca4bb69ca2fcc647bd55e9cb8c4072fbaa600' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '02aee9b8359b9cdefa2f54afc26d328dab984ea3' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '8398e28a5c70318dace386182633088e5e3267d5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '0e17a7fbf96acbe1cbf2769b0fa853eaf7fb6f3b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'd214e66618d2c38ca94154e7b06f681d815ffadc' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '35695f7f82605bf6ba0fd512f814a7da723f623c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '6935c9e5cedb8f7bd6d81a5d02b383fbb0e4d3a2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '6a7490a07ca3019157d6a4b10b9164d3a504c4c0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'ba70d5d01cad9e0fb6e80a4955e3361723af3531' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'be3a408762c8bada64224c4da92baf987ae62f6d' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9cf44848dbcb7e8b1a40618db1ee6cf019e01720' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'b53633b5c099b338089294c897cfbc32973d360d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '0cab012a88532c69ba0aeb1daa7646e91c4f029d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1c47bfd56352b70a8eafb771470d9912240e9885' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '1147a866a58f3d50c8751fc02f6614e899b13bc0' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a308df3601fd5ba49741f2efbc3d262059daed2d' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'af5ceafa9bb39c2e2085815c691198f7a0b48017' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '8abffd4f1e3e7b174ee5e5e9070fc0ca0703d1aa' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e127318f52e25d65b323d3325b02a0125864c3be' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'b8f21b1a1bd674f7403e3096e7cb52e629b2df89' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '892abdc68df061495f88ceea2037766b537f82ab' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '04f08e11cb67cedf31900d01803960caaa0a5a0b' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '6a6efb9f05cb70eaff83cea1a22e1151a08e2ec9' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'c9e2392f43cf54b57f0fb49a361d47a2c4156ca3', id: "origin", class: "origin", style: {
|
|
511
515
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
512
516
|
} }, visibleObjects?.map(object => {
|
|
513
517
|
return (h("div", { key: object.id, id: object.id, class: "object", style: {
|
|
@@ -516,7 +520,7 @@ export class KritzelEngine {
|
|
|
516
520
|
position: 'absolute',
|
|
517
521
|
zIndex: object.zIndex.toString(),
|
|
518
522
|
pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
|
|
519
|
-
} }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
|
|
523
|
+
} }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
|
|
520
524
|
height: object?.totalHeight + 'px',
|
|
521
525
|
width: object?.totalWidth + 'px',
|
|
522
526
|
left: '0',
|
|
@@ -526,7 +530,8 @@ export class KritzelEngine {
|
|
|
526
530
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
527
531
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
528
532
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
529
|
-
|
|
533
|
+
overflow: 'visible',
|
|
534
|
+
}, 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", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
|
|
530
535
|
height: object?.totalHeight + 'px',
|
|
531
536
|
width: object?.totalWidth + 'px',
|
|
532
537
|
left: '0',
|
|
@@ -536,7 +541,8 @@ export class KritzelEngine {
|
|
|
536
541
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
537
542
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
538
543
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
539
|
-
|
|
544
|
+
overflow: 'visible',
|
|
545
|
+
}, 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("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
540
546
|
position: 'absolute',
|
|
541
547
|
left: '0',
|
|
542
548
|
top: '0',
|
|
@@ -552,13 +558,9 @@ export class KritzelEngine {
|
|
|
552
558
|
borderStyle: 'solid',
|
|
553
559
|
padding: object.padding + 'px',
|
|
554
560
|
overflow: 'visible',
|
|
555
|
-
} }, h("img", { ref: el => object.mount(el), src: object.src, style: {
|
|
556
|
-
width: '100%',
|
|
557
|
-
height: '100%',
|
|
558
561
|
userSelect: 'none',
|
|
559
|
-
pointerEvents: 'none',
|
|
560
562
|
imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
|
|
561
|
-
}, draggable: false, onDragStart: e => e.preventDefault() }))
|
|
563
|
+
}, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
|
|
562
564
|
position: 'absolute',
|
|
563
565
|
left: '0',
|
|
564
566
|
top: '0',
|
|
@@ -573,14 +575,9 @@ export class KritzelEngine {
|
|
|
573
575
|
borderWidth: object.borderWidth + 'px',
|
|
574
576
|
borderStyle: 'solid',
|
|
575
577
|
padding: object.padding + 'px',
|
|
576
|
-
overflow: 'visible',
|
|
577
|
-
} }, h("div", { ref: el => object.mount(el), style: {
|
|
578
|
-
width: '100%',
|
|
579
|
-
height: '100%',
|
|
580
|
-
pointerEvents: 'auto',
|
|
581
578
|
overflow: 'hidden',
|
|
582
579
|
display: 'block',
|
|
583
|
-
} }))
|
|
580
|
+
} })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
|
|
584
581
|
position: 'absolute',
|
|
585
582
|
left: '0',
|
|
586
583
|
top: '0',
|
|
@@ -590,10 +587,7 @@ export class KritzelEngine {
|
|
|
590
587
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
591
588
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
592
589
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
593
|
-
} }, h("div", { ref: el => object.mount(el), style: {
|
|
594
|
-
width: '100%',
|
|
595
|
-
height: '100%',
|
|
596
|
-
} }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
|
|
590
|
+
} })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
|
|
597
591
|
position: 'absolute',
|
|
598
592
|
left: '0',
|
|
599
593
|
top: '0',
|
|
@@ -607,10 +601,7 @@ export class KritzelEngine {
|
|
|
607
601
|
borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
|
|
608
602
|
borderWidth: object.borderWidth + 'px',
|
|
609
603
|
borderStyle: 'solid',
|
|
610
|
-
} }, h("div", {
|
|
611
|
-
width: '100%',
|
|
612
|
-
height: '100%',
|
|
613
|
-
} }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
|
|
604
|
+
} })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
|
|
614
605
|
position: 'absolute',
|
|
615
606
|
left: '0',
|
|
616
607
|
top: '0',
|
|
@@ -630,8 +621,7 @@ export class KritzelEngine {
|
|
|
630
621
|
transform: `scale(${object.scaleFactor})`,
|
|
631
622
|
backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
|
|
632
623
|
overflow: 'visible',
|
|
633
|
-
|
|
634
|
-
} }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { style: {
|
|
624
|
+
} }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
|
|
635
625
|
position: 'absolute',
|
|
636
626
|
left: '0',
|
|
637
627
|
top: '0',
|
|
@@ -641,10 +631,6 @@ export class KritzelEngine {
|
|
|
641
631
|
transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
|
|
642
632
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
643
633
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
644
|
-
} }, h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
|
|
645
|
-
width: '100%',
|
|
646
|
-
height: '100%',
|
|
647
|
-
position: 'relative',
|
|
648
634
|
overflow: 'visible',
|
|
649
635
|
} }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
|
|
650
636
|
position: 'absolute',
|
|
@@ -666,7 +652,7 @@ export class KritzelEngine {
|
|
|
666
652
|
textAlign: 'center',
|
|
667
653
|
overflow: 'hidden',
|
|
668
654
|
pointerEvents: object.isEditing ? 'auto' : 'none',
|
|
669
|
-
} })))
|
|
655
|
+
} }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
|
|
670
656
|
pointerEvents: 'none',
|
|
671
657
|
position: 'absolute',
|
|
672
658
|
left: `${object.totalWidth}px`,
|
|
@@ -853,7 +839,7 @@ export class KritzelEngine {
|
|
|
853
839
|
stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
|
|
854
840
|
strokeWidth: data.indicatorStrokeWidth,
|
|
855
841
|
} }))));
|
|
856
|
-
})()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '
|
|
842
|
+
})()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '307012661cd1021e7e3c3db48f1671700f5de91b', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
|
|
857
843
|
position: 'fixed',
|
|
858
844
|
left: `${this.core.store.state.contextMenuX}px`,
|
|
859
845
|
top: `${this.core.store.state.contextMenuY}px`,
|
|
@@ -864,7 +850,7 @@ export class KritzelEngine {
|
|
|
864
850
|
y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
|
|
865
851
|
}, this.core.store.selectionGroup?.objects);
|
|
866
852
|
this.hideContextMenu();
|
|
867
|
-
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '
|
|
853
|
+
}, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bd48d2a8e7c83e2c5d80c92548b00720650391ab', core: this.core })));
|
|
868
854
|
}
|
|
869
855
|
static get is() { return "kritzel-engine"; }
|
|
870
856
|
static get encapsulation() { return "shadow"; }
|