hyperprop-charting-library 0.1.85 → 0.1.87

package/dist/hyperprop-charting-library.cjs

@@ -968,6 +968,7 @@ function createChart(element, options = {}) {
     leverage: Number(drawing.leverage) || 1,
     pointValue: Number(drawing.pointValue) || 1,
     qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
+    fontSize: Math.max(6, Number(drawing.fontSize) || 14),
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -987,6 +988,7 @@ function createChart(element, options = {}) {
     leverage: drawing.leverage,
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
+    fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -997,6 +999,7 @@ function createChart(element, options = {}) {
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
+  let drawingEditTextHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2635,6 +2638,46 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
           }
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (anchor) {
+          const ax = xFromDrawingPoint(anchor);
+          const ay = yFromPrice(anchor.price);
+          const isNote = drawing.type === "note";
+          const fontSize = Math.max(6, drawing.fontSize);
+          const prevFont = ctx.font;
+          ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          const lines = (drawing.label ?? "").split("\n");
+          const lineH = Math.round(fontSize * 1.35);
+          const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+          const padX = isNote ? 8 : 2;
+          const padY = isNote ? 6 : 1;
+          const blockW = textW + padX * 2;
+          const blockH = lines.length * lineH + padY * 2;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.7 : 1;
+          if (isNote) {
+            ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+            fillRoundedRect(ax, ay, blockW, blockH, 4);
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+            ctx.lineWidth = 1;
+            strokeRoundedRect(ax, ay, blockW, blockH, 4);
+          }
+          ctx.fillStyle = drawing.color;
+          lines.forEach((line, lineIndex) => ctx.fillText(line, ax + padX, ay + padY + lineIndex * lineH));
+          ctx.restore();
+          ctx.font = prevFont;
+          if (isSelected) {
+            ctx.save();
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.9);
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            strokeRoundedRect(ax - 2, ay - 2, blockW + 4, blockH + 4, 3);
+            ctx.restore();
+          }
+        }
       }
       ctx.restore();
     };
@@ -3883,6 +3926,27 @@ function createChart(element, options = {}) {
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (!anchor) continue;
+        const ax = canvasXFromDrawingPoint(anchor);
+        const ay = canvasYFromDrawingPrice(anchor.price);
+        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        const fontSize = Math.max(6, drawing.fontSize);
+        const prevFont = ctx.font;
+        ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+        const lines = (drawing.label ?? "").split("\n");
+        const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+        ctx.font = prevFont;
+        const isNote = drawing.type === "note";
+        const padX = isNote ? 8 : 2;
+        const padY = isNote ? 6 : 1;
+        const lineH = Math.round(fontSize * 1.35);
+        const blockW = textW + padX * 2;
+        const blockH = lines.length * lineH + padY * 2;
+        if (x >= ax && x <= ax + blockW && y >= ay && y <= ay + blockH) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -4083,6 +4147,24 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "text" || activeDrawingTool === "note") {
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      const created = normalizeDrawingState({
+        type: activeDrawingTool,
+        points: [point],
+        color: defaults.color ?? "#e2e8f0",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.fontSize === void 0 ? {} : { fontSize: defaults.fontSize },
+        label: ""
+      });
+      drawings.push(created);
+      selectedDrawingId = created.id;
+      emitDrawingsChange();
+      draw();
+      drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4705,13 +4787,18 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
-        drawingDoubleClickHandler?.({
+        const payload = {
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
-        });
+        };
+        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note") {
+          drawingEditTextHandler?.(payload);
+        } else {
+          drawingDoubleClickHandler?.(payload);
+        }
         return;
       }
     }
