@363045841yyt/klinechart-core 0.7.3

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

@@ -0,0 +1,141 @@
+import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import { getColors } from '../../theme/colors'
+import { getFont, setCanvasFont } from '../../theme/fonts'
+import type { MACDRenderState } from '../../indicators/macdState'
+import { createMACDStateKey } from '../../indicators/macdState'
+
+const textWidthCache = new Map<string, number>()
+const TEXT_WIDTH_CACHE_LIMIT = 256
+
+function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
+    const key = `${ctx.font}\n${text}`
+    const cached = textWidthCache.get(key)
+    if (cached !== undefined) {
+        return cached
+    }
+
+    const width = ctx.measureText(text).width
+    if (textWidthCache.size >= TEXT_WIDTH_CACHE_LIMIT) {
+        textWidthCache.clear()
+    }
+    textWidthCache.set(key, width)
+    return width
+}
+
+export interface MACDLegendOptions {
+    /** Y 轴内边距（与主图保持一致） */
+    yPaddingPx?: number
+    /** 目标 pane ID（默认 'sub'） */
+    paneId?: string
+}
+
+/**
+ * 创建 MACD 图例渲染器插件
+ * 从 StateStore 读取 MACD 状态，不再在 draw 时计算
+ */
+export function createMACDLegendRendererPlugin(options: MACDLegendOptions = {}): RendererPluginWithHost {
+    const yPaddingPx = options.yPaddingPx ?? 0
+    const paneId = options.paneId ?? 'sub'
+
+    let fastPeriod = 12
+    let slowPeriod = 26
+    let signalPeriod = 9
+
+    let pluginHost: PluginHost | null = null
+    const stateKey = createMACDStateKey(paneId)
+
+    return {
+        name: `macdLegend_${paneId}`,
+        version: '2.1.0',
+        description: 'MACD 图例渲染器（StateStore 版）',
+        debugName: 'MACD 图例',
+        paneId,
+        priority: RENDERER_PRIORITY.FOREGROUND,
+
+        onInstall(host: PluginHost): void {
+            pluginHost = host
+        },
+
+        draw(context: RenderContext) {
+            const { ctx, range } = context
+            const colors = getColors(context.theme)
+
+            // 从 StateStore 读取 MACD 状态
+            const state = pluginHost?.getSharedState<MACDRenderState>(stateKey)
+            if (!state || state.visibleMin > state.visibleMax) return
+
+            // 获取最新值
+            let macdValue: { dif: number; dea: number; macd: number } | null = null
+
+            // 优先使用 latestValues（scheduler 已计算好）
+            if (state.latestValues) {
+                macdValue = state.latestValues
+            } else {
+                // 回退：从 series 读取最后一个可见点
+                const lastIndex = Math.min(range.end - 1, state.series.length - 1)
+                const point = state.series[lastIndex]
+                if (point) {
+                    macdValue = {
+                        dif: point.dif,
+                        dea: point.dea,
+                        macd: point.macd,
+                    }
+                }
+            }
+
+            if (!macdValue) return
+
+            // 从 state.params 读取当前参数
+            const params = state.params
+            fastPeriod = params.fastPeriod
+            slowPeriod = params.slowPeriod
+            signalPeriod = params.signalPeriod
+
+            const fontSize = 11
+            const gap = 12
+            let x = 12
+            const y = yPaddingPx + fontSize
+
+            ctx.save()
+            setCanvasFont(ctx, getFont(fontSize))
+            ctx.textAlign = 'left'
+            ctx.textBaseline = 'top'
+
+            const paramText = `MACD(${fastPeriod},${slowPeriod},${signalPeriod})`
+            ctx.fillStyle = colors.TEXT.TERTIARY
+            ctx.fillText(paramText, x, y)
+            x += measureTextWidth(ctx, paramText) + gap
+
+            const difText = `DIF:${macdValue.dif.toFixed(2)}`
+            ctx.fillStyle = colors.MACD.DIF
+            ctx.fillText(difText, x, y)
+            x += measureTextWidth(ctx, difText) + gap
+
+            const deaText = `DEA:${macdValue.dea.toFixed(2)}`
+            ctx.fillStyle = colors.MACD.DEA
+            ctx.fillText(deaText, x, y)
+            x += measureTextWidth(ctx, deaText) + gap
+
+            const macdText = `MACD:${macdValue.macd.toFixed(2)}`
+            ctx.fillStyle = macdValue.macd >= 0 ? colors.MACD.BAR_UP : colors.MACD.BAR_DOWN
+            ctx.fillText(macdText, x, y)
+
+            ctx.restore()
+        },
+
+        getConfig() {
+            return {
+                fastPeriod,
+                slowPeriod,
+                signalPeriod,
+            }
+        },
+
+        setConfig(newConfig: Record<string, unknown>) {
+            if (typeof newConfig.fastPeriod === 'number') fastPeriod = newConfig.fastPeriod
+            if (typeof newConfig.slowPeriod === 'number') slowPeriod = newConfig.slowPeriod
+            if (typeof newConfig.signalPeriod === 'number') signalPeriod = newConfig.signalPeriod
+        },
+    }
+}

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

