hyperprop-charting-library 0.1.80 → 0.1.82

package/dist/hyperprop-charting-library.cjs

@@ -961,6 +961,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -973,6 +980,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -982,6 +996,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2429,6 +2444,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2463,6 +2512,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2480,9 +2537,20 @@ function createChart(element, options = {}) {
               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));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3945,7 +4013,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4515,6 +4590,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4825,6 +4914,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4882,6 +4974,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

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

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/hyperprop-charting-library.js

@@ -935,6 +935,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -947,6 +954,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -956,6 +970,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2403,6 +2418,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2437,6 +2486,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2454,9 +2511,20 @@ function createChart(element, options = {}) {
               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));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3919,7 +3987,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4489,6 +4564,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4799,6 +4888,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4856,6 +4948,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -961,6 +961,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -973,6 +980,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -982,6 +996,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2429,6 +2444,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2463,6 +2512,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2480,9 +2537,20 @@ function createChart(element, options = {}) {
               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));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3945,7 +4013,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4515,6 +4590,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4825,6 +4914,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4882,6 +4974,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.d.cts

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.d.ts

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.js

@@ -935,6 +935,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -947,6 +954,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -956,6 +970,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2403,6 +2418,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2437,6 +2486,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2454,9 +2511,20 @@ function createChart(element, options = {}) {
               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));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3919,7 +3987,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4489,6 +4564,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4799,6 +4888,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4856,6 +4948,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -422,7 +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. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`).
+  - `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. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`). Sizing inputs `accountSize`, `lotSize`, `risk`, `riskMode` (`"percent"|"amount"`), `leverage`, `pointValue`, `qtyPrecision` drive the Qty/Amount labels — set `pointValue` (contract $/point) from your app for real money values. The box also runs a trade simulation across the bars it covers: it shades the traversed region and draws a diagonal to the first bar that touches the target or stop, and the center label switches to "Closed P&L" (green if the target was hit first, red if the stop was hit first).
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -482,6 +482,7 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `fitContent(): void` (x-only fit, keeps y zoom)
 - `resetViewport(): void` (fit x + reset y auto-scale)
 - `setSelectedDrawing(id: string | null): void` (marks a drawing selected; only the selected/drafted drawing renders its handles, and position tools render their lines/labels only while selected)
+- `onDrawingDoubleClick(handler): void` (fires when a drawing is double-clicked; use it to open a settings dialog, e.g. for position tools)
 - `setActiveDrawingTool(tool: DrawingToolType | null): void` (`DrawingToolType` = `"horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`)
 - `getActiveDrawingTool(): DrawingToolType | null`
 - `setDrawings(drawings: DrawingObjectOptions[]): void`

package/package.json

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