hyperprop-charting-library 0.1.71 → 0.1.72

package/dist/hyperprop-charting-library.cjs

@@ -2391,6 +2391,88 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (entry && target && stop && right) {
+          const leftX = xFromDrawingPoint(entry);
+          const rightX = xFromDrawingPoint(right);
+          const boxX0 = Math.min(leftX, rightX);
+          const boxX1 = Math.max(leftX, rightX);
+          const boxW = Math.max(1, boxX1 - boxX0);
+          const entryY = yFromPrice(entry.price);
+          const targetY = yFromPrice(target.price);
+          const stopY = yFromPrice(stop.price);
+          const profitFill = "rgba(38,166,154,0.16)";
+          const lossFill = "rgba(239,83,80,0.16)";
+          const profitLine = "rgba(38,166,154,0.9)";
+          const lossLine = "rgba(239,83,80,0.9)";
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = profitFill;
+          ctx.fillRect(boxX0, Math.min(entryY, targetY), boxW, Math.abs(targetY - entryY));
+          ctx.fillStyle = lossFill;
+          ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
+          ctx.restore();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = profitLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(targetY));
+          ctx.lineTo(crisp(boxX1), crisp(targetY));
+          ctx.stroke();
+          ctx.strokeStyle = lossLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(stopY));
+          ctx.lineTo(crisp(boxX1), crisp(stopY));
+          ctx.stroke();
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(entryY));
+          ctx.lineTo(crisp(boxX1), crisp(entryY));
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(leftX, targetY, drawing.color);
+          drawDrawingHandle(leftX, entryY, drawing.color);
+          drawDrawingHandle(leftX, stopY, drawing.color);
+          drawDrawingHandle(rightX, entryY, drawing.color);
+          const tick = getConfiguredTickSize();
+          const pctOf = (price) => {
+            if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
+            return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+          };
+          const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+          const targetDist = Math.abs(target.price - entry.price);
+          const stopDist = Math.abs(entry.price - stop.price);
+          const rr = stopDist > 0 ? targetDist / stopDist : 0;
+          const cx = (boxX0 + boxX1) / 2;
+          const drawPositionPill = (text, centerX, centerY, bg) => {
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            const padding = 6;
+            const textW = ctx.measureText(text).width;
+            const pillW = textW + padding * 2;
+            const pillH = 18;
+            const pillX = centerX - pillW / 2;
+            const pillY = centerY - pillH / 2;
+            ctx.fillStyle = bg;
+            fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, centerX, pillY + pillH / 2);
+            ctx.font = prevFont;
+          };
+          drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
+          drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
+          drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3587,6 +3669,28 @@ function createChart(element, options = {}) {
         } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (!entry || !target || !stop || !right) continue;
+        const leftX = canvasXFromDrawingPoint(entry);
+        const rightX = canvasXFromDrawingPoint(right);
+        const entryY = canvasYFromDrawingPrice(entry.price);
+        const targetY = canvasYFromDrawingPrice(target.price);
+        const stopY = canvasYFromDrawingPrice(stop.price);
+        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const x0 = Math.min(leftX, rightX);
+        const x1 = Math.max(leftX, rightX);
+        const yTop = Math.min(targetY, stopY, entryY);
+        const yBot = Math.max(targetY, stopY, entryY);
+        if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3787,6 +3891,33 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
+      const isLong = activeDrawingTool === "long-position";
+      const tick = getConfiguredTickSize();
+      const priceOffset = tick > 0 ? tick * 20 : Math.abs(point.price) * 0.01 || 1;
+      const width2 = Math.max(5, Math.round(xSpan * 0.15));
+      const entryPrice = point.price;
+      const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
+      const stopPrice = isLong ? entryPrice - priceOffset : entryPrice + priceOffset;
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [
+            point,
+            normalizeDrawingPoint(point.index, targetPrice),
+            normalizeDrawingPoint(point.index, stopPrice),
+            normalizeDrawingPoint(point.index + width2, entryPrice)
+          ],
+          color: defaults.color ?? "#2563eb",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3810,6 +3941,22 @@ function createChart(element, options = {}) {
       if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
         return drawing;
       }
