hyperprop-charting-library 0.1.89 → 0.1.91

package/dist/hyperprop-charting-library.cjs

@@ -1000,6 +1000,9 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let magnetMode = "none";
+  let magnetModifierActive = false;
+  const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3724,17 +3727,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const applyMagnet = (y, index, price) => {
+    const effective = magnetModifierActive ? "strong" : magnetMode;
+    if (effective === "none") return { index, price };
+    const barIndex = Math.round(index);
+    const bar = data[barIndex];
+    if (!bar) return { index, price };
+    const candidates = [bar.o, bar.h, bar.l, bar.c];
+    let nearest = bar.c;
+    let bestDiff = Infinity;
+    for (const candidate of candidates) {
+      const diff = Math.abs(candidate - price);
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        nearest = candidate;
+      }
+    }
+    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+      return { index, price };
+    }
+    return { index: barIndex, price: nearest };
+  };
   const drawingPointFromCanvas = (x, y) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const index = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const nearestIndex = Math.round(index);
+    const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
+    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
-      index,
-      price: roundToPricePrecision(priceFromCanvasY(y)),
+      index: snapped.index,
+      price: roundToPricePrecision(snapped.price),
       ...time ? { time: time.toISOString() } : {}
     };
   };
@@ -4351,6 +4376,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4473,6 +4499,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -5067,6 +5094,18 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
+  const setMagnetMode = (mode) => {
+    magnetMode = mode;
+  };
+  const getMagnetMode = () => magnetMode;
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
     drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
@@ -5175,6 +5214,9 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    setMagnetMode,
+    getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/hyperprop-charting-library.d.ts

@@ -430,6 +430,9 @@ interface ChartInstance {
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    setMagnetMode: (mode: "none" | "weak" | "strong") => void;
+    getMagnetMode: () => "none" | "weak" | "strong";
+    cancelDrawing: () => boolean;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/hyperprop-charting-library.js

@@ -974,6 +974,9 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let magnetMode = "none";
+  let magnetModifierActive = false;
+  const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3698,17 +3701,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const applyMagnet = (y, index, price) => {
+    const effective = magnetModifierActive ? "strong" : magnetMode;
+    if (effective === "none") return { index, price };
+    const barIndex = Math.round(index);
+    const bar = data[barIndex];
+    if (!bar) return { index, price };
+    const candidates = [bar.o, bar.h, bar.l, bar.c];
+    let nearest = bar.c;
+    let bestDiff = Infinity;
+    for (const candidate of candidates) {
+      const diff = Math.abs(candidate - price);
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        nearest = candidate;
+      }
+    }
+    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+      return { index, price };
+    }
+    return { index: barIndex, price: nearest };
+  };
   const drawingPointFromCanvas = (x, y) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const index = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const nearestIndex = Math.round(index);
+    const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
+    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
-      index,
-      price: roundToPricePrecision(priceFromCanvasY(y)),
+      index: snapped.index,
+      price: roundToPricePrecision(snapped.price),
       ...time ? { time: time.toISOString() } : {}
     };
   };
@@ -4325,6 +4350,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4447,6 +4473,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -5041,6 +5068,18 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
+  const setMagnetMode = (mode) => {
+    magnetMode = mode;
+  };
+  const getMagnetMode = () => magnetMode;
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
     drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
@@ -5149,6 +5188,9 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    setMagnetMode,
+    getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -1000,6 +1000,9 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let magnetMode = "none";
+  let magnetModifierActive = false;
+  const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3724,17 +3727,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const applyMagnet = (y, index, price) => {
+    const effective = magnetModifierActive ? "strong" : magnetMode;
+    if (effective === "none") return { index, price };
+    const barIndex = Math.round(index);
+    const bar = data[barIndex];
+    if (!bar) return { index, price };
+    const candidates = [bar.o, bar.h, bar.l, bar.c];
+    let nearest = bar.c;
+    let bestDiff = Infinity;
+    for (const candidate of candidates) {
+      const diff = Math.abs(candidate - price);
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        nearest = candidate;
+      }
+    }
+    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+      return { index, price };
+    }
+    return { index: barIndex, price: nearest };
+  };
   const drawingPointFromCanvas = (x, y) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const index = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const nearestIndex = Math.round(index);
+    const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
+    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
-      index,
-      price: roundToPricePrecision(priceFromCanvasY(y)),
+      index: snapped.index,
+      price: roundToPricePrecision(snapped.price),
       ...time ? { time: time.toISOString() } : {}
     };
   };
