hyperprop-charting-library 0.1.106 → 0.1.108

package/dist/index.cjs

@@ -1072,7 +1072,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 +1081,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 +1146,7 @@ function createChart(element, options = {}) {
     image.onload = () => {
       watermarkImage = image;
       watermarkImageReady = true;
-      draw();
+      scheduleDraw();
     };
     image.onerror = () => {
       watermarkImage = null;
@@ -1909,7 +1909,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 +3652,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXToLatest = (factor) => {
     if (!drawState || data.length === 0) {
@@ -3653,7 +3667,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXFromAxis = (factor) => {
     if (!drawState) {
@@ -3684,7 +3698,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 +3724,7 @@ function createChart(element, options = {}) {
     if (allowX || allowY) {
       emitViewportChange();
     }
-    draw();
+    scheduleDraw();
   };
   const resetYViewport = () => {
     yMinOverride = null;
@@ -3750,7 +3764,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const panY = (priceDelta) => {
     if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
@@ -3762,20 +3776,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 +3797,7 @@ function createChart(element, options = {}) {
       xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
       clampXViewport();
       updateFollowLatest(true);
-      draw();
+      scheduleDraw();
     } else {
       updateFollowLatest(follow);
     }
@@ -3842,7 +3856,7 @@ function createChart(element, options = {}) {
     }
     if (changed) {
       clampXViewport();
-      draw();
+      scheduleDraw();
       emitViewportChange();
     }
   };
@@ -4219,7 +4233,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "vertical-line") {
@@ -4234,7 +4248,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "trendline") {
@@ -4249,7 +4263,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("trendline");
@@ -4260,7 +4274,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "ray") {
@@ -4275,7 +4289,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("ray");
@@ -4286,7 +4300,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-retracement") {
@@ -4299,7 +4313,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-retracement");
@@ -4311,7 +4325,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-extension") {
@@ -4321,7 +4335,7 @@ function createChart(element, options = {}) {
             ...serializeDrawing(draftDrawing),
             points: [...draftDrawing.points.slice(0, -1), point, point]
           });
-          draw();
+          scheduleDraw();
           return true;
         }
         const completed = normalizeDrawingState({
@@ -4332,7 +4346,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-extension");
@@ -4344,7 +4358,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "text" || activeDrawingTool === "note") {
@@ -4361,7 +4375,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 +4395,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
@@ -4417,7 +4431,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     return false;
@@ -4434,7 +4448,7 @@ function createChart(element, options = {}) {
       return;
     }
     selectedDrawingId = id;
-    draw();
+    scheduleDraw();
   };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
@@ -4493,7 +4507,7 @@ function createChart(element, options = {}) {
       };
     });
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
     return true;
   };
   let isDragging = false;
@@ -4558,7 +4572,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const onPointerDown = (event) => {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
@@ -4665,7 +4679,7 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    const crosshairDrag = false;
     pointerDownInfo = {
       pointerId: event.pointerId,
       pointerType: event.pointerType,
@@ -4742,7 +4756,7 @@ function createChart(element, options = {}) {
           points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
-        draw();
+        scheduleDraw();
         return;
       }
     }
@@ -4770,7 +4784,7 @@ function createChart(element, options = {}) {
           dragging: true,
           ...currentLine ? { line: currentLine } : {}
         });
-        draw();
+        scheduleDraw();
       }
       canvas.style.cursor = "ns-resize";
       setCrosshairPoint(null);
@@ -5032,7 +5046,7 @@ function createChart(element, options = {}) {
     }
     if (region === "y-axis") {
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     resetViewport();
@@ -5054,7 +5068,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 +5104,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 +5115,7 @@ function createChart(element, options = {}) {
     }
     mergedOptions = { ...mergedOptions, width, height };
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
@@ -5119,7 +5133,7 @@ function createChart(element, options = {}) {
       tickerVolumeTarget = null;
       resetRightMarginCache();
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     if (!hadData) {
@@ -5144,7 +5158,7 @@ function createChart(element, options = {}) {
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
     }
-    draw();
+    scheduleDraw();
   };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
@@ -5152,18 +5166,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 +5196,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 +5238,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 +5268,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 +5281,7 @@ function createChart(element, options = {}) {
       inputs
     });
     indicators.push(next);
-    draw();
+    scheduleDraw();
     return next.id;
   };
   const updateIndicator = (id, patch) => {
@@ -5291,30 +5305,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;
@@ -5325,13 +5339,13 @@ function createChart(element, options = {}) {
     drawings = 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 +5358,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 +5391,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);