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

package/src/engine/chart.ts

@@ -12,6 +12,7 @@ import {
   type RendererPlugin,
   type RendererPluginWithHost,
 } from '../foundation/plugin/index'
+import { createLayerFromPlugin } from '../rendering/scene/createLayerFromPlugin'
 import {
   computed,
   type Computed,
@@ -22,6 +23,11 @@ import {
 import { InteractionController, type InteractionSnapshot } from './controller/interaction'
 
 import type { ChartSettings } from '../foundation/config/chartSettings'
+import {
+  createDefaultRendererHostSync,
+  type RendererBackend,
+  type RendererHost,
+} from '../rendering/render/index'
 import type { KLineData } from '../foundation/types/price'
 
 import type { IndicatorScheduler } from './indicators/scheduler'
@@ -41,7 +47,6 @@ import { KLineMode } from './modes/kLineMode'
 import { TimeShareMode } from './modes/timeShareMode'
 import { PaneRenderer } from './paneRenderer'
 import { ChartRenderer } from './render/chartRenderer'
-import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface'
 import { ChartStateKernel } from './state/chartStateKernel'
 import { ChartViewportManager } from './viewport/chartViewportManager'
 import { getVisibleRange } from './viewport/viewport'
@@ -101,8 +106,8 @@ export class Chart {
   /** 渲染器插件管理器 */
   private rendererPluginManager: RendererPluginManager
 
-  /** Chart 级共享 WebGL canvas/context */
-  private sharedWebGLSurface: SharedWebGLSurface
+  /** 具体渲染后端及其生命周期所有者 */
+  private rendererHost: RendererHost
 
   /** 缩放控制器 */
   private zoomController: ChartZoomController
@@ -196,13 +201,17 @@ export class Chart {
    * @param dom 由 Vue 组件传入的 DOM 句柄
    * @param opt 初始配置
    */
-  constructor(dom: ChartDom, opt: ChartOptions) {
+  constructor(
+    dom: ChartDom,
+    opt: ChartOptions,
+    runtime?: { rendererHost?: RendererHost; initialSettings?: Partial<ChartSettings> },
+  ) {
     this.dom = dom
     const { kWidth: _kWidth, kGap: _kGap, ...restOpt } = opt
     this._activeMode = this._kLineMode
     this.pluginHost = createPluginHost()
     this.rendererPluginManager = new RendererPluginManager()
-    this.sharedWebGLSurface = new SharedWebGLSurface()
+    this.rendererHost = runtime?.rendererHost ?? createDefaultRendererHostSync()
 
     // 注入依赖
     this.rendererPluginManager.setPluginHost(this.pluginHost)
@@ -218,14 +227,24 @@ export class Chart {
         zoomLevelCount,
       },
       initialZoomLevel,
+      initialSettings: runtime?.initialSettings,
+      initialRendererRuntime: this.rendererHost.runtime,
       scheduleDraw: (level) => this.scheduleDraw(level as UpdateLevel | undefined),
     })
+    this.rendererHost.setListeners({
+      onRuntimeChange: (rendererRuntime) => {
+        this.kernel.renderer.actions.setRuntime(rendererRuntime)
+        this.syncGpuSceneCanvas()
+      },
+      requestRedraw: () => this.scheduleDraw(UpdateLevel.All),
+    })
+    this.syncGpuSceneCanvas()
 
     // Inject DOM deps into kernel's viewportState (needed before init)
     this.kernel.setViewportDomDeps({
       getDom: () => this.dom,
       resizeSharedWebGLSurface: (plotWidth, plotHeight, dpr) =>
-        this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr),
+        this.rendererHost.resize(plotWidth, plotHeight, dpr),
     })
 
     // ── ViewportManager (DOM lifecycle: ResizeObserver + scroll events) ──
@@ -257,7 +276,6 @@ export class Chart {
         }
       },
       getViewport: () => this.viewportManager.getViewport(),
-      getSharedWebGLSurface: () => this.sharedWebGLSurface,
       setKnownPaneIds: (ids) => this.rendererPluginManager.setKnownPaneIds(ids),
       notifyPaneResize: (paneId, pane) =>
         this.rendererPluginManager.notifyResize(paneId, wrapPaneInfo(pane)),
@@ -435,10 +453,10 @@ export class Chart {
       },
       getPaneRenderers: () => this.paneRenderers,
       getInteraction: () => this.interaction,
-      getSharedWebGLSurface: () => this.sharedWebGLSurface,
+      getSceneRenderer: () => this.rendererHost.renderer,
       getPluginHost: () => this.pluginHost,
       getRendererPluginManager: () => this.rendererPluginManager,
-      getTheme: () => this.kernel.theme.readonly.theme.peek(),
+      getTheme: () => this.kernel.effectiveTheme$.peek(),
       getCurrentZoomLevel: () => this.kernel.zoom.readonly.zoomLevel.peek(),
       getZoomLevelCount: () => this.kernel.options.readonly.options.peek().zoomLevelCount,
       getViewportManager: () => this.viewportManager,
@@ -449,6 +467,7 @@ export class Chart {
       customMarkers$: this.kernel.marker.readonly.customMarkers,
       drawings$: this.kernel.drawing.readonly.drawings,
       selectedDrawingId$: this.kernel.drawing.readonly.selectedDrawingId,
+      getOverlay: () => this.drawingSession?.getPaintOverlay() ?? [],
     })
     this.renderer.registerDrawingPlugins()
     this.renderer.initCoreRenderers()
@@ -585,22 +604,80 @@ export class Chart {
     return this.pluginHost
   }
 
-  // ========== 渲染器插件 API ==========
+  // ========== 渲染器插件 API（绘制只走 Scene；Manager 仅作注册表） ==========
+
+  private resolvePluginLayerTarget(plugin: RendererPlugin): string {
+    if (typeof plugin.paneId === 'symbol') {
+      return 'global'
+    }
+    return String(plugin.paneId)
+  }
+
+  private getContextForPluginLayer(targetPaneId: string) {
+    return () => {
+      if (!this.renderer) return null
+      const map = this.renderer.getPaneCtxMap()
+      if (targetPaneId === 'global') {
+        return map.get(this.renderer.getCurrentPaneId()) ?? null
+      }
+      return map.get(targetPaneId) ?? null
+    }
+  }
 
-  /** 安装渲染器插件 */
+  /** 安装渲染器插件：注册元数据 + 挂 Scene Layer（唯一绘制路径；幂等） */
   useRenderer(
     plugin: RendererPlugin | RendererPluginWithHost,
     config?: Record<string, unknown>,
   ): void {
+    const layerId = `plugin:${plugin.name}`
+    const scene = this.renderer?.getScene()
+    const existingPlugin = this.rendererPluginManager.getPlugin(plugin.name)
+    const alreadyLayer = scene?.getLayer(layerId) != null
+
+    if (existingPlugin && alreadyLayer) {
+      if (config && existingPlugin.setConfig) existingPlugin.setConfig(config)
+      return
+    }
+
+    // 仅有注册表：补挂 Layer（不新建 plugin 实例）
+    if (existingPlugin && !alreadyLayer) {
+      if (config && existingPlugin.setConfig) existingPlugin.setConfig(config)
+      const targetPaneId = this.resolvePluginLayerTarget(existingPlugin)
+      scene?.addLayer(
+        createLayerFromPlugin(
+          existingPlugin,
+          this.getContextForPluginLayer(targetPaneId),
+          targetPaneId,
+        ),
+      )
+      return
+    }
+
+    // 仅有 Layer（core 预挂）：不二次 register，避免 Manager 实例 ≠ 绘制实例
+    if (!existingPlugin && alreadyLayer) {
+      return
+    }
+
     this.rendererPluginManager.register(plugin)
     if (config && plugin.setConfig) {
       plugin.setConfig(config)
     }
+    const targetPaneId = this.resolvePluginLayerTarget(plugin)
+    const layer = createLayerFromPlugin(
+      plugin,
+      this.getContextForPluginLayer(targetPaneId),
+      targetPaneId,
+    )
+    scene?.addLayer(layer)
   }
 
-  /** 移除渲染器插件 */
+  /**
+   * 移除渲染器插件。
+   * onUninstall 仅由 Manager.unregister 调用；Scene removeLayer 不 dispose，避免双调。
+   */
   removeRenderer(name: string): void {
     this.rendererPluginManager.unregister(name)
+    this.renderer?.getScene()?.removeLayer(`plugin:${name}`)
   }
 
   /** 获取渲染器插件 */
@@ -613,9 +690,18 @@ export class Chart {
     this.rendererPluginManager.updateConfig(name, config)
   }
 
-  /** 启用/禁用渲染器 */
+  /** 启用/禁用渲染器（Scene Layer 显隐；Manager enabled 仅同步元数据） */
   setRendererEnabled(name: string, enabled: boolean): void {
-    this.rendererPluginManager.setEnabled(name, enabled)
+    const inManager = this.rendererPluginManager.getPlugin(name) != null
+    if (inManager) {
+      // setEnabled → invalidate → scheduleDraw（勿再 schedule 双唤醒）
+      this.rendererPluginManager.setEnabled(name, enabled)
+    }
+    this.renderer?.getScene()?.setLayerVisibility(`plugin:${name}`, enabled)
+    // core-only Layer（如 candle）不在 Manager：需显式重绘
+    if (!inManager) {
+      this.scheduleDraw()
+    }
   }
 
   /** 获取所有渲染器 */
@@ -687,6 +773,14 @@ export class Chart {
       this.applyRightAxisTypeToKernel(settings.rightAxisType as string)
     }
 
+    if (prev.rendererBackend !== next.rendererBackend) {
+      void this.rendererHost.switchTo(next.rendererBackend as RendererBackend).then(() => {
+        this.syncGpuSceneCanvas()
+        this.scheduleDraw(UpdateLevel.All)
+      })
+      return
+    }
+
     this.scheduleDraw()
   }
 