@@ -4351,6 +4376,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4473,6 +4499,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -5067,6 +5094,18 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
+  const setMagnetMode = (mode) => {
+    magnetMode = mode;
+  };
+  const getMagnetMode = () => magnetMode;
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
     drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
@@ -5175,6 +5214,9 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    setMagnetMode,
+    getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.d.cts

@@ -430,6 +430,9 @@ interface ChartInstance {
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    setMagnetMode: (mode: "none" | "weak" | "strong") => void;
+    getMagnetMode: () => "none" | "weak" | "strong";
+    cancelDrawing: () => boolean;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.d.ts

@@ -430,6 +430,9 @@ interface ChartInstance {
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    setMagnetMode: (mode: "none" | "weak" | "strong") => void;
+    getMagnetMode: () => "none" | "weak" | "strong";
+    cancelDrawing: () => boolean;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.js

@@ -974,6 +974,9 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let magnetMode = "none";
+  let magnetModifierActive = false;
+  const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3698,17 +3701,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const applyMagnet = (y, index, price) => {
+    const effective = magnetModifierActive ? "strong" : magnetMode;
+    if (effective === "none") return { index, price };
+    const barIndex = Math.round(index);
+    const bar = data[barIndex];
+    if (!bar) return { index, price };
+    const candidates = [bar.o, bar.h, bar.l, bar.c];
+    let nearest = bar.c;
+    let bestDiff = Infinity;
+    for (const candidate of candidates) {
+      const diff = Math.abs(candidate - price);
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        nearest = candidate;
+      }
+    }
+    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+      return { index, price };
+    }
+    return { index: barIndex, price: nearest };
+  };
   const drawingPointFromCanvas = (x, y) => {
     if (!drawState) {
       return null;
     }
     const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
-    const index = drawState.xStart + ratio * drawState.xSpan - 0.5;
-    const nearestIndex = Math.round(index);
+    const rawIndex = drawState.xStart + ratio * drawState.xSpan - 0.5;
+    const snapped = applyMagnet(y, rawIndex, priceFromCanvasY(y));
+    const nearestIndex = Math.round(snapped.index);
     const time = getTimeForIndex(nearestIndex);
     return {
-      index,
-      price: roundToPricePrecision(priceFromCanvasY(y)),
+      index: snapped.index,
+      price: roundToPricePrecision(snapped.price),
       ...time ? { time: time.toISOString() } : {}
     };
   };
@@ -4325,6 +4350,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4447,6 +4473,7 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    magnetModifierActive = event.metaKey || event.ctrlKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -5041,6 +5068,18 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
+  const setMagnetMode = (mode) => {
+    magnetMode = mode;
+  };
+  const getMagnetMode = () => magnetMode;
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
     drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
@@ -5149,6 +5188,9 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    setMagnetMode,
+    getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -484,6 +484,8 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `setSelectedDrawing(id: string | null): void` (marks a drawing selected; only the selected/drafted drawing renders its handles, and position tools render their lines/labels only while selected)
 - `onDrawingDoubleClick(handler): void` (fires when a drawing is double-clicked; use it to open a settings dialog, e.g. for position tools)
 - `onDrawingEditText(handler): void` (fires when a `text`/`note` tool is placed or double-clicked; use it to show an inline text editor at `{x, y}` and write the result back via `updateDrawing(id, { label })`). `text`/`note` drawings store their content in `label` and size in `fontSize`.
+- `cancelDrawing(): boolean` — abort an in-progress multi-click drawing (between the first click and the final point, e.g. a half-drawn trendline/ray/fib). Returns `true` if a draft was cancelled. Wire it to Escape.
+- `setMagnetMode(mode): void` / `getMagnetMode()` — magnet/snap for all drawing tools. `"none"` off, `"weak"` snaps to a candle's OHLC only when the cursor is near a value, `"strong"` always snaps to the nearest OHLC of the bar under the cursor. Holding Cmd/Ctrl while drawing/dragging forces strong snapping regardless of the mode.
 - `setActiveDrawingTool(tool: DrawingToolType | null): void` (`DrawingToolType` = `"horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`)
 - `getActiveDrawingTool(): DrawingToolType | null`
 - `setDrawings(drawings: DrawingObjectOptions[]): void`

package/package.json

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