hyperprop-charting-library 0.1.107 → 0.1.109

package/dist/index.cjs

@@ -951,30 +951,54 @@ 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",
-    colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
-    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,
-    fontSize: Math.max(6, Number(drawing.fontSize) || 14),
-    ...drawing.label === void 0 ? {} : { label: drawing.label }
-  });
+  const bumpGeneratedDrawingIdPast = (id) => {
+    const match = /^drawing-(\d+)$/.exec(id);
+    if (!match) return;
+    const n = Number(match[1]);
+    if (Number.isFinite(n) && n >= generatedDrawingId) {
+      generatedDrawingId = n + 1;
+    }
+  };
+  const normalizeDrawingState = (drawing) => {
+    const id = drawing.id ?? `drawing-${generatedDrawingId++}`;
+    bumpGeneratedDrawingIdPast(id);
+    return {
+      id,
+      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",
+      colors: Array.isArray(drawing.colors) ? drawing.colors.filter((value) => typeof value === "string") : [],
+      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,
+      fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      ...drawing.label === void 0 ? {} : { label: drawing.label }
+    };
+  };
+  const dedupeDrawingIds = (list) => {
+    const seen = /* @__PURE__ */ new Set();
+    return list.map((drawing) => {
+      if (!seen.has(drawing.id)) {
+        seen.add(drawing.id);
+        return drawing;
+      }
+      const id = `drawing-${generatedDrawingId++}`;
+      seen.add(id);
+      return { ...drawing, id };
+    });
+  };
   const serializeDrawing = (drawing) => ({
     id: drawing.id,
     type: drawing.type,
@@ -997,7 +1021,9 @@ function createChart(element, options = {}) {
   });
   let tradeMarkers = [];
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
-  let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
+  let drawings = dedupeDrawingIds(
+    (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing))
+  );
   let activeDrawingTool = null;
   let draftDrawing = null;
   let drawingDragState = null;