+      if (drawingDragState.target === "handle" && (drawing.type === "long-position" || drawing.type === "short-position")) {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const entry = pts[0];
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(entry.index, currentPoint.price);
+          if (pts[3]) pts[3] = normalizeDrawingPoint(pts[3].index, currentPoint.price);
+        } else if (pointIndex === 1 && pts[1]) {
+          pts[1] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 2 && pts[2]) {
+          pts[2] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 3 && pts[3]) {
+          pts[3] = normalizeDrawingPoint(currentPoint.index, entry.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,

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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/hyperprop-charting-library.js

@@ -2366,6 +2366,88 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (entry && target && stop && right) {
+          const leftX = xFromDrawingPoint(entry);
+          const rightX = xFromDrawingPoint(right);
+          const boxX0 = Math.min(leftX, rightX);
+          const boxX1 = Math.max(leftX, rightX);
+          const boxW = Math.max(1, boxX1 - boxX0);
+          const entryY = yFromPrice(entry.price);
+          const targetY = yFromPrice(target.price);
+          const stopY = yFromPrice(stop.price);
+          const profitFill = "rgba(38,166,154,0.16)";
+          const lossFill = "rgba(239,83,80,0.16)";
+          const profitLine = "rgba(38,166,154,0.9)";
+          const lossLine = "rgba(239,83,80,0.9)";
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = profitFill;
+          ctx.fillRect(boxX0, Math.min(entryY, targetY), boxW, Math.abs(targetY - entryY));
+          ctx.fillStyle = lossFill;
+          ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
+          ctx.restore();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = profitLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(targetY));
+          ctx.lineTo(crisp(boxX1), crisp(targetY));
+          ctx.stroke();
+          ctx.strokeStyle = lossLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(stopY));
+          ctx.lineTo(crisp(boxX1), crisp(stopY));
+          ctx.stroke();
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(entryY));
+          ctx.lineTo(crisp(boxX1), crisp(entryY));
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(leftX, targetY, drawing.color);
+          drawDrawingHandle(leftX, entryY, drawing.color);
+          drawDrawingHandle(leftX, stopY, drawing.color);
+          drawDrawingHandle(rightX, entryY, drawing.color);
+          const tick = getConfiguredTickSize();
+          const pctOf = (price) => {
+            if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
+            return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+          };
+          const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+          const targetDist = Math.abs(target.price - entry.price);
+          const stopDist = Math.abs(entry.price - stop.price);
+          const rr = stopDist > 0 ? targetDist / stopDist : 0;
+          const cx = (boxX0 + boxX1) / 2;
+          const drawPositionPill = (text, centerX, centerY, bg) => {
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            const padding = 6;
+            const textW = ctx.measureText(text).width;
+            const pillW = textW + padding * 2;
+            const pillH = 18;
+            const pillX = centerX - pillW / 2;
+            const pillY = centerY - pillH / 2;
+            ctx.fillStyle = bg;
+            fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, centerX, pillY + pillH / 2);
+            ctx.font = prevFont;
+          };
+          drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
+          drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
+          drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3562,6 +3644,28 @@ function createChart(element, options = {}) {
         } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (!entry || !target || !stop || !right) continue;
+        const leftX = canvasXFromDrawingPoint(entry);
+        const rightX = canvasXFromDrawingPoint(right);
+        const entryY = canvasYFromDrawingPrice(entry.price);
+        const targetY = canvasYFromDrawingPrice(target.price);
+        const stopY = canvasYFromDrawingPrice(stop.price);
+        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const x0 = Math.min(leftX, rightX);
+        const x1 = Math.max(leftX, rightX);
+        const yTop = Math.min(targetY, stopY, entryY);
+        const yBot = Math.max(targetY, stopY, entryY);
+        if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3762,6 +3866,33 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
+      const isLong = activeDrawingTool === "long-position";
+      const tick = getConfiguredTickSize();
+      const priceOffset = tick > 0 ? tick * 20 : Math.abs(point.price) * 0.01 || 1;
+      const width2 = Math.max(5, Math.round(xSpan * 0.15));
+      const entryPrice = point.price;
+      const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
+      const stopPrice = isLong ? entryPrice - priceOffset : entryPrice + priceOffset;
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [
+            point,
+            normalizeDrawingPoint(point.index, targetPrice),
+            normalizeDrawingPoint(point.index, stopPrice),
+            normalizeDrawingPoint(point.index + width2, entryPrice)
+          ],
+          color: defaults.color ?? "#2563eb",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3785,6 +3916,22 @@ function createChart(element, options = {}) {
       if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
         return drawing;
       }
