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

package/src/engine/render/chartRenderer.ts

@@ -30,18 +30,13 @@ import { createDrawingRendererPlugin, createDrawingLabelOverlayPlugin } from '..
 import { ChartIndicatorManager } from '../indicators/chartIndicatorManager'
 import { UpdateLevel } from '../layout/pane'
 import type { VisibleRange } from '../layout/pane'
-import {
-  MarkerManager,
-  type CustomMarkerEntity,
-  type MarkerManagerDeps,
-} from '../marker/registry'
+import { MarkerManager, type CustomMarkerEntity, type MarkerManagerDeps } from '../marker/registry'
 import type { ChartModeHandler } from '../modes/types'
 import { PaneRenderer } from '../paneRenderer'
 import { createTimeAxisRendererPlugin } from '../renderers/timeAxis'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
 import { calculateTickCount } from '../utils/tickCount'
-import { ChartViewportManager } from '../viewport/chartViewportManager'
-import { getVisibleRange } from '../viewport/viewport'
+
 
 import { createCandleLayer } from './layers/candleLayer'
 import { createComparisonLineLayer } from './layers/comparisonLineLayer'
@@ -51,11 +46,21 @@ import { createExtremaMarkersLayer } from './layers/extremaMarkersLayer'
 import { createGridLinesLayer } from './layers/gridLinesLayer'
 import { createLastPriceLabelLayer } from './layers/lastPriceLabelLayer'
 import { createLastPriceLineLayer } from './layers/lastPriceLineLayer'
-import { createLeftYAxisLayer } from './layers/leftYAxisLayer'
+import {
+  createLeftYAxisOverlayLayer,
+  createLeftYAxisStaticLayer,
+} from './layers/leftYAxisLayer'
 import { createMainIndicatorLegendLayer } from './layers/mainIndicatorLegendLayer'
-import { createYAxisLayer } from './layers/yAxisLayer'
-import { createFrameTransaction } from '../../foundation/reactivity/frameTransaction'
+import { createYAxisOverlayLayer, createYAxisStaticLayer } from './layers/yAxisLayer'
+import type { LayerRole } from '../../rendering/scene/types'
+import {
+  createFrameTransaction,
+  type FrameTransaction,
+} from '../../foundation/reactivity/frameTransaction'
 import type { ReadonlySignal } from '../../foundation/reactivity/signal'
+import type { ViewportStateModule } from '../state/viewportState'
+import type { ZoomStateModule } from '../state/zoomState'
+import type { OptionsStateModule } from '../state/optionsState'
 
 type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'> & {
   kWidth: number
@@ -89,15 +94,12 @@ type FrameContext = {
   zoomLevelCount: number
 }
 
-/** 帧事务输入：仅重绘级别；多次 schedule 浅合并后由 mergeUpdateLevel 升格 */
+/** 帧事务输入：合并多次 scheduleDraw 的 level */
 type FrameDrawInput = {
   level: UpdateLevel
 }
 
