@363045841yyt/klinechart-core 0.7.3

package/src/engine/renderers/extremaMarkers.ts

@@ -0,0 +1,246 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
+import type { KLineData } from '../../types/price'
+import { roundToPhysicalPixel, alignToPhysicalPixelCenter, createHorizontalLineRect } from '../draw/pixelAlign'
+import { getColors, type ThemeColors } from '../theme/colors'
+import { getFont, setCanvasFont } from '../theme/fonts'
+
+const textWidthCache = new Map<string, number>()
+const TEXT_WIDTH_CACHE_LIMIT = 256
+
+// 模块级常量，避免每次重复创建
+const PADDING = 4
+const LINE_LENGTH = 30
+const DOT_RADIUS = 2
+const MARKER_FONT = getFont(12)
+const TAU = Math.PI * 2
+
+// Marker 数据接口，用于批量绘制
+interface MarkerData {
+    x: number
+    y: number
+    price: number
+    text: string
+    textWidth: number
+    drawLeft: boolean
+    lineStartX: number
+    lineEndX: number
+    endX: number
+    alignedY: number
+    textX: number
+}
+
+function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
+    // 使用固定字体，缓存更稳定
+    const key = MARKER_FONT + '|' + text
+    const cached = textWidthCache.get(key)
+    if (cached !== undefined) {
+        return cached
+    }
+
+    const savedFont = ctx.font
+    ctx.font = MARKER_FONT
+    const width = ctx.measureText(text).width
+    ctx.font = savedFont
+
+    if (textWidthCache.size >= TEXT_WIDTH_CACHE_LIMIT) {
+        textWidthCache.clear()
+    }
+    textWidthCache.set(key, width)
+    return width
+}
+
+/**
+ * 批量绘制所有 marker
+ * 分三个阶段：线条 → 圆点 → 文字，避免 Canvas 状态频繁切换
+ */
+function drawAllMarkers(
+    ctx: CanvasRenderingContext2D,
+    markers: MarkerData[],
+    dpr: number,
+    colors: ThemeColors
+) {
+    if (markers.length === 0) return
+
+    ctx.save()
+
+    // ========== 阶段1：批量绘制所有线条（同一 fillStyle）==========
+    ctx.fillStyle = colors.TEXT.WEAK
+    for (const m of markers) {
+        const lineRect = createHorizontalLineRect(m.lineStartX, m.lineEndX, m.y, dpr)
+        if (lineRect) {
+            ctx.fillRect(lineRect.x, lineRect.y, lineRect.width, lineRect.height)
+        }
+    }
+
+    // ========== 阶段2：批量绘制所有圆点（复用 fillStyle）==========
+    ctx.beginPath()
+    for (const m of markers) {
+        ctx.moveTo(m.endX + DOT_RADIUS, m.alignedY)
+        ctx.arc(m.endX, m.alignedY, DOT_RADIUS, 0, TAU)
+    }
+    ctx.fill()
+
+    // ========== 阶段3：批量绘制所有文字（同一 font/baseline/fillStyle）==========
+    setCanvasFont(ctx, MARKER_FONT)
+    ctx.textBaseline = 'middle'
+    ctx.fillStyle = colors.PRICE.NEUTRAL
+
+    for (const m of markers) {
+        ctx.textAlign = m.drawLeft ? 'right' : 'left'
+        ctx.fillText(m.text, m.textX, m.alignedY)
+    }
+
+    ctx.restore()
+}
+
+/**
+ * 创建可视区最高/最低价标注渲染器插件
+ */
+export function createExtremaMarkersRendererPlugin(): RendererPlugin {
+    return {
+        name: 'extremaMarkers',
+        version: '1.0.0',
+        description: '可视区最高/最低价标注渲染器',
+        debugName: '极值标记',
+        paneId: GLOBAL_PANE_ID,
+        priority: RENDERER_PRIORITY.OVERLAY,
+
+        draw(context: RenderContext) {
+            const { ctx, pane, data, range, scrollLeft, dpr, paneWidth, kLineCenters } = context
+            const colors = getColors(context.theme)
+            const klineData = data as KLineData[]
+            if (!klineData.length) return
+            if (pane.role !== 'price') return
+
+            const start = Math.max(0, range.start)
+            const end = Math.min(klineData.length, range.end)
+            if (end - start <= 0) return
+
+            let max = -Infinity
+            let min = Infinity
+            let maxIndex = start
+            let minIndex = start
+
+            for (let i = start; i < end; i++) {
+                const e = klineData[i]
+                if (!e) continue
+                if (e.high >= max) {
+                    max = e.high
+                    maxIndex = i
+                }
+                if (e.low <= min) {
+                    min = e.low
+                    minIndex = i
+                }
+            }
+
+            if (!Number.isFinite(max) || !Number.isFinite(min)) return
+
+            const getCenterX = (i: number) => {
+                const localIdx = i - range.start
+                if (localIdx < 0 || localIdx >= kLineCenters.length) return 0
+                return kLineCenters[localIdx]!
+            }
+
+            if (!context.yAxisLabels) context.yAxisLabels = []
+
+            context.yAxisLabels.push({
+                dataIndex: maxIndex,
+                price: max,
+                y: pane.yAxis.priceToY(max),
+                style: {
+                    bgColor: colors.LAST_PRICE_LABEL.BG,
+                    borderColor: colors.PRICE.LAST_PRICE,
+                    textColor: colors.PRICE.LAST_PRICE,
+                }
+            })
+
+            context.yAxisLabels.push({
+                dataIndex: minIndex,
+                price: min,
+                y: pane.yAxis.priceToY(min),
+                style: {
+                    bgColor: colors.LAST_PRICE_LABEL.BG,
+                    borderColor: colors.PRICE.LAST_PRICE,
+                    textColor: colors.PRICE.LAST_PRICE,
+                }
+            })
+
+            // 收集所有 marker 数据
+            const markers: MarkerData[] = []
+
+            const maxMarker = createMarkerData(
+                getCenterX(maxIndex),
+                pane.yAxis.priceToY(max),
+                max,
+                dpr,
+                paneWidth,
+                ctx
+            )
+            if (maxMarker) markers.push(maxMarker)
+
+            const minMarker = createMarkerData(
+                getCenterX(minIndex),
+                pane.yAxis.priceToY(min),
+                min,
+                dpr,
+                paneWidth,
+                ctx
+            )
+            if (minMarker) markers.push(minMarker)
+
+            // 批量绘制所有 markers
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            drawAllMarkers(ctx, markers, dpr, colors)
+            ctx.restore()
+        },
+    }
+}
+
+/**
+ * 创建 marker 数据（不绘制，只计算）
+ */
+function createMarkerData(
+    x: number,
+    y: number,
+    price: number,
+    dpr: number,
+    paneWidth: number,
+    ctx: CanvasRenderingContext2D
+): MarkerData | null {
+    const text = price.toFixed(2)
+    const textWidth = measureTextWidth(ctx, text)
+
+    const visibleX = x
+    const rightEdge = visibleX + LINE_LENGTH + PADDING + textWidth
+    const drawLeft = rightEdge > paneWidth
+
+    let lineStartX = x
+    let lineEndX = drawLeft ? x - LINE_LENGTH : x + LINE_LENGTH
+    if (lineStartX > lineEndX) {
+        ;[lineStartX, lineEndX] = [lineEndX, lineStartX]
+    }
+
+    const endX = roundToPhysicalPixel(lineEndX, dpr)
+    const alignedY = alignToPhysicalPixelCenter(y, dpr)
+    const textX = roundToPhysicalPixel(
+        drawLeft ? x - LINE_LENGTH - PADDING : x + LINE_LENGTH + PADDING,
+        dpr
+    )
+
+    return {
+        x,
+        y,
+        price,
+        text,
+        textWidth,
+        drawLeft,
+        lineStartX,
+        lineEndX,
+        endX,
+        alignedY,
+        textX,
+    }
+}

