@363045841yyt/klinechart-core 0.9.0-alpha.0 → 0.9.0-alpha.2

package/src/engine/renderers/__tests__/linesViaRenderer.test.ts

@@ -0,0 +1,263 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import type { Renderer } from '../../../rendering/render/Renderer'
+import {
+  compositeSceneRenderer,
+  drawFilledBandViaRenderer,
+  drawLinesViaRenderer,
+  shouldCompositeSceneRenderer,
+  tryDrawFilledBandGpu,
+} from '../linesViaRenderer'
+
+function mockRenderer(): Renderer & {
+  drawLines: ReturnType<typeof vi.fn>
+  createPipeline: ReturnType<typeof vi.fn>
+  destroyPipeline: ReturnType<typeof vi.fn>
+} {
+  return {
+    surface: {
+      isAvailable: () => true,
+      resize: () => {},
+      bindRegion: () => true,
+      clearRegion: () => {},
+      compositeTo: vi.fn(),
+      dispose: () => {},
+    },
+    caps: { compute: false, storageBuffer: false, maxInstances: 1e6, name: 'webgl2' },
+    createBuffer: vi.fn(() => ({}) as never),
+    writeBuffer: vi.fn(),
+    destroyBuffer: vi.fn(),
+    createPipeline: vi.fn(() => ({}) as never),
+    destroyPipeline: vi.fn(),
+    createComputePipeline: () => {
+      throw new Error('no')
+    },
+    destroyComputePipeline: () => {},
+    beginFrame: vi.fn(),
+    drawInstances: vi.fn(() => true),
+    drawLines: vi.fn(() => true),
+    dispatchCompute: () => {},
+    endFrame: vi.fn(),
+    dispose: vi.fn(),
+  } as never
+}
+
+describe('drawLinesViaRenderer', () => {
+  it('issues one batched drawLines with all strips (not N calls)', () => {
+    const r = mockRenderer()
+    const ok = drawLinesViaRenderer(
+      r,
+      [
+        {
+          points: [
+            { x: 0, y: 1 },
+            { x: 2, y: 3 },
+          ],
+          color: '#f00',
+          width: 1,
+        },
+        {
+          points: [
+            { x: 0, y: 0 },
+            { x: 1, y: 1 },
+            { x: 2, y: 0 },
+          ],
+          color: '#0f0',
+        },
+      ],
+      10,
+    )
+    expect(ok).toBe(true)
+    expect(r.drawLines).toHaveBeenCalledTimes(1)
+    const args = r.drawLines.mock.calls[0]![0]
+    expect(args.strips).toHaveLength(2)
+    expect(args.strips[0].color).toBe('#f00')
+    expect(args.strips[1].color).toBe('#0f0')
+    expect(args.uniforms.scrollLeft).toBe(10)
+  })
+
+  it('returns true without draw when no drawable strips', () => {
+    const r = mockRenderer()
+    expect(drawLinesViaRenderer(r, [{ points: [{ x: 0, y: 0 }], color: '#f00' }], 0)).toBe(true)
+    expect(r.drawLines).not.toHaveBeenCalled()
+  })
+
+  it('returns false when drawLines silent-fails', () => {
+    const r = mockRenderer()
+    r.drawLines.mockReturnValue(false)
+    expect(
+      drawLinesViaRenderer(
+        r,
+        [
+          {
+            points: [
+              { x: 0, y: 0 },
+              { x: 1, y: 1 },
+            ],
+            color: '#f00',
+          },
+        ],
+        0,
+      ),
+    ).toBe(false)
+  })
+
+  it('returns false when surface unavailable', () => {
+    const r = mockRenderer()
+    r.surface.isAvailable = () => false
+    expect(
+      drawLinesViaRenderer(
+        r,
+        [
+          {
+            points: [
+              { x: 0, y: 0 },
+              { x: 1, y: 1 },
+            ],
+            color: '#f00',
+          },
+        ],
+        0,
+      ),
+    ).toBe(false)
+  })
+})
+
+describe('drawFilledBandViaRenderer', () => {
+  it('uses fill pipeline and packs upper/lower points', () => {
+    const r = mockRenderer()
+    r.drawLines.mockReturnValue(true)
+    const ok = drawFilledBandViaRenderer(
+      r,
+      [
+        { x: 0, y: 10 },
+        { x: 1, y: 12 },
+      ],
+      [
+        { x: 0, y: 20 },
+        { x: 1, y: 22 },
+      ],
+      'rgba(0,0,255,0.2)',
+      5,
+    )
+    expect(ok).toBe(true)
+    expect(r.createPipeline).toHaveBeenCalledWith({ type: 'fill' })
+    expect(r.drawLines).toHaveBeenCalledTimes(1)
+    const args = r.drawLines.mock.calls[0]![0]
+    expect(args.vertexCount).toBe(4)
+    expect(args.uniforms.color).toBe('rgba(0,0,255,0.2)')
+    expect(args.uniforms.scrollLeft).toBe(5)
+  })
+
+  it('returns false when fewer than 2 points', () => {
+    const r = mockRenderer()
+    expect(drawFilledBandViaRenderer(r, [{ x: 0, y: 1 }], [{ x: 0, y: 2 }], '#00f', 0)).toBe(false)
+    expect(r.drawLines).not.toHaveBeenCalled()
+  })
+
+  it('reuses fill pipeline and vertex buffer across frames', () => {
+    const r = mockRenderer()
+    r.drawLines.mockReturnValue(true)
+    const upper = [
+      { x: 0, y: 10 },
+      { x: 1, y: 12 },
+    ]
+    const lower = [
+      { x: 0, y: 20 },
+      { x: 1, y: 22 },
+    ]
+    expect(drawFilledBandViaRenderer(r, upper, lower, '#00f', 0)).toBe(true)
+    expect(drawFilledBandViaRenderer(r, upper, lower, '#00f', 5)).toBe(true)
+    expect(r.createPipeline).toHaveBeenCalledTimes(1)
+    expect(r.createBuffer).toHaveBeenCalledTimes(1)
+    expect(r.destroyBuffer).not.toHaveBeenCalled()
+  })
+})
+
+describe('compositeSceneRenderer hybrid DOM', () => {
+  it('composites on webgl and skips on webgpu', () => {
+    const webgl = mockRenderer()
+    const webgpu = mockRenderer()
+    ;(webgpu.caps as { name: string }).name = 'webgpu'
+    expect(shouldCompositeSceneRenderer(webgl)).toBe(true)
+    expect(shouldCompositeSceneRenderer(webgpu)).toBe(false)
+
+    compositeSceneRenderer({
+      ctx: {} as CanvasRenderingContext2D,
+      pane: { top: 0, height: 100 },
+      paneWidth: 200,
+      dpr: 1,
+      sceneRenderer: webgpu,
+    })
+    expect(webgpu.surface.compositeTo).not.toHaveBeenCalled()
+
+    compositeSceneRenderer({
+      ctx: {} as CanvasRenderingContext2D,
+      pane: { top: 0, height: 100 },
+      paneWidth: 200,
+      dpr: 1,
+      sceneRenderer: webgl,
+    })
+    expect(webgl.surface.compositeTo).toHaveBeenCalledOnce()
+  })
+})
+
+describe('tryDrawFilledBandGpu alpha on hybrid DOM', () => {
+  const upper = [
+    { x: 0, y: 10 },
+    { x: 1, y: 12 },
+  ]
+  const lower = [
+    { x: 0, y: 20 },
+    { x: 1, y: 22 },
+  ]
+
+  it('webgl keeps opaque color and applies alpha via compositeTo', () => {
+    const r = mockRenderer()
+    r.drawLines.mockReturnValue(true)
+    const ok = tryDrawFilledBandGpu(
+      {
+        ctx: {} as CanvasRenderingContext2D,
+        pane: { top: 0, height: 100 },
+        paneWidth: 200,
+        dpr: 1,
+        sceneRenderer: r,
+      } as never,
+      upper,
+      lower,
+      'rgba(0, 128, 255, 1)',
+      0,
+      0.2,
+    )
+    expect(ok).toBe(true)
+    expect(r.drawLines.mock.calls[0]![0].uniforms.color).toBe('rgba(0, 128, 255, 1)')
+    expect(r.surface.compositeTo).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ alpha: 0.2 }),
+    )
+  })
+
+  it('webgpu bakes alpha into fill color and skips compositeTo', () => {
+    const r = mockRenderer()
+    ;(r.caps as { name: string }).name = 'webgpu'
+    r.drawLines.mockReturnValue(true)
+    const ok = tryDrawFilledBandGpu(
+      {
+        ctx: {} as CanvasRenderingContext2D,
+        pane: { top: 0, height: 100 },
+        paneWidth: 200,
+        dpr: 1,
+        sceneRenderer: r,
+      } as never,
+      upper,
+      lower,
+      'rgba(0, 128, 255, 1)',
+      0,
+      0.2,
+    )
+    expect(ok).toBe(true)
+    expect(r.drawLines.mock.calls[0]![0].uniforms.color).toBe('rgba(0, 128, 255, 0.2)')
+    expect(r.surface.compositeTo).not.toHaveBeenCalled()
+  })
+})