@@ -826,9 +920,10 @@ export class Chart {
     this.indicatorManager.bindIndicatorToPane(paneId, indicatorId, params)
   }
 
-  /** 更新绘图对象（写 kernel + 重绘） */
+  /** 更新绘图对象（写 kernel + 重绘）；剥离会话预览 id */
   setDrawings(drawings: import('../foundation/plugin').DrawingObject[]): void {
-    this.kernel.drawing.actions.setDrawings(drawings)
+    const committed = drawings.filter((d) => d.id !== '__preview__')
+    this.kernel.drawing.actions.setDrawings(committed)
     this.scheduleDraw()
   }
 
@@ -1166,14 +1261,50 @@ export class Chart {
     }
   }
 
+  /**
+   * M2：将 WebGPU canvas 挂到 plot 区（main 与 overlay 之间），非 webgpu 时移除。
+   * 多 pane 共用一张 canvas，region.y + scissor 区分。
+   */
+  private syncGpuSceneCanvas(): void {
+    const layer = this.dom.canvasLayer
+    if (!layer) return
+    const effective = this.rendererHost.runtime.effective
+    const existing = layer.querySelector('canvas.gpu-scene-canvas') as HTMLCanvasElement | null
+
+    if (effective !== 'webgpu') {
+      existing?.remove()
+      return
+    }
+
+    const surface = this.rendererHost.renderer.surface as { canvas?: HTMLCanvasElement }
+    const canvas = surface.canvas
+    if (!canvas) return
+
+    canvas.classList.add('gpu-scene-canvas')
+    canvas.style.position = 'absolute'
+    canvas.style.left = '0'
+    canvas.style.top = '0'
+    canvas.style.pointerEvents = 'none'
+    canvas.style.zIndex = '1'
+    canvas.style.backgroundColor = 'transparent'
+
+    if (existing !== canvas) {
+      existing?.remove()
+      if (!canvas.isConnected) layer.appendChild(canvas)
+    }
+  }
+
   /** 销毁图表实例 */
   async destroy() {
     this.indicatorManager.destroy()
+    // onUninstall 由 Manager 单点负责；须在 scene.dispose 之前 clear
+    this.rendererPluginManager.clear()
     this.renderer.destroy()
     this.dataManager.destroy()
     this.viewportManager.destroy()
     this.layoutManager.destroy()
-    this.sharedWebGLSurface.destroy()
+    this.dom.canvasLayer?.querySelector('canvas.gpu-scene-canvas')?.remove()
+    this.rendererHost.dispose()
     this.kernel.dispose()
     this.alertController.dispose()
     await this.pluginHost.destroy()
@@ -1236,9 +1367,9 @@ export class Chart {
     return this.dataManager.comparisonLoading
   }
 
-  /** 主题信号 */
+  /** 生效主题信号（settings.theme + systemTheme 推导） */
   get theme(): ReadonlySignal<'light' | 'dark'> {
-    return this.kernel.theme.readonly.theme
+    return this.kernel.effectiveTheme$
   }
 
   /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
@@ -1365,13 +1496,23 @@ export class Chart {
   // ---------- Theme ----------
 
   /**
-   * 设置主题（高层 API）
+   * 设置主题偏好 light|dark（写 settings.theme）
    */
   setTheme(theme: 'light' | 'dark'): void {
-    this.kernel.theme.actions.setTheme(theme)
+    this.kernel.settings.actions.patch({ theme })
     this.scheduleDraw()
   }
 
+  /**
+   * 注入系统主题（仅 settings.theme === auto 时影响 effectiveTheme）
+   */
+  setSystemTheme(theme: 'light' | 'dark'): void {
+    this.kernel.systemTheme.actions.setSystemTheme(theme)
+    if (this.kernel.settings.readonly.settings.peek().theme === 'auto') {
+      this.scheduleDraw()
+    }
+  }
+
   // ---------- Zoom ----------
 
   /**
@@ -1557,12 +1698,18 @@ export class Chart {
   }
 
   /**
-   * 移除绘图（高层 API）
+   * 移除绘图（高层 API）—— 优先会话工作副本，否则只写 kernel
    * @param drawingId 绘图 ID
    */
-  removeDrawing(_drawingId: string): void {
-    // TODO: 实现绘图移除
-    console.warn('[Chart] removeDrawing not fully implemented yet')
+  removeDrawing(drawingId: string): void {
+    if (this.drawingSession) {
+      this.drawingSession.removeDrawing(drawingId)
+      return
+    }
+    const next = this.kernel.drawing.readonly.drawings
+      .peek()
+      .filter((d) => d.id !== drawingId)
+    this.setDrawings([...next])
   }
 
   /**

package/src/engine/controller/__tests__/interaction.dpr.test.ts

@@ -9,6 +9,7 @@ function createMockInteractionState() {
   const signals = {
     crosshairPos: writableRef<{ x: number; y: number } | null>(null),
     crosshairPrice: writableRef<number | null>(null),
+    crosshairIndex: writableRef<number | null>(null),
     hoveredIndex: writableRef<number | null>(null),
     activePaneId: writableRef<string | null>(null),
     isDragging: writableRef(false),
@@ -20,38 +21,13 @@ function createMockInteractionState() {
     hoveredMarkerData: writableRef<any>(null),
     hoveredCustomMarker: writableRef<any>(null),
     hoveredMarkerId: writableRef<string | null>(null),
-    kLinePositions: writableRef<number[] | null>(null),
-    kLineCenters: writableRef<number[] | null>(null),
-    kWidthPx: writableRef<number | null>(null),
   }
 
-  function computeCrosshairIndex(): number | null {
-    const pos = signals.crosshairPos.peek()
-    const positions = signals.kLinePositions.peek()
-    const kwp = signals.kWidthPx.peek()
-    if (!pos || !positions || !kwp) return null
-    const worldX = pos.x
-    let minDist = Infinity
-    let minIdx = -1
-    for (let i = 0; i < positions.length; i++) {
-      const dist = Math.abs(positions[i]! - worldX)
-      if (dist < minDist) {
-        minDist = dist
-        minIdx = i
-      }
-    }
-    return minIdx >= 0 ? minIdx : null
-  }
-
-  const crosshairIndexSignal = {
-    peek: () => computeCrosshairIndex(),
-    subscribe: () => () => {},
-  } as any
-
   return {
     readonly: {
       crosshairPos: signals.crosshairPos,
       crosshairPrice: signals.crosshairPrice,
+      crosshairIndex: signals.crosshairIndex,
       hoveredIndex: signals.hoveredIndex,
       activePaneId: signals.activePaneId,
       isDragging: signals.isDragging,
@@ -63,14 +39,10 @@ function createMockInteractionState() {
       hoveredMarkerData: signals.hoveredMarkerData,
       hoveredCustomMarker: signals.hoveredCustomMarker,
       hoveredMarkerId: signals.hoveredMarkerId,
-      kLinePositions: signals.kLinePositions,
-      kLineCenters: signals.kLineCenters,
-      kWidthPx: signals.kWidthPx,
-      crosshairIndex: crosshairIndexSignal,
       interactionSnapshot: {
         peek: () => ({
           crosshairPos: signals.crosshairPos.peek(),
-          crosshairIndex: crosshairIndexSignal.peek(),
+          crosshairIndex: signals.crosshairIndex.peek(),
           crosshairPrice: signals.crosshairPrice.peek(),
           hoveredIndex: signals.hoveredIndex.peek(),
           activePaneId: signals.activePaneId.peek(),
@@ -87,9 +59,13 @@ function createMockInteractionState() {
       } as any,
     },
     actions: {
-      updateCrosshair(pos: any, price: any) {
+      updateCrosshair(pos: any, price: any, index?: any) {
         signals.crosshairPos.set(pos)
         signals.crosshairPrice.set(price)
+        if (index !== undefined) signals.crosshairIndex.set(index)
+      },
+      setCrosshairIndex(index: any) {
+        signals.crosshairIndex.set(index)
       },
       setHoveredIndex(index: any) {
         signals.hoveredIndex.set(index)
@@ -101,11 +77,6 @@ function createMockInteractionState() {
         signals.hoveredIndex.set(index)
         signals.activePaneId.set(paneId)
       },
-      updateFramePositions(positions: any, centers: any, kWidthPxVal: any) {
-        signals.kLinePositions.set(positions)
-        signals.kLineCenters.set(centers)
-        signals.kWidthPx.set(kWidthPxVal)
-      },
       startDrag(mode: any) {
         signals.isDragging.set(true)
         signals.dragMode.set(mode)
@@ -135,6 +106,7 @@ function createMockInteractionState() {
       reset() {
         signals.crosshairPos.set(null)
         signals.crosshairPrice.set(null)
+        signals.crosshairIndex.set(null)
         signals.hoveredIndex.set(null)
         signals.activePaneId.set(null)
         signals.isDragging.set(false)
@@ -146,10 +118,6 @@ function createMockInteractionState() {
         signals.hoveredMarkerData.set(null)
         signals.hoveredCustomMarker.set(null)
         signals.hoveredMarkerId.set(null)
-        signals.kLinePositions.set(null)
-        signals.kLineCenters.set(null)
-        signals.kWidthPx.set(null)
-        crosshairIndexSignal.set(null)
       },
     },
     dispose() {},
@@ -283,9 +251,11 @@ describe('InteractionController DPR consumption', () => {
     interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
 
     interaction.onPointerMove({ clientX: 50, clientY: 40, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.crosshairPos).not.toBeNull()
 
     interaction.onPointerMove({ clientX: 120, clientY: 40, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.crosshairPos).toBeNull()
     expect(interaction.crosshairIndex).toBeNull()
   })
@@ -296,6 +266,7 @@ describe('InteractionController DPR consumption', () => {
     interactionDpr1.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
 
     interactionDpr1.onPointerMove({ clientX: 8, clientY: 40, isPrimary: true } as PointerEvent)
+    interactionDpr1.flushPendingHover()
     expect(interactionDpr1.crosshairIndex).toBe(0)
 
     const chartDpr2 = createChartStub({ dpr: 2, plotWidth: 300, plotHeight: 160 })
@@ -303,8 +274,34 @@ describe('InteractionController DPR consumption', () => {
     interactionDpr2.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
 
     interactionDpr2.onPointerMove({ clientX: 8, clientY: 40, isPrimary: true } as PointerEvent)
+    interactionDpr2.flushPendingHover()
     expect(interactionDpr2.crosshairIndex).toBe(1)
   })
+
+  it('pointermove does not write crosshair until flushPendingHover', () => {
+    const chart = createChartStub({ dpr: 1, plotWidth: 100, plotHeight: 80 })
+    const interaction = new InteractionController(chart as never, createMockInteractionState())
+    interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
+
+    interaction.onPointerMove({ clientX: 50, clientY: 40, isPrimary: true } as PointerEvent)
+    expect(interaction.crosshairPos).toBeNull()
+
+    interaction.flushPendingHover()
+    expect(interaction.crosshairPos).not.toBeNull()
+  })
+
+  it('pointerleave cancels pending hover so flush does not restore crosshair', () => {
+    const chart = createChartStub({ dpr: 1, plotWidth: 100, plotHeight: 80 })
+    const interaction = new InteractionController(chart as never, createMockInteractionState())
+    interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
+
+    interaction.onPointerMove({ clientX: 50, clientY: 40, isPrimary: true } as PointerEvent)
+    interaction.onPointerLeave({ isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
+
+    expect(interaction.crosshairPos).toBeNull()
+    expect(interaction.crosshairIndex).toBeNull()
+  })
 })
 
 describe('InteractionController pane capability gating', () => {
@@ -322,6 +319,7 @@ describe('InteractionController pane capability gating', () => {
 
     interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
     interaction.onPointerMove({ clientX: 5, clientY: 140, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
 
     expect(interaction.activePaneId).toBe('sub_MACD')
     expect(interaction.hoveredIndex).toBeNull()
@@ -341,6 +339,7 @@ describe('InteractionController pane capability gating', () => {
 
     interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
     interaction.onPointerMove({ clientX: 5, clientY: 10, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
 
     expect(interaction.activePaneId).toBe('main')
     expect(interaction.crosshairIndex).not.toBeNull()
@@ -361,9 +360,11 @@ describe('InteractionController pane capability gating', () => {
 
     interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
     interaction.onPointerMove({ clientX: 5, clientY: 10, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.hoveredIndex).toBe(interaction.crosshairIndex)
 
     interaction.onPointerMove({ clientX: 5, clientY: 140, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.activePaneId).toBe('sub_MACD')
     expect(interaction.hoveredIndex).toBeNull()
   })
@@ -386,6 +387,7 @@ describe('InteractionController hover snapshot', () => {
     const interaction = new InteractionController(chart as never, createMockInteractionState())
 
     interaction.onPointerMove({ clientX: 20, clientY: 20, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.getInteractionSnapshot().hoveredMarkerData).toBe(marker)
 
     interaction.onScroll()
@@ -414,11 +416,13 @@ describe('InteractionController hover snapshot', () => {
     const interaction = new InteractionController(chart as never, createMockInteractionState())
 
     interaction.onPointerMove({ clientX: 20, clientY: 20, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
     expect(interaction.getInteractionSnapshot().hoveredCustomMarker).toBe(customMarker)
 
     hoveringCustom = false
     interaction.setKLinePositions([0, 10], { start: 0, end: 2 }, 10)
     interaction.onPointerMove({ clientX: 20, clientY: 20, isPrimary: true } as PointerEvent)
+    interaction.flushPendingHover()
 
     expect(interaction.getInteractionSnapshot().hoveredCustomMarker).toBeNull()
   })