@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/engine/utils/chartZoomController.ts

@@ -1,47 +1,51 @@
-import { computeZoom } from './zoom'
-
-export interface ZoomCommittedResult {
-  kWidth: number
-  kGap: number
-  zoomLevel: number
-}
+import { computeZoom, deriveKGap } from './zoom'
+import type { ZoomStateModule } from '../state/zoomState'
 
 export interface ZoomDependencies {
   getLogicalScrollLeft: () => number
   getCurrentDpr: () => number
-  getLeftLoadBufferWidth: () => number
-  getContentWidth: () => number
   getClientWidth: () => number
+  getDataLength: () => number
+  getPlotWidth: () => number
   setScrollLeft: (v: number) => void
-  onZoomCommitted: (result: ZoomCommittedResult) => void
-  getKWidth: () => number
-  getKGap: () => number
+  onChange?: () => void
   getMinKWidth: () => number
   getMaxKWidth: () => number
+  getPeriod: () => string
   zoomLevelCount: number
-  initialZoomLevel: number
 }
 
+/**
+ * 缩放协调器 —— 无本地业务状态。
+ * zoomLevel/kWidth 归属 zoomState；此类只解释手势并协调 scroll 副作用。
+ */
 export class ChartZoomController {
-  private _currentZoomLevel: number
   private readonly deps: ZoomDependencies
+  private readonly zoomState: ZoomStateModule
 
-  constructor(deps: ZoomDependencies) {
+  constructor(deps: ZoomDependencies, zoomState: ZoomStateModule) {
     this.deps = deps
-    const clamped = Math.max(1, Math.min(deps.zoomLevelCount, deps.initialZoomLevel ?? 1))
-    this._currentZoomLevel = clamped
+    this.zoomState = zoomState
   }
 
   get currentZoomLevel(): number {
-    return this._currentZoomLevel
+    return this.zoomState.readonly.zoomLevel.peek()
   }
 
-  get zoomLevelCount(): number {
-    return this.deps.zoomLevelCount
+  get currentKWidth(): number {
+    return this.zoomState.readonly.kWidth.peek()
+  }
+
+  get currentKGap(): number {
+    return deriveKGap({
+      kWidth: this.currentKWidth,
+      dpr: this.deps.getCurrentDpr(),
+      period: this.deps.getPeriod(),
+    })
   }
 
-  setZoomLevel(level: number): void {
-    this._currentZoomLevel = Math.max(1, Math.min(this.deps.zoomLevelCount, level))
+  get zoomLevelCount(): number {
+    return this.deps.zoomLevelCount
   }
 
   zoomToLevel(level: number, anchorX?: number): void {
@@ -50,36 +54,36 @@ export class ChartZoomController {
   }
 
   zoomIn(anchorX?: number): void {
-    this.zoomToLevel(this._currentZoomLevel + 1, anchorX)
+    this.zoomToLevel(this.currentZoomLevel + 1, anchorX)
   }
 
   zoomOut(anchorX?: number): void {
-    this.zoomToLevel(this._currentZoomLevel - 1, anchorX)
+    this.zoomToLevel(this.currentZoomLevel - 1, anchorX)
   }
 
   handleWheel(deltaY: number, viewportX: number): void {
     const delta = deltaY > 0 ? -1 : 1
     const targetLevel = Math.max(
       1,
-      Math.min(this.deps.zoomLevelCount, this._currentZoomLevel + delta),
+      Math.min(this.deps.zoomLevelCount, this.currentZoomLevel + delta),
     )
-    if (targetLevel === this._currentZoomLevel) return
+    if (targetLevel === this.currentZoomLevel) return
     this.applyZoom(targetLevel, viewportX)
   }
 
   handlePinch(delta: number, centerClientX: number): void {
     const targetLevel = Math.max(
       1,
-      Math.min(this.deps.zoomLevelCount, this._currentZoomLevel + delta),
+      Math.min(this.deps.zoomLevelCount, this.currentZoomLevel + delta),
     )
-    if (targetLevel === this._currentZoomLevel) return
+    if (targetLevel === this.currentZoomLevel) return
     this.applyZoom(targetLevel, centerClientX)
   }
 
   private applyZoom(targetLevel: number, anchorViewportX?: number): void {
-    if (targetLevel === this._currentZoomLevel) return
+    if (targetLevel === this.currentZoomLevel) return
 
-    const delta = targetLevel - this._currentZoomLevel
+    const delta = targetLevel - this.currentZoomLevel
     const logicalScrollLeft = this.deps.getLogicalScrollLeft()
     const dpr = this.deps.getCurrentDpr()
 
@@ -87,31 +91,24 @@ export class ChartZoomController {
       delta,
       anchorViewportX ?? 0,
       logicalScrollLeft,
-      this._currentZoomLevel,
-      this.deps.getKWidth(),
-      this.deps.getKGap(),
+      this.currentZoomLevel,
+      this.currentKWidth,
+      this.currentKGap,
       {
         minKWidth: this.deps.getMinKWidth(),
         maxKWidth: this.deps.getMaxKWidth(),
         zoomLevelCount: this.deps.zoomLevelCount,
         dpr,
+        dataLength: this.deps.getDataLength(),
+        plotWidth: this.deps.getPlotWidth(),
+        clientWidth: this.deps.getClientWidth(),
       },
     )
 
     if (!result) return
 
-    const domScrollLeft = result.newScrollLeft + this.deps.getLeftLoadBufferWidth()
-    const contentWidth = this.deps.getContentWidth()
-    const clientWidth = this.deps.getClientWidth()
-    const maxScroll = Math.max(0, contentWidth - clientWidth)
-    const clampedScrollLeft =
-      Math.round(Math.max(0, Math.min(domScrollLeft, maxScroll)) * dpr) / dpr
-    this._currentZoomLevel = result.targetLevel
-    this.deps.setScrollLeft(clampedScrollLeft)
-    this.deps.onZoomCommitted({
-      kWidth: result.newKWidth,
-      kGap: result.newKGap,
-      zoomLevel: result.targetLevel,
-    })
+    this.zoomState.actions.setZoomLevel(result.targetLevel)
+    this.deps.setScrollLeft(result.newDomScrollLeft)
+    this.deps.onChange?.()
   }
 }

package/src/engine/utils/zoom.ts

@@ -5,11 +5,20 @@ import { getPhysicalKLineConfig } from './klineConfig'
  * 无副作用、无 DOM 访问，供 Vue 层直接调用
  */
 
-export interface ZoomConfig {
+export interface ZoomConfigBase {
   minKWidth: number
   maxKWidth: number
   zoomLevelCount: number
+}
+
+export interface ZoomConfig extends ZoomConfigBase {
   dpr: number
+  /** K 线数据条数（用于计算缩放后内容宽度） */
+  dataLength: number
+  /** 视口绘图区宽度（= leftLoadBufferWidth = viewWidth，用于内容宽度计算） */
+  plotWidth: number
+  /** 容器总宽度（用于 maxScroll 裁剪） */
+  clientWidth: number
 }
 
 export interface ZoomResult {
@@ -17,12 +26,17 @@ export interface ZoomResult {
   newKWidth: number
   newKGap: number
   newScrollLeft: number
+  /** 裁剪后的 DOM scrollLeft（已用新 kWidth/kGap 计算内容宽度） */
+  newDomScrollLeft: number
 }
 
 const PHYS_K_GAP_MAX = 3
 
+/** 尾部预留 K 线槽位数（与 ScrollCompensator 保持一致） */
+const TRAILING_SLOTS = 30
+
 /** 将缩放级别转换为 K 线宽度（逻辑像素） */
-export function zoomLevelToKWidth(level: number, config: ZoomConfig): number {
+export function zoomLevelToKWidth(level: number, config: ZoomConfigBase): number {
   const t = (level - 1) / (config.zoomLevelCount - 1)
   return config.minKWidth + t * (config.maxKWidth - config.minKWidth)
 }
@@ -34,6 +48,26 @@ export function kGapFromKWidth(kWidth: number, dpr: number): number {
   return kGapPx / dpr
 }
 
+export interface DeriveKGapInput {
+  kWidth: number
+  dpr: number
+  period: string
+}
+
+/**
+ * 图表内部 kGap 派生规则。
+ *
+ * @remarks kGap 不是可写业务状态。分时固定 1 物理像素间隙；
+ * 离散 K 线周期走 kGapFromKWidth。
+ */
+export function deriveKGap(input: DeriveKGapInput): number {
+  const dpr = input.dpr > 0 ? input.dpr : 1
+  if (input.period === 'timeshare') {
+    return 1 / dpr
+  }
+  return kGapFromKWidth(input.kWidth, dpr)
+}
+
 /**
  * 缩放一级（+1 放大 / -1 缩小）
  * 返回新状态或 null（已达边界）
@@ -60,7 +94,17 @@ export function computeZoom(
   const newAnchorWorldPx = newConfig.startXPx + anchorSlotFloat * newConfig.unitPx
   const newScrollLeft = newAnchorWorldPx / config.dpr - mouseX
 
-  return { targetLevel, newKWidth, newKGap, newScrollLeft }
+  // 用新 kWidth/kGap 计算内容宽度，确保裁剪使用正确的（缩放后）尺寸
+  const dataPlotWidth =
+    (newConfig.startXPx + (config.dataLength + TRAILING_SLOTS) * newConfig.unitPx) / config.dpr
+  const newContentWidth = config.plotWidth + Math.max(dataPlotWidth, config.plotWidth)
+  const maxScroll = Math.max(0, newContentWidth - config.clientWidth)
+
+  const domScrollLeft = newScrollLeft + config.plotWidth
+  const newDomScrollLeft =
+    Math.round(Math.max(0, Math.min(domScrollLeft, maxScroll)) * config.dpr) / config.dpr
+
+  return { targetLevel, newKWidth, newKGap, newScrollLeft, newDomScrollLeft }
 }
 
 /**

package/src/engine/viewport/chartViewportManager.ts

@@ -1,126 +1,66 @@
-import { createSignal, type Signal } from '../../reactivity/signal'
+import { type ReadonlySignal } from '../../foundation/reactivity/signal'
 import type { ChartDom, Viewport, ViewportState } from '../chartTypes'
-import type { VisibleRange, UpdateLevel } from '../layout/pane'
+import type { ChartStateKernel } from '../state/chartStateKernel'
 
+/** Minimal manager-level deps (DOM + lifecycle callbacks). */
 export interface ViewportDependencies {
   getDom: () => ChartDom
-  getBottomAxisHeight: () => number
-  getLeftLoadBufferWidth: () => number
-  getZoomLevel: () => number
-  getLastVisibleRange: () => VisibleRange
-  getKWidth: () => number
-  getKGap: () => number
-  scheduleDraw: (level?: UpdateLevel) => void
   onResizeCompleted: () => void
-  resizeSharedWebGLSurface: (plotWidth: number, plotHeight: number, dpr: number) => void
 }
 
 export class ChartViewportManager {
   private deps: ViewportDependencies
-
-  /** 精确 DPR（来自 ResizeObserver 的 devicePixelContentBoxSize） */
-  private preciseDpr = 0
-
-  /** 统一监听容器尺寸与 DPR 变化 */
+  private kernel: ChartStateKernel
   private resizeObserver?: ResizeObserver
+  private onScroll?: (e: Event) => void
 
-  /** scroll 事件处理器引用（用于 cleanup） */
-  private onScroll?: () => void
-
-  /** 最近一次观测到的容器尺寸 */
-  private observedSize = { width: 0, height: 0 }
-
-  /** 缓存的 scrollLeft（通过 scroll 事件同步，避免每帧读取 DOM 触发强制回流） */
-  private cachedScrollLeft = 0
-
-  /** 待写入 DOM 的 scrollLeft（在 RAF 回调中应用，确保 Vue 已完成 DOM 更新） */
-  private _pendingScrollLeft: number | null = null
-
-  /** 内部视口状态 */
-  private _internalViewport: Viewport | null = null
-
-  /** 视口状态信号 */
-  private _viewportSignal = createSignal<ViewportState>({
-    zoomLevel: 1,
-    plotWidth: 0,
-    plotHeight: 0,
-    dpr: 1,
-    visibleFrom: 0,
-    visibleTo: 0,
-    kWidth: 0,
-    kGap: 1,
-  })
-
-  constructor(deps: ViewportDependencies) {
-    this.deps = deps
+  get viewportSignal(): ReadonlySignal<ViewportState> {
+    return this.kernel.viewport.readonly.viewportState
   }
 
-  /** 视口状态信号 */
-  get viewportSignal(): Signal<ViewportState> {
-    return this._viewportSignal
+  constructor(deps: ViewportDependencies, kernel: ChartStateKernel) {
+    this.deps = deps
+    this.kernel = kernel
   }
 
-  /** 获取缓存的 scrollLeft（避免读取 DOM 触发强制回流） */
   getCachedScrollLeft(): number {
-    return this.cachedScrollLeft
+    return this.kernel.viewport.readonly.scrollLeft.peek()
   }
 
-  /** 获取逻辑 scrollLeft（减去左侧加载缓冲宽度，可为负值） */
   getLogicalScrollLeft(): number {
-    return this.cachedScrollLeft - this.deps.getLeftLoadBufferWidth()
+    return this.kernel.viewport.readonly.scrollLeftLogical.peek()
   }
 
-  /** 获取当前视口 */
   getViewport(): Viewport | null {
-    return this._internalViewport
+    if (this.kernel.viewport.readonly.viewWidth.peek() === 0) return null
+    return this.kernel.viewport.readonly.viewport.peek()
   }
 
-  /** 获取有效 DPR */
   getEffectiveDpr(): number {
-    let dpr: number
-    if (typeof navigator !== 'undefined' && navigator.userAgent.includes('Electron')) {
-      // Electron 桌面客户端：操作系统 DPR 是精确值，避免 contentBoxSize 亚像素导致的分式误差
-      dpr = window.devicePixelRatio || 1
-    } else {
-      // 浏览器：优先使用 ResizeObserver devicePixelContentBoxSize 提供的精确 DPR
-      dpr =
-        this.preciseDpr > 0 ? this.preciseDpr : Math.round((window.devicePixelRatio || 1) * 64) / 64
-    }
-    if (dpr < 1) dpr = 1
-    return dpr
+    return this.kernel.viewport.readonly.dpr.peek()
   }
 
-  /** 获取观测到的容器尺寸 */
   getObservedSize(): { width: number; height: number } {
-    return this.observedSize
+    return {
+      width: this.kernel.viewport.readonly.viewWidth.peek(),
+      height: this.kernel.viewport.readonly.viewHeight.peek(),
+    }
   }
 
-  /** 设置滚动位置（缓存 + 待写入） */
   setScrollLeft(v: number): void {
-    this.cachedScrollLeft = v
-    this._pendingScrollLeft = v
-  }
-
-  /** 在 RAF 回调中应用待写入的 scrollLeft */
-  applyPendingScrollLeft(container: HTMLElement): void {
-    if (this._pendingScrollLeft !== null) {
-      container.scrollLeft = this._pendingScrollLeft
-      this.cachedScrollLeft = container.scrollLeft
-      this._pendingScrollLeft = null
-    }
+    this.kernel.viewport.actions.scrollTo(v)
   }
 
-  /** 初始化 ResizeObserver 和 scroll 监听 */
   init(): void {
     if (typeof ResizeObserver === 'undefined') return
 
     const target = this.deps.getDom().container
     if (!target) return
 
-    // 初始化 scrollLeft 缓存
-    this.cachedScrollLeft = target.scrollLeft
-    this.onScroll = () => {
-      this.cachedScrollLeft = target.scrollLeft
+    this.kernel.initViewport()
+
+    this.onScroll = (e: Event) => {
+      this.kernel.viewport.actions.syncFromDomScroll()
     }
     target.addEventListener('scroll', this.onScroll, { passive: true })
 
@@ -128,20 +68,31 @@ export class ChartViewportManager {
       const entry = entries[0]
       if (!entry) return
 
-      const prevWidth = this.observedSize.width
-      const prevHeight = this.observedSize.height
-      const prevDpr = this.preciseDpr
+      const prevWidth = this.kernel.viewport.readonly.viewWidth.peek()
+      const prevHeight = this.kernel.viewport.readonly.viewHeight.peek()
+      const prevDpr = this.kernel.viewport.readonly.preciseDpr.peek()
 
-      this.updateObservedMetrics(entry)
+      const cssWidth = Math.max(1, Math.round(entry.contentRect.width))
+      const cssHeight = Math.max(1, Math.round(entry.contentRect.height))
+
+      let preciseDpr = 0
+      const pixelSize = entry.devicePixelContentBoxSize?.[0]
+      const cssSize = entry.contentBoxSize?.[0]
+      if (pixelSize && cssSize && cssSize.inlineSize > 0) {
+        const raw = pixelSize.inlineSize / cssSize.inlineSize
+        preciseDpr = Math.round(raw * 64) / 64
+      }
 
-      const widthChanged = this.observedSize.width !== prevWidth
-      const heightChanged = this.observedSize.height !== prevHeight
-      const dprChanged = this.preciseDpr !== prevDpr
+      this.kernel.viewport.actions.resize(cssWidth, cssHeight, preciseDpr)
+
+      const widthChanged = cssWidth !== prevWidth
+      const heightChanged = cssHeight !== prevHeight
+      const dprChanged = preciseDpr !== prevDpr
       if ((import.meta as any).env?.MODE !== 'production') {
         console.log(
           `[Chart] resize observer: ` +
-            `size ${prevWidth}x${prevHeight} -> ${this.observedSize.width}x${this.observedSize.height} ` +
-            `dpr ${prevDpr} -> ${this.preciseDpr} ` +
+            `size ${prevWidth}x${prevHeight} -> ${cssWidth}x${cssHeight} ` +
+            `dpr ${prevDpr} -> ${preciseDpr} ` +
             `changed: ${widthChanged || heightChanged ? 'size' : ''}${widthChanged || (heightChanged && dprChanged) ? '+' : ''}${dprChanged ? 'dpr' : ''}`,
         )
       }
@@ -159,201 +110,35 @@ export class ChartViewportManager {
     }
   }
 
-  /** 销毁 */
   destroy(): void {
     this.resizeObserver?.disconnect()
     this.resizeObserver = undefined
-    this.preciseDpr = 0
-    this.observedSize = { width: 0, height: 0 }
 
     if (this.onScroll) {
       this.deps.getDom().container?.removeEventListener('scroll', this.onScroll)
       this.onScroll = undefined
     }
-
-    this._internalViewport = null
   }
 
-  /**
-   * 计算视口（coordinator）
-   *
-   * 协调 4 个步骤：尺寸解析 → DPR 计算 → DOM 同步 → 状态推送。
-   * 每一子步骤均可独立测试。
-   */
   computeViewport(): Viewport | null {
-    const dims = this.resolveViewportDimensions()
-    if (!dims) return null
-    const { viewWidth, viewHeight, plotWidth, plotHeight } = dims
-
-    const dpr = this.clampDpr(viewWidth, viewHeight)
-    const scrollLeft = Math.round(this.getLogicalScrollLeft() * dpr) / dpr
-
-    this.syncCanvasDom(dpr, viewWidth, viewHeight)
-    this.deps.resizeSharedWebGLSurface(plotWidth, plotHeight, dpr)
-
-    const vp: Viewport = { viewWidth, viewHeight, plotWidth, plotHeight, scrollLeft, dpr }
-    this.applyViewportState(vp)
-    return vp
-  }
-
-  /**
-   * 解析容器尺寸
-   *
-   * 优先使用 ResizeObserver 上报的 observedSize，
-   * fallback 到 DOM clientWidth/clientHeight。
-   * plotHeight 为 viewHeight 扣除底部轴高度。
-   */
-  private resolveViewportDimensions(): {
-    viewWidth: number
-    viewHeight: number
-    plotWidth: number
-    plotHeight: number
-  } | null {
     const container = this.deps.getDom().container
     if (!container) return null
 
-    const viewWidth =
-      this.observedSize.width > 0
-        ? this.observedSize.width
-        : Math.max(1, Math.round(container.clientWidth))
-    const viewHeight =
-      this.observedSize.height > 0
-        ? this.observedSize.height
-        : Math.max(1, Math.round(container.clientHeight))
-    const plotWidth = Math.round(viewWidth)
-    const plotHeight = Math.round(viewHeight - this.deps.getBottomAxisHeight())
-
-    return { viewWidth, viewHeight, plotWidth, plotHeight }
-  }
-
-  /**
-   * DPR 计算与封顶
-   *
-   * 取 effectiveDpr，若总像素超 MAX_CANVAS_PIXELS（16M）则降级 dpr
-   * 以避免浏览器 canvas 创建失败。
-   */
-  private clampDpr(viewWidth: number, viewHeight: number): number {
-    const MAX_CANVAS_PIXELS = 16 * 1024 * 1024
-    let dpr = this.getEffectiveDpr()
-    if (viewWidth * dpr * (viewHeight * dpr) > MAX_CANVAS_PIXELS) {
-      dpr = Math.sqrt(MAX_CANVAS_PIXELS / (viewWidth * viewHeight))
-    }
-    return dpr
-  }
-
-  /**
-   * 同步 DOM canvas 尺寸
-   *
-   * 更新 canvasLayer 和 xAxisCanvas 的 width/height 属性与 CSS 尺寸，
-   * 确保物理像素与逻辑像素一致，消除亚像素偏移。
-   * 仅在实际值变化时写入，避免无意义回流。
-   */
-  private syncCanvasDom(dpr: number, viewWidth: number, viewHeight: number): void {
-    const dom = this.deps.getDom()
-    const dprRoundedViewWidth = Math.round(viewWidth * dpr) / dpr
-
-    const canvasLayerWidth = `${dprRoundedViewWidth}px`
-    if (dom.canvasLayer.style.width !== canvasLayerWidth) {
-      dom.canvasLayer.style.width = canvasLayerWidth
-    }
-
-    const canvasLayerHeight = `${viewHeight}px`
-    if (dom.canvasLayer.style.height !== canvasLayerHeight) {
-      dom.canvasLayer.style.height = canvasLayerHeight
-    }
-
-    const xAxisWidthPx = Math.round(dprRoundedViewWidth * dpr)
-    if (dom.xAxisCanvas.width !== xAxisWidthPx) {
-      dom.xAxisCanvas.width = xAxisWidthPx
-    }
-
-    const xAxisHeight = Math.round(this.deps.getBottomAxisHeight() * dpr)
-    if (dom.xAxisCanvas.height !== xAxisHeight) {
-      dom.xAxisCanvas.height = xAxisHeight
-    }
-
-    const xAxisCssWidth = `${dprRoundedViewWidth}px`
-    if (dom.xAxisCanvas.style.width !== xAxisCssWidth) {
-      dom.xAxisCanvas.style.width = xAxisCssWidth
-    }
-
-    const xAxisCssHeight = `${xAxisHeight / dpr}px`
-    if (dom.xAxisCanvas.style.height !== xAxisCssHeight) {
-      dom.xAxisCanvas.style.height = xAxisCssHeight
+    const viewWidth = this.kernel.viewport.readonly.viewWidth.peek()
+    const viewHeight = this.kernel.viewport.readonly.viewHeight.peek()
+    if (viewWidth === 0 || viewHeight === 0) {
+      const fallbackW = Math.max(1, Math.round(container.clientWidth))
+      const fallbackH = Math.max(1, Math.round(container.clientHeight))
+      if (fallbackW > 0 && fallbackH > 0) {
+        this.kernel.viewport.actions.resize(fallbackW, fallbackH, this.kernel.viewport.readonly.preciseDpr.peek())
+      }
     }
-  }
 
-  /**
-   * 应用视口状态
-   *
-   * 缓存 Viewport 对象并检测字段是否变化，
-   * 有变化时才写入 _viewportSignal 避免触发无关重绘。
-   */
-  private applyViewportState(vp: Viewport): void {
-    const prevViewport = this._internalViewport
-    const viewportChanged =
-      !prevViewport ||
-      prevViewport.viewWidth !== vp.viewWidth ||
-      prevViewport.viewHeight !== vp.viewHeight ||
-      prevViewport.plotWidth !== vp.plotWidth ||
-      prevViewport.plotHeight !== vp.plotHeight ||
-      prevViewport.scrollLeft !== vp.scrollLeft ||
-      prevViewport.dpr !== vp.dpr
-
-    this._internalViewport = vp
-    if (viewportChanged) {
-      const current = this._viewportSignal.peek()
-      this._viewportSignal.set({
-        zoomLevel: current.zoomLevel,
-        plotWidth: vp.plotWidth,
-        plotHeight: vp.plotHeight,
-        dpr: vp.dpr > 0 ? vp.dpr : current.dpr,
-        visibleFrom: current.visibleFrom,
-        visibleTo: current.visibleTo,
-        kWidth: current.kWidth,
-        kGap: current.kGap,
-      })
-    }
+    return this.kernel.viewport.readonly.viewport.peek()
   }
 
-  /**
-   * 更新 viewport signal（用于滚动事件/缩放后的信号同步）
-   */
+  /** @deprecated No-op — viewportState is now computed(). */
   updateViewportSignal(): void {
-    const vp = this._internalViewport
-    if (!vp) return
-
-    this._viewportSignal.set({
-      zoomLevel: this.deps.getZoomLevel(),
-      plotWidth: vp.plotWidth,
-      plotHeight: vp.plotHeight,
-      dpr: vp.dpr,
-      visibleFrom: this.deps.getLastVisibleRange().start,
-      visibleTo: this.deps.getLastVisibleRange().end,
-      kWidth: this.deps.getKWidth(),
-      kGap: this.deps.getKGap(),
-    })
-  }
-
-  private updateObservedMetrics(entry: ResizeObserverEntry) {
-    const cssWidth = Math.max(1, Math.round(entry.contentRect.width))
-    const cssHeight = Math.max(1, Math.round(entry.contentRect.height))
-    this.observedSize.width = cssWidth
-    this.observedSize.height = cssHeight
-
-    if (this.cachedScrollLeft === 0 && cssWidth > 0) {
-      this.cachedScrollLeft = cssWidth
-      this._pendingScrollLeft = cssWidth
-    }
-
-    const pixelSize = entry.devicePixelContentBoxSize?.[0]
-    const cssSize = entry.contentBoxSize?.[0]
-    if (!pixelSize || !cssSize || cssSize.inlineSize <= 0) {
-      this.preciseDpr = 0
-      return
-    }
-
-    const raw = pixelSize.inlineSize / cssSize.inlineSize
-    this.preciseDpr = Math.round(raw * 64) / 64
+    // no-op
   }
 }

package/src/engine/viewport/viewport.ts

@@ -1,4 +1,4 @@
-import type { KLineData } from '../../types/price'
+import type { KLineData } from '../../foundation/types/price'
 import type { PriceRange } from '../scale/price'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'