@363045841yyt/klinechart-core 0.7.5 → 0.7.7

package/src/controllers/types.ts

@@ -9,7 +9,8 @@
  */
 
 import type { Signal } from '../reactivity'
-import type { CustomMarkerEntity } from '../engine/marker/registry'
+import type { CustomMarkerEntity, MarkerEntity } from '../engine/marker/registry'
+import type { PaneSpec } from '../engine/chart'
 
 // Controller-owned public surface. Legacy engine types may mirror these
 // shapes internally, but adapters depend only on core-defined contracts.
@@ -73,6 +74,8 @@ export interface KLineData {
     turnoverRate?: number
 }
 
+export type { PaneSpec }
+
 // ---------------------------------------------------------------------------
 // Indicator metadata
 // ---------------------------------------------------------------------------
@@ -109,8 +112,8 @@ export interface InteractionSnapshot {
     activePaneId: string | null
     tooltipPos: { x: number; y: number }
     tooltipAnchorPlacement: 'right-bottom' | 'left-bottom'
-    hoveredMarkerData: Record<string, unknown> | null
-    hoveredCustomMarker: Record<string, unknown> | null
+    hoveredMarkerData: MarkerEntity | null
+    hoveredCustomMarker: CustomMarkerEntity | null
     isDragging: boolean
     isResizingPaneBoundary: boolean
     isHoveringPaneBoundary: boolean
@@ -118,6 +121,51 @@ export interface InteractionSnapshot {
     isHoveringRightAxis: boolean
 }
 
+// ---------------------------------------------------------------------------
+// Pane info (read-only pane metadata for DrawingChartAdapter)
+// ---------------------------------------------------------------------------
+
+export interface PaneInfo {
+    paneId: string
+    top: number
+    height: number
+}
+
+// ---------------------------------------------------------------------------
+// Drawing adapter — narrow interface for DrawingInteractionController
+// ---------------------------------------------------------------------------
+
+export interface DrawingChartViewport {
+    scrollLeft: number
+    plotWidth: number
+    plotHeight: number
+}
+
+export interface DrawingChartAdapter {
+    /** persist full drawing list to the chart engine */
+    setDrawings(drawings: any[]): void
+    /** highlight a drawing by ID */
+    setSelectedDrawingId(id: string | null): void
+    /** current viewport (nullable if chart not ready) */
+    getViewport(): DrawingChartViewport | null
+    /** resolved chart options (kWidth, kGap) */
+    getKWidthKGap(): { kWidth: number; kGap: number }
+    /** device pixel ratio */
+    getCurrentDpr(): number
+    /** raw K-line data */
+    getData(): ReadonlyArray<KLineData>
+    /** screen-x → logical bar index */
+    getLogicalIndexAtX(mouseX: number): number | null
+    /** logical index → unix timestamp (ms) */
+    getTimestampAtLogicalIndex(index: number): number | null
+    /** price → Y within the given pane */
+    priceToY(paneId: string, price: number): number
+    /** Y within the given pane → price */
+    yToPrice(paneId: string, y: number): number
+    /** read-only pane metadata by pane ID */
+    getPaneInfo(paneId: string): PaneInfo | undefined
+}
+
 // ---------------------------------------------------------------------------
 // Drawing controller callback type (passed to handlePointerEvent)
 // ---------------------------------------------------------------------------
@@ -138,9 +186,22 @@ export interface ChartMountOptions {
     initialZoomLevel?: number
     zoomLevels?: number
     theme?: 'light' | 'dark'
+
+    // Pre-existing DOM elements (skip buildDom when provided)
+    canvasLayer?: HTMLElement
+    rightAxisLayer?: HTMLElement
+    xAxisCanvas?: HTMLCanvasElement
+
+    // Chart options overrides
+    yPaddingPx?: number
+    rightAxisWidth?: number
+    bottomAxisHeight?: number
+    priceLabelWidth?: number
+    minKWidth?: number
+    maxKWidth?: number
 }
 
-export interface ChartController {
+export interface ChartController extends DrawingChartAdapter {
     // ---- Signals ----
     readonly viewport: Signal<ChartViewport>
     readonly data: Signal<ReadonlyArray<KLineData>>
@@ -150,6 +211,7 @@ export interface ChartController {
     readonly drawingTool: Signal<DrawingToolType | null>
     readonly drawings: Signal<ReadonlyArray<DrawingObject>>
     readonly paneRatios: Signal<Readonly<Record<string, number>>>
+    readonly paneLayout: Signal<ReadonlyArray<PaneSpec>>
     readonly interactionState: Signal<InteractionSnapshot>
 
     // indicator catalog (static — adapters use for picker UI)
@@ -159,6 +221,8 @@ export interface ChartController {
     setData(next: ReadonlyArray<KLineData>): void
     appendData(next: ReadonlyArray<KLineData>): void
     updateData(next: ReadonlyArray<KLineData>): void
+    getData(): ReadonlyArray<KLineData>
+    getZoomLevelCount(): number
 
     // ---- Theme ----
     setTheme(theme: 'light' | 'dark'): void
@@ -193,11 +257,22 @@ export interface ChartController {
     resizeSubPane(paneId: string, deltaY: number): boolean
     createSubPane(paneId: string, indicatorId: string, params?: Record<string, unknown>): boolean
     clearSubPanes(): void
+    replaceSubPaneIndicator(paneId: string, indicatorId: string, params?: Record<string, unknown>): boolean
+    updatePaneLayout(panes: PaneSpec[]): void
 
     // ---- Drawing / Markers ----
     updateCustomMarkers(markers: ReadonlyArray<CustomMarkerEntity>): void
     clearCustomMarkers(): void
 
+    // ---- Interaction sub-methods ----
+    setTooltipSize(size: { width: number; height: number }): void
+    setTooltipAnchorPositioning(enabled: boolean): void
+
+    // ---- Narrow queries ----
+    getIndicatorTitle(instanceId: string): string | undefined
+    /** total scrollable content width (replaces direct computeContentWidth imports) */
+    getContentWidth(): number
+
     // ---- Settings ----
     updateSettingsFacade(settings: Record<string, unknown>): void
     updateOptionsFacade(options: Record<string, unknown>): void
@@ -218,7 +293,6 @@ export type ChartControllerFactory = (opts: ChartMountOptions) => ChartControlle
 // Legacy type aliases (deprecated — kept for internal sub-controller tests)
 // ---------------------------------------------------------------------------
 
-/** @deprecated Use `IndicatorInstance` instead. Kept for createIndicatorSelectorController tests. */
 export interface ActiveIndicator {
     id: string
     definitionId: string
@@ -228,7 +302,6 @@ export interface ActiveIndicator {
     params: Readonly<Record<string, number | string | boolean>>
 }
 
-/** @deprecated Flattened into ChartController. Kept for createIndicatorSelectorController tests. */
 export interface IndicatorSelectorController {
     readonly catalog: Signal<ReadonlyArray<IndicatorDefinition>>
     readonly active: Signal<ReadonlyArray<ActiveIndicator>>
@@ -258,7 +331,6 @@ export interface ToolDefinition {
     disabled?: boolean
 }
 
-/** @deprecated Flattened into ChartController. Kept for createToolbarController tests. */
 export interface ToolbarController {
     readonly tools: Signal<ReadonlyArray<ToolDefinition>>
     readonly activeTool: Signal<ToolId | null>
@@ -274,7 +346,6 @@ export interface DrawingState {
     readonly drawingCount: number
 }
 
-/** @deprecated Flattened into ChartController. Kept for createDrawingController tests. */
 export interface DrawingController {
     readonly state: Signal<DrawingState>
     setActiveTool(tool: DrawingToolType | null): void

package/src/engine/chart.ts

@@ -9,7 +9,6 @@ import { PaneRenderer } from './paneRenderer'
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface'
 import { MarkerManager, type CustomMarkerEntity } from './marker/registry'
 import { getPhysicalKLineConfig, calcKWidthPx } from './utils/klineConfig'
-import { computeContentWidth } from './chart-store'
 import { computeZoom, computeZoomToLevel, type ZoomConfig } from './utils/zoom'
 import { IndicatorScheduler } from './indicators/scheduler'
 import { getRegisteredIndicatorDefinitions } from './indicators/indicatorDefinitionRegistry'
@@ -214,21 +213,12 @@ export class Chart {
     /** pane ratio 状态（按 paneId 维护，sum=1 仅对可见 pane） */
     private _internalPaneRatios: Map<string, number> = new Map()
 
-    /** 视口变化回调（供外部同步 DPR/尺寸） */
-    private onViewportChange?: (viewport: Viewport) => void
-
     /** 共享 X 轴上下文缓存 */
     private xAxisCtx: CanvasRenderingContext2D | null = null
 
     /** Chart 级共享 WebGL canvas/context */
     private sharedWebGLSurface: SharedWebGLSurface
 
-    /** pane 布局回流回调（Chart -> UI 单向） */
-    private onPaneLayoutChange?: (panes: PaneSpec[]) => void
-
-    /** 数据变化回调（供外部同步 dataLength） */
-    private onDataChange?: (data: KLineData[]) => void
-
     /** 当前缩放级别（1 ~ zoomLevelCount） */
     private currentZoomLevel: number = 1
 
@@ -1126,6 +1116,8 @@ export class Chart {
                 yAxisRanges: sharedYAxisRanges,
                 xAxisRanges: sharedXAxisRanges,
                 theme: this._themeSignal.peek(),
+                isAsiaMarket: this.settings.isAsiaMarket as boolean,
+                colorPresetSettings: this.settings.colorPresetSettings,
             }
 
             if (shouldUpdateMain || shouldUpdateOverlay) {
@@ -1203,6 +1195,8 @@ export class Chart {
                 xAxisLabels: sharedXAxisLabels,
                 xAxisRanges: sharedXAxisRanges,
                 theme: this._themeSignal.peek(),
+                isAsiaMarket: this.settings.isAsiaMarket as boolean,
+                colorPresetSettings: this.settings.colorPresetSettings,
             }
             const errors = this.rendererPluginManager.renderPlugin('timeAxis', timeAxisContext)
             if (errors.length > 0) {
@@ -1243,21 +1237,6 @@ export class Chart {
         return this.zoomLevelCount
     }
 
-    /** 注册视口变化回调 */
-    setOnViewportChange(cb: (viewport: Viewport) => void) {
-        this.onViewportChange = cb
-    }
-
-    /** 注册 pane 布局回流回调 */
-    setOnPaneLayoutChange(cb: (panes: PaneSpec[]) => void) {
-        this.onPaneLayoutChange = cb
-    }
-
-    /** 注册数据变化回调 */
-    setOnDataChange(cb: (data: KLineData[]) => void) {
-        this.onDataChange = cb
-    }
-
     /** 获取所有 PaneRenderer */
     getPaneRenderers(): PaneRenderer[] {
         return this.paneRenderers
@@ -1436,7 +1415,7 @@ export class Chart {
         })
         this._paneRatiosSignal.set(ratios)
 
-        this.onPaneLayoutChange?.(this.getPaneLayoutSpecs())
+        this._paneLayoutSignal.set(this.getPaneLayoutSpecs())
     }
 
     private applyPaneLayoutSpecs(panes: PaneSpec[]): void {
@@ -1781,7 +1760,6 @@ export class Chart {
     updateData(data: KLineData[]) {
         this._internalData = data ?? []
         this._dataSignal.set([...this._internalData])
-        this.onDataChange?.(this._internalData)
 
         // 重算 DOM scrollLeft 状态, 防止左右滚动超出数据长度范围
         const container = this.dom.container
@@ -1848,13 +1826,16 @@ export class Chart {
 
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth(): number {
-        return computeContentWidth({
-            dataLength: this._internalData.length,
-            kWidth: this.opt.kWidth,
-            kGap: this.opt.kGap,
-            viewWidth: this._internalViewport?.plotWidth ?? 0,
-            viewportDpr: this.getEffectiveDpr(),
-        })
+        const dataLength = this._internalData.length
+        if (dataLength === 0) return 0
+        const kWidth = this.opt.kWidth
+        const kGap = this.opt.kGap
+        const viewWidth = this._internalViewport?.plotWidth ?? 0
+        const dpr = this.getEffectiveDpr()
+        const TRAILING_DRAWING_SLOTS = 24
+        const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
+        const dataPlotWidth = (startXPx + (dataLength + TRAILING_DRAWING_SLOTS) * unitPx) / dpr
+        return Math.max(dataPlotWidth, viewWidth)
     }
 
 
@@ -1936,8 +1917,6 @@ export class Chart {
         // 清理渲染器插件管理器（会调用所有 onUninstall）
         this.rendererPluginManager.clear()
 
-        this.onViewportChange = undefined
-        this.onPaneLayoutChange = undefined
         this.indicatorScheduler.destroy()
         await this.pluginHost.destroy()
     }
@@ -2255,7 +2234,18 @@ export class Chart {
 
         this._internalViewport = vp
         if (viewportChanged) {
-            this.onViewportChange?.(vp)
+            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,
+                desiredScrollLeft: current.desiredScrollLeft,
+                kWidth: current.kWidth,
+                kGap: current.kGap,
+            })
         }
         return vp
     }
@@ -2280,6 +2270,7 @@ export class Chart {
     private _drawingToolSignal = createSignal<DrawingToolType | null>(null)
     private _drawingsSignal = createSignal<ReadonlyArray<import('../plugin').DrawingObject>>([])
     private _paneRatiosSignal = createSignal<Readonly<Record<string, number>>>({})
+    private _paneLayoutSignal = createSignal<PaneSpec[]>([])
     private _interactionSignal = createSignal<InteractionSnapshot>({
         crosshairPos: null,
         crosshairIndex: null,
@@ -2369,6 +2360,10 @@ export class Chart {
         return this._paneRatiosSignal
     }
 
+    get paneLayout(): Signal<PaneSpec[]> {
+        return this._paneLayoutSignal
+    }
+
     /** 交互状态信号 */
     get interactionState(): Signal<InteractionSnapshot> {
         return this._interactionSignal

package/src/engine/controller/interaction.ts

@@ -102,10 +102,17 @@ export class InteractionController {
 
     constructor(chart: Chart) {
         this.chart = chart
+        this.setupPinchZoom()
     }
 
-    setOnPinchZoom(callback: (delta: number, centerX: number) => void) {
-        this.pinchTracker.setOnPinchZoom(callback)
+    private setupPinchZoom(): void {
+        this.pinchTracker.setOnPinchZoom((delta, centerClientX) => {
+            const container = this.chart.getDom().container
+            if (!container) return
+            const rect = container.getBoundingClientRect()
+            const centerX = centerClientX - rect.left
+            this.chart.handlePinchZoom(delta, centerX)
+        })
     }
 
     /** 更新用户设置 */

package/src/engine/draw/pixelAlign.ts

@@ -2,8 +2,6 @@
  * 像素对齐工具函数 - 逻辑像素空间（配合 ctx.scale(dpr) 使用）
  */
 
-import { getColors } from '../theme/colors'
-
 /**
  * 将逻辑坐标对齐到物理像素边界（用于矩形填充）
  * @param value - 逻辑坐标值

package/src/engine/drawing/interaction.ts

@@ -1,5 +1,5 @@
 import type { DrawingObject, DrawingKind, DrawingAnchor, DrawingStyle } from '../../plugin'
-import type { Chart } from '../chart'
+import type { DrawingChartAdapter } from '../../controllers/types'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
 import { computeLinearRegression } from './index'
 
@@ -55,7 +55,7 @@ const LINE_HIT_RADIUS = 6
  * 封装绘图工具的交互逻辑，与 Vue 组件解耦
  */
 export class DrawingInteractionController {
-  private chart: Chart
+  private adapter: DrawingChartAdapter
   private activeTool: DrawingToolId = 'cursor'
   private pendingAnchors: DrawingAnchorInput[] = []
   private drawings: DrawingObject[] = []
@@ -87,8 +87,8 @@ export class DrawingInteractionController {
     'disjoint-channel',
   ]
 
-  constructor(chart: Chart) {
-    this.chart = chart
+  constructor(adapter: DrawingChartAdapter) {
+    this.adapter = adapter
   }
 
   setCallbacks(callbacks: DrawingInteractionCallbacks) {
@@ -114,7 +114,7 @@ export class DrawingInteractionController {
 
   setDrawings(drawings: DrawingObject[]) {
     this.drawings = drawings
-    this.chart.setDrawings(drawings)
+    this.adapter.setDrawings(drawings)
   }
 
   clear() {
@@ -133,7 +133,7 @@ export class DrawingInteractionController {
     this.drawings = this.drawings.map((d) =>
       d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d
     )
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   removeDrawing(drawingId: string): void {
@@ -141,7 +141,7 @@ export class DrawingInteractionController {
     if (this.selectedDrawingId === drawingId) {
       this.setSelected(null)
     }
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   /**
@@ -287,7 +287,7 @@ export class DrawingInteractionController {
       }
     }
 
-    this.chart.setDrawings([...this.drawings])
+    this.adapter.setDrawings([...this.drawings])
     return true
   }
 
@@ -400,7 +400,7 @@ export class DrawingInteractionController {
 
     this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
     this.drawings = [...this.drawings, preview]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     return true
   }
 
@@ -446,7 +446,7 @@ export class DrawingInteractionController {
     drawing: DrawingObject,
     regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
   ): LineSegment[] {
-    const viewport = this.chart.getViewport()
+    const viewport = this.adapter.getViewport()
     if (!viewport) return []
 
     if (drawing.kind === 'regression-channel') {
@@ -458,12 +458,11 @@ export class DrawingInteractionController {
       const screen = this.anchorToScreen(drawing.anchors[0]!)
       if (!screen) return []
 
-      const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-      const pane = paneRenderer?.getPane()
-      if (!pane) return []
+      const paneInfo = this.adapter.getPaneInfo('main')
+      if (!paneInfo) return []
 
       const right = viewport.plotWidth
-      const bottom = pane.height
+      const bottom = paneInfo.height
 
       switch (drawing.kind) {
         case 'horizontal-line':
@@ -582,7 +581,7 @@ export class DrawingInteractionController {
     const cached = regressionGeometryCache?.get(drawing.id)
     if (cached !== undefined) return cached
 
-    const data = this.chart.getData()
+    const data = this.adapter.getData()
     if (data.length === 0 || drawing.anchors.length < 2) {
       regressionGeometryCache?.set(drawing.id, null)
       return null
@@ -645,21 +644,17 @@ export class DrawingInteractionController {
   // ============ 坐标转换 ============
 
   private anchorToScreen(anchor: DrawingAnchor): { x: number; y: number } | null {
-    const viewport = this.chart.getViewport()
+    const viewport = this.adapter.getViewport()
     if (!viewport) return null
 
-    const opt = this.chart.getOption()
-    const dpr = this.chart.getCurrentDpr()
-    const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
+    const { kWidth, kGap } = this.adapter.getKWidthKGap()
+    const dpr = this.adapter.getCurrentDpr()
+    const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
     if (!Number.isFinite(anchor.index)) return null
 
     const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
-
-    const y = pane.yAxis.priceToY(anchor.price)
+    const y = this.adapter.priceToY('main', anchor.price)
     return { x, y }
   }
 
@@ -667,23 +662,22 @@ export class DrawingInteractionController {
     screenX: number,
     screenY: number
   ): DrawingAnchorInput | null {
-    const data = this.chart.getData()
-    const viewport = this.chart.getViewport()
+    const data = this.adapter.getData()
+    const viewport = this.adapter.getViewport()
     if (!viewport || data.length === 0) return null
 
-    const logicalIndex = this.chart.getLogicalIndexAtX(screenX)
+    const logicalIndex = this.adapter.getLogicalIndexAtX(screenX)
     if (logicalIndex === null) return null
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
+    const paneInfo = this.adapter.getPaneInfo('main')
+    if (!paneInfo) return null
 
-    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+    const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
 
     return {
       index: logicalIndex,
       time: timestamp ?? undefined,
-      price: pane.yAxis.yToPrice(screenY - pane.top),
+      price: this.adapter.yToPrice('main', screenY - paneInfo.top),
     }
   }
 
@@ -693,22 +687,22 @@ export class DrawingInteractionController {
     const newId = drawing?.id ?? null
     if (this.selectedDrawingId === newId) return
     this.selectedDrawingId = newId
-    this.chart.setSelectedDrawingId(newId)
+    this.adapter.setSelectedDrawingId(newId)
     this.callbacks.onDrawingSelected?.(drawing)
   }
 
   private removePreview() {
     if (!this.drawings.some((d) => d.id === this.previewDrawingId)) return
     this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   private resolveAnchorFromPointer(
     e: PointerEvent,
     container: HTMLElement
   ): DrawingAnchorInput | null {
-    const data = this.chart.getData()
-    const viewport = this.chart.getViewport()
+    const data = this.adapter.getData()
+    const viewport = this.adapter.getViewport()
     if (!viewport || data.length === 0) return null
 
     const rect = container.getBoundingClientRect()
@@ -718,21 +712,18 @@ export class DrawingInteractionController {
       return null
     }
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => {
-      const pane = item.getPane()
-      return pane.id === 'main' && mouseY >= pane.top && mouseY <= pane.top + pane.height
-    })
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
+    const paneInfo = this.adapter.getPaneInfo('main')
+    if (!paneInfo) return null
+    if (mouseY < paneInfo.top || mouseY > paneInfo.top + paneInfo.height) return null
 
-    const logicalIndex = this.chart.getLogicalIndexAtX(mouseX)
+    const logicalIndex = this.adapter.getLogicalIndexAtX(mouseX)
     if (logicalIndex === null) return null
-    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+    const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
 
     return {
       index: logicalIndex,
       time: timestamp ?? undefined,
-      price: pane.yAxis.yToPrice(mouseY - pane.top),
+      price: this.adapter.yToPrice('main', mouseY - paneInfo.top),
     }
   }
 
@@ -754,7 +745,7 @@ export class DrawingInteractionController {
     }
 
     this.drawings = [...this.drawings, drawing]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     this.callbacks.onDrawingCreated?.(drawing)
     this.activeTool = 'cursor'
     this.callbacks.onToolChange?.('cursor')
@@ -801,7 +792,7 @@ export class DrawingInteractionController {
     }
 
     this.drawings = [...this.drawings, drawing]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     this.callbacks.onDrawingCreated?.(drawing)
     this.activeTool = 'cursor'
     this.callbacks.onToolChange?.('cursor')

package/src/engine/drawing/plugin.ts

@@ -190,7 +190,7 @@ export function createDrawingRendererPlugin(options: {
     description: '绘图渲染器（仅负责绘制形状）',
     debugName: '绘图层',
     paneId: options.paneId ?? 'main',
-    priority: -25,
+    priority: 55,
     draw(context: RenderContext) {
       const { ctx, pane, data, range, dpr, paneWidth, kLinePositions, kLineCenters, kBarRects, kWidth, kGap } = context
       const viewport = context.viewport ?? {

package/src/engine/renderers/Indicator/atr.ts

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { ATRRenderState } from '../../indicators/atrState'
 import { createATRStateKey } from '../../indicators/atrState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -88,6 +89,8 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            const atrColor = colors.palette?.indicatorAtr ?? ATR_COLOR
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -147,7 +150,7 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (cachedPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedPoints, width: 1, color: ATR_COLOR }],
+                        [{ points: cachedPoints, width: 1, color: atrColor }],
                         scrollLeft,
                     )
                     if (ok) {
@@ -158,7 +161,7 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
             }
 
             if (!usedWebGL) {
-                drawWithCanvas2D(ctx, scrollLeft, cachedPoints)
+                drawWithCanvas2D(ctx, scrollLeft, cachedPoints, atrColor)
             }
         },
 
@@ -179,11 +182,12 @@ function drawWithCanvas2D(
     ctx: CanvasRenderingContext2D,
     scrollLeft: number,
     points: LinePoint[],
+    atrColor: string,
 ): void {
     if (points.length < 2) return
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = ATR_COLOR
+    ctx.strokeStyle = atrColor
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'