@363045841yyt/klinechart-core 0.7.3

package/src/engine/renderers/webgl/sharedWebGLSurface.ts

@@ -0,0 +1,146 @@
+export type WebGLRegion = {
+    x: number
+    y: number
+    width: number
+    height: number
+    dpr: number
+}
+
+export type WebGLCompositeOptions = {
+    alpha?: number
+    imageSmoothingEnabled?: boolean
+}
+
+export type PhysicalRegion = {
+    sourceX: number
+    sourceY: number
+    widthPx: number
+    heightPx: number
+}
+
+export class SharedWebGLSurface {
+    private canvas: HTMLCanvasElement
+    private gl: WebGL2RenderingContext | null = null
+
+    constructor(canvas?: HTMLCanvasElement) {
+        this.canvas = canvas ?? document.createElement('canvas')
+        this.gl = this.initContext()
+    }
+
+    isAvailable(): boolean {
+        return this.gl !== null
+    }
+
+    getGL(): WebGL2RenderingContext | null {
+        return this.gl
+    }
+
+    getCanvas(): HTMLCanvasElement {
+        return this.canvas
+    }
+
+    resize(width: number, height: number, dpr: number): void {
+        const nextWidth = Math.max(1, Math.round(width * dpr))
+        const nextHeight = Math.max(1, Math.round(height * dpr))
+
+        if (this.canvas.width !== nextWidth) {
+            this.canvas.width = nextWidth
+        }
+        if (this.canvas.height !== nextHeight) {
+            this.canvas.height = nextHeight
+        }
+    }
+
+    getPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
+        return this.toPhysicalRegion(region)
+    }
+
+    bindRegion(region: WebGLRegion): boolean {
+        const gl = this.gl
+        const physical = this.toPhysicalRegion(region)
+        if (!gl || !physical) return false
+
+        const viewportY = this.canvas.height - physical.sourceY - physical.heightPx
+        gl.enable(gl.SCISSOR_TEST)
+        gl.viewport(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
+        gl.scissor(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
+        return true
+    }
+
+    clearRegion(region: WebGLRegion): void {
+        const gl = this.gl
+        if (!gl || !this.bindRegion(region)) return
+
+        gl.clearColor(0, 0, 0, 0)
+        gl.clear(gl.COLOR_BUFFER_BIT)
+    }
+
+    compositeRegionTo(ctx: CanvasRenderingContext2D, region: WebGLRegion, options: WebGLCompositeOptions = {}): void {
+        const physical = this.toPhysicalRegion(region)
+        if (!physical || physical.widthPx <= 0 || physical.heightPx <= 0) return
+
+        const prevImageSmoothingEnabled = ctx.imageSmoothingEnabled
+        const prevGlobalAlpha = ctx.globalAlpha
+        const prevTransform = ctx.getTransform()
+
+        if (options.imageSmoothingEnabled !== undefined) {
+            ctx.imageSmoothingEnabled = options.imageSmoothingEnabled
+        }
+        if (options.alpha !== undefined) {
+            ctx.globalAlpha = prevGlobalAlpha * options.alpha
+        }
+
+        ctx.setTransform(1, 0, 0, 1, 0, 0)
+        ctx.drawImage(
+            this.canvas,
+            physical.sourceX,
+            physical.sourceY,
+            physical.widthPx,
+            physical.heightPx,
+            0,
+            0,
+            physical.widthPx,
+            physical.heightPx,
+        )
+        ctx.setTransform(prevTransform)
+
+        ctx.globalAlpha = prevGlobalAlpha
+        ctx.imageSmoothingEnabled = prevImageSmoothingEnabled
+    }
+
+    destroy(): void {
+        this.canvas.width = 1
+        this.canvas.height = 1
+        this.gl = null
+    }
+
+    private toPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
+        const widthPx = Math.max(0, Math.round(region.width * region.dpr))
+        const heightPx = Math.max(0, Math.round(region.height * region.dpr))
+        if (widthPx <= 0 || heightPx <= 0) return null
+
+        const sourceX = Math.max(0, Math.round(region.x * region.dpr))
+        const sourceY = Math.max(0, Math.round(region.y * region.dpr))
+        return {
+            sourceX,
+            sourceY,
+            widthPx,
+            heightPx,
+        }
+    }
+
+    private initContext(): WebGL2RenderingContext | null {
+        try {
+            return this.canvas.getContext('webgl2', {
+                alpha: true,
+                antialias: false,
+                depth: false,
+                stencil: false,
+                premultipliedAlpha: true,
+                preserveDrawingBuffer: false,
+            })
+        } catch {
+            return null
+        }
+    }
+}