@@ -5028,6 +5115,9 @@ function createChart(element, options = {}) {
   const onDrawingDoubleClick = (handler) => {
     drawingDoubleClickHandler = handler;
   };
+  const onDrawingEditText = (handler) => {
+    drawingEditTextHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -5086,6 +5176,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingDoubleClick,
+    onDrawingEditText,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

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" | "long-position" | "short-position" | "price-range";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -73,6 +73,7 @@ interface DrawingObjectOptions {
     leverage?: number;
     pointValue?: number;
     qtyPrecision?: number;
+    fontSize?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -91,7 +92,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -428,6 +429,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingEditText: (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

@@ -942,6 +942,7 @@ function createChart(element, options = {}) {
     leverage: Number(drawing.leverage) || 1,
     pointValue: Number(drawing.pointValue) || 1,
     qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
+    fontSize: Math.max(6, Number(drawing.fontSize) || 14),
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -961,6 +962,7 @@ function createChart(element, options = {}) {
     leverage: drawing.leverage,
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
+    fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -971,6 +973,7 @@ function createChart(element, options = {}) {
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
+  let drawingEditTextHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2609,6 +2612,46 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
           }
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (anchor) {
+          const ax = xFromDrawingPoint(anchor);
+          const ay = yFromPrice(anchor.price);
+          const isNote = drawing.type === "note";
+          const fontSize = Math.max(6, drawing.fontSize);
+          const prevFont = ctx.font;
+          ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          const lines = (drawing.label ?? "").split("\n");
+          const lineH = Math.round(fontSize * 1.35);
+          const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+          const padX = isNote ? 8 : 2;
+          const padY = isNote ? 6 : 1;
+          const blockW = textW + padX * 2;
+          const blockH = lines.length * lineH + padY * 2;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.7 : 1;
+          if (isNote) {
+            ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+            fillRoundedRect(ax, ay, blockW, blockH, 4);
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+            ctx.lineWidth = 1;
+            strokeRoundedRect(ax, ay, blockW, blockH, 4);
+          }
+          ctx.fillStyle = drawing.color;
+          lines.forEach((line, lineIndex) => ctx.fillText(line, ax + padX, ay + padY + lineIndex * lineH));
+          ctx.restore();
+          ctx.font = prevFont;
+          if (isSelected) {
+            ctx.save();
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.9);
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            strokeRoundedRect(ax - 2, ay - 2, blockW + 4, blockH + 4, 3);
+            ctx.restore();
+          }
+        }
       }
       ctx.restore();
     };
@@ -3857,6 +3900,27 @@ function createChart(element, options = {}) {
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (!anchor) continue;
+        const ax = canvasXFromDrawingPoint(anchor);
+        const ay = canvasYFromDrawingPrice(anchor.price);
+        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        const fontSize = Math.max(6, drawing.fontSize);
+        const prevFont = ctx.font;
+        ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+        const lines = (drawing.label ?? "").split("\n");
+        const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+        ctx.font = prevFont;
+        const isNote = drawing.type === "note";
+        const padX = isNote ? 8 : 2;
+        const padY = isNote ? 6 : 1;
+        const lineH = Math.round(fontSize * 1.35);
+        const blockW = textW + padX * 2;
+        const blockH = lines.length * lineH + padY * 2;
+        if (x >= ax && x <= ax + blockW && y >= ay && y <= ay + blockH) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -4057,6 +4121,24 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "text" || activeDrawingTool === "note") {
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      const created = normalizeDrawingState({
+        type: activeDrawingTool,
+        points: [point],
+        color: defaults.color ?? "#e2e8f0",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.fontSize === void 0 ? {} : { fontSize: defaults.fontSize },
+        label: ""
+      });
+      drawings.push(created);
+      selectedDrawingId = created.id;
+      emitDrawingsChange();
+      draw();
+      drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4679,13 +4761,18 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
-        drawingDoubleClickHandler?.({
+        const payload = {
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
-        });
+        };
+        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note") {
+          drawingEditTextHandler?.(payload);
+        } else {
+          drawingDoubleClickHandler?.(payload);
+        }
         return;
       }
     }
