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

package/src/engine/indicators/chartIndicatorManager.ts

@@ -11,7 +11,7 @@ import {
   type ReadonlySignal,
   type Computed,
 } from '../../foundation/reactivity/signal'
-import type { MainIndicatorEntry } from '../state/indicatorState'
+import type { IndicatorStateModule, MainIndicatorEntry } from '../state/indicatorState'
 import type { SubPaneSpec } from '../state/subPaneState'
 import type { Layer } from '../../rendering/scene/types'
 import type { KLineData } from '../../foundation/types/price'
@@ -47,6 +47,24 @@ function mainIndicatorProjectionKey(
     .join('|')
 }
 
+/** 副图业务操作：create/remove/clear 会联动 pane 布局，不能只写 subPane 模块 */
+export interface SubPaneOps {
+  readonly entries: ReadonlySignal<ReadonlyArray<SubPaneSpec>>
+  create: (
+    paneId: string,
+    indicatorId: string,
+    params: Readonly<Record<string, unknown>>,
+  ) => void
+  remove: (paneId: string) => void
+  replace: (
+    paneId: string,
+    indicatorId: string,
+    params: Readonly<Record<string, unknown>>,
+  ) => void
+  setParams: (paneId: string, params: Readonly<Record<string, unknown>>) => void
+  clear: () => void
+}
+
 export interface IndicatorDependencies {
   getOption: () => ResolvedChartOptions
   getPluginHost: () => PluginHostImpl
@@ -58,7 +76,8 @@ export interface IndicatorDependencies {
   removeRenderer: (name: string) => void
   updateRendererConfig: (name: string, config: Record<string, unknown>) => void
   setRendererEnabled: (name: string, enabled: boolean) => void
-  getPaneRatiosSignal: () => ReadonlySignal<Readonly<Record<string, number>>>
+  /** pane ratios SSOT */
+  paneRatios$: ReadonlySignal<Readonly<Record<string, number>>>
   paneSpecs$: ReadonlySignal<ReadonlyArray<PaneSpec>>
   projectPaneLayout: (
     specs: ReadonlyArray<PaneSpec>,
@@ -74,29 +93,10 @@ export interface IndicatorDependencies {
   removeLayer: (id: string) => boolean
   getLayer: (id: string) => Layer | null
   setLayerVisibility: (id: string, visible: boolean) => void
-  getRightAxisWidth: () => number
-  getPriceLabelWidth: () => number
-  getYPaddingPx: () => number
-  mainIndicators$: ReadonlySignal<ReadonlyMap<string, MainIndicatorEntry>>
-  upsertMainIndicator: (id: string, params: Record<string, number | boolean | string>) => void
-  removeMainIndicator: (id: string) => void
-  setMainIndicatorParams: (id: string, params: Record<string, number | boolean | string>) => void
-  replaceMainIndicators: (entries: ReadonlyMap<string, MainIndicatorEntry>) => void
-  clearMainIndicators: () => void
-  subPanes$: ReadonlySignal<ReadonlyArray<SubPaneSpec>>
-  createSubPaneState: (
-    paneId: string,
-    indicatorId: string,
-    params: Readonly<Record<string, unknown>>,
-  ) => void
-  removeSubPaneState: (paneId: string) => void
-  replaceSubPaneState: (
-    paneId: string,
-    indicatorId: string,
-    params: Readonly<Record<string, unknown>>,
-  ) => void
-  updateSubPaneStateParams: (paneId: string, params: Readonly<Record<string, unknown>>) => void
-  clearSubPaneState: () => void
+  /** 主图指标状态模块 */
+  indicator: IndicatorStateModule
+  /** 副图状态 + 联动 pane 布局的复合操作 */
+  subPaneOps: SubPaneOps
   runRendererTransaction: (run: () => void) => void
 }
 
@@ -169,12 +169,12 @@ export class ChartIndicatorManager {
 
     // 注册副图活跃列表提供者
     this.indicatorScheduler.setActiveSubPaneProvider(() =>
-      this.deps.subPanes$.peek().map((entry) => entry.paneId),
+      this.deps.subPaneOps.entries.peek().map((entry) => entry.paneId),
     )
 
     // 派生信号
     this._indicatorsComputed = computed<ReadonlyArray<IndicatorInstance>>(() => {
-      const mainIndicators: IndicatorInstance[] = [...this.deps.mainIndicators$().entries()].map(
+      const mainIndicators: IndicatorInstance[] = [...this.deps.indicator.readonly.mainIndicators().entries()].map(
         ([id, entry]) => ({
           id,
           definitionId: id,
@@ -185,7 +185,7 @@ export class ChartIndicatorManager {
         }),
       )
 
-      const subIndicators: IndicatorInstance[] = this.deps.subPanes$().map((entry) => ({
+      const subIndicators: IndicatorInstance[] = this.deps.subPaneOps.entries().map((entry) => ({
         id: entry.paneId,
         definitionId: entry.indicatorId,
         label: entry.indicatorId,
@@ -198,8 +198,8 @@ export class ChartIndicatorManager {
       return [...mainIndicators, ...subIndicators]
     })
     this._subPanesComputed = computed<ReadonlyArray<SubPaneInfo>>(() => {
-      const ratios = deps.getPaneRatiosSignal()()
-      return this.deps.subPanes$().map((entry) => ({
+      const ratios = deps.paneRatios$()
+      return this.deps.subPaneOps.entries().map((entry) => ({
         paneId: entry.paneId,
         indicatorId: entry.indicatorId,
         params: { ...entry.params },
@@ -220,12 +220,12 @@ export class ChartIndicatorManager {
     }
 
     this.projectedPaneSpecs = this.deps.paneSpecs$.peek()
-    this.projectedPaneRatios = this.deps.getPaneRatiosSignal().peek()
+    this.projectedPaneRatios = this.deps.paneRatios$.peek()
     this.disposeProjection = effect(() => {
       const paneSpecs = this.deps.paneSpecs$()
-      const paneRatios = this.deps.getPaneRatiosSignal()()
-      const mainIndicators = this.deps.mainIndicators$()
-      const subPanes = this.deps.subPanes$()
+      const paneRatios = this.deps.paneRatios$()
+      const mainIndicators = this.deps.indicator.readonly.mainIndicators()
+      const subPanes = this.deps.subPaneOps.entries()
       this.deps.runRendererTransaction(() => {
         let paneChanged = false
         if (paneSpecs !== this.projectedPaneSpecs || paneRatios !== this.projectedPaneRatios) {
@@ -250,7 +250,7 @@ export class ChartIndicatorManager {
   }
 
   get mainIndicatorsSignalPeek(): ReadonlyMap<string, MainIndicatorEntry> {
-    return this.deps.mainIndicators$.peek()
+    return this.deps.indicator.readonly.mainIndicators.peek()
   }
 
   get indicatorsComputed(): Computed<ReadonlyArray<IndicatorInstance>> {
@@ -273,26 +273,26 @@ export class ChartIndicatorManager {
       return false
     }
 
-    const existing = this.deps.mainIndicators$.peek().get(id)
+    const existing = this.deps.indicator.readonly.mainIndicators.peek().get(id)
 
     if (existing) {
       if (params) {
-        this.deps.upsertMainIndicator(id, params)
+        this.deps.indicator.actions.upsert(id, params)
       }
       return true
     }
 
     const defaults = ChartIndicatorManager.DEFAULT_MAIN_PARAMS[id] ?? {}
     const merged = params ? { ...defaults, ...params } : defaults
-    this.deps.upsertMainIndicator(id, merged)
+    this.deps.indicator.actions.upsert(id, merged)
     return true
   }
 
   disableMainIndicator(indicatorId: string): boolean {
     const id = indicatorId.toUpperCase()
-    if (!this.deps.mainIndicators$.peek().has(id)) return false
+    if (!this.deps.indicator.readonly.mainIndicators.peek().has(id)) return false
 
-    this.deps.removeMainIndicator(id)
+    this.deps.indicator.actions.remove(id)
     return true
   }
 
@@ -305,11 +305,11 @@ export class ChartIndicatorManager {
   }
 
   getActiveMainIndicators(): string[] {
-    return [...this.deps.mainIndicators$.peek().keys()]
+    return [...this.deps.indicator.readonly.mainIndicators.peek().keys()]
   }
 
   isMainIndicatorActive(indicatorId: string): boolean {
-    return this.deps.mainIndicators$.peek().has(indicatorId.toUpperCase())
+    return this.deps.indicator.readonly.mainIndicators.peek().has(indicatorId.toUpperCase())
   }
 
   updateMainIndicatorParams(
@@ -317,18 +317,18 @@ export class ChartIndicatorManager {
     params: Record<string, number | boolean | string>,
   ): void {
     const id = indicatorId.toUpperCase()
-    if (!this.deps.mainIndicators$.peek().has(id)) return
+    if (!this.deps.indicator.readonly.mainIndicators.peek().has(id)) return
 
-    this.deps.setMainIndicatorParams(id, params)
+    this.deps.indicator.actions.setParams(id, params)
   }
 
   getMainIndicatorParams(indicatorId: string): Record<string, number | boolean | string> | null {
-    const params = this.deps.mainIndicators$.peek().get(indicatorId.toUpperCase())?.params
+    const params = this.deps.indicator.readonly.mainIndicators.peek().get(indicatorId.toUpperCase())?.params
     return params ? { ...params } : null
   }
 
   clearMainIndicators(): void {
-    this.deps.clearMainIndicators()
+    this.deps.indicator.actions.clear()
   }
 
   private reconcileMainIndicators(desired: ReadonlyMap<string, MainIndicatorEntry>): boolean {
@@ -397,7 +397,7 @@ export class ChartIndicatorManager {
   }
 
   private updateIndicatorSchedulerConfig(indicatorId: string): void {
-    const entry = this.deps.mainIndicators$.peek().get(indicatorId)
+    const entry = this.deps.indicator.readonly.mainIndicators.peek().get(indicatorId)
     const isActive = entry !== undefined
     const params = entry?.params ?? {}
 
@@ -419,7 +419,7 @@ export class ChartIndicatorManager {
     const newIds = indicators
       .map((i) => i.toUpperCase())
       .filter((id) => ChartIndicatorManager.ENABLE_MAIN_INDICATORS.includes(id))
-    const prev = this.deps.mainIndicators$.peek()
+    const prev = this.deps.indicator.readonly.mainIndicators.peek()
 
     const next = new Map<string, MainIndicatorEntry>()
     for (const id of newIds) {
@@ -432,7 +432,7 @@ export class ChartIndicatorManager {
         })
       }
     }
-    this.deps.replaceMainIndicators(next)
+    this.deps.indicator.actions.replaceAll(next)
   }
 
   // ========== 副图管理 API ==========
@@ -446,7 +446,7 @@ export class ChartIndicatorManager {
     if (!definition) {
       throw new KLineChartError('NOT_REGISTERED', `[Chart] Unknown indicator: ${indicatorId}`)
     }
-    this.deps.createSubPaneState(
+    this.deps.subPaneOps.create(
       paneId,
       indicatorId,
       params ?? this.getDefaultSubPaneParams(indicatorId),
@@ -458,13 +458,13 @@ export class ChartIndicatorManager {
     indicatorId: SubIndicatorType,
     params?: Record<string, number | boolean | string>,
   ): boolean {
-    const existing = this.deps.subPanes$.peek().find((entry) => entry.paneId === paneId)
+    const existing = this.deps.subPaneOps.entries.peek().find((entry) => entry.paneId === paneId)
     if (existing) {
       if (
         existing.indicatorId === indicatorId &&
         !this.subPaneManager.getMountedResources(paneId)
       ) {
-        this.deps.replaceSubPaneState(
+        this.deps.subPaneOps.replace(
           paneId,
           existing.indicatorId,
           existing.params,
@@ -475,7 +475,7 @@ export class ChartIndicatorManager {
     if (!this.indicatorScheduler.getIndicatorMetadata(indicatorId)) {
       throw new KLineChartError('NOT_REGISTERED', `[Chart] Unknown indicator: ${indicatorId}`)
     }
-    this.deps.createSubPaneState(
+    this.deps.subPaneOps.create(
       paneId,
       indicatorId,
       params ?? this.getDefaultSubPaneParams(indicatorId),
@@ -484,7 +484,7 @@ export class ChartIndicatorManager {
   }
 
   removeSubPane(paneId: string): void {
-    this.deps.removeSubPaneState(paneId)
+    this.deps.subPaneOps.remove(paneId)
   }
 
   replaceSubPaneIndicator(
@@ -495,7 +495,7 @@ export class ChartIndicatorManager {
     if (!this.indicatorScheduler.getIndicatorMetadata(newIndicatorId)) {
       throw new KLineChartError('NOT_REGISTERED', `[Chart] Unknown indicator: ${newIndicatorId}`)
     }
-    this.deps.replaceSubPaneState(
+    this.deps.subPaneOps.replace(
       paneId,
       newIndicatorId,
       params ?? this.getDefaultSubPaneParams(newIndicatorId),
@@ -503,22 +503,22 @@ export class ChartIndicatorManager {
   }
 
   updateSubPaneParams(paneId: string, params: Record<string, unknown>): void {
-    this.deps.updateSubPaneStateParams(paneId, params)
+    this.deps.subPaneOps.setParams(paneId, params)
   }
 
   clearSubPanes(): void {
-    this.deps.clearSubPaneState()
+    this.deps.subPaneOps.clear()
   }
 
   /**
    * @deprecated 使用 getSubPaneEntries 获取完整信息
    */
   getSubPaneIndicators(): SubIndicatorType[] {
-    return this.deps.subPanes$.peek().map((entry) => entry.indicatorId)
+    return this.deps.subPaneOps.entries.peek().map((entry) => entry.indicatorId)
   }
 
   getSubPaneEntries(): SubPaneEntry[] {
-    return this.deps.subPanes$.peek().map((entry) => ({
+    return this.deps.subPaneOps.entries.peek().map((entry) => ({
       ...entry,
       params: { ...entry.params },
       ...this.subPaneManager.getMountedResources(entry.paneId),
@@ -526,7 +526,7 @@ export class ChartIndicatorManager {
   }
 
   getSubPaneEntry(paneId: string): SubPaneEntry | undefined {
-    const entry = this.deps.subPanes$.peek().find((candidate) => candidate.paneId === paneId)
+    const entry = this.deps.subPaneOps.entries.peek().find((candidate) => candidate.paneId === paneId)
     if (!entry) return undefined
     return {
       ...entry,
@@ -569,7 +569,7 @@ export class ChartIndicatorManager {
   removeIndicator(instanceId: string): boolean {
     const id = instanceId.toUpperCase()
 
-    if (this.deps.mainIndicators$.peek().has(id)) {
+    if (this.deps.indicator.readonly.mainIndicators.peek().has(id)) {
       return this.disableMainIndicator(instanceId)
     }
 
@@ -585,7 +585,7 @@ export class ChartIndicatorManager {
   updateIndicatorParams(instanceId: string, params: Record<string, unknown>): boolean {
     const id = instanceId.toUpperCase()
 
-    if (this.deps.mainIndicators$.peek().has(id)) {
+    if (this.deps.indicator.readonly.mainIndicators.peek().has(id)) {
       this.updateMainIndicatorParams(
         instanceId,
         params as Record<string, number | boolean | string>,

package/src/engine/layout/chartPaneLayout.ts

@@ -2,6 +2,8 @@ import type { PaneRole } from '../../foundation/plugin/index'
 import type { ChartDom, PaneSpec, Viewport } from '../chartTypes'
 import { PaneRenderer } from '../paneRenderer'
 import type { ScaleType } from '../utils/tickPosition'
+import type { PaneStateModule } from '../state/paneState'
+import type { ViewportStateModule } from '../state/viewportState'
 
 import { Pane, UpdateLevel } from './pane'
 import { normalizeVisiblePaneRatios as pureNormalizeVisiblePaneRatios } from './paneRatioMath'
@@ -16,14 +18,15 @@ export interface PaneLayoutDependencies {
     paneGap?: number
     defaultPaneMinHeightPx?: number
   }
-  getViewport: () => Viewport | null
+  /** scroll / plot 几何 SSOT */
+  viewport: ViewportStateModule
   setKnownPaneIds: (ids: string[]) => void
   notifyPaneResize: (paneId: string, pane: Pane) => void
   scheduleDraw: (level?: UpdateLevel) => void
-  getPaneRatios: () => Record<string, number>
-  /** kernel.paneScaleTypes 投影源；initPanes 优先于此 */
-  getPaneScaleTypes: () => ReadonlyMap<string, ScaleType>
-  commitLayout: (ratios: Record<string, number>, specs: PaneSpec[]) => void
+  /** pane ratios / specs / scaleTypes SSOT */
+  pane: PaneStateModule
+  /** commitLayout 写入 kernel 后的副作用（如 ensurePaneScaleTypes） */
+  afterCommitLayout?: () => void
 }
 
 /**
@@ -63,7 +66,7 @@ export class ChartPaneLayout {
    * 公共读：specs 结构来自工作副本定义，ratio 字段取自 kernel（不写工作副本）。
    */
   getPaneSpecs(): PaneSpec[] {
-    const kernelRatios = this.deps.getPaneRatios()
+    const kernelRatios = this.deps.pane.readonly.paneRatios.peek()
     return this._paneSpecs.map((spec) => ({
       ...spec,
       ratio: kernelRatios[spec.id] ?? spec.ratio,
@@ -75,11 +78,11 @@ export class ChartPaneLayout {
    * 公共读：直接返回 kernel paneRatios 副本，不触碰算法工作副本。
    */
   getInternalPaneRatios(): Map<string, number> {
-    return new Map(Object.entries(this.deps.getPaneRatios()))
+    return new Map(Object.entries(this.deps.pane.readonly.paneRatios.peek()))
   }
 
   private syncRatiosFromKernel(): void {
-    const kernelRatios = this.deps.getPaneRatios()
+    const kernelRatios = this.deps.pane.readonly.paneRatios.peek()
     this._internalPaneRatios = new Map(Object.entries(kernelRatios))
   }
 
@@ -100,17 +103,36 @@ export class ChartPaneLayout {
     return index === 0 ? 'price' : 'indicator'
   }
 
-  private createAxisCanvas(spec: PaneSpec, pane: Pane, side: 'left' | 'right'): HTMLCanvasElement {
+  private createAxisCanvas(
+    spec: PaneSpec,
+    side: 'left' | 'right',
+    kind: 'base' | 'overlay' = 'base',
+  ): HTMLCanvasElement {
     const canvas = document.createElement('canvas')
-    canvas.id = `${spec.id}-${side}Axis`
-    canvas.className = side === 'right' ? 'right-axis' : 'left-axis'
+    const isRight = side === 'right'
+    const isOverlay = kind === 'overlay'
+    canvas.id = `${spec.id}-${side}Axis${isOverlay ? 'Overlay' : ''}`
+    canvas.className = isRight
+      ? isOverlay
+        ? 'right-axis-overlay'
+        : 'right-axis'
+      : isOverlay
+        ? 'left-axis-overlay'
+        : 'left-axis'
     canvas.style.position = 'absolute'
     canvas.style.left = '0'
+    if (isOverlay) {
+      canvas.style.pointerEvents = 'none'
+      canvas.style.backgroundColor = 'transparent'
+      canvas.style.zIndex = '1'
+    } else {
+      canvas.style.zIndex = '0'
+    }
     return canvas
   }
 
   private initPanes() {
-    const kernelScaleTypes = this.deps.getPaneScaleTypes()
+    const kernelScaleTypes = this.deps.pane.readonly.paneScaleTypes.peek()
     const prevScaleTypes = new Map<string, ScaleType>()
     for (const r of this.paneRenderers) {
       prevScaleTypes.set(r.getPane().id, r.getPane().yAxis.getScaleType())
@@ -129,7 +151,8 @@ export class ChartPaneLayout {
 
       const mainCanvas = document.createElement('canvas')
       const overlayCanvas = document.createElement('canvas')
-      const yAxisCanvas = this.createAxisCanvas(spec, pane, 'right')
+      const yAxisCanvas = this.createAxisCanvas(spec, 'right', 'base')
+      const yAxisOverlayCanvas = this.createAxisCanvas(spec, 'right', 'overlay')
 
       const isMain = pane.role === 'price'
 
@@ -149,10 +172,18 @@ export class ChartPaneLayout {
       overlayCanvas.style.backgroundColor = 'transparent'
       overlayCanvas.style.zIndex = '2'
 
-      const leftYAxisCanvas = this.createAxisCanvas(spec, pane, 'left')
+      const leftYAxisCanvas = this.createAxisCanvas(spec, 'left', 'base')
+      const leftYAxisOverlayCanvas = this.createAxisCanvas(spec, 'left', 'overlay')
 
       const renderer = new PaneRenderer(
-        { mainCanvas, overlayCanvas, yAxisCanvas, leftYAxisCanvas },
+        {
+          mainCanvas,
+          overlayCanvas,
+          yAxisCanvas,
+          yAxisOverlayCanvas,
+          leftYAxisCanvas,
+          leftYAxisOverlayCanvas,
+        },
         pane,
         {
           rightAxisWidth: this.deps.getOption().rightAxisWidth,
@@ -177,11 +208,15 @@ export class ChartPaneLayout {
       existingCanvases.forEach((canvas) => canvas.remove())
     }
     if (rightAxisLayer) {
-      const existingAxisCanvases = rightAxisLayer.querySelectorAll('canvas.right-axis')
+      const existingAxisCanvases = rightAxisLayer.querySelectorAll(
+        'canvas.right-axis, canvas.right-axis-overlay',
+      )
       existingAxisCanvases.forEach((canvas) => canvas.remove())
     }
     if (leftAxisLayer) {
-      const existingLeftAxisCanvases = leftAxisLayer.querySelectorAll('canvas.left-axis')
+      const existingLeftAxisCanvases = leftAxisLayer.querySelectorAll(
+        'canvas.left-axis, canvas.left-axis-overlay',
+      )
       existingLeftAxisCanvases.forEach((canvas) => canvas.remove())
     }
 
@@ -190,8 +225,12 @@ export class ChartPaneLayout {
       canvasLayer.appendChild(domEls.mainCanvas)
       canvasLayer.appendChild(domEls.overlayCanvas)
       rightAxisLayer.appendChild(domEls.yAxisCanvas)
+      rightAxisLayer.appendChild(domEls.yAxisOverlayCanvas)
       if (leftAxisLayer && domEls.leftYAxisCanvas) {
         leftAxisLayer.appendChild(domEls.leftYAxisCanvas)
+        if (domEls.leftYAxisOverlayCanvas) {
+          leftAxisLayer.appendChild(domEls.leftYAxisOverlayCanvas)
+        }
       }
     })
 
@@ -299,10 +338,16 @@ export class ChartPaneLayout {
     return heights
   }
 
+  /** viewWidth 为 0 表示尚未完成首帧尺寸 */
+  private peekViewport(): Viewport | null {
+    if (this.deps.viewport.readonly.viewWidth.peek() === 0) return null
+    return this.deps.viewport.readonly.viewport.peek()
+  }
+
   layoutPanes(options?: { commit?: boolean }) {
     this.syncRatiosFromKernel()
 
-    const vp = this.deps.getViewport()
+    const vp = this.peekViewport()
     if (!vp) return
 
     const visibleSpecs = this._paneSpecs.filter((p) => p.visible !== false)
@@ -338,10 +383,16 @@ export class ChartPaneLayout {
       domEls.overlayCanvas.style.top = `${y}px`
       domEls.yAxisCanvas.style.top = `${y}px`
       domEls.yAxisCanvas.style.left = '0px'
+      domEls.yAxisOverlayCanvas.style.top = `${y}px`
+      domEls.yAxisOverlayCanvas.style.left = '0px'
       if (domEls.leftYAxisCanvas) {
         domEls.leftYAxisCanvas.style.top = `${y}px`
         domEls.leftYAxisCanvas.style.left = '0px'
       }
+      if (domEls.leftYAxisOverlayCanvas) {
+        domEls.leftYAxisOverlayCanvas.style.top = `${y}px`
+        domEls.leftYAxisOverlayCanvas.style.left = '0px'
+      }
 
       y += h + gap
     }
@@ -388,7 +439,7 @@ export class ChartPaneLayout {
    * commitLayout 走 buildLayoutSpecsFromWorkingCopy，避免公共读污染算法中间态。
    */
   getPaneLayoutSpecs(): PaneSpec[] {
-    return this.buildLayoutSpecs(this.deps.getPaneRatios())
+    return this.buildLayoutSpecs(this.deps.pane.readonly.paneRatios.peek())
   }
 
   /** 仅算法/commit 使用：读当前工作副本 ratios，不读 kernel */
@@ -422,7 +473,8 @@ export class ChartPaneLayout {
     this._internalPaneRatios.forEach((ratio, id) => {
       ratios[id] = ratio
     })
-    this.deps.commitLayout(ratios, this.buildLayoutSpecsFromWorkingCopy())
+    this.deps.pane.actions.commitLayout(ratios, this.buildLayoutSpecsFromWorkingCopy())
+    this.deps.afterCommitLayout?.()
   }
 
   applyPaneLayoutSpecs(panes: PaneSpec[], options?: { preferIncomingRatios?: boolean }): void {
@@ -499,7 +551,7 @@ export class ChartPaneLayout {
 
   resizePaneBoundary(upperPaneId: string, deltaY: number): boolean {
     if (!Number.isFinite(deltaY) || deltaY === 0) return false
-    const vp = this.deps.getViewport()
+    const vp = this.peekViewport()
     if (!vp) return false
 
     this.syncRatiosFromKernel()

package/src/engine/paneRenderer.ts

@@ -6,7 +6,9 @@ export type PaneRendererContexts = {
   mainCtx: CanvasRenderingContext2D | null
   overlayCtx: CanvasRenderingContext2D | null
   yAxisCtx: CanvasRenderingContext2D | null
+  yAxisOverlayCtx: CanvasRenderingContext2D | null
   leftAxisCtx: CanvasRenderingContext2D | null
+  leftAxisOverlayCtx: CanvasRenderingContext2D | null
 }
 
 export type PaneRendererOptions = {
@@ -17,7 +19,7 @@ export type PaneRendererOptions = {
 }
 
 /* PaneRenderer：负责单个 Pane 的 Canvas 管理与运行时状态持有
-   创建并管理 mainCanvas / overlayCanvas / yAxisCanvas
+   创建并管理 main/overlay/yAxis/yAxisOverlay（及可选 left 轴）canvas
    持有 Pane 实例（布局、Y 轴、价格范围）
    响应 Chart 的 resize / layout 信号
    GPU 绘制经 ChartRenderer.sceneRenderer（SharedWebGLSurface），本类不再持有 per-pane surface */
@@ -52,7 +54,9 @@ export class PaneRenderer {
         mainCtx: this.dom.mainCanvas.getContext('2d'),
         overlayCtx: this.dom.overlayCanvas.getContext('2d'),
         yAxisCtx: this.dom.yAxisCanvas.getContext('2d'),
+        yAxisOverlayCtx: this.dom.yAxisOverlayCanvas.getContext('2d'),
         leftAxisCtx: this.dom.leftYAxisCanvas?.getContext('2d') ?? null,
+        leftAxisOverlayCtx: this.dom.leftYAxisOverlayCanvas?.getContext('2d') ?? null,
       }
     }
     return this.contexts
@@ -90,6 +94,7 @@ export class PaneRenderer {
     const mainCanvas = this.dom.mainCanvas
     const overlayCanvas = this.dom.overlayCanvas
     const yAxisCanvas = this.dom.yAxisCanvas
+    const yAxisOverlayCanvas = this.dom.yAxisOverlayCanvas
 
     // 先读取 parentClientWidth，避免在写入样式后读取触发强制回流
     const fallbackYAxisWidth = this.opt.rightAxisWidth + (this.opt.priceLabelWidth || 60)
@@ -104,22 +109,24 @@ export class PaneRenderer {
     // Overlay Canvas - 与 Main Canvas 相同尺寸
     PaneRenderer.resizeCanvas(overlayCanvas, mainWidth, mainHeight, dpr)
 
-    // YAxis Canvas
+    // YAxis Canvas + overlay 轴（同尺寸）
     const yAxisWidth = Math.round(canvasYAxisWidth * dpr)
-    PaneRenderer.resizeCanvas(yAxisCanvas, yAxisWidth, Math.round(height * dpr), dpr)
+    const yAxisHeight = Math.round(height * dpr)
+    PaneRenderer.resizeCanvas(yAxisCanvas, yAxisWidth, yAxisHeight, dpr)
+    PaneRenderer.resizeCanvas(yAxisOverlayCanvas, yAxisWidth, yAxisHeight, dpr)
 
-    // Left YAxis Canvas
+    // Left YAxis Canvas + overlay
     const leftCanvas = this.dom.leftYAxisCanvas
+    const leftOverlayCanvas = this.dom.leftYAxisOverlayCanvas
     if (leftCanvas) {
       const fallbackLeftAxisWidth = this.opt.leftAxisWidth
       const leftParentWidth = leftCanvas.parentElement?.clientWidth ?? 0
       const canvasLeftAxisWidth = leftParentWidth > 0 ? leftParentWidth : fallbackLeftAxisWidth
-      PaneRenderer.resizeCanvas(
-        leftCanvas,
-        Math.round(Math.max(canvasLeftAxisWidth, 0) * dpr),
-        Math.round(height * dpr),
-        dpr,
-      )
+      const leftW = Math.round(Math.max(canvasLeftAxisWidth, 0) * dpr)
+      PaneRenderer.resizeCanvas(leftCanvas, leftW, yAxisHeight, dpr)
+      if (leftOverlayCanvas) {
+        PaneRenderer.resizeCanvas(leftOverlayCanvas, leftW, yAxisHeight, dpr)
+      }
     }
   }