@vroomchart/react 0.2.0 → 0.5.0

package/dist/index.js

@@ -76,13 +76,17 @@ function overlayToNumeric(o) {
   };
 }
 function drawingToSpec(d) {
+  const first = d.points[0];
+  const last = d.points[d.points.length - 1];
   return {
-    aTime: d.points[0].timeMs,
-    aPrice: d.points[0].price,
-    bTime: d.points[1].timeMs,
-    bPrice: d.points[1].price,
+    aTime: first.timeMs,
+    aPrice: first.price,
+    bTime: last.timeMs,
+    bPrice: last.price,
     color: (d.color != null ? parseColor(d.color) : null) ?? 4280902399,
-    width: d.width ?? 2
+    width: d.width ?? 2,
+    kind: d.type === "box" ? 1 : d.type === "pencil" ? 2 : 0,
+    ...d.type === "pencil" ? { points: d.points.map((p) => ({ timeMs: p.timeMs, price: p.price })) } : {}
   };
 }
 var DEFAULT_BUY_COLOR = 4280723098;
@@ -122,6 +126,8 @@ function useChartCore(props, loadOpts) {
     height: heightProp,
     visibleRange,
     defaultCandleWidth,
+    chartType,
+    transitionMs,
     theme,
     rsi,
     macd,
@@ -257,11 +263,103 @@ function useChartCore(props, loadOpts) {
     );
     scheduleRender();
   }, [ready, width, height, candles, seriesKey, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, drawingsKey, liquidityKey, scheduleRender]);
+  const morphRafRef = useRef(null);
+  const morphFadeRef = useRef(null);
+  const morphHandleRef = useRef(null);
+  useEffect(() => {
+    if (!ready) return;
+    const h = handleRef.current;
+    if (!h) return;
+    const target = chartType === "line" ? 1 : 0;
+    if (morphHandleRef.current !== h || morphFadeRef.current == null) {
+      morphHandleRef.current = h;
+      morphFadeRef.current = target;
+      h.setChartType(target);
+      scheduleRender();
+      return;
+    }
+    if (morphFadeRef.current === target) return;
+    const reduce = !!(typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (morphRafRef.current != null) {
+      cancelAnimationFrame(morphRafRef.current);
+      morphRafRef.current = null;
+    }
+    if (dur === 0) {
+      morphFadeRef.current = target;
+      h.setChartType(target);
+      scheduleRender();
+      return;
+    }
+    const from = morphFadeRef.current;
+    const start = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, (now - start) / dur);
+      const e = p * p * (3 - 2 * p);
+      const fade = from + (target - from) * e;
+      morphFadeRef.current = fade;
+      h.setMorph(reduce ? 0 : fade, fade);
+      h.present();
+      if (p < 1) {
+        morphRafRef.current = requestAnimationFrame(step);
+      } else {
+        morphRafRef.current = null;
+        morphFadeRef.current = target;
+        h.setChartType(target);
+        h.present();
+      }
+    };
+    morphRafRef.current = requestAnimationFrame(step);
+    return () => {
+      if (morphRafRef.current != null) {
+        cancelAnimationFrame(morphRafRef.current);
+        morphRafRef.current = null;
+      }
+    };
+  }, [ready, chartType, transitionMs, scheduleRender]);
   return { containerRef, canvasRef, handleRef, scheduleRender, size: { width, height } };
 }
 
 // src/useGestures.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/simplify.ts
+function perpendicularDistance(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  if (dx === 0 && dy === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  return Math.abs(dy * p.x - dx * p.y + b.x * a.y - b.y * a.x) / Math.hypot(dx, dy);
+}
+function simplifyIndices(points, epsilon) {
+  const n = points.length;
+  if (n <= 2) return points.map((_, i) => i);
+  if (epsilon <= 0) return points.map((_, i) => i);
+  const keep = new Uint8Array(n);
+  keep[0] = 1;
+  keep[n - 1] = 1;
+  const stack = [[0, n - 1]];
+  while (stack.length > 0) {
+    const [start, end] = stack.pop();
+    if (end <= start + 1) continue;
+    let farthest = -1;
+    let maxDist = -1;
+    for (let i = start + 1; i < end; i++) {
+      const d = perpendicularDistance(points[i], points[start], points[end]);
+      if (d > maxDist) {
+        maxDist = d;
+        farthest = i;
+      }
+    }
+    if (maxDist <= epsilon || farthest < 0) continue;
+    keep[farthest] = 1;
+    stack.push([start, farthest], [farthest, end]);
+  }
+  const out = [];
+  for (let i = 0; i < n; i++) if (keep[i]) out.push(i);
+  return out;
+}
+
+// src/useGestures.ts
 var MIN_SPAN = 24;
 var AXIS_RATIO = 0.5;
 var LONG_PRESS_MS = 350;
@@ -270,34 +368,197 @@ var WHEEL_K = 15e-4;
 var SEP_HIT = 4;
 var DRAW_COLOR = 4280902399;
 var DRAW_WIDTH = 2;
-var DRAW_HIT = 6;
+var PENCIL_MIN_DIST = 2;
+var PENCIL_EPSILON = 1;
 function drawingId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
   }
   return `draw-${Math.random().toString(36).slice(2)}`;
 }
