hyperprop-charting-library 0.1.105 → 0.1.107

package/dist/hyperprop-charting-library.cjs

@@ -1007,6 +1007,7 @@ function createChart(element, options = {}) {
   let drawingEditTextHandler = null;
   let magnetMode = "none";
   let magnetModifierActive = false;
+  let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
@@ -3918,6 +3919,23 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const constrainAngleFromAnchor = (anchor, x, y) => {
+    const ax = canvasXFromDrawingPoint(anchor);
+    const ay = canvasYFromDrawingPrice(anchor.price);
+    const dx = x - ax;
+    const dy = y - ay;
+    if (dx === 0 && dy === 0) return drawingPointFromCanvas(x, y);
+    const step = Math.PI / 4;
+    const snappedAngle = Math.round(Math.atan2(dy, dx) / step) * step;
+    const length = Math.hypot(dx, dy);
+    const sx = ax + Math.cos(snappedAngle) * length;
+    const sy = ay + Math.sin(snappedAngle) * length;
+    const resolved = drawingPointFromCanvas(sx, sy);
+    if (!resolved) return resolved;
+    if (Math.abs(Math.sin(snappedAngle)) < 1e-6) return { ...resolved, price: anchor.price };
+    if (Math.abs(Math.cos(snappedAngle)) < 1e-6) return { ...resolved, index: anchor.index };
+    return resolved;
+  };
   const normalizeDrawingPoint = (index, price) => {
     const roundedIndex = Math.round(index);
     const time = getTimeForIndex(roundedIndex);
@@ -4221,9 +4239,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4245,9 +4265,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "ray") {
       if (draftDrawing?.type === "ray") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4444,6 +4466,17 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
+        const constrained = anchor ? constrainAngleFromAnchor(anchor, x, y) : null;
+        if (constrained) {
+          return {
+            ...drawing,
+            points: drawing.points.map((point, index) => index === pointIndex ? constrained : point)
+          };
+        }
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,
@@ -4532,6 +4565,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4631,7 +4665,7 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    const crosshairDrag = false;
     pointerDownInfo = {
       pointerId: event.pointerId,
       pointerType: event.pointerType,
@@ -4655,6 +4689,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -4697,7 +4732,10 @@ function createChart(element, options = {}) {
       return;
     }
     if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
-      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      let nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
+        nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
+      }
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
@@ -5012,10 +5050,11 @@ function createChart(element, options = {}) {
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
     const active = event.metaKey || event.ctrlKey;
-    if (active !== magnetModifierActive) {
-      magnetModifierActive = active;
-      if (draftDrawing) draw();
-    }
+    const shift = event.shiftKey;
+    const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
+    magnetModifierActive = active;
+    shiftKeyActive = shift;
+    if (changed && draftDrawing) draw();
   };
   const onWindowBlurMagnet = () => {
     magnetModifierActive = false;

package/dist/hyperprop-charting-library.js

@@ -981,6 +981,7 @@ function createChart(element, options = {}) {
   let drawingEditTextHandler = null;
   let magnetMode = "none";
   let magnetModifierActive = false;
+  let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
@@ -3892,6 +3893,23 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const constrainAngleFromAnchor = (anchor, x, y) => {
+    const ax = canvasXFromDrawingPoint(anchor);
+    const ay = canvasYFromDrawingPrice(anchor.price);
+    const dx = x - ax;
+    const dy = y - ay;
+    if (dx === 0 && dy === 0) return drawingPointFromCanvas(x, y);
+    const step = Math.PI / 4;
+    const snappedAngle = Math.round(Math.atan2(dy, dx) / step) * step;
+    const length = Math.hypot(dx, dy);
+    const sx = ax + Math.cos(snappedAngle) * length;
+    const sy = ay + Math.sin(snappedAngle) * length;
+    const resolved = drawingPointFromCanvas(sx, sy);
+    if (!resolved) return resolved;
+    if (Math.abs(Math.sin(snappedAngle)) < 1e-6) return { ...resolved, price: anchor.price };
+    if (Math.abs(Math.cos(snappedAngle)) < 1e-6) return { ...resolved, index: anchor.index };
+    return resolved;
+  };
   const normalizeDrawingPoint = (index, price) => {
     const roundedIndex = Math.round(index);
     const time = getTimeForIndex(roundedIndex);
@@ -4195,9 +4213,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4219,9 +4239,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "ray") {
       if (draftDrawing?.type === "ray") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4418,6 +4440,17 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
+        const constrained = anchor ? constrainAngleFromAnchor(anchor, x, y) : null;
+        if (constrained) {
+          return {
+            ...drawing,
+            points: drawing.points.map((point, index) => index === pointIndex ? constrained : point)
+          };
+        }
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,
@@ -4506,6 +4539,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4605,7 +4639,7 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    const crosshairDrag = false;
     pointerDownInfo = {
       pointerId: event.pointerId,
       pointerType: event.pointerType,
@@ -4629,6 +4663,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -4671,7 +4706,10 @@ function createChart(element, options = {}) {
       return;
     }
     if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
-      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      let nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
+        nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
+      }
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
@@ -4986,10 +5024,11 @@ function createChart(element, options = {}) {
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
     const active = event.metaKey || event.ctrlKey;
-    if (active !== magnetModifierActive) {
-      magnetModifierActive = active;
-      if (draftDrawing) draw();
-    }
+    const shift = event.shiftKey;
+    const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
+    magnetModifierActive = active;
+    shiftKeyActive = shift;
+    if (changed && draftDrawing) draw();
   };
   const onWindowBlurMagnet = () => {
     magnetModifierActive = false;

package/dist/index.cjs

@@ -1007,6 +1007,7 @@ function createChart(element, options = {}) {
   let drawingEditTextHandler = null;
   let magnetMode = "none";
   let magnetModifierActive = false;
+  let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
@@ -3918,6 +3919,23 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const constrainAngleFromAnchor = (anchor, x, y) => {
+    const ax = canvasXFromDrawingPoint(anchor);
+    const ay = canvasYFromDrawingPrice(anchor.price);
+    const dx = x - ax;
+    const dy = y - ay;
+    if (dx === 0 && dy === 0) return drawingPointFromCanvas(x, y);
+    const step = Math.PI / 4;
+    const snappedAngle = Math.round(Math.atan2(dy, dx) / step) * step;
+    const length = Math.hypot(dx, dy);
+    const sx = ax + Math.cos(snappedAngle) * length;
+    const sy = ay + Math.sin(snappedAngle) * length;
+    const resolved = drawingPointFromCanvas(sx, sy);
+    if (!resolved) return resolved;
+    if (Math.abs(Math.sin(snappedAngle)) < 1e-6) return { ...resolved, price: anchor.price };
+    if (Math.abs(Math.cos(snappedAngle)) < 1e-6) return { ...resolved, index: anchor.index };
+    return resolved;
+  };
   const normalizeDrawingPoint = (index, price) => {
     const roundedIndex = Math.round(index);
     const time = getTimeForIndex(roundedIndex);
@@ -4221,9 +4239,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4245,9 +4265,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "ray") {
       if (draftDrawing?.type === "ray") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4444,6 +4466,17 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
+        const constrained = anchor ? constrainAngleFromAnchor(anchor, x, y) : null;
+        if (constrained) {
+          return {
+            ...drawing,
+            points: drawing.points.map((point, index) => index === pointIndex ? constrained : point)
+          };
+        }
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,
@@ -4532,6 +4565,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4631,7 +4665,7 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    const crosshairDrag = false;
     pointerDownInfo = {
       pointerId: event.pointerId,
       pointerType: event.pointerType,
@@ -4655,6 +4689,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -4697,7 +4732,10 @@ function createChart(element, options = {}) {
       return;
     }
     if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
-      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      let nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
+        nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
+      }
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
@@ -5012,10 +5050,11 @@ function createChart(element, options = {}) {
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
     const active = event.metaKey || event.ctrlKey;
-    if (active !== magnetModifierActive) {
-      magnetModifierActive = active;
-      if (draftDrawing) draw();
-    }
+    const shift = event.shiftKey;
+    const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
+    magnetModifierActive = active;
+    shiftKeyActive = shift;
+    if (changed && draftDrawing) draw();
   };
   const onWindowBlurMagnet = () => {
     magnetModifierActive = false;

package/dist/index.js

@@ -981,6 +981,7 @@ function createChart(element, options = {}) {
   let drawingEditTextHandler = null;
   let magnetMode = "none";
   let magnetModifierActive = false;
+  let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
@@ -3892,6 +3893,23 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const constrainAngleFromAnchor = (anchor, x, y) => {
+    const ax = canvasXFromDrawingPoint(anchor);
+    const ay = canvasYFromDrawingPrice(anchor.price);
+    const dx = x - ax;
+    const dy = y - ay;
+    if (dx === 0 && dy === 0) return drawingPointFromCanvas(x, y);
+    const step = Math.PI / 4;
+    const snappedAngle = Math.round(Math.atan2(dy, dx) / step) * step;
+    const length = Math.hypot(dx, dy);
+    const sx = ax + Math.cos(snappedAngle) * length;
+    const sy = ay + Math.sin(snappedAngle) * length;
+    const resolved = drawingPointFromCanvas(sx, sy);
+    if (!resolved) return resolved;
+    if (Math.abs(Math.sin(snappedAngle)) < 1e-6) return { ...resolved, price: anchor.price };
+    if (Math.abs(Math.cos(snappedAngle)) < 1e-6) return { ...resolved, index: anchor.index };
+    return resolved;
+  };
   const normalizeDrawingPoint = (index, price) => {
     const roundedIndex = Math.round(index);
     const time = getTimeForIndex(roundedIndex);
@@ -4195,9 +4213,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "trendline") {
       if (draftDrawing?.type === "trendline") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4219,9 +4239,11 @@ function createChart(element, options = {}) {
     }
     if (activeDrawingTool === "ray") {
       if (draftDrawing?.type === "ray") {
+        const anchor = draftDrawing.points[0];
+        const endPoint = shiftKeyActive ? constrainAngleFromAnchor(anchor, x, y) ?? point : point;
         const completed = normalizeDrawingState({
           ...serializeDrawing(draftDrawing),
-          points: [draftDrawing.points[0], point]
+          points: [anchor, endPoint]
         });
         drawings.push(completed);
         draftDrawing = null;
@@ -4418,6 +4440,17 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
+        const constrained = anchor ? constrainAngleFromAnchor(anchor, x, y) : null;
+        if (constrained) {
+          return {
+            ...drawing,
+            points: drawing.points.map((point, index) => index === pointIndex ? constrained : point)
+          };
+        }
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,
@@ -4506,6 +4539,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -4605,7 +4639,7 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    const crosshairDrag = false;
     pointerDownInfo = {
       pointerId: event.pointerId,
       pointerType: event.pointerType,
@@ -4629,6 +4663,7 @@ function createChart(element, options = {}) {
       event.preventDefault();
     }
     magnetModifierActive = event.metaKey || event.ctrlKey;
+    shiftKeyActive = event.shiftKey;
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -4671,7 +4706,10 @@ function createChart(element, options = {}) {
       return;
     }
     if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
-      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      let nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
+        nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
+      }
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
@@ -4986,10 +5024,11 @@ function createChart(element, options = {}) {
   canvas.addEventListener("contextmenu", onContextMenu);
   const onModifierKeyChange = (event) => {
     const active = event.metaKey || event.ctrlKey;
-    if (active !== magnetModifierActive) {
-      magnetModifierActive = active;
-      if (draftDrawing) draw();
-    }
+    const shift = event.shiftKey;
+    const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
+    magnetModifierActive = active;
+    shiftKeyActive = shift;
+    if (changed && draftDrawing) draw();
   };
   const onWindowBlurMagnet = () => {
     magnetModifierActive = false;

package/docs/API.md

@@ -486,6 +486,7 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `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`.
 - `setTradeMarkers(markers: TradeMarkerOptions[]): void` — draw trade execution markers (arrow + `qty @ price` label) on the candle of each fill's `time`. Buy = arrow below the low pointing up; sell = arrow above the high pointing down. Each marker: `{ time (ms|ISO), price, side: "buy"|"sell", qty?, text?, color?, textColor? }` (defaults: buy `#2962ff`, sell `#f23645`, text `#d1d4dc`). Markers resolve to bars by time, so they persist across timeframe switches and scrolling. Pass `[]` to clear.
 - `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.
+- Hold **Shift** while drawing or dragging an endpoint of a `trendline`/`ray` to constrain it to the nearest 0/45/90° angle (e.g. a perfectly horizontal line).
 - `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.105",
+  "version": "0.1.107",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",