@363045841yyt/klinechart-core 0.7.3

package/src/engine/renderers/subVolume.ts

@@ -0,0 +1,236 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost, BaseIndicatorState } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import { createIndicatorStateKey } from '../../plugin/stateKeys'
+import type { KLineData } from '../../types/price'
+import { getColors, type VolumeColors } from '../theme/colors'
+import { Indicator } from '../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../indicators/scheduler'
+
+export interface VolumeRendererOptions {
+    /** 目标 pane ID（默认 'sub'） */
+    paneId?: string
+}
+
+export interface VolumeRenderState extends BaseIndicatorState {
+    valueMin: number
+    valueMax: number
+}
+
+function getVolumeStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[VolumeRenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('volume')
+    if (!meta) {
+        console.warn("[VolumeRenderer] Indicator metadata for 'volume' not found, skip rendering")
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+/**
+ * 创建副图成交量渲染器插件
+ */
+export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'sub' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getVolumeStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `volume_${paneId}`,
+        version: '1.0.0',
+        description: '成交量渲染器',
+        debugName: '成交量',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
+        getDeclaredNamespaces() {
+            const key = resolveKey()
+            return key ? [key] : []
+        },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, data, range, dpr } = context
+            const colors = getColors(context.theme)
+            const klineData = data as KLineData[]
+            if (!klineData.length) return
+
+            const { start, end } = range
+
+            let maxVolume = 0
+            let minVolume = Infinity
+            for (let i = start; i < end && i < klineData.length; i++) {
+                const item = klineData[i]
+                if (!item) continue
+                const volume = item.volume
+                if (volume !== undefined && volume !== null) {
+                    maxVolume = Math.max(maxVolume, volume)
+                    minVolume = Math.min(minVolume, volume)
+                }
+            }
+
+            if (maxVolume === 0 || !Number.isFinite(minVolume)) {
+                return
+            }
+
+            const padding = Math.max(0.05, (maxVolume - minVolume) * 0.1)
+            const valueMin = Math.max(0, minVolume - padding)
+            const valueMax = maxVolume + padding
+            const displayRange = pane.yAxis.getDisplayRange({ minPrice: valueMin, maxPrice: valueMax })
+            const displayMin = displayRange.minPrice
+            const displayMax = displayRange.maxPrice
+            const displayValueRange = displayMax - displayMin || 1
+            const baseY = pane.height - (0 - displayMin) / displayValueRange * pane.height
+            const alignedBaseY = Math.round(baseY * dpr) / dpr
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            pluginHost?.setSharedState<VolumeRenderState>(stateKey, {
+                valueMin,
+                valueMax,
+                timestamp: Date.now(),
+            }, `volume_${paneId}`)
+
+            const maxRects = Math.max(1, end - start)
+            const upBuf = new Float32Array(maxRects * 4)
+            const downBuf = new Float32Array(maxRects * 4)
+            const neutralBuf = new Float32Array(maxRects * 4)
+            let upCount = 0
+            let downCount = 0
+            let neutralCount = 0
+
+            for (let i = start; i < end; i++) {
+                const item = klineData[i]
+                if (!item) continue
+                const volume = item.volume
+                if (!volume) continue
+                const barRect = context.kBarRects[i - start]
+                if (!barRect) continue
+
+                const y = pane.height - (volume - displayMin) / displayValueRange * pane.height
+                const alignedY = Math.round(y * dpr) / dpr
+                const minBarHPx = 1 / dpr
+                const rawH = alignedBaseY - alignedY
+                const finalH = rawH <= 0 ? minBarHPx : Math.max(rawH, minBarHPx)
+                const finalY = rawH <= 0 ? alignedBaseY - minBarHPx : alignedBaseY - finalH
+
+                const color = judgeColor(item, colors.VOLUME)
+
+                let buf: Float32Array
+                let idx: number
+                if (color === colors.VOLUME.UP) {
+                    buf = upBuf; idx = upCount++
+                } else if (color === colors.VOLUME.DOWN) {
+                    buf = downBuf; idx = downCount++
+                } else {
+                    buf = neutralBuf; idx = neutralCount++
+                }
+                const off = idx * 4
+                buf[off] = barRect.x
+                buf[off + 1] = finalY
+                buf[off + 2] = barRect.width
+                buf[off + 3] = finalH
+            }
+
+            const usedWebGL = drawVolumeWithWebGL(context, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+            if (!usedWebGL) {
+                drawVolumeWithCanvas2D(ctx, context.scrollLeft, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+            } else {
+                compositeVolumeWebGL(ctx, context)
+            }
+        },
+    }
+}
+
+function drawVolumeWithWebGL(
+    context: RenderContext,
+    upBuf: Float32Array, upCount: number,
+    downBuf: Float32Array, downCount: number,
+    neutralBuf: Float32Array, neutralCount: number,
+    volumeColors: VolumeColors
+): boolean {
+    if (context.settings?.enableWebGLRendering === false) return false
+    const surface = context.candleWebGLSurface
+    if (!surface || !surface.isAvailable()) return false
+
+    surface.clear()
+
+    const ok1 = upCount === 0 || surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, volumeColors.UP, context.scrollLeft)
+    const ok2 = downCount === 0 || surface.drawRectBuffer(downBuf.subarray(0, downCount * 4), downCount, volumeColors.DOWN, context.scrollLeft)
+    const ok3 = neutralCount === 0 || surface.drawRectBuffer(neutralBuf.subarray(0, neutralCount * 4), neutralCount, volumeColors.NEUTRAL, context.scrollLeft)
+
+    return ok1 && ok2 && ok3
+}
+
+function drawVolumeWithCanvas2D(
+    ctx: CanvasRenderingContext2D,
+    scrollLeft: number,
+    upBuf: Float32Array, upCount: number,
+    downBuf: Float32Array, downCount: number,
+    neutralBuf: Float32Array, neutralCount: number,
+    volumeColors: VolumeColors
+): void {
+    ctx.save()
+    ctx.translate(-scrollLeft, 0)
+
+    ctx.fillStyle = volumeColors.UP
+    for (let i = 0; i < upCount; i++) {
+        const off = i * 4
+        ctx.fillRect(upBuf[off], upBuf[off + 1], upBuf[off + 2], upBuf[off + 3])
+    }
+
+    ctx.fillStyle = volumeColors.DOWN
+    for (let i = 0; i < downCount; i++) {
+        const off = i * 4
+        ctx.fillRect(downBuf[off], downBuf[off + 1], downBuf[off + 2], downBuf[off + 3])
+    }
+
+    ctx.fillStyle = volumeColors.NEUTRAL
+    for (let i = 0; i < neutralCount; i++) {
+        const off = i * 4
+        ctx.fillRect(neutralBuf[off], neutralBuf[off + 1], neutralBuf[off + 2], neutralBuf[off + 3])
+    }
+
+    ctx.restore()
+}
+
+function compositeVolumeWebGL(ctx: CanvasRenderingContext2D, context: RenderContext): void {
+    const surface = context.candleWebGLSurface
+    if (!surface) return
+
+    surface.compositeTo(ctx)
+}
+
+/**
+ * 判断成交量柱子颜色（使用 MACD 配色风格）
+ */
+function judgeColor(dayData: KLineData, volumeColors: VolumeColors): string {
+    if (dayData.close > dayData.open) {
+        return volumeColors.UP
+    } else if (dayData.close < dayData.open) {
+        return volumeColors.DOWN
+    } else {
+        return volumeColors.NEUTRAL
+    }
+}
+
+@Indicator({
+    name: 'volume',
+    displayName: 'VOL',
+    category: 'volume',
+    stateKey: (paneId: string) => createIndicatorStateKey('volume', paneId),
+    defaultPaneId: 'sub',
+})
+class VolumeIndicatorDefinition {
+    static rendererFactory = createVolumeRendererPlugin
+}

package/src/engine/renderers/timeAxis.ts

@@ -0,0 +1,121 @@
+import { getColors } from '../theme/colors'
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import type { KLineData } from '../../types/price'
+import { drawTimeAxis, drawCrosshairTimeLabel, drawAxisTimeLabel } from '../../utils/kLineDraw/axis'
+
+/** 时间轴面板 ID（特殊标识，用于单独渲染） */
+export const TIME_AXIS_PANE_ID = Symbol('time-axis')
+
+/**
+ * 创建时间轴渲染器插件
+ * 注意：时间轴渲染到 xAxisCanvas，需要特殊处理
+ */
+export function createTimeAxisRendererPlugin(options: {
+  height: number
+  getCrosshair?: () => { x: number; index: number } | null
+}): RendererPlugin {
+  return {
+    name: 'timeAxis',
+    version: '1.0.0',
+    description: '时间轴渲染器',
+    debugName: '时间轴',
+    paneId: TIME_AXIS_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_XAXIS,
+    isSystem: true, // 系统渲染器，只能通过 renderPlugin 单独渲染
+
+    draw(context: RenderContext) {
+      const { ctx, data, range, scrollLeft, kWidth, kGap, dpr, paneWidth } = context
+      const colors = getColors(context.theme)
+      const klineData = data as KLineData[]
+
+      // 时间轴绘制到传入的 ctx
+      const targetCtx = ctx
+
+      // 使用 paneWidth 作为时间轴宽度，确保与视口一致
+      const w = paneWidth
+      const h = options.height
+
+      targetCtx.setTransform(1, 0, 0, 1, 0, 0)
+      targetCtx.scale(dpr, dpr)
+      targetCtx.clearRect(0, 0, w, h)
+
+      drawTimeAxis(targetCtx, {
+        x: 0,
+        y: 0,
+        width: w,
+        height: h,
+        data: klineData,
+        scrollLeft,
+        kWidth,
+        kGap,
+        startIndex: range.start,
+        endIndex: range.end,
+        dpr,
+        textColor: colors.TEXT.SECONDARY,
+        lineColor: colors.BORDER.DARK,
+        drawTopBorder: false,
+        drawBottomBorder: false,
+      })
+
+      // 绘制来自 xAxisRanges 的时间范围带（先于标签绘制）
+      if (context.xAxisRanges) {
+        for (const range of context.xAxisRanges) {
+          const screenLeftX = range.leftX - scrollLeft
+          const screenRightX = range.rightX - scrollLeft
+          const bandWidth = screenRightX - screenLeftX
+          if (bandWidth <= 0) continue
+          targetCtx.save()
+          targetCtx.globalAlpha = range.opacity
+          targetCtx.fillStyle = range.color
+          targetCtx.fillRect(screenLeftX, 0, bandWidth, h)
+          targetCtx.restore()
+        }
+      }
+
+      // 绘制十字线时间标签
+      const crosshair = options.getCrosshair?.()
+      if (crosshair && typeof crosshair.index === 'number') {
+        const k = klineData[crosshair.index]
+        if (k) {
+          drawCrosshairTimeLabel(targetCtx, {
+            x: 0,
+            y: 0,
+            width: w,
+            height: h,
+            crosshairX: crosshair.x,
+            timestamp: k.timestamp,
+            dpr,
+            fontSize: 12,
+            bgColor: colors.CROSSHAIR.LABEL_BG,
+            textColor: colors.CROSSHAIR.LABEL_TEXT,
+          })
+        }
+      }
+
+      // 绘制来自 xAxisLabels 的标签（极值点、绘图锚点等）
+      if (context.xAxisLabels) {
+        for (const label of context.xAxisLabels) {
+          // 将世界坐标X转换为屏幕坐标
+          const screenX = label.x - scrollLeft
+
+          // 检查是否在可视范围内
+          if (screenX >= 0 && screenX <= w) {
+            drawAxisTimeLabel(targetCtx, {
+              x: 0,
+              y: 0,
+              width: w,
+              height: h,
+              labelX: screenX,
+              timestamp: label.timestamp,
+              dpr,
+              fontSize: 12,
+              bgColor: label.style?.bgColor,
+              textColor: label.style?.textColor,
+            })
+          }
+        }
+      }
+    },
+  }
+}