kritzel-stencil 0.0.161 → 0.0.162

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

@@ -14,7 +14,6 @@ import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engin
 import { KritzelCore } from "../../../classes/core/core.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 import { throttle } from "lodash";
-import { KritzelCursorHelper } from "../../../helpers/cursor.helper";
 export class KritzelEngine {
     host;
     workspace;
@@ -54,12 +53,7 @@ export class KritzelEngine {
     }
     cursorTarget;
     onCursorTargetChange(newValue) {
-        // Reset cursor on old target
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-        }
-        // Set new target (defaults to document.body)
-        this.cursorTargetElement = newValue || document.body;
+        this.core.cursorManager.setTargetElement(newValue || document.body);
     }
     isEngineReady;
     activeToolChange;
@@ -107,6 +101,8 @@ export class KritzelEngine {
         if (this.core.store.state.pointers.size > 1) {
             this.throttledPointerMoveMulti(ev);
         }
+        // Update cursor for handle hover states using elementsFromPoint
+        this.core.cursorManager.updateHoverState(ev);
         this.viewport.handlePointerMove(ev);
         this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
@@ -118,7 +114,7 @@ export class KritzelEngine {
         this.host.releasePointerCapture(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -131,7 +127,7 @@ export class KritzelEngine {
         this.core.store.state.pointers.delete(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -307,7 +303,6 @@ export class KritzelEngine {
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
-    cursorTargetElement = null;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -320,12 +315,7 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledWheel.cancel();
         this.throttledPointerMoveMulti.cancel();
-        // Reset cursor on target element
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-            this.cursorTargetElement.style.removeProperty('--kritzel-pointer-cursor');
-            this.cursorTargetElement = null;
-        }
+        this.core.cursorManager.cleanup();
     }
     componentWillLoad() {
         this.validateScaleMax(this.scaleMax);
@@ -335,10 +325,9 @@ export class KritzelEngine {
         this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
         this.keyHandler = new KritzelKeyHandler(this.core);
         this.viewport = new KritzelViewport(this.core, this.host);
-        // Set cursor target element (use prop value or default to document.body)
-        this.cursorTargetElement = this.cursorTarget || document.body;
-        // Set the pointer cursor CSS variable for child components to use
-        this.cursorTargetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        // Initialize cursor manager with target element and shadow root
+        this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
+        this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
         // Set sync configuration if provided
         if (this.syncConfig) {
             this.core.setSyncConfig(this.syncConfig);
@@ -380,20 +369,6 @@ export class KritzelEngine {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
-    updateCursor() {
-        const state = this.core.store.state;
-        const isPointerDown = this.core.store.isPointerDown;
-        const icon = state.cursor?.icon;
-        const iconActive = state.cursor?.iconActive ?? icon;
-        const rotation = state.cursor?.rotation;
-        const cursor = KritzelCursorHelper.getCursor({
-            iconName: isPointerDown ? iconActive : icon,
-            rotation: rotation,
-        });
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = cursor;
-        }
-    }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
@@ -410,17 +385,17 @@ export class KritzelEngine {
             depth: 100,
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        this.updateCursor();
-        return (h(Host, { key: '192c356c5476b2b3cf370b05efd5742776423200' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'fae1b053c1eda01726f6b583a8dd167bb1c34aa1', class: "debug-panel" }, h("div", { key: '0e0fab7c39c1c8116831cf7b228914b0c40fb338' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '770d284f5104919c5c6a36e653971d3662e9428b' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '4937256ccf074a0a2fffb9c8c32a8c6ba41d3fb4' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '447d95aed0dda6e212e7c67ff4bc0a2e574131fd' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '548a04b16f68873e5fc0a2767146b52e83b9f0f8' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '16a92abf89f1b438f14f311dd248ae82e1ac1982' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '92a2abc5a757c64d764f3e1ee525556eb6a88852' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '7677d4fd149ef2507626e50502d7c2b74fb294af' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '3120c7ff85fd9f8ef14fb313b9aae6f2fc817f75' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '100cd8a8c221d66046d9ff869b23809ca2568d12' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '2efec039f635eec81d172113d55284eb9002f339' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f1df2fbf86a1944831c26a23e8c0baadd5ba1c56' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '10098cd2ffd07200fc8a12941ffd91fc1fac4de8' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '75043ccdac3ef3b02dae17b758813132174c2034' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '59217b67d572cc60fc8381bcc930a952fea2faaa' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'c4a7d64031d3b430673adb6adcb7f525f7a47ddc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd62bef9cab424e77781a3d5639552b8122e92238' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'ab5dbbc947b335a1396a945328a5939d690d8cd0' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'fb2c19a0cdc070ecbf28e51b08112a73ffcf2817' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d5519541aeb9a6423524463a03d1626f5eaf6ca' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'f86b578263c68ac194d6b3d606a1cb31717b1792' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '52ed5379ef3e9a18cbabe14be8106055a8f71ede' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '6b97e5f6c90666283fb5cfed0cf0e3b7bc0fffe3' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '5f80b9d4121974ee1e8afe89925b6b38b840e90f' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8a280b4454677f5dc29e4a2a39fd4f7cfc8c26df' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '660dd95852906f5c049b9527b26ea0af3fa04274', id: "origin", class: "origin", style: {
+        this.core.cursorManager.applyCursor();
+        return (h(Host, { key: '4a7e8c72ad1f80c3c31aa37eff33e78634cb37d1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '3c8981ce6cafbc49f4f04189d27809c511bf45c4', class: "debug-panel" }, h("div", { key: '428d483a87b98cde24446a0a26ba790ec2a6358b' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '3ec597c219109c026f78e5018a885e88e51aa5c4' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '803c0d009b19fdc7c465ef14f3b5f278a954a912' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '8b1aef0ae845cdf4b93afe59d8c78c84dd181a2d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '137ead0c39a2fba55b4c4dde53fb09d0832439e1' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'b19f710385e4306620176551853eb2645b96ca7a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '943b55daada95aa37b759e45a15ffcfca76fba72' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'd001782dd4bc48c84c08477b26e5f3fce8df0b47' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'ed640d3905b39a995ba40a1cbf38f10a4aa1b400' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '154888aabbb56365aaf4584b0b991be848629e3e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'c0c39e988940baf20137de8a0eeda2c085da2810' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'abd5a79b27bc75e898877d33097597c057dc3f2b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9c49bf3246525c9a755bb293bec8a143ade97158' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '88ff8ab48af31bf036719f72a5a3726780ab9720' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9650075f855fcf91b7303d3ace14242075fc523d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '911acb1f90f9812d30dc0aebceb207aecf9b4248' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b65db638d3cefbd74e2d03b639ee5fe86a2a858b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c53ca259dadc656762733119b4086c1f82235a7e' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'ae2d7a8917af450eb3bfd8e171a87530f337c0c2' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '5633cd9901ec028e4f5433c84b07321932beea66' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '82232a8eec470562e5658dee9713c855e78ca6a3' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '5b6b04b323a21ef37ddb144721ea01dccc7aec8b' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '3287f804515cfa31eaa755332e2043fce4feb7a9' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a59fd4db60f6f05d419de39149ea10e482875d4' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'f91a8ea9dfc50e5f1ae89d66c7609a103e3263a4' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '40ba8fb5530243c18e0b0c3ad68dadb2cbc615a1', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
-                    zIndex: object.zIndex.toString(),
                     position: 'absolute',
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+                    zIndex: object.zIndex.toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -430,7 +405,7 @@ export class KritzelEngine {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "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: { overflow: 'visible' }, viewBox: object?.viewBox }, 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: object?.stroke, "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                     minHeight: '0',
                     minWidth: '0',
                     backgroundColor: object.backgroundColor,
@@ -439,18 +414,14 @@ export class KritzelEngine {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                    height: object?.height.toString(),
-                    width: object?.width.toString(),
-                    position: 'absolute',
-                    overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    display: KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || KritzelClassHelper.isInstanceOf(object, 'KritzelPath') ? 'none' : 'block'
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -467,7 +438,7 @@ export class KritzelEngine {
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
@@ -477,7 +448,8 @@ export class KritzelEngine {
                     borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
                     borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
                     borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
-                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, 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)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, 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), h("div", { style: { whiteSpace: 'nowrap' } }, "rotationDegrees: ", object.rotationDegrees)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    zIndex: (object.zIndex + 1).toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -487,7 +459,7 @@ export class KritzelEngine {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     overflow: 'visible',
                     pointerEvents: 'none',
-                } }, object.isSelected && (h("g", { class: "selection-borders", style: { pointerEvents: 'none' } }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                } }, this.core.displaySelectionGroupUI(object) && (h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-group-borders" }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
@@ -503,31 +475,31 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                } }))), object.isSelected && !this.isSelecting && (h("g", { class: "selection-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } })), !this.isSelecting && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                 } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
@@ -536,8 +508,103 @@ export class KritzelEngine {
                 } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '0da13416f8f2cf2f0eb6fcbb8eacb942dda0efb5', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+                } }))))), this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })), !this.isSelecting && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }))))))));