@@ -1072,7 +1098,7 @@ function createChart(element, options = {}) {
     if (Math.abs(priceDiff) < 1e-9 && Math.abs(volumeDiff) < 1e-6) {
       smoothedTickerPrice = tickerPriceTarget;
       smoothedTickerVolume = tickerVolumeTarget;
-      draw({ updateAutoScale: false });
+      scheduleDraw({ updateAutoScale: false });
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
@@ -1081,7 +1107,7 @@ function createChart(element, options = {}) {
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
     smoothedTickerVolume += volumeDiff * lerp;
-    draw({ updateAutoScale: false });
+    scheduleDraw({ updateAutoScale: false });
     smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
   };
   const pushSmoothedTicker = (targetPrice, targetVolume) => {
@@ -1146,7 +1172,7 @@ function createChart(element, options = {}) {
     image.onload = () => {
       watermarkImage = image;
       watermarkImageReady = true;
-      draw();
+      scheduleDraw();
     };
     image.onerror = () => {
       watermarkImage = null;
@@ -1909,7 +1935,21 @@ function createChart(element, options = {}) {
       }
     }
     crosshairPoint = point;
-    draw();
+    scheduleDraw();
+  };
+  let drawRafId = null;
+  let pendingDrawUpdateAutoScale = false;
+  const scheduleDraw = (options2 = {}) => {
+    pendingDrawUpdateAutoScale = pendingDrawUpdateAutoScale || (options2.updateAutoScale ?? true);
+    if (drawRafId !== null) {
+      return;
+    }
+    drawRafId = requestAnimationFrame(() => {
+      drawRafId = null;
+      const updateAutoScale = pendingDrawUpdateAutoScale;
+      pendingDrawUpdateAutoScale = false;
+      draw({ updateAutoScale });
+    });
   };
   const draw = (options2 = {}) => {
     const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
@@ -3638,7 +3678,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXToLatest = (factor) => {
     if (!drawState || data.length === 0) {
@@ -3653,7 +3693,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXFromAxis = (factor) => {
     if (!drawState) {
@@ -3684,7 +3724,7 @@ function createChart(element, options = {}) {
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
     if (!drawState || data.length === 0) {
@@ -3710,7 +3750,7 @@ function createChart(element, options = {}) {
     if (allowX || allowY) {
       emitViewportChange();
     }
-    draw();
+    scheduleDraw();
   };
   const resetYViewport = () => {
     yMinOverride = null;
@@ -3750,7 +3790,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const panY = (priceDelta) => {
     if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
@@ -3762,20 +3802,20 @@ function createChart(element, options = {}) {
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const isFollowingLatest = () => followLatest;
   const setFollowingLatest = (follow) => {
@@ -3783,7 +3823,7 @@ function createChart(element, options = {}) {
       xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
       clampXViewport();
       updateFollowLatest(true);
-      draw();
+      scheduleDraw();
     } else {
       updateFollowLatest(follow);
     }
@@ -3842,7 +3882,7 @@ function createChart(element, options = {}) {
     }
     if (changed) {
       clampXViewport();
-      draw();
+      scheduleDraw();
       emitViewportChange();
     }
   };
@@ -4219,7 +4259,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "vertical-line") {
@@ -4234,7 +4274,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "trendline") {
@@ -4249,7 +4289,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("trendline");
@@ -4260,7 +4300,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "ray") {
@@ -4275,7 +4315,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("ray");
@@ -4286,7 +4326,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-retracement") {
@@ -4299,7 +4339,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-retracement");
@@ -4311,7 +4351,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-extension") {
@@ -4321,7 +4361,7 @@ function createChart(element, options = {}) {
             ...serializeDrawing(draftDrawing),
             points: [...draftDrawing.points.slice(0, -1), point, point]
           });
-          draw();
+          scheduleDraw();
           return true;
         }
         const completed = normalizeDrawingState({
@@ -4332,7 +4372,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-extension");
@@ -4344,7 +4384,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "text" || activeDrawingTool === "note") {
@@ -4361,7 +4401,7 @@ function createChart(element, options = {}) {
       drawings.push(created);
       selectedDrawingId = created.id;
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
@@ -4381,7 +4421,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
@@ -4417,7 +4457,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     return false;
@@ -4434,7 +4474,7 @@ function createChart(element, options = {}) {
       return;
     }
     selectedDrawingId = id;
-    draw();
+    scheduleDraw();
   };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
@@ -4493,7 +4533,7 @@ function createChart(element, options = {}) {
       };
     });
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
     return true;
   };
   let isDragging = false;
@@ -4558,7 +4598,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const onPointerDown = (event) => {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
@@ -4742,7 +4782,7 @@ function createChart(element, options = {}) {
           points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
-        draw();
+        scheduleDraw();
         return;
       }
     }
@@ -4770,7 +4810,7 @@ function createChart(element, options = {}) {
           dragging: true,
           ...currentLine ? { line: currentLine } : {}
         });
-        draw();
+        scheduleDraw();
       }
       canvas.style.cursor = "ns-resize";
       setCrosshairPoint(null);
@@ -5032,7 +5072,7 @@ function createChart(element, options = {}) {
     }
     if (region === "y-axis") {
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     resetViewport();
@@ -5054,7 +5094,7 @@ function createChart(element, options = {}) {
     const changed = active !== magnetModifierActive || shift !== shiftKeyActive;
     magnetModifierActive = active;
     shiftKeyActive = shift;
-    if (changed && draftDrawing) draw();
+    if (changed && draftDrawing) scheduleDraw();
   };
   const onWindowBlurMagnet = () => {
     magnetModifierActive = false;
@@ -5090,7 +5130,7 @@ function createChart(element, options = {}) {
       const lastPoint = data[data.length - 1];
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
     }
-    draw();
+    scheduleDraw();
   };
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
@@ -5101,7 +5141,7 @@ function createChart(element, options = {}) {
     }
     mergedOptions = { ...mergedOptions, width, height };
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
@@ -5119,7 +5159,7 @@ function createChart(element, options = {}) {
       tickerVolumeTarget = null;
       resetRightMarginCache();
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     if (!hadData) {
@@ -5144,7 +5184,7 @@ function createChart(element, options = {}) {
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
     }
-    draw();
+    scheduleDraw();
   };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
@@ -5152,18 +5192,18 @@ function createChart(element, options = {}) {
       id: line.id ?? `line-${index + 1}`
     }));
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const addPriceLine = (line) => {
     const id = line.id ?? `line-${generatedPriceLineId++}`;
     priceLines.push({ ...line, id });
-    draw();
+    scheduleDraw();
     return id;
   };
   const removePriceLine = (id) => {
     priceLines = priceLines.filter((line) => line.id !== id);
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const setOrderLines = (lines) => {
     orderLines = lines.map((line, index) => ({
@@ -5182,24 +5222,24 @@ function createChart(element, options = {}) {
         orderPriceTagWidthById.delete(id);
       }
     }
-    draw();
+    scheduleDraw();
   };
   const addOrderLine = (line) => {
     const id = line.id ?? `order-${generatedOrderLineId++}`;
     orderLines.push({ ...line, id });
-    draw();
+    scheduleDraw();
     return id;
   };
   const updateOrderLine = (id, patch) => {
     orderLines = orderLines.map((line) => line.id === id ? { ...line, ...patch, id } : line);
-    draw();
+    scheduleDraw();
   };
   const removeOrderLine = (id) => {
     orderLines = orderLines.filter((line) => line.id !== id);
     orderWidgetWidthById.delete(id);
     orderPriceTagWidthById.delete(id);
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const onOrderAction = (handler) => {
     orderActionHandler = handler;
@@ -5224,12 +5264,12 @@ function createChart(element, options = {}) {
       throw new Error("Invalid indicator plugin. Expected { id, draw }.");
     }
     indicatorRegistry.set(plugin.id, plugin);
-    draw();
+    scheduleDraw();
   };
   const unregisterIndicator = (type) => {
     indicatorRegistry.delete(type);
     indicators = indicators.filter((indicator) => indicator.type !== type);
-    draw();
+    scheduleDraw();
   };
   const listBuiltInIndicators = () => {
     return BUILTIN_INDICATORS.map((indicator) => ({
@@ -5254,7 +5294,7 @@ function createChart(element, options = {}) {
   };
   const setIndicators = (nextIndicators) => {
     indicators = nextIndicators.map((indicator) => normalizeIndicatorState(indicator));
-    draw();
+    scheduleDraw();
   };
   const addIndicator = (type, inputs = {}, options2 = {}) => {
     const plugin = indicatorRegistry.get(type);
@@ -5267,7 +5307,7 @@ function createChart(element, options = {}) {
       inputs
     });
     indicators.push(next);
-    draw();
+    scheduleDraw();
     return next.id;
   };
   const updateIndicator = (id, patch) => {
@@ -5291,30 +5331,30 @@ function createChart(element, options = {}) {
         }
       };
     });
-    draw();
+    scheduleDraw();
   };
   const removeIndicator = (id) => {
     indicators = indicators.filter((indicator) => indicator.id !== id);
-    draw();
+    scheduleDraw();
   };
   const setActiveDrawingTool = (tool) => {
     activeDrawingTool = tool;
     draftDrawing = null;
     canvas.style.cursor = tool ? "crosshair" : "default";
-    draw();
+    scheduleDraw();
   };
   const getActiveDrawingTool = () => activeDrawingTool;
   const cancelDrawing = () => {
     if (draftDrawing) {
       draftDrawing = null;
-      draw();
+      scheduleDraw();
       return true;
     }
     return false;
   };
   const setTradeMarkers = (markers) => {
     tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
-    draw();
+    scheduleDraw();
   };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
@@ -5322,16 +5362,16 @@ function createChart(element, options = {}) {
   const getMagnetMode = () => magnetMode;
   const getDrawings = () => drawings.map((drawing) => serializeDrawing(drawing));
   const setDrawings = (nextDrawings) => {
-    drawings = nextDrawings.map((drawing) => normalizeDrawingState(drawing));
+    drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
     drawings.push(next);
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
     return next.id;
   };
   const updateDrawing = (id, patch) => {
@@ -5344,18 +5384,18 @@ function createChart(element, options = {}) {
       }) : drawing
     );
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
   };
   const removeDrawing = (id) => {
     drawings = drawings.filter((drawing) => drawing.id !== id);
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
   };
   const clearDrawings = () => {
     drawings = [];
     draftDrawing = null;
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
   };
   const onDrawingsChange = (handler) => {
     drawingsChangeHandler = handler;
@@ -5377,6 +5417,11 @@ function createChart(element, options = {}) {
       cancelAnimationFrame(smoothingRafId);
       smoothingRafId = null;
     }
+    if (drawRafId !== null) {
+      cancelAnimationFrame(drawRafId);
+      drawRafId = null;
+      pendingDrawUpdateAutoScale = false;
+    }
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);