package/src/engine/renderers/__tests__/rectsViaRenderer.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import type { Renderer } from '../../../rendering/render/Renderer'
+import { drawRectBatchesViaRenderer } from '../rectsViaRenderer'
+
+function mockRenderer(): Renderer & {
+  drawInstances: ReturnType<typeof vi.fn>
+  writeBuffer: ReturnType<typeof vi.fn>
+} {
+  return {
+    surface: {
+      isAvailable: () => true,
+      resize: () => {},
+      bindRegion: () => true,
+      clearRegion: () => {},
+      compositeTo: vi.fn(),
+      dispose: () => {},
+    },
+    caps: { compute: false, storageBuffer: false, maxInstances: 1e6, name: 'webgl2' },
+    createBuffer: vi.fn(() => ({}) as never),
+    writeBuffer: vi.fn(),
+    destroyBuffer: vi.fn(),
+    createPipeline: vi.fn(() => ({}) as never),
+    destroyPipeline: vi.fn(),
+    createComputePipeline: () => {
+      throw new Error('no')
+    },
+    destroyComputePipeline: () => {},
+    beginFrame: vi.fn(),
+    drawInstances: vi.fn(() => true),
+    drawLines: vi.fn(() => true),
+    dispatchCompute: () => {},
+    endFrame: vi.fn(),
+    dispose: vi.fn(),
+  } as never
+}
+
+describe('drawRectBatchesViaRenderer', () => {
+  it('draws each non-empty batch via drawInstances', () => {
+    const r = mockRenderer()
+    const ok = drawRectBatchesViaRenderer(
+      r,
+      [
+        { buf: new Float32Array([0, 0, 10, 20]), count: 1, color: '#0f0' },
+        { buf: new Float32Array(0), count: 0, color: '#f00' },
+        { buf: new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]), count: 2, color: '#00f' },
+      ],
+      3,
+    )
+    expect(ok).toBe(true)
+    expect(r.drawInstances).toHaveBeenCalledTimes(2)
+  })
+
+  it('returns false when any batch fails', () => {
+    const r = mockRenderer()
+    r.drawInstances.mockReturnValueOnce(true).mockReturnValueOnce(false)
+    expect(
+      drawRectBatchesViaRenderer(
+        r,
+        [
+          { buf: new Float32Array([0, 0, 1, 1]), count: 1, color: '#0f0' },
+          { buf: new Float32Array([0, 0, 1, 1]), count: 1, color: '#f00' },
+        ],
+        0,
+      ),
+    ).toBe(false)
+  })
+
+  it('returns true when all counts are zero', () => {
+    const r = mockRenderer()
+    expect(
+      drawRectBatchesViaRenderer(r, [{ buf: new Float32Array(0), count: 0, color: '#0f0' }], 0),
+    ).toBe(true)
+    expect(r.drawInstances).not.toHaveBeenCalled()
+  })
+
+  it('caches pipeline and unit vertex buffer; creates + destroys instance buffer per batch', () => {
+    const r = mockRenderer()
+    const batches = [{ buf: new Float32Array([0, 0, 10, 20]), count: 1, color: '#0f0' }]
+    expect(drawRectBatchesViaRenderer(r, batches, 0)).toBe(true)
+    expect(drawRectBatchesViaRenderer(r, batches, 3)).toBe(true)
+    expect(r.createPipeline).toHaveBeenCalledTimes(1)
+    // unit buffer created once; each batch creates its own instance buffer
+    expect(r.createBuffer).toHaveBeenCalledTimes(3)
+    expect(r.destroyBuffer).toHaveBeenCalledTimes(2)
+  })
+})