+        }), (() => {
+            const data = this.core.anchorManager.getAnchorLinesRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "anchor-lines", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9998',
+                    overflow: 'visible',
+                } }, data.startAnchorViz && (h("g", { class: "anchor-line-start" }, data.startAnchorViz.pathD ? (h("path", { d: data.startAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.startAnchorViz.edgeX, y1: data.startAnchorViz.edgeY, x2: data.startAnchorViz.centerX, y2: data.startAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))), data.endAnchorViz && (h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (h("path", { d: data.endAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.endAnchorViz.edgeX, y1: data.endAnchorViz.edgeY, x2: data.endAnchorViz.centerX, y2: data.endAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.endAnchorViz.centerX, cy: data.endAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } })))));
+        })(), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, h("g", null, data.snapLinePath ? (h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined && data.edgeY !== undefined && (h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '7e350c48da76c54a223f23ead9dea8018b0bc36c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -548,7 +615,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '609dd8438a2678eaa3ce0a73858d9236c9371f96', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '7923a3f6a92fa71911c971166171317b5bc421bf', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -880,7 +947,7 @@ export class KritzelEngine {
         return {
             "registerTool": {
                 "complexType": {
-                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig) => Promise<KritzelBaseTool>",
+                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig) => Promise<KritzelBaseTool>",
                     "parameters": [{
                             "name": "toolName",
                             "type": "string",
@@ -891,7 +958,7 @@ export class KritzelEngine {
                             "docs": ""
                         }, {
                             "name": "toolConfig",
-                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig",
+                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig",
                             "docs": ""
                         }],
                     "references": {
@@ -913,6 +980,11 @@ export class KritzelEngine {
                             "location": "import",
                             "path": "../../../interfaces/toolbar-control.interface",
                             "id": "src/interfaces/toolbar-control.interface.ts::KritzelBrushToolConfig"
+                        },
+                        "KritzelLineToolConfig": {
+                            "location": "import",
+                            "path": "../../../interfaces/toolbar-control.interface",
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelLineToolConfig"
                         }
                     },
                     "return": "Promise<KritzelBaseTool>"