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

package/src/engine/__tests__/paneRenderer.resize.test.ts

@@ -1,92 +1,92 @@
-import { describe, expect, it } from 'vitest'
-import { Pane } from '@/core/layout/pane'
-import { PaneRenderer } from '@/core/paneRenderer'
-import { SharedWebGLSurface } from '@/core/renderers/webgl/sharedWebGLSurface'
-
-describe('PaneRenderer resize DPR mapping', () => {
-  it('maps logical plot size to physical canvas size and keeps CSS size logical', () => {
-    const mainCanvas = document.createElement('canvas')
-    const overlayCanvas = document.createElement('canvas')
-    const yAxisCanvas = document.createElement('canvas')
-    const pane = new Pane('main')
-    const sharedWebGLSurface = new SharedWebGLSurface()
-    const renderer = new PaneRenderer(
-      { mainCanvas, overlayCanvas, yAxisCanvas },
-      pane,
-      {
-        rightAxisWidth: 80,
-        yPaddingPx: 0,
-        priceLabelWidth: 60,
-      },
-      sharedWebGLSurface,
-    )
-
-    renderer.resize(500, 240, 2)
-
-    expect(mainCanvas.width).toBe(Math.round(500 * 2))
-    expect(mainCanvas.height).toBe(Math.round(240 * 2))
-    expect(mainCanvas.style.width).toBe('500px')
-    expect(mainCanvas.style.height).toBe('240px')
-    // overlayCanvas should match mainCanvas
-    expect(overlayCanvas.width).toBe(mainCanvas.width)
-    expect(overlayCanvas.height).toBe(mainCanvas.height)
-  })
-
-  it('uses (rightAxisWidth + priceLabelWidth) for yAxis physical width when no parent width is available', () => {
-    const mainCanvas = document.createElement('canvas')
-    const overlayCanvas = document.createElement('canvas')
-    const yAxisCanvas = document.createElement('canvas')
-    const pane = new Pane('main')
-    const sharedWebGLSurface = new SharedWebGLSurface()
-    const renderer = new PaneRenderer(
-      { mainCanvas, overlayCanvas, yAxisCanvas },
-      pane,
-      {
-        rightAxisWidth: 100,
-        yPaddingPx: 0,
-        priceLabelWidth: 70,
-      },
-      sharedWebGLSurface,
-    )
-
-    renderer.resize(500, 200, 1.5)
-
-    expect(yAxisCanvas.width).toBe(Math.round((100 + 70) * 1.5))
-    expect(yAxisCanvas.height).toBe(Math.round(200 * 1.5))
-    expect(yAxisCanvas.style.width).toBe('170px')
-    expect(yAxisCanvas.style.height).toBe('200px')
-  })
-
-  it('uses parent clientWidth for yAxis canvas width when available', () => {
-    const host = document.createElement('div')
-    Object.defineProperty(host, 'clientWidth', {
-      value: 168,
-      configurable: true,
-    })
-
-    const mainCanvas = document.createElement('canvas')
-    const overlayCanvas = document.createElement('canvas')
-    const yAxisCanvas = document.createElement('canvas')
-    host.appendChild(yAxisCanvas)
-
-    const pane = new Pane('main')
-    const sharedWebGLSurface = new SharedWebGLSurface()
-    const renderer = new PaneRenderer(
-      { mainCanvas, overlayCanvas, yAxisCanvas },
-      pane,
-      {
-        rightAxisWidth: 100,
-        yPaddingPx: 0,
-        priceLabelWidth: 70,
-      },
-      sharedWebGLSurface,
-    )
-
-    renderer.resize(500, 200, 1.5)
-
-    expect(yAxisCanvas.width).toBe(Math.round(168 * 1.5))
-    expect(yAxisCanvas.height).toBe(Math.round(200 * 1.5))
-    expect(yAxisCanvas.style.width).toBe('168px')
-    expect(yAxisCanvas.style.height).toBe('200px')
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { Pane } from '@/core/layout/pane'
+import { PaneRenderer } from '@/core/paneRenderer'
+import { SharedWebGLSurface } from '@/core/renderers/webgl/sharedWebGLSurface'
+
+describe('PaneRenderer resize DPR mapping', () => {
+  it('maps logical plot size to physical canvas size and keeps CSS size logical', () => {
+    const mainCanvas = document.createElement('canvas')
+    const overlayCanvas = document.createElement('canvas')
+    const yAxisCanvas = document.createElement('canvas')
+    const pane = new Pane('main')
+    const sharedWebGLSurface = new SharedWebGLSurface()
+    const renderer = new PaneRenderer(
+      { mainCanvas, overlayCanvas, yAxisCanvas },
+      pane,
+      {
+        rightAxisWidth: 80,
+        yPaddingPx: 0,
+        priceLabelWidth: 60,
+      },
+      sharedWebGLSurface,
+    )
+
+    renderer.resize(500, 240, 2)
+
+    expect(mainCanvas.width).toBe(Math.round(500 * 2))
+    expect(mainCanvas.height).toBe(Math.round(240 * 2))
+    expect(mainCanvas.style.width).toBe('500px')
+    expect(mainCanvas.style.height).toBe('240px')
+    // overlayCanvas should match mainCanvas
+    expect(overlayCanvas.width).toBe(mainCanvas.width)
+    expect(overlayCanvas.height).toBe(mainCanvas.height)
+  })
+
+  it('uses (rightAxisWidth + priceLabelWidth) for yAxis physical width when no parent width is available', () => {
+    const mainCanvas = document.createElement('canvas')
+    const overlayCanvas = document.createElement('canvas')
+    const yAxisCanvas = document.createElement('canvas')
+    const pane = new Pane('main')
+    const sharedWebGLSurface = new SharedWebGLSurface()
+    const renderer = new PaneRenderer(
+      { mainCanvas, overlayCanvas, yAxisCanvas },
+      pane,
+      {
+        rightAxisWidth: 100,
+        yPaddingPx: 0,
+        priceLabelWidth: 70,
+      },
+      sharedWebGLSurface,
+    )
+
+    renderer.resize(500, 200, 1.5)
+
+    expect(yAxisCanvas.width).toBe(Math.round((100 + 70) * 1.5))
+    expect(yAxisCanvas.height).toBe(Math.round(200 * 1.5))
+    expect(yAxisCanvas.style.width).toBe('170px')
+    expect(yAxisCanvas.style.height).toBe('200px')
+  })
+
+  it('uses parent clientWidth for yAxis canvas width when available', () => {
+    const host = document.createElement('div')
+    Object.defineProperty(host, 'clientWidth', {
+      value: 168,
+      configurable: true,
+    })
+
+    const mainCanvas = document.createElement('canvas')
+    const overlayCanvas = document.createElement('canvas')
+    const yAxisCanvas = document.createElement('canvas')
+    host.appendChild(yAxisCanvas)
+
+    const pane = new Pane('main')
+    const sharedWebGLSurface = new SharedWebGLSurface()
+    const renderer = new PaneRenderer(
+      { mainCanvas, overlayCanvas, yAxisCanvas },
+      pane,
+      {
+        rightAxisWidth: 100,
+        yPaddingPx: 0,
+        priceLabelWidth: 70,
+      },
+      sharedWebGLSurface,
+    )
+
+    renderer.resize(500, 200, 1.5)
+
+    expect(yAxisCanvas.width).toBe(Math.round(168 * 1.5))
+    expect(yAxisCanvas.height).toBe(Math.round(200 * 1.5))
+    expect(yAxisCanvas.style.width).toBe('168px')
+    expect(yAxisCanvas.style.height).toBe('200px')
+  })
+})

package/src/engine/chart-store.ts

@@ -1,121 +1,121 @@
-import { reactive, computed, type UnwrapNestedRefs } from 'vue'
-import { getPhysicalKLineConfig } from './utils/klineConfig'
-import type { DrawingObject } from '../plugin'
-
-/** 右侧空白绘制槽位数（逻辑 bar 数） */
-export const TRAILING_DRAWING_SLOTS = 24
-
-export interface ChartStoreOptions {
-  initialZoomLevel: number
-  minKWidth: number
-  maxKWidth: number
-  zoomLevels: number
-  rightAxisWidth: number
-  priceLabelWidth: number
-}
-
-export function computeContentWidth(params: {
-  dataLength: number
-  kWidth: number
-  kGap: number
-  viewWidth: number
-  viewportDpr: number
-}): number {
-  const { dataLength, kWidth, kGap, viewWidth, viewportDpr } = params
-  if (dataLength === 0) return 0
-  const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, viewportDpr)
-  const dataPlotWidth = (startXPx + (dataLength + TRAILING_DRAWING_SLOTS) * unitPx) / viewportDpr
-  return Math.max(dataPlotWidth, viewWidth)
-}
-
-export function createChartStore(opts: ChartStoreOptions) {
-  const state = reactive({
-    zoomLevel: opts.initialZoomLevel,
-    kWidth: 0,
-    kGap: 1,
-    viewportDpr: 1,
-    dataLength: 0,
-    dataVersion: 0,
-    paneRatios: {} as Record<string, number>,
-    drawings: [] as DrawingObject[],
-    selectedDrawingId: null as string | null,
-    drawingVersion: 0,
-    viewWidth: 0,
-  })
-
-  // 右侧轴宽度
-  const axisHostWidth = computed(() => opts.rightAxisWidth + opts.priceLabelWidth)
-
-  const totalWidth = computed(() =>
-    computeContentWidth({
-      dataLength: state.dataLength,
-      kWidth: state.kWidth,
-      kGap: state.kGap,
-      viewWidth: state.viewWidth,
-      viewportDpr: state.viewportDpr,
-    }),
-  )
-
-  function bumpDataVersion() {
-    state.dataVersion++
-  }
-
-  function bumpDrawingVersion() {
-    state.drawingVersion++
-  }
-
-  function setDataLength(length: number) {
-    state.dataLength = length
-  }
-
-  function setViewportDpr(dpr: number) {
-    state.viewportDpr = dpr
-  }
-
-  function setViewWidth(width: number) {
-    state.viewWidth = width
-  }
-
-  function setZoomState(level: number, newKWidth: number, newKGap: number) {
-    state.zoomLevel = level
-    state.kWidth = newKWidth
-    state.kGap = newKGap
-  }
-
-  function setPaneRatios(ratios: Record<string, number>) {
-    state.paneRatios = ratios
-  }
-
-  function setDrawings(newDrawings: DrawingObject[]) {
-    state.drawings = newDrawings
-    if (state.selectedDrawingId && !newDrawings.some((d) => d.id === state.selectedDrawingId)) {
-      state.selectedDrawingId = null
-    }
-    state.drawingVersion++
-  }
-
-  function setSelectedDrawingId(id: string | null) {
-    state.selectedDrawingId = id
-  }
-
-  return {
-    state: state as UnwrapNestedRefs<typeof state>,
-    computed: {
-      axisHostWidth,
-      totalWidth,
-    },
-    actions: {
-      bumpDataVersion,
-      bumpDrawingVersion,
-      setDataLength,
-      setViewportDpr,
-      setViewWidth,
-      setZoomState,
-      setPaneRatios,
-      setDrawings,
-      setSelectedDrawingId,
-    },
-  }
-}
-
-export type ChartStore = ReturnType<typeof createChartStore>
+import { reactive, computed, type UnwrapNestedRefs } from 'vue'
+import { getPhysicalKLineConfig } from './utils/klineConfig'
+import type { DrawingObject } from '../plugin'
+
+/** 右侧空白绘制槽位数（逻辑 bar 数） */
+export const TRAILING_DRAWING_SLOTS = 24
+
+export interface ChartStoreOptions {
+  initialZoomLevel: number
+  minKWidth: number
+  maxKWidth: number
+  zoomLevels: number
+  rightAxisWidth: number
+  priceLabelWidth: number
+}
+
+export function computeContentWidth(params: {
+  dataLength: number
+  kWidth: number
+  kGap: number
+  viewWidth: number
+  viewportDpr: number
+}): number {
+  const { dataLength, kWidth, kGap, viewWidth, viewportDpr } = params
+  if (dataLength === 0) return 0
+  const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, viewportDpr)
+  const dataPlotWidth = (startXPx + (dataLength + TRAILING_DRAWING_SLOTS) * unitPx) / viewportDpr
+  return Math.max(dataPlotWidth, viewWidth)
+}
+
+export function createChartStore(opts: ChartStoreOptions) {
+  const state = reactive({
+    zoomLevel: opts.initialZoomLevel,
+    kWidth: 0,
+    kGap: 1,
+    viewportDpr: 1,
+    dataLength: 0,
+    dataVersion: 0,
+    paneRatios: {} as Record<string, number>,
+    drawings: [] as DrawingObject[],
+    selectedDrawingId: null as string | null,
+    drawingVersion: 0,
+    viewWidth: 0,
+  })
+
+  // 右侧轴宽度
+  const axisHostWidth = computed(() => opts.rightAxisWidth + opts.priceLabelWidth)
+
+  const totalWidth = computed(() =>
+    computeContentWidth({
+      dataLength: state.dataLength,
+      kWidth: state.kWidth,
+      kGap: state.kGap,
+      viewWidth: state.viewWidth,
+      viewportDpr: state.viewportDpr,
+    }),
+  )
+
+  function bumpDataVersion() {
+    state.dataVersion++
+  }
+
+  function bumpDrawingVersion() {
+    state.drawingVersion++
+  }
+
+  function setDataLength(length: number) {
+    state.dataLength = length
+  }
+
+  function setViewportDpr(dpr: number) {
+    state.viewportDpr = dpr
+  }
+
+  function setViewWidth(width: number) {
+    state.viewWidth = width
+  }
+
+  function setZoomState(level: number, newKWidth: number, newKGap: number) {
+    state.zoomLevel = level
+    state.kWidth = newKWidth
+    state.kGap = newKGap
+  }
+
+  function setPaneRatios(ratios: Record<string, number>) {
+    state.paneRatios = ratios
+  }
+
+  function setDrawings(newDrawings: DrawingObject[]) {
+    state.drawings = newDrawings
+    if (state.selectedDrawingId && !newDrawings.some((d) => d.id === state.selectedDrawingId)) {
+      state.selectedDrawingId = null
+    }
+    state.drawingVersion++
+  }
+
+  function setSelectedDrawingId(id: string | null) {
+    state.selectedDrawingId = id
+  }
+
+  return {
+    state: state as UnwrapNestedRefs<typeof state>,
+    computed: {
+      axisHostWidth,
+      totalWidth,
+    },
+    actions: {
+      bumpDataVersion,
+      bumpDrawingVersion,
+      setDataLength,
+      setViewportDpr,
+      setViewWidth,
+      setZoomState,
+      setPaneRatios,
+      setDrawings,
+      setSelectedDrawingId,
+    },
+  }
+}
+
+export type ChartStore = ReturnType<typeof createChartStore>