@forgecharts/sdk 1.5.83 → 1.5.84

package/dist/internal.js

@@ -9416,6 +9416,16 @@ var PixiChart = class {
     }
     this._markViewportDirty();
   }
+  /**
+   * Pans the viewport so the bar at `time` sits at the horizontal center.
+   * Used by bar replay: the anchor candle the trader picked becomes the
+   * chart's center, with the (empty, dimmed-away) future to its right.
+   */
+  centerOnTime(time) {
+    const px = this._transform.timeToX(time);
+    this._transform.pan(-(px - this._transform.plotWidth / 2), 0);
+    this._markViewportDirty();
+  }
   /** Pans the viewport so the latest bar sits near the right edge. */
   _scrollToLatestBar() {
     let latestTime = -Infinity;
@@ -13186,7 +13196,7 @@ var ForgeCharts = class _ForgeCharts {
   // exists. Selection (the hover shadow of what a click would remove) is a
   // backend surface only Pixi implements; ForgeCharts refuses replay elsewhere.
   /** Playback speeds, in bars per second. */
-  static REPLAY_SPEEDS = [0.5, 1, 2, 5, 10];
+  static REPLAY_SPEEDS = [0.5, 1, 2, 5, 10, 15, 20];
   _replay = {
     selecting: false,
     active: false,
@@ -13254,6 +13264,7 @@ var ForgeCharts = class _ForgeCharts {
     this._series.setCutoffTime(time);
     this._replay.active = true;
     this._replay.playing = false;
+    this._core.centerOnTime?.(time);
     this._core.markDirty();
     this._emitReplayState();
   }
@@ -13299,6 +13310,33 @@ var ForgeCharts = class _ForgeCharts {
     this._core.markDirty();
     this._emitReplayState();
   }
+  /** Set an exact playback speed (nearest catalogued value). */
+  replaySetSpeed(speed) {
+    this._assertAlive();
+    let best = 0;
+    for (let i = 0; i < _ForgeCharts.REPLAY_SPEEDS.length; i++) {
+      if (Math.abs(_ForgeCharts.REPLAY_SPEEDS[i] - speed) < Math.abs(_ForgeCharts.REPLAY_SPEEDS[best] - speed)) best = i;
+    }
+    this._replay.speedIdx = best;
+    if (this._replay.playing) this._replayStartTimer();
+    this._emitReplayState();
+  }
+  /**
+   * Restore a persisted replay session (browser refresh mid-replay). Applies
+   * the same gate as entering selection; the cutoff simply lands where it
+   * was, paused, with the anchor centered. A cutoff at or beyond the tape's
+   * head means the replay had effectively finished — nothing is restored.
+   */
+  replayRestore(cutoffTime, speed) {
+    this._assertAlive();
+    if (!canUseBarReplay()) return false;
+    const full = this._series.fullData();
+    const last = full[full.length - 1];
+    if (!last || cutoffTime >= last.time) return false;
+    if (speed !== void 0) this.replaySetSpeed(speed);
+    this._replayCommit(cutoffTime);
+    return true;
+  }
   /** Cycle to the next playback speed; restarts the timer when playing. */
   replayCycleSpeed() {
     this._assertAlive();
@@ -23536,6 +23574,8 @@ var ChartCanvas = forwardRef(
     onPointerToolChange,
     initialPointerTool,
     initialSeriesType,
+    initialReplay,
+    onReplayStateChange,
     initialMagnetMode,
     onMagnetModeChange,
     drawingFavorites: drawingFavoritesProp,
@@ -23726,6 +23766,7 @@ var ChartCanvas = forwardRef(
       }
       chart.on("replayStateChanged", (s) => {
         setReplayState(s.selecting || s.active ? s : null);
+        onReplayStateChangeRef.current?.(s);
       });
       transformRef.current = chart.getTransform();
       const syncChartState = () => {
@@ -24687,6 +24728,36 @@ var ChartCanvas = forwardRef(
     const initialPointerAppliedRef = useRef(false);
     const initialSeriesAppliedRef = useRef(false);
     const [replayState, setReplayState] = useState(null);
+    const [replayBarOffset, setReplayBarOffset] = useState(0);
+    const replayDragRef = useRef(null);
+    const onReplayStateChangeRef = useRef(onReplayStateChange);
+    useEffect(() => {
+      onReplayStateChangeRef.current = onReplayStateChange;
+    }, [onReplayStateChange]);
+    const initialReplayAppliedRef = useRef(false);
+    useEffect(() => {
+      if (initialReplayAppliedRef.current || !initialReplay || bars.length === 0) return;
+      initialReplayAppliedRef.current = true;
+      chartRef.current?.replayRestore(initialReplay.cutoffTime, initialReplay.speed);
+    }, [initialReplay, bars]);
+    useEffect(() => {
+      const move = (e) => {
+        const d = replayDragRef.current;
+        if (!d) return;
+        const host = outerRef.current;
+        const max = host ? Math.max(0, host.clientHeight - 80) : 400;
+        setReplayBarOffset(Math.min(max, Math.max(0, d.startOffset + (d.startY - e.clientY))));
+      };
+      const up = () => {
+        replayDragRef.current = null;
+      };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+      return () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", up);
+      };
+    }, []);
     useEffect(() => {
       if (!initialSeriesAppliedRef.current && initialSeriesType && chartRef.current) {
         initialSeriesAppliedRef.current = true;
@@ -24793,15 +24864,15 @@ var ChartCanvas = forwardRef(
               children: [
                 replayState && (() => {
                   const dark = effectiveTheme !== "light";
-                  const bg = dark ? "rgba(24,26,34,0.94)" : "rgba(255,255,255,0.96)";
-                  const fg = dark ? "#dfe3ee" : "#20242f";
-                  const line = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)";
+                  const bg = dark ? "#000000" : "#ffffff";
+                  const fg = dark ? "#ffffff" : "#000000";
+                  const line = dark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.22)";
                   const btn = {
                     background: "transparent",
                     border: "none",
                     color: fg,
                     cursor: "pointer",
-                    padding: "5px 9px",
+                    padding: "6px 10px",
                     borderRadius: 6,
                     fontSize: 12,
                     display: "inline-flex",
@@ -24809,27 +24880,44 @@ var ChartCanvas = forwardRef(
                     gap: 5,
                     lineHeight: 1
                   };
+                  const sep = /* @__PURE__ */ jsx("span", { style: { width: 1, alignSelf: "stretch", background: line, margin: "6px 4px" } });
                   const call = (fn) => () => {
                     if (chartRef.current) fn(chartRef.current);
                   };
                   return /* @__PURE__ */ jsxs("div", { style: {
                     position: "absolute",
-                    bottom: 46,
-                    left: "50%",
-                    transform: "translateX(-50%)",
+                    left: 0,
+                    right: 0,
+                    bottom: replayBarOffset,
                     zIndex: 8,
                     display: "flex",
                     alignItems: "center",
                     gap: 2,
+                    height: 38,
+                    padding: "0 8px",
+                    boxSizing: "border-box",
                     background: bg,
                     color: fg,
-                    border: `1px solid ${line}`,
-                    borderRadius: 8,
-                    padding: "2px 6px",
-                    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+                    borderTop: `1px solid ${line}`,
+                    borderBottom: `1px solid ${line}`,
                     userSelect: "none"
                   }, children: [
-                    replayState.selecting ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, padding: "5px 9px" }, children: "Click a bar to start replay from there" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        title: "Drag to move",
+                        onPointerDown: (e) => {
+                          e.preventDefault();
+                          replayDragRef.current = { startY: e.clientY, startOffset: replayBarOffset };
+                        },
+                        style: { cursor: "ns-resize", padding: "6px 6px", color: fg, opacity: 0.55, fontSize: 12, letterSpacing: 1 },
+                        children: "\u2059\u2059"
+                      }
+                    ),
+                    sep,
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, letterSpacing: 0.3, padding: "0 6px" }, children: "Replay" }),
+                    sep,
+                    replayState.selecting ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, padding: "0 8px", opacity: 0.85 }, children: "Click a bar to start replay from there" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -24839,7 +24927,7 @@ var ChartCanvas = forwardRef(
                           children: "\u2506\u2190 Select bar"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { style: { width: 1, alignSelf: "stretch", background: line, margin: "4px 2px" } }),
+                      sep,
                       /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -24870,8 +24958,8 @@ var ChartCanvas = forwardRef(
                       /* @__PURE__ */ jsxs(
                         "button",
                         {
-                          style: { ...btn, fontVariantNumeric: "tabular-nums" },
-                          title: "Playback speed",
+                          style: { ...btn, fontVariantNumeric: "tabular-nums", minWidth: 44, justifyContent: "center" },
+                          title: "Playback speed (0.5\u201320 bars per second)",
                           onClick: call((c) => c.replayCycleSpeed()),
                           children: [
                             replayState.speed,
@@ -24880,7 +24968,7 @@ var ChartCanvas = forwardRef(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx("span", { style: { width: 1, alignSelf: "stretch", background: line, margin: "4px 2px" } }),
+                    /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
                     /* @__PURE__ */ jsx(
                       "button",
                       {
@@ -26035,7 +26123,7 @@ var demonstrationTool = {
 };
 
 // src/version.ts
-var FORGECHARTS_VERSION = "1.5.83" ;
+var FORGECHARTS_VERSION = "1.5.84" ;
 
 // src/compatibility.ts
 var MIN_KIT_API = 1;