+      if (drawingDragState.target === "handle" && (drawing.type === "long-position" || drawing.type === "short-position")) {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const entry = pts[0];
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(entry.index, currentPoint.price);
+          if (pts[3]) pts[3] = normalizeDrawingPoint(pts[3].index, currentPoint.price);
+        } else if (pointIndex === 1 && pts[1]) {
+          pts[1] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 2 && pts[2]) {
+          pts[2] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 3 && pts[3]) {
+          pts[3] = normalizeDrawingPoint(currentPoint.index, entry.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,

package/dist/index.cjs

@@ -2391,6 +2391,88 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (entry && target && stop && right) {
+          const leftX = xFromDrawingPoint(entry);
+          const rightX = xFromDrawingPoint(right);
+          const boxX0 = Math.min(leftX, rightX);
+          const boxX1 = Math.max(leftX, rightX);
+          const boxW = Math.max(1, boxX1 - boxX0);
+          const entryY = yFromPrice(entry.price);
+          const targetY = yFromPrice(target.price);
+          const stopY = yFromPrice(stop.price);
+          const profitFill = "rgba(38,166,154,0.16)";
+          const lossFill = "rgba(239,83,80,0.16)";
+          const profitLine = "rgba(38,166,154,0.9)";
+          const lossLine = "rgba(239,83,80,0.9)";
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = profitFill;
+          ctx.fillRect(boxX0, Math.min(entryY, targetY), boxW, Math.abs(targetY - entryY));
+          ctx.fillStyle = lossFill;
+          ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
+          ctx.restore();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = profitLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(targetY));
+          ctx.lineTo(crisp(boxX1), crisp(targetY));
+          ctx.stroke();
+          ctx.strokeStyle = lossLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(stopY));
+          ctx.lineTo(crisp(boxX1), crisp(stopY));
+          ctx.stroke();
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(entryY));
+          ctx.lineTo(crisp(boxX1), crisp(entryY));
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(leftX, targetY, drawing.color);
+          drawDrawingHandle(leftX, entryY, drawing.color);
+          drawDrawingHandle(leftX, stopY, drawing.color);
+          drawDrawingHandle(rightX, entryY, drawing.color);
+          const tick = getConfiguredTickSize();
+          const pctOf = (price) => {
+            if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
+            return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+          };
+          const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+          const targetDist = Math.abs(target.price - entry.price);
+          const stopDist = Math.abs(entry.price - stop.price);
+          const rr = stopDist > 0 ? targetDist / stopDist : 0;
+          const cx = (boxX0 + boxX1) / 2;
+          const drawPositionPill = (text, centerX, centerY, bg) => {
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            const padding = 6;
+            const textW = ctx.measureText(text).width;
+            const pillW = textW + padding * 2;
+            const pillH = 18;
+            const pillX = centerX - pillW / 2;
+            const pillY = centerY - pillH / 2;
+            ctx.fillStyle = bg;
+            fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, centerX, pillY + pillH / 2);
+            ctx.font = prevFont;
+          };
+          drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
+          drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
+          drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3587,6 +3669,28 @@ function createChart(element, options = {}) {
         } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (!entry || !target || !stop || !right) continue;
+        const leftX = canvasXFromDrawingPoint(entry);
+        const rightX = canvasXFromDrawingPoint(right);
+        const entryY = canvasYFromDrawingPrice(entry.price);
+        const targetY = canvasYFromDrawingPrice(target.price);
+        const stopY = canvasYFromDrawingPrice(stop.price);
+        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const x0 = Math.min(leftX, rightX);
+        const x1 = Math.max(leftX, rightX);
+        const yTop = Math.min(targetY, stopY, entryY);
+        const yBot = Math.max(targetY, stopY, entryY);
+        if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3787,6 +3891,33 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
+      const isLong = activeDrawingTool === "long-position";
+      const tick = getConfiguredTickSize();
+      const priceOffset = tick > 0 ? tick * 20 : Math.abs(point.price) * 0.01 || 1;
+      const width2 = Math.max(5, Math.round(xSpan * 0.15));
+      const entryPrice = point.price;
+      const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
+      const stopPrice = isLong ? entryPrice - priceOffset : entryPrice + priceOffset;
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [
+            point,
+            normalizeDrawingPoint(point.index, targetPrice),
+            normalizeDrawingPoint(point.index, stopPrice),
+            normalizeDrawingPoint(point.index + width2, entryPrice)
+          ],
+          color: defaults.color ?? "#2563eb",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3810,6 +3941,22 @@ function createChart(element, options = {}) {
       if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
         return drawing;
       }