@@ -0,0 +1,272 @@
+import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
+import { MA_STATE_KEY, type MARenderState } from '../../indicators/maState'
+import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
+import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
+import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
+import { getColors } from '../../theme/colors'
+import { getFont, setCanvasFont } from '../../theme/fonts'
+
+const textWidthCache = new Map<string, number>()
+const TEXT_WIDTH_CACHE_LIMIT = 512
+
+function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
+  const key = `${ctx.font}\n${text}`
+  const cached = textWidthCache.get(key)
+  if (cached !== undefined) {
+    return cached
+  }
+
+  const width = ctx.measureText(text).width
+  if (textWidthCache.size >= TEXT_WIDTH_CACHE_LIMIT) {
+    textWidthCache.clear()
+  }
+  textWidthCache.set(key, width)
+  return width
+}
+
+/** 指标行数据 */
+interface IndicatorRow {
+  enabled: boolean
+  params: Record<string, unknown>
+}
+
+/** 渲染器配置 */
+interface MainIndicatorLegendConfig {
+  yPaddingPx: number
+  indicators: Record<string, IndicatorRow>
+}
+
+/**
+ * 创建主图指标图例渲染器插件
+ *
+ * 统一管理 MA、BOLL 等主图指标的图例显示，支持多行排列
+ * MA 数据从 StateStore 读取（与 MA 线渲染器共享同一数据源）
+ */
+export function createMainIndicatorLegendRendererPlugin(options: {
+  yPaddingPx: number
+}): RendererPluginWithHost {
+  const config: MainIndicatorLegendConfig = {
+    yPaddingPx: options.yPaddingPx,
+    indicators: {
+      MA: { enabled: true, params: {} },
+      BOLL: { enabled: false, params: { period: 20, multiplier: 2 } },
+      EXPMA: { enabled: false, params: { fastPeriod: 12, slowPeriod: 50 } },
+      ENE: { enabled: false, params: { period: 10, deviation: 11 } },
+    },
+  }
+
+  let pluginHost: PluginHost | null = null
+
+  return {
+    name: 'mainIndicatorLegend',
+    version: '2.1.0',
+    description: '主图指标图例渲染器（MA 数据来自 StateStore）',
+    debugName: '主图指标图例',
+    paneId: 'main',
+    priority: RENDERER_PRIORITY.FOREGROUND,
+    layer: 'overlay',
+    enabled: true,
+
+    onInstall(host: PluginHost): void {
+      pluginHost = host
+    },
+
+    getDeclaredNamespaces(): string[] {
+      return [MA_STATE_KEY, BOLL_STATE_KEY, EXPMA_STATE_KEY, ENE_STATE_KEY]
+    },
+
+    draw(context: RenderContext) {
+      const { overlayCtx, data, range, crosshairIndex } = context
+      const klineData = data as KLineData[]
+      const colors = getColors(context.theme)
+      if (!klineData.length || !overlayCtx) return
+
+      const fontSize = 12
+      const lineHeight = fontSize + 6
+      const legendX = 12
+      const gap = 10
+
+      overlayCtx.save()
+      setCanvasFont(overlayCtx, getFont(fontSize))
+      overlayCtx.textAlign = 'left'
+
+      const targetIndex = crosshairIndex ?? Math.min(range.end - 1, klineData.length - 1)
+      const rows: Array<{ draw: (rowIndex: number) => void }> = []
+
+      const maIndicator = config.indicators.MA
+      if (maIndicator?.enabled) {
+        rows.push({
+          draw: (rowIndex: number) => {
+            const items: Array<{ label: string; color: string; value?: number }> = []
+            const state = pluginHost?.getSharedState<MARenderState>(MA_STATE_KEY)
+
+            if (state && state.visibleMin <= state.visibleMax) {
+              for (const period of state.enabledPeriods) {
+                const colorKey = `MA${period}` as keyof typeof colors.MA
+                const series = state.series[period]
+                const value = series?.[targetIndex]
+
+                items.push({
+                  label: `MA${period}`,
+                  color: colors.MA[colorKey] || colors.MA.MA5,
+                  value: value,
+                })
+              }
+            }
+
+            if (items.length > 0) {
+              let x = legendX
+              const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
+
+              overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+              overlayCtx.fillText('MA', x, y)
+              x += measureTextWidth(overlayCtx, 'MA') + gap
+
+              for (const it of items) {
+                const valText = typeof it.value === 'number' ? ` ${it.value.toFixed(2)}` : ''
+                const text = `${it.label}${valText}`
+                overlayCtx.fillStyle = it.color
+                overlayCtx.fillText(text, x, y)
+                x += measureTextWidth(overlayCtx, text) + gap
+              }
+            }
+          }
+        })
+      }
+
+      const bollIndicator = config.indicators.BOLL
+      if (bollIndicator?.enabled) {
+        rows.push({
+          draw: (rowIndex: number) => {
+            const bollState = pluginHost?.getSharedState<BOLLRenderState>(BOLL_STATE_KEY)
+            const boll = bollState?.series[targetIndex]
+            const period = bollState?.params.period ?? 20
+            const multiplier = bollState?.params.multiplier ?? 2
+
+            let x = legendX
+            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
+            const titleText = `BOLL(${period},${multiplier})`
+
+            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillText(titleText, x, y)
+            x += measureTextWidth(overlayCtx, titleText) + gap
+
+            if (boll) {
+              const upperText = `上轨:${boll.upper.toFixed(2)}`
+              overlayCtx.fillStyle = colors.BOLL.UPPER
+              overlayCtx.fillText(upperText, x, y)
+              x += measureTextWidth(overlayCtx, upperText) + gap
+
+              const middleText = `中轨:${boll.middle.toFixed(2)}`
+              overlayCtx.fillStyle = colors.BOLL.MIDDLE
+              overlayCtx.fillText(middleText, x, y)
+              x += measureTextWidth(overlayCtx, middleText) + gap
+
+              const lowerText = `下轨:${boll.lower.toFixed(2)}`
+              overlayCtx.fillStyle = colors.BOLL.LOWER
+              overlayCtx.fillText(lowerText, x, y)
+            }
+          }
+        })
+      }
+
+      const expmaIndicator = config.indicators.EXPMA
+      if (expmaIndicator?.enabled) {
+        rows.push({
+          draw: (rowIndex: number) => {
+            const expmaState = pluginHost?.getSharedState<EXPMARenderState>(EXPMA_STATE_KEY)
+            const expma = expmaState?.series[targetIndex]
+            const fastPeriod = expmaState?.params.fastPeriod ?? 12
+            const slowPeriod = expmaState?.params.slowPeriod ?? 50
+
+            let x = legendX
+            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
+            const titleText = `EXPMA(${fastPeriod},${slowPeriod})`
+
+            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillText(titleText, x, y)
+            x += measureTextWidth(overlayCtx, titleText) + gap
+
+            if (expma) {
+              const fastText = `快:${expma.fast.toFixed(2)}`
+              overlayCtx.fillStyle = colors.EXPMA.FAST
+              overlayCtx.fillText(fastText, x, y)
+              x += measureTextWidth(overlayCtx, fastText) + gap
+
+              const slowText = `慢:${expma.slow.toFixed(2)}`
+              overlayCtx.fillStyle = colors.EXPMA.SLOW
+              overlayCtx.fillText(slowText, x, y)
+            }
+          }
+        })
+      }
+
+      const eneIndicator = config.indicators.ENE
+      if (eneIndicator?.enabled) {
+        rows.push({
+          draw: (rowIndex: number) => {
+            const eneState = pluginHost?.getSharedState<ENERenderState>(ENE_STATE_KEY)
+            const ene = eneState?.series[targetIndex]
+            const period = eneState?.params.period ?? 10
+            const deviation = eneState?.params.deviation ?? 11
+
+            let x = legendX
+            const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
+            const titleText = `ENE(${period},${deviation})`
+
+            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillText(titleText, x, y)
+            x += measureTextWidth(overlayCtx, titleText) + gap
+
+            if (ene) {
+              const upperText = `上轨:${ene.upper.toFixed(2)}`
+              overlayCtx.fillStyle = colors.ENE.UPPER
+              overlayCtx.fillText(upperText, x, y)
+              x += measureTextWidth(overlayCtx, upperText) + gap
+
+              const middleText = `中轨:${ene.middle.toFixed(2)}`
+              overlayCtx.fillStyle = colors.ENE.MIDDLE
+              overlayCtx.fillText(middleText, x, y)
+              x += measureTextWidth(overlayCtx, middleText) + gap
+
+              const lowerText = `下轨:${ene.lower.toFixed(2)}`
+              overlayCtx.fillStyle = colors.ENE.LOWER
+              overlayCtx.fillText(lowerText, x, y)
+            }
+          }
+        })
+      }
+
+      rows.forEach((row, index) => row.draw(index))
+      overlayCtx.restore()
+    },
+
+    getConfig() {
+      return {
+        yPaddingPx: config.yPaddingPx,
+        indicators: { ...config.indicators },
+      }
+    },
+
+    setConfig(newConfig: Record<string, unknown>) {
+      if (typeof newConfig.yPaddingPx === 'number') {
+        config.yPaddingPx = newConfig.yPaddingPx
+      }
+      if (newConfig.indicators && typeof newConfig.indicators === 'object') {
+        for (const [id, row] of Object.entries(newConfig.indicators) as [string, IndicatorRow][]) {
+          if (!config.indicators[id]) {
+            config.indicators[id] = { enabled: false, params: {} }
+          }
+          if (row.enabled !== undefined) {
+            config.indicators[id].enabled = row.enabled
+          }
+          if (row.params) {
+            config.indicators[id].params = row.params
+          }
+        }
+      }
+    },
+  }
+}

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

