hyperprop-charting-library 0.1.109 → 0.1.111

package/dist/hyperprop-charting-library.cjs

@@ -3944,13 +3944,14 @@ function createChart(element, options = {}) {
     }
     return { index: barIndex, price: nearest };
   };
-  const drawingPointFromCanvas = (x, y) => {
+  const drawingPointFromCanvas = (x, y, snap = true) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const rawPrice = priceFromCanvasY(y);
+    const snapped = snap ? applyMagnet(y, rawIndex, rawPrice) : { index: rawIndex, price: rawPrice };
     const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
@@ -4480,7 +4481,7 @@ function createChart(element, options = {}) {
     if (!drawingDragState) {
       return false;
     }
-    const currentPoint = drawingPointFromCanvas(x, y);
+    const currentPoint = drawingPointFromCanvas(x, y, drawingDragState.target === "handle");
     if (!currentPoint) {
       return true;
     }
@@ -4616,52 +4617,55 @@ function createChart(element, options = {}) {
         return;
       }
     }
-    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-    if (crosshairButtonRegion) {
-      crosshairPriceActionHandler?.({
-        x: point.x,
-        y: point.y,
-        price: crosshairButtonRegion.price
-      });
-      return;
-    }
-    const orderRegion = getOrderActionRegion(point.x, point.y);
-    if (orderRegion) {
-      if (orderRegion.draggable) {
-        activePointerId = event.pointerId;
-        const startPrice = roundToPricePrecision(orderRegion.line.price);
-        actionDragState = {
+    const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
+    if (!drawingToolCapturesPointer) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        crosshairPriceActionHandler?.({
+          x: point.x,
+          y: point.y,
+          price: crosshairButtonRegion.price
+        });
+        return;
+      }
+      const orderRegion = getOrderActionRegion(point.x, point.y);
+      if (orderRegion) {
+        if (orderRegion.draggable) {
+          activePointerId = event.pointerId;
+          const startPrice = roundToPricePrecision(orderRegion.line.price);
+          actionDragState = {
+            orderId: orderRegion.orderId,
+            action: orderRegion.action,
+            startPrice,
+            lastPrice: startPrice,
+            moved: false
+          };
+          canvas.setPointerCapture(event.pointerId);
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
+        setCrosshairPoint(null);
+        orderActionHandler?.({
           orderId: orderRegion.orderId,
           action: orderRegion.action,
-          startPrice,
-          lastPrice: startPrice,
-          moved: false
+          line: orderRegion.line
+        });
+        return;
+      }
+      const orderDragRegion = getOrderDragRegion(point.x, point.y);
+      if (orderDragRegion) {
+        activePointerId = event.pointerId;
+        orderDragState = {
+          orderId: orderDragRegion.orderId,
+          startPrice: orderDragRegion.price,
+          lastPrice: orderDragRegion.price
         };
         canvas.setPointerCapture(event.pointerId);
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
         return;
       }
-      setCrosshairPoint(null);
-      orderActionHandler?.({
-        orderId: orderRegion.orderId,
-        action: orderRegion.action,
-        line: orderRegion.line
-      });
-      return;
-    }
-    const orderDragRegion = getOrderDragRegion(point.x, point.y);
-    if (orderDragRegion) {
-      activePointerId = event.pointerId;
-      orderDragState = {
-        orderId: orderDragRegion.orderId,
-        startPrice: orderDragRegion.price,
-        lastPrice: orderDragRegion.price
-      };
-      canvas.setPointerCapture(event.pointerId);
-      canvas.style.cursor = "ns-resize";
-      setCrosshairPoint(null);
-      return;
     }
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -4679,7 +4683,7 @@ function createChart(element, options = {}) {
           y: point.y
         });
         if (!drawingHit.drawing.locked) {
-          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
           if (startCanvasPoint) {
             drawingDragState = {
               drawingId: drawingHit.drawing.id,
@@ -4838,23 +4842,26 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
-      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-      if (crosshairButtonRegion) {
-        canvas.style.cursor = "pointer";
-        setCrosshairPoint(point);
-        return;
-      }
-      const orderRegion = getOrderActionRegion(point.x, point.y);
-      if (orderRegion) {
-        canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
-        setCrosshairPoint(null);
-        return;
-      }
-      const orderDragRegion = getOrderDragRegion(point.x, point.y);
-      if (orderDragRegion) {
-        canvas.style.cursor = "ns-resize";
-        setCrosshairPoint(null);
-        return;
+      const drawingToolOwnsHover = activeDrawingTool !== null || draftDrawing !== null;
+      if (!drawingToolOwnsHover) {
+        const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+        if (crosshairButtonRegion) {
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(point);
+          return;
+        }
+        const orderRegion = getOrderActionRegion(point.x, point.y);
+        if (orderRegion) {
+          canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
+        const orderDragRegion = getOrderDragRegion(point.x, point.y);
+        if (orderDragRegion) {
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
         const drawingHit = getDrawingHit(point.x, point.y);

package/dist/hyperprop-charting-library.js

@@ -3918,13 +3918,14 @@ function createChart(element, options = {}) {
     }
     return { index: barIndex, price: nearest };
   };
-  const drawingPointFromCanvas = (x, y) => {
+  const drawingPointFromCanvas = (x, y, snap = true) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const rawPrice = priceFromCanvasY(y);
+    const snapped = snap ? applyMagnet(y, rawIndex, rawPrice) : { index: rawIndex, price: rawPrice };
     const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
@@ -4454,7 +4455,7 @@ function createChart(element, options = {}) {
     if (!drawingDragState) {
       return false;
     }
-    const currentPoint = drawingPointFromCanvas(x, y);
+    const currentPoint = drawingPointFromCanvas(x, y, drawingDragState.target === "handle");
     if (!currentPoint) {
       return true;
     }
@@ -4590,52 +4591,55 @@ function createChart(element, options = {}) {
         return;
       }
     }
-    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-    if (crosshairButtonRegion) {
-      crosshairPriceActionHandler?.({
-        x: point.x,
-        y: point.y,
-        price: crosshairButtonRegion.price
-      });
-      return;
-    }
-    const orderRegion = getOrderActionRegion(point.x, point.y);
-    if (orderRegion) {
-      if (orderRegion.draggable) {
-        activePointerId = event.pointerId;
-        const startPrice = roundToPricePrecision(orderRegion.line.price);
-        actionDragState = {
+    const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
+    if (!drawingToolCapturesPointer) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        crosshairPriceActionHandler?.({
+          x: point.x,
+          y: point.y,
+          price: crosshairButtonRegion.price
+        });
+        return;
+      }
+      const orderRegion = getOrderActionRegion(point.x, point.y);
+      if (orderRegion) {
+        if (orderRegion.draggable) {
+          activePointerId = event.pointerId;
+          const startPrice = roundToPricePrecision(orderRegion.line.price);
+          actionDragState = {
+            orderId: orderRegion.orderId,
+            action: orderRegion.action,
+            startPrice,
+            lastPrice: startPrice,
+            moved: false
+          };
+          canvas.setPointerCapture(event.pointerId);
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
+        setCrosshairPoint(null);
+        orderActionHandler?.({
           orderId: orderRegion.orderId,
           action: orderRegion.action,
-          startPrice,
-          lastPrice: startPrice,
-          moved: false
+          line: orderRegion.line
+        });
+        return;
+      }
+      const orderDragRegion = getOrderDragRegion(point.x, point.y);
+      if (orderDragRegion) {
+        activePointerId = event.pointerId;
+        orderDragState = {
+          orderId: orderDragRegion.orderId,
+          startPrice: orderDragRegion.price,
+          lastPrice: orderDragRegion.price
         };
         canvas.setPointerCapture(event.pointerId);
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
         return;
       }
-      setCrosshairPoint(null);
-      orderActionHandler?.({
-        orderId: orderRegion.orderId,
-        action: orderRegion.action,
-        line: orderRegion.line
-      });
-      return;
-    }
-    const orderDragRegion = getOrderDragRegion(point.x, point.y);
-    if (orderDragRegion) {
-      activePointerId = event.pointerId;
-      orderDragState = {
-        orderId: orderDragRegion.orderId,
-        startPrice: orderDragRegion.price,
-        lastPrice: orderDragRegion.price
-      };
-      canvas.setPointerCapture(event.pointerId);
-      canvas.style.cursor = "ns-resize";
-      setCrosshairPoint(null);
-      return;
     }
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -4653,7 +4657,7 @@ function createChart(element, options = {}) {
           y: point.y
         });
         if (!drawingHit.drawing.locked) {
-          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
           if (startCanvasPoint) {
             drawingDragState = {
               drawingId: drawingHit.drawing.id,
@@ -4812,23 +4816,26 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
-      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-      if (crosshairButtonRegion) {
-        canvas.style.cursor = "pointer";
-        setCrosshairPoint(point);
-        return;
-      }
-      const orderRegion = getOrderActionRegion(point.x, point.y);
-      if (orderRegion) {
-        canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
-        setCrosshairPoint(null);
-        return;
-      }
-      const orderDragRegion = getOrderDragRegion(point.x, point.y);
-      if (orderDragRegion) {
-        canvas.style.cursor = "ns-resize";
-        setCrosshairPoint(null);
-        return;
+      const drawingToolOwnsHover = activeDrawingTool !== null || draftDrawing !== null;
+      if (!drawingToolOwnsHover) {
+        const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+        if (crosshairButtonRegion) {
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(point);
+          return;
+        }
+        const orderRegion = getOrderActionRegion(point.x, point.y);
+        if (orderRegion) {
+          canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
+        const orderDragRegion = getOrderDragRegion(point.x, point.y);
+        if (orderDragRegion) {
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
         const drawingHit = getDrawingHit(point.x, point.y);

package/dist/index.cjs

@@ -3944,13 +3944,14 @@ function createChart(element, options = {}) {
     }
     return { index: barIndex, price: nearest };
   };
-  const drawingPointFromCanvas = (x, y) => {
+  const drawingPointFromCanvas = (x, y, snap = true) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const rawPrice = priceFromCanvasY(y);
+    const snapped = snap ? applyMagnet(y, rawIndex, rawPrice) : { index: rawIndex, price: rawPrice };
     const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
@@ -4480,7 +4481,7 @@ function createChart(element, options = {}) {
     if (!drawingDragState) {
       return false;
     }
-    const currentPoint = drawingPointFromCanvas(x, y);
+    const currentPoint = drawingPointFromCanvas(x, y, drawingDragState.target === "handle");
     if (!currentPoint) {
       return true;
     }
@@ -4616,52 +4617,55 @@ function createChart(element, options = {}) {
         return;
       }
     }
-    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-    if (crosshairButtonRegion) {
-      crosshairPriceActionHandler?.({
-        x: point.x,
-        y: point.y,
-        price: crosshairButtonRegion.price
-      });
-      return;
-    }
-    const orderRegion = getOrderActionRegion(point.x, point.y);
-    if (orderRegion) {
-      if (orderRegion.draggable) {
-        activePointerId = event.pointerId;
-        const startPrice = roundToPricePrecision(orderRegion.line.price);
-        actionDragState = {
+    const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
+    if (!drawingToolCapturesPointer) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        crosshairPriceActionHandler?.({
+          x: point.x,
+          y: point.y,
+          price: crosshairButtonRegion.price
+        });
+        return;
+      }
+      const orderRegion = getOrderActionRegion(point.x, point.y);
+      if (orderRegion) {
+        if (orderRegion.draggable) {
+          activePointerId = event.pointerId;
+          const startPrice = roundToPricePrecision(orderRegion.line.price);
+          actionDragState = {
+            orderId: orderRegion.orderId,
+            action: orderRegion.action,
+            startPrice,
+            lastPrice: startPrice,
+            moved: false
+          };
+          canvas.setPointerCapture(event.pointerId);
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
+        setCrosshairPoint(null);
+        orderActionHandler?.({
           orderId: orderRegion.orderId,
           action: orderRegion.action,
-          startPrice,
-          lastPrice: startPrice,
-          moved: false
+          line: orderRegion.line
+        });
+        return;
+      }
+      const orderDragRegion = getOrderDragRegion(point.x, point.y);
+      if (orderDragRegion) {
+        activePointerId = event.pointerId;
+        orderDragState = {
+          orderId: orderDragRegion.orderId,
+          startPrice: orderDragRegion.price,
+          lastPrice: orderDragRegion.price
         };
         canvas.setPointerCapture(event.pointerId);
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
         return;
       }
-      setCrosshairPoint(null);
-      orderActionHandler?.({
-        orderId: orderRegion.orderId,
-        action: orderRegion.action,
-        line: orderRegion.line
-      });
-      return;
-    }
-    const orderDragRegion = getOrderDragRegion(point.x, point.y);
-    if (orderDragRegion) {
-      activePointerId = event.pointerId;
-      orderDragState = {
-        orderId: orderDragRegion.orderId,
-        startPrice: orderDragRegion.price,
-        lastPrice: orderDragRegion.price
-      };
-      canvas.setPointerCapture(event.pointerId);
-      canvas.style.cursor = "ns-resize";
-      setCrosshairPoint(null);
-      return;
     }
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -4679,7 +4683,7 @@ function createChart(element, options = {}) {
           y: point.y
         });
         if (!drawingHit.drawing.locked) {
-          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
           if (startCanvasPoint) {
             drawingDragState = {
               drawingId: drawingHit.drawing.id,
@@ -4838,23 +4842,26 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
-      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-      if (crosshairButtonRegion) {
-        canvas.style.cursor = "pointer";
-        setCrosshairPoint(point);
-        return;
-      }
-      const orderRegion = getOrderActionRegion(point.x, point.y);
-      if (orderRegion) {
-        canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
-        setCrosshairPoint(null);
-        return;
-      }
-      const orderDragRegion = getOrderDragRegion(point.x, point.y);
-      if (orderDragRegion) {
-        canvas.style.cursor = "ns-resize";
-        setCrosshairPoint(null);
-        return;
+      const drawingToolOwnsHover = activeDrawingTool !== null || draftDrawing !== null;
+      if (!drawingToolOwnsHover) {
+        const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+        if (crosshairButtonRegion) {
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(point);
+          return;
+        }
+        const orderRegion = getOrderActionRegion(point.x, point.y);
+        if (orderRegion) {
+          canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
+        const orderDragRegion = getOrderDragRegion(point.x, point.y);
+        if (orderDragRegion) {
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
         const drawingHit = getDrawingHit(point.x, point.y);

package/dist/index.js

@@ -3918,13 +3918,14 @@ function createChart(element, options = {}) {
     }
     return { index: barIndex, price: nearest };
   };
-  const drawingPointFromCanvas = (x, y) => {
+  const drawingPointFromCanvas = (x, y, snap = true) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const rawPrice = priceFromCanvasY(y);
+    const snapped = snap ? applyMagnet(y, rawIndex, rawPrice) : { index: rawIndex, price: rawPrice };
     const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
@@ -4454,7 +4455,7 @@ function createChart(element, options = {}) {
     if (!drawingDragState) {
       return false;
     }
-    const currentPoint = drawingPointFromCanvas(x, y);
+    const currentPoint = drawingPointFromCanvas(x, y, drawingDragState.target === "handle");
     if (!currentPoint) {
       return true;
     }
@@ -4590,52 +4591,55 @@ function createChart(element, options = {}) {
         return;
       }
     }
-    const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-    if (crosshairButtonRegion) {
-      crosshairPriceActionHandler?.({
-        x: point.x,
-        y: point.y,
-        price: crosshairButtonRegion.price
-      });
-      return;
-    }
-    const orderRegion = getOrderActionRegion(point.x, point.y);
-    if (orderRegion) {
-      if (orderRegion.draggable) {
-        activePointerId = event.pointerId;
-        const startPrice = roundToPricePrecision(orderRegion.line.price);
-        actionDragState = {
+    const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
+    if (!drawingToolCapturesPointer) {
+      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+      if (crosshairButtonRegion) {
+        crosshairPriceActionHandler?.({
+          x: point.x,
+          y: point.y,
+          price: crosshairButtonRegion.price
+        });
+        return;
+      }
+      const orderRegion = getOrderActionRegion(point.x, point.y);
+      if (orderRegion) {
+        if (orderRegion.draggable) {
+          activePointerId = event.pointerId;
+          const startPrice = roundToPricePrecision(orderRegion.line.price);
+          actionDragState = {
+            orderId: orderRegion.orderId,
+            action: orderRegion.action,
+            startPrice,
+            lastPrice: startPrice,
+            moved: false
+          };
+          canvas.setPointerCapture(event.pointerId);
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
+        setCrosshairPoint(null);
+        orderActionHandler?.({
           orderId: orderRegion.orderId,
           action: orderRegion.action,
-          startPrice,
-          lastPrice: startPrice,
-          moved: false
+          line: orderRegion.line
+        });
+        return;
+      }
+      const orderDragRegion = getOrderDragRegion(point.x, point.y);
+      if (orderDragRegion) {
+        activePointerId = event.pointerId;
+        orderDragState = {
+          orderId: orderDragRegion.orderId,
+          startPrice: orderDragRegion.price,
+          lastPrice: orderDragRegion.price
         };
         canvas.setPointerCapture(event.pointerId);
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
         return;
       }
-      setCrosshairPoint(null);
-      orderActionHandler?.({
-        orderId: orderRegion.orderId,
-        action: orderRegion.action,
-        line: orderRegion.line
-      });
-      return;
-    }
-    const orderDragRegion = getOrderDragRegion(point.x, point.y);
-    if (orderDragRegion) {
-      activePointerId = event.pointerId;
-      orderDragState = {
-        orderId: orderDragRegion.orderId,
-        startPrice: orderDragRegion.price,
-        lastPrice: orderDragRegion.price
-      };
-      canvas.setPointerCapture(event.pointerId);
-      canvas.style.cursor = "ns-resize";
-      setCrosshairPoint(null);
-      return;
     }
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -4653,7 +4657,7 @@ function createChart(element, options = {}) {
           y: point.y
         });
         if (!drawingHit.drawing.locked) {
-          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
           if (startCanvasPoint) {
             drawingDragState = {
               drawingId: drawingHit.drawing.id,
@@ -4812,23 +4816,26 @@ function createChart(element, options = {}) {
       return;
     }
     if (!isDragging || !dragMode) {
-      const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
-      if (crosshairButtonRegion) {
-        canvas.style.cursor = "pointer";
-        setCrosshairPoint(point);
-        return;
-      }
-      const orderRegion = getOrderActionRegion(point.x, point.y);
-      if (orderRegion) {
-        canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
-        setCrosshairPoint(null);
-        return;
-      }
-      const orderDragRegion = getOrderDragRegion(point.x, point.y);
-      if (orderDragRegion) {
-        canvas.style.cursor = "ns-resize";
-        setCrosshairPoint(null);
-        return;
+      const drawingToolOwnsHover = activeDrawingTool !== null || draftDrawing !== null;
+      if (!drawingToolOwnsHover) {
+        const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
+        if (crosshairButtonRegion) {
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(point);
+          return;
+        }
+        const orderRegion = getOrderActionRegion(point.x, point.y);
+        if (orderRegion) {
+          canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
+        const orderDragRegion = getOrderDragRegion(point.x, point.y);
+        if (orderDragRegion) {
+          canvas.style.cursor = "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
         const drawingHit = getDrawingHit(point.x, point.y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.109",
+  "version": "0.1.111",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",