@363045841yyt/klinechart-core 0.8.7 → 0.8.9

package/src/engine/data/chartDataManager.ts

@@ -1,7 +1,7 @@
 import type { KLineData, TimeShareData } from '../../types/price'
 import type { SymbolSpec, DataFetcher, CustomDataSource } from '../../controllers/types'
 import { createSignal, type Signal } from '../../reactivity/signal'
-import { DataBuffer } from '../../data-fetchers/dataBuffer'
+import { DataBuffer, getPeriodDays } from '../../data-fetchers/dataBuffer'
 import { TimeShareBuffer } from '../../data-fetchers/timeShareBuffer'
 import type { DataBufferLike } from '../../data-fetchers/dataBufferTypes'
 import type { TimeShareFetcherFn } from '../../data-fetchers/types'
@@ -18,8 +18,7 @@ export interface DataDependencies {
   getEffectiveDpr: () => number
   getLogicalScrollLeft: () => number
   getCachedScrollLeft: () => number
-  setCachedScrollLeft: (v: number) => void
-  setPendingScrollLeft: (v: number) => void
+  setScrollLeft: (v: number) => void
   getDom: () => ChartDom
   getObservedSize: () => { width: number; height: number }
   getViewport: () => Viewport | null
@@ -43,6 +42,8 @@ function bufKey(type: string, symbol: string, period?: string): string {
 }
 
 export class ChartDataManager {
+  static readonly TRAILING_SLOTS = 30
+
   private _dataFetcher: DataFetcher | null = null
   private _timeShareFetcher: TimeShareFetcherFn | null = null
 
@@ -101,8 +102,9 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
       this._dataSignal.set([...buf.data.peek() as unknown[]])
       this._loadingSignal.set(buf.loading.peek())
       const unsubData = buf.data.subscribe(() => {
+        const prevDataLength = this._dataSignal.peek().length
         this._dataSignal.set([...buf.data.peek() as unknown[]])
-        this.onBufferDataChanged(key)
+        this.onBufferDataChanged(key, prevDataLength)
       })
       const unsubLoading = buf.loading.subscribe(() => {
         this._loadingSignal.set(buf.loading.peek())
@@ -162,45 +164,30 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
 
   // ── Buffer data change handler ──
 
-  private onBufferDataChanged(key: string): void {
+  private onBufferDataChanged(key: string, prevDataLength?: number): void {
     const buf = this._buffers.get(key)
     if (!buf) return
 
     if (buf instanceof DataBuffer) {
-      this.onKLineBufferChanged(key, buf)
+      this.onKLineBufferChanged(key, buf, prevDataLength)
     } else if (buf instanceof TimeShareBuffer) {
       this.onTimeShareBufferChanged(key, buf)
     }
   }
 
-  private onKLineBufferChanged(key: string, buf: DataBuffer): void {
+  private onKLineBufferChanged(key: string, buf: DataBuffer, prevDataLength?: number): void {
     if (!key.startsWith('main:')) return
 
-    const prevLength = this.getActiveKLineLength()
     const bufferData = buf.getRawData() as KLineData[]
     const prependedCount = this.pendingPrependedCount
     this.pendingPrependedCount = 0
 
-    if (this.deps.getCachedScrollLeft() < this.getLeftLoadBufferWidth()) {
-      const desiredScrollLeft = this.getLeftLoadBufferWidth()
-      this.deps.setCachedScrollLeft(desiredScrollLeft)
-      this.deps.setPendingScrollLeft(desiredScrollLeft)
+    if (prependedCount === 0 && this.deps.getCachedScrollLeft() < this.getLeftLoadBufferWidth()) {
+      this.deps.setScrollLeft(this.getLeftLoadBufferWidth())
     }
 
-    if (prevLength === 0 && bufferData.length > 0) {
-      const dpr = this.deps.getEffectiveDpr()
-      const opt = this.deps.getOption()
-      const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
-      const lastKLineEndPx = (startXPx + bufferData.length * unitPx) / dpr
-      const container = this.deps.getDom().container
-      if (container) {
-        const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - container.clientWidth)
-        const contentWidth = this.getContentWidth()
-        const maxScroll = Math.max(0, contentWidth - container.clientWidth)
-        const scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr
-        this.deps.setCachedScrollLeft(scrollLeft)
-        this.deps.setPendingScrollLeft(scrollLeft)
-      }
+    if ((prevDataLength ?? this._dataSignal.peek().length) === 0 && bufferData.length > 0) {
+      this.scrollToRight()
     }
 
     this.deps.resetInteraction()
@@ -285,7 +272,7 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     return 24
   }
 
-  private static readonly TRAILING_DRAWING_SLOTS = 24
+
 
   private clearIncrementalLoadHintTimer(): void {
     if (this.incrementalLoadHintTimer !== null) {
@@ -312,7 +299,6 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     const hint = ownerDoc.createElement('div')
     hint.className = 'klc-incremental-load-hint'
     hint.style.position = 'absolute'
-    hint.style.left = '0'
     hint.style.top = '0'
     hint.style.height = '0px'
     hint.style.width = '0px'
@@ -336,7 +322,8 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     const dpr = this.deps.getEffectiveDpr()
     const opt = this.deps.getOption()
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
-    const width = this.getLeftLoadBufferWidth() + (startXPx + count * unitPx) / dpr
+    hint.style.left = `${this.getLeftLoadBufferWidth()}px`
+    const width = (startXPx + count * unitPx) / dpr
     hint.style.width = `${Math.max(0, width)}px`
     hint.style.height = `${Math.max(
       0,
@@ -381,6 +368,14 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     return [...this._dataSignal.peek()]
   }
 
+  getMonthKeys(): Int32Array | null {
+    return this.getActiveDataBuffer()?.getMonthKeys() ?? null
+  }
+
+  getDayKeys(): Int32Array | null {
+    return this.getActiveDataBuffer()?.getDayKeys() ?? null
+  }
+
   getTimeShareData(): TimeShareData[] {
     const buf = this.getActiveTimeShareBuffer()
     return buf ? buf.getRawData() : []
@@ -552,10 +547,12 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     const range = this.computeRawVisibleRange() ?? this.lastRawVisibleRange
 
     const MS_PER_DAY = 86_400_000
+    const spec = buf.currentSpec
+    const gapDays = getPeriodDays(spec?.period)
     let firstVisibleTs: number | undefined
 
     if (range.start < 0 && this._dataFetcher) {
-      const earlierThanEarliest = window.earliestTs - 365 * MS_PER_DAY
+      const earlierThanEarliest = window.earliestTs - gapDays * MS_PER_DAY
       buf.ensureRange(earlierThanEarliest, window.earliestTs)
       firstVisibleTs = data[0]?.timestamp
     } else if (range.start < data.length) {
@@ -867,11 +864,8 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
       const opt = this.deps.getOption()
       const { unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
       const compensation = (count * unitPx) / dpr
-      const container = this.deps.getDom().container
-      if (container) {
-        container.scrollLeft += compensation
-        this.deps.setCachedScrollLeft(container.scrollLeft)
-      }
+      const nextScrollLeft = this.deps.getCachedScrollLeft() + compensation
+      this.deps.setScrollLeft(nextScrollLeft)
     }
 
     buf.setSymbol(spec)
@@ -893,23 +887,29 @@ private _symbolsSignal = createSignal<ReadonlyArray<SymbolSpec>>([])
     const viewWidth = this.deps.getViewport()?.plotWidth ?? 0
     const dpr = this.deps.getEffectiveDpr()
     const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
-    const dataPlotWidth = (startXPx + (dataLength + ChartDataManager.TRAILING_DRAWING_SLOTS) * unitPx) / dpr
+    const dataPlotWidth = (startXPx + (dataLength + ChartDataManager.TRAILING_SLOTS) * unitPx) / dpr
     return this.getLeftLoadBufferWidth() + Math.max(dataPlotWidth, viewWidth)
   }
 
   scrollToRight(): void {
     const buf = this.getActiveDataBuffer()
     const dataLength = buf ? buf.getRawData().length : 0
-    const container = this.deps.getDom().container
-    if (!container || dataLength === 0) return
+    if (dataLength === 0) return
     const dpr = this.deps.getEffectiveDpr()
     const opt = this.deps.getOption()
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
-    const lastKLineEndPx = (startXPx + dataLength * unitPx) / dpr
-    const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - container.clientWidth)
-    const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth)
-    container.scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr
-    this.deps.setCachedScrollLeft(container.scrollLeft)
+    const lastKLineEndPx = (startXPx + (dataLength + ChartDataManager.TRAILING_SLOTS) * unitPx) / dpr
+    const viewport = this.deps.getViewport()
+    const clientWidth = viewport?.viewWidth
+      ?? (this.deps.getObservedSize().width > 0 ? this.deps.getObservedSize().width : undefined)
+      ?? Math.round(this.deps.getDom().container?.clientWidth ?? 0)
+    if (clientWidth <= 0) return
+    const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - clientWidth)
+    const contentWidth = this.getContentWidth()
+    const maxScroll = Math.max(0, contentWidth - clientWidth)
+    const scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr
+    this.deps.setScrollLeft(scrollLeft)
+    this.deps.scheduleDraw()
   }
 
   // ── Comparison price range ──

package/src/engine/drawing/index.ts

@@ -229,42 +229,8 @@ function formatSigned(value: number, digits = 2): string {
   return value > 0 ? `+${fixed}` : fixed
 }
 
-export function computeLinearRegression(values: number[]): { slope: number; intercept: number; stdDev: number } | null {
-  const n = values.length
-  if (n < 2) return null
-
-  let sumX = 0
-  let sumY = 0
-  let sumXY = 0
-  let sumXX = 0
-  for (let i = 0; i < n; i++) {
-    const x = i
-    const y = values[i]!
-    sumX += x
-    sumY += y
-    sumXY += x * y
-    sumXX += x * x
-  }
-
-  const denominator = n * sumXX - sumX * sumX
-  if (denominator === 0) return null
-
-  const slope = (n * sumXY - sumX * sumY) / denominator
-  const intercept = (sumY - slope * sumX) / n
-
-  let variance = 0
-  for (let i = 0; i < n; i++) {
-    const fitted = intercept + slope * i
-    const diff = values[i]! - fitted
-    variance += diff * diff
-  }
-
-  return {
-    slope,
-    intercept,
-    stdDev: Math.sqrt(variance / n),
-  }
-}
+import { computeLinearRegression } from './linearRegression'
+export { computeLinearRegression }
 
 export function createDefaultPrimitiveRendererSet(): PrimitiveRendererSet {
   return {

package/src/engine/drawing/interaction.ts

@@ -1,7 +1,7 @@
 import type { DrawingObject, DrawingKind, DrawingAnchor, DrawingStyle } from '../../plugin'
 import type { DrawingChartAdapter } from '../../controllers/types'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
-import { computeLinearRegression } from './index'
+import { computeLinearRegression } from './linearRegression'
 
 export type DrawingToolId =
   | 'cursor'

package/src/engine/drawing/linearRegression.ts

@@ -0,0 +1,36 @@
+export function computeLinearRegression(values: number[]): { slope: number; intercept: number; stdDev: number } | null {
+  const n = values.length
+  if (n < 2) return null
+
+  let sumX = 0
+  let sumY = 0
+  let sumXY = 0
+  let sumXX = 0
+  for (let i = 0; i < n; i++) {
+    const x = i
+    const y = values[i]!
+    sumX += x
+    sumY += y
+    sumXY += x * y
+    sumXX += x * x
+  }
+
+  const denominator = n * sumXX - sumX * sumX
+  if (denominator === 0) return null
+
+  const slope = (n * sumXY - sumX * sumY) / denominator
+  const intercept = (sumY - slope * sumX) / n
+
+  let variance = 0
+  for (let i = 0; i < n; i++) {
+    const fitted = intercept + slope * i
+    const diff = values[i]! - fitted
+    variance += diff * diff
+  }
+
+  return {
+    slope,
+    intercept,
+    stdDev: Math.sqrt(variance / n),
+  }
+}

package/src/engine/drawing/plugin.ts

@@ -10,29 +10,76 @@ import type { PrimitiveRendererSet } from './index'
 import type { KLineData } from '../../types/price'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
 
+type SafeViewport = { scrollLeft: number; plotWidth: number; plotHeight: number }
+type ToScreenFn = (anchor: { index: number; price: number }) => { x: number; y: number }
+
+function resolveViewport(context: RenderContext, paneHeight: number): SafeViewport {
+  return context.viewport ?? {
+    scrollLeft: context.scrollLeft,
+    plotWidth: context.paneWidth,
+    plotHeight: paneHeight,
+  }
+}
+
+function createToScreen(
+  kWidth: number, kGap: number, dpr: number,
+  pane: RenderContext['pane'], viewport: SafeViewport
+): ToScreenFn {
+  const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
+  return (anchor) => {
+    if (!Number.isFinite(anchor.index) || anchor.index < 0) {
+      return { x: -kWidth, y: pane.yAxis.priceToY(anchor.price) }
+    }
+    const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
+    return { x, y: pane.yAxis.priceToY(anchor.price) }
+  }
+}
+
+function renderPrimitives(
+  ctx: CanvasRenderingContext2D,
+  primitives: DrawingPrimitive[],
+  renderers: PrimitiveRendererSet,
+  viewportClip: { left: number; top: number; right: number; bottom: number },
+  dpr: number
+): void {
+  for (const primitive of primitives) {
+    if (primitive.kind === 'point') {
+      renderers.point(ctx, primitive, dpr)
+      continue
+    }
+    if (primitive.kind === 'line') {
+      renderers.line(ctx, primitive, viewportClip, dpr)
+      continue
+    }
+    if (primitive.kind === 'area') {
+      renderers.area(ctx, primitive, dpr)
+      continue
+    }
+    renderers.text(ctx, primitive, dpr)
+  }
+}
+
 /**
- * 为选中的绘图推送锚点轴标签
- * 提取为独立函数供主插件和 overlay 插件共用
+ * 查找当前选中且在指定 pane 内的绘图
  */
-function pushSelectedDrawingLabels(
+function findSelectedAnchorDrawing(
   store: DrawingStore,
   definitions: DrawingDefinitionRegistry,
-  context: RenderContext,
   pane: RenderContext['pane'],
   seriesData: KLineData[],
   range: RenderContext['range'],
+  context: RenderContext,
   kWidth: number,
   kGap: number,
   dpr: number,
-  viewport: NonNullable<RenderContext['viewport']>,
-  startXPx: number,
-  unitPx: number
-): void {
+  viewport: SafeViewport,
+  toScreen: ToScreenFn
+) {
   const selectedId = store.getSelectedId()
-  if (!selectedId) return
+  if (!selectedId) return null
 
   const selectedDrawing = store.getAll().find(d => d.id === selectedId)
-  if (!selectedDrawing || !selectedDrawing.visible || selectedDrawing.paneId !== pane.id) return
+  if (!selectedDrawing || !selectedDrawing.visible || selectedDrawing.paneId !== pane.id) return null
 
   const geometry = definitions.compute(selectedDrawing, {
     pane,
@@ -47,65 +94,88 @@ function pushSelectedDrawingLabels(
     dpr,
     paneWidth: context.paneWidth,
     viewport,
-    toScreen(anchor) {
-      if (!Number.isFinite(anchor.index) || anchor.index < 0) {
-        return { x: -kWidth, y: pane.yAxis.priceToY(anchor.price) }
-      }
-      const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
-      return { x, y: pane.yAxis.priceToY(anchor.price) }
-    },
+    toScreen,
   })
+  if (!geometry) return null
 
-  if (!geometry) return
+  const allAnchors = [...selectedDrawing.anchors, ...(geometry.computedAnchors ?? [])]
+  if (allAnchors.length === 0) return null
 
-  // 只在价格 pane 时添加标签
-  if (pane.role !== 'price') return
+  return { drawing: selectedDrawing, allAnchors }
+}
 
-  // 合并用户锚点和计算锚点
-  const allAnchors = [...selectedDrawing.anchors, ...(geometry.computedAnchors ?? [])]
-  if (allAnchors.length === 0) return
+/**
+ * 单次遍历锚点，同时计算价格范围和索引范围，推送到 context
+ */
+function pushAnchorBands(
+  allAnchors: ReadonlyArray<{ price: number; index: number }>,
+  context: RenderContext,
+  pane: RenderContext['pane'],
+  style: DrawingStyle | undefined,
+  startXPx: number,
+  unitPx: number,
+  dpr: number
+): void {
+  if (allAnchors.length < 2) return
 
-  // 计算锚点价格范围，用于Y轴价格范围带
-  if (allAnchors.length >= 2) {
-    let minP = Infinity, maxP = -Infinity
-    for (const a of allAnchors) {
-      if (!Number.isFinite(a.price)) continue
+  let minP = Infinity, maxP = -Infinity
+  let minIdx = Infinity, maxIdx = -Infinity
+
+  for (const a of allAnchors) {
+    if (Number.isFinite(a.price)) {
       if (a.price < minP) minP = a.price
       if (a.price > maxP) maxP = a.price
     }
-    if (Number.isFinite(minP) && Number.isFinite(maxP) && minP !== maxP) {
-      if (!context.yAxisRanges) context.yAxisRanges = []
-      context.yAxisRanges.push({
-        topY: pane.yAxis.priceToY(maxP),
-        bottomY: pane.yAxis.priceToY(minP),
-        color: selectedDrawing.style?.stroke ?? '#2962ff',
-        opacity: 0.15,
-      })
-    }
-  }
-
-  // 计算锚点X坐标范围，用于X轴时间范围带
-  if (allAnchors.length >= 2) {
-    let minIdx = Infinity, maxIdx = -Infinity
-    for (const a of allAnchors) {
-      if (!Number.isFinite(a.index) || a.index < 0) continue
+    if (Number.isFinite(a.index) && a.index >= 0) {
       if (a.index < minIdx) minIdx = a.index
       if (a.index > maxIdx) maxIdx = a.index
     }
-    if (Number.isFinite(minIdx) && Number.isFinite(maxIdx) && minIdx !== maxIdx) {
-      if (!context.xAxisRanges) context.xAxisRanges = []
-      const leftX = (startXPx + minIdx * unitPx + (unitPx - 1) / 2) / dpr
-      const rightX = (startXPx + maxIdx * unitPx + (unitPx - 1) / 2) / dpr
-      context.xAxisRanges.push({
-        leftX,
-        rightX,
-        color: selectedDrawing.style?.stroke ?? '#2962ff',
-        opacity: 0.15,
-      })
-    }
   }
 
-  // 辅助函数：根据index获取时间戳
+  const strokeColor = style?.stroke ?? '#2962ff'
+
+  if (Number.isFinite(minP) && Number.isFinite(maxP) && minP !== maxP) {
+    if (!context.yAxisRanges) context.yAxisRanges = []
+    context.yAxisRanges.push({
+      topY: pane.yAxis.priceToY(maxP),
+      bottomY: pane.yAxis.priceToY(minP),
+      color: strokeColor,
+      opacity: 0.15,
+    })
+  }
+
+  if (Number.isFinite(minIdx) && Number.isFinite(maxIdx) && minIdx !== maxIdx) {
+    if (!context.xAxisRanges) context.xAxisRanges = []
+    const leftX = (startXPx + minIdx * unitPx + (unitPx - 1) / 2) / dpr
+    const rightX = (startXPx + maxIdx * unitPx + (unitPx - 1) / 2) / dpr
+    context.xAxisRanges.push({
+      leftX,
+      rightX,
+      color: strokeColor,
+      opacity: 0.15,
+    })
+  }
+}
+
+/**
+ * 遍历锚点，推送 Y 轴和 X 轴标签
+ */
+function pushAnchorLabels(
+  allAnchors: ReadonlyArray<{ index: number; price: number; time?: number | string }>,
+  context: RenderContext,
+  pane: RenderContext['pane'],
+  viewport: SafeViewport,
+  kWidth: number,
+  style: DrawingStyle | undefined,
+  seriesData: KLineData[],
+  startXPx: number,
+  unitPx: number,
+  dpr: number
+): void {
+  if (pane.role !== 'price') return
+
+  const strokeColor = style?.stroke ?? '#2962ff'
+
   const getTimestampForIndex = (idx: number): number | null => {
     if (idx >= 0 && idx < seriesData.length) {
       return seriesData[idx]?.timestamp ?? null
@@ -121,7 +191,6 @@ function pushSelectedDrawingLabels(
     return null
   }
 
-  // 推送每个锚点的标签
   for (const anchor of allAnchors) {
     if (!Number.isFinite(anchor.index) || !Number.isFinite(anchor.price)) continue
 
@@ -133,7 +202,6 @@ function pushSelectedDrawingLabels(
       return { x, y: pane.yAxis.priceToY(anchor.price) }
     })()
 
-    // Y轴标签
     if (screenPoint.y >= 0 && screenPoint.y <= pane.height) {
       if (!context.yAxisLabels) context.yAxisLabels = []
       context.yAxisLabels.push({
@@ -141,14 +209,13 @@ function pushSelectedDrawingLabels(
         price: anchor.price,
         y: screenPoint.y,
         style: {
-          bgColor: selectedDrawing.style?.stroke ?? '#2962ff',
-          borderColor: selectedDrawing.style?.stroke ?? '#2962ff',
+          bgColor: strokeColor,
+          borderColor: strokeColor,
           textColor: '#ffffff',
         }
       })
     }
 
-    // X轴标签
     if (screenPoint.x >= -kWidth && screenPoint.x <= viewport.plotWidth + kWidth) {
       const timestamp = anchor.time
         ? (typeof anchor.time === 'string' ? new Date(anchor.time).getTime() : anchor.time)
@@ -161,7 +228,7 @@ function pushSelectedDrawingLabels(
         timestamp,
         x: screenPoint.x + viewport.scrollLeft,
         style: {
-          bgColor: selectedDrawing.style?.stroke ?? '#2962ff',
+          bgColor: strokeColor,
           textColor: '#ffffff',
         }
       })
@@ -169,6 +236,32 @@ function pushSelectedDrawingLabels(
   }
 }
 
+/**
+ * 为选中的绘图推送锚点轴标签
+ * 提取为独立函数供主插件和 overlay 插件共用
+ */
+function pushSelectedDrawingLabels(
+  store: DrawingStore,
+  definitions: DrawingDefinitionRegistry,
+  context: RenderContext,
+  pane: RenderContext['pane'],
+  seriesData: KLineData[],
+  range: RenderContext['range'],
+  kWidth: number,
+  kGap: number,
+  dpr: number,
+  viewport: SafeViewport,
+  startXPx: number,
+  unitPx: number
+): void {
+  const toScreen = createToScreen(kWidth, kGap, dpr, pane, viewport)
+  const found = findSelectedAnchorDrawing(store, definitions, pane, seriesData, range, context, kWidth, kGap, dpr, viewport, toScreen)
+  if (!found) return
+
+  pushAnchorBands(found.allAnchors, context, pane, found.drawing.style, startXPx, unitPx, dpr)
+  pushAnchorLabels(found.allAnchors, context, pane, viewport, kWidth, found.drawing.style, seriesData, startXPx, unitPx, dpr)
+}
+
 /**
  * 创建绘图渲染器插件（主层，负责绘制 shape）
  * 注意：此插件不再推送轴标签，标签由 createDrawingLabelOverlayPlugin 负责
@@ -193,11 +286,7 @@ export function createDrawingRendererPlugin(options: {
     priority: 55,
     draw(context: RenderContext) {
       const { ctx, pane, data, range, dpr, paneWidth, kLinePositions, kLineCenters, kBarRects, kWidth, kGap } = context
-      const viewport = context.viewport ?? {
-        scrollLeft: context.scrollLeft,
-        plotWidth: paneWidth,
-        plotHeight: pane.height,
-      }
+      const viewport = resolveViewport(context, pane.height)
       const seriesData = data as KLineData[]
       const visibleData = seriesData.slice(range.start, range.end)
       const drawings = store.getVisibleByPane(pane.id)
@@ -209,6 +298,7 @@ export function createDrawingRendererPlugin(options: {
         right: viewport.plotWidth,
         bottom: pane.height,
       }
+      const toScreen = createToScreen(kWidth, kGap, dpr, pane, viewport)
 
       ctx.save()
       ctx.beginPath()
@@ -229,14 +319,7 @@ export function createDrawingRendererPlugin(options: {
           dpr,
           paneWidth,
           viewport,
-          toScreen(anchor) {
-            const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
-            if (!Number.isFinite(anchor.index) || anchor.index < 0) {
-              return { x: -kWidth, y: pane.yAxis.priceToY(anchor.price) }
-            }
-            const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
-            return { x, y: pane.yAxis.priceToY(anchor.price) }
-          },
+          toScreen,
         })
         if (!geometry) continue
 
@@ -245,22 +328,7 @@ export function createDrawingRendererPlugin(options: {
           ? geometry.primitives.map((p) => applySelectedStyle(p, drawing.style))
           : geometry.primitives
 
-        // 绘制形状（不再推送轴标签，标签由 overlay 插件负责）
-        for (const primitive of primitives) {
-          if (primitive.kind === 'point') {
-            renderers.point(ctx, primitive, dpr)
-            continue
-          }
-          if (primitive.kind === 'line') {
-            renderers.line(ctx, primitive, viewportClip, dpr)
-            continue
-          }
-          if (primitive.kind === 'area') {
-            renderers.area(ctx, primitive, dpr)
-            continue
-          }
-          renderers.text(ctx, primitive, dpr)
-        }
+        renderPrimitives(ctx, primitives, renderers, viewportClip, dpr)
       }
 
       ctx.restore()
@@ -297,15 +365,10 @@ export function createDrawingLabelOverlayPlugin(options: {
     priority: -24, // 比主绘图层稍晚，确保在其他 overlay 插件之后
     draw(context: RenderContext) {
       const { pane, data, range, dpr, paneWidth, kWidth, kGap } = context
-      const viewport = context.viewport ?? {
-        scrollLeft: context.scrollLeft,
-        plotWidth: paneWidth,
-        plotHeight: pane.height,
-      }
+      const viewport = resolveViewport(context, pane.height)
       const seriesData = data as KLineData[]
       const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
 
-      // 推送选中绘图的锚点标签
       pushSelectedDrawingLabels(
         store,
         definitions,

package/src/engine/indicators/__tests__/calculators.test.ts

@@ -6,16 +6,24 @@ import {
   calcENEData,
   calcRSIData,
   DEFAULT_MA_PERIODS,
+} from '../calculators'
+import {
   DEFAULT_BOLL_PERIOD,
   DEFAULT_BOLL_MULTIPLIER,
+} from '../state/bollState'
+import {
   DEFAULT_EXPMA_FAST_PERIOD,
   DEFAULT_EXPMA_SLOW_PERIOD,
+} from '../state/expmaState'
+import {
   DEFAULT_ENE_PERIOD,
   DEFAULT_ENE_DEVIATION,
+} from '../state/eneState'
+import {
   DEFAULT_RSI_PERIOD1,
   DEFAULT_RSI_PERIOD2,
   DEFAULT_RSI_PERIOD3,
-} from '../calculators'
+} from '../state/rsiState'
 import type { KLineData } from '@/types/price'
 
 /**