@363045841yyt/klinechart-core 0.8.7 → 0.8.9

package/src/engine/renderers/gridLines.ts

@@ -4,7 +4,7 @@ import type { KLineData } from '../../types/price'
 import { createHorizontalLineRect, createVerticalLineRect } from '../draw/pixelAlign'
 import { findMonthBoundaries } from '../../utils/dateFormat'
 import { resolveThemeColors } from '../../tokens'
-import { calculateTickPositions, calculateValueTickPositions, type ScaleType } from '../utils/tickPosition'
+
 
 /**
  * 创建网格线渲染器插件
@@ -34,44 +34,15 @@ export function createGridLinesRendererPlugin(): RendererPlugin {
             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' || scaleType === 'percent') && pane.role === 'price') {
-                const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
-                const valueMin = scaleType === 'percent' ? pane.yAxis.getDisplayPercentRange().minPct : displayRange.minPrice
-                const valueMax = scaleType === 'percent' ? pane.yAxis.getDisplayPercentRange().maxPct : displayRange.maxPrice
-                const tickValues = calculateValueTickPositions({
-                    height: pane.height,
-                    paddingTop: pt,
-                    paddingBottom: pb,
-                    isMain: true,
-                    valueMin,
-                    valueMax,
-                    scaleType,
-                })
-                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)
+            // 水平网格线：从预计算的 yAxisTicks 取 Y 位置，确保与轴刻度对齐
+            if (context.yAxisTicks) {
+                for (const tick of context.yAxisTicks) {
+                    const h = createHorizontalLineRect(startX, endX, tick.y, dpr)
+                    if (h) ctx.fillRect(h.x, h.y, h.width, h.height)
+                }
             }
 
-            const boundaries = findMonthBoundaries(klineData)
+            const boundaries = findMonthBoundaries(klineData, context.monthKeys)
 
             for (const idx of boundaries) {
                 if (idx < range.start || idx >= range.end || idx >= klineData.length) continue

package/src/engine/renderers/leftYAxis.ts

@@ -1,9 +1,10 @@
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
-import { drawScaleTicks } from '../renderers/Indicator/scale/indicator_scale'
 import { drawCrosshairPriceLabel } from '../../utils/kLineDraw/axis'
 import { resolveThemeColors } from '../../tokens'
-import type { ScaleType } from '../utils/tickPosition'
+import { getFont, setCanvasFont } from '../theme/fonts'
+import { roundToPhysicalPixel } from '../draw/pixelAlign'
+import { priceAtYForScaleType, type ScaleType } from '../utils/tickPosition'
 
 export function createLeftYAxisRendererPlugin(options: {
   axisWidth: number
@@ -32,45 +33,83 @@ export function createLeftYAxisRendererPlugin(options: {
       }
 
       const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
-      const displayRange = pane.yAxis.getDisplayRange()
-      const { minPrice, maxPrice } = displayRange
 
       if (!pane.capabilities.showPriceAxisTicks) return
 
       const scaleType: ScaleType = period === 'timeshare' ? 'linear' : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
+      const paneScaleType = pane.yAxis.getScaleType()
 
-      drawScaleTicks({
-        tickColor: tokenColors.text.secondary,
-        ctx: leftAxisCtx,
-        dpr,
-        axisWidth,
-        height: pane.height,
-        paddingTop: pane.yAxis.getPaddingTop(),
-        paddingBottom: pane.yAxis.getPaddingBottom(),
-        valueMin: minPrice,
-        valueMax: maxPrice,
-        isMain: true,
-        decimals: 2,
-        hideEdgeTicks: false,
-        scaleType,
-        textAlign: 'center',
-      })
+      if (!context.yAxisTicks) return
+
+      leftAxisCtx.clearRect(0, 0, axisWidth, pane.height)
+
+      const font = getFont(12)
+      setCanvasFont(leftAxisCtx, font)
+      leftAxisCtx.textBaseline = 'middle'
+      leftAxisCtx.textAlign = 'center'
+      leftAxisCtx.fillStyle = tokenColors.text.secondary
+
+      const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
+
+      const needsOwnValues = scaleType !== paneScaleType
+      const crosshairPriceRange = pane.yAxis.getDisplayRange()
+
+      const formatTick = scaleType === 'percent'
+        ? (v: number) => {
+            const sign = v >= 0 ? '+' : ''
+            return sign + v.toFixed(2) + '%'
+          }
+        : (v: number) => v.toFixed(2)
+
+      for (const tick of context.yAxisTicks) {
+        let displayValue: number
+        if (needsOwnValues) {
+          if (scaleType === 'percent') {
+            displayValue = pane.yAxis.toPercent(tick.value)
+          } else {
+            const { minPrice, maxPrice } = crosshairPriceRange
+            displayValue = priceAtYForScaleType(
+              tick.y, minPrice, maxPrice, scaleType,
+              pane.height, pane.yAxis.getPaddingTop(), pane.yAxis.getPaddingBottom(),
+            )
+          }
+        } else {
+          displayValue = tick.value
+        }
+        leftAxisCtx.fillText(formatTick(displayValue), textX, tick.y)
+      }
 
       const crosshair = options.getCrosshair?.()
       if (!crosshair || crosshair.activePaneId !== pane.id || crosshair.price === null) return
 
+      const isCrosshairPercent = scaleType === 'percent'
+      const crosshairPrice = isCrosshairPercent ? pane.yAxis.toPercent(crosshair.price) : crosshair.price
+      const crosshairLabelRange: { minPrice: number; maxPrice: number } = isCrosshairPercent
+        ? (() => {
+            const p = pane.yAxis.getDisplayPercentRange()
+            return { minPrice: p.minPct, maxPrice: p.maxPct }
+          })()
+        : crosshairPriceRange
+      const formatCrosshairPrice = isCrosshairPercent
+        ? (v: number) => {
+            const sign = v >= 0 ? '+' : ''
+            return sign + v.toFixed(2) + '%'
+          }
+        : undefined
+
       drawCrosshairPriceLabel(leftAxisCtx, {
         x: 0,
         y: pane.top,
         width: axisWidth,
         height: pane.height,
         crosshairY: crosshair.y,
-        priceRange: displayRange,
+        priceRange: crosshairLabelRange,
         yPaddingPx: options.yPaddingPx,
         dpr,
         fontSize: 12,
         priceOffset: 0,
-        price: crosshair.price,
+        price: crosshairPrice,
+        formatPrice: formatCrosshairPrice,
       }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
     },
   }

package/src/engine/renderers/timeAxis.ts

@@ -59,6 +59,8 @@ export function createTimeAxisRendererPlugin(options: {
         drawTopBorder: false,
         drawBottomBorder: false,
         period: context.period,
+        monthKeys: context.monthKeys,
+        dayKeys: context.dayKeys,
       }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
       // 绘制来自 xAxisRanges 的时间范围带（先于标签绘制）

package/src/engine/renderers/timeShare.ts

@@ -51,7 +51,7 @@ export function createTimeShareRendererPlugin(): RendererPluginWithHost {
         xPositions.push(x)
         yPrices.push(pane.yAxis.priceToY(item.price))
         yAvgs.push(pane.yAxis.priceToY(item.average))
-        volumes.push(item.volume)
+        volumes.push(item.volume ?? 0)
         maxVolume = Math.max(maxVolume, item.volume)
       }
 
@@ -86,8 +86,8 @@ function drawPreCloseLine(
   color: string,
 ): void {
   if (xPositions.length < 2) return
-  const firstX = xPositions[0]
-  const lastX = xPositions[xPositions.length - 1]
+  const firstX = xPositions[0]!
+  const lastX = xPositions[xPositions.length - 1]!
 
   ctx.save()
   ctx.strokeStyle = color
@@ -198,10 +198,10 @@ function drawSegmentLine(
   ctx.lineCap = 'round'
 
   ctx.beginPath()
-  ctx.moveTo(xPositions[0], yPositions[0])
+  ctx.moveTo(xPositions[0]!, yPositions[0]!)
 
   for (let i = 1; i < xPositions.length; i++) {
-    ctx.lineTo(xPositions[i], yPositions[i])
+    ctx.lineTo(xPositions[i]!, yPositions[i]!)
   }
 
   ctx.stroke()
@@ -228,7 +228,7 @@ function drawVolumeBars(
   const snappedBottom = Math.round(paneHeight * dpr) / dpr
 
   for (let i = 0; i < barRects.length; i++) {
-    const volume = volumes[i]
+    const volume = volumes[i]!
     if (volume <= 0) continue
 
     const barHeight = (volume / maxVolume) * volumeAreaHeight
@@ -239,14 +239,14 @@ function drawVolumeBars(
 
     let barColor: string
     if (i > 0) {
-      const price = data[idx].price
-      const prevPrice = data[idx - 1].price
+      const price = data[idx]!.price
+      const prevPrice = data[idx - 1]!.price
       if (price > prevPrice) barColor = upColor
       else if (price < prevPrice) barColor = downColor
       else barColor = neutralColor
     } else {
-      if (data[idx].price > preClose) barColor = upColor
-      else if (data[idx].price < preClose) barColor = downColor
+      if (data[idx]!.price > preClose) barColor = upColor
+      else if (data[idx]!.price < preClose) barColor = downColor
       else barColor = neutralColor
     }
 

package/src/engine/renderers/yAxis.ts

@@ -1,11 +1,11 @@
 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 { resolveThemeColors } from '../../tokens'
+import { getFont, setCanvasFont } from '../theme/fonts'
+import { roundToPhysicalPixel } from '../draw/pixelAlign'
 
 import type { KLineData } from '../../types/price'
-import type { ScaleType } from '../utils/tickPosition'
 
 /**
  * 创建 Y 轴渲染器插件
@@ -42,32 +42,28 @@ export function createYAxisRendererPlugin(options: {
 
       const isPercent = scaleType === 'percent' && pane.role === 'price'
 
-      if (pane.capabilities.showPriceAxisTicks) {
-        const tickValueMin = isPercent ? pane.yAxis.getDisplayPercentRange().minPct : displayRange.minPrice
-        const tickValueMax = isPercent ? pane.yAxis.getDisplayPercentRange().maxPct : displayRange.maxPrice
-        const formatLabel = isPercent
+      if (pane.capabilities.showPriceAxisTicks && context.yAxisTicks) {
+        targetCtx.clearRect(0, 0, axisWidth, pane.height)
+
+        const font = getFont(12)
+        setCanvasFont(targetCtx, font)
+        targetCtx.textBaseline = 'middle'
+        targetCtx.textAlign = 'center'
+        targetCtx.fillStyle = tokenColors.text.secondary
+
+        const format = isPercent
           ? (v: number) => {
               const sign = v >= 0 ? '+' : ''
               return sign + v.toFixed(2) + '%'
             }
-          : undefined
+          : (v: number) => v.toFixed(2)
 
-        drawScaleTicks({
-          tickColor: tokenColors.text.secondary,
-          ctx: targetCtx,
-          dpr,
-          axisWidth,
-          height: pane.height,
-          paddingTop: pane.yAxis.getPaddingTop(),
-          paddingBottom: pane.yAxis.getPaddingBottom(),
-          valueMin: tickValueMin,
-          valueMax: tickValueMax,
-          isMain: true,
-          decimals: 2,
-          hideEdgeTicks: false,
-          scaleType: isPercent ? 'percent' : scaleType,
-          formatLabel,
-        })
+        const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
+
+        for (const tick of context.yAxisTicks) {
+          const displayValue = isPercent ? pane.yAxis.toPercent(tick.value) : tick.value
+          targetCtx.fillText(format(displayValue), textX, tick.y)
+        }
       }
 
       // 绘制价格范围带（先于标签，使标签覆盖在范围带之上）

package/src/engine/utils/tickPosition.ts

@@ -206,6 +206,40 @@ function generatePixelUniformPercentTicks(options: {
     return positions
 }
 
+/**
+ * 计算均匀像素 Y 位置的值（统一像素反算）
+ * 所有刻度类型都先确定像素均匀 Y 位置，再通过 yToPrice 反算该位置的值
+ */
+export interface UniformPixelTick {
+  y: number
+  value: number
+}
+
+/**
+ * 在给定 Y 像素位置，按指定刻度类型反算价格/值
+ */
+export function priceAtYForScaleType(
+  y: number,
+  valueMin: number,
+  valueMax: number,
+  scaleType: ScaleType,
+  height: number,
+  paddingTop: number,
+  paddingBottom: number,
+): number {
+  const viewH = Math.max(1, height - paddingTop - paddingBottom)
+  const ratio = 1 - (y - paddingTop) / viewH
+
+  if (scaleType === 'log') {
+    if (valueMin <= 0 || valueMax <= 0) return valueMin + ratio * (valueMax - valueMin)
+    const logMin = Math.log(valueMin)
+    const logMax = Math.log(valueMax)
+    return Math.exp(logMin + ratio * (logMax - logMin))
+  }
+
+  return valueMin + ratio * (valueMax - valueMin)
+}
+
 // calculateValueTickPositions 缓存
 let _cvtpCacheKey = ''
 let _cvtpCacheResult: TickPositionWithValue[] = []

