@363045841yyt/klinechart-core 0.8.5 → 0.8.7

package/src/engine/renderers/Indicator/shared/dashedLines.ts

@@ -0,0 +1,81 @@
+import { alignToPhysicalPixelCenter } from '../../../draw/pixelAlign'
+
+export function createDashedLineRenderer() {
+  let offscreenCanvas: HTMLCanvasElement | null = null
+  let offscreenCtx: CanvasRenderingContext2D | null = null
+  let cachedDashedLinesKey = ''
+
+  function getOffscreenCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
+    if (!offscreenCanvas || offscreenCanvas.width !== width || offscreenCanvas.height !== height) {
+      offscreenCanvas = document.createElement('canvas')
+      offscreenCanvas.width = width
+      offscreenCanvas.height = height
+      offscreenCtx = offscreenCanvas.getContext('2d')!
+      cachedDashedLinesKey = ''
+    }
+    return { canvas: offscreenCanvas, ctx: offscreenCtx! }
+  }
+
+  function buildKey(
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): string {
+    return `${paneWidth}|${paneHeight}|${displayMin.toFixed(4)}|${displayMax.toFixed(4)}|${dpr}`
+  }
+
+  function renderToOffscreen(
+    ctx: CanvasRenderingContext2D,
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): void {
+    const displayValueRange = displayMax - displayMin || 1
+    const y80 = alignToPhysicalPixelCenter(paneHeight - (80 - displayMin) / displayValueRange * paneHeight, dpr)
+    const y20 = alignToPhysicalPixelCenter(paneHeight - (20 - displayMin) / displayValueRange * paneHeight, dpr)
+
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    ctx.save()
+    ctx.scale(dpr, dpr)
+
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
+    ctx.lineWidth = 1
+    ctx.setLineDash([4, 4])
+    ctx.beginPath()
+    ctx.moveTo(0, y80)
+    ctx.lineTo(paneWidth, y80)
+    ctx.moveTo(0, y20)
+    ctx.lineTo(paneWidth, y20)
+    ctx.stroke()
+
+    ctx.restore()
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): void {
+    const key = buildKey(paneWidth, paneHeight, displayMin, displayMax, dpr)
+    if (cachedDashedLinesKey !== key) {
+      cachedDashedLinesKey = key
+      const { ctx: offCtx } = getOffscreenCanvas(
+        Math.ceil(paneWidth * dpr),
+        Math.ceil(paneHeight * dpr)
+      )
+      renderToOffscreen(offCtx, paneWidth, paneHeight, displayMin, displayMax, dpr)
+    }
+    if (offscreenCanvas) {
+      ctx.drawImage(offscreenCanvas, 0, 0, paneWidth, paneHeight)
+    }
+  }
+
+  return { render }
+}

package/src/engine/renderers/Indicator/shared/titleInfo.ts

@@ -0,0 +1,52 @@
+import type { PluginHost } from '../../../../plugin'
+import type { KLineData } from '../../../../types/price'
+import type { GetTitleInfoFn, TitleInfo } from '../../../indicators/indicatorMetadata'
+import { resolveThemeColors } from '../../../../tokens'
+
+interface SingleSeriesState {
+  timestamp: number
+  series: (number | undefined)[]
+  params?: Record<string, unknown>
+}
+
+interface SingleLineTitleInfoConfig {
+  createStateKey: (paneId: string) => string
+  name: string
+  label?: string
+  defaultPeriod?: number
+  getColor?: (colors: ReturnType<typeof resolveThemeColors>) => string
+  color?: string
+  getParams?: (stateParams: Record<string, unknown>) => number[]
+}
+
+export function createSingleLineTitleInfo(config: SingleLineTitleInfoConfig): GetTitleInfoFn {
+  const { createStateKey, name, label = name, defaultPeriod, getColor, color, getParams } = config
+
+  return (
+    _data: KLineData[],
+    index: number | null,
+    _params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    paneId: string,
+  ): TitleInfo | null => {
+    if (index === null) return null
+
+    const stateKey = createStateKey(paneId)
+    const state = pluginHost.getSharedState<SingleSeriesState>(stateKey)
+    if (!state) return null
+
+    const val = state.series[index]
+    if (val === undefined) return null
+
+    const resolvedColor = color ?? (getColor ? getColor(resolveThemeColors('light')) : 'inherit')
+    const resolvedParams = getParams
+      ? getParams(state.params as Record<string, unknown>)
+      : defaultPeriod !== undefined ? [(_params.period as number) ?? defaultPeriod] : []
+
+    return {
+      name,
+      params: resolvedParams,
+      values: [{ label, value: val, color: resolvedColor }],
+    }
+  }
+}