package/src/engine/renderers/candle.ts

@@ -10,6 +10,7 @@ import {
 } from '../../foundation/utils/volumePrice'
 import type { MarkerManager } from '../marker/registry'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
+import { drawCandlesViaRenderer } from './candleViaRenderer'
 
 // --- Float32Array buffer pool (reduces per-frame GC pressure) ---
 let poolUpBody: Float32Array | null = null
@@ -108,22 +109,33 @@ export function createCandleRenderer(): RendererPlugin {
         settings,
       })
 
-      const usedWebGL = drawCandlesWithWebGL(
-        context,
-        prepared,
-        colors.candleUpBody,
-        colors.candleDownBody,
-      )
-      if (!usedWebGL) {
-        drawCandlesWithCanvas2D(
-          ctx,
-          scrollLeft,
+      const upColor = colors.candleUpBody
+      const downColor = colors.candleDownBody
+      // sceneRenderer → fail-closed 2D
+      let usedGpu = false
+      if (context.sceneRenderer) {
+        usedGpu = drawCandlesViaRenderer(
+          context.sceneRenderer,
           prepared,
-          colors.candleUpBody,
-          colors.candleDownBody,
+          upColor,
+          downColor,
+          scrollLeft,
         )
-      } else {
-        compositeWebGLToMainCanvas(ctx, context)
+        if (usedGpu && context.sceneRenderer.caps.name !== 'webgpu') {
+          const region = {
+            x: 0,
+            y: pane.top,
+            width: context.viewport?.plotWidth ?? context.paneWidth,
+            height: pane.height,
+            dpr,
+          }
+          context.sceneRenderer.surface.compositeTo(ctx, region, {
+            imageSmoothingEnabled: false,
+          })
+        }
+      }
+      if (!usedGpu) {
+        drawCandlesWithCanvas2D(ctx, scrollLeft, prepared, upColor, downColor)
       }
 
       drawVolumePriceMarkers(context, prepared, markerManager as MarkerManager | undefined)
@@ -369,61 +381,6 @@ function drawCandlesWithCanvas2D(
   ctx.restore()
 }
 
-function drawCandlesWithWebGL(
-  context: RenderContext,
-  prepared: PreparedCandles,
-  upColor: string,
-  downColor: string,
-): boolean {
-  if (context.settings?.enableWebGLRendering === false) return false
-  const surface = context.candleWebGLSurface
-  if (!surface || !surface.isAvailable()) return false
-
-  surface.clear()
-
-  const bodyUpOk =
-    prepared.upBodyCount === 0 ||
-    surface.drawRectBuffer(
-      prepared.upBodyBuf.subarray(0, prepared.upBodyCount * 4),
-      prepared.upBodyCount,
-      upColor,
-      context.scrollLeft,
-    )
-  const bodyDownOk =
-    prepared.downBodyCount === 0 ||
-    surface.drawRectBuffer(
-      prepared.downBodyBuf.subarray(0, prepared.downBodyCount * 4),
-      prepared.downBodyCount,
-      downColor,
-      context.scrollLeft,
-    )
-  const wickUpOk =
-    prepared.upWickCount === 0 ||
-    surface.drawRectBuffer(
-      prepared.upWickBuf.subarray(0, prepared.upWickCount * 4),
-      prepared.upWickCount,
-      upColor,
-      context.scrollLeft,
-    )
-  const wickDownOk =
-    prepared.downWickCount === 0 ||
-    surface.drawRectBuffer(
-      prepared.downWickBuf.subarray(0, prepared.downWickCount * 4),
-      prepared.downWickCount,
-      downColor,
-      context.scrollLeft,
-    )
-
-  return bodyUpOk && bodyDownOk && wickUpOk && wickDownOk
-}
-
-function compositeWebGLToMainCanvas(ctx: CanvasRenderingContext2D, context: RenderContext): void {
-  const surface = context.candleWebGLSurface
-  if (!surface) return
-
-  surface.compositeTo(ctx)
-}
-
 function drawVolumePriceMarkers(
   context: RenderContext,
   prepared: PreparedCandles,

package/src/engine/renderers/candleViaRenderer.ts

@@ -0,0 +1,38 @@
+import type { Renderer } from '../../rendering/render/Renderer'
+import { drawRectBatchesViaRenderer } from './rectsViaRenderer'
+
+/** 与 prepareCandles 输出对齐的矩形 batch（仅 GPU 路径所需字段） */
+export type CandleRectBatch = {
+  upBodyCount: number
+  downBodyCount: number
+  upWickCount: number
+  downWickCount: number
+  upBodyBuf: Float32Array
+  downBodyBuf: Float32Array
+  upWickBuf: Float32Array
+  downWickBuf: Float32Array
+}
+
+/**
+ * 经 Renderer.drawInstances 画 body/wick。
+ * 任一非空 batch 绘制失败 → false（调用方应走 2D）。
+ * 不负责 composite。
+ */
+export function drawCandlesViaRenderer(
+  renderer: Renderer,
+  prepared: CandleRectBatch,
+  upColor: string,
+  downColor: string,
+  scrollLeft: number,
+): boolean {
+  return drawRectBatchesViaRenderer(
+    renderer,
+    [
+      { buf: prepared.upBodyBuf, count: prepared.upBodyCount, color: upColor },
+      { buf: prepared.downBodyBuf, count: prepared.downBodyCount, color: downColor },
+      { buf: prepared.upWickBuf, count: prepared.upWickCount, color: upColor },
+      { buf: prepared.downWickBuf, count: prepared.downWickCount, color: downColor },
+    ],
+    scrollLeft,
+  )
+}