package/src/engine/renderers/gridLines.ts

@@ -0,0 +1,90 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
+import type { KLineData } from '../../types/price'
+import { createHorizontalLineRect, createVerticalLineRect } from '../draw/pixelAlign'
+import { findMonthBoundaries } from '../../utils/dateFormat'
+import { getColors } from '../theme/colors'
+import { calculateTickPositions, calculateValueTickPositions, type ScaleType } from '../utils/tickPosition'
+
+/**
+ * 创建网格线渲染器插件
+ * 横向按像素均分铺满整个绘图区高度，纵向按月分割（使用预计算的月边界，网格线对齐到K线实体中部）
+ * 渲染到所有 pane（使用 GLOBAL_PANE_ID）
+ */
+export function createGridLinesRendererPlugin(): RendererPlugin {
+    return {
+        name: 'gridLines',
+        version: '1.0.0',
+        description: '网格线渲染器',
+        debugName: '网格线',
+        paneId: GLOBAL_PANE_ID,
+        priority: RENDERER_PRIORITY.GRID,
+
+        draw(context: RenderContext) {
+            const { ctx, pane, data, range, scrollLeft, kWidth, dpr, kLinePositions, settings } = context
+            const colors = getColors(context.theme)
+            const klineData = data as KLineData[]
+            if (!klineData.length) return
+            if (settings?.showGridLines === false) return
+
+            ctx.save()
+            ctx.fillStyle = colors.GRID.HORIZONTAL
+            ctx.translate(-scrollLeft, 0)
+
+            const plotWidth = ctx.canvas.width / dpr
+            const startX = scrollLeft
+            const endX = scrollLeft + plotWidth
+            const pt = pane.yAxis.getPaddingTop()
+            const pb = pane.yAxis.getPaddingBottom()
+
+            // 水平网格线：与 Y 轴刻度对齐
+            const scaleType = pane.yAxis.getScaleType()
+            let yPositions: number[]
+
+            if (scaleType === 'log' && pane.role === 'price') {
+                // 对数模式：生成 nice 刻度值，用 priceToY 计算 Y 位置
+                const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
+                const tickValues = calculateValueTickPositions({
+                    height: pane.height,
+                    paddingTop: pt,
+                    paddingBottom: pb,
+                    isMain: true,
+                    valueMin: displayRange.minPrice,
+                    valueMax: displayRange.maxPrice,
+                    scaleType: 'log',
+                })
+                yPositions = tickValues.map(t => t.y)
+            } else {
+                // 线性模式：均匀分布
+                const tickPositions = calculateTickPositions({
+                    height: pane.height,
+                    paddingTop: pt,
+                    paddingBottom: pb,
+                    isMain: pane.role === 'price',
+                })
+                yPositions = tickPositions.map(t => t.y)
+            }
+
+            for (const y of yPositions) {
+                const h = createHorizontalLineRect(startX, endX, y, dpr)
+                if (h) ctx.fillRect(h.x, h.y, h.width, h.height)
+            }
+
+            const boundaries = findMonthBoundaries(klineData)
+
+            for (const idx of boundaries) {
+                if (idx < range.start || idx >= range.end || idx >= klineData.length) continue
+
+                // 使用统一的 kLinePositions 计算 K 线中心 X 坐标
+                const localIdx = idx - range.start
+                if (localIdx < 0 || localIdx >= kLinePositions.length) continue
+                const worldX = kLinePositions[localIdx]! + kWidth / 2
+
+                const v = createVerticalLineRect(worldX, 0, pane.height, dpr)
+                if (v) ctx.fillRect(v.x, v.y, v.width, v.height)
+            }
+
+            ctx.restore()
+        },
+    }
+}

package/src/engine/renderers/lastPrice.ts

@@ -0,0 +1,97 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import type { KLineData } from '../../types/price'
+import { getColors } from '../theme/colors'
+
+function getLastPriceInfo(context: RenderContext) {
+    const { pane, data } = context
+    const klineData = data as KLineData[]
+    const last = klineData[klineData.length - 1]
+    if (!last) return null
+
+    const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
+    if (last.close < displayRange.minPrice || last.close > displayRange.maxPrice) {
+        return null
+    }
+
+    return {
+        price: last.close,
+        y: Math.round(pane.yAxis.priceToY(last.close)),
+        dataIndex: klineData.length - 1,
+    }
+}
+
+/**
+ * 最新价 label 注册渲染器（overlay 层，确保悬停时 label 也注册到 yAxisLabels）
+ */
+export function createLastPriceLabelRegistrarPlugin(): RendererPlugin {
+    return {
+        name: 'lastPriceLabelRegistrar',
+        version: '1.0.0',
+        description: '最新价 label 注册',
+        debugName: '最新价标签注册',
+        paneId: 'main',
+        layer: 'overlay',
+        priority: RENDERER_PRIORITY.LAST_PRICE_LABEL,
+
+        draw(context: RenderContext) {
+            const colors = getColors(context.theme)
+            const info = getLastPriceInfo(context)
+            if (!info) return
+
+            if (!context.yAxisLabels) context.yAxisLabels = []
+            context.yAxisLabels.push({
+                dataIndex: info.dataIndex,
+                price: info.price,
+                y: info.y,
+                type: 'lastPrice',
+                style: {
+                    bgColor: colors.LAST_PRICE_LABEL.BG,
+                    borderColor: colors.PRICE.LAST_PRICE,
+                    textColor: colors.PRICE.LAST_PRICE,
+                }
+            })
+        },
+    }
+}
+
+/**
+ * 创建最新价虚线渲染器插件（绘制虚线）
+ */
+export function createLastPriceLineRendererPlugin(): RendererPlugin {
+    return {
+        name: 'lastPriceLine',
+        version: '1.0.0',
+        description: '最新价虚线渲染器',
+        debugName: '最新价线',
+        paneId: 'main',
+        priority: RENDERER_PRIORITY.LAST_PRICE_LABEL,
+
+        draw(context: RenderContext) {
+            const { ctx, scrollLeft, dpr, kLinePositions, paneWidth } = context
+            const colors = getColors(context.theme)
+            const info = getLastPriceInfo(context)
+            if (!info) return
+
+            const y = info.y
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+
+            const startX = kLinePositions[0] ?? 0
+            const endX = paneWidth + scrollLeft
+
+            ctx.strokeStyle = colors.PRICE.LAST_PRICE
+            ctx.lineWidth = 1
+            ctx.setLineDash([4, 3])
+            ctx.beginPath()
+            const yy = (Math.floor(y * dpr) + 0.5) / dpr
+            ctx.moveTo(Math.round(startX * dpr) / dpr, yy)
+            ctx.lineTo(Math.round(endX * dpr) / dpr, yy)
+            ctx.stroke()
+            ctx.setLineDash([])
+
+            ctx.restore()
+        },
+    }
+}

package/src/engine/renderers/paneTitle.ts

@@ -0,0 +1,136 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import { getColors } from '../theme/colors'
+import { getFont, setCanvasFont } from '../theme/fonts'
+
+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 TitleValueItem {
+    /** 标签（如 "DIF"、"DEA"） */
+    label: string
+    /** 数值 */
+    value: number
+    /** 颜色 */
+    color: string
+}
+
+/**
+ * 标题信息（由指标渲染器提供）
+ */
+export interface TitleInfo {
+    /** 指标名称（如 "MACD"） */
+    name: string
+    /** 参数列表（如 [12, 26, 9]） */
+    params?: number[]
+    /** 数值项列表 */
+    values?: TitleValueItem[]
+}
+
+export interface PaneTitleOptions {
+    /** 面板 ID */
+    paneId: string
+    /** 标题文本（静态模式） */
+    title: string
+    /** 副标题/描述 */
+    description?: string
+    /** Y 偏移（逻辑像素） */
+    yOffset?: number
+    /** 动态标题信息提供函数 */
+    getTitleInfo?: () => TitleInfo | null
+}
+
+/**
+ * 创建面板标题渲染器插件
+ * 在面板左上角显示标题，支持动态指标数值显示
+ */
+export function createPaneTitleRendererPlugin(options: PaneTitleOptions): RendererPlugin {
+    let currentOptions = { ...options }
+
+    return {
+        name: `paneTitle_${options.paneId}`,
+        version: '1.0.0',
+        description: '面板标题渲染器',
+        debugName: '面板标题',
+        paneId: options.paneId,
+        priority: RENDERER_PRIORITY.FOREGROUND,
+        layer: 'overlay',
+
+        draw(context: RenderContext) {
+            const { overlayCtx, pane, paneWidth } = context
+            const colors = getColors(context.theme)
+            if (pane.id !== currentOptions.paneId || !overlayCtx) return
+
+            const fontSize = 12
+            const x = 12
+            const y = currentOptions.yOffset ?? fontSize
+            const gap = 8
+
+            overlayCtx.save()
+            setCanvasFont(overlayCtx, getFont(fontSize))
+            overlayCtx.textAlign = 'left'
+            overlayCtx.textBaseline = 'top'
+
+            const titleInfo = currentOptions.getTitleInfo?.()
+
+            if (titleInfo) {
+                let currentX = x
+
+                overlayCtx.fillStyle = colors.TEXT.PRIMARY
+                overlayCtx.fillText(titleInfo.name, currentX, y)
+                currentX += measureTextWidth(overlayCtx, titleInfo.name)
+
+                if (titleInfo.params && titleInfo.params.length > 0) {
+                    const paramText = `(${titleInfo.params.join(',')})`
+                    overlayCtx.fillStyle = colors.TEXT.TERTIARY
+                    overlayCtx.fillText(paramText, currentX, y)
+                    currentX += measureTextWidth(overlayCtx, paramText) + gap
+                } else {
+                    currentX += gap
+                }
+
+                if (titleInfo.values && titleInfo.values.length > 0) {
+                    for (const item of titleInfo.values) {
+                        const valueText = `${item.label} ${item.value.toFixed(3)}`
+                        overlayCtx.fillStyle = item.color
+                        overlayCtx.fillText(valueText, currentX, y)
+                        currentX += measureTextWidth(overlayCtx, valueText) + gap
+                    }
+                }
+            } else {
+                overlayCtx.fillStyle = colors.TEXT.PRIMARY
+                overlayCtx.fillText(currentOptions.title, x, y)
+
+                if (currentOptions.description) {
+                    const titleWidth = measureTextWidth(overlayCtx, currentOptions.title)
+                    overlayCtx.fillStyle = colors.TEXT.WEAK
+                    overlayCtx.fillText(` - ${currentOptions.description}`, x + titleWidth, y)
+                }
+            }
+
+            overlayCtx.restore()
+        },
+
+        setConfig(config: Record<string, unknown>) {
+            currentOptions = { ...currentOptions, ...config }
+        },
+    }
+}