package/src/engine/viewport/chartViewportManager.ts

@@ -95,16 +95,6 @@ export class ChartViewportManager {
     this._pendingScrollLeft = v
   }
 
-  /** 仅设置缓存 scrollLeft（由 DataManager 内部使用） */
-  setCachedScrollLeft(v: number): void {
-    this.cachedScrollLeft = v
-  }
-
-  /** 仅设置待写入 scrollLeft（由 DataManager 内部使用） */
-  setPendingScrollLeft(v: number): void {
-    this._pendingScrollLeft = v
-  }
-
   /** 在 RAF 回调中应用待写入的 scrollLeft */
   applyPendingScrollLeft(container: HTMLElement): void {
     if (this._pendingScrollLeft !== null) {
@@ -175,38 +165,76 @@ export class ChartViewportManager {
   }
 
   /**
-   * 计算视口
+   * 计算视口（coordinator）
+   *
+   * 协调 4 个步骤：尺寸解析 → DPR 计算 → DOM 同步 → 状态推送。
+   * 每一子步骤均可独立测试。
    */
   computeViewport(): Viewport | null {
+    const dims = this.resolveViewportDimensions()
+    if (!dims) return null
+    const { viewWidth, viewHeight, plotWidth, plotHeight } = dims
+
+    const dpr = this.clampDpr(viewWidth, viewHeight)
+    const scrollLeft = Math.round(this.getLogicalScrollLeft() * dpr) / dpr
+
+    this.syncCanvasDom(dpr, viewWidth, viewHeight)
+    this.deps.resizeSharedWebGLSurface(plotWidth, plotHeight, dpr)
+
+    const vp: Viewport = { viewWidth, viewHeight, plotWidth, plotHeight, scrollLeft, dpr }
+    this.applyViewportState(vp)
+    return vp
+  }
+
+  /**
+   * 解析容器尺寸
+   *
+   * 优先使用 ResizeObserver 上报的 observedSize，
+   * fallback 到 DOM clientWidth/clientHeight。
+   * plotHeight 为 viewHeight 扣除底部轴高度。
+   */
+  private resolveViewportDimensions(): { viewWidth: number; viewHeight: number; plotWidth: number; plotHeight: number } | null {
     const container = this.deps.getDom().container
     if (!container) return null
 
-    const observedWidth = this.observedSize.width
-    const observedHeight = this.observedSize.height
-    const viewWidth = observedWidth > 0
-      ? observedWidth
+    const viewWidth = this.observedSize.width > 0
+      ? this.observedSize.width
       : Math.max(1, Math.round(container.clientWidth))
-    const viewHeight = observedHeight > 0
-      ? observedHeight
+    const viewHeight = this.observedSize.height > 0
+      ? this.observedSize.height
       : Math.max(1, Math.round(container.clientHeight))
-
     const plotWidth = Math.round(viewWidth)
     const plotHeight = Math.round(viewHeight - this.deps.getBottomAxisHeight())
 
-    let dpr = this.getEffectiveDpr()
+    return { viewWidth, viewHeight, plotWidth, plotHeight }
+  }
 
+  /**
+   * DPR 计算与封顶
+   *
+   * 取 effectiveDpr，若总像素超 MAX_CANVAS_PIXELS（16M）则降级 dpr
+   * 以避免浏览器 canvas 创建失败。
+   */
+  private clampDpr(viewWidth: number, viewHeight: number): number {
     const MAX_CANVAS_PIXELS = 16 * 1024 * 1024
-    const requestedPixels = viewWidth * dpr * (viewHeight * dpr)
-    if (requestedPixels > MAX_CANVAS_PIXELS) {
+    let dpr = this.getEffectiveDpr()
+    if (viewWidth * dpr * (viewHeight * dpr) > MAX_CANVAS_PIXELS) {
       dpr = Math.sqrt(MAX_CANVAS_PIXELS / (viewWidth * viewHeight))
     }
+    return dpr
+  }
 
-    // 对齐 scrollLeft，消除 translate 亚像素偏移
-    const scrollLeft = Math.round(this.getLogicalScrollLeft() * dpr) / dpr
-
+  /**
+   * 同步 DOM canvas 尺寸
+   *
+   * 更新 canvasLayer 和 xAxisCanvas 的 width/height 属性与 CSS 尺寸，
+   * 确保物理像素与逻辑像素一致，消除亚像素偏移。
+   * 仅在实际值变化时写入，避免无意义回流。
+   */
+  private syncCanvasDom(dpr: number, viewWidth: number, viewHeight: number): void {
     const dom = this.deps.getDom()
-
     const dprRoundedViewWidth = Math.round(viewWidth * dpr) / dpr
+
     const canvasLayerWidth = `${dprRoundedViewWidth}px`
     if (dom.canvasLayer.style.width !== canvasLayerWidth) {
       dom.canvasLayer.style.width = canvasLayerWidth
@@ -236,17 +264,15 @@ export class ChartViewportManager {
     if (dom.xAxisCanvas.style.height !== xAxisCssHeight) {
       dom.xAxisCanvas.style.height = xAxisCssHeight
     }
+  }
 
-    this.deps.resizeSharedWebGLSurface(plotWidth, plotHeight, dpr)
-
-    const vp: Viewport = {
-      viewWidth,
-      viewHeight,
-      plotWidth,
-      plotHeight,
-      scrollLeft,
-      dpr,
-    }
+  /**
+   * 应用视口状态
+   *
+   * 缓存 Viewport 对象并检测字段是否变化，
+   * 有变化时才写入 _viewportSignal 避免触发无关重绘。
+   */
+  private applyViewportState(vp: Viewport): void {
     const prevViewport = this._internalViewport
     const viewportChanged = !prevViewport
       || prevViewport.viewWidth !== vp.viewWidth
@@ -270,7 +296,6 @@ export class ChartViewportManager {
         kGap: current.kGap,
       })
     }
-    return vp
   }
 
   /**
@@ -298,6 +323,11 @@ export class ChartViewportManager {
     this.observedSize.width = cssWidth
     this.observedSize.height = cssHeight
 
+    if (this.cachedScrollLeft === 0 && cssWidth > 0) {
+      this.cachedScrollLeft = cssWidth
+      this._pendingScrollLeft = cssWidth
+    }
+
     const pixelSize = entry.devicePixelContentBoxSize?.[0]
     const cssSize = entry.contentBoxSize?.[0]
     if (!pixelSize || !cssSize || cssSize.inlineSize <= 0) {

package/src/mcp/chartBridge.ts

@@ -208,7 +208,7 @@ export class ChartBridge {
 
     this.reconnectTimer = setTimeout(() => {
       if (!this.destroyed) {
-        this.connect()
+        this.connect().catch(() => {})
       }
     }, delay)
   }

package/src/plugin/types.ts

@@ -262,6 +262,14 @@ export interface XAxisRange {
   opacity: number
 }
 
+/** Y轴刻度（位置+值），由 RenderContext 构建时预计算，所有 Y 轴渲染器共用 */
+export interface YAxisTick {
+  /** Y像素位置（相对 pane 顶部，逻辑像素） */
+  y: number
+  /** 该Y位置通过 pane.yAxis.yToPrice 反算的价格值 */
+  value: number
+}
+
 /** 渲染上下文 */
 /** MarkerManager 接口（用于 RenderContext） */
 export interface MarkerManagerLike {
@@ -328,6 +336,12 @@ export interface RenderContext {
   isAsiaMarket?: boolean
   /** 用户颜色预设覆盖项 */
   colorPresetSettings?: import('../tokens').ColorPresetSettings
+  /** 预计算的 Y 轴刻度列表（统一像素均匀分布 → yToPrice 反算），所有 Y 轴渲染器共用 */
+  yAxisTicks?: YAxisTick[]
+  /** 预计算的月份键值数组（year*12+month），与 data 长度一致，由 DataBuffer 在数据加载时计算 */
+  monthKeys?: Int32Array
+  /** 预计算的日期键值数组（year*366+dayOfYear），与 data 长度一致，由 DataBuffer 在数据加载时计算 */
+  dayKeys?: Int32Array
 }
 
 export type DrawingAnchor = {