@363045841yyt/klinechart-core 0.7.3 → 0.7.5-alpha.2

package/src/engine/renderers/extremaMarkers.ts

@@ -1,246 +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,
-    }
-}
+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

@@ -1,90 +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()
-        },
-    }
-}
+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()
+        },
+    }
+}