@363045841yyt/klinechart-core 0.9.0-alpha.2 → 0.9.0-alpha.4

package/src/engine/data/__tests__/chartDataManager.incrementalLoad.test.ts

@@ -2,10 +2,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { JSDOM } from 'jsdom'
 
 import type { DataFetcher, KLineData, SymbolSpec } from '../../../controllers/types'
-import { computed, createSignal } from '../../../foundation/reactivity/signal'
+import { createSignal } from '../../../foundation/reactivity/signal'
 import type { ChartDom } from '../../chartTypes'
+import { createComparisonState } from '../../state/comparisonState'
 import { createDataManagerState } from '../../state/dataManagerState'
 import { createDataState } from '../../state/dataState'
+import type { ViewportStateModule } from '../../state/viewportState'
 import { ChartDataManager, type DataDependencies } from '../chartDataManager'
 
 const MS_PER_DAY = 86_400_000
@@ -21,26 +23,48 @@ function makeKLine(timestamp: number): KLineData {
   }
 }
 
+function createMockViewport(scrollLeft = 800): ViewportStateModule {
+  let scroll = scrollLeft
+  return {
+    readonly: {
+      dpr: { peek: () => 1 },
+      scrollLeft: { peek: () => scroll },
+      scrollLeftLogical: { peek: () => scroll },
+      leftLoadBufferWidth: { peek: () => 800 },
+      contentWidth: { peek: () => 1600 },
+      viewWidth: { peek: () => 800 },
+      viewHeight: { peek: () => 600 },
+      visibleRange: { peek: () => ({ start: 0, end: 0 }) },
+      rawVisibleRange: { peek: () => ({ start: 0, end: 0 }) },
+      viewport: {
+        peek: () => ({
+          viewWidth: 800,
+          viewHeight: 600,
+          plotWidth: 800,
+          plotHeight: 600,
+          scrollLeft: scroll,
+          dpr: 1,
+        }),
+      },
+    },
+    actions: {
+      scrollTo: (v: number) => {
+        scroll = v
+      },
+    },
+  } as unknown as ViewportStateModule
+}
+
 function createDependencies(
   dom: ChartDom,
   setSymbols: (symbols: ReadonlyArray<SymbolSpec>) => void,
   symbols$: ReturnType<typeof createSignal<ReadonlyArray<SymbolSpec>>>,
 ): DataDependencies {
-  let scrollLeft = 800
   return {
     getOption: () => ({ kWidth: 8, kGap: 2 }),
-    getEffectiveDpr: () => 1,
-    getLogicalScrollLeft: () => scrollLeft,
-    getCachedScrollLeft: () => scrollLeft,
-    setScrollLeft: (value) => {
-      scrollLeft = value
-    },
     getDom: () => dom,
-    getObservedSize: () => ({ width: 800, height: 600 }),
-    getViewport: () => null,
-    getVisibleRange: () => null,
-    getLeftLoadBufferWidth: () => 800,
-    getContentWidth: () => 1600,
+    viewport: createMockViewport(),
+    comparison: createComparisonState({ symbols$ }),
     scheduleDraw: () => {},
     resetInteraction: () => {},
     getIndicatorScheduler: () => ({
@@ -50,10 +74,6 @@ function createDependencies(
     isPointerDown: () => false,
     onTimeShareDataReady: () => {},
     setSymbols,
-    setComparisonLoading: () => {},
-    comparisonSpecs$: computed(() => symbols$().slice(1)),
-    comparisonColors$: createSignal(new Map() as ReadonlyMap<string, string>),
-    comparisonLoading$: createSignal(false),
   }
 }
 

package/src/engine/data/__tests__/scrollCompensator.geometry.test.ts

@@ -1,18 +1,56 @@
 import { describe, expect, it } from 'vitest'
 
-import type { ChartDom, Viewport } from '../../chartTypes'
 import { getPhysicalKLineConfig } from '../../utils/klineConfig'
 import {
   computeContentWidth,
   computeLeftLoadBufferWidth,
   computeMaxScrollLeft,
 } from '../../state/contentGeometry'
+import type { ViewportStateModule } from '../../state/viewportState'
 import { ScrollCompensator, type ScrollDeps } from '../scrollCompensator'
 
-function makeDom(): ChartDom {
+function makeViewportModule(options: {
+  scrollLeft?: number
+  leftBuffer?: number
+  contentWidth?: number
+  viewWidth?: number
+  dpr?: number
+}): { viewport: ViewportStateModule; getScrollLeft: () => number } {
+  let scrollLeft = options.scrollLeft ?? 0
+  const viewWidth = options.viewWidth ?? 800
+  const dpr = options.dpr ?? 1
+  const leftBuffer = options.leftBuffer ?? 800
+  const contentWidth = options.contentWidth ?? 1600
+
+  const viewport = {
+    readonly: {
+      dpr: { peek: () => dpr },
+      scrollLeft: { peek: () => scrollLeft },
+      leftLoadBufferWidth: { peek: () => leftBuffer },
+      contentWidth: { peek: () => contentWidth },
+      viewWidth: { peek: () => viewWidth },
+      viewHeight: { peek: () => 600 },
+      viewport: {
+        peek: () => ({
+          viewWidth,
+          viewHeight: 600,
+          plotWidth: viewWidth,
+          plotHeight: 600,
+          scrollLeft,
+          dpr,
+        }),
+      },
+    },
+    actions: {
+      scrollTo: (v: number) => {
+        scrollLeft = v
+      },
+    },
+  } as unknown as ViewportStateModule
+
   return {
-    container: { clientWidth: 800 } as HTMLDivElement,
-    scrollContent: undefined,
+    viewport,
+    getScrollLeft: () => scrollLeft,
   }
 }
 
@@ -23,7 +61,6 @@ function makeDeps(options: {
   viewWidth?: number
   dataLength?: number
 } = {}): { deps: ScrollDeps; getScrollLeft: () => number } {
-  let scrollLeft = options.scrollLeft ?? 0
   const viewWidth = options.viewWidth ?? 800
   const dataLength = options.dataLength ?? 100
   const kWidth = 8
@@ -53,32 +90,20 @@ function makeDeps(options: {
       kGap,
     })
 
-  const viewport: Viewport = {
+  const { viewport, getScrollLeft } = makeViewportModule({
+    scrollLeft: options.scrollLeft ?? 0,
+    leftBuffer,
+    contentWidth,
     viewWidth,
-    viewHeight: 600,
-    plotWidth: viewWidth,
-    plotHeight: 600,
-    scrollLeft,
     dpr,
-  }
-
-  const deps: ScrollDeps = {
-    getOption: () => ({ kWidth, kGap }),
-    getEffectiveDpr: () => dpr,
-    getCachedScrollLeft: () => scrollLeft,
-    setScrollLeft: (v) => {
-      scrollLeft = v
-    },
-    getDom: () => makeDom(),
-    getObservedSize: () => ({ width: viewWidth, height: 600 }),
-    getViewport: () => viewport,
-    getLeftLoadBufferWidth: () => leftBuffer,
-    getContentWidth: () => contentWidth,
-  }
+  })
 
   return {
-    deps,
-    getScrollLeft: () => scrollLeft,
+    deps: {
+      getOption: () => ({ kWidth, kGap }),
+      viewport,
+    },
+    getScrollLeft,
   }
 }
 
@@ -89,7 +114,7 @@ describe('ScrollCompensator geometry SSOT', () => {
     const kWidth = 8
     const kGap = 2
     const dpr = 1
-    const input = {
+    const leftBuffer = computeLeftLoadBufferWidth({
       viewWidth,
       plotWidth: viewWidth,
       dataLength,
@@ -97,27 +122,28 @@ describe('ScrollCompensator geometry SSOT', () => {
       dpr,
       kWidth,
       kGap,
-    }
-    const leftBuffer = computeLeftLoadBufferWidth(input)
-    const contentWidth = computeContentWidth(input)
+    })
+    const contentWidth = computeContentWidth({
+      viewWidth,
+      plotWidth: viewWidth,
+      dataLength,
+      period: 'daily',
+      dpr,
+      kWidth,
+      kGap,
+    })
     const maxScroll = computeMaxScrollLeft(contentWidth, viewWidth)
 
     const { deps, getScrollLeft } = makeDeps({
-      viewWidth,
-      dataLength,
+      scrollLeft: 0,
       leftBuffer,
       contentWidth,
-      scrollLeft: 0,
+      viewWidth,
+      dataLength,
     })
-
-    const compensator = new ScrollCompensator(deps)
-    compensator.scrollToRight(dataLength)
-
+    new ScrollCompensator(deps).scrollToRight(dataLength)
     const scrollLeft = getScrollLeft()
-    expect(scrollLeft).toBeLessThanOrEqual(maxScroll)
-    expect(scrollLeft).toBeGreaterThanOrEqual(0)
 
-    // target 计算应与 clamp 后一致（数据足够长时贴右）
     const { unitPx, startXPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
     const lastKLineEndPx = (startXPx + dataLength * unitPx) / dpr
     const rawTarget = leftBuffer + (lastKLineEndPx - viewWidth)
@@ -125,60 +151,46 @@ describe('ScrollCompensator geometry SSOT', () => {
     expect(scrollLeft).toBe(expected)
   })
 
-  it('scrollToRight uses deps.getContentWidth / getLeftLoadBufferWidth, not local formulas', () => {
+  it('scrollToRight uses viewport contentWidth / leftLoadBufferWidth, not local formulas', () => {
     const injectedLeft = 111
     const injectedContent = 500
     const viewWidth = 400
-    let scrollLeft = 0
+    const { viewport, getScrollLeft } = makeViewportModule({
+      scrollLeft: 0,
+      leftBuffer: injectedLeft,
+      contentWidth: injectedContent,
+      viewWidth,
+      dpr: 1,
+    })
 
     const deps: ScrollDeps = {
       getOption: () => ({ kWidth: 8, kGap: 2 }),
-      getEffectiveDpr: () => 1,
-      getCachedScrollLeft: () => scrollLeft,
-      setScrollLeft: (v) => {
-        scrollLeft = v
-      },
-      getDom: () => makeDom(),
-      getObservedSize: () => ({ width: viewWidth, height: 600 }),
-      getViewport: () => ({
-        viewWidth,
-        viewHeight: 600,
-        plotWidth: viewWidth,
-        plotHeight: 600,
-        scrollLeft: 0,
-        dpr: 1,
-      }),
-      getLeftLoadBufferWidth: () => injectedLeft,
-      getContentWidth: () => injectedContent,
+      viewport,
     }
 
     const compensator = new ScrollCompensator(deps)
     compensator.scrollToRight(50)
 
     const maxScroll = Math.max(0, injectedContent - viewWidth)
-    expect(scrollLeft).toBeLessThanOrEqual(maxScroll)
-    // leftBuffer 来自注入值，目标会基于 111 计算并 clamp
-    expect(scrollLeft).toBe(maxScroll)
+    expect(getScrollLeft()).toBeLessThanOrEqual(maxScroll)
+    expect(getScrollLeft()).toBe(maxScroll)
   })
 
   it('adjustScrollAfterDataChange uses injected left buffer when scrollLeft <= 0', () => {
-    let scrollLeft = 0
     const injectedLeft = 640
+    const { viewport, getScrollLeft } = makeViewportModule({
+      scrollLeft: 0,
+      leftBuffer: injectedLeft,
+      contentWidth: 2000,
+      viewWidth: 800,
+      dpr: 1,
+    })
     const deps: ScrollDeps = {
       getOption: () => ({ kWidth: 8, kGap: 2 }),
-      getEffectiveDpr: () => 1,
-      getCachedScrollLeft: () => scrollLeft,
-      setScrollLeft: (v) => {
-        scrollLeft = v
-      },
-      getDom: () => makeDom(),
-      getObservedSize: () => ({ width: 800, height: 600 }),
-      getViewport: () => null,
-      getLeftLoadBufferWidth: () => injectedLeft,
-      getContentWidth: () => 2000,
+      viewport,
     }
 
     new ScrollCompensator(deps).adjustScrollAfterDataChange(10)
-    expect(scrollLeft).toBe(injectedLeft)
+    expect(getScrollLeft()).toBe(injectedLeft)
   })
 })

package/src/engine/data/chartDataManager.ts

@@ -6,12 +6,13 @@ import { TimeShareBuffer } from '../../data/timeShareBuffer'
 import type { TimeShareFetcherFn } from '../../data/types'
 import { createSignal, type ReadonlySignal, type Signal } from '../../foundation/reactivity/signal'
 import type { KLineData, TimeShareData } from '../../foundation/types/price'
-import type { ChartDom, Viewport } from '../chartTypes'
+import type { ChartDom } from '../chartTypes'
 import type { VisibleRange, UpdateLevel } from '../layout/pane'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
-import { getVisibleRange } from '../viewport/viewport'
 import type { DataStateModule } from '../state/dataState'
 import type { DataManagerStateModule } from '../state/dataManagerState'
+import type { ViewportStateModule } from '../state/viewportState'
+import type { ComparisonStateModule } from '../state/comparisonState'
 
 import { ComparisonManager } from './comparisonManager'
 import { FetchBatchScheduler } from './fetchBatchScheduler'
@@ -20,17 +21,11 @@ import { ScrollCompensator } from './scrollCompensator'
 
 export interface DataDependencies {
   getOption: () => { kWidth: number; kGap: number }
-  getEffectiveDpr: () => number
-  getLogicalScrollLeft: () => number
-  getCachedScrollLeft: () => number
-  setScrollLeft: (v: number) => void
   getDom: () => ChartDom
-  getObservedSize: () => { width: number; height: number }
-  getViewport: () => Viewport | null
-  getVisibleRange: () => VisibleRange | null
-  /** 几何 SSOT：由 kernel viewport.readonly 注入 */
-  getLeftLoadBufferWidth: () => number
-  getContentWidth: () => number
+  /** scroll / dpr / 可见区间 / 几何 SSOT */
+  viewport: ViewportStateModule
+  /** 对比叠加状态 SSOT */
+  comparison: ComparisonStateModule
   scheduleDraw: (level?: UpdateLevel) => void
   resetInteraction: () => void
   getIndicatorScheduler: () => {
@@ -40,11 +35,8 @@ export interface DataDependencies {
   isPointerDown: () => boolean
   onTimeShareDataReady: (dataLength: number) => void
   onDataProcessed?: (data: KLineData[], range: VisibleRange) => void
+  /** 写 symbols 选择（含 primary + comparison） */
   setSymbols: (symbols: ReadonlyArray<SymbolSpec>) => void
-  setComparisonLoading: (loading: boolean) => void
-  comparisonSpecs$: ReadonlySignal<ReadonlyArray<SymbolSpec>>
-  comparisonColors$: ReadonlySignal<ReadonlyMap<string, string>>
-  comparisonLoading$: ReadonlySignal<boolean>
 }
 
 const BUF_PRIMARY = 'main'
@@ -95,10 +87,10 @@ export class ChartDataManager {
       getKLineBuffer: (key) => this._klineBuffers.get(key),
       getKLineBufferKeys: () => [...this._klineBuffers.keys()],
       scheduleDraw: () => this.deps.scheduleDraw(),
-      getSpecs: () => this.deps.comparisonSpecs$.peek(),
-      setLoading: (loading) => this.deps.setComparisonLoading(loading),
+      getSpecs: () => this.deps.comparison.readonly.specs.peek(),
+      setLoading: (loading) => this.deps.comparison.actions.setLoading(loading),
     })
-    this._comparisonSpecsUnsub = this.deps.comparisonSpecs$.subscribe(() => {
+    this._comparisonSpecsUnsub = this.deps.comparison.readonly.specs.subscribe(() => {
       this.reconcileComparisonBuffers()
     })
     this.reconcileComparisonBuffers()
@@ -305,7 +297,7 @@ export class ChartDataManager {
       this._dmState.actions.setRangeInitialized(true)
     }
 
-    let currentRange = this.deps.getVisibleRange()
+    let currentRange = this.getVisibleRangeOrNull()
     if (!currentRange && this._dmState.readonly.rangeInitialized.peek() && bufferData.length > 0) {
       currentRange = { start: 0, end: bufferData.length }
     }
@@ -325,7 +317,7 @@ export class ChartDataManager {
   }
 
   private recordIncrementalLoad(prependedCount: number): void {
-    this._dmState.actions.recordIncrementalLoad(prependedCount, this.deps.getLeftLoadBufferWidth())
+    this._dmState.actions.recordIncrementalLoad(prependedCount, this.deps.viewport.readonly.leftLoadBufferWidth.peek())
   }
 
   private scheduleIncrementalLoadHintFlush(key: string): void {
@@ -370,7 +362,7 @@ export class ChartDataManager {
   // ── Internal helpers ──
 
   getLeftLoadBufferWidth(): number {
-    return this.deps.getLeftLoadBufferWidth()
+    return this.deps.viewport.readonly.leftLoadBufferWidth.peek()
   }
 
   private getActiveKLineLength(): number {
@@ -378,9 +370,21 @@ export class ChartDataManager {
     return buf ? buf.getRawData().length : 0
   }
 
+  /** 无 viewport / 无数据时返回 null；clamped 可索引区间（start>=0） */
+  private getVisibleRangeOrNull(): VisibleRange | null {
+    if (this.deps.viewport.readonly.viewWidth.peek() === 0) return null
+    return this.deps.viewport.readonly.visibleRange.peek()
+  }
+
+  /** raw 可见区间（含左右扩窗，start 可能为 -1）；供增量加载左缘检测 */
+  private getRawVisibleRangeOrNull(): VisibleRange | null {
+    if (this.deps.viewport.readonly.viewWidth.peek() === 0) return null
+    return this.deps.viewport.readonly.rawVisibleRange.peek()
+  }
+
   /** 当前可见范围（on-demand 实时计算，消除 stale 缓存） */
   getCurrentVisibleRange(): VisibleRange | null {
-    return this.deps.getVisibleRange()
+    return this.getVisibleRangeOrNull()
   }
 
   /** Unified data signal — always reflects the active buffer's data */
@@ -448,6 +452,16 @@ export class ChartDataManager {
     return buf ? buf.getRawData() : []
   }
 
+  getTimeSharePreClose(): number | null {
+    const buf = this.getActiveTimeShareBuffer()
+    return buf?.getPreClose() ?? null
+  }
+
+  setTimeSharePreClose(preClose: number | null): void {
+    const buf = this.getActiveTimeShareBuffer()
+    if (buf) buf.setPreClose(preClose)
+  }
+
   getTimeShareSignal(): ReadonlySignal<ReadonlyArray<TimeShareData>> {
     const buf = this.getActiveTimeShareBuffer()
     return (buf?.data ?? createSignal<ReadonlyArray<TimeShareData>>([])) as ReadonlySignal<
@@ -469,7 +483,7 @@ export class ChartDataManager {
   }
 
   getComparisonSpecs(): SymbolSpec[] {
-    return this.deps.comparisonSpecs$.peek().map((spec) => ({ ...spec }))
+    return this.deps.comparison.readonly.specs.peek().map((spec) => ({ ...spec }))
   }
 
   get dataBuffer(): KLineBuffer {
@@ -485,15 +499,15 @@ export class ChartDataManager {
   }
 
   get comparisonColors(): ReadonlySignal<ReadonlyMap<string, string>> {
-    return this.deps.comparisonColors$
+    return this.deps.comparison.readonly.colors
   }
 
   get comparisonLoading(): ReadonlySignal<boolean> {
-    return this.deps.comparisonLoading$
+    return this.deps.comparison.readonly.loading
   }
 
   getComparisonColors(): Map<string, string> {
-    return new Map(this.deps.comparisonColors$.peek())
+    return new Map(this.deps.comparison.readonly.colors.peek())
   }
 
   // ── Data updates (KLine) ──
@@ -554,20 +568,22 @@ export class ChartDataManager {
     if (data.length === 0) return
     const window = buf.loadedWindow
     if (!window) return
-    const range = this.deps.getVisibleRange()
-    if (!range) return
+    // 左缘扩窗检测必须用 raw（start 可为 -1）；数据下标用 clamped
+    const rawRange = this.getRawVisibleRangeOrNull()
+    const range = this.getVisibleRangeOrNull()
+    if (!rawRange || !range) return
 
     const MS_PER_DAY = 86_400_000
     const spec = buf.currentSpec
     const gapDays = getPeriodDays(spec?.period)
     let firstVisibleTs: number | undefined
 
-    if (range.start < 0 && this._dataFetcher) {
+    if (rawRange.start < 0 && this._dataFetcher) {
       const earlierThanEarliest = window.earliestTs - gapDays * MS_PER_DAY
       buf.ensureRange(earlierThanEarliest, window.earliestTs)
       firstVisibleTs = data[0]?.timestamp
     } else if (range.start < data.length) {
-      firstVisibleTs = data[Math.max(0, range.start)]?.timestamp
+      firstVisibleTs = data[range.start]?.timestamp
       if (firstVisibleTs !== undefined && firstVisibleTs < window.earliestTs) {
         buf.ensureRange(firstVisibleTs, window.earliestTs)
       }
@@ -587,18 +603,18 @@ export class ChartDataManager {
 
   addComparisonSymbol(spec: SymbolSpec): void {
     const primary = this._dataState.readonly.symbols.peek()[0]
-    if (!primary || this.deps.comparisonSpecs$.peek().some((item) => item.symbol === spec.symbol))
+    if (!primary || this.deps.comparison.readonly.specs.peek().some((item) => item.symbol === spec.symbol))
       return
-    this.deps.setSymbols([primary, ...this.deps.comparisonSpecs$.peek(), spec])
+    this.deps.setSymbols([primary, ...this.deps.comparison.readonly.specs.peek(), spec])
   }
 
   setComparisonData(symbol: string, data: KLineData[]): void {
     const primary = this._dataState.readonly.symbols.peek()[0]
     if (!primary) return
-    if (!this.deps.comparisonSpecs$.peek().some((spec) => spec.symbol === symbol)) {
+    if (!this.deps.comparison.readonly.specs.peek().some((spec) => spec.symbol === symbol)) {
       this.deps.setSymbols([
         primary,
-        ...this.deps.comparisonSpecs$.peek(),
+        ...this.deps.comparison.readonly.specs.peek(),
         { symbol, period: 'daily' },
       ])
     }
@@ -607,11 +623,11 @@ export class ChartDataManager {
 
   removeComparisonSymbol(symbol: string): void {
     const primary = this._dataState.readonly.symbols.peek()[0]
-    if (!primary || !this.deps.comparisonSpecs$.peek().some((spec) => spec.symbol === symbol))
+    if (!primary || !this.deps.comparison.readonly.specs.peek().some((spec) => spec.symbol === symbol))
       return
     this.deps.setSymbols([
       primary,
-      ...this.deps.comparisonSpecs$.peek().filter((spec) => spec.symbol !== symbol),
+      ...this.deps.comparison.readonly.specs.peek().filter((spec) => spec.symbol !== symbol),
     ])
     this.deps.scheduleDraw()
   }
@@ -636,19 +652,8 @@ export class ChartDataManager {
     const dataLen = kRaw?.length ?? 0
     let visibleStart = 0
     if (dataLen > 0) {
-      const vp = this.deps.getViewport()
-      if (vp) {
-        const opt = this.deps.getOption()
-        const vRange = getVisibleRange(
-          vp.scrollLeft,
-          vp.plotWidth,
-          opt.kWidth,
-          opt.kGap,
-          dataLen,
-          vp.dpr,
-        )
-        visibleStart = vRange ? Math.max(0, vRange.start) : 0
-      }
+      const vRange = this.getVisibleRangeOrNull()
+      visibleStart = vRange ? Math.max(0, vRange.start) : 0
     }
     // 双路径守卫：
     //   - switchToTimeShareForDate 路径：setTimeShareQueryDate 已在
@@ -693,7 +698,7 @@ export class ChartDataManager {
       return
     }
     const next = { ...current, period }
-    this.setSymbols([next, ...this.deps.comparisonSpecs$.peek()])
+    this.setSymbols([next, ...this.deps.comparison.readonly.specs.peek()])
   }
 
   /**
@@ -725,7 +730,7 @@ export class ChartDataManager {
       incremental: false,
       source: source.source ?? 'custom',
     }
-    this.setSymbols([spec, ...this.deps.comparisonSpecs$.peek()])
+    this.setSymbols([spec, ...this.deps.comparison.readonly.specs.peek()])
 
     const symbolCode = spec.symbol
     if (symbolCode) {
@@ -760,7 +765,7 @@ export class ChartDataManager {
     this._dataState.actions.setData([])
     this._dmState.actions.setRangeInitialized(false)
     this._dmState.actions.setSavedScrollTimestamp(null)
-    this.setSymbols([spec, ...this.deps.comparisonSpecs$.peek()])
+    this.setSymbols([spec, ...this.deps.comparison.readonly.specs.peek()])
   }
 
   getPreCustomSpec(): SymbolSpec | null {
@@ -872,12 +877,12 @@ export class ChartDataManager {
     )
     this._dmState.actions.setSavedScrollTimestamp(null)
     if (idx >= 0) {
-      const dpr = this.deps.getEffectiveDpr()
+      const dpr = this.deps.viewport.readonly.dpr.peek()
       const opt = this.deps.getOption()
       const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
       const leftBuffer = this.getLeftLoadBufferWidth()
       const scrollLeft = ((idx + 1) * unitPx + startXPx) / dpr + leftBuffer
-      this.deps.setScrollLeft(scrollLeft)
+      this.deps.viewport.actions.scrollTo(scrollLeft)
       return true
     }
     return false
@@ -886,7 +891,7 @@ export class ChartDataManager {
   // ── Content width ──
 
   getContentWidth(): number {
-    return this.deps.getContentWidth()
+    return this.deps.viewport.readonly.contentWidth.peek()
   }
 
   scrollToRight(): void {
@@ -962,12 +967,12 @@ export class ChartDataManager {
   }
 
   getLogicalIndexAtX(mouseX: number): number | null {
-    const vp = this.deps.getViewport()
-    if (!vp) return null
+    if (this.deps.viewport.readonly.viewWidth.peek() === 0) return null
+    const vp = this.deps.viewport.readonly.viewport.peek()
     const buf = this.getActiveDataBuffer()
     const data = buf ? buf.getRawData() : []
     if (data.length === 0) return null
-    const dpr = this.deps.getEffectiveDpr()
+    const dpr = this.deps.viewport.readonly.dpr.peek()
     const opt = this.deps.getOption()
     const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
     const worldX = Math.round((vp.scrollLeft + mouseX) * dpr)

package/src/engine/data/incrementalLoadHint.ts

@@ -1,14 +1,14 @@
 import type { ChartDom } from '../chartTypes'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
+import type { ViewportStateModule } from '../state/viewportState'
 
 /** 与 theme selectionFill 对齐：light #2D7FF933 / dark #4A9EFF33；fallback 为 light 默认 */
 const INCREMENTAL_LOAD_HINT_BG = 'var(--klc-color-selection-fill, #2D7FF933)'
 
 export interface HintDeps {
   getOption: () => { kWidth: number; kGap: number }
-  getEffectiveDpr: () => number
   getDom: () => ChartDom
-  getViewport: () => { viewHeight: number } | null
+  viewport: ViewportStateModule
 }
 
 interface ActiveHint {
@@ -86,17 +86,18 @@ export class IncrementalLoadHint {
   }
 
   private _updateGeometry(hint: HTMLDivElement, count: number, leftBufferWidth: number): void {
-    const dpr = this.deps.getEffectiveDpr()
+    const dpr = this.deps.viewport.readonly.dpr.peek()
     const opt = this.deps.getOption()
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
 
     hint.style.left = `${leftBufferWidth}px`
     const width = (startXPx + count * unitPx) / dpr
     hint.style.width = `${Math.max(0, width)}px`
-    hint.style.height = `${Math.max(
-      0,
-      this.deps.getViewport()?.viewHeight ?? this.deps.getDom().container?.clientHeight ?? 0,
-    )}px`
+    const viewHeight =
+      this.deps.viewport.readonly.viewHeight.peek() ||
+      this.deps.getDom().container?.clientHeight ||
+      0
+    hint.style.height = `${Math.max(0, viewHeight)}px`
   }
 
   private _fadeOutAndRemove(entry: ActiveHint): void {