hyperprop-charting-library 0.1.106 → 0.1.108

package/dist/hyperprop-charting-library.js

@@ -1046,7 +1046,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;
@@ -1055,7 +1055,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) => {
@@ -1120,7 +1120,7 @@ function createChart(element, options = {}) {
     image.onload = () => {
       watermarkImage = image;
       watermarkImageReady = true;
-      draw();
+      scheduleDraw();
     };
     image.onerror = () => {
       watermarkImage = null;
@@ -1883,7 +1883,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;
@@ -3612,7 +3626,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXToLatest = (factor) => {
     if (!drawState || data.length === 0) {
@@ -3627,7 +3641,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const zoomXFromAxis = (factor) => {
     if (!drawState) {
@@ -3658,7 +3672,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) {
@@ -3684,7 +3698,7 @@ function createChart(element, options = {}) {
     if (allowX || allowY) {
       emitViewportChange();
     }
-    draw();
+    scheduleDraw();
   };
   const resetYViewport = () => {
     yMinOverride = null;
@@ -3724,7 +3738,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const panY = (priceDelta) => {
     if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
@@ -3736,20 +3750,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) => {
@@ -3757,7 +3771,7 @@ function createChart(element, options = {}) {
       xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
       clampXViewport();
       updateFollowLatest(true);
-      draw();
+      scheduleDraw();
     } else {
       updateFollowLatest(follow);
     }
@@ -3816,7 +3830,7 @@ function createChart(element, options = {}) {
     }
     if (changed) {
       clampXViewport();
-      draw();
+      scheduleDraw();
       emitViewportChange();
     }
   };
@@ -4193,7 +4207,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "vertical-line") {
@@ -4208,7 +4222,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "trendline") {
@@ -4223,7 +4237,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("trendline");
@@ -4234,7 +4248,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "ray") {
@@ -4249,7 +4263,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("ray");
@@ -4260,7 +4274,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 2
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-retracement") {
@@ -4273,7 +4287,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-retracement");
@@ -4285,7 +4299,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "fib-extension") {
@@ -4295,7 +4309,7 @@ function createChart(element, options = {}) {
             ...serializeDrawing(draftDrawing),
             points: [...draftDrawing.points.slice(0, -1), point, point]
           });
-          draw();
+          scheduleDraw();
           return true;
         }
         const completed = normalizeDrawingState({
@@ -4306,7 +4320,7 @@ function createChart(element, options = {}) {
         draftDrawing = null;
         activeDrawingTool = null;
         emitDrawingsChange();
-        draw();
+        scheduleDraw();
         return true;
       }
       const defaults = getDrawingToolDefaults("fib-extension");
@@ -4318,7 +4332,7 @@ function createChart(element, options = {}) {
         style: defaults.style ?? "solid",
         width: defaults.width ?? 1
       });
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "text" || activeDrawingTool === "note") {
@@ -4335,7 +4349,7 @@ function createChart(element, options = {}) {
       drawings.push(created);
       selectedDrawingId = created.id;
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
@@ -4355,7 +4369,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
@@ -4391,7 +4405,7 @@ function createChart(element, options = {}) {
         })
       );
       emitDrawingsChange();
-      draw();
+      scheduleDraw();
       return true;
     }
     return false;
@@ -4408,7 +4422,7 @@ function createChart(element, options = {}) {
       return;
     }
     selectedDrawingId = id;
-    draw();
+    scheduleDraw();
   };
   const updateDrawingDrag = (x, y) => {
     if (!drawingDragState) {
@@ -4467,7 +4481,7 @@ function createChart(element, options = {}) {
       };
     });
     emitDrawingsChange();
-    draw();
+    scheduleDraw();
     return true;
   };
   let isDragging = false;
@@ -4532,7 +4546,7 @@ function createChart(element, options = {}) {
     clampXViewport();
     updateFollowLatest(false);
     emitViewportChange();
-    draw();
+    scheduleDraw();
   };
   const onPointerDown = (event) => {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
@@ -4639,7 +4653,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,
@@ -4716,7 +4730,7 @@ function createChart(element, options = {}) {
           points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
-        draw();
+        scheduleDraw();
         return;
       }
     }
@@ -4744,7 +4758,7 @@ function createChart(element, options = {}) {
           dragging: true,
           ...currentLine ? { line: currentLine } : {}
         });
-        draw();
+        scheduleDraw();
       }
       canvas.style.cursor = "ns-resize";
       setCrosshairPoint(null);
@@ -5006,7 +5020,7 @@ function createChart(element, options = {}) {
     }
     if (region === "y-axis") {
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     resetViewport();
@@ -5028,7 +5042,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;
@@ -5064,7 +5078,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) {
@@ -5075,7 +5089,7 @@ function createChart(element, options = {}) {
     }
     mergedOptions = { ...mergedOptions, width, height };
     resetRightMarginCache();
-    draw();
+    scheduleDraw();
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
@@ -5093,7 +5107,7 @@ function createChart(element, options = {}) {
       tickerVolumeTarget = null;
       resetRightMarginCache();
       resetYViewport();
-      draw();
+      scheduleDraw();
       return;
     }
     if (!hadData) {
@@ -5118,7 +5132,7 @@ function createChart(element, options = {}) {
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
     }
-    draw();
+    scheduleDraw();
   };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
@@ -5126,18 +5140,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) => ({
@@ -5156,24 +5170,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;
@@ -5198,12 +5212,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) => ({
@@ -5228,7 +5242,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);
@@ -5241,7 +5255,7 @@ function createChart(element, options = {}) {
       inputs
     });
     indicators.push(next);
-    draw();
+    scheduleDraw();
     return next.id;
   };
   const updateIndicator = (id, patch) => {
@@ -5265,30 +5279,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;
@@ -5299,13 +5313,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) => {
@@ -5318,18 +5332,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;
@@ -5351,6 +5365,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);