@@ -5002,6 +5089,9 @@ function createChart(element, options = {}) {
   const onDrawingDoubleClick = (handler) => {
     drawingDoubleClickHandler = handler;
   };
+  const onDrawingEditText = (handler) => {
+    drawingEditTextHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -5060,6 +5150,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingDoubleClick,
+    onDrawingEditText,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -968,6 +968,7 @@ function createChart(element, options = {}) {
     leverage: Number(drawing.leverage) || 1,
     pointValue: Number(drawing.pointValue) || 1,
     qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
+    fontSize: Math.max(6, Number(drawing.fontSize) || 14),
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -987,6 +988,7 @@ function createChart(element, options = {}) {
     leverage: drawing.leverage,
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
+    fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -997,6 +999,7 @@ function createChart(element, options = {}) {
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
+  let drawingEditTextHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2635,6 +2638,46 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
           }
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (anchor) {
+          const ax = xFromDrawingPoint(anchor);
+          const ay = yFromPrice(anchor.price);
+          const isNote = drawing.type === "note";
+          const fontSize = Math.max(6, drawing.fontSize);
+          const prevFont = ctx.font;
+          ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          const lines = (drawing.label ?? "").split("\n");
+          const lineH = Math.round(fontSize * 1.35);
+          const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+          const padX = isNote ? 8 : 2;
+          const padY = isNote ? 6 : 1;
+          const blockW = textW + padX * 2;
+          const blockH = lines.length * lineH + padY * 2;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.7 : 1;
+          if (isNote) {
+            ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+            fillRoundedRect(ax, ay, blockW, blockH, 4);
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+            ctx.lineWidth = 1;
+            strokeRoundedRect(ax, ay, blockW, blockH, 4);
+          }
+          ctx.fillStyle = drawing.color;
+          lines.forEach((line, lineIndex) => ctx.fillText(line, ax + padX, ay + padY + lineIndex * lineH));
+          ctx.restore();
+          ctx.font = prevFont;
+          if (isSelected) {
+            ctx.save();
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.9);
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            strokeRoundedRect(ax - 2, ay - 2, blockW + 4, blockH + 4, 3);
+            ctx.restore();
+          }
+        }
       }
       ctx.restore();
     };
@@ -3883,6 +3926,27 @@ function createChart(element, options = {}) {
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (!anchor) continue;
+        const ax = canvasXFromDrawingPoint(anchor);
+        const ay = canvasYFromDrawingPrice(anchor.price);
+        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        const fontSize = Math.max(6, drawing.fontSize);
+        const prevFont = ctx.font;
+        ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+        const lines = (drawing.label ?? "").split("\n");
+        const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+        ctx.font = prevFont;
+        const isNote = drawing.type === "note";
+        const padX = isNote ? 8 : 2;
+        const padY = isNote ? 6 : 1;
+        const lineH = Math.round(fontSize * 1.35);
+        const blockW = textW + padX * 2;
+        const blockH = lines.length * lineH + padY * 2;
+        if (x >= ax && x <= ax + blockW && y >= ay && y <= ay + blockH) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -4083,6 +4147,24 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "text" || activeDrawingTool === "note") {
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      const created = normalizeDrawingState({
+        type: activeDrawingTool,
+        points: [point],
+        color: defaults.color ?? "#e2e8f0",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.fontSize === void 0 ? {} : { fontSize: defaults.fontSize },
+        label: ""
+      });
+      drawings.push(created);
+      selectedDrawingId = created.id;
+      emitDrawingsChange();
+      draw();
+      drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4705,13 +4787,18 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
-        drawingDoubleClickHandler?.({
+        const payload = {
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
-        });
+        };
+        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note") {
+          drawingEditTextHandler?.(payload);
+        } else {
+          drawingDoubleClickHandler?.(payload);
+        }
         return;
       }
     }
