hyperprop-charting-library 0.1.134 → 0.1.136

package/dist/index.cjs

@@ -2970,8 +2970,11 @@ function createChart(element, options = {}) {
   );
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let measureState = null;
   let drawingDragState = null;
   let drawingsChangeHandler = null;
+  let drawingToolChangeHandler = null;
+  let lastNotifiedDrawingTool = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
@@ -3564,6 +3567,13 @@ function createChart(element, options = {}) {
         points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
       };
     }
+    if (measureState) {
+      measureState = {
+        ...measureState,
+        start: reanchorDrawingPoint(measureState.start),
+        end: reanchorDrawingPoint(measureState.end)
+      };
+    }
   };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
@@ -3665,6 +3675,22 @@ function createChart(element, options = {}) {
     const pad = (value) => String(value).padStart(2, "0");
     return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
   };
+  const formatTimeSpan = (ms) => {
+    const totalMinutes = Math.max(0, Math.round(ms / 6e4));
+    if (totalMinutes < 1) {
+      return `${Math.max(1, Math.round(ms / 1e3))}s`;
+    }
+    const days = Math.floor(totalMinutes / 1440);
+    const hours = Math.floor(totalMinutes % 1440 / 60);
+    const minutes = totalMinutes % 60;
+    if (days > 0) {
+      return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+    }
+    if (hours > 0) {
+      return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+    }
+    return `${minutes}m`;
+  };
   const getRightAxisLabelX = (chartRight) => chartRight + 1;
   const getRightAxisLabelWidth = (chartRight, contentWidth) => {
     const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
@@ -4033,6 +4059,10 @@ function createChart(element, options = {}) {
   let pendingDrawUpdateAutoScale = false;
   let pendingDrawOverlayOnly = true;
   const scheduleDraw = (options2 = {}) => {
+    if (activeDrawingTool !== lastNotifiedDrawingTool) {
+      lastNotifiedDrawingTool = activeDrawingTool;
+      drawingToolChangeHandler?.(activeDrawingTool);
+    }
     armCountdownHeartbeat();
     const overlayOnly = options2.overlayOnly ?? false;
     pendingDrawOverlayOnly = pendingDrawOverlayOnly && overlayOnly;
@@ -4788,6 +4818,216 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, (leftX + rightX) / 2, topY - 4, drawing.color);
           }
         }
