hyperprop-charting-library 0.1.53 → 0.1.55

package/dist/hyperprop-charting-library.cjs

@@ -214,7 +214,8 @@ var DEFAULT_OPTIONS = {
   },
   labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
-  indicators: []
+  indicators: [],
+  drawings: []
 };
 var mergeChartOptions = (baseOptions, options = {}) => ({
   ...baseOptions,
@@ -905,6 +906,7 @@ function createChart(element, options = {}) {
   let generatedPriceLineId = 1;
   let generatedOrderLineId = 1;
   let generatedIndicatorId = 1;
+  let generatedDrawingId = 1;
   const indicatorRegistry = /* @__PURE__ */ new Map();
   for (const indicator of BUILTIN_INDICATORS) {
     indicatorRegistry.set(indicator.id, indicator);
@@ -927,7 +929,41 @@ function createChart(element, options = {}) {
       }
     };
   };
+  const normalizeDrawingState = (drawing) => ({
+    id: drawing.id ?? `drawing-${generatedDrawingId++}`,
+    type: drawing.type,
+    points: drawing.points.map((point) => ({
+      index: Number(point.index) || 0,
+      price: Number(point.price) || 0,
+      ...point.time ? { time: point.time } : {}
+    })),
+    visible: drawing.visible ?? true,
+    color: drawing.color ?? "#94a3b8",
+    style: drawing.style ?? "dotted",
+    width: Math.max(1, Number(drawing.width) || 1),
+    locked: drawing.locked ?? false,
+    ...drawing.label === void 0 ? {} : { label: drawing.label }
+  });
+  const serializeDrawing = (drawing) => ({
+    id: drawing.id,
+    type: drawing.type,
+    points: drawing.points.map((point) => ({ ...point })),
+    visible: drawing.visible,
+    color: drawing.color,
+    style: drawing.style,
+    width: drawing.width,
+    locked: drawing.locked,
+    ...drawing.label === void 0 ? {} : { label: drawing.label }
+  });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
+  let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
+  let activeDrawingTool = null;
+  let draftDrawing = null;
+  let drawingsChangeHandler = null;
+  let drawingSelectHandler = null;
+  const emitDrawingsChange = () => {
+    drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
+  };
   const orderWidgetWidthById = /* @__PURE__ */ new Map();
   const orderPriceTagWidthById = /* @__PURE__ */ new Map();
   let xCenter = 0;
@@ -1981,6 +2017,55 @@ function createChart(element, options = {}) {
     const yFromPrice = (price) => {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
+    const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
+    const drawDrawingHandle = (x, y, color) => {
+      ctx.save();
+      ctx.setLineDash([]);
+      ctx.fillStyle = mergedOptions.backgroundColor;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+    };
+    const drawDrawing = (drawing, draft = false) => {
+      if (!drawing.visible) {
+        return;
+      }
+      ctx.save();
+      ctx.strokeStyle = drawing.color;
+      ctx.lineWidth = drawing.width;
+      ctx.globalAlpha = draft ? 0.72 : 1;
+      applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+      if (drawing.type === "horizontal-line") {
+        const point = drawing.points[0];
+        if (point) {
+          const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          ctx.beginPath();
+          ctx.moveTo(crisp(chartLeft), crisp(y));
+          ctx.lineTo(crisp(chartRight), crisp(y));
+          ctx.stroke();
+        }
+      } else if (drawing.type === "trendline") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (first && second) {
+          const firstX = xFromDrawingPoint(first);
+          const firstY = yFromPrice(first.price);
+          const secondX = xFromDrawingPoint(second);
+          const secondY = yFromPrice(second.price);
+          ctx.beginPath();
+          ctx.moveTo(firstX, firstY);
+          ctx.lineTo(secondX, secondY);
+          ctx.stroke();
+          drawDrawingHandle(firstX, firstY, drawing.color);
+          drawDrawingHandle(secondX, secondY, drawing.color);
+        }
+      }
+      ctx.restore();
+    };
     if (watermark.visible && watermark.imageSrc.trim().length > 0) {
       ensureWatermarkImage(watermark.imageSrc.trim());
       if (watermarkImageReady && watermarkImage) {
@@ -2152,6 +2237,10 @@ function createChart(element, options = {}) {
         );
       });
     }
+    drawings.forEach((drawing) => drawDrawing(drawing));
+    if (draftDrawing) {
+      drawDrawing(draftDrawing, true);
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -2541,8 +2630,14 @@ function createChart(element, options = {}) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
     if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
-      const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
+      const isLegendInputValue = (value) => {
+        if (typeof value === "number" || typeof value === "boolean") {
+          return true;
+        }
+        return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
+      };
+      const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
+        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -2982,6 +3077,66 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const drawingPointFromCanvas = (x, y) => {
+    if (!drawState) {
+      return null;
+    }
+    const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const index = drawState.xStart + ratio * drawState.xSpan - 0.5;
+    const nearestIndex = Math.round(index);
+    const time = getTimeForIndex(nearestIndex);
+    return {
+      index,
+      price: roundToPricePrecision(priceFromCanvasY(y)),
+      ...time ? { time: time.toISOString() } : {}
+    };
+  };
+  const canvasXFromDrawingPoint = (point) => {
+    if (!drawState) return 0;
+    return drawState.chartLeft + (point.index + 0.5 - drawState.xStart) / drawState.xSpan * drawState.chartWidth;
+  };
+  const canvasYFromDrawingPrice = (price) => {
+    if (!drawState) return 0;
+    const range = drawState.yMax - drawState.yMin || 1;
+    return drawState.chartBottom - (price - drawState.yMin) / range * drawState.chartHeight;
+  };
+  const distanceToSegment = (x, y, x1, y1, x2, y2) => {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lengthSq = dx * dx + dy * dy;
+    if (lengthSq === 0) return Math.hypot(x - x1, y - y1);
+    const t = clamp(((x - x1) * dx + (y - y1) * dy) / lengthSq, 0, 1);
+    return Math.hypot(x - (x1 + t * dx), y - (y1 + t * dy));
+  };
+  const getDrawingHit = (x, y) => {
+    for (let index = drawings.length - 1; index >= 0; index -= 1) {
+      const drawing = drawings[index];
+      if (!drawing?.visible) continue;
+      if (drawing.type === "horizontal-line") {
+        const point = drawing.points[0];
+        if (!point) continue;
+        const lineY = canvasYFromDrawingPrice(point.price);
+        if (Math.abs(y - lineY) <= 7) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "trendline") {
+        const first = drawing.points[0];
+        const second = drawing.points[1];
+        if (!first || !second) continue;
+        const x1 = canvasXFromDrawingPoint(first);
+        const y1 = canvasYFromDrawingPrice(first.price);
+        const x2 = canvasXFromDrawingPoint(second);
+        const y2 = canvasYFromDrawingPrice(second.price);
+        if (Math.hypot(x - x1, y - y1) <= 8 || Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle" };
+        }
+        if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+          return { drawing, target: "line" };
+        }
+      }
+    }
+    return null;
+  };
   const indexFromCanvasX = (x) => {
     if (!drawState) {
       return null;
@@ -3034,6 +3189,53 @@ function createChart(element, options = {}) {
     }
     return "outside";
   };
+  const handleDrawingToolPointerDown = (x, y) => {
+    if (!activeDrawingTool || !drawState) {
+      return false;
+    }
+    const point = drawingPointFromCanvas(x, y);
+    if (!point) {
+      return false;
+    }
+    if (activeDrawingTool === "horizontal-line") {
+      drawings.push(
+        normalizeDrawingState({
+          type: "horizontal-line",
+          points: [point],
+          color: "#38bdf8",
+          style: "dotted",
+          width: 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "trendline") {
+      if (draftDrawing?.type === "trendline") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      draftDrawing = normalizeDrawingState({
+        type: "trendline",
+        points: [point, point],
+        color: "#2563eb",
+        style: "solid",
+        width: 2
+      });
+      draw();
+      return true;
+    }
+    return false;
+  };
   let isDragging = false;
   let dragMode = null;
   let lastPointerX = 0;
@@ -3159,6 +3361,25 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        drawingSelectHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          x: point.x,
+          y: point.y
+        });
+        setCrosshairPoint(null);
+        canvas.style.cursor = "pointer";
+        return;
+      }
+    }
+    if (region === "plot" && handleDrawingToolPointerDown(point.x, point.y)) {
+      setCrosshairPoint(null);
+      canvas.style.cursor = "crosshair";
+      return;
+    }
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
@@ -3190,6 +3411,18 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (draftDrawing && activeDrawingTool === "trendline") {
+      const nextPoint = drawingPointFromCanvas(point.x, point.y);
+      if (nextPoint) {
+        draftDrawing = {
+          ...draftDrawing,
+          points: [draftDrawing.points[0], nextPoint]
+        };
+        canvas.style.cursor = "crosshair";
+        draw();
+        return;
+      }
+    }
     if (orderDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3260,9 +3493,14 @@ function createChart(element, options = {}) {
         setCrosshairPoint(null);
         return;
       }
+      if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
+        canvas.style.cursor = "pointer";
+        setCrosshairPoint(null);
+        return;
+      }
       const hoverRegion = getHitRegion(point.x, point.y);
       if (hoverRegion === "plot") {
-        canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
+        canvas.style.cursor = activeDrawingTool ? "crosshair" : doubleClickEnabled ? "default" : "crosshair";
         setCrosshairPoint(point);
         emitCrosshairMove(point.x, point.y, "plot");
       } else if (hoverRegion === "x-axis") {
@@ -3661,6 +3899,56 @@ function createChart(element, options = {}) {
     indicators = indicators.filter((indicator) => indicator.id !== id);
     draw();
   };
+  const setActiveDrawingTool = (tool) => {
+    activeDrawingTool = tool;
+    draftDrawing = null;
+    canvas.style.cursor = tool ? "crosshair" : "default";
+    draw();
+  };
+  const getActiveDrawingTool = () => activeDrawingTool;
+  const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
+  const setDrawings = (nextDrawings) => {
+    drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
+    draftDrawing = null;
+    emitDrawingsChange();
+    draw();
+  };
+  const addDrawing = (drawing) => {
+    const next = normalizeDrawingState(drawing);
+    drawings.push(next);
+    emitDrawingsChange();
+    draw();
+    return next.id;
+  };
+  const updateDrawing = (id, patch) => {
+    drawings = drawings.map(
+      (drawing) => drawing.id === id ? normalizeDrawingState({
+        ...serializeDrawing(drawing),
+        ...patch,
+        id,
+        points: patch.points ?? drawing.points
+      }) : drawing
+    );
+    emitDrawingsChange();
+    draw();
+  };
+  const removeDrawing = (id) => {
+    drawings = drawings.filter((drawing) => drawing.id !== id);
+    emitDrawingsChange();
+    draw();
+  };
+  const clearDrawings = () => {
+    drawings = [];
+    draftDrawing = null;
+    emitDrawingsChange();
+    draw();
+  };
+  const onDrawingsChange = (handler) => {
+    drawingsChangeHandler = handler;
+  };
+  const onDrawingSelect = (handler) => {
+    drawingSelectHandler = handler;
+  };
   const destroy = () => {
     if (smoothingRafId !== null) {
       cancelAnimationFrame(smoothingRafId);
@@ -3704,6 +3992,16 @@ function createChart(element, options = {}) {
     getViewport,
     setViewport,
     onViewportChange,
+    setActiveDrawingTool,
+    getActiveDrawingTool,
+    setDrawings,
+    getDrawings,
+    addDrawing,
+    updateDrawing,
+    removeDrawing,
+    clearDrawings,
+    onDrawingsChange,
+    onDrawingSelect,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

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

@@ -40,8 +40,32 @@ interface ChartOptions {
     labels?: LabelsOptions;
     dashPatterns?: Partial<DashPatternOptions>;
     indicators?: IndicatorInstanceOptions[];
+    drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
+type DrawingToolType = "horizontal-line" | "trendline";
+interface DrawingPoint {
+    index: number;
+    price: number;
+    time?: string;
+}
+interface DrawingObjectOptions {
+    id?: string;
+    type: DrawingToolType;
+    points: DrawingPoint[];
+    visible?: boolean;
+    color?: string;
+    style?: "solid" | "dotted" | "dashed";
+    width?: number;
+    label?: string;
+    locked?: boolean;
+}
+interface DrawingSelectEvent {
+    drawing: DrawingObjectOptions;
+    target: "line" | "handle";
+    x: number;
+    y: number;
+}
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -363,6 +387,16 @@ interface ChartInstance {
     getViewport: () => ViewportState;
     setViewport: (viewport: Partial<ViewportState>) => void;
     onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
+    setActiveDrawingTool: (tool: DrawingToolType | null) => void;
+    getActiveDrawingTool: () => DrawingToolType | null;
+    setDrawings: (nextDrawings: DrawingObjectOptions[]) => void;
+    getDrawings: () => DrawingObjectOptions[];
+    addDrawing: (drawing: DrawingObjectOptions) => string;
+    updateDrawing: (id: string, patch: Partial<DrawingObjectOptions>) => void;
+    removeDrawing: (id: string) => void;
+    clearDrawings: () => void;
+    onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
+    onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -398,4 +432,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };