@363045841yyt/klinechart-core 0.7.3

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

@@ -0,0 +1,237 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { ATRRenderState } from '../../indicators/atrState'
+import { createATRStateKey } from '../../indicators/atrState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+type LinePoint = { x: number; y: number }
+
+const ATR_COLOR = '#d97706'
+
+export interface ATRRendererOptions {
+    paneId?: string
+}
+
+function getATRStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn(`[ATRRenderer] Scheduler not available via service locator`)
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('atr')
+    if (!meta) {
+        console.warn(`[ATRRenderer] Indicator metadata for 'atr' not found, skip rendering`)
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createATRRendererPlugin(options: ATRRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'sub_ATR' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getATRStateKey(pluginHost, paneId)
+    }
+
+    let cachedKey = ''
+    let cachedPoints: LinePoint[] = []
+
+    function clearCache() {
+        cachedKey = ''
+        cachedPoints = []
+    }
+
+    function buildCacheKey(
+        range: { start: number; end: number },
+        kLineCenters: number[],
+        pane: RenderContext['pane'],
+        params: ATRRenderState['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.showATR,
+            params.period,
+        ].join('|')
+    }
+
+    return {
+        name: `atr_${paneId}`,
+        version: '1.0.0',
+        description: 'ATR 平均真实波幅渲染器（Wilder 平滑）',
+        debugName: 'ATR',
+        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, kLineCenters, lineWebGLSurface } = context
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<ATRRenderState>(stateKey)
+            if (!state || !state.params.showATR || state.visibleMin > state.visibleMax) {
+                clearCache()
+                return
+            }
+
+            const { valueMin, valueMax, params, series } = state
+            const valueRange = valueMax - valueMin || 1
+
+            const displayRange = pane.yAxis.getDisplayRange({ minPrice: valueMin, maxPrice: valueMax })
+            const displayMin = displayRange.minPrice
+            const displayMax = displayRange.maxPrice
+            const displayValueRange = displayMax - displayMin || 1
+
+            // 基线（ATR 最低永远 ≥ 0，画 0 线作为参考）
+            const zeroY = pane.height - (0 - displayMin) / displayValueRange * pane.height
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
+            ctx.lineWidth = 1
+            ctx.setLineDash([4, 4])
+            ctx.beginPath()
+            ctx.moveTo(scrollLeft, zeroY)
+            ctx.lineTo(scrollLeft + context.paneWidth, zeroY)
+            ctx.stroke()
+            ctx.setLineDash([])
+
+            ctx.restore()
+
+            // 绘制范围
+            const drawStart = Math.max(range.start, params.period - 1)
+            const drawEnd = Math.min(range.end, series.length)
+
+            const cacheKey = buildCacheKey(range, kLineCenters, pane, params, state.timestamp)
+            if (cachedKey !== cacheKey) {
+                cachedKey = cacheKey
+                cachedPoints = []
+
+                for (let i = drawStart; i < drawEnd; i++) {
+                    const value = series[i]
+                    if (value === undefined) continue
+                    const centerX = kLineCenters[i - range.start]
+                    if (centerX === undefined) continue
+
+                    const logicY = pane.height - (value - displayMin) / displayValueRange * pane.height
+                    cachedPoints.push({ x: centerX, y: logicY })
+                }
+            }
+
+            const enableWebGL = context.settings?.enableWebGLRendering !== false
+            let usedWebGL = false
+            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+                if (cachedPoints.length >= 2) {
+                    const ok = lineWebGLSurface.drawLineStrips(
+                        [{ points: cachedPoints, width: 1, color: ATR_COLOR }],
+                        scrollLeft,
+                    )
+                    if (ok) {
+                        usedWebGL = true
+                        lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                    }
+                }
+            }
+
+            if (!usedWebGL) {
+                drawWithCanvas2D(ctx, scrollLeft, cachedPoints)
+            }
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<ATRRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+
+        setConfig() {
+            // no-op: 配置通过 scheduler.updateATRConfig() 更新
+        },
+    }
+}
+
+function drawWithCanvas2D(
+    ctx: CanvasRenderingContext2D,
+    scrollLeft: number,
+    points: LinePoint[],
+): void {
+    if (points.length < 2) return
+    ctx.save()
+    ctx.translate(-scrollLeft, 0)
+    ctx.strokeStyle = ATR_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++) {
+        const point = points[i]!
+        ctx.lineTo(point.x, point.y)
+    }
+    ctx.stroke()
+    ctx.restore()
+}
+
+/**
+ * 获取 ATR 标题信息（供 paneTitle 使用）
+ */
+export function getATRTitleInfo(
+    index: number,
+    period: number,
+    pluginHost: PluginHost,
+    paneId: string = 'sub_ATR',
+): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
+    const state = pluginHost.getSharedState<ATRRenderState>(createATRStateKey(paneId))
+    if (!state) return null
+
+    const atr = state.series[index]
+    if (atr === undefined) return null
+
+    return {
+        name: 'ATR',
+        params: [period],
+        values: [
+            { label: 'ATR', value: atr, color: ATR_COLOR },
+        ],
+    }
+}
+
+@Indicator({
+    name: 'atr',
+    displayName: 'ATR',
+    category: 'oscillator',
+    stateKey: createATRStateKey,
+    defaultPaneId: 'sub_ATR',
+    paneIdField: 'atrPaneId',
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createATRStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class ATRIndicatorDefinition {
+    static rendererFactory = createATRRendererPlugin
+}

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

@@ -0,0 +1,317 @@
+import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
+import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
+import { getColors } from '../../theme/colors'
+import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+type LinePoint = { x: number; y: number }
+
+const BOLL_LINE_WIDTH = 1
+
+interface PriceData {
+    upper: number
+    middle: number
+    lower: number
+}
+
+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
+}
+
+function toOpaqueRgba(color: string): string {
+    return color.replace(/,\s*[\d.]+\s*\)$/i, ', 1)')
+}
+
+function compositeLineSurface(
+    context: RenderContext,
+    surface: NonNullable<RenderContext['lineWebGLSurface']>,
+    alpha = 1
+): void {
+    surface.compositeTo(context.ctx, {
+        alpha,
+        imageSmoothingEnabled: false,
+    })
+}
+
+function drawBOLLWithWebGL(
+    context: RenderContext,
+    data: {
+        showUpper: boolean
+        showMiddle: boolean
+        showLower: boolean
+        showBand: boolean
+        upperPoints: LinePoint[]
+        middlePoints: LinePoint[]
+        lowerPoints: LinePoint[]
+        bandUpperPoints: LinePoint[]
+        bandLowerPoints: LinePoint[]
+    }
+): boolean {
+    const colors = getColors(context.theme)
+    if (context.settings?.enableWebGLRendering === false) return false
+    const surface = context.lineWebGLSurface
+    if (!surface || !surface.isAvailable()) return false
+
+    surface.clear()
+
+    let allOk = true
+    if (data.showBand && data.bandUpperPoints.length >= 2 && data.bandLowerPoints.length >= 2) {
+        surface.clear()
+        allOk = surface.drawFilledBand(
+            { upperPoints: data.bandUpperPoints, lowerPoints: data.bandLowerPoints },
+            toOpaqueRgba(colors.BOLL.BAND_FILL),
+            context.scrollLeft
+        )
+        if (allOk) {
+            compositeLineSurface(context, surface, getRgbaAlpha(colors.BOLL.BAND_FILL))
+        }
+    }
+    surface.clear()
+
+    const lineStrips: Array<{ points: LinePoint[]; width: number; color: string }> = []
+    if (data.showUpper && data.upperPoints.length >= 2) {
+        lineStrips.push({ points: data.upperPoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.UPPER })
+    }
+    if (data.showMiddle && data.middlePoints.length >= 2) {
+        lineStrips.push({ points: data.middlePoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.MIDDLE })
+    }
+    if (data.showLower && data.lowerPoints.length >= 2) {
+        lineStrips.push({ points: data.lowerPoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.LOWER })
+    }
+
+    if (lineStrips.length > 0) {
+        allOk = surface.drawLineStrips(lineStrips, context.scrollLeft)
+    }
+    if (!allOk) {
+        surface.clear()
+        return false
+    }
+
+    compositeLineSurface(context, surface)
+    surface.clear()
+    return true
+}
+
+function buildPriceCacheKey(
+    range: { start: number; end: number },
+    dataLength: number,
+    lastTimestamp: number,
+    period: number
+): string {
+    return `${range.start}|${range.end}|${dataLength}|${lastTimestamp}|${period}`
+}
+
+function getBOLLStateKey(host: PluginHost | null): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[BOLLRenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('boll')
+    if (!meta) {
+        console.warn('[BOLLRenderer] Indicator metadata for \'boll\' not found, skip rendering')
+        return null
+    }
+    return resolveStateKey(meta.stateKey)
+}
+
+@Indicator({
+    name: 'boll',
+    displayName: 'BOLL',
+    category: 'main',
+    stateKey: BOLL_STATE_KEY,
+    defaultPaneId: 'main',
+    applyResult: (host, state, _paneId) => {
+        host.setSharedState(BOLL_STATE_KEY, state as any, 'indicator_scheduler')
+    },
+})
+class BOLLDefinition {
+    static rendererFactory = createBOLLRendererPlugin
+}
+
+export function createBOLLRendererPlugin(): RendererPluginWithHost {
+    let pluginHost: PluginHost | null = null
+
+    // 对象池：复用 {x,y} 对象，消除每帧 GC 压力
+    const _upperPool: LinePoint[] = []
+    const _middlePool: LinePoint[] = []
+    const _lowerPool: LinePoint[] = []
+    const _bandUpperPool: LinePoint[] = []
+    const _bandLowerPool: LinePoint[] = []
+    let _poolSize = 0
+
+    function _growPool(size: number) {
+        if (size <= _poolSize) return
+        for (let i = _poolSize; i < size; i++) {
+            _upperPool[i] = { x: 0, y: 0 }
+            _middlePool[i] = { x: 0, y: 0 }
+            _lowerPool[i] = { x: 0, y: 0 }
+            _bandUpperPool[i] = { x: 0, y: 0 }
+            _bandLowerPool[i] = { x: 0, y: 0 }
+        }
+        _poolSize = size
+    }
+
+    function resolveKey(): string | null {
+        return getBOLLStateKey(pluginHost)
+    }
+
+    return {
+        name: 'boll',
+        version: '2.2.0',
+        description: '布林带渲染器（无缓存优化）',
+        debugName: 'BOLL布林带',
+        paneId: 'main',
+        priority: RENDERER_PRIORITY.INDICATOR,
+
+        onInstall(host: PluginHost): void {
+            pluginHost = host
+        },
+
+        getDeclaredNamespaces(): string[] {
+            const key = resolveKey()
+            return key ? [key] : []
+        },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters } = context
+            const klineData = data as KLineData[]
+            const colors = getColors(context.theme)
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<BOLLRenderState>(stateKey)
+            if (!state || state.visibleMin > state.visibleMax || state.series.length === 0) {
+                return
+            }
+
+            const { period, showUpper, showMiddle, showLower, showBand } = state.params
+            const bollData = state.series
+
+            if (klineData.length < period) return
+
+            const drawStart = Math.max(range.start, period - 1)
+            const drawEnd = Math.min(range.end, klineData.length)
+            if (drawEnd <= drawStart) return
+
+            // ====== 复用池对象，零分配构建点集 ======
+            const rangeStart = range.start
+            const priceToY = pane.yAxis.priceToY.bind(pane.yAxis)
+
+            const pointCount = drawEnd - drawStart
+            _growPool(pointCount)
+
+            // 新数组作为 WebGL geoCache key（避免缓存命中旧数据）
+            const upperPoints: LinePoint[] = new Array(pointCount)
+            const middlePoints: LinePoint[] = new Array(pointCount)
+            const lowerPoints: LinePoint[] = new Array(pointCount)
+            const bandUpperPoints: LinePoint[] = showBand ? new Array(pointCount) : []
+            const bandLowerPoints: LinePoint[] = showBand ? new Array(pointCount) : []
+
+            let upperIdx = 0, middleIdx = 0, lowerIdx = 0, bandIdx = 0
+
+            for (let i = drawStart; i < drawEnd; i++) {
+                const boll = bollData[i]
+                if (!boll) continue
+
+                const centerX = kLineCenters[i - rangeStart]
+                if (centerX === undefined) continue
+
+                // 坐标转换
+                const upperY = alignToPhysicalPixelCenter(priceToY(boll.upper), dpr)
+                const middleY = alignToPhysicalPixelCenter(priceToY(boll.middle), dpr)
+                const lowerY = alignToPhysicalPixelCenter(priceToY(boll.lower), dpr)
+
+                // 从池中取对象，只改坐标，零分配
+                let p = _upperPool[upperIdx]; p.x = centerX; p.y = upperY
+                upperPoints[upperIdx++] = p
+                p = _middlePool[middleIdx]; p.x = centerX; p.y = middleY
+                middlePoints[middleIdx++] = p
+                p = _lowerPool[lowerIdx]; p.x = centerX; p.y = lowerY
+                lowerPoints[lowerIdx++] = p
+
+                if (showBand) {
+                    p = _bandUpperPool[bandIdx]; p.x = centerX; p.y = upperY
+                    bandUpperPoints[bandIdx] = p
+                    p = _bandLowerPool[bandIdx]; p.x = centerX; p.y = lowerY
+                    bandLowerPoints[bandIdx] = p
+                    bandIdx++
+                }
+            }
+
+            // 截断到实际长度
+            upperPoints.length = upperIdx
+            middlePoints.length = middleIdx
+            lowerPoints.length = lowerIdx
+            if (showBand) {
+                bandUpperPoints.length = bandIdx
+                bandLowerPoints.length = bandIdx
+            }
+
+            // ====== 渲染 ======
+            if (drawBOLLWithWebGL(context, {
+                showUpper, showMiddle, showLower, showBand,
+                upperPoints, middlePoints, lowerPoints,
+                bandUpperPoints, bandLowerPoints,
+            })) {
+                return
+            }
+
+            // ====== Canvas 2D 回退（极少执行） ======
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.lineWidth = BOLL_LINE_WIDTH
+            ctx.lineJoin = 'round'
+            ctx.lineCap = 'round'
+
+            if (showBand && bandUpperPoints.length >= 2) {
+                const bandPath = new Path2D()
+                bandPath.moveTo(bandUpperPoints[0].x, bandUpperPoints[0].y)
+                for (let i = 1; i < bandUpperPoints.length; i++) {
+                    bandPath.lineTo(bandUpperPoints[i].x, bandUpperPoints[i].y)
+                }
+                for (let i = bandLowerPoints.length - 1; i >= 0; i--) {
+                    bandPath.lineTo(bandLowerPoints[i].x, bandLowerPoints[i].y)
+                }
+                bandPath.closePath()
+                ctx.fillStyle = colors.BOLL.BAND_FILL
+                ctx.fill(bandPath)
+            }
+
+            const drawLine = (points: LinePoint[], color: string) => {
+                if (points.length < 2) return
+                ctx.beginPath()
+                ctx.strokeStyle = color
+                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()
+            }
+
+            if (showUpper) drawLine(upperPoints, colors.BOLL.UPPER)
+            if (showMiddle) drawLine(middlePoints, colors.BOLL.MIDDLE)
+            if (showLower) drawLine(lowerPoints, colors.BOLL.LOWER)
+
+            ctx.restore()
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<BOLLRenderState>(stateKey)
+            return state ? { ...state.params } : {}
+        },
+
+        setConfig(_newConfig: Record<string, unknown>) {
+            // 外部控制器应调用 chart.getIndicatorScheduler().updateBOLLConfig()
+        },
+    }
+}