@@ -5028,6 +5115,9 @@ function createChart(element, options = {}) {
   const onDrawingDoubleClick = (handler) => {
     drawingDoubleClickHandler = handler;
   };
+  const onDrawingEditText = (handler) => {
+    drawingEditTextHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -5086,6 +5176,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingDoubleClick,
+    onDrawingEditText,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

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" | "long-position" | "short-position" | "price-range";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -73,6 +73,7 @@ interface DrawingObjectOptions {
     leverage?: number;
     pointValue?: number;
     qtyPrecision?: number;
+    fontSize?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -91,7 +92,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -428,6 +429,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingEditText: (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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -73,6 +73,7 @@ interface DrawingObjectOptions {
     leverage?: number;
     pointValue?: number;
     qtyPrecision?: number;
+    fontSize?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -91,7 +92,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision" | "fontSize">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -428,6 +429,7 @@ interface ChartInstance {
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingEditText: (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

@@ -942,6 +942,7 @@ function createChart(element, options = {}) {
     leverage: Number(drawing.leverage) || 1,
     pointValue: Number(drawing.pointValue) || 1,
     qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
+    fontSize: Math.max(6, Number(drawing.fontSize) || 14),
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -961,6 +962,7 @@ function createChart(element, options = {}) {
     leverage: drawing.leverage,
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
+    fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -971,6 +973,7 @@ function createChart(element, options = {}) {
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
+  let drawingEditTextHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2609,6 +2612,46 @@ function createChart(element, options = {}) {
             drawDrawingLabel(drawing.label, midX, topY - 4, drawing.color);
           }
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (anchor) {
+          const ax = xFromDrawingPoint(anchor);
+          const ay = yFromPrice(anchor.price);
+          const isNote = drawing.type === "note";
+          const fontSize = Math.max(6, drawing.fontSize);
+          const prevFont = ctx.font;
+          ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          const lines = (drawing.label ?? "").split("\n");
+          const lineH = Math.round(fontSize * 1.35);
+          const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+          const padX = isNote ? 8 : 2;
+          const padY = isNote ? 6 : 1;
+          const blockW = textW + padX * 2;
+          const blockH = lines.length * lineH + padY * 2;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.7 : 1;
+          if (isNote) {
+            ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+            fillRoundedRect(ax, ay, blockW, blockH, 4);
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+            ctx.lineWidth = 1;
+            strokeRoundedRect(ax, ay, blockW, blockH, 4);
+          }
+          ctx.fillStyle = drawing.color;
+          lines.forEach((line, lineIndex) => ctx.fillText(line, ax + padX, ay + padY + lineIndex * lineH));
+          ctx.restore();
+          ctx.font = prevFont;
+          if (isSelected) {
+            ctx.save();
+            ctx.strokeStyle = hexToRgba(drawing.color, 0.9);
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            strokeRoundedRect(ax - 2, ay - 2, blockW + 4, blockH + 4, 3);
+            ctx.restore();
+          }
+        }
       }
       ctx.restore();
     };
@@ -3857,6 +3900,27 @@ function createChart(element, options = {}) {
         if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "text" || drawing.type === "note") {
+        const anchor = drawing.points[0];
+        if (!anchor) continue;
+        const ax = canvasXFromDrawingPoint(anchor);
+        const ay = canvasYFromDrawingPrice(anchor.price);
+        if (Math.hypot(x - ax, y - ay) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        const fontSize = Math.max(6, drawing.fontSize);
+        const prevFont = ctx.font;
+        ctx.font = `500 ${fontSize}px ${mergedOptions.fontFamily}`;
+        const lines = (drawing.label ?? "").split("\n");
+        const textW = Math.max(1, ...lines.map((line) => ctx.measureText(line).width));
+        ctx.font = prevFont;
+        const isNote = drawing.type === "note";
+        const padX = isNote ? 8 : 2;
+        const padY = isNote ? 6 : 1;
+        const lineH = Math.round(fontSize * 1.35);
+        const blockW = textW + padX * 2;
+        const blockH = lines.length * lineH + padY * 2;
+        if (x >= ax && x <= ax + blockW && y >= ay && y <= ay + blockH) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -4057,6 +4121,24 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "text" || activeDrawingTool === "note") {
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      const created = normalizeDrawingState({
+        type: activeDrawingTool,
+        points: [point],
+        color: defaults.color ?? "#e2e8f0",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.fontSize === void 0 ? {} : { fontSize: defaults.fontSize },
+        label: ""
+      });
+      drawings.push(created);
+      selectedDrawingId = created.id;
+      emitDrawingsChange();
+      draw();
+      drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4679,13 +4761,18 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
-        drawingDoubleClickHandler?.({
+        const payload = {
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
-        });
+        };
+        if (drawingHit.drawing.type === "text" || drawingHit.drawing.type === "note") {
+          drawingEditTextHandler?.(payload);
+        } else {
+          drawingDoubleClickHandler?.(payload);
+        }
         return;
       }
     }
@@ -5002,6 +5089,9 @@ function createChart(element, options = {}) {
   const onDrawingDoubleClick = (handler) => {
     drawingDoubleClickHandler = handler;
   };
+  const onDrawingEditText = (handler) => {
+    drawingEditTextHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -5060,6 +5150,7 @@ function createChart(element, options = {}) {
     onDrawingsChange,
     onDrawingSelect,
     onDrawingDoubleClick,
+    onDrawingEditText,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -483,6 +483,7 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `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)
+- `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`.
 - `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.85",
+  "version": "0.1.87",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",