kritzel-stencil 0.0.160 → 0.0.162

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

@@ -46,20 +46,6 @@ p, h1, h2, h3, h4, h5, h6, blockquote, pre {
   overflow: visible;
 }
 
-.resize-handle-overlay.top-left,
-.resize-handle-overlay.bottom-right {
-  cursor: nwse-resize;
-}
-
-.resize-handle-overlay.top-right,
-.resize-handle-overlay.bottom-left {
-  cursor: nesw-resize;
-}
-
-.rotation-handle-overlay {
-  cursor: grab;
-}
-
 .PlaygroundEditorTheme__quote {
   margin: 0;
   margin-left: 20px;

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

@@ -51,6 +51,10 @@ export class KritzelEngine {
             this.core.store.state.scaleMin = newValue;
         }
     }
+    cursorTarget;
+    onCursorTargetChange(newValue) {
+        this.core.cursorManager.setTargetElement(newValue || document.body);
+    }
     isEngineReady;
     activeToolChange;
     workspacesChange;
@@ -91,10 +95,14 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
-        this.core.store.state.pointers.set(ev.pointerId, ev);
+        if (this.core.store.state.pointers.has(ev.pointerId)) {
+            this.core.store.state.pointers.set(ev.pointerId, ev);
+        }
         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);
     }
@@ -104,6 +112,10 @@ export class KritzelEngine {
         }
         this.core.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
+        // Reset cursor to default when all pointers are released
+        if (this.core.store.state.pointers.size === 0) {
+            this.core.cursorManager.resetToDefault();
+        }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
@@ -113,6 +125,10 @@ export class KritzelEngine {
         }
         this.host.releasePointerCapture(ev.pointerId);
         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.cursorManager.resetToDefault();
+        }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
@@ -299,6 +315,7 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledWheel.cancel();
         this.throttledPointerMoveMulti.cancel();
+        this.core.cursorManager.cleanup();
     }
     componentWillLoad() {
         this.validateScaleMax(this.scaleMax);
@@ -308,6 +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);
+        // 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);
@@ -365,16 +385,17 @@ export class KritzelEngine {
             depth: 100,
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        return (h(Host, { key: '1a76bcddde5f1aa68dd20a73af61f6f89ab08c78' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '9be109e44187d7d2072e115533b3c58a36351993', class: "debug-panel" }, h("div", { key: 'de16ca51bc04f851ef65a9a937829916041abd1c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '299b05d4091d6c883ee637207e242e3fdb93f19c' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '9ef3f04b7fcb42ec87d8b7e6b9f5e914918fd780' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'cd920e869be5112c7dbe7d494f9fa06902c3d30a' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'd8d28322f8cc2b5cf9a3da2c97c91e3115f53ddc' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'e8d920e10b020b359533682452f76489bc8e9f2d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '768280f7bf01703c9f6ea22b06b89fe7130006a4' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'ff0f5e860a9987abaf8c81b95d1476af19d9b186' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'a672fbf63576a1776f4d3960d9f36493a4308a79' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'd562bff5d582e3df38e0a62229c8c7b0700b9fa0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'd6b2646e7fd0abb5d39928c51ad340ccf306db01' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '453e3d3691aad984895241734c70de61cbcd60ec' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '156668df87ea5001c7348c1c141f1c8601fe23da' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '86f956f35a84961c17685ebfd7cb73e92f04cd45' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '73581c5791434983308d49e5c41f82836729a75d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '23f3eef374052545b7e99b0cb58a00011b421188' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '51842e9f6e95413e6defbe6f81f43c1c7559be3e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b835c25cb75bc6f6d29a71ba25b18735f60319f8' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a9740f44f06d57f2f9a1fce94ca2330a9c14e29' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9b97322077152d4fbcb98bc650ee7d0555f8d06d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '9eddc79647458ca7b72e3241709fc36276587159' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '426ac2bf30669cc79beda5c2e5136eba5c29c578' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8544b6e8aaeacee60fe9597ec13af11c938eaacf' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '5101eecff40329a93b5ac6eb09830f1067ebaa90', 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',
@@ -384,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,
@@ -393,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',
@@ -421,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: {
@@ -431,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',
@@ -441,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',
@@ -457,7 +475,7 @@ 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: {
@@ -489,10 +507,104 @@ export class KritzelEngine {
                     paintOrder: 'fill',
                 } }), 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',
-                    cursor: 'grab',
                     paintOrder: 'fill',
-                } }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '8270193062df51aa5e358bd31c0851f54e4644d1', 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`,
@@ -503,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: '7d199fcf652dee0cd12fff8a558b455c361e019f', 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"; }
@@ -673,6 +785,28 @@ export class KritzelEngine {
                 "reflect": false,
                 "attribute": "scale-min",
                 "defaultValue": "ABSOLUTE_SCALE_MIN"
+            },
+            "cursorTarget": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -813,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",
@@ -824,7 +958,7 @@ export class KritzelEngine {
                             "docs": ""
                         }, {
                             "name": "toolConfig",
-                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig",
+                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig",
                             "docs": ""
                         }],
                     "references": {
@@ -846,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>"
@@ -1538,6 +1677,9 @@ export class KritzelEngine {
             }, {
                 "propName": "scaleMin",
                 "methodName": "validateScaleMin"
+            }, {
+                "propName": "cursorTarget",
+                "methodName": "onCursorTargetChange"
             }];
     }
     static get listeners() {