package/src/engine/renderers/yAxis.ts

@@ -0,0 +1,105 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
+import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '../../utils/kLineDraw/axis'
+import { drawScaleTicks } from '../renderers/Indicator/scale/indicator_scale'
+import { getColors } from '../theme/colors'
+import type { KLineData } from '../../types/price'
+import type { ScaleType } from '../utils/tickPosition'
+
+/**
+ * 创建 Y 轴渲染器插件
+ * 按 pane capability 决定是否绘制刻度与价格标签
+ */
+export function createYAxisRendererPlugin(options: {
+  axisWidth: number
+  yPaddingPx: number
+  getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPlugin {
+  return {
+    name: 'yAxis',
+    version: '1.0.0',
+    description: 'Y轴价格刻度渲染器',
+    debugName: 'Y轴',
+    paneId: GLOBAL_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
+
+    draw(context: RenderContext) {
+      const { ctx, pane, dpr, yAxisCtx, data } = context
+      const colors = getColors(context.theme)
+      const scaleType = pane.yAxis.getScaleType()
+
+      const targetCtx = yAxisCtx || ctx
+      const axisWidth = yAxisCtx?.canvas ? (yAxisCtx.canvas.width / dpr) : options.axisWidth
+      const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
+
+      if (pane.capabilities.showPriceAxisTicks) {
+        drawScaleTicks({
+          colors,
+          ctx: targetCtx,
+          dpr,
+          axisWidth,
+          height: pane.height,
+          paddingTop: pane.yAxis.getPaddingTop(),
+          paddingBottom: pane.yAxis.getPaddingBottom(),
+          valueMin: displayRange.minPrice,
+          valueMax: displayRange.maxPrice,
+          isMain: true,
+          decimals: 2,
+          hideEdgeTicks: false,
+          scaleType,
+        })
+      }
+
+      // 绘制价格范围带（先于标签，使标签覆盖在范围带之上）
+      if (context.yAxisRanges && pane.role === 'price') {
+        for (const range of context.yAxisRanges) {
+          const topY = range.topY + pane.top
+          const bandHeight = range.bottomY - range.topY
+          if (bandHeight <= 0) continue
+          targetCtx.save()
+          targetCtx.globalAlpha = range.opacity
+          targetCtx.fillStyle = range.color
+          targetCtx.fillRect(0, topY, axisWidth, bandHeight)
+          targetCtx.restore()
+        }
+      }
+
+      // 绘制来自 yAxisLabels 的标签（最新价格、极值点、绘图锚点等）
+      if (context.yAxisLabels && pane.role === 'price') {
+        for (const label of context.yAxisLabels) {
+          const isLastPrice = label.type === 'lastPrice'
+          drawAxisPriceLabel(targetCtx, {
+            x: 0,
+            y: pane.top,
+            width: axisWidth,
+            height: pane.height,
+            priceY: label.y + pane.top,
+            price: label.price,
+            dpr,
+            bgColor: label.style?.bgColor ?? 'rgba(0, 0, 0, 0.8)',
+            borderColor: label.style?.borderColor,
+            textColor: label.style?.textColor ?? '#ffffff',
+            fontSize: isLastPrice ? 12 : 11,
+          })
+        }
+      }
+
+      const crosshair = options.getCrosshair?.()
+      if (crosshair && crosshair.activePaneId === pane.id && crosshair.price !== null) {
+        drawCrosshairPriceLabel(targetCtx, {
+          x: 0,
+          y: pane.top,
+          width: axisWidth,
+          height: pane.height,
+          crosshairY: crosshair.y,
+          priceRange: displayRange,
+          yPaddingPx: options.yPaddingPx,
+          dpr,
+          fontSize: 12,
+          priceOffset: 0,
+          price: crosshair.price,
+        })
+      }
+    },
+  }
+}

package/src/engine/scale/__tests__/logFormula.spec.ts

@@ -0,0 +1,148 @@
+import { describe, it, expect } from 'vitest'
+import {
+    toLog,
+    fromLog,
+    logFormulaForPriceRange,
+    convertPriceRangeToLog,
+    convertPriceRangeFromLog,
+    logFormulasAreSame,
+    type LogFormula,
+} from '../logFormula'
+
+describe('logFormula', () => {
+    const defaultFormula: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+
+    describe('toLog / fromLog', () => {
+        it('should round-trip for positive prices', () => {
+            const testPrices = [1, 10, 100, 0.1, 0.01, 50000, 0.0001]
+            for (const price of testPrices) {
+                const logical = toLog(price, defaultFormula)
+                const back = fromLog(logical, defaultFormula)
+                expect(back).toBeCloseTo(price, 10)
+            }
+        })
+
+        it('should round-trip for negative prices', () => {
+            const testPrices = [-1, -10, -100, -0.1, -0.01]
+            for (const price of testPrices) {
+                const logical = toLog(price, defaultFormula)
+                const back = fromLog(logical, defaultFormula)
+                expect(back).toBeCloseTo(price, 10)
+            }
+        })
+
+        it('should return 0 for zero', () => {
+            expect(toLog(0, defaultFormula)).toBe(0)
+            expect(fromLog(0, defaultFormula)).toBe(0)
+        })
+
+        it('should handle very small prices with precision', () => {
+            const tinyPrice = 1e-9
+            const logical = toLog(tinyPrice, defaultFormula)
+            const back = fromLog(logical, defaultFormula)
+            expect(back).toBeCloseTo(tinyPrice, 10)
+        })
+
+        it('should preserve sign', () => {
+            expect(toLog(100, defaultFormula)).toBeGreaterThan(0)
+            expect(toLog(-100, defaultFormula)).toBeLessThan(0)
+        })
+    })
+
+    describe('logFormulaForPriceRange', () => {
+        it('should return default formula for normal range', () => {
+            const range = { minPrice: 10, maxPrice: 100 }
+            const formula = logFormulaForPriceRange(range)
+            expect(formula.logicalOffset).toBe(4)
+            expect(formula.coordOffset).toBe(0.0001)
+        })
+
+        it('should return default formula for range >= 1', () => {
+            const range = { minPrice: 0.5, maxPrice: 2.5 }  // diff = 2
+            const formula = logFormulaForPriceRange(range)
+            expect(formula.logicalOffset).toBe(4)
+        })
+
+        it('should increase offsets for small range (< 1)', () => {
+            const range = { minPrice: 0.001, maxPrice: 0.002 }  // diff = 0.001 = 1e-3
+            const formula = logFormulaForPriceRange(range)
+            // diff = 0.001, digits = ceil(3) = 3
+            // logicalOffset = 4 + 3 = 7
+            expect(formula.logicalOffset).toBe(7)
+            expect(formula.coordOffset).toBe(1e-7)
+        })
+
+        it('should handle very small range', () => {
+            const range = { minPrice: 1e-9, maxPrice: 2e-9 }
+            const formula = logFormulaForPriceRange(range)
+            // diff = 1e-9, digits = ceil(9) = 9
+            // logicalOffset = 4 + 9 = 13
+            expect(formula.logicalOffset).toBe(13)
+            expect(formula.coordOffset).toBe(1e-13)
+        })
+
+        it('should return default formula for null range', () => {
+            const formula = logFormulaForPriceRange(null)
+            expect(formula.logicalOffset).toBe(4)
+            expect(formula.coordOffset).toBe(0.0001)
+        })
+
+        it('should return default formula for zero diff', () => {
+            const range = { minPrice: 100, maxPrice: 100 }
+            const formula = logFormulaForPriceRange(range)
+            expect(formula.logicalOffset).toBe(4)
+        })
+    })
+
+    describe('convertPriceRangeToLog / convertPriceRangeFromLog', () => {
+        it('should round-trip range conversion', () => {
+            const range = { minPrice: 10, maxPrice: 1000 }
+            const logRange = convertPriceRangeToLog(range, defaultFormula)
+            const back = convertPriceRangeFromLog(logRange, defaultFormula)
+            expect(back.minPrice).toBeCloseTo(range.minPrice, 10)
+            expect(back.maxPrice).toBeCloseTo(range.maxPrice, 10)
+        })
+    })
+
+    describe('logFormulasAreSame', () => {
+        it('should return true for identical formulas', () => {
+            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+            const b: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+            expect(logFormulasAreSame(a, b)).toBe(true)
+        })
+
+        it('should return false for different offsets', () => {
+            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+            const b: LogFormula = { logicalOffset: 5, coordOffset: 0.0001 }
+            expect(logFormulasAreSame(a, b)).toBe(false)
+        })
+
+        it('should return false for different coordOffsets', () => {
+            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+            const b: LogFormula = { logicalOffset: 4, coordOffset: 0.001 }
+            expect(logFormulasAreSame(a, b)).toBe(false)
+        })
+    })
+
+    describe('precision with dynamic formula', () => {
+        it('should maintain precision for crypto-scale prices', () => {
+            const range = { minPrice: 1e-9, maxPrice: 5e-9 }
+            const formula = logFormulaForPriceRange(range)
+
+            // Test that we can represent values in this range accurately
+            const testPrice = 2.5e-9
+            const logical = toLog(testPrice, formula)
+            const back = fromLog(logical, formula)
+            expect(back).toBeCloseTo(testPrice, 10)
+        })
+
+        it('should handle nano-scale prices', () => {
+            const range = { minPrice: 1e-12, maxPrice: 2e-12 }
+            const formula = logFormulaForPriceRange(range)
+            const testPrice = 1.5e-12
+            const logical = toLog(testPrice, formula)
+            const back = fromLog(logical, formula)
+            expect(back).toBeCloseTo(testPrice, 10)
+        })
+    })
+})

package/src/engine/scale/logFormula.ts

@@ -0,0 +1,130 @@
+import type { PriceRange } from './price'
+
+/**
+ * LogFormula 接口
+ * 用于对数变换的动态偏移，保证极小值下的精度
+ *
+ * - logicalOffset: 逻辑偏移，使输出值落在合理范围
+ * - coordOffset: 坐标偏移，避免 log10(0) 并提升精度
+ */
+export interface LogFormula {
+    logicalOffset: number
+    coordOffset: number
+}
+
+/** 默认 LogFormula */
+const DEFAULT_FORMULA: LogFormula = {
+    logicalOffset: 4,
+    coordOffset: 0.0001,
+}
+
+/**
+ * 判断数值是否近似为零
+ */
+function isZero(value: number): boolean {
+    return Math.abs(value) < 1e-15
+}
+
+/**
+ * 真实价格 → log 逻辑空间
+ * 公式: sign(price) * (log10(|price| + coordOffset) + logicalOffset)
+ *
+ * @param price 真实价格（可为负数）
+ * @param f LogFormula
+ * @returns log 逻辑空间值
+ */
+export function toLog(price: number, f: LogFormula): number {
+    const m = Math.abs(price)
+    if (isZero(m)) {
+        return 0
+    }
+    const res = Math.log10(m + f.coordOffset) + f.logicalOffset
+    return price < 0 ? -res : res
+}
+
+/**
+ * log 逻辑空间 → 真实价格
+ * 公式: sign(logical) * (10^(|logical| - logicalOffset) - coordOffset)
+ *
+ * @param logical log 逻辑空间值
+ * @param f LogFormula
+ * @returns 真实价格
+ */
+export function fromLog(logical: number, f: LogFormula): number {
+    const m = Math.abs(logical)
+    if (isZero(m)) {
+        return 0
+    }
+    const res = Math.pow(10, m - f.logicalOffset) - f.coordOffset
+    return logical < 0 ? -res : res
+}
+
+/**
+ * 根据价格范围动态计算 LogFormula
+ *
+ * 对于常规价格范围 (diff >= 1)，使用默认值。
+ * 对于极小价格范围 (diff < 1)，自动增大 logicalOffset 以维持精度。
+ *
+ * @param range 价格范围，可为 null
+ * @returns 最优的 LogFormula
+ */
+export function logFormulaForPriceRange(range: PriceRange | null): LogFormula {
+    if (range === null) {
+        return { ...DEFAULT_FORMULA }
+    }
+
+    const diff = Math.abs(range.maxPrice - range.minPrice)
+    // 常规范围或无效范围，使用默认公式
+    if (diff >= 1 || diff < 1e-15) {
+        return { ...DEFAULT_FORMULA }
+    }
+
+    // 极小范围：根据精度需求增大偏移
+    // 例如 diff = 0.0001 (1e-4)，需要增加 4 位偏移
+    const digits = Math.ceil(Math.abs(Math.log10(diff)))
+    const logicalOffset = DEFAULT_FORMULA.logicalOffset + digits
+    const coordOffset = 1 / Math.pow(10, logicalOffset)
+
+    return { logicalOffset, coordOffset }
+}
+
+/**
+ * 范围转 log 空间
+ * 将价格的 min/max 都转换到 log 空间
+ *
+ * @param range 真实价格范围
+ * @param f LogFormula
+ * @returns log 空间的价格范围
+ */
+export function convertPriceRangeToLog(range: PriceRange, f: LogFormula): PriceRange {
+    return {
+        minPrice: toLog(range.minPrice, f),
+        maxPrice: toLog(range.maxPrice, f),
+    }
+}
+
+/**
+ * 范围从 log 空间转回
+ * 将 log 空间的 min/max 转换回真实价格
+ *
+ * @param range log 空间的价格范围
+ * @param f LogFormula
+ * @returns 真实价格范围
+ */
+export function convertPriceRangeFromLog(range: PriceRange, f: LogFormula): PriceRange {
+    return {
+        minPrice: fromLog(range.minPrice, f),
+        maxPrice: fromLog(range.maxPrice, f),
+    }
+}
+
+/**
+ * 判断两个 LogFormula 是否相同
+ *
+ * @param a LogFormula A
+ * @param b LogFormula B
+ * @returns 是否相同
+ */
+export function logFormulasAreSame(a: LogFormula, b: LogFormula): boolean {
+    return a.logicalOffset === b.logicalOffset && a.coordOffset === b.coordOffset
+}

package/src/engine/scale/price.ts

@@ -0,0 +1,39 @@
+// 价格坐标系：价格 <-> 绘图区 Y（逻辑像素）
+
+export type PriceRange = { maxPrice: number; minPrice: number }
+
+export function priceToY(
+    price: number,
+    maxPrice: number,
+    minPrice: number,
+    canvasHeight: number,
+    paddingTop: number,
+    paddingBottom: number,
+): number {
+    const range = maxPrice - minPrice || 1
+    const ratio = (price - minPrice) / range
+
+    const viewHeight = Math.max(1, canvasHeight - paddingTop - paddingBottom)
+    return paddingTop + viewHeight * (1 - ratio)
+}
+
+/**
+ * 将逻辑像素 y 反算回价格
+ * - y 是相对于绘图区顶部的逻辑像素坐标（不含额外 translate）
+ * - paddingTop/paddingBottom 需与 priceToY 使用一致
+ */
+export function yToPrice(
+    y: number,
+    maxPrice: number,
+    minPrice: number,
+    canvasHeight: number,
+    paddingTop: number,
+    paddingBottom: number,
+): number {
+    const range = maxPrice - minPrice || 1
+    const viewHeight = Math.max(1, canvasHeight - paddingTop - paddingBottom)
+    const clampedY = Math.min(Math.max(y, paddingTop), paddingTop + viewHeight)
+    const ratio = 1 - (clampedY - paddingTop) / viewHeight
+    return minPrice + ratio * range
+}
+