hyperprop-charting-library 0.1.104 → 0.1.106

package/dist/hyperprop-charting-library.cjs

@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1003,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;
@@ -3017,6 +3022,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3895,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);
@@ -4198,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;
@@ -4222,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;
@@ -4421,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,
@@ -4509,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);
@@ -4632,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);
@@ -4674,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,
@@ -4989,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.d.ts

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/hyperprop-charting-library.js

@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -977,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;
@@ -2991,6 +2996,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3869,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);
@@ -4172,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;
@@ -4196,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;
@@ -4395,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,
@@ -4483,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);
@@ -4606,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);
@@ -4648,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,
@@ -4963,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

@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1003,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;
@@ -3017,6 +3022,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3895,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);
@@ -4198,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;
@@ -4222,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;
@@ -4421,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,
@@ -4509,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);
@@ -4632,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);
@@ -4674,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,
@@ -4989,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.d.cts

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/index.d.ts

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/index.js

@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -977,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;
@@ -2991,6 +2996,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3869,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);
@@ -4172,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;
@@ -4196,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;
@@ -4395,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,
@@ -4483,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);
@@ -4606,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);
@@ -4648,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,
@@ -4963,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.104",
+  "version": "0.1.106",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",