hyperprop-charting-library 0.1.90 → 0.1.92

package/dist/hyperprop-charting-library.cjs

@@ -4855,6 +4855,22 @@ function createChart(element, options = {}) {
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
+  const onModifierKeyChange = (event) => {
+    const active = event.metaKey || event.ctrlKey;
+    if (active !== magnetModifierActive) {
+      magnetModifierActive = active;
+      if (draftDrawing) draw();
+    }
+  };
+  const onWindowBlurMagnet = () => {
+    magnetModifierActive = false;
+  };
+  const hasWindow = typeof window !== "undefined";
+  if (hasWindow) {
+    window.addEventListener("keydown", onModifierKeyChange);
+    window.addEventListener("keyup", onModifierKeyChange);
+    window.addEventListener("blur", onWindowBlurMagnet);
+  }
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -5094,6 +5110,14 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5163,6 +5187,11 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
     canvas.removeEventListener("contextmenu", onContextMenu);
+    if (hasWindow) {
+      window.removeEventListener("keydown", onModifierKeyChange);
+      window.removeEventListener("keyup", onModifierKeyChange);
+      window.removeEventListener("blur", onWindowBlurMagnet);
+    }
     element.innerHTML = "";
   };
   draw();
@@ -5208,6 +5237,7 @@ function createChart(element, options = {}) {
     onDrawingEditText,
     setMagnetMode,
     getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

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

@@ -432,6 +432,7 @@ interface ChartInstance {
     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

@@ -4829,6 +4829,22 @@ function createChart(element, options = {}) {
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
+  const onModifierKeyChange = (event) => {
+    const active = event.metaKey || event.ctrlKey;
+    if (active !== magnetModifierActive) {
+      magnetModifierActive = active;
+      if (draftDrawing) draw();
+    }
+  };
+  const onWindowBlurMagnet = () => {
+    magnetModifierActive = false;
+  };
+  const hasWindow = typeof window !== "undefined";
+  if (hasWindow) {
+    window.addEventListener("keydown", onModifierKeyChange);
+    window.addEventListener("keyup", onModifierKeyChange);
+    window.addEventListener("blur", onWindowBlurMagnet);
+  }
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -5068,6 +5084,14 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5137,6 +5161,11 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
     canvas.removeEventListener("contextmenu", onContextMenu);
+    if (hasWindow) {
+      window.removeEventListener("keydown", onModifierKeyChange);
+      window.removeEventListener("keyup", onModifierKeyChange);
+      window.removeEventListener("blur", onWindowBlurMagnet);
+    }
     element.innerHTML = "";
   };
   draw();
@@ -5182,6 +5211,7 @@ function createChart(element, options = {}) {
     onDrawingEditText,
     setMagnetMode,
     getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -4855,6 +4855,22 @@ function createChart(element, options = {}) {
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
+  const onModifierKeyChange = (event) => {
+    const active = event.metaKey || event.ctrlKey;
+    if (active !== magnetModifierActive) {
+      magnetModifierActive = active;
+      if (draftDrawing) draw();
+    }
+  };
+  const onWindowBlurMagnet = () => {
+    magnetModifierActive = false;
+  };
+  const hasWindow = typeof window !== "undefined";
+  if (hasWindow) {
+    window.addEventListener("keydown", onModifierKeyChange);
+    window.addEventListener("keyup", onModifierKeyChange);
+    window.addEventListener("blur", onWindowBlurMagnet);
+  }
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -5094,6 +5110,14 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5163,6 +5187,11 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
     canvas.removeEventListener("contextmenu", onContextMenu);
+    if (hasWindow) {
+      window.removeEventListener("keydown", onModifierKeyChange);
+      window.removeEventListener("keyup", onModifierKeyChange);
+      window.removeEventListener("blur", onWindowBlurMagnet);
+    }
     element.innerHTML = "";
   };
   draw();
@@ -5208,6 +5237,7 @@ function createChart(element, options = {}) {
     onDrawingEditText,
     setMagnetMode,
     getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.d.cts

@@ -432,6 +432,7 @@ interface ChartInstance {
     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

@@ -432,6 +432,7 @@ interface ChartInstance {
     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

@@ -4829,6 +4829,22 @@ function createChart(element, options = {}) {
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
   canvas.addEventListener("contextmenu", onContextMenu);
+  const onModifierKeyChange = (event) => {
+    const active = event.metaKey || event.ctrlKey;
+    if (active !== magnetModifierActive) {
+      magnetModifierActive = active;
+      if (draftDrawing) draw();
+    }
+  };
+  const onWindowBlurMagnet = () => {
+    magnetModifierActive = false;
+  };
+  const hasWindow = typeof window !== "undefined";
+  if (hasWindow) {
+    window.addEventListener("keydown", onModifierKeyChange);
+    window.addEventListener("keyup", onModifierKeyChange);
+    window.addEventListener("blur", onWindowBlurMagnet);
+  }
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -5068,6 +5084,14 @@ function createChart(element, options = {}) {
     draw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
+  const cancelDrawing = () => {
+    if (draftDrawing) {
+      draftDrawing = null;
+      draw();
+      return true;
+    }
+    return false;
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5137,6 +5161,11 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
     canvas.removeEventListener("contextmenu", onContextMenu);
+    if (hasWindow) {
+      window.removeEventListener("keydown", onModifierKeyChange);
+      window.removeEventListener("keyup", onModifierKeyChange);
+      window.removeEventListener("blur", onWindowBlurMagnet);
+    }
     element.innerHTML = "";
   };
   draw();
@@ -5182,6 +5211,7 @@ function createChart(element, options = {}) {
     onDrawingEditText,
     setMagnetMode,
     getMagnetMode,
+    cancelDrawing,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -484,6 +484,7 @@ 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`

package/package.json

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