@363045841yyt/klinechart-core 0.8.8 → 0.8.9

package/src/engine/renderers/__tests__/ene.renderer.test.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck - Test file with intentional type relaxations for mocking
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createENERendererPlugin } from '../Indicator/ene'
-import { ENE_STATE_KEY, type ENERenderState } from '@/core/indicators/eneState'
+import { ENE_STATE_KEY, type ENERenderState } from '@/core/indicators/state/eneState'
 import type { PluginHost, RenderContext, RendererPluginWithHost } from '@/plugin'
 
 const ENE_COLORS = { BAND_FILL: 'rgba(69, 112, 249, 0.08)' } as const

package/src/engine/renderers/__tests__/expma.renderer.test.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck - Test file with intentional type relaxations for mocking
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createEXPMARendererPlugin } from '../Indicator/expma'
-import { EXPMA_STATE_KEY, type EXPMARenderState } from '@/core/indicators/expmaState'
+import { EXPMA_STATE_KEY, type EXPMARenderState } from '@/core/indicators/state/expmaState'
 import type { PluginHost, RenderContext, RendererPluginWithHost } from '@/plugin'
 import type { KLineData } from '@/types/price'
 import type { Pane } from '@/core/layout/pane'

package/src/engine/renderers/__tests__/ma.renderer.test.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck - Test file with intentional type relaxations for mocking
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createMARendererPlugin } from '../Indicator/ma'
-import { MA_STATE_KEY, type MARenderState } from '@/core/indicators/maState'
+import { MA_STATE_KEY, type MARenderState } from '@/core/indicators/state/maState'
 import type { PluginHost, RenderContext, RendererPluginWithHost } from '@/plugin'
 import type { KLineData } from '@/types/price'
 import type { Pane } from '@/core/layout/pane'

package/src/engine/renderers/__tests__/mainIndicatorLegend.renderer.test.ts

@@ -1,10 +1,10 @@
 // @ts-nocheck - Test file with intentional type relaxations for mocking
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createMainIndicatorLegendRendererPlugin } from '../Indicator/mainIndicatorLegend'
-import { MA_STATE_KEY, type MARenderState } from '@/core/indicators/maState'
-import { BOLL_STATE_KEY } from '@/core/indicators/bollState'
-import { EXPMA_STATE_KEY } from '@/core/indicators/expmaState'
-import { ENE_STATE_KEY } from '@/core/indicators/eneState'
+import { MA_STATE_KEY, type MARenderState } from '@/core/indicators/state/maState'
+import { BOLL_STATE_KEY } from '@/core/indicators/state/bollState'
+import { EXPMA_STATE_KEY } from '@/core/indicators/state/expmaState'
+import { ENE_STATE_KEY } from '@/core/indicators/state/eneState'
 import type { PluginHost, RenderContext, RendererPluginWithHost } from '@/plugin'
 import type { KLineData } from '@/types/price'
 import type { Pane } from '@/core/layout/pane'

package/src/engine/renderers/candle.ts

@@ -1,17 +1,39 @@
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
-import { getKLineTrend, type kLineTrend } from '../../types/kLine'
-import { createAlignedKLineFromPx, createVerticalLineRect } from '../draw/pixelAlign'
+import type { kLineTrend } from '../../types/kLine'
 import { resolveThemeColors, type VolumePriceColors } from '../../tokens'
-import { getPhysicalKLineConfig } from '../chart'
+import { getPhysicalKLineConfig } from '../utils/klineConfig'
 import { VolumePriceRelation } from '../../types/volumePrice'
 import { analyzeVolumePriceRelationBatch, DEFAULT_VOLUME_PRICE_CONFIG } from '../../utils/volumePrice'
 import type { MarkerManager } from '../marker/registry'
 
