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

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

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

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