hyperprop-charting-library 0.1.32 → 0.1.34

package/dist/hyperprop-charting-library.cjs

@@ -821,10 +821,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -2158,6 +2169,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2172,6 +2184,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2192,6 +2205,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2215,6 +2229,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2254,6 +2271,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2265,17 +2283,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2292,6 +2313,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2907,6 +2986,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/hyperprop-charting-library.d.ts

@@ -284,6 +284,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +308,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -797,10 +797,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -2134,6 +2145,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2148,6 +2160,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2168,6 +2181,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2191,6 +2205,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2230,6 +2247,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2241,17 +2259,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2268,6 +2289,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2883,6 +2962,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/index.cjs

@@ -821,10 +821,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -2158,6 +2169,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2172,6 +2184,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2192,6 +2205,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2215,6 +2229,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2254,6 +2271,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2265,17 +2283,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2292,6 +2313,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2907,6 +2986,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/dist/index.d.cts

@@ -284,6 +284,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +308,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -284,6 +284,9 @@ interface ChartInstance {
     isFollowingLatest: () => boolean;
     setFollowingLatest: (follow: boolean) => void;
     onFollowingLatestChange: (handler: ((following: boolean) => void) | null) => void;
+    getViewport: () => ViewportState;
+    setViewport: (viewport: Partial<ViewportState>) => void;
+    onViewportChange: (handler: ((viewport: ViewportState) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     registerIndicator: (plugin: IndicatorPlugin<any>) => void;
@@ -305,6 +308,18 @@ interface OhlcDataPoint {
     c: number;
     v?: number;
 }
+interface ViewportState {
+    /** Number of bars visible horizontally. */
+    xSpan: number;
+    /** Whether the chart is auto-following the latest candle. */
+    followingLatest: boolean;
+    /** Timestamp (ms) at the horizontal center of the viewport. null when data is empty. */
+    centerTimeMs: number | null;
+    /** Manual Y-axis min override (null = auto-scale). */
+    yMin: number | null;
+    /** Manual Y-axis max override (null = auto-scale). */
+    yMax: number | null;
+}
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -797,10 +797,21 @@ function createChart(element, options = {}) {
   let xSpan = 60;
   let followLatest = true;
   let followingLatestChangeHandler = null;
+  let viewportChangeHandler = null;
+  let viewportEmitScheduled = false;
+  const emitViewportChange = () => {
+    if (!viewportChangeHandler || viewportEmitScheduled) return;
+    viewportEmitScheduled = true;
+    queueMicrotask(() => {
+      viewportEmitScheduled = false;
+      viewportChangeHandler?.(getViewport());
+    });
+  };
   const updateFollowLatest = (next) => {
     if (followLatest === next) return;
     followLatest = next;
     followingLatestChangeHandler?.(next);
+    emitViewportChange();
   };
   let yMinOverride = null;
   let yMaxOverride = null;
@@ -2134,6 +2145,7 @@ function createChart(element, options = {}) {
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const zoomXToLatest = (factor) => {
@@ -2148,6 +2160,7 @@ function createChart(element, options = {}) {
     xSpan = nextSpan;
     xCenter = nextStart + nextSpan / 2;
     clampXViewport();
+    emitViewportChange();
     draw();
   };
   const zoomY = (factor, anchorY) => {
@@ -2168,6 +2181,7 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(nextMin, nextMax);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const pan = (deltaX, deltaY, allowX, allowY) => {
@@ -2191,6 +2205,9 @@ function createChart(element, options = {}) {
       yMinOverride = clamped.min;
       yMaxOverride = clamped.max;
     }
+    if (allowX || allowY) {
+      emitViewportChange();
+    }
     draw();
   };
   const resetYViewport = () => {
@@ -2230,6 +2247,7 @@ function createChart(element, options = {}) {
     xCenter += bars;
     clampXViewport();
     updateFollowLatest(false);
+    emitViewportChange();
     draw();
   };
   const panY = (priceDelta) => {
@@ -2241,17 +2259,20 @@ function createChart(element, options = {}) {
     const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
     yMinOverride = clamped.min;
     yMaxOverride = clamped.max;
+    emitViewportChange();
     draw();
   };
   const fitContent = () => {
     fitXViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const resetViewport = () => {
     fitXViewport();
     resetYViewport();
     updateFollowLatest(true);
+    emitViewportChange();
     draw();
   };
   const isFollowingLatest = () => followLatest;
@@ -2268,6 +2289,64 @@ function createChart(element, options = {}) {
   const onFollowingLatestChange = (handler) => {
     followingLatestChangeHandler = handler;
   };
+  const getViewport = () => {
+    let centerTimeMs = null;
+    if (data.length > 0) {
+      const centerRounded = Math.round(xCenter);
+      if (centerRounded >= 0 && centerRounded < data.length) {
+        centerTimeMs = data[centerRounded]?.time.getTime() ?? null;
+      }
+    }
+    return {
+      xSpan,
+      followingLatest: followLatest,
+      centerTimeMs,
+      yMin: yMinOverride,
+      yMax: yMaxOverride
+    };
+  };
+  const setViewport = (viewport) => {
+    let changed = false;
+    if (typeof viewport.xSpan === "number" && Number.isFinite(viewport.xSpan)) {
+      const minSpan = minVisibleBars;
+      const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+      const nextSpan = clamp(viewport.xSpan, minSpan, maxSpan);
+      if (nextSpan !== xSpan) {
+        xSpan = nextSpan;
+        changed = true;
+      }
+    }
+    if (typeof viewport.centerTimeMs === "number" && data.length > 0) {
+      const nextCenter = findNearestIndexForTimeMs(viewport.centerTimeMs);
+      if (nextCenter !== null) {
+        xCenter = nextCenter;
+        changed = true;
+      }
+    }
+    if (viewport.yMin !== void 0) {
+      yMinOverride = viewport.yMin;
+      changed = true;
+    }
+    if (viewport.yMax !== void 0) {
+      yMaxOverride = viewport.yMax;
+      changed = true;
+    }
+    if (typeof viewport.followingLatest === "boolean") {
+      if (followLatest !== viewport.followingLatest) {
+        followLatest = viewport.followingLatest;
+        followingLatestChangeHandler?.(followLatest);
+        changed = true;
+      }
+    }
+    if (changed) {
+      clampXViewport();
+      draw();
+      emitViewportChange();
+    }
+  };
+  const onViewportChange = (handler) => {
+    viewportChangeHandler = handler;
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -2883,6 +2962,9 @@ function createChart(element, options = {}) {
     isFollowingLatest,
     setFollowingLatest,
     onFollowingLatestChange,
+    getViewport,
+    setViewport,
+    onViewportChange,
     setDoubleClickEnabled,
     setDoubleClickAction,
     registerIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",