-/**
- * 帧事务快照：单代际绘制契约。
- * generation 由 FrameTransaction 写入；frame 为 null 表示无可画数据。
- */
+/** 单帧快照，frame 为 null 表示无可画数据 */
 type FrameDrawSnapshot = {
   generation: number
   level: UpdateLevel
@@ -105,7 +107,7 @@ type FrameDrawSnapshot = {
 }
 
 /** Main 与 Overlay 合并为 All，其余取更全或后者 */
-function mergeUpdateLevel(current: UpdateLevel, next: UpdateLevel): UpdateLevel {
+export function mergeUpdateLevel(current: UpdateLevel, next: UpdateLevel): UpdateLevel {
   if (current === UpdateLevel.All || next === UpdateLevel.All) return UpdateLevel.All
   if (current === next) return current
   if (
@@ -125,10 +127,14 @@ export interface RendererDependencies {
   getSceneRenderer: () => Renderer
   getPluginHost: () => PluginHostImpl
   getRendererPluginManager: () => RendererPluginManager
-  getTheme: () => 'light' | 'dark'
-  getCurrentZoomLevel: () => number
-  getZoomLevelCount: () => number
-  getViewportManager: () => ChartViewportManager
+  /** 生效主题 SSOT */
+  theme$: ReadonlySignal<'light' | 'dark'>
+  /** zoomLevel / kWidth SSOT */
+  zoom: ZoomStateModule
+  /** zoomLevelCount 等 options SSOT */
+  options: OptionsStateModule
+  /** scroll / dpr / plot 几何 SSOT */
+  viewport: ViewportStateModule
   getDataManager: () => ChartDataManager
   getIndicatorManager: () => ChartIndicatorManager
   getActiveMode: () => ChartModeHandler
@@ -137,6 +143,10 @@ export interface RendererDependencies {
   drawings$: DrawingStoreDeps['drawings$']
   selectedDrawingId$: DrawingStoreDeps['selectedDrawingId$']
   getOverlay?: DrawingStoreDeps['getOverlay']
+  /** 主图图例上下文发布（canvas / external 均触发；draw 内回调） */
+  onLegendContext?: (
+    ctx: import('../renderers/Indicator/mainIndicatorLegendContext').LegendTemplateContext | null,
+  ) => void
 }
 
 export class ChartRenderer {
@@ -147,14 +157,9 @@ export class ChartRenderer {
    * 帧事务：scheduleDraw 只写输入并合并 rAF；flush 内 prepare → seal → paint。
    * 绘制阶段不再反向写 kernel 几何（seal 在 render 回调最前、与 paint 同代）。
    */
-  private readonly frameTx: ReturnType<
-    typeof createFrameTransaction<FrameDrawInput, FrameDrawSnapshot>
-  >
+  private readonly frameTx: FrameTransaction<FrameDrawInput, FrameDrawSnapshot>
 
-  /**
-   * 与 frameTx pending 同步的重绘级别镜像。
-   * FrameTransaction 对 level 是浅覆盖，Main/Overlay 升格在此完成。
-   */
+  /** 合并多次 scheduleDraw 的 level，合并后写入 frameTx */
   private pendingLevel: UpdateLevel = UpdateLevel.All
 
   /** 已排队的 rAF 句柄；null 表示当前没有挂起的帧调度 */
@@ -207,11 +212,13 @@ export class ChartRenderer {
       render: (snapshot) => {
         // generation 0 占位不绘制
         if (snapshot.generation === 0) return
-        // seal 几何 → flush hover（同代）→ paint；禁止 paint 中途再写 kernel 几何
+        // 把本帧 K 线信息(kLinePositions,range,kWidthPx,kLineCenters)写入 InteractionController，保证 hover 命中与本帧一致
         if (snapshot.frame) {
           this.sealFrameGeometry(snapshot.frame)
         }
+        // 用本帧几何将鼠标坐标吸附到最近 K 线，算出十字线位置
         this.deps.getInteraction().flushPendingHover()
+        // 绘制：清 canvas → 构建 RenderContext → 遍历 pane 调 scene.paintPane → endFrame（GPU 一次性 submit 所有 pane）→ 时间轴
         this.drawWithFrame(snapshot.level, snapshot.frame)
       },
       schedule: (run) => {
@@ -280,11 +287,15 @@ export class ChartRenderer {
       this.scene.addLayer(layer)
     }
     {
-      const layer = createMainIndicatorLegendLayer(
-        { yPaddingPx: opt.yPaddingPx },
+      const { layer, plugin } = createMainIndicatorLegendLayer(
+        {
+          yPaddingPx: opt.yPaddingPx,
+          onContext: this.deps.onLegendContext,
+        },
         getCtx('main'),
-        this.deps.getPluginHost(),
       )
+      // 注册进 Manager，使 updateRendererConfig('mainIndicatorLegend') 可切换 renderMode
+      this.deps.getRendererPluginManager().register(plugin)
       this.scene.addLayer(layer)
     }
     {
@@ -302,42 +313,38 @@ export class ChartRenderer {
       this.scene.addLayer(layer)
     }
     {
-      const layer = createYAxisLayer(
-        {
-          axisWidth,
-          yPaddingPx: opt.yPaddingPx,
-          getCrosshair: () => {
-            const pos = interaction.crosshairPos
-            const price = interaction.crosshairPrice
-            const activePaneId = interaction.activePaneId
-            if (pos && price !== null) {
-              return { y: pos.y, price, activePaneId }
-            }
-            return null
-          },
+      const yAxisOpts = {
+        axisWidth,
+        yPaddingPx: opt.yPaddingPx,
+        getCrosshair: () => {
+          const pos = interaction.crosshairPos
+          const price = interaction.crosshairPrice
+          const activePaneId = interaction.activePaneId
+          if (pos && price !== null) {
+            return { y: pos.y, price, activePaneId }
+          }
+          return null
         },
-        getCtxForCurrentPane,
-      )
-      this.scene.addLayer(layer)
+      }
+      this.scene.addLayer(createYAxisStaticLayer(yAxisOpts, getCtxForCurrentPane))
+      this.scene.addLayer(createYAxisOverlayLayer(yAxisOpts, getCtxForCurrentPane))
     }
     {
-      const layer = createLeftYAxisLayer(
-        {
-          axisWidth: opt.leftAxisWidth,
-          yPaddingPx: opt.yPaddingPx,
-          getCrosshair: () => {
-            const pos = interaction.crosshairPos
-            const price = interaction.crosshairPrice
-            const activePaneId = interaction.activePaneId
-            if (pos && price !== null) {
-              return { y: pos.y, price, activePaneId }
-            }
-            return null
-          },
+      const leftYAxisOpts = {
+        axisWidth: opt.leftAxisWidth,
+        yPaddingPx: opt.yPaddingPx,
+        getCrosshair: () => {
+          const pos = interaction.crosshairPos
+          const price = interaction.crosshairPrice
+          const activePaneId = interaction.activePaneId
+          if (pos && price !== null) {
+            return { y: pos.y, price, activePaneId }
+          }
+          return null
         },
-        getCtxForCurrentPane,
-      )
-      this.scene.addLayer(layer)
+      }
+      this.scene.addLayer(createLeftYAxisStaticLayer(leftYAxisOpts, getCtxForCurrentPane))
+      this.scene.addLayer(createLeftYAxisOverlayLayer(leftYAxisOpts, getCtxForCurrentPane))
     }
   }
 
@@ -395,6 +402,7 @@ export class ChartRenderer {
    * @param level - Main 只画主层，Overlay 只画覆盖层（crosshair 等），All 全画
    */
   scheduleDraw(level: UpdateLevel = UpdateLevel.All): void {
+    // 已经有待执行的下一帧，只合并 level，不重复 scheduleFlush
     if (this.raf !== null) {
       this.pendingLevel = mergeUpdateLevel(this.pendingLevel, level)
       this.frameTx.writeInput({ level: this.pendingLevel })
@@ -402,16 +410,16 @@ export class ChartRenderer {
     }
     this.pendingLevel = level
     this.frameTx.writeInput({ level })
+    // 提交帧，下次 rAF 上屏
     this.frameTx.scheduleFlush()
   }
 
   /**
-   * 同步绘制一帧，走与 rAF 相同的 flush 管线（prepare → seal → paint）。
-   *
-   * 若已有 rAF 挂起：与 pendingLevel 合并后同步 flush（消费合并后的 level）。
-   * 若正处于帧事务非 idle（render/publish 重入）：只写输入并调度下一帧，禁止嵌套 flush。
+   * 立即同步重绘一帧，不走 rAF。
    *
-   * @param level - 同 scheduleDraw
+   * 若已有 rAF 挂起：合并本次 level 后同步 flush，把挂起的也带走。
+   * 若正处于帧事务非 idle（paint 重入中）：只写输入，调度下一帧，不嵌套 flush。
+   * 与 scheduleDraw 的唯一区别：同步还是异步。
    */
   draw(level: UpdateLevel = UpdateLevel.All): void {
     if (this.frameTx.phase !== 'idle') {
@@ -428,10 +436,6 @@ export class ChartRenderer {
     }
     this.frameTx.writeInput({ level: this.pendingLevel })
     this.frameTx.flush()
-    // 同步 flush 已消费本帧；若 flush 中又 scheduleDraw，raf 非 null，保留 pendingLevel
-    if (this.raf === null) {
-      this.pendingLevel = UpdateLevel.All
-    }
   }
 
   /**
@@ -444,9 +448,11 @@ export class ChartRenderer {
       .setKLinePositions(frame.kLinePositions, frame.range, frame.kWidthPx, frame.kLineCenters)
   }
 
+  /** 将 prepareFrameData 的帧几何按 level 画到 canvas，含所有 pane 的 main/overlay/yAxis 及时间轴 */
   private drawWithFrame(level: UpdateLevel, frame: FrameContext | null): void {
     this.markerManager.clear()
 
+    // frame 为空（无数据或首帧），清理画布后跳过绘制
     if (!frame) {
       const dataManager = this.deps.getDataManager()
       if (dataManager.getInternalData().length === 0 && dataManager.getTimeShareData().length === 0)
@@ -459,7 +465,9 @@ export class ChartRenderer {
     const dataManager = this.deps.getDataManager()
     const mode = this.deps.getActiveMode()
     if (mode.useIndicatorScheduler) {
+      // 获取指标管理器实例（持有 scheduler、状态、reconcile 逻辑）
       const indicatorManager = this.deps.getIndicatorManager()
+      // 将主图指标列表（含参数）同步给 scheduler，使其在本帧预计算价格区间
       indicatorManager.indicatorSchedulerAccessor.setActiveMainIndicators(
         [...indicatorManager.mainIndicatorsSignalPeek.entries()].map(([id, entry]) => ({
           id,
@@ -474,13 +482,13 @@ export class ChartRenderer {
 
     const renderData = frame.data
 
+    // 遍历所有 pane，清 canvas → 构建 RenderContext → scene.paintPane
     const { sharedXAxisLabels, sharedXAxisRanges } = this.renderPanes(
       vp,
       range,
       kLinePositions,
       kLineCenters,
       kBarRects,
-      kWidthPx,
       mainIndicatorRange,
       hasCrosshair,
       useCachedFrame,
@@ -489,6 +497,7 @@ export class ChartRenderer {
     )
 
     this.overlayHadCrosshair = hasCrosshair
+    // 画底部时间轴（独立 layer，不进 scene）
     this.renderXAxis(
       vp,
       range,
@@ -503,42 +512,35 @@ export class ChartRenderer {
   }
 
   /**
-   * 准备一帧的绘制数据：viewport、可见区间、K 线位置。
+   * 计算一帧的 viewport、可见区间、K 线位置。
    *
-   * Overlay 且上次画完没清缓存时，直接复用 cachedDrawFrame，不重复
-   * 算 viewport 和 bar 位置。非缓存路径会刷新 cachedDrawFrame。
-   * range 变了会调用 checkVisibleRangeGapWhenIdle，方便空闲时补数据。
-   * TimeShare 模式按 plotWidth 平分 bar，不走 K 线物理宽度那套。
-   *
-   * @param level - Overlay 可走缓存，Main/All 强制重算
-   * @returns 无 viewport 或无数据时返回 null，调用方自己清屏或跳过
+   * Overlay 时复用 cachedDrawFrame 跳过重算，Main/All 强制刷新缓存。
+   * range 变化时调 checkVisibleRangeGapWhenIdle 触发空闲补数据。
+   * TimeShare 模式按 plotWidth 平分 bar，覆盖 K 线位置。
    */
+  /** viewWidth 为 0 表示尚未完成首帧尺寸 */
+  private peekViewport(): Viewport | null {
+    if (this.deps.viewport.readonly.viewWidth.peek() === 0) return null
+    return this.deps.viewport.readonly.viewport.peek()
+  }
+
   private prepareFrameData(level: UpdateLevel): FrameContext | null {
     const useCachedFrame = level === UpdateLevel.Overlay && this.cachedDrawFrame !== null
 
-    const vp = useCachedFrame
-      ? this.cachedDrawFrame!.viewport
-      : this.deps.getViewportManager().computeViewport()
+    const vp = useCachedFrame ? this.cachedDrawFrame!.viewport : this.peekViewport()
     if (!vp) return null
 
     const internalData = this.deps.getDataManager().getRenderData() as KLineData[]
     if (internalData.length === 0) return null
 
     const opt = this.deps.getOption()
-    const rawRange = useCachedFrame
+    // 可见区间 SSOT 在 viewportState：clamped 可索引；raw 含扩窗（start 可能为 -1）
+    const range = useCachedFrame
       ? this.cachedDrawFrame!.range
-      : (() => {
-          const { start, end } = getVisibleRange(
-            vp.scrollLeft,
-            vp.plotWidth,
-            opt.kWidth,
-            opt.kGap,
-            internalData.length,
-            vp.dpr,
-          )
-          return { start, end }
-        })()
-    const range = { start: Math.max(0, rawRange.start), end: rawRange.end }
+      : this.deps.viewport.readonly.visibleRange.peek()
+    const rawRange = useCachedFrame
+      ? (this._prevFrameRange?.raw ?? range)
+      : this.deps.viewport.readonly.rawVisibleRange.peek()
 
     const dataManager = this.deps.getDataManager()
     const mode = this.deps.getActiveMode()
@@ -568,6 +570,7 @@ export class ChartRenderer {
       kWidthPx = this.cachedDrawFrame!.kWidthPx
     } else {
       const physConfig = getPhysicalKLineConfig(opt.kWidth, opt.kGap, vp.dpr)
+      // bar 宽度取奇数，保证 center 对齐整数像素
       let barWidthPx = Math.max(1, physConfig.unitPx - 1)
       if (barWidthPx % 2 === 0) barWidthPx -= 1
 
@@ -577,6 +580,7 @@ export class ChartRenderer {
       for (let i = 0; i < kLinePositions.length; i++) {
         const x = kLinePositions[i]!
         const leftPx = Math.round(x * vp.dpr)
+        // 影线 center = left + 半根物理宽度
         const wickXPx = leftPx + (physConfig.kWidthPx - 1) / 2
         kLineCenters[i] = wickXPx / vp.dpr
 
@@ -584,6 +588,7 @@ export class ChartRenderer {
         kBarRects[i] = { x: barLeftPx / vp.dpr, width: barWidthPx / vp.dpr }
       }
 
+      // TimeShare 按 plotWidth 平分 bar，覆盖 calcKLinePositions 的结果
       if (mode.debugName === 'TimeShare') {
         const totalWidth = vp.plotWidth
         const count = kLineCenters.length
@@ -600,7 +605,7 @@ export class ChartRenderer {
           const barWidthPx = Math.round(logicalBarWidth * dpr)
           const halfBarPx = Math.floor(barWidthPx / 2)
           for (let i = 0; i < count; i++) {
-            const centerPx = Math.round(kLineCenters[i] * dpr)
+            const centerPx = Math.round(kLineCenters[i]! * dpr)
             kBarRects[i] = {
               x: (centerPx - halfBarPx) / dpr,
               width: barWidthPx / dpr,
@@ -631,8 +636,8 @@ export class ChartRenderer {
       kWidthPx,
       useCachedFrame,
       data: internalData,
-      zoomLevel: this.deps.getCurrentZoomLevel(),
-      zoomLevelCount: this.deps.getZoomLevelCount(),
+      zoomLevel: this.deps.zoom.readonly.zoomLevel.peek(),
+      zoomLevelCount: this.deps.options.readonly.options.peek().zoomLevelCount,
     }
   }
 
@@ -648,20 +653,28 @@ export class ChartRenderer {
   }
 
   clearAllCanvases(): void {
-    const vp = this.deps.getViewportManager().computeViewport()
+    const vp = this.peekViewport()
     if (!vp) return
     for (const r of this.deps.getPaneRenderers()) {
-      const { mainCtx, overlayCtx, yAxisCtx, leftAxisCtx } = r.getContexts()
+      const { mainCtx, overlayCtx, yAxisCtx, yAxisOverlayCtx, leftAxisCtx, leftAxisOverlayCtx } =
+        r.getContexts()
       const pane = r.getPane()
       mainCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
       overlayCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
-      yAxisCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
+      yAxisCtx?.clearRect(0, 0, (yAxisCtx.canvas?.width ?? 0) / vp.dpr || vp.plotWidth + 1, pane.height + 2 / vp.dpr)
+      yAxisOverlayCtx?.clearRect(
+        0,
+        0,
+        (yAxisOverlayCtx.canvas?.width ?? 0) / vp.dpr || vp.plotWidth + 1,
+        pane.height + 2 / vp.dpr,
+      )
       if (leftAxisCtx) {
-        const leftCanvas = leftAxisCtx.canvas
-        if (leftCanvas) {
-          const laW = leftCanvas.width / vp.dpr
-          leftAxisCtx.clearRect(0, 0, laW, pane.height + 2 / vp.dpr)
-        }
+        const laW = (leftAxisCtx.canvas?.width ?? 0) / vp.dpr || vp.plotWidth + 1
+        leftAxisCtx.clearRect(0, 0, laW, pane.height + 2 / vp.dpr)
+      }
+      if (leftAxisOverlayCtx) {
+        const laW = (leftAxisOverlayCtx.canvas?.width ?? 0) / vp.dpr || vp.plotWidth + 1
+        leftAxisOverlayCtx.clearRect(0, 0, laW, pane.height + 2 / vp.dpr)
       }
     }
     const xCtx = this.xAxisCtx
@@ -683,19 +696,20 @@ export class ChartRenderer {
     }
   }
 
+  /** 遍历所有 pane，逐 pane 清 canvas → 构建 RenderContext → beginFrame → scene.paintPane，所有 pane 结束后 endFrame 统一提交 GPU / 时间轴 */
   private renderPanes(
     vp: Viewport,
     range: VisibleRange,
     kLinePositions: KLinePositions,
     kLineCenters: number[],
     kBarRects: Array<{ x: number; width: number }>,
-    kWidthPx: number,
     mainIndicatorRange: { min: number; max: number } | null,
     hasCrosshair: boolean,
     useCachedFrame: boolean,
     level: UpdateLevel,
     renderData: unknown[],
   ): { sharedXAxisLabels: XAxisLabel[]; sharedXAxisRanges: XAxisRange[] } {
+    // 跨 pane 共享的 Y/X 轴 labels 和 ranges（各 layer 写入，时间轴层读取）
     const sharedYAxisLabels: YAxisLabel[] = []
     const sharedXAxisLabels: XAxisLabel[] = []
     const sharedYAxisRanges: YAxisRange[] = []
@@ -704,10 +718,28 @@ export class ChartRenderer {
     const dataManager = this.deps.getDataManager()
     const mode = this.deps.getActiveMode()
 
+    // main canvas 只画非 overlay 角色；overlay canvas 只画 overlay 角色
+    const MAIN_CANVAS_ROLES: readonly LayerRole[] = [
+      'background',
+      'primary',
+      'indicator',
+      'component',
+      'drawing',
+    ]
+
+    // 遍历主图 pane 和所有子图 pane，每个 pane 有一组独立 canvas 以及对应更新级别（main/overlay/yAxis）
     for (const renderer of this.deps.getPaneRenderers()) {
       const pane = renderer.getPane()
-      const { mainCtx, overlayCtx, yAxisCtx, leftAxisCtx } = renderer.getContexts()
-
+      const {
+        mainCtx,
+        overlayCtx,
+        yAxisCtx,
+        yAxisOverlayCtx,
+        leftAxisCtx,
+        leftAxisOverlayCtx,
+      } = renderer.getContexts()
+
+      // 非缓存帧：合并指标与对比标的极值，更新 pane Y 轴范围
       if (!useCachedFrame) {
         const indicatorRange =
           pane.role === 'price' && mode.useIndicatorScheduler ? mainIndicatorRange : null
@@ -720,17 +752,21 @@ export class ChartRenderer {
         }
       }
 
+      // 根据 UpdateLevel 决定清哪些 canvas
       const shouldUpdateMain = level === UpdateLevel.Main || level === UpdateLevel.All
+      // Overlay 单独重绘：有十字线才画；overlayHadCrosshair 保证十字线消失时最后清一次
       const shouldUpdateOverlay =
         level === UpdateLevel.All ||
         (level === UpdateLevel.Overlay && (hasCrosshair || this.overlayHadCrosshair))
 
+      // 清 main canvas
       if (shouldUpdateMain && mainCtx) {
         mainCtx.setTransform(1, 0, 0, 1, 0, 0)
         mainCtx.scale(vp.dpr, vp.dpr)
         mainCtx.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
       }
 
+      // 清 overlay canvas
       if (shouldUpdateOverlay && overlayCtx) {
         const overlayWidth = overlayCtx.canvas.width / vp.dpr
         overlayCtx.setTransform(1, 0, 0, 1, 0, 0)
@@ -738,15 +774,26 @@ export class ChartRenderer {
         overlayCtx.clearRect(0, 0, overlayWidth + 1, pane.height + 2 / vp.dpr)
       }
 
-      if (yAxisCtx && !useCachedFrame) {
+      // 清 Y 轴静态 canvas（Main/All）
+      if (shouldUpdateMain && yAxisCtx) {
         const yAxisWidth = yAxisCtx.canvas.width / vp.dpr
         this.clearAxisCtx(yAxisCtx, vp.dpr, yAxisWidth, pane.height)
       }
-      if (leftAxisCtx && !useCachedFrame) {
+      if (shouldUpdateMain && leftAxisCtx) {
         const leftAxisWidth = leftAxisCtx.canvas.width / vp.dpr
         this.clearAxisCtx(leftAxisCtx, vp.dpr, leftAxisWidth, pane.height)
       }
+      // 清 Y 轴动态 canvas（Overlay/All）
+      if (shouldUpdateOverlay && yAxisOverlayCtx) {
+        const yAxisWidth = yAxisOverlayCtx.canvas.width / vp.dpr
+        this.clearAxisCtx(yAxisOverlayCtx, vp.dpr, yAxisWidth, pane.height)
+      }
+      if (shouldUpdateOverlay && leftAxisOverlayCtx) {
+        const leftAxisWidth = leftAxisOverlayCtx.canvas.width / vp.dpr
+        this.clearAxisCtx(leftAxisOverlayCtx, vp.dpr, leftAxisWidth, pane.height)
+      }
 
+      // 构造本 pane 的 RenderContext，供所有 layer 读取
       const opt = this.deps.getOption()
       const context: RenderContext = {
         ctx: mainCtx!,
@@ -769,9 +816,11 @@ export class ChartRenderer {
         markerManager: this.markerManager,
         crosshairIndex: this.deps.getInteraction().getCrosshairIndex(),
         yAxisCtx: yAxisCtx ?? undefined,
+        yAxisOverlayCtx: yAxisOverlayCtx ?? undefined,
         leftAxisCtx: leftAxisCtx ?? undefined,
-        zoomLevel: this.deps.getCurrentZoomLevel(),
-        zoomLevelCount: this.deps.getZoomLevelCount(),
+        leftAxisOverlayCtx: leftAxisOverlayCtx ?? undefined,
+        zoomLevel: this.deps.zoom.readonly.zoomLevel.peek(),
+        zoomLevelCount: this.deps.options.readonly.options.peek().zoomLevelCount,
         viewport: {
           scrollLeft: vp.scrollLeft,
           plotWidth: vp.plotWidth,
@@ -782,13 +831,14 @@ export class ChartRenderer {
         xAxisLabels: sharedXAxisLabels,
         yAxisRanges: sharedYAxisRanges,
         xAxisRanges: sharedXAxisRanges,
-        theme: this.deps.getTheme(),
+        theme: this.deps.theme$.peek(),
         isAsiaMarket: this.settings.isAsiaMarket as boolean,
         colorPresetSettings: this.settings.colorPresetSettings,
         monthKeys: dataManager.getMonthKeys() ?? undefined,
         dayKeys: dataManager.getDayKeys() ?? undefined,
       }
 
+      // 计算本 pane 的 Y 轴刻度（等分 + yToPrice 映射）
       {
         const pt = pane.yAxis.getPaddingTop()
         const pb = pane.yAxis.getPaddingBottom()
@@ -811,24 +861,32 @@ export class ChartRenderer {
 
       const region = { x: 0, y: pane.top, width: vp.plotWidth, height: pane.height, dpr: vp.dpr }
       const sceneRenderer = this.deps.getSceneRenderer()
+      const paneRole = (pane.id === 'main' ? 'main' : 'sub') as PaneRole
+      // 画 main canvas（非 overlay 角色 layer）
       if (shouldUpdateMain) {
+        // 标记后续 GPU 绘制属于此 region
         sceneRenderer.beginFrame(region)
-        this.scene.paintPane({
-          renderer: sceneRenderer,
-          region,
-          paneRole: (pane.id === 'main' ? 'main' : 'sub') as PaneRole,
-          paneId: pane.id,
-          frameNumber: this.frameCount++,
-          deltaMs: 0,
-        })
+        // 遍历 Scene 中该 pane 的可见 layer，逐层 paint
+        this.scene.paintPane(
+          {
+            renderer: sceneRenderer,
+            region,
+            paneRole,
+            paneId: pane.id,
+            frameNumber: this.frameCount++,
+            deltaMs: 0,
+          },
+          MAIN_CANVAS_ROLES,
+        )
       }
-      if (shouldUpdateOverlay && !shouldUpdateMain) {
+      // 画 overlay canvas（仅 overlay 角色 layer）；All 级也画
+      if (shouldUpdateOverlay) {
         sceneRenderer.beginFrame(region)
         this.scene.paintPane(
           {
             renderer: sceneRenderer,
             region,
-            paneRole: (pane.id === 'main' ? 'main' : 'sub') as PaneRole,
+            paneRole,
             paneId: pane.id,
             frameNumber: this.frameCount++,
             deltaMs: 0,
@@ -838,7 +896,7 @@ export class ChartRenderer {
       }
     }
 
-    // WebGPU: one submit after all panes recorded draws
+    // 所有 pane 绘制完成后统一提交 GPU（WebGPU 单次 queue.submit，WebGL 单次 flush）
     this.deps.getSceneRenderer().endFrame()
 
     return { sharedXAxisLabels, sharedXAxisRanges }
@@ -911,7 +969,7 @@ export class ChartRenderer {
         yAxisLabels: [],
         xAxisLabels: sharedXAxisLabels,
         xAxisRanges: sharedXAxisRanges,
-        theme: this.deps.getTheme(),
+        theme: this.deps.theme$.peek(),
         isAsiaMarket: this.settings.isAsiaMarket as boolean,
         colorPresetSettings: this.settings.colorPresetSettings,
         monthKeys: dataManager.getMonthKeys() ?? undefined,
@@ -935,7 +993,7 @@ export class ChartRenderer {
 
     if (count <= 0) return []
 
-    const dpr = this.deps.getViewportManager().getEffectiveDpr()
+    const dpr = this.deps.viewport.readonly.dpr.peek()
     const opt = this.deps.getOption()
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)