-function distToSegment(px, py, ax, ay, bx, by) {
-  const dx = bx - ax;
-  const dy = by - ay;
-  const len2 = dx * dx + dy * dy;
-  let t = len2 > 0 ? ((px - ax) * dx + (py - ay) * dy) / len2 : 0;
-  t = Math.max(0, Math.min(1, t));
-  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+function bodyPart(type) {
+  return type === "box" ? 4 : type === "pencil" ? 5 : 2;
+}
+function makeDrawing(base, type, pts) {
+  if (pts.length < 2) return null;
+  const style = {
+    ...base.color != null ? { color: base.color } : {},
+    ...base.width != null ? { width: base.width } : {}
+  };
+  if (type === "pencil") return { id: base.id, type, points: pts, ...style };
+  return { id: base.id, type, points: [pts[0], pts[pts.length - 1]], ...style };
+}
+function boxCorners(points) {
+  const [a, b] = points;
+  return [
+    { timeMs: a.timeMs, price: a.price },
+    { timeMs: b.timeMs, price: a.price },
+    { timeMs: b.timeMs, price: b.price },
+    { timeMs: a.timeMs, price: b.price }
+  ];
 }
 function useGestures(containerRef, handleRef, scheduleRender, opts) {
   const optsRef = useRef2(opts);
   optsRef.current = opts;
   const drawAnchorRef = useRef2(null);
-  const drawAnchorPxRef = useRef2(null);
-  const drawSelectedPxRef = useRef2(null);
+  const selectedIdRef = useRef2(null);
+  const grabRef = useRef2(null);
+  const dragLineRef = useRef2(null);
+  const pencilRef = useRef2(
+    null
+  );
+  const downHitRef = useRef2(null);
+  const lastCoordRef = useRef2(null);
+  const selectedTRef = useRef2(0.5);
+  const clipboardRef = useRef2(null);
+  const applySelection = useCallback2(() => {
+    const h = handleRef.current;
+    if (!h) return;
+    const id = selectedIdRef.current;
+    const list = optsRef.current.drawings ?? [];
+    let index = -1;
+    if (id != null) {
+      index = list.findIndex((d) => d.id === id);
+      if (index < 0) selectedIdRef.current = null;
+    }
+    h.setSelectedDrawing(index, index >= 0 ? grabRef.current?.endpoint ?? -1 : -1);
+    scheduleRender();
+  }, [handleRef, scheduleRender]);
+  useEffect2(() => {
+    applySelection();
+  }, [opts.drawings, applySelection]);
+  useEffect2(() => {
+    const isEditableTarget = () => {
+      const ae = document.activeElement;
+      const tag = ae?.tagName;
+      return tag === "INPUT" || tag === "TEXTAREA" || !!ae?.isContentEditable;
+    };
+    const findSelected = () => {
+      const id = selectedIdRef.current;
+      if (id == null) return null;
+      return (optsRef.current.drawings ?? []).find((x) => x.id === id) ?? null;
+    };
+    const placePaste = (clip) => {
+      const h = handleRef.current;
+      if (!h) return null;
+      const pts = clip.points;
+      if (pts.length < 2) return null;
+      const a = pts[0];
+      const b = pts[pts.length - 1];
+      const t = clip.t;
+      const pSel = {
+        timeMs: a.timeMs + t * (b.timeMs - a.timeMs),
+        price: a.price + t * (b.price - a.price)
+      };
+      const cur = h.getCrosshairInfo();
+      const moved = cur != null && (clip.crosshair == null || cur.timeMs !== clip.crosshair.timeMs || cur.price !== clip.crosshair.price);
+      if (moved && cur) {
+        const dt = cur.timeMs - pSel.timeMs;
+        const dp = cur.price - pSel.price;
+        return pts.map((q) => ({ timeMs: q.timeMs + dt, price: q.price + dp }));
+      }
+      const el = containerRef.current;
+      const shift = (dp) => pts.map((q) => ({ timeMs: q.timeMs, price: q.price + dp }));
+      const prices = pts.map((q) => q.price);
+      const span = Math.max(...prices) - Math.min(...prices);
+      if (!el) return shift(-(span || 1));
+      const rect = el.getBoundingClientRect();
+      const m = h.getAxisMetrics();
+      const priceBottom = rect.height - m.xAxisHeight - m.indicatorHeight;
+      const top = h.coordAt(rect.width / 2, 0);
+      const bot = h.coordAt(rect.width / 2, priceBottom);
+      if (!top || !bot || priceBottom <= 0 || top.price <= bot.price) return shift(-(span || 1));
+      const vTop = top.price;
+      const vBot = bot.price;
+      const pricePerPx = (vTop - vBot) / priceBottom;
+      const GAP_PX = 30;
+      const offset = (span / pricePerPx + GAP_PX) * pricePerPx;
+      const pMin = Math.min(...prices);
+      const pMax = Math.max(...prices);
+      const upFits = pMax + offset <= vTop;
+      const downFits = pMin - offset >= vBot;
+      let dir;
+      if (upFits && !downFits) dir = 1;
+      else if (downFits && !upFits) dir = -1;
+      else if (upFits && downFits) {
+        dir = vTop - (pMax + offset) >= pMin - offset - vBot ? 1 : -1;
+      } else {
+        const upVis = Math.min(pMax + offset, vTop) - Math.max(pMin + offset, vBot);
+        const dnVis = Math.min(pMax - offset, vTop) - Math.max(pMin - offset, vBot);
+        dir = upVis >= dnVis ? 1 : -1;
+      }
+      return shift(dir * offset);
+    };
+    const onKeyDown = (e) => {
+      if (isEditableTarget()) return;
+      if (drawAnchorRef.current && (e.key === "Escape" || e.key === "Backspace" || e.key === "Delete")) {
+        e.preventDefault();
+        drawAnchorRef.current = null;
+        const h = handleRef.current;
+        if (h) {
+          h.clearDraft();
+          scheduleRender();
+        }
+        return;
+      }
+      if (e.key === "Backspace" || e.key === "Delete") {
+        const id = selectedIdRef.current;
+        if (id == null) return;
+        e.preventDefault();
+        optsRef.current.onDrawingDelete?.(id);
+        selectedIdRef.current = null;
+        grabRef.current = null;
+        dragLineRef.current = null;
+        const h = handleRef.current;
+        if (h) {
+          h.setSelectedDrawing(-1, -1);
+          scheduleRender();
+        }
+        return;
+      }
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const key = e.key.toLowerCase();
+      if (key === "c") {
+        if (window.getSelection()?.toString()) return;
+        const d = findSelected();
+        if (!d) return;
+        e.preventDefault();
+        const info = handleRef.current?.getCrosshairInfo() ?? null;
+        clipboardRef.current = {
+          type: d.type,
+          points: d.points.map((q) => ({ timeMs: q.timeMs, price: q.price })),
+          color: d.color,
+          width: d.width,
+          t: selectedTRef.current,
+          crosshair: info ? { timeMs: info.timeMs, price: info.price } : null
+        };
+      } else if (key === "v") {
+        const clip = clipboardRef.current;
+        if (!clip) return;
+        const pts = placePaste(clip);
+        if (!pts) return;
+        const id = drawingId();
+        const copy = makeDrawing(
+          { id, color: clip.color, width: clip.width },
+          clip.type,
+          pts
+        );
+        if (!copy) return;
+        e.preventDefault();
+        optsRef.current.onDrawingComplete?.(copy);
+        selectedIdRef.current = id;
+        selectedTRef.current = clip.t;
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [containerRef, handleRef, scheduleRender]);
   const localCrosshairActiveRef = useRef2(false);
   useEffect2(() => {
-    const active = opts.mode === "draw" && opts.tool === "line";
+    const active = opts.mode === "draw" && (opts.tool === "line" || opts.tool === "box" || opts.tool === "pencil");
     if (active) return;
     drawAnchorRef.current = null;
-    drawAnchorPxRef.current = null;
-    drawSelectedPxRef.current = null;
+    pencilRef.current = null;
     const h = handleRef.current;
     if (h) {
       h.clearDraft();
@@ -325,11 +586,46 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
     let downX = 0;
     let downY = 0;
     let moved = false;
+    let shiftHeld = false;
+    let lastX = 0;
+    let lastY = 0;
     const pinch = { spanX: 1, spanY: 1, ratioX: 1, ratioY: 1, enableX: false, enableY: false, active: false };
     const rel = (e) => {
       const r = el.getBoundingClientRect();
       return { x: e.clientX - r.left, y: e.clientY - r.top };
     };
+    const snapToLine = (fixed, x, y) => {
+      const h = handleRef.current;
+      if (!h) return null;
+      const free = h.coordAt(x, y);
+      if (!shiftHeld || !free) return free;
+      const f = h.project(fixed.timeMs, fixed.price);
+      if (!f) return free;
+      const dx = x - f.x;
+      const dy = y - f.y;
+      if (dx === 0 && dy === 0) return free;
+      const step = Math.PI / 4;
+      const ang = Math.round(Math.atan2(dy, dx) / step) * step;
+      const ux = Math.cos(ang);
+      const uy = Math.sin(ang);
+      const len = dx * ux + dy * uy;
+      return h.coordAt(f.x + len * ux, f.y + len * uy) ?? free;
+    };
+    const snapToSquare = (fixed, x, y) => {
+      const h = handleRef.current;
+      if (!h) return null;
+      const free = h.coordAt(x, y);
+      if (!shiftHeld || !free) return free;
+      const f = h.project(fixed.timeMs, fixed.price);
+      if (!f) return free;
+      const dx = x - f.x;
+      const dy = y - f.y;
+      const side = Math.max(Math.abs(dx), Math.abs(dy));
+      if (side === 0) return free;
+      const nx = f.x + (dx < 0 ? -side : side);
+      const ny = f.y + (dy < 0 ? -side : side);
+      return h.coordAt(nx, ny) ?? free;
+    };
     const regionAt = (x, y) => {
       const h = handleRef.current;
       const r = el.getBoundingClientRect();
@@ -396,61 +692,128 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       scheduleRender();
       reportCrosshair("hide");
     };
-    const drawActive = () => optsRef.current.mode === "draw" && optsRef.current.tool === "line";
+    const drawActive = () => optsRef.current.mode === "draw" && (optsRef.current.tool === "line" || optsRef.current.tool === "box" || optsRef.current.tool === "pencil");
+    const drawIsBox = () => optsRef.current.tool === "box";
+    const drawIsPencil = () => optsRef.current.tool === "pencil";
+    const snapMoving = (isBox, fixed, x, y) => isBox ? snapToSquare(fixed, x, y) : snapToLine(fixed, x, y);
     const updateGuideline = (x, y) => {
       const h = handleRef.current;
       if (!h) return;
-      if (!drawAnchorRef.current || drawSelectedPxRef.current) return;
-      const c = h.coordAt(x, y);
-      if (!c) return;
       const a = drawAnchorRef.current;
-      h.setDraft(a.timeMs, a.price, true, c.timeMs, c.price, true, DRAW_COLOR, DRAW_WIDTH);
+      if (!a) return;
+      const isBox = drawIsBox();
+      const c = snapMoving(isBox, a, x, y);
+      if (!c) return;
+      h.setDraft(a.timeMs, a.price, true, c.timeMs, c.price, true, DRAW_COLOR, DRAW_WIDTH, isBox ? 1 : 0);
       scheduleRender();
     };
     const handleDrawClick = (x, y) => {
       const h = handleRef.current;
       if (!h) return;
-      const o = optsRef.current;
-      const sel = drawSelectedPxRef.current;
-      if (sel) {
-        if (distToSegment(x, y, sel.ax, sel.ay, sel.bx, sel.by) <= DRAW_HIT) return;
-        drawAnchorRef.current = null;
-        drawAnchorPxRef.current = null;
-        drawSelectedPxRef.current = null;
-        h.clearDraft();
-        scheduleRender();
-        el.style.cursor = "";
-        o.onRequestMode?.("pan");
-        return;
-      }
-      const coord = h.coordAt(x, y);
-      if (!coord) return;
+      const isBox = drawIsBox();
       if (!drawAnchorRef.current) {
+        const coord = h.coordAt(x, y);
+        if (!coord) return;
         drawAnchorRef.current = coord;
-        drawAnchorPxRef.current = { x, y };
-        h.setDraft(coord.timeMs, coord.price, false, 0, 0, true, DRAW_COLOR, DRAW_WIDTH);
+        h.setDraft(coord.timeMs, coord.price, false, 0, 0, true, DRAW_COLOR, DRAW_WIDTH, isBox ? 1 : 0);
         scheduleRender();
       } else {
         const a = drawAnchorRef.current;
-        const apx = drawAnchorPxRef.current;
-        o.onDrawingComplete?.({
+        const coord = snapMoving(isBox, a, x, y);
+        if (!coord) return;
+        optsRef.current.onDrawingComplete?.({
           id: drawingId(),
-          type: "line",
+          type: isBox ? "box" : "line",
           points: [
             { timeMs: a.timeMs, price: a.price },
             { timeMs: coord.timeMs, price: coord.price }
           ]
         });
-        drawSelectedPxRef.current = { ax: apx.x, ay: apx.y, bx: x, by: y };
-        h.setDraft(a.timeMs, a.price, true, coord.timeMs, coord.price, false, DRAW_COLOR, DRAW_WIDTH);
+        drawAnchorRef.current = null;
+        h.clearDraft();
         scheduleRender();
       }
     };
+    const pencilStart = (x, y) => {
+      const h = handleRef.current;
+      if (!h) return;
+      const c = h.coordAt(x, y);
+      if (!c) return;
+      pencilRef.current = { pts: [c], px: [{ x, y }] };
+      h.startDraftStroke(DRAW_COLOR, DRAW_WIDTH);
+      h.appendDraftPoint(c.timeMs, c.price);
+      scheduleRender();
+    };
+    const pencilMove = (x, y) => {
+      const h = handleRef.current;
+      const s = pencilRef.current;
+      if (!h || !s) return;
+      const last = s.px[s.px.length - 1];
+      if (Math.hypot(x - last.x, y - last.y) < PENCIL_MIN_DIST) return;
+      const c = h.coordAt(x, y);
+      if (!c) return;
+      s.pts.push(c);
+      s.px.push({ x, y });
+      h.appendDraftPoint(c.timeMs, c.price);
+      scheduleRender();
+    };
+    const priceDecimals = () => {
+      const h = handleRef.current;
+      const el2 = containerRef.current;
+      if (!h || !el2) return 6;
+      const rect = el2.getBoundingClientRect();
+      const m = h.getAxisMetrics();
+      const priceBottom = rect.height - m.xAxisHeight - m.indicatorHeight;
+      if (priceBottom <= 0) return 6;
+      const top = h.coordAt(rect.width / 2, 0);
+      const bot = h.coordAt(rect.width / 2, priceBottom);
+      if (!top || !bot || top.price <= bot.price) return 6;
+      const pricePerPx = (top.price - bot.price) / priceBottom;
+      const d = Math.ceil(-Math.log10(pricePerPx / 100));
+      return Math.max(0, Math.min(12, Number.isFinite(d) ? d : 6));
+    };
+    const roundPoints = (pts) => {
+      const dp = priceDecimals();
+      return pts.map((p) => ({
+        timeMs: Math.round(p.timeMs),
+        price: Number(p.price.toFixed(dp))
+      }));
+    };
+    const pencilEnd = () => {
+      const h = handleRef.current;
+      const s = pencilRef.current;
+      pencilRef.current = null;
+      if (!h) return;
+      h.clearDraft();
+      scheduleRender();
+      if (!s || s.pts.length < 2) return;
+      const keep = simplifyIndices(s.px, PENCIL_EPSILON);
+      if (keep.length < 2) return;
+      const stroke = makeDrawing(
+        { id: drawingId() },
+        "pencil",
+        roundPoints(keep.map((i) => s.pts[i]))
+      );
+      if (stroke) optsRef.current.onDrawingComplete?.(stroke);
+    };
+    const moveGrab = (x, y) => {
+      const h = handleRef.current;
+      const g = grabRef.current;
+      if (!h || !g) return;
+      const c = snapMoving(g.isBox, g.fixed, x, y);
+      if (!c) return;
+      lastCoordRef.current = c;
+      h.moveDrawingEndpoint(g.index, g.endpoint, c.timeMs, c.price);
+      scheduleRender();
+    };
     const onPointerDown = (e) => {
       const h = handleRef.current;
       if (!h) return;
       if (e.pointerType === "mouse" && e.button !== 0) return;
       const { x, y } = rel(e);
+      shiftHeld = e.shiftKey;
+      lastX = x;
+      lastY = y;
       el.setPointerCapture(e.pointerId);
       pointers.set(e.pointerId, { x, y });
       if (pointers.size === 2) {
@@ -472,6 +835,66 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       downY = y;
       moved = false;
       panMode = regionAt(x, y);
+      if (drawIsPencil() && drawActive() && panMode === "chart") {
+        pencilStart(x, y);
+        return;
+      }
+      downHitRef.current = null;
+      if (!drawActive() && panMode === "chart") {
+        const hit = h.hitTestDrawing(x, y);
+        const gd = hit ? (optsRef.current.drawings ?? [])[hit.index] : void 0;
+        if (hit && gd && gd.type === "box" && hit.part <= 3) {
+          const corners = boxCorners(gd.points);
+          const grabbed = corners[hit.part];
+          const diagonal = corners[(hit.part + 2) % 4];
+          h.moveDrawingEndpoint(hit.index, 0, grabbed.timeMs, grabbed.price);
+          h.moveDrawingEndpoint(hit.index, 1, diagonal.timeMs, diagonal.price);
+          grabRef.current = { index: hit.index, endpoint: 0, fixed: diagonal, isBox: true };
+          lastCoordRef.current = grabbed;
+          applySelection();
+          return;
+        }
+        if (hit && gd && gd.type === "line" && hit.part <= 1) {
+          grabRef.current = {
+            index: hit.index,
+            endpoint: hit.part,
+            fixed: gd.points[hit.part === 0 ? 1 : 0],
+            // the other end stays put
+            isBox: false
+          };
+          lastCoordRef.current = null;
+          applySelection();
+          return;
+        }
+        const isBody = hit != null && gd != null && hit.part === bodyPart(gd.type);
+        if (hit && isBody) {
+          const list = optsRef.current.drawings ?? [];
+          const selIdx = selectedIdRef.current ? list.findIndex((d) => d.id === selectedIdRef.current) : -1;
+          if (hit.index === selIdx && selIdx >= 0) {
+            const start = h.coordAt(x, y);
+            const d = list[selIdx];
+            if (start && d) {
+              const first = d.points[0];
+              const last = d.points[d.points.length - 1];
+              dragLineRef.current = {
+                index: selIdx,
+                startTime: start.timeMs,
+                startPrice: start.price,
+                a0: first,
+                b0: last,
+                lastA: first,
+                lastB: last,
+                // A stroke can't be restated cheaply each frame, so it keeps its
+                // original points and is nudged with relative translate calls.
+                ...d.type === "pencil" ? { points0: d.points, appliedTime: 0, appliedPrice: 0 } : {}
+              };
+              el.style.cursor = "move";
+              return;
+            }
+          }
+        }
+        downHitRef.current = hit;
+      }
       if (e.pointerType !== "mouse" && panMode === "chart" && !drawActive()) {
         longPressTimer = setTimeout(() => {
           longPressTimer = null;
@@ -483,6 +906,9 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       const h = handleRef.current;
       if (!h) return;
       const { x, y } = rel(e);
+      shiftHeld = e.shiftKey;
+      lastX = x;
+      lastY = y;
       if (!pointers.has(e.pointerId)) {
         if (e.pointerType === "mouse" && pointers.size === 0) {
           if (drawActive()) {
@@ -504,6 +930,35 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       const dx = x - prev.x;
       const dy = y - prev.y;
       pointers.set(e.pointerId, { x, y });
+      if (pencilRef.current) {
+        pencilMove(x, y);
+        return;
+      }
+      if (grabRef.current) {
+        moveGrab(x, y);
+        return;
+      }
+      if (dragLineRef.current) {
+        const g = dragLineRef.current;
+        const c = h.coordAt(x, y);
+        if (c) {
+          const dT = c.timeMs - g.startTime;
+          const dP = c.price - g.startPrice;
+          if (g.points0) {
+            h.translateDrawing(g.index, dT - (g.appliedTime ?? 0), dP - (g.appliedPrice ?? 0));
+            g.appliedTime = dT;
+            g.appliedPrice = dP;
+          } else {
+            g.lastA = { timeMs: g.a0.timeMs + dT, price: g.a0.price + dP };
+            g.lastB = { timeMs: g.b0.timeMs + dT, price: g.b0.price + dP };
+            h.moveDrawingEndpoint(g.index, 0, g.lastA.timeMs, g.lastA.price);
+            h.moveDrawingEndpoint(g.index, 1, g.lastB.timeMs, g.lastB.price);
+          }
+          if (!moved && Math.hypot(x - downX, y - downY) > MOVE_THRESH) moved = true;
+          scheduleRender();
+        }
+        return;
+      }
       if (pointers.size >= 2 && pinch.active && !drawActive()) {
         const pts = [...pointers.values()];
         const focalX = (pts[0].x + pts[1].x) / 2;
@@ -552,15 +1007,75 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       scheduleRender();
     };
     const endPointer = (e) => {
+      shiftHeld = e.shiftKey;
       const had = pointers.delete(e.pointerId);
       clearLongPress();
       if (pointers.size < 2) pinch.active = false;
       if (!had) return;
+      if (pencilRef.current && pointers.size === 0) {
+        pencilEnd();
+        el.style.cursor = "crosshair";
+        return;
+      }
+      if (grabRef.current && pointers.size === 0) {
+        const g = grabRef.current;
+        grabRef.current = null;
+        const list = optsRef.current.drawings ?? [];
+        const d = list[g.index];
+        const c = lastCoordRef.current;
+        if (d && c) {
+          const movedPt = { timeMs: c.timeMs, price: c.price };
+          const pts = g.isBox ? [movedPt, g.fixed] : [d.points[0], d.points[1]];
+          if (!g.isBox) pts[g.endpoint] = movedPt;
+          const next = makeDrawing({ id: d.id, color: d.color, width: d.width }, d.type, pts);
+          if (next) optsRef.current.onDrawingChange?.(next);
+        }
+        applySelection();
+        el.style.cursor = "";
+        return;
+      }
+      if (dragLineRef.current && pointers.size === 0) {
+        const g = dragLineRef.current;
+        dragLineRef.current = null;
+        if (moved) {
+          const list = optsRef.current.drawings ?? [];
+          const d = list[g.index];
+          if (d) {
+            const pts = g.points0 ? roundPoints(
+              g.points0.map((p) => ({
+                timeMs: p.timeMs + (g.appliedTime ?? 0),
+                price: p.price + (g.appliedPrice ?? 0)
+              }))
+            ) : [g.lastA, g.lastB];
+            const next = makeDrawing({ id: d.id, color: d.color, width: d.width }, d.type, pts);
+            if (next) optsRef.current.onDrawingChange?.(next);
+          }
+        }
+        applySelection();
+        el.style.cursor = "";
+        return;
+      }
       if (drawActive() && pointers.size === 0) {
         if (!moved && panMode === "chart") handleDrawClick(downX, downY);
         else el.style.cursor = "crosshair";
         return;
       }
+      if (pointers.size === 0 && !moved && panMode === "chart" && crosshairSource !== "press") {
+        const hit = downHitRef.current;
+        const list = optsRef.current.drawings ?? [];
+        const hitDrawing = hit ? list[hit.index] : void 0;
+        const isBodyHit = hit != null && hitDrawing != null && hit.part === bodyPart(hitDrawing.type);
+        if (hit && isBodyHit && hitDrawing) {
+          selectedTRef.current = hit.t;
+          if (selectedIdRef.current !== hitDrawing.id) {
+            selectedIdRef.current = hitDrawing.id;
+            applySelection();
+          }
+        } else if (!hit && selectedIdRef.current != null) {
+          selectedIdRef.current = null;
+          applySelection();
+        }
+      }
       if (crosshairSource === "press" && pointers.size === 0) {
         hideCrosshair();
       } else if (moved && (panMode === "chart" || panMode === "indicator")) {
@@ -591,12 +1106,22 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       }
       scheduleRender();
     };
+    const onShiftKey = (e) => {
+      if (e.key !== "Shift") return;
+      const held = e.type === "keydown";
+      if (held === shiftHeld) return;
+      shiftHeld = held;
+      if (drawAnchorRef.current) updateGuideline(lastX, lastY);
+      else if (grabRef.current) moveGrab(lastX, lastY);
+    };
     el.addEventListener("pointerdown", onPointerDown);
     el.addEventListener("pointermove", onPointerMove);
     el.addEventListener("pointerup", endPointer);
     el.addEventListener("pointercancel", endPointer);
     el.addEventListener("pointerleave", onPointerLeave);
     el.addEventListener("wheel", onWheel, { passive: false });
+    window.addEventListener("keydown", onShiftKey);
+    window.addEventListener("keyup", onShiftKey);
     return () => {
       clearLongPress();
       el.removeEventListener("pointerdown", onPointerDown);
@@ -605,10 +1130,187 @@ function useGestures(containerRef, handleRef, scheduleRender, opts) {
       el.removeEventListener("pointercancel", endPointer);
       el.removeEventListener("pointerleave", onPointerLeave);
       el.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", onShiftKey);
+      window.removeEventListener("keyup", onShiftKey);
     };
   }, [containerRef, handleRef, scheduleRender]);
 }
 
+// src/useManagedDrawings.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+
+// src/drawingStorage.ts
+var DRAWINGS_VERSION = 1;
+var KNOWN_TYPES = /* @__PURE__ */ new Set(["line", "box", "pencil"]);
+var FIXED_POINT_TYPES = /* @__PURE__ */ new Set(["line", "box"]);
+function isPoint(p) {
+  if (p == null || typeof p !== "object") return false;
+  const { timeMs, price } = p;
+  return typeof timeMs === "number" && Number.isFinite(timeMs) && typeof price === "number" && Number.isFinite(price);
+}
+function isValidDrawing(d) {
+  if (d == null || typeof d !== "object") return false;
+  const { type, points } = d;
+  if (typeof type !== "string" || !KNOWN_TYPES.has(type)) {
+    return false;
+  }
+  if (!Array.isArray(points)) return false;
+  if (FIXED_POINT_TYPES.has(type) ? points.length !== 2 : points.length < 2) {
+    return false;
+  }
+  return points.every(isPoint);
+}
+var MIGRATIONS = {};
+function serializeDrawings(drawings) {
+  const env = { v: DRAWINGS_VERSION, drawings };
+  return JSON.stringify(env);
+}
+function deserializeDrawings(raw) {
+  if (raw == null || raw === "") return [];
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return [];
+  }
+  let env;
+  if (Array.isArray(parsed)) {
+    env = { v: 0, drawings: parsed };
+  } else if (parsed != null && typeof parsed === "object") {
+    const obj = parsed;
+    env = {
+      v: typeof obj.v === "number" ? obj.v : 0,
+      drawings: Array.isArray(obj.drawings) ? obj.drawings : []
+    };
+  } else {
+    return [];
+  }
+  let guard = 0;
+  while (env.v < DRAWINGS_VERSION && guard++ < 100) {
+    const up = MIGRATIONS[env.v];
+    if (!up) break;
+    env = up(env);
+  }
+  return (Array.isArray(env.drawings) ? env.drawings : []).filter(isValidDrawing);
+}
+
+// src/useManagedDrawings.ts
+var SAVE_DEBOUNCE_MS = 400;
+function useManagedDrawings(seriesKey, store) {
+  const [drawings, setDrawings] = useState2([]);
+  const drawingsRef = useRef3([]);
+  const storeRef = useRef3(store);
+  storeRef.current = store;
+  const loadedKeyRef = useRef3(void 0);
+  const loadTokenRef = useRef3(0);
+  const saveTimerRef = useRef3(null);
+  const warnedRef = useRef3(false);
+  const setBoth = (list) => {
+    drawingsRef.current = list;
+    setDrawings(list);
+  };
+  const flushSave = useCallback3((key, list) => {
+    if (saveTimerRef.current != null) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    const s = storeRef.current;
+    if (!s || key == null) return;
+    try {
+      const r = s.save(key, serializeDrawings(list));
+      if (r && typeof r.catch === "function") {
+        r.catch(() => {
+        });
+      }
+    } catch {
+    }
+  }, []);
+  const scheduleSave = useCallback3(() => {
+    const key = seriesKey;
+    if (!storeRef.current || key == null) return;
+    if (saveTimerRef.current != null) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      saveTimerRef.current = null;
+      flushSave(key, drawingsRef.current);
+    }, SAVE_DEBOUNCE_MS);
+  }, [seriesKey, flushSave]);
+  useEffect3(() => {
+    const s = storeRef.current;
+    if (!s) return;
+    if (seriesKey == null) {
+      if (!warnedRef.current && typeof console !== "undefined") {
+        console.warn(
+          "[vroom] drawingStore is set but seriesKey is missing \u2014 drawings will render but not persist."
+        );
+        warnedRef.current = true;
+      }
+      setBoth([]);
+      loadedKeyRef.current = void 0;
+      return;
+    }
+    const token = ++loadTokenRef.current;
+    const result = s.load(seriesKey);
+    if (result && typeof result.then === "function") {
+      setBoth([]);
+      loadedKeyRef.current = void 0;
+      result.then((raw) => {
+        if (token !== loadTokenRef.current) return;
+        loadedKeyRef.current = seriesKey;
+        setBoth(deserializeDrawings(raw));
+      }).catch(() => {
+        if (token !== loadTokenRef.current) return;
+        loadedKeyRef.current = seriesKey;
+        setBoth([]);
+      });
+    } else {
+      loadedKeyRef.current = seriesKey;
+      setBoth(deserializeDrawings(result));
+    }
+    return () => {
+      if (loadedKeyRef.current === seriesKey) {
+        flushSave(seriesKey, drawingsRef.current);
+      } else if (saveTimerRef.current != null) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [seriesKey, flushSave]);
+  const onDrawingComplete = useCallback3(
+    (d) => {
+      setDrawings((p) => {
+        const next = [...p, d];
+        drawingsRef.current = next;
+        return next;
+      });
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+  const onDrawingChange = useCallback3(
+    (d) => {
+      setDrawings((p) => {
+        const next = p.map((x) => x.id === d.id ? d : x);
+        drawingsRef.current = next;
+        return next;
+      });
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+  const onDrawingDelete = useCallback3(
+    (id) => {
+      setDrawings((p) => {
+        const next = p.filter((x) => x.id !== id);
+        drawingsRef.current = next;
+        return next;
+      });
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+  return { drawings, onDrawingComplete, onDrawingChange, onDrawingDelete };
+}
+
 // src/VroomChart.tsx
 import { jsx } from "react/jsx-runtime";
 var FILL = { position: "relative", width: "100%", height: "100%" };
@@ -628,13 +1330,21 @@ function VroomChart(props) {
     crosshairOverride,
     mode,
     tool,
+    drawings,
     onCrosshair,
     onViewportChange,
     onDrawingComplete,
-    onModeChange
+    onDrawingChange,
+    onDrawingDelete,
+    onModeChange,
+    drawingStore,
+    seriesKey
   } = props;
+  const managed = useManagedDrawings(seriesKey, drawingStore);
+  const stored = drawingStore != null;
+  const effectiveDrawings = stored ? managed.drawings : drawings;
   const { containerRef, canvasRef, handleRef, scheduleRender } = useChartCore(
-    props,
+    stored ? { ...props, drawings: effectiveDrawings } : props,
     wasm ? { wasm } : void 0
   );
   useGestures(containerRef, handleRef, scheduleRender, {
@@ -642,9 +1352,12 @@ function VroomChart(props) {
     crosshairOverride,
     mode,
     tool,
+    drawings: effectiveDrawings,
     onCrosshair,
     onViewportChange,
-    onDrawingComplete,
+    onDrawingComplete: stored ? managed.onDrawingComplete : onDrawingComplete,
+    onDrawingChange: stored ? managed.onDrawingChange : onDrawingChange,
+    onDrawingDelete: stored ? managed.onDrawingDelete : onDrawingDelete,
     onRequestMode: onModeChange
   });
   const rootStyle = {
@@ -656,9 +1369,12 @@ function VroomChart(props) {
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style: rootStyle, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: CANVAS_STYLE }) });
 }
 export {
+  DRAWINGS_VERSION,
   VroomChart,
   classifyTransition,
+  deserializeDrawings,
   inferStepMs,
+  serializeDrawings,
   timeframeWindow
 };
 //# sourceMappingURL=index.js.map