@trdrs/quickcharts 2.3.0 → 2.4.0

package/dist/index.js

@@ -3082,7 +3082,8 @@ var FEATURE_KEYS = {
   replay: "flag",
   history: "flag",
   sessions: "flag",
-  crosshair: "flag"
+  crosshair: "flag",
+  navigation: "flag"
 };
 var TOP_BAR_KEYS = {
   symbol: "flag",
@@ -3111,7 +3112,9 @@ var UI_KEYS = {
   toasts: "flag",
   symbolSearch: "flag",
   indicatorPicker: "flag",
-  indicatorSettings: "flag"
+  indicatorSettings: "flag",
+  priceScale: "flag",
+  crosshair: { horizontal: "flag", labels: "flag", solid: "flag" }
 };
 function checkKeys(path, value, keys) {
   if (value === void 0) return;
@@ -3139,7 +3142,8 @@ function resolveFeatures(config) {
     replay: on(config?.replay),
     history: on(config?.history),
     sessions: on(config?.sessions),
-    crosshair: on(config?.crosshair)
+    crosshair: on(config?.crosshair),
+    navigation: on(config?.navigation)
   };
 }
 var shown = (value) => value !== false;
@@ -3155,6 +3159,9 @@ function resolveUi(config, features, offered = {}) {
   const inLegend = (key) => legend2 && (typeof legendConfig !== "object" || shown(legendConfig[key]));
   const symbolSearch = shown(config?.symbolSearch);
   const indicatorPicker = shown(config?.indicatorPicker);
+  const crosshairConfig = config?.crosshair;
+  const crosshair = features.crosshair && shown(crosshairConfig);
+  const inCrosshair = (key) => crosshair && (typeof crosshairConfig !== "object" || shown(crosshairConfig[key]));
   return {
     topBar,
     symbolPill: inBar("symbol") && symbolSearch,
@@ -3178,13 +3185,19 @@ function resolveUi(config, features, offered = {}) {
     legend: legend2,
     legendValues: inLegend("values"),
     marketStatus: inLegend("marketStatus"),
-    navigation: shown(config?.navigation),
+    navigation: features.navigation && shown(config?.navigation),
     contextMenu: shown(config?.contextMenu),
     replayTransport: features.replay && shown(config?.replayTransport),
     toasts: shown(config?.toasts),
     symbolSearch,
     indicatorPicker,
-    indicatorSettings: shown(config?.indicatorSettings)
+    indicatorSettings: shown(config?.indicatorSettings),
+    priceScale: shown(config?.priceScale),
+    crosshair,
+    crosshairHorizontal: inCrosshair("horizontal"),
+    crosshairLabels: inCrosshair("labels"),
+    // Solid is the one part that is off unless named: a crosshair is dashed by default.
+    crosshairSolid: crosshair && typeof crosshairConfig === "object" && crosshairConfig.solid === true
   };
 }
 function canCopyImage() {
@@ -3313,6 +3326,29 @@ function styleOptions(style, paint) {
       return candleOptions(paint);
   }
 }
+function fadedStyleOptions(style, paint, alpha) {
+  const a = Math.min(1, Math.max(0, alpha));
+  const up = paint.appearance.upColor;
+  const down = paint.appearance.downColor;
+  switch (style) {
+    case "line":
+    case "stepline":
+      return { color: withAlpha2(paint.canvas.neutral, a) };
+    case "area":
+      return { lineColor: withAlpha2(up, a), topColor: withAlpha2(up, 0.28 * a), bottomColor: withAlpha2(up, 0.04 * a) };
+    case "baseline":
+      return {
+        topLineColor: withAlpha2(up, a),
+        bottomLineColor: withAlpha2(down, a),
+        topFillColor1: withAlpha2(up, 0.28 * a),
+        topFillColor2: withAlpha2(up, 0.04 * a),
+        bottomFillColor1: withAlpha2(down, 0.04 * a),
+        bottomFillColor2: withAlpha2(down, 0.28 * a)
+      };
+    default:
+      return styleOptions(style, paint);
+  }
+}
 function lineOptions(paint) {
   return { color: paint.canvas.neutral, lineWidth: 2 };
 }
@@ -4963,6 +4999,7 @@ import {
   createChart as createRenderer,
   HistogramSeries as HistogramSeries2,
   LineSeries as LineSeries4,
+  LineStyle as LineStyle3,
   TrackingModeExitMode
 } from "lightweight-charts";
 
@@ -5017,6 +5054,59 @@ function coerceScaleMode(raw) {
   return SCALE_MODES.includes(raw ?? "") ? raw : "normal";
 }
 
+// src/widget/styleMorph.ts
+var STYLE_MORPH_MS = 500;
+function morphEase(t) {
+  const clamped = Math.min(1, Math.max(0, t));
+  return (1 - Math.cos(Math.PI * clamped)) / 2;
+}
+function foldBar(bar, fold) {
+  const keep = 1 - Math.min(1, Math.max(0, fold));
+  return {
+    time: bar.t,
+    open: bar.c + (bar.o - bar.c) * keep,
+    high: bar.c + (bar.h - bar.c) * keep,
+    low: bar.c + (bar.l - bar.c) * keep,
+    close: bar.c
+  };
+}
+function startStyleMorph(deps) {
+  const frame = deps.frame ?? ((tick2) => requestAnimationFrame(tick2));
+  const cancel = deps.cancelFrame ?? ((handle2) => cancelAnimationFrame(handle2));
+  const now = deps.now ?? (() => performance.now());
+  const start = now();
+  let handle = null;
+  let ended = false;
+  const draw = (t) => {
+    const p = morphEase(t);
+    const fold = deps.direction === "fold" ? p : 1 - p;
+    deps.bars.setData(deps.shown().map((bar) => foldBar(bar, fold)));
+    deps.fadeLine(fold);
+  };
+  const finish = () => {
+    if (ended) return;
+    ended = true;
+    if (handle !== null) cancel(handle);
+    handle = null;
+    draw(1);
+    deps.done();
+  };
+  const tick = () => {
+    handle = null;
+    if (ended) return;
+    const t = (now() - start) / STYLE_MORPH_MS;
+    if (t >= 1) {
+      finish();
+      return;
+    }
+    draw(t);
+    handle = frame(tick);
+  };
+  draw(0);
+  handle = frame(tick);
+  return { running: () => !ended, finish };
+}
+
 // src/widget/baselineLevel.ts
 var BASELINE_SCREEN_PERCENT = 50;
 var BASELINE_DRIFT_PX = 0.5;
@@ -5710,8 +5800,8 @@ function bundledGlyphSource(glyph2) {
 }
 
 // src/pointerInput.ts
-function pointerLock(locked) {
-  const on = !locked;
+function pointerLock(locked, navigable = true) {
+  const on = !locked && navigable;
   return {
     handleScroll: on,
     handleScale: { mouseWheel: on, pinch: false, axisPressedMouseMove: on, axisDoubleClickReset: on },
@@ -6825,7 +6915,7 @@ function attachDrawings(options) {
   const locked = () => allLocked || workflow().allLocked === true;
   const changed = () => events.onChange?.();
   const lockPointer = (locked2) => {
-    const lock = pointerLock(locked2);
+    const lock = pointerLock(locked2, options.navigable ?? true);
     chart.applyOptions({ handleScroll: lock.handleScroll, handleScale: lock.handleScale });
     container.style.touchAction = lock.touchAction;
   };
@@ -10339,6 +10429,7 @@ function attachDrawingsPlane(deps) {
   const handle = attachDrawings({
     chart: deps.chart,
     series: deps.series,
+    navigable: deps.navigable,
     container: deps.container,
     symbol: deps.symbol,
     timeframe: deps.timeframe,
@@ -12754,6 +12845,7 @@ function composeFormingBar(parent, subs, k) {
 }
 
 // src/widget/replay.ts
+var START_HOLD_MS = 250;
 function coerceReplaySpeed(raw) {
   const n = Number(raw);
   return REPLAY_SPEEDS.includes(n) ? n : 10;
@@ -12772,6 +12864,13 @@ function attachReplayPlane(deps) {
   let stepping = null;
   let generation = 0;
   let destroyed = false;
+  let glide = null;
+  const stopGlide = () => {
+    if (glide) {
+      clearTimeout(glide);
+      glide = null;
+    }
+  };
   const invalidateStep = () => {
     generation += 1;
     stepping = null;
@@ -12792,15 +12891,34 @@ function attachReplayPlane(deps) {
   const currentGrain = () => autoGrain ? "auto" : manualGrain ?? "auto";
   const paintCursor = () => {
     if (!master) return;
+    stopGlide();
     deps.paint(master.slice(0, cursor));
     deps.chart.timeScale().scrollToRealTime();
   };
   const paintForming = () => {
     if (!master || !subs) return;
+    stopGlide();
     const parent = master[cursor - 1];
     deps.paint([...master.slice(0, cursor - 1), composeFormingBar(parent, subs, formK)]);
     deps.chart.timeScale().scrollToRealTime();
   };
+  const paintStart = () => {
+    if (!master) return;
+    const scale = deps.chart.timeScale();
+    const shown2 = scale.getVisibleRange();
+    const view = scale.getVisibleLogicalRange();
+    const chosen = master[cursor - 1].t;
+    const from = shown2?.from;
+    const to = shown2?.to;
+    if (!view || typeof from !== "number" || typeof to !== "number" || chosen < from || chosen > to) return paintCursor();
+    stopGlide();
+    deps.paint(master.slice(0, cursor));
+    scale.setVisibleLogicalRange(view);
+    glide = setTimeout(() => {
+      glide = null;
+      if (master && !destroyed && !deps.disposed()) scale.scrollToRealTime();
+    }, START_HOLD_MS);
+  };
   const stopTimer = () => {
     if (timer) {
       clearInterval(timer);
@@ -12884,6 +13002,7 @@ function attachReplayPlane(deps) {
   };
   function abandon() {
     invalidateStep();
+    stopGlide();
     if (!master) return;
     stopTimer();
     playing = false;
@@ -12911,7 +13030,7 @@ function attachReplayPlane(deps) {
       const idx = master.findIndex((b) => b.t >= atSec);
       cursor = Math.max(2, (idx === -1 ? master.length - 1 : idx) + 1);
       deps.setHeader(true);
-      paintCursor();
+      paintStart();
       sync();
     },
     exit() {
@@ -13434,7 +13553,7 @@ function attachExtensionsPlane(deps) {
     },
     lockPanZoom: (locked) => {
       if (deps.disposed()) return;
-      const state = pointerLock(locked);
+      const state = pointerLock(locked, deps.navigable);
       deps.chart.applyOptions({ handleScroll: state.handleScroll, handleScale: state.handleScale });
       deps.setTouchAction(state.touchAction);
     }
@@ -15943,10 +16062,11 @@ function registerChartCommands(deps) {
   });
   add({ id: "chart.view.reset", scope: "chart", label: "command.viewReset", shortcut: "Alt+KeyR", available: always, execute: () => handle.reset() });
   add({ id: "chart.view.goLive", scope: "chart", label: "command.viewGoLive", shortcut: "Alt+KeyL", available: always, execute: () => handle.goLive() });
-  add({ id: "chart.view.zoomIn", scope: "chart", label: "command.viewZoomIn", shortcut: "Equal", available: always, execute: () => deps.zoom("in") });
-  add({ id: "chart.view.zoomOut", scope: "chart", label: "command.viewZoomOut", shortcut: "Minus", available: always, execute: () => deps.zoom("out") });
-  add({ id: "chart.view.scrollLeft", scope: "chart", label: "command.viewScrollLeft", shortcut: "ArrowLeft", available: always, execute: () => deps.scroll("left") });
-  add({ id: "chart.view.scrollRight", scope: "chart", label: "command.viewScrollRight", shortcut: "ArrowRight", available: always, execute: () => deps.scroll("right") });
+  const navigable = () => features.navigation;
+  add({ id: "chart.view.zoomIn", scope: "chart", label: "command.viewZoomIn", shortcut: "Equal", available: navigable, execute: () => deps.zoom("in") });
+  add({ id: "chart.view.zoomOut", scope: "chart", label: "command.viewZoomOut", shortcut: "Minus", available: navigable, execute: () => deps.zoom("out") });
+  add({ id: "chart.view.scrollLeft", scope: "chart", label: "command.viewScrollLeft", shortcut: "ArrowLeft", available: navigable, execute: () => deps.scroll("left") });
+  add({ id: "chart.view.scrollRight", scope: "chart", label: "command.viewScrollRight", shortcut: "ArrowRight", available: navigable, execute: () => deps.scroll("right") });
   add({
     id: "chart.data.download",
     scope: "chart",
@@ -16750,14 +16870,21 @@ function createChartInstance(deps) {
       vertLines: { color: canvas().grid, visible: eff.appearance.grid },
       horzLines: { color: canvas().grid, visible: eff.appearance.grid }
     },
-    crosshair: { mode: deps.features.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden },
+    crosshair: {
+      mode: deps.ui.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden,
+      vertLine: { labelVisible: deps.ui.crosshairLabels, ...deps.ui.crosshairSolid ? { style: LineStyle3.Solid } : {} },
+      horzLine: { visible: deps.ui.crosshairHorizontal, labelVisible: deps.ui.crosshairLabels, ...deps.ui.crosshairSolid ? { style: LineStyle3.Solid } : {} }
+    },
     // A finger held on the plot scrubs the crosshair for as long as it stays down, and lifting it
     // takes the crosshair away, so the next one-finger drag pans: the way a native chart reads.
     trackingMode: { exitMode: TrackingModeExitMode.OnTouchEnd },
     // The renderer's own momentum throws a flick as fast as seven pixels a millisecond and coasts
     // it thousands of pixels; the chart coasts a flick itself, calmly.
     kineticScroll: { touch: false, mouse: false },
-    rightPriceScale: { borderVisible: false, scaleMargins: { top: 0.08, bottom: 0.08 } },
+    // A chart that holds its view takes no drag, wheel, pinch or scale gesture from the renderer.
+    handleScroll: deps.features.navigation,
+    handleScale: deps.features.navigation,
+    rightPriceScale: { visible: deps.ui.priceScale, borderVisible: false, scaleMargins: { top: 0.08, bottom: 0.08 } },
     timeScale: { borderVisible: false, timeVisible: true, secondsVisible: false, rightOffset: 4, barSpacing: 8, minBarSpacing: 0.5 }
   });
   const anchor = chart.addSeries(LineSeries4, {
@@ -16766,7 +16893,13 @@ function createChartInstance(deps) {
     priceLineVisible: false,
     crosshairMarkerVisible: false
   });
-  let series2 = addStyleSeries(chart, style, paint());
+  const addMainSeries = (id) => {
+    const added = addStyleSeries(chart, id, paint());
+    if (!deps.ui.priceScale) added.applyOptions({ priceLineVisible: false, lastValueVisible: false });
+    return added;
+  };
+  let series2 = addMainSeries(style);
+  let morph = null;
   const baselineLevel = createBaselineLevel({ paneHeight: () => chart.paneSize().height });
   if (style === "baseline") baselineLevel.follow(series2);
   const volume2 = chart.addSeries(HistogramSeries2, {
@@ -16897,15 +17030,17 @@ function createChartInstance(deps) {
   const crosshairSubs = /* @__PURE__ */ new Set();
   const timeClickSubs = /* @__PURE__ */ new Set();
   const rangeSubs = /* @__PURE__ */ new Set();
+  const reducedMotion = () => gestures.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
   const ranges = createRangeApi({
     chart,
     disposed: disposedFn,
     muted,
     mirrored,
     onGlide: () => followLiveEdge(),
-    reducedMotion: () => gestures.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
+    reducedMotion
   });
-  const fling = attachFling({ chart, target: gestures });
+  const still = { stop: () => void 0, destroy: () => void 0 };
+  const fling = deps.features.navigation ? attachFling({ chart, target: gestures }) : still;
   let unregisterRangeMirror = () => void 0;
   function applyTimezone() {
     if (disposed) return;
@@ -17013,6 +17148,7 @@ function createChartInstance(deps) {
   const drawings2 = attachDrawingsPlane({
     chart,
     series: anchor,
+    navigable: deps.features.navigation,
     container: gestures,
     chrome: chrome2,
     chartId: deps.id,
@@ -17086,7 +17222,7 @@ function createChartInstance(deps) {
     setHeader: () => legend2.setHeader(symbol, tf),
     // A chart whose crosshair the host switched OFF keeps it off: replay may take the crosshair
     // away for the length of a question, never hand one back that was never there.
-    setCrosshair: (visible) => chart.applyOptions({ crosshair: { mode: visible && deps.features.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden } }),
+    setCrosshair: (visible) => chart.applyOptions({ crosshair: { mode: visible && deps.ui.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden } }),
     // The feed's own grains: a chart never offers, or fetches, a timeframe its feed cannot serve.
     resolutions: () => deps.capabilities().resolutions,
     persist: (key, value) => storage.set(key === "speed" ? REPLAY_SPEED_KEY : REPLAY_TIMEFRAME_KEY, value),
@@ -17120,6 +17256,7 @@ function createChartInstance(deps) {
   const extensions = attachExtensionsPlane({
     chartId: deps.id,
     chart,
+    navigable: deps.features.navigation,
     series: () => anchor,
     visible: () => series2,
     gestures,
@@ -17227,8 +17364,8 @@ function createChartInstance(deps) {
   navigationRoot.addEventListener("mouseup", onNativeDragEnd, { passive: true });
   navigationRoot.addEventListener("pointerup", onNativeDragEnd, { passive: true });
   navigationRoot.addEventListener("pointercancel", onNativeDragEnd, { passive: true });
-  const pinch = attachPinch({ chart, target: gestures });
-  const freePan = deps.freePan ? attachFreePan({
+  const pinch = deps.features.navigation ? attachPinch({ chart, target: gestures }) : null;
+  const freePan = deps.freePan && deps.features.navigation ? attachFreePan({
     chart,
     target: gestures,
     framing: () => priceAxisPolicy() === "auto",
@@ -17252,9 +17389,11 @@ function createChartInstance(deps) {
     const painted = shownBars();
     const values = painted.map((b) => ({ time: b.t, value: b.c }));
     anchor.setData(values);
-    series2.setData(
-      shaped ? values : painted.map((b) => ({ time: b.t, open: b.o, high: b.h, low: b.l, close: b.c }))
-    );
+    if (morph?.bars !== series2) {
+      series2.setData(
+        shaped ? values : painted.map((b) => ({ time: b.t, open: b.o, high: b.h, low: b.l, close: b.c }))
+      );
+    }
     if (volumeInstance()) paintVolume();
     indicators2.recompute();
     compare?.sync();
@@ -17580,20 +17719,48 @@ function createChartInstance(deps) {
   function setStyle(next) {
     if (disposed || next === style || !deps.styles.includes(next)) return;
     const keep = chart.timeScale().getVisibleLogicalRange();
+    morph?.run.finish();
     const previous = series2;
+    const previousStyle = style;
     style = next;
     storage.set(STYLE_KEY, next);
-    series2 = addStyleSeries(chart, next, paint());
+    series2 = addMainSeries(next);
     baselineLevel.follow(next === "baseline" ? series2 : null);
     countdown?.seriesChanged(previous);
     extensions.visibleSeriesReplaced();
     applyPriceFormat();
-    try {
-      chart.removeSeries(previous);
-    } catch {
-    }
+    const remove = (leaving) => {
+      try {
+        chart.removeSeries(leaving);
+      } catch {
+      }
+    };
+    const folding = valueShaped(next) && !valueShaped(previousStyle);
+    const unfolding = !valueShaped(next) && valueShaped(previousStyle);
+    const morphing = !!deps.styleMorph && (folding || unfolding) && !reducedMotion();
+    if (!morphing) remove(previous);
     paintAll();
     if (keep) chart.timeScale().setVisibleLogicalRange(keep);
+    if (morphing) {
+      const bars2 = folding ? previous : series2;
+      const line2 = folding ? series2 : previous;
+      const lineStyle2 = folding ? next : previousStyle;
+      const entry = {
+        bars: bars2,
+        run: startStyleMorph({
+          bars: bars2,
+          fadeLine: (alpha) => line2.applyOptions(fadedStyleOptions(lineStyle2, paint(), alpha)),
+          shown: shownBars,
+          direction: folding ? "fold" : "unfold",
+          done: () => {
+            if (morph === entry) morph = null;
+            remove(previous);
+            if (folding) line2.applyOptions(styleOptions(lineStyle2, paint()));
+          }
+        })
+      };
+      morph = entry;
+    }
     events.emit("style", next);
   }
   function content() {
@@ -18005,8 +18172,9 @@ function createChartInstance(deps) {
       countdownClock.destroy();
       pointer?.destroy();
       ranges.stopGlide();
+      morph?.run.finish();
       fling.destroy();
-      pinch.destroy();
+      pinch?.destroy();
       freePan?.destroy();
       plotArea.destroy();
       extensions.destroy();
@@ -23100,6 +23268,7 @@ function createChart(options) {
           container: element,
           hostContainer: options.container,
           freePan: options.touch?.freePan === true,
+          styleMorph: options.transitions?.style === true,
           layer,
           datafeed: options.datafeed,
           externalDrawingToolbar: !!options.drawingToolbarContainer,