package/src/engine/renderers/Indicator/shared/webglBand.ts

@@ -0,0 +1,23 @@
+import type { RenderContext } from '../../../../plugin'
+
+export function getRgbaAlpha(color: string): number {
+  const match = color.match(/^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)$/i)
+  if (!match) return 1
+  const alpha = Number(match[1])
+  return Number.isFinite(alpha) ? alpha : 1
+}
+
+export function toOpaqueRgba(color: string): string {
+  return color.replace(/,\s*[\d.]+\s*\)$/i, ', 1)')
+}
+
+export function compositeLineSurface(
+  context: RenderContext,
+  surface: NonNullable<RenderContext['lineWebGLSurface']>,
+  alpha = 1
+): void {
+  surface.compositeTo(context.ctx, {
+    alpha,
+    imageSmoothingEnabled: false,
+  })
+}

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

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
+import { createDashedLineRenderer } from './shared/dashedLines'
 import type { STOCHRenderState } from '../../indicators/stochState'
 import { createSTOCHStateKey, EMPTY_STOCH_STATE } from '../../indicators/stochState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -14,7 +14,7 @@ import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
-export interface STOCHRendererOptions {
+interface STOCHRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getSTOCHStateKey(host: PluginHost | null, paneId: string): string | nul
 /**
  * 创建 STOCH 渲染器插件
  */
-export function createSTOCHRendererPlugin(options: STOCHRendererOptions = {}): RendererPluginWithHost {
+function createSTOCHRendererPlugin(options: STOCHRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -50,9 +50,7 @@ export function createSTOCHRendererPlugin(options: STOCHRendererOptions = {}): R
     let cachedDPoints: LinePoint[] = []
 
     // 离屏 Canvas 缓存虚线背景线 (80/20)
-    let offscreenCanvas: HTMLCanvasElement | null = null
-    let offscreenCtx: CanvasRenderingContext2D | null = null
-    let cachedDashedLinesKey = ''
+    const dashedLines = createDashedLineRenderer()
 
     function clearLineCache() {
         cachedKey = ''
@@ -60,56 +58,6 @@ export function createSTOCHRendererPlugin(options: STOCHRendererOptions = {}): R
         cachedDPoints = []
     }
 
-    function getOffscreenCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
-        if (!offscreenCanvas || offscreenCanvas.width !== width || offscreenCanvas.height !== height) {
-            offscreenCanvas = document.createElement('canvas')
-            offscreenCanvas.width = width
-            offscreenCanvas.height = height
-            offscreenCtx = offscreenCanvas.getContext('2d')!
-            cachedDashedLinesKey = ''
-        }
-        return { canvas: offscreenCanvas, ctx: offscreenCtx! }
-    }
-
-    function buildDashedLinesKey(
-        paneWidth: number,
-        paneHeight: number,
-        displayMin: number,
-        displayMax: number,
-        dpr: number
-    ): string {
-        return `${paneWidth}|${paneHeight}|${displayMin.toFixed(4)}|${displayMax.toFixed(4)}|${dpr}`
-    }
-
-    function renderDashedLinesToOffscreen(
-        ctx: CanvasRenderingContext2D,
-        paneWidth: number,
-        paneHeight: number,
-        displayMin: number,
-        displayMax: number,
-        dpr: number
-    ): void {
-        const displayValueRange = displayMax - displayMin || 1
-        const y80 = alignToPhysicalPixelCenter(paneHeight - (80 - displayMin) / displayValueRange * paneHeight, dpr)
-        const y20 = alignToPhysicalPixelCenter(paneHeight - (20 - displayMin) / displayValueRange * paneHeight, dpr)
-
-        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
-        ctx.save()
-        ctx.scale(dpr, dpr)
-
-        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
-        ctx.lineWidth = 1
-        ctx.setLineDash([4, 4])
-        ctx.beginPath()
-        ctx.moveTo(0, y80)
-        ctx.lineTo(paneWidth, y80)
-        ctx.moveTo(0, y20)
-        ctx.lineTo(paneWidth, y20)
-        ctx.stroke()
-
-        ctx.restore()
-    }
-
     function buildSTOCHCacheKey(
         range: { start: number; end: number },
         kLineCenters: number[],
@@ -175,20 +123,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
 
             const paneWidth = context.paneWidth
             const paneHeight = pane.height
-            const dashedLinesKey = buildDashedLinesKey(paneWidth, paneHeight, displayMin, displayMax, dpr)
-
-            if (cachedDashedLinesKey !== dashedLinesKey) {
-                cachedDashedLinesKey = dashedLinesKey
-                const { ctx: offCtx } = getOffscreenCanvas(
-                    Math.ceil(paneWidth * dpr),
-                    Math.ceil(paneHeight * dpr)
-                )
-                renderDashedLinesToOffscreen(offCtx, paneWidth, paneHeight, displayMin, displayMax, dpr)
-            }
-
-            if (offscreenCanvas) {
-                ctx.drawImage(offscreenCanvas, 0, 0, paneWidth, paneHeight)
-            }
+            dashedLines.render(ctx, paneWidth, paneHeight, displayMin, displayMax, dpr)
 
             // 确定绘制范围
             const drawStart = Math.max(range.start, params.n + params.m - 2)
@@ -319,7 +254,7 @@ function drawSTOCHLinesWithCanvas2D(
 /**
  * 获取 STOCH 标题信息（供 paneTitle 使用）
  */
-export function getSTOCHTitleInfo(
+function getSTOCHTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

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

@@ -27,7 +27,7 @@ function getStructureStateKey(host: PluginHost | null, paneId: string): string |
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createStructureRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createStructureRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_Structure' } = options
     let pluginHost: PluginHost | null = null
 
@@ -113,7 +113,7 @@ export function createStructureRendererPlugin(options: { paneId?: string } = {})
     }
 }
 
-export function getStructureTitleInfo(
+function getStructureTitleInfo(
   _data: KLineData[],
   index: number | null,
   params: Record<string, number | boolean | string>,

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

@@ -10,7 +10,7 @@ import type { IndicatorScheduler, SuperTrendSchedulerConfig } from '../../indica
 import { calcSuperTrendData } from '../../indicators/calculators'
 import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
-export interface SuperTrendRendererOptions {
+interface SuperTrendRendererOptions {
     paneId?: string
 }
 
@@ -28,7 +28,7 @@ function getSuperTrendStateKey(host: PluginHost | null, paneId: string): string
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createSuperTrendRendererPlugin(options: SuperTrendRendererOptions = {}): RendererPluginWithHost {
+function createSuperTrendRendererPlugin(options: SuperTrendRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub_SuperTrend' } = options
     let pluginHost: PluginHost | null = null
 
@@ -100,7 +100,7 @@ export function createSuperTrendRendererPlugin(options: SuperTrendRendererOption
     }
 }
 
-export function getSuperTrendTitleInfo(
+function getSuperTrendTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

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

@@ -1,10 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { TEMARenderState } from '../../indicators/temaState'
 import { createTEMAStateKey, EMPTY_TEMA_STATE } from '../../indicators/temaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, TEMASchedulerConfig } from '../../indicators/scheduler'
 import { calcTEMAData } from '../../indicators/calculators'
@@ -13,7 +13,7 @@ const TEMA_COLOR = '#d946ef'
 
 type Point = { x: number; y: number }
 
-export interface TEMARendererOptions {
+interface TEMARendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getTEMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createTEMARendererPlugin(options: TEMARendererOptions = {}): RendererPluginWithHost {
+function createTEMARendererPlugin(options: TEMARendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -122,28 +122,7 @@ export function createTEMARendererPlugin(options: TEMARendererOptions = {}): Ren
     }
 }
 
-export const getTEMATitleInfo: GetTitleInfoFn = (
-    _data: KLineData[],
-    index: number | null,
-    _params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): TitleInfo | null => {
-    if (index === null) return null
-
-    const stateKey = createTEMAStateKey(paneId)
-    const state = pluginHost?.getSharedState<TEMARenderState>(stateKey)
-    if (!state || state.visibleMin > state.visibleMax) return null
-
-    const value = state.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'TEMA',
-        params: [state.params.period],
-        values: [{ label: 'TEMA', value, color: '#d946ef' }],
-    }
-}
+const getTEMATitleInfo = createSingleLineTitleInfo({ createStateKey: createTEMAStateKey, name: 'TEMA', getParams: (p) => [p.period as number], color: TEMA_COLOR })
 
 @Indicator({
     name: 'tema',

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

@@ -17,7 +17,7 @@ const SIGNAL_COLOR = '#f59e0b'
 
 type Point = { x: number; y: number }
 
-export interface TRIXRendererOptions { paneId?: string }
+interface TRIXRendererOptions { paneId?: string }
 
 function getTRIXStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -33,7 +33,7 @@ function getTRIXStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createTRIXRendererPlugin(options: TRIXRendererOptions = {}): RendererPluginWithHost {
+function createTRIXRendererPlugin(options: TRIXRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub_TRIX' } = options
     let pluginHost: PluginHost | null = null
 
@@ -148,7 +148,7 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export function getTRIXTitleInfo(
+function getTRIXTitleInfo(
   _data: KLineData[],
   index: number | null,
   params: Record<string, number | boolean | string>,

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

@@ -3,8 +3,7 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { VMARenderState } from '../../indicators/vmaState'
 import { createVMAStateKey } from '../../indicators/vmaState'
 import { EMPTY_VMA_STATE } from '../../indicators/vmaState'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -29,7 +28,7 @@ function getVMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createVMARendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createVMARendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_VMA' } = options
     let pluginHost: PluginHost | null = null
 
@@ -113,25 +112,7 @@ export function createVMARendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
-export function getVMATitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    host: PluginHost,
-    paneId: string,
-): TitleInfo | null {
-    if (index === null) return null
-    const period = (params.period as number) ?? 5
-    const state = host.getSharedState<VMARenderState>(createVMAStateKey(paneId))
-    const value = state?.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'VMA',
-        params: [period],
-        values: [{ label: 'VMA', value, color: VMA_COLOR }],
-    }
-}
+const getVMATitleInfo = createSingleLineTitleInfo({ createStateKey: createVMAStateKey, name: 'VMA', defaultPeriod: 5, color: VMA_COLOR })
 
 @Indicator({
     name: 'vma',

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

@@ -31,7 +31,7 @@ function getVolumeProfileStateKey(host: PluginHost | null, paneId: string): stri
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createVolumeProfileRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createVolumeProfileRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_VolumeProfile' } = options
     let pluginHost: PluginHost | null = null
 
@@ -118,7 +118,7 @@ const VP_POC_COLOR = '#8b5cf6'
 const VP_VAH_COLOR = '#6366f1'
 const VP_VAL_COLOR = '#818cf8'
 
-export function getVolumeProfileTitleInfo(
+function getVolumeProfileTitleInfo(
   _data: KLineData[],
   index: number | null,
   params: Record<string, number | boolean | string>,

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

@@ -7,8 +7,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, VWAPSchedulerConfig } from '../../indicators/scheduler'
 import { calcVWAPData } from '../../indicators/calculators'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const VWAP_COLOR = '#ec4899'
 
@@ -28,7 +27,7 @@ function getVWAPStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createVWAPRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createVWAPRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_VWAP' } = options
     let pluginHost: PluginHost | null = null
 
@@ -111,24 +110,7 @@ export function createVWAPRendererPlugin(options: { paneId?: string } = {}): Ren
     }
 }
 
-export function getVWAPTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  _params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const state = host.getSharedState<VWAPRenderState>(createVWAPStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'VWAP',
-    params: [],
-    values: [{ label: 'VWAP', value, color: VWAP_COLOR }],
-  }
-}
+const getVWAPTitleInfo = createSingleLineTitleInfo({ createStateKey: createVWAPStateKey, name: 'VWAP', color: VWAP_COLOR })
 
 @Indicator({
     name: 'vwap',

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

@@ -1,10 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { WMARenderState } from '../../indicators/wmaState'
 import { createWMAStateKey, EMPTY_WMA_STATE } from '../../indicators/wmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, WMASchedulerConfig } from '../../indicators/scheduler'
 import { calcWMAData } from '../../indicators/calculators'
@@ -13,7 +13,7 @@ const WMA_COLOR = '#10b981'
 
 type Point = { x: number; y: number }
 
-export interface WMARendererOptions {
+interface WMARendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getWMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createWMARendererPlugin(options: WMARendererOptions = {}): RendererPluginWithHost {
+function createWMARendererPlugin(options: WMARendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -122,28 +122,7 @@ export function createWMARendererPlugin(options: WMARendererOptions = {}): Rende
     }
 }
 
-export const getWMATitleInfo: GetTitleInfoFn = (
-    _data: KLineData[],
-    index: number | null,
-    _params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): TitleInfo | null => {
-    if (index === null) return null
-
-    const stateKey = createWMAStateKey(paneId)
-    const state = pluginHost?.getSharedState<WMARenderState>(stateKey)
-    if (!state || state.visibleMin > state.visibleMax) return null
-
-    const value = state.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'WMA',
-        params: [state.params.period],
-        values: [{ label: 'WMA', value, color: '#10b981' }],
-    }
-}
+const getWMATitleInfo = createSingleLineTitleInfo({ createStateKey: createWMAStateKey, name: 'WMA', getParams: (p) => [p.period as number], color: WMA_COLOR })
 
 @Indicator({
     name: 'wma',

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

@@ -10,11 +10,11 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, WMSRSchedulerConfig } from '../../indicators/scheduler'
 import { createWmsrScaleRendererPlugin } from './scale/wmsr_scale'
 import { calcWMSRData } from '../../indicators/calculators'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
-export interface WMSRRendererOptions {
+interface WMSRRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getWMSRStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 WMSR 渲染器插件
  */
-export function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): RendererPluginWithHost {
+function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -290,33 +290,12 @@ function drawWMSRLineWithCanvas2D(
     ctx.restore()
 }
 
-/**
- * 获取 WMSR 标题信息（供 paneTitle 使用）
- */
-export function getWMSRTitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    if (index === null) return null
-    const period = (params.period as number) ?? 14
-    const colors = resolveThemeColors('light')
-    const state = pluginHost.getSharedState<WMSRRenderState>(createWMSRStateKey(paneId))
-    if (!state) return null
-
-    const wmsr = state.series[index]
-    if (wmsr === undefined) return null
-
-    return {
-        name: 'WMSR',
-        params: [period],
-        values: [
-            { label: 'WMSR', value: wmsr, color: colors.wmsr.wmsr },
-        ],
-    }
-}
+const getWMSRTitleInfo = createSingleLineTitleInfo({
+    createStateKey: createWMSRStateKey,
+    name: 'WMSR',
+    defaultPeriod: 14,
+    getColor: (colors) => colors.wmsr.wmsr,
+})
 
 @Indicator({
     name: 'wmsr',

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

@@ -23,7 +23,7 @@ function getZonesStateKey(host: PluginHost | null, paneId: string): string | nul
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createZonesRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createZonesRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -90,7 +90,7 @@ export function createZonesRendererPlugin(options: { paneId?: string } = {}): Re
     }
 }
 
-export const getZonesTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+const getZonesTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
     if (index === null) return null
 
     const stateKey = createZonesStateKey(paneId)