+      } else if (drawing.type === "ellipse") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const cx = (px0 + px1) / 2;
+          const cy = (y0 + y1) / 2;
+          const rx = Math.max(1, Math.abs(px1 - px0) / 2);
+          const ry = Math.max(1, Math.abs(y1 - y0) / 2);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.beginPath();
+          ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fill();
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.stroke();
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          handleAt(px0, y1, drawing.color);
+          handleAt(px1, y0, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, cy - ry - 4, drawing.color);
+          }
+        }
+      } else if (drawing.type === "parallel-channel") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          ctx.stroke();
+          handleAt(x0, y0, drawing.color);
+          handleAt(x1, y1, drawing.color);
+          if (p2) {
+            const indexSpan = p1.index - p0.index;
+            const slope = indexSpan !== 0 ? (p1.price - p0.price) / indexSpan : 0;
+            const basePriceAtP2 = p0.price + slope * (p2.index - p0.index);
+            const offset = p2.price - basePriceAtP2;
+            const q0x = x0;
+            const q0y = yFromPrice(p0.price + offset);
+            const q1x = x1;
+            const q1y = yFromPrice(p1.price + offset);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.5 : 1;
+            ctx.fillStyle = hexToRgba(drawing.color, 0.08);
+            ctx.beginPath();
+            ctx.moveTo(x0, y0);
+            ctx.lineTo(x1, y1);
+            ctx.lineTo(q1x, q1y);
+            ctx.lineTo(q0x, q0y);
+            ctx.closePath();
+            ctx.fill();
+            ctx.restore();
+            ctx.beginPath();
+            ctx.moveTo(q0x, q0y);
+            ctx.lineTo(q1x, q1y);
+            ctx.stroke();
+            ctx.save();
+            ctx.setLineDash([4, 4]);
+            ctx.globalAlpha = draft ? 0.5 : 0.7;
+            ctx.beginPath();
+            ctx.moveTo(x0, (y0 + q0y) / 2);
+            ctx.lineTo(x1, (y1 + q1y) / 2);
+            ctx.stroke();
+            ctx.restore();
+            handleAt(xFromDrawingPoint(p2), yFromPrice(p2.price), drawing.color);
+          }
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, (x0 + x1) / 2, Math.min(y0, y1) - 4, drawing.color);
+          }
+        }
+      } else if (drawing.type === "arrow") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const x0 = xFromDrawingPoint(first);
+          const y0 = yFromPrice(first.price);
+          const x1 = xFromDrawingPoint(second);
+          const y1 = yFromPrice(second.price);
+          const angle = Math.atan2(y1 - y0, x1 - x0);
+          const head = 5 + Math.max(1, drawing.width) * 3;
+          const shaftX = x1 - Math.cos(angle) * head * 0.6;
+          const shaftY = y1 - Math.sin(angle) * head * 0.6;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(shaftX, shaftY);
+          ctx.stroke();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.fillStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(x1, y1);
+          ctx.lineTo(x1 - Math.cos(angle - Math.PI / 7) * head, y1 - Math.sin(angle - Math.PI / 7) * head);
+          ctx.lineTo(x1 - Math.cos(angle + Math.PI / 7) * head, y1 - Math.sin(angle + Math.PI / 7) * head);
+          ctx.closePath();
+          ctx.fill();
+          ctx.restore();
+          handleAt(x0, y0, drawing.color);
+          handleAt(x1, y1, drawing.color);
+          if (drawing.label) {
+            const midX = (x0 + x1) / 2;
+            const midY = (y0 + y1) / 2;
+            drawDrawingLabel(drawing.label, midX, midY, drawing.color);
+          }
+        }
+      } else if (drawing.type === "brush") {
+        const pts = drawing.points;
+        if (pts.length >= 2) {
+          ctx.save();
+          ctx.lineJoin = "round";
+          ctx.lineCap = "round";
+          ctx.beginPath();
+          const startX = xFromDrawingPoint(pts[0]);
+          const startY = yFromPrice(pts[0].price);
+          ctx.moveTo(startX, startY);
+          if (pts.length === 2) {
+            ctx.lineTo(xFromDrawingPoint(pts[1]), yFromPrice(pts[1].price));
+          } else {
+            for (let i = 1; i < pts.length - 1; i += 1) {
+              const cxp = xFromDrawingPoint(pts[i]);
+              const cyp = yFromPrice(pts[i].price);
+              const nx = xFromDrawingPoint(pts[i + 1]);
+              const ny = yFromPrice(pts[i + 1].price);
+              ctx.quadraticCurveTo(cxp, cyp, (cxp + nx) / 2, (cyp + ny) / 2);
+            }
+            const last = pts[pts.length - 1];
+            ctx.lineTo(xFromDrawingPoint(last), yFromPrice(last.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          if (isSelected) {
+            handleAt(startX, startY, drawing.color);
+            const last = pts[pts.length - 1];
+            handleAt(xFromDrawingPoint(last), yFromPrice(last.price), drawing.color);
+          }
+        }
+      } else if (drawing.type === "callout") {
+        const anchor = drawing.points[0];
+        const boxPoint = drawing.points[1];
+        if (anchor && boxPoint) {
+          const ax = xFromDrawingPoint(anchor);
+          const ay = yFromPrice(anchor.price);
+          const bx = xFromDrawingPoint(boxPoint);
+          const by = yFromPrice(boxPoint.price);
+          const fontSize = Math.max(6, drawing.fontSize);
+          const prevFont = ctx.font;
+          ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+          const rawLabel = drawing.label ?? "";
+          const isPlaceholder = rawLabel.trim().length === 0;
+          const lines = (isPlaceholder ? "Text" : rawLabel).split("\n");
+          const textW = Math.max(1, ...lines.map((line) => measureTextWidth(line)));
+          const padX = 10;
+          const padY = 7;
+          const lineH = Math.round(fontSize * 1.35);
+          const blockW = textW + padX * 2;
+          const blockH = lines.length * lineH + padY * 2;
+          const edgeX = Math.max(bx, Math.min(bx + blockW, ax));
+          const edgeY = Math.max(by, Math.min(by + blockH, ay));
+          const insideBox = ax >= bx && ax <= bx + blockW && ay >= by && ay <= by + blockH;
+          if (!insideBox) {
+            ctx.save();
+            ctx.setLineDash([]);
+            ctx.lineWidth = Math.max(1, drawing.width);
+            ctx.beginPath();
+            ctx.moveTo(edgeX, edgeY);
+            ctx.lineTo(ax, ay);
+            ctx.stroke();
+            const angle = Math.atan2(ay - edgeY, ax - edgeX);
+            const head = 7;
+            ctx.fillStyle = drawing.color;
+            ctx.beginPath();
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax - Math.cos(angle - Math.PI / 7) * head, ay - Math.sin(angle - Math.PI / 7) * head);
+            ctx.lineTo(ax - Math.cos(angle + Math.PI / 7) * head, ay - Math.sin(angle + Math.PI / 7) * head);
+            ctx.closePath();
+            ctx.fill();
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.fillStyle = hexToRgba(drawing.color, 0.16);
+          fillRoundedRect(bx, by, blockW, blockH, 6);
+          ctx.strokeStyle = drawing.color;
+          ctx.lineWidth = Math.max(1, drawing.width);
+          strokeRoundedRect(bx, by, blockW, blockH, 6);
+          ctx.fillStyle = drawing.color;
+          ctx.globalAlpha = (draft ? 0.72 : 1) * (isPlaceholder ? 0.55 : 1);
+          ctx.textAlign = "left";
+          ctx.textBaseline = "middle";
+          lines.forEach((line, lineIndex) => {
+            ctx.fillText(line, bx + padX, by + padY + lineIndex * lineH + lineH / 2);
+          });
+          ctx.restore();
+          ctx.font = prevFont;
+          handleAt(ax, ay, drawing.color);
+          handleAt(bx, by, drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4845,7 +5085,7 @@ function createChart(element, options = {}) {
             const t0 = getTimeForIndex(Math.round(p0.index));
             const t1 = getTimeForIndex(Math.round(p1.index));
             const spanMs = t0 && t1 ? Math.abs(t1.getTime() - t0.getTime()) : 0;
-            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatDuration(spanMs)}` : `${barSpan} bars`);
+            labelLines.push(spanMs > 0 ? `${barSpan} bars, ${formatTimeSpan(spanMs)}` : `${barSpan} bars`);
           }
           const pointValue = Number(drawing.pointValue);
           if (Number.isFinite(pointValue) && pointValue > 0) {
@@ -5322,6 +5562,96 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (measureState) {
+      const mStart = measureState.start;
+      const mEnd = measureState.end;
+      const mx0 = xFromDrawingPoint(mStart);
+      const mx1 = xFromDrawingPoint(mEnd);
+      const my0 = yFromPrice(mStart.price);
+      const my1 = yFromPrice(mEnd.price);
+      const mLeft = Math.min(mx0, mx1);
+      const mRight = Math.max(mx0, mx1);
+      const mTop = Math.min(my0, my1);
+      const mBottom = Math.max(my0, my1);
+      const mUp = mEnd.price >= mStart.price;
+      const mColor = mUp ? "#2962ff" : "#f23645";
+      ctx.save();
+      ctx.fillStyle = hexToRgba(mColor, 0.12);
+      ctx.fillRect(mLeft, mTop, Math.max(1, mRight - mLeft), Math.max(1, mBottom - mTop));
+      ctx.strokeStyle = mColor;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      const mArrowHead = 5;
+      const mMidX = (mLeft + mRight) / 2;
+      if (Math.abs(my1 - my0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mMidX), crisp(my0));
+        ctx.lineTo(crisp(mMidX), crisp(my1));
+        ctx.stroke();
+        const dirY = my1 > my0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX - mArrowHead, my1 - dirY * mArrowHead);
+        ctx.moveTo(mMidX, my1);
+        ctx.lineTo(mMidX + mArrowHead, my1 - dirY * mArrowHead);
+        ctx.stroke();
+      }
+      const mMidY = (mTop + mBottom) / 2;
+      if (Math.abs(mx1 - mx0) > mArrowHead * 2) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(mx0), crisp(mMidY));
+        ctx.lineTo(crisp(mx1), crisp(mMidY));
+        ctx.stroke();
+        const dirX = mx1 > mx0 ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY - mArrowHead);
+        ctx.moveTo(mx1, mMidY);
+        ctx.lineTo(mx1 - dirX * mArrowHead, mMidY + mArrowHead);
+        ctx.stroke();
+      }
+      const mDiff = mEnd.price - mStart.price;
+      const mBase = Math.abs(mStart.price) > 0 ? Math.abs(mStart.price) : 1;
+      const mPct = mDiff / mBase * 100;
+      const mTick = getConfiguredTickSize();
+      const mTicks = mTick > 0 ? Math.round(mDiff / mTick) : 0;
+      const mSigned = (value, text) => `${value < 0 ? "\u2212" : value > 0 ? "+" : ""}${text}`;
+      const mLines = [
+        mTick > 0 ? `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)}) ${mSigned(mTicks, String(Math.abs(mTicks)))}` : `${mSigned(mDiff, formatPrice(Math.abs(mDiff)))} (${mSigned(mPct, `${Math.abs(mPct).toFixed(2)}%`)})`
+      ];
+      const mBars = Math.round(mEnd.index) - Math.round(mStart.index);
+      const mT0 = getTimeForIndex(Math.round(mStart.index));
+      const mT1 = getTimeForIndex(Math.round(mEnd.index));
+      const mSpanMs = mT0 && mT1 ? Math.abs(mT1.getTime() - mT0.getTime()) : 0;
+      mLines.push(
+        mSpanMs > 0 ? `${mSigned(mBars, String(Math.abs(mBars)))} bars, ${formatTimeSpan(mSpanMs)}` : `${mSigned(mBars, String(Math.abs(mBars)))} bars`
+      );
+      const prevMeasureFont = ctx.font;
+      ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+      const mPad = 7;
+      const mLineHeight = 15;
+      const mTextW = Math.max(...mLines.map((line) => measureTextWidth(line)));
+      const mPillW = mTextW + mPad * 2;
+      const mPillH = mLines.length * mLineHeight + mPad;
+      const mPillX = clamp(mMidX - mPillW / 2, chartLeft + 2, chartLeft + chartWidth - mPillW - 2);
+      let mPillY = mUp ? mTop - 8 - mPillH : mBottom + 8;
+      if (mPillY < chartTop + 2) {
+        mPillY = mBottom + 8;
+      }
+      if (mPillY + mPillH > fullChartBottom - 2) {
+        mPillY = Math.max(chartTop + 2, mTop - 8 - mPillH);
+      }
+      ctx.fillStyle = mColor;
+      fillRoundedRect(mPillX, mPillY, mPillW, mPillH, 4);
+      ctx.fillStyle = "#ffffff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      mLines.forEach((line, lineIndex) => {
+        ctx.fillText(line, mPillX + mPillW / 2, mPillY + mPad / 2 + lineIndex * mLineHeight + mLineHeight / 2);
+      });
+      ctx.font = prevMeasureFont;
+      ctx.restore();
+    }
     if (tradeMarkers.length > 0 && data.length > 0) {
       const visibleStart = Math.floor(xStart) - 1;
       const visibleEnd = Math.ceil(xStart + xSpan) + 1;
@@ -6752,6 +7082,126 @@ function createChart(element, options = {}) {
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "ellipse") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const cx = (px0 + px1) / 2;
+        const cy = (y0 + y1) / 2;
+        const rx = Math.max(1, Math.abs(px1 - px0) / 2);
+        const ry = Math.max(1, Math.abs(y1 - y0) / 2);
+        const norm = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;
+        if (norm <= 1) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "parallel-channel") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - x1, y - y1) <= 8) return { drawing, target: "handle", pointIndex: 1 };
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) return { drawing, target: "handle", pointIndex: 2 };
+          const indexSpan = p1.index - p0.index;
+          const slope = indexSpan !== 0 ? (p1.price - p0.price) / indexSpan : 0;
+          const offset = p2.price - (p0.price + slope * (p2.index - p0.index));
+          const q0y = canvasYFromDrawingPrice(p0.price + offset);
+          const q1y = canvasYFromDrawingPrice(p1.price + offset);
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x0, q0y, x1, q1y) <= 6) {
+            return { drawing, target: "line" };
+          }
+          const minX = Math.min(x0, x1);
+          const maxX = Math.max(x0, x1);
+          if (x >= minX && x <= maxX && maxX > minX) {
+            const t = (x - x0) / (x1 - x0);
+            const baseY = y0 + t * (y1 - y0);
+            const parY = q0y + t * (q1y - q0y);
+            if (y >= Math.min(baseY, parY) && y <= Math.max(baseY, parY)) {
+              return { drawing, target: "line" };
+            }
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "arrow") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "brush") {
+        const pts = drawing.points;
+        if (pts.length < 2) continue;
+        let hitBody = false;
+        let prevX = canvasXFromDrawingPoint(pts[0]);
+        let prevY = canvasYFromDrawingPrice(pts[0].price);
+        for (let i = 1; i < pts.length; i += 1) {
+          const nextX = canvasXFromDrawingPoint(pts[i]);
+          const nextY = canvasYFromDrawingPrice(pts[i].price);
+          if (distanceToSegment(x, y, prevX, prevY, nextX, nextY) <= 7) {
+            hitBody = true;
+            break;
+          }
+          prevX = nextX;
+          prevY = nextY;
+        }
+        if (hitBody) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "callout") {
+        const anchor = drawing.points[0];
+        const boxPoint = drawing.points[1];
+        if (!anchor || !boxPoint) continue;
+        const ax = canvasXFromDrawingPoint(anchor);
+        const ay = canvasYFromDrawingPrice(anchor.price);
+        const bx = canvasXFromDrawingPoint(boxPoint);
+        const by = canvasYFromDrawingPrice(boxPoint.price);
+        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - bx, y - by) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        const fontSize = Math.max(6, drawing.fontSize);
+        const prevFont = ctx.font;
+        ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+        const rawLabel = drawing.label ?? "";
+        const lines = (rawLabel.trim().length === 0 ? "Text" : rawLabel).split("\n");
+        const textW = Math.max(1, ...lines.map((line) => measureTextWidth(line)));
+        ctx.font = prevFont;
+        const padX = 10;
+        const padY = 7;
+        const lineH = Math.round(fontSize * 1.35);
+        const blockW = textW + padX * 2;
+        const blockH = lines.length * lineH + padY * 2;
+        if (x >= bx && x <= bx + blockW && y >= by && y <= by + blockH) {
+          return { drawing, target: "line" };
+        }
+        if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -6980,6 +7430,128 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "arrow") {
+      if (draftDrawing?.type === "arrow") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [anchor, endPoint]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("arrow");
+      draftDrawing = normalizeDrawingState({
+        type: "arrow",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      scheduleDraw();
+      return true;
+    }
+    if (activeDrawingTool === "parallel-channel") {
+      if (draftDrawing?.type === "parallel-channel") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          scheduleDraw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("parallel-channel");
+      draftDrawing = normalizeDrawingState({
+        type: "parallel-channel",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      scheduleDraw();
+      return true;
+    }
+    if (activeDrawingTool === "ellipse") {
+      if (draftDrawing?.type === "ellipse") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("ellipse");
+      draftDrawing = normalizeDrawingState({
+        type: "ellipse",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      scheduleDraw();
+      return true;
+    }
+    if (activeDrawingTool === "callout") {
+      if (draftDrawing?.type === "callout") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        selectedDrawingId = completed.id;
+        emitDrawingsChange();
+        scheduleDraw();
+        drawingEditTextHandler?.({ drawing: serializeDrawing(completed), target: "line", x, y });
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("callout");
+      draftDrawing = normalizeDrawingState({
+        type: "callout",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.fontSize === void 0 ? {} : { fontSize: defaults.fontSize },
+        label: ""
+      });
+      scheduleDraw();
+      return true;
+    }
+    if (activeDrawingTool === "brush") {
+      const defaults = getDrawingToolDefaults("brush");
+      draftDrawing = normalizeDrawingState({
+        type: "brush",
+        points: [point],
+        color: defaults.color ?? "#f59e0b",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 2
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "fib-retracement") {
       if (draftDrawing?.type === "fib-retracement") {
         const completed = normalizeDrawingState({
@@ -7183,7 +7755,7 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
-      if (drawingDragState.target === "handle" && drawing.type === "rectangle") {
+      if (drawingDragState.target === "handle" && (drawing.type === "rectangle" || drawing.type === "ellipse")) {
         const pts = drawing.points.map((point) => ({ ...point }));
         const p0 = pts[0];
         const p1 = pts[1];
@@ -7202,7 +7774,7 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
-      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
+      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray" || drawing.type === "arrow")) {
         const pointIndex = drawingDragState.pointIndex ?? 0;
         const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
         const constrained = anchor ? constrainAngleFromAnchor(anchor, x, y) : null;
@@ -7320,6 +7892,19 @@ function createChart(element, options = {}) {
         return;
       }
     }
+    if (measureState) {
+      if (measureState.dragging) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+          canvas.style.cursor = "default";
+        }
+        scheduleDraw();
+        return;
+      }
+      measureState = null;
+      scheduleDraw();
+    }
     const drawingToolCapturesPointer = activeDrawingTool !== null || draftDrawing !== null;
     if (!drawingToolCapturesPointer) {
       const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
@@ -7394,6 +7979,18 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && (activeDrawingTool === "measure" || activeDrawingTool === null && draftDrawing === null && event.shiftKey && event.pointerType === "mouse")) {
+      const measurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (measurePoint) {
+        measureState = { start: measurePoint, end: measurePoint, dragging: true };
+        activePointerId = event.pointerId;
+        capturePointer(event.pointerId);
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+        return;
+      }
+    }
     if (region === "plot" && !activeDrawingTool) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
@@ -7427,6 +8024,10 @@ function createChart(element, options = {}) {
     if (region === "plot" && handleDrawingToolPointerDown(point.x, point.y)) {
       setCrosshairPoint(null);
       canvas.style.cursor = "crosshair";
+      if (activeDrawingTool === "brush" && draftDrawing?.type === "brush") {
+        activePointerId = event.pointerId;
+        capturePointer(event.pointerId);
+      }
       return;
     }
     isDragging = true;
@@ -7489,6 +8090,19 @@ function createChart(element, options = {}) {
       }
       return;
     }
+    if (measureState?.dragging) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextMeasurePoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextMeasurePoint) {
+        measureState = { ...measureState, end: nextMeasurePoint };
+        setCrosshairPoint(null);
+        canvas.style.cursor = "crosshair";
+        scheduleDraw();
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -7498,9 +8112,30 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "rectangle" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
+    if (draftDrawing?.type === "brush" && activeDrawingTool === "brush") {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint) {
+        const last = draftDrawing.points[draftDrawing.points.length - 1];
+        const lastX = last ? canvasXFromDrawingPoint(last) : Number.NEGATIVE_INFINITY;
+        const lastY = last ? canvasYFromDrawingPrice(last.price) : Number.NEGATIVE_INFINITY;
+        if (Math.hypot(point.x - lastX, point.y - lastY) >= 3) {
+          draftDrawing = {
+            ...draftDrawing,
+            points: [...draftDrawing.points, nextPoint]
+          };
+        }
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(null);
+        scheduleDraw();
+      }
+      return;
+    }
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "arrow" || activeDrawingTool === "rectangle" || activeDrawingTool === "ellipse" || activeDrawingTool === "callout" || activeDrawingTool === "parallel-channel" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       let nextPoint = drawingPointFromCanvas(point.x, point.y);
-      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
+      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray" || draftDrawing.type === "arrow") && draftDrawing.points[0]) {
         nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
       }
       if (nextPoint) {
@@ -7719,6 +8354,43 @@ function createChart(element, options = {}) {
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }
+    if (measureState?.dragging) {
+      const movedMeasure = measureState.start.index !== measureState.end.index || measureState.start.price !== measureState.end.price;
+      if (movedMeasure) {
+        measureState = { ...measureState, dragging: false };
+        if (activeDrawingTool === "measure") {
+          activeDrawingTool = null;
+        }
+        canvas.style.cursor = "default";
+      } else {
+        canvas.style.cursor = "crosshair";
+      }
+      isDragging = false;
+      dragMode = null;
+      activePointerId = null;
+      pointerDownInfo = null;
+      scheduleDraw();
+      return;
+    }
+    if (draftDrawing?.type === "brush" && activeDrawingTool === "brush") {
+      if (draftDrawing.points.length >= 2) {
+        const completed = normalizeDrawingState(serializeDrawing(draftDrawing));
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+        emitDrawingsChange();
+      } else {
+        draftDrawing = null;
+        canvas.style.cursor = "crosshair";
+      }
+      isDragging = false;
+      dragMode = null;
+      activePointerId = null;
+      pointerDownInfo = null;
+      scheduleDraw();
+      return;
+    }
     if (orderDragState) {
       const moved = orderDragState.lastPrice !== orderDragState.startPrice;
       const finalLine = orderLines.find((line) => line.id === orderDragState?.orderId);
@@ -7862,7 +8534,7 @@ function createChart(element, options = {}) {
           x: point.x,
           y: point.y
         };
-        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note") {
+        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note" || drawingHit.drawing.type === "callout") {
           drawingEditTextHandler?.(payload);
         } else {
           drawingDoubleClickHandler?.(payload);
@@ -7899,6 +8571,15 @@ function createChart(element, options = {}) {
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
+    if (event.key === "Escape" && event.type === "keydown" && measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      scheduleDraw();
+      return;
+    }
     const active = event.metaKey || event.ctrlKey;
     const shift = event.shiftKey;
     const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
@@ -8211,17 +8892,29 @@ function createChart(element, options = {}) {
   const setActiveDrawingTool = (tool) => {
     activeDrawingTool = tool;
     draftDrawing = null;
+    measureState = null;
     canvas.style.cursor = tool ? "crosshair" : "default";
     scheduleDraw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
   const cancelDrawing = () => {
+    let cancelled = false;
     if (draftDrawing) {
       draftDrawing = null;
+      cancelled = true;
+    }
+    if (measureState) {
+      measureState = null;
+      if (activeDrawingTool === "measure") {
+        activeDrawingTool = null;
+        canvas.style.cursor = "default";
+      }
+      cancelled = true;
+    }
+    if (cancelled) {
       scheduleDraw();
-      return true;
     }
-    return false;
+    return cancelled;
   };
   const setTradeMarkers = (markers) => {
     tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
@@ -8273,6 +8966,9 @@ function createChart(element, options = {}) {
   const onDrawingsChange = (handler) => {
     drawingsChangeHandler = handler;
   };
+  const onActiveDrawingToolChange = (handler) => {
+    drawingToolChangeHandler = handler;
+  };
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
@@ -8285,6 +8981,51 @@ function createChart(element, options = {}) {
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
+  const saveState = () => {
+    const drawingDefaults = {};
+    for (const [tool, defaults] of drawingToolDefaults) {
+      drawingDefaults[tool] = { ...defaults };
+    }
+    return {
+      version: 1,
+      chartType: getChartType(),
+      viewport: getViewport(),
+      drawings: getDrawings(),
+      indicators: getIndicators(),
+      magnetMode: getMagnetMode(),
+      drawingDefaults
+    };
+  };
+  const loadState = (state) => {
+    if (!state || typeof state !== "object") {
+      return;
+    }
+    if (typeof state.chartType === "string") {
+      setChartType(state.chartType);
+    }
+    if (Array.isArray(state.indicators)) {
+      setIndicators(state.indicators);
+    }
+    if (Array.isArray(state.drawings)) {
+      setDrawings(state.drawings);
+    }
+    if (state.magnetMode === "none" || state.magnetMode === "weak" || state.magnetMode === "strong") {
+      setMagnetMode(state.magnetMode);
+    }
+    if (state.drawingDefaults && typeof state.drawingDefaults === "object") {
+      for (const [tool, defaults] of Object.entries(state.drawingDefaults)) {
+        if (defaults && typeof defaults === "object") {
+          setDrawingDefaults(tool, defaults);
+        }
+      }
+    }
+    if (state.viewport && typeof state.viewport === "object") {
+      setViewport(state.viewport);
+    }
+  };
+  const takeScreenshot = (options2 = {}) => {
+    return canvas.toDataURL(options2.type ?? "image/png", options2.quality);
+  };
   const destroy = () => {
     cancelKineticPan();
     if (smoothingRafId !== null) {
@@ -8359,6 +9100,7 @@ function createChart(element, options = {}) {
     removeDrawing,
     clearDrawings,
     onDrawingsChange,
+    onActiveDrawingToolChange,
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
@@ -8379,6 +9121,9 @@ function createChart(element, options = {}) {
     updateIndicator,
     removeIndicator,
     setIndicators,
+    saveState,
+    loadState,
+    takeScreenshot,
     resize,
     destroy
   };