hyperprop-charting-library 0.1.110 → 0.1.112

package/dist/hyperprop-charting-library.cjs

@@ -1650,23 +1650,26 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
+    const rawLineY = yFromPrice(renderPrice);
     const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (Number.isFinite(mergedLine.fillToPrice) && Number.isFinite(rawLineY)) {
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY !== null) {
+        const zoneY = clamp(rawLineY, chartTop + 1, chartBottom - 1);
+        const topY = Math.min(zoneY, fillY);
+        const heightY = Math.abs(zoneY - fillY);
+        if (heightY >= 1) {
+          ctx.save();
+          ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
+          ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
+          ctx.restore();
+        }
+      }
+    }
     if (lineY === null) {
       return;
     }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
-    if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
-      if (fillY === null) {
-        return;
-      }
-      const topY = Math.min(lineY, fillY);
-      const heightY = Math.max(1, Math.abs(lineY - fillY));
-      ctx.save();
-      ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
-      ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
-      ctx.restore();
-    }
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
@@ -4617,52 +4620,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") {
@@ -4839,23 +4845,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

@@ -1624,23 +1624,26 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
+    const rawLineY = yFromPrice(renderPrice);
     const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (Number.isFinite(mergedLine.fillToPrice) && Number.isFinite(rawLineY)) {
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY !== null) {
+        const zoneY = clamp(rawLineY, chartTop + 1, chartBottom - 1);
+        const topY = Math.min(zoneY, fillY);
+        const heightY = Math.abs(zoneY - fillY);
+        if (heightY >= 1) {
+          ctx.save();
+          ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
+          ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
+          ctx.restore();
+        }
+      }
+    }
     if (lineY === null) {
       return;
     }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
-    if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
-      if (fillY === null) {
-        return;
-      }
-      const topY = Math.min(lineY, fillY);
-      const heightY = Math.max(1, Math.abs(lineY - fillY));
-      ctx.save();
-      ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
-      ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
-      ctx.restore();
-    }
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
@@ -4591,52 +4594,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") {
@@ -4813,23 +4819,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

@@ -1650,23 +1650,26 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
+    const rawLineY = yFromPrice(renderPrice);
     const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (Number.isFinite(mergedLine.fillToPrice) && Number.isFinite(rawLineY)) {
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY !== null) {
+        const zoneY = clamp(rawLineY, chartTop + 1, chartBottom - 1);
+        const topY = Math.min(zoneY, fillY);
+        const heightY = Math.abs(zoneY - fillY);
+        if (heightY >= 1) {
+          ctx.save();
+          ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
+          ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
+          ctx.restore();
+        }
+      }
+    }
     if (lineY === null) {
       return;
     }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
-    if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
-      if (fillY === null) {
-        return;
-      }
-      const topY = Math.min(lineY, fillY);
-      const heightY = Math.max(1, Math.abs(lineY - fillY));
-      ctx.save();
-      ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
-      ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
-      ctx.restore();
-    }
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
@@ -4617,52 +4620,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") {
@@ -4839,23 +4845,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

@@ -1624,23 +1624,26 @@ function createChart(element, options = {}) {
     if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
       return;
     }
+    const rawLineY = yFromPrice(renderPrice);
     const lineY = getLineY(renderPrice, yFromPrice, chartTop, chartBottom, mergedLine.pinOutOfRange);
+    if (Number.isFinite(mergedLine.fillToPrice) && Number.isFinite(rawLineY)) {
+      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
+      if (fillY !== null) {
+        const zoneY = clamp(rawLineY, chartTop + 1, chartBottom - 1);
+        const topY = Math.min(zoneY, fillY);
+        const heightY = Math.abs(zoneY - fillY);
+        if (heightY >= 1) {
+          ctx.save();
+          ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
+          ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
+          ctx.restore();
+        }
+      }
+    }
     if (lineY === null) {
       return;
     }
     const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
-    if (Number.isFinite(mergedLine.fillToPrice)) {
-      const fillY = getLineY(mergedLine.fillToPrice, yFromPrice, chartTop, chartBottom, true);
-      if (fillY === null) {
-        return;
-      }
-      const topY = Math.min(lineY, fillY);
-      const heightY = Math.max(1, Math.abs(lineY - fillY));
-      ctx.save();
-      ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
-      ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
-      ctx.restore();
-    }
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
@@ -4591,52 +4594,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") {
@@ -4813,23 +4819,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.110",
+  "version": "0.1.112",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",