+      if (drawingDragState.target === "handle" && (drawing.type === "long-position" || drawing.type === "short-position")) {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const entry = pts[0];
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(entry.index, currentPoint.price);
+          if (pts[3]) pts[3] = normalizeDrawingPoint(pts[3].index, currentPoint.price);
+        } else if (pointIndex === 1 && pts[1]) {
+          pts[1] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 2 && pts[2]) {
+          pts[2] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 3 && pts[3]) {
+          pts[3] = normalizeDrawingPoint(currentPoint.index, entry.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.js

@@ -2366,6 +2366,88 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (entry && target && stop && right) {
+          const leftX = xFromDrawingPoint(entry);
+          const rightX = xFromDrawingPoint(right);
+          const boxX0 = Math.min(leftX, rightX);
+          const boxX1 = Math.max(leftX, rightX);
+          const boxW = Math.max(1, boxX1 - boxX0);
+          const entryY = yFromPrice(entry.price);
+          const targetY = yFromPrice(target.price);
+          const stopY = yFromPrice(stop.price);
+          const profitFill = "rgba(38,166,154,0.16)";
+          const lossFill = "rgba(239,83,80,0.16)";
+          const profitLine = "rgba(38,166,154,0.9)";
+          const lossLine = "rgba(239,83,80,0.9)";
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = profitFill;
+          ctx.fillRect(boxX0, Math.min(entryY, targetY), boxW, Math.abs(targetY - entryY));
+          ctx.fillStyle = lossFill;
+          ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
+          ctx.restore();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = profitLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(targetY));
+          ctx.lineTo(crisp(boxX1), crisp(targetY));
+          ctx.stroke();
+          ctx.strokeStyle = lossLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(stopY));
+          ctx.lineTo(crisp(boxX1), crisp(stopY));
+          ctx.stroke();
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(entryY));
+          ctx.lineTo(crisp(boxX1), crisp(entryY));
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(leftX, targetY, drawing.color);
+          drawDrawingHandle(leftX, entryY, drawing.color);
+          drawDrawingHandle(leftX, stopY, drawing.color);
+          drawDrawingHandle(rightX, entryY, drawing.color);
+          const tick = getConfiguredTickSize();
+          const pctOf = (price) => {
+            if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
+            return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+          };
+          const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+          const targetDist = Math.abs(target.price - entry.price);
+          const stopDist = Math.abs(entry.price - stop.price);
+          const rr = stopDist > 0 ? targetDist / stopDist : 0;
+          const cx = (boxX0 + boxX1) / 2;
+          const drawPositionPill = (text, centerX, centerY, bg) => {
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            const padding = 6;
+            const textW = ctx.measureText(text).width;
+            const pillW = textW + padding * 2;
+            const pillH = 18;
+            const pillX = centerX - pillW / 2;
+            const pillY = centerY - pillH / 2;
+            ctx.fillStyle = bg;
+            fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, centerX, pillY + pillH / 2);
+            ctx.font = prevFont;
+          };
+          drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
+          drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
+          drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3562,6 +3644,28 @@ function createChart(element, options = {}) {
         } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (!entry || !target || !stop || !right) continue;
+        const leftX = canvasXFromDrawingPoint(entry);
+        const rightX = canvasXFromDrawingPoint(right);
+        const entryY = canvasYFromDrawingPrice(entry.price);
+        const targetY = canvasYFromDrawingPrice(target.price);
+        const stopY = canvasYFromDrawingPrice(stop.price);
+        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const x0 = Math.min(leftX, rightX);
+        const x1 = Math.max(leftX, rightX);
+        const yTop = Math.min(targetY, stopY, entryY);
+        const yBot = Math.max(targetY, stopY, entryY);
+        if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3762,6 +3866,33 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
+      const isLong = activeDrawingTool === "long-position";
+      const tick = getConfiguredTickSize();
+      const priceOffset = tick > 0 ? tick * 20 : Math.abs(point.price) * 0.01 || 1;
+      const width2 = Math.max(5, Math.round(xSpan * 0.15));
+      const entryPrice = point.price;
+      const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
+      const stopPrice = isLong ? entryPrice - priceOffset : entryPrice + priceOffset;
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [
+            point,
+            normalizeDrawingPoint(point.index, targetPrice),
+            normalizeDrawingPoint(point.index, stopPrice),
+            normalizeDrawingPoint(point.index + width2, entryPrice)
+          ],
+          color: defaults.color ?? "#2563eb",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3785,6 +3916,22 @@ function createChart(element, options = {}) {
       if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
         return drawing;
       }
+      if (drawingDragState.target === "handle" && (drawing.type === "long-position" || drawing.type === "short-position")) {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const entry = pts[0];
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(entry.index, currentPoint.price);
+          if (pts[3]) pts[3] = normalizeDrawingPoint(pts[3].index, currentPoint.price);
+        } else if (pointIndex === 1 && pts[1]) {
+          pts[1] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 2 && pts[2]) {
+          pts[2] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 3 && pts[3]) {
+          pts[3] = normalizeDrawingPoint(currentPoint.index, entry.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,

package/docs/API.md

@@ -422,6 +422,7 @@ Drawings are user-created chart tools, separate from indicators. They are intera
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
   - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
+  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio.
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -449,6 +450,8 @@ chart.setActiveDrawingTool("trendline");       // first click starts, second cli
 chart.setActiveDrawingTool("ray");             // first click starts, second click commits (extends past p2)
 chart.setActiveDrawingTool("fib-retracement"); // first click starts, second click commits
 chart.setActiveDrawingTool("fib-extension");   // three clicks: trend start, trend end, projection origin
+chart.setActiveDrawingTool("long-position");   // single click drops a long risk/reward box
+chart.setActiveDrawingTool("short-position");  // single click drops a short risk/reward box
 chart.setActiveDrawingTool(null);              // back to normal cursor/pan
 ```
 

package/package.json

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