+// --- Float32Array buffer pool (reduces per-frame GC pressure) ---
+let poolUpBody: Float32Array | null = null
+let poolDownBody: Float32Array | null = null
+let poolUpWick: Float32Array | null = null
+let poolDownWick: Float32Array | null = null
+
+function ensureBufferCapacity(pool: Float32Array | null, requiredFloats: number): Float32Array {
+  if (pool && pool.length >= requiredFloats) return pool
+  const newLen = Math.max(requiredFloats, Math.ceil((pool?.length ?? 0) * 1.5))
+  return new Float32Array(newLen)
+}
+
+type AlignedKLineResult = {
+    bodyRect: { x: number; y: number; width: number; height: number }
+    physBodyLeft: number
+    physBodyRight: number
+    physBodyWidth: number
+    physBodyCenter: number
+    physWickX: number
+    wickRect: { x: number; width: number }
+    isPerfectlyAligned: boolean
+}
+
 type CandleRenderData = {
     i: number
-    aligned: ReturnType<typeof createAlignedKLineFromPx>
+    aligned: AlignedKLineResult
     trend: kLineTrend
     openY: number
     closeY: number
@@ -99,10 +121,14 @@ function prepareCandles(args: {
     const upKLines: CandleRenderData[] = []
     const downKLines: CandleRenderData[] = []
     const maxRects = Math.max(1, range.end - range.start)
-    const upBodyBuf = new Float32Array(maxRects * 4)
-    const downBodyBuf = new Float32Array(maxRects * 4)
-    const upWickBuf = new Float32Array(maxRects * 2 * 4)
-    const downWickBuf = new Float32Array(maxRects * 2 * 4)
+    const upBodyBuf = ensureBufferCapacity(poolUpBody, maxRects * 4)
+    poolUpBody = upBodyBuf
+    const downBodyBuf = ensureBufferCapacity(poolDownBody, maxRects * 4)
+    poolDownBody = downBodyBuf
+    const upWickBuf = ensureBufferCapacity(poolUpWick, maxRects * 2 * 4)
+    poolUpWick = upWickBuf
+    const downWickBuf = ensureBufferCapacity(poolDownWick, maxRects * 2 * 4)
+    poolDownWick = downWickBuf
     let upBodyCount = 0
     let downBodyCount = 0
     let upWickCount = 0
@@ -121,10 +147,13 @@ function prepareCandles(args: {
         const scaleB = paddingTop + viewHeight
         fastPriceToY = (price: number) => scaleB - (price - minPrice) * scaleK
     } else {
-        // 对数模式回退到标准方法
         fastPriceToY = (price: number) => pane.yAxis.priceToY(price)
     }
 
+    const invDpr = 1 / dpr
+    const wickWidth = 1 / dpr
+    const alignY = (logical: number) => Math.round(logical * dpr) * invDpr
+
     for (let i = range.start; i < range.end && i < data.length; i++) {
         const e = data[i]
         if (!e) continue
@@ -137,7 +166,6 @@ function prepareCandles(args: {
         const leftLogical = kLinePositions[i - range.start]
         if (leftLogical === undefined) continue
 
-        const alignY = (logical: number) => Math.round(logical * dpr) / dpr
         const alignedOpenY = alignY(openY)
         const alignedCloseY = alignY(closeY)
         const alignedHighY = alignY(highY)
@@ -146,81 +174,95 @@ function prepareCandles(args: {
         const alignedRawRectH = Math.max(Math.abs(alignedOpenY - alignedCloseY), 1)
 
         const roundedLeftPx = Math.round(leftLogical * dpr)
-        const aligned = createAlignedKLineFromPx(
-            roundedLeftPx,
-            alignedRawRectY,
-            kWidthPx,
-            alignedRawRectH,
-            dpr
-        )
-
-        const trend: kLineTrend = getKLineTrend(e)
-        const renderData: CandleRenderData = {
-            i,
-            aligned,
-            trend,
-            openY,
-            closeY,
-            highY,
-            lowY,
-            alignedHighY,
-            alignedLowY,
-            e,
-        }
 
-        const bodyRect = aligned.bodyRect
-        const targetKLines = trend === 'up' ? upKLines : downKLines
-        const isUp = trend === 'up'
-
-        targetKLines.push(renderData)
+        // Inlined createAlignedKLineFromPx — no object allocation
+        const topPx = Math.round(alignedRawRectY * dpr)
+        const bottomPx = Math.round((alignedRawRectY + alignedRawRectH) * dpr)
+        const bodyHPx = Math.max(1, bottomPx - topPx)
+
+        const bodyX = roundedLeftPx * invDpr
+        const bodyY = topPx * invDpr
+        const bodyW = kWidthPx * invDpr
+        const bodyH = bodyHPx * invDpr
+        const wickCenterX = (roundedLeftPx + (kWidthPx - 1) / 2) * invDpr
+
+        const isUp = e.close >= e.open
+
+        if (showVolumePriceMarkers) {
+            const targetKLines = isUp ? upKLines : downKLines
+            targetKLines.push({
+                i,
+                aligned: {
+                    bodyRect: { x: bodyX, y: bodyY, width: bodyW, height: bodyH },
+                    physBodyLeft: roundedLeftPx,
+                    physBodyRight: roundedLeftPx + kWidthPx,
+                    physBodyWidth: kWidthPx,
+                    physBodyCenter: wickCenterX,
+                    physWickX: wickCenterX,
+                    wickRect: { x: wickCenterX, width: 1 / dpr },
+                    isPerfectlyAligned: kWidthPx % 2 === 1,
+                },
+                trend: isUp ? 'up' : 'down',
+                openY,
+                closeY,
+                highY,
+                lowY,
+                alignedHighY,
+                alignedLowY,
+                e,
+            })
+        }
 
         if (isUp) {
             const off = upBodyCount++ * 4
-            upBodyBuf[off] = bodyRect.x
-            upBodyBuf[off + 1] = bodyRect.y
-            upBodyBuf[off + 2] = bodyRect.width
-            upBodyBuf[off + 3] = bodyRect.height
+            upBodyBuf[off] = bodyX
+            upBodyBuf[off + 1] = bodyY
+            upBodyBuf[off + 2] = bodyW
+            upBodyBuf[off + 3] = bodyH
         } else {
             const off = downBodyCount++ * 4
-            downBodyBuf[off] = bodyRect.x
-            downBodyBuf[off + 1] = bodyRect.y
-            downBodyBuf[off + 2] = bodyRect.width
-            downBodyBuf[off + 3] = bodyRect.height
+            downBodyBuf[off] = bodyX
+            downBodyBuf[off + 1] = bodyY
+            downBodyBuf[off + 2] = bodyW
+            downBodyBuf[off + 3] = bodyH
         }
 
-        const bodyTop = bodyRect.y
-        const bodyBottom = bodyRect.y + bodyRect.height
-        const bodyHigh = Math.max(e.open, e.close)
-        const bodyLow = Math.min(e.open, e.close)
+        const bodyHigh = isUp ? e.close : e.open
+        const bodyLow = isUp ? e.open : e.close
 
+        // Inlined createVerticalLineRect for upper wick
         if (e.high > bodyHigh) {
-            const wick = createVerticalLineRect(aligned.wickRect.x, alignedHighY, bodyTop, dpr)
-            if (wick) {
-                const buf = isUp ? upWickBuf : downWickBuf
-                const idx = isUp ? upWickCount++ : downWickCount++
-                const off = idx * 4
-                buf[off] = wick.x
-                buf[off + 1] = wick.y
-                buf[off + 2] = wick.width
-                buf[off + 3] = wick.height
-            }
+            const top = Math.min(alignedHighY, bodyY)
+            const bottom = Math.max(alignedHighY, bodyY)
+            const physTop = Math.round(top * dpr)
+            const physBottom = Math.round(bottom * dpr)
+            const wickH = Math.max(1, physBottom - physTop) * invDpr
+            const buf = isUp ? upWickBuf : downWickBuf
+            const idx = isUp ? upWickCount++ : downWickCount++
+            const off = idx * 4
+            buf[off] = wickCenterX
+            buf[off + 1] = physTop * invDpr
+            buf[off + 2] = wickWidth
+            buf[off + 3] = wickH
         }
+        // Inlined createVerticalLineRect for lower wick
         if (e.low < bodyLow) {
-            const wick = createVerticalLineRect(aligned.wickRect.x, bodyBottom, alignedLowY, dpr)
-            if (wick) {
-                const buf = isUp ? upWickBuf : downWickBuf
-                const idx = isUp ? upWickCount++ : downWickCount++
-                const off = idx * 4
-                buf[off] = wick.x
-                buf[off + 1] = wick.y
-                buf[off + 2] = wick.width
-                buf[off + 3] = wick.height
-            }
+            const bodyBottom = bodyY + bodyH
+            const top = Math.min(bodyBottom, alignedLowY)
+            const bottom = Math.max(bodyBottom, alignedLowY)
+            const physTop = Math.round(top * dpr)
+            const physBottom = Math.round(bottom * dpr)
+            const wickH = Math.max(1, physBottom - physTop) * invDpr
+            const buf = isUp ? upWickBuf : downWickBuf
+            const idx = isUp ? upWickCount++ : downWickCount++
+            const off = idx * 4
+            buf[off] = wickCenterX
+            buf[off + 1] = physTop * invDpr
+            buf[off + 2] = wickWidth
+            buf[off + 3] = wickH
         }
     }
 
-    const wickWidth = upKLines[0]?.aligned.wickRect.width ?? downKLines[0]?.aligned.wickRect.width ?? 1
-
     return {
         upKLines,
         downKLines,

package/src/engine/renderers/extremaMarkers.ts

@@ -154,6 +154,7 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
                 max,
                 dpr,
                 paneWidth,
+                scrollLeft,
                 ctx
             )
             if (maxMarker) markers.push(maxMarker)
@@ -164,6 +165,7 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
                 min,
                 dpr,
                 paneWidth,
+                scrollLeft,
                 ctx
             )
             if (minMarker) markers.push(minMarker)
@@ -186,14 +188,14 @@ function createMarkerData(
     price: number,
     dpr: number,
     paneWidth: number,
+    scrollLeft: number,
     ctx: CanvasRenderingContext2D
 ): MarkerData | null {
     const text = price.toFixed(2)
     const textWidth = measureTextWidth(ctx, text)
 
-    const visibleX = x
-    const rightEdge = visibleX + LINE_LENGTH + PADDING + textWidth
-    const drawLeft = rightEdge > paneWidth
+    const screenX = x - scrollLeft
+    const drawLeft = screenX >= paneWidth / 2
 
     let lineStartX = x
     let lineEndX = drawLeft ? x - LINE_LENGTH : x + LINE_LENGTH

package/src/engine/renderers/gridLines.ts

@@ -42,7 +42,7 @@ export function createGridLinesRendererPlugin(): RendererPlugin {
                 }
             }
 
-            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

@@ -54,6 +54,13 @@ export function createLeftYAxisRendererPlugin(options: {
       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) {
@@ -69,24 +76,40 @@ export function createLeftYAxisRendererPlugin(options: {
         } else {
           displayValue = tick.value
         }
-        leftAxisCtx.fillText(displayValue.toFixed(2), textX, tick.y)
+        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: crosshairPriceRange,
+        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/viewport/chartViewportManager.ts

@@ -165,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
@@ -226,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
@@ -260,7 +296,6 @@ export class ChartViewportManager {
         kGap: current.kGap,
       })
     }
-    return vp
   }
 
   /**

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

@@ -338,6 +338,10 @@ export interface RenderContext {
   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 = {