@363045841yyt/klinechart-core 0.7.3

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

@@ -0,0 +1,316 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import { getColors, type ChartTheme } from '../../theme/colors'
+import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
+import type { FASTKRenderState } from '../../indicators/fastkState'
+import { createFASTKStateKey } from '../../indicators/fastkState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+type LinePoint = { x: number; y: number }
+
+export interface FASTKRendererOptions {
+    /** 目标 pane ID（默认 'sub'） */
+    paneId?: string
+}
+
+function getFASTKStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[FASTKRenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('fastk')
+    if (!meta) {
+        console.warn("[FASTKRenderer] Indicator metadata for 'fastk' not found, skip rendering")
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+/**
+ * 创建 FASTK 渲染器插件
+ */
+export function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'sub' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getFASTKStateKey(pluginHost, paneId)
+    }
+
+    // 线条点缓存
+    let cachedKey = ''
+    let cachedFASTKPoints: LinePoint[] = []
+
+    // 离屏 Canvas 缓存虚线背景线 (80/20)
+    let offscreenCanvas: HTMLCanvasElement | null = null
+    let offscreenCtx: CanvasRenderingContext2D | null = null
+    let cachedDashedLinesKey = ''
+
+    function clearLineCache() {
+        cachedKey = ''
+        cachedFASTKPoints = []
+    }
+
+    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 buildFASTKCacheKey(
+        range: { start: number; end: number },
+        kLineCenters: number[],
+        pane: RenderContext['pane'],
+        params: FASTKRenderState['params'],
+        stateTimestamp: number
+    ): string {
+        const dr = pane.yAxis.getDisplayRange()
+        return [
+            stateTimestamp,
+            range.start,
+            range.end,
+            kLineCenters.length,
+            kLineCenters[0]?.toFixed(2) ?? 'n',
+            kLineCenters[kLineCenters.length - 1]?.toFixed(2) ?? 'n',
+            dr.maxPrice.toFixed(6),
+            dr.minPrice.toFixed(6),
+            pane.yAxis.getPriceOffset().toFixed(6),
+            pane.yAxis.getScaleType(),
+            pane.height.toFixed(2),
+            params.showFASTK,
+            params.period,
+        ].join('|')
+    }
+
+    return {
+        name: `fastk_${paneId}`,
+        version: '2.1.0',
+        description: 'FASTK 快速随机指标渲染器（WebGL + Canvas2D 回退）',
+        debugName: 'FASTK',
+        paneId: paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
+        getDeclaredNamespaces() {
+            const key = resolveKey()
+            return key ? [key] : []
+        },
+
+        draw(context: RenderContext) {
+const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
+            const colors = getColors(context.theme)
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<FASTKRenderState>(stateKey)
+            if (!state || state.visibleMin > state.visibleMax) {
+                clearLineCache()
+                return
+            }
+
+            const { valueMin, valueMax, params, 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 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)
+            }
+
+            // 确定绘制范围
+            const drawStart = Math.max(range.start, params.period - 1)
+            const drawEnd = Math.min(range.end, series.length)
+
+            // 更新线条缓存
+            const cacheKey = buildFASTKCacheKey(range, kLineCenters, pane, params, state.timestamp)
+            if (cachedKey !== cacheKey) {
+                cachedKey = cacheKey
+
+                const paneH = paneHeight
+                const invRange = paneH / displayValueRange
+                const rangeStart = range.start
+
+                if (params.showFASTK) {
+                    const points: LinePoint[] = []
+                    for (let i = drawStart; 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: paneH - (value - displayMin) * invRange })
+                    }
+                    cachedFASTKPoints = points
+                } else {
+                    cachedFASTKPoints = []
+                }
+            }
+
+            // 绘制 FASTK 线（WebGL 优先，Canvas2D 回退）
+            const enableWebGL = context.settings?.enableWebGLRendering !== false
+            let usedWebGL = false
+            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+                if (params.showFASTK && cachedFASTKPoints.length >= 2) {
+                    const ok = lineWebGLSurface.drawLineStrips(
+                        [{ points: cachedFASTKPoints, width: 1, color: colors.KDJ.K }],
+                        scrollLeft
+                    )
+                    if (ok) {
+                        usedWebGL = true
+                        lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                    }
+                }
+            }
+
+            if (!usedWebGL) {
+                drawFASTKLineWithCanvas2D(ctx, scrollLeft, cachedFASTKPoints, params, colors)
+            }
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<FASTKRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+
+        setConfig() {
+            // no-op: 配置通过 scheduler.updateFASTKConfig() 更新
+        },
+    }
+}
+
+/**
+ * 使用 Canvas 2D 绘制 FASTK 线（WebGL 回退）
+ */
+function drawFASTKLineWithCanvas2D(
+    ctx: CanvasRenderingContext2D,
+    scrollLeft: number,
+    fastkPoints: LinePoint[],
+    params: { showFASTK: boolean },
+    colors: { KDJ: { K: string } }
+): void {
+    if (!params.showFASTK || fastkPoints.length < 2) return
+
+    ctx.save()
+    ctx.translate(-scrollLeft, 0)
+    ctx.strokeStyle = colors.KDJ.K
+    ctx.lineWidth = 1
+    ctx.lineJoin = 'round'
+    ctx.lineCap = 'round'
+    ctx.beginPath()
+    ctx.moveTo(fastkPoints[0]!.x, fastkPoints[0]!.y)
+    for (let i = 1; i < fastkPoints.length; i++) {
+        const point = fastkPoints[i]!
+        ctx.lineTo(point.x, point.y)
+    }
+    ctx.stroke()
+    ctx.restore()
+}
+
+/**
+ * 获取 FASTK 标题信息（供 paneTitle 使用）
+ */
+export function getFASTKTitleInfo(
+    index: number,
+    period: number,
+    pluginHost: PluginHost,
+    paneId: string = 'sub_FASTK',
+    theme: ChartTheme = 'light'
+): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
+    const colors = getColors(theme)
+    const state = pluginHost.getSharedState<FASTKRenderState>(createFASTKStateKey(paneId))
+    if (!state) return null
+
+    const fastk = state.series[index]
+    if (fastk === undefined) return null
+
+    return {
+        name: 'FASTK',
+        params: [period],
+        values: [
+            { label: 'FASTK', value: fastk, color: colors.KDJ.K },
+        ],
+    }
+}
+
+@Indicator({
+    name: 'fastk',
+    displayName: 'FASTK',
+    category: 'oscillator',
+    stateKey: createFASTKStateKey,
+    defaultPaneId: 'sub_FASTK',
+    paneIdField: 'fastkPaneId',
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createFASTKStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class FASTKIndicatorDefinition {
+    static rendererFactory = createFASTKRendererPlugin
+}

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

@@ -0,0 +1,141 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { FibRenderState } from '../../indicators/fibState'
+import { createFibStateKey } from '../../indicators/fibState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const FIB_COLORS = {
+    high: '#94a3b8',
+    low: '#94a3b8',
+    l236: '#fbbf24',
+    l382: '#f59e0b',
+    l500: '#d97706',
+    l618: '#dc2626',
+    l786: '#7c2d12',
+}
+
+type Point = { x: number; y: number }
+
+function getFibStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[FibRenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('fib')
+    if (!meta) {
+        console.warn('[FibRenderer] Indicator metadata for \'fib\' not found, skip rendering')
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createFibRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+    const { paneId = 'main' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getFibStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `fib_${paneId}`,
+        version: '1.1.0',
+        description: '斐波那契回撤线渲染器（WebGL + Canvas2D 回退）',
+        debugName: 'Fib',
+        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<FibRenderState>(stateKey)
+            if (!state || !state.params.showLevels || state.visibleMin > state.visibleMax) return
+
+            const { series } = state
+            const toY = (v: number) => pane.yAxis.priceToY(v)
+            const rangeStart = range.start
+
+            const collectors: Record<string, Point[]> = { high: [], low: [], l236: [], l382: [], l500: [], l618: [], l786: [] }
+            const drawEnd = Math.min(range.end, series.length)
+            for (let i = range.start; i < drawEnd; i++) {
+                const pt = series[i]
+                if (!pt) continue
+                const centerX = kLineCenters[i - rangeStart]
+                if (centerX === undefined) continue
+                collectors.high!.push({ x: centerX, y: toY(pt.high) })
+                collectors.low!.push({ x: centerX, y: toY(pt.low) })
+                collectors.l236!.push({ x: centerX, y: toY(pt.level236) })
+                collectors.l382!.push({ x: centerX, y: toY(pt.level382) })
+                collectors.l500!.push({ x: centerX, y: toY(pt.level500) })
+                collectors.l618!.push({ x: centerX, y: toY(pt.level618) })
+                collectors.l786!.push({ x: centerX, y: toY(pt.level786) })
+            }
+
+            const lines: Array<{ points: Point[]; width: number; color: string }> = []
+            for (const [key, pts] of Object.entries(collectors)) {
+                if (pts.length >= 2) {
+                    lines.push({ points: pts, width: 1, color: FIB_COLORS[key as keyof typeof FIB_COLORS] })
+                }
+            }
+
+            const enableWebGL = context.settings?.enableWebGLRendering !== false
+            let usedWebGL = false
+            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+                const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
+                if (allOk) {
+                    usedWebGL = true
+                    lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                }
+            }
+
+            if (usedWebGL) return
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.lineWidth = 1
+            for (const [key, pts] of Object.entries(collectors)) {
+                drawLine(ctx, pts, FIB_COLORS[key as keyof typeof FIB_COLORS])
+            }
+            ctx.restore()
+        },
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            return pluginHost?.getSharedState<FibRenderState>(stateKey)?.params ?? {}
+        },
+        setConfig() {},
+    }
+}
+
+function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): void {
+    if (pts.length < 2) return
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.moveTo(pts[0]!.x, pts[0]!.y)
+    for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i]!.x, pts[i]!.y)
+    ctx.stroke()
+}
+
+@Indicator({
+    name: 'fib',
+    displayName: 'Fib',
+    category: 'main',
+    stateKey: createFibStateKey,
+    defaultPaneId: 'main',
+    paneIdField: 'fibPaneId',
+    allowMainPane: true,
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createFibStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class FibDefinition {
+    static rendererFactory = createFibRendererPlugin
+}

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

@@ -0,0 +1,136 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { HMARenderState } from '../../indicators/hmaState'
+import { createHMAStateKey } from '../../indicators/hmaState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const HMA_COLOR = '#f43f5e'
+
+type Point = { x: number; y: number }
+
+export interface HMARendererOptions {
+    paneId?: string
+}
+
+function getHMAStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[HMARenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('hma')
+    if (!meta) {
+        console.warn('[HMARenderer] Indicator metadata for \'hma\' not found, skip rendering')
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createHMARendererPlugin(options: HMARendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'main' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getHMAStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `hma_${paneId}`,
+        version: '1.1.0',
+        description: 'HMA Hull 移动均线渲染器（WebGL + Canvas2D 回退）',
+        debugName: 'HMA',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) {
+            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<HMARenderState>(stateKey)
+            if (!state || !state.params.showHMA || state.visibleMin > state.visibleMax) return
+
+            const { series } = state
+            const drawEnd = Math.min(range.end, series.length)
+            const rangeStart = range.start
+
+            const points: Point[] = []
+            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: pane.yAxis.priceToY(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: HMA_COLOR }],
+                    scrollLeft,
+                )
+                if (allOk) {
+                    usedWebGL = true
+                    lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                }
+            }
+
+            if (usedWebGL) return
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.strokeStyle = HMA_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<HMARenderState>(stateKey)
+            return state?.params ?? {}
+        },
+
+        setConfig() {
+            // no-op
+        },
+    }
+}
+
+@Indicator({
+    name: 'hma',
+    displayName: 'HMA',
+    category: 'main',
+    stateKey: createHMAStateKey,
+    defaultPaneId: 'main',
+    paneIdField: 'hmaPaneId',
+    allowMainPane: true,
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createHMAStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class HMADefinition {
+    static rendererFactory = createHMARendererPlugin
+}