@@ -0,0 +1,142 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { MFIRenderState } from '../../indicators/mfiState'
+import { createMFIStateKey } from '../../indicators/mfiState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const MFI_COLOR = '#fb923c'
+
+type LinePoint = { x: number; y: number }
+
+function getMFIStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn(`[MFIRenderer] Scheduler not available via service locator`)
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('mfi')
+    if (!meta) {
+        console.warn(`[MFIRenderer] Indicator metadata for 'mfi' not found, skip rendering`)
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createMFIRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+    const { paneId = 'sub_MFI' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getMFIStateKey(pluginHost, paneId)
+    }
+    return {
+        name: `mfi_${paneId}`,
+        version: '1.1.0',
+        description: 'MFI 资金流强弱渲染器（WebGL + Canvas2D 回退，80/20 超买超卖线）',
+        debugName: 'MFI',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+        onInstall(host) { pluginHost = host },
+        getDeclaredNamespaces() { const key = resolveKey(); return key ? [key] : [] },
+        draw(context: RenderContext) {
+            const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<MFIRenderState>(stateKey)
+            if (!state || !state.params.showMFI || state.visibleMin > state.visibleMax) return
+
+            const { valueMin, valueMax, series } = state
+            const displayRange = pane.yAxis.getDisplayRange({ minPrice: valueMin, maxPrice: valueMax })
+            const displayMin = displayRange.minPrice
+            const displayMax = displayRange.maxPrice
+            const displayValueRange = displayMax - displayMin || 1
+            const paneH = pane.height
+            const invRange = paneH / displayValueRange
+            const rangeStart = range.start
+            const toY = (v: number) => paneH - (v - displayMin) * invRange
+
+            // 80 / 20 reference lines
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.strokeStyle = 'rgba(239, 68, 68, 0.3)'
+            ctx.lineWidth = 1
+            ctx.setLineDash([4, 4])
+            ctx.beginPath()
+            ctx.moveTo(scrollLeft, toY(80))
+            ctx.lineTo(scrollLeft + context.paneWidth, toY(80))
+            ctx.stroke()
+            ctx.strokeStyle = 'rgba(34, 197, 94, 0.3)'
+            ctx.beginPath()
+            ctx.moveTo(scrollLeft, toY(20))
+            ctx.lineTo(scrollLeft + context.paneWidth, toY(20))
+            ctx.stroke()
+            ctx.setLineDash([])
+            ctx.restore()
+
+            const drawEnd = Math.min(range.end, series.length)
+            const points: LinePoint[] = []
+            for (let i = range.start; i < drawEnd; i++) {
+                const value = series[i]
+                if (value === undefined) continue
+                const centerX = kLineCenters[i - rangeStart]
+                if (centerX === undefined) continue
+                points.push({ x: centerX, y: toY(value) })
+            }
+
+            if (points.length < 2) return
+
+            const enableWebGL = context.settings?.enableWebGLRendering !== false
+            let usedWebGL = false
+            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+                const allOk = lineWebGLSurface.drawLineStrips(
+                    [{ points, width: 1, color: MFI_COLOR }],
+                    scrollLeft,
+                )
+                if (allOk) {
+                    usedWebGL = true
+                    lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                }
+            }
+
+            if (usedWebGL) return
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.strokeStyle = MFI_COLOR
+            ctx.lineWidth = 1
+            ctx.lineJoin = 'round'
+            ctx.lineCap = 'round'
+            ctx.beginPath()
+            ctx.moveTo(points[0]!.x, points[0]!.y)
+            for (let i = 1; i < points.length; i++) {
+                ctx.lineTo(points[i]!.x, points[i]!.y)
+            }
+            ctx.stroke()
+            ctx.restore()
+        },
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<MFIRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+        setConfig() {},
+    }
+}
+
+@Indicator({
+    name: 'mfi',
+    displayName: 'MFI',
+    category: 'volume',
+    stateKey: createMFIStateKey,
+    defaultPaneId: 'sub_MFI',
+    paneIdField: 'mfiPaneId',
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createMFIStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class MFIIndicatorDefinition {
+    static rendererFactory = createMFIRendererPlugin
+}