@363045841yyt/klinechart-core 0.8.7 → 0.8.9

package/src/engine/renderers/Indicator/volumeProfile.ts

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { VolumeProfileRenderState } from '../../indicators/volumeProfileState'
-import { createVolumeProfileStateKey, EMPTY_VOLUME_PROFILE_STATE } from '../../indicators/volumeProfileState'
+import type { VolumeProfileRenderState } from '../../indicators/state/volumeProfileState'
+import { createVolumeProfileStateKey, EMPTY_VOLUME_PROFILE_STATE } from '../../indicators/state/volumeProfileState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createVolumeProfileVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -110,7 +110,7 @@ function createVolumeProfileRendererPlugin(options: { paneId?: string } = {}): R
             const state = pluginHost?.getSharedState<VolumeProfileRenderState>(stateKey)
             return state?.params ?? {}
         },
-        setConfig() {},
+        setConfig() { },
     }
 }
 
@@ -119,33 +119,33 @@ const VP_VAH_COLOR = '#6366f1'
 const VP_VAL_COLOR = '#818cf8'
 
 function getVolumeProfileTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
 ): TitleInfo | null {
-  if (index === null) return null
-  const bins = (params.bins as number) ?? 24
-  const state = host.getSharedState<VolumeProfileRenderState>(createVolumeProfileStateKey(paneId))
-  const vp = state?.series
-
-  const values: Array<{ label: string; value: number; color: string }> = []
-  if (vp && vp.bins.length > 0) {
-    if (state.params.showPOC) {
-      values.push({ label: 'POC', value: vp.poc, color: VP_POC_COLOR })
+    if (index === null) return null
+    const bins = (params.bins as number) ?? 24
+    const state = host.getSharedState<VolumeProfileRenderState>(createVolumeProfileStateKey(paneId))
+    const vp = state?.series
+
+    const values: Array<{ label: string; value: number; color: string }> = []
+    if (vp && vp.bins.length > 0) {
+        if (state.params.showPOC) {
+            values.push({ label: 'POC', value: vp.poc, color: VP_POC_COLOR })
+        }
+        if (state.params.showValueArea) {
+            values.push({ label: 'VAH', value: vp.vah, color: VP_VAH_COLOR })
+            values.push({ label: 'VAL', value: vp.val, color: VP_VAL_COLOR })
+        }
     }
-    if (state.params.showValueArea) {
-      values.push({ label: 'VAH', value: vp.vah, color: VP_VAH_COLOR })
-      values.push({ label: 'VAL', value: vp.val, color: VP_VAL_COLOR })
-    }
-  }
 
-  return {
-    name: 'VP',
-    params: [bins],
-    values,
-  }
+    return {
+        name: 'VP',
+        params: [bins],
+        values,
+    }
 }
 
 @Indicator({
@@ -156,7 +156,7 @@ function getVolumeProfileTitleInfo(
     scale: { indicatorKey: 'volumeProfile', label: 'VP', decimals: 0 },
     getTitleInfo: getVolumeProfileTitleInfo,
     visibleState: { compose: createVolumeProfileVisibleStateComposer('volumeProfile', EMPTY_VOLUME_PROFILE_STATE) },
-    runtime: { defaultConfig:{bins:24,lookback:100,valueAreaPercent:70,showPOC:true,showValueArea:true}, computeKey:'calcVolumeProfileData', compute:(data,c)=>calcVolumeProfileData(data,c.bins,c.lookback,c.valueAreaPercent) },
+    runtime: { defaultConfig: { bins: 24, lookback: 100, valueAreaPercent: 70, showPOC: true, showValueArea: true }, computeKey: 'calcVolumeProfileData', compute: (data, c) => calcVolumeProfileData(data, c.bins, c.lookback, c.valueAreaPercent) },
 })
 class VolumeProfileIndicatorDefinition {
     static rendererFactory = createVolumeProfileRendererPlugin

package/src/engine/renderers/Indicator/vwap.ts

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { VWAPRenderState } from '../../indicators/vwapState'
-import { createVWAPStateKey, EMPTY_VWAP_STATE } from '../../indicators/vwapState'
+import type { VWAPRenderState } from '../../indicators/state/vwapState'
+import { createVWAPStateKey, EMPTY_VWAP_STATE } from '../../indicators/state/vwapState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -106,7 +106,7 @@ function createVWAPRendererPlugin(options: { paneId?: string } = {}): RendererPl
             const state = pluginHost?.getSharedState<VWAPRenderState>(stateKey)
             return state?.params ?? {}
         },
-        setConfig() {},
+        setConfig() { },
     }
 }
 

package/src/engine/renderers/Indicator/wma.ts

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { WMARenderState } from '../../indicators/wmaState'
-import { createWMAStateKey, EMPTY_WMA_STATE } from '../../indicators/wmaState'
+import type { WMARenderState } from '../../indicators/state/wmaState'
+import { createWMAStateKey, EMPTY_WMA_STATE } from '../../indicators/state/wmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -134,7 +134,7 @@ const getWMATitleInfo = createSingleLineTitleInfo({ createStateKey: createWMASta
     mainPane: { rendererName: 'wma_main', toActiveConfig: (params, active) => ({ ...params, showWMA: active }) },
     visibleState: { compose: createSparseVisibleStateComposer('wma', EMPTY_WMA_STATE) },
     scale: { indicatorKey: 'wma', label: 'WMA', decimals: 2 },
-    runtime: { defaultConfig:{period:10,showWMA:true}, computeKey:'calcWMAData', compute:(data,c)=>calcWMAData(data,c.period) },
+    runtime: { defaultConfig: { period: 10, showWMA: true }, computeKey: 'calcWMAData', compute: (data, c) => calcWMAData(data, c.period) },
 })
 class WMADefinition {
     static rendererFactory = createWMARendererPlugin

package/src/engine/renderers/Indicator/wmsr.ts

@@ -2,8 +2,8 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
-import type { WMSRRenderState } from '../../indicators/wmsrState'
-import { createWMSRStateKey, EMPTY_WMSR_STATE } from '../../indicators/wmsrState'
+import type { WMSRRenderState } from '../../indicators/state/wmsrState'
+import { createWMSRStateKey, EMPTY_WMSR_STATE } from '../../indicators/state/wmsrState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -163,7 +163,7 @@ function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): RendererPl
         },
 
         draw(context: RenderContext) {
-const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
+            const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
             const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()

package/src/engine/renderers/Indicator/zones.ts

@@ -1,8 +1,8 @@
 import { resolveThemeColors } from '../../../tokens'
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { ZonesRenderState } from '../../indicators/zonesState'
-import { createZonesStateKey, EMPTY_ZONES_STATE } from '../../indicators/zonesState'
+import type { ZonesRenderState } from '../../indicators/state/zonesState'
+import { createZonesStateKey, EMPTY_ZONES_STATE } from '../../indicators/state/zonesState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedUnitVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
@@ -73,8 +73,8 @@ function createZonesRendererPlugin(options: { paneId?: string } = {}): RendererP
                 const yLow = toY(zone.low)
                 const fill = zone.kind === 'FVG_BULL' ? colors.zones.fvgBullFill
                     : zone.kind === 'FVG_BEAR' ? colors.zones.fvgBearFill
-                    : zone.kind === 'OB_BULL' ? colors.zones.obBullFill
-                    : colors.zones.obBearFill
+                        : zone.kind === 'OB_BULL' ? colors.zones.obBullFill
+                            : colors.zones.obBearFill
                 ctx.fillStyle = fill
                 ctx.fillRect(startX, yHigh, endX - startX, yLow - yHigh)
             }
@@ -86,7 +86,7 @@ function createZonesRendererPlugin(options: { paneId?: string } = {}): RendererP
             if (!stateKey) return {}
             return pluginHost?.getSharedState<ZonesRenderState>(stateKey)?.params ?? {}
         },
-        setConfig() {},
+        setConfig() { },
     }
 }
 
@@ -125,7 +125,7 @@ const getZonesTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId)
     mainPane: { rendererName: 'zones_main', toActiveConfig: (params, active) => ({ ...params, showFVG: active, showOB: active, showFilledZones: active }) },
     scale: { indicatorKey: 'zones', label: 'Zones', decimals: 2 },
     visibleState: { compose: createFixedUnitVisibleStateComposer('zones', EMPTY_ZONES_STATE) },
-    runtime: { defaultConfig:{showFVG:true,showOB:true,showFilledZones:true,obLookback:20}, computeKey:'calcZonesData', compute:(data,c)=>calcZonesData(data,c.obLookback,5,2,'close') },
+    runtime: { defaultConfig: { showFVG: true, showOB: true, showFilledZones: true, obLookback: 20 }, computeKey: 'calcZonesData', compute: (data, c) => calcZonesData(data, c.obLookback, 5, 2, 'close') },
 })
 class ZonesDefinition {
     static rendererFactory = createZonesRendererPlugin

package/src/engine/renderers/__tests__/boll.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 { createBOLLRendererPlugin } from '../Indicator/boll'
-import { BOLL_STATE_KEY, type BOLLRenderState } from '@/core/indicators/bollState'
+import { BOLL_STATE_KEY, type BOLLRenderState } from '@/core/indicators/state/bollState'
 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__/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/__tests__/yAxis.renderer.test.ts

@@ -1,23 +1,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createYAxisRendererPlugin } from '@/core/renderers/yAxis'
-import type { RenderContext, PaneInfo } from '@/plugin'
-
-vi.mock('@/core/renderers/Indicator/scale/indicator_scale', async () => {
-  const actual = await vi.importActual<typeof import('@/core/renderers/Indicator/scale/indicator_scale')>(
-    '@/core/renderers/Indicator/scale/indicator_scale',
-  )
-  return {
-    ...actual,
-    drawScaleTicks: vi.fn(),
-  }
-})
+import type { RenderContext, PaneInfo, YAxisTick } from '@/plugin'
 
 vi.mock('@/utils/kLineDraw/axis', () => ({
   drawCrosshairPriceLabel: vi.fn(),
   drawAxisPriceLabel: vi.fn(),
 }))
 
-import { drawScaleTicks } from '@/core/renderers/Indicator/scale/indicator_scale'
 import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '@/utils/kLineDraw/axis'
 
 function createPane(overrides: Partial<PaneInfo> = {}): PaneInfo {
@@ -53,12 +42,27 @@ function createPane(overrides: Partial<PaneInfo> = {}): PaneInfo {
   }
 }
 
+const mockYAxisTicks: YAxisTick[] = [
+  { y: 10, value: 120 },
+  { y: 55, value: 110 },
+  { y: 100, value: 100 },
+  { y: 145, value: 90 },
+  { y: 190, value: 80 },
+]
+
+function createCtx() {
+  return {
+    canvas: { width: 80, height: 200 },
+    clearRect: vi.fn(),
+    fillText: vi.fn(),
+    measureText: vi.fn(() => ({ width: 10 })),
+    save: vi.fn(),
+    restore: vi.fn(),
+  } as unknown as CanvasRenderingContext2D
+}
+
 function createContext(overrides: Partial<RenderContext> = {}): RenderContext {
-  const ctx = {} as CanvasRenderingContext2D
-  Object.defineProperty(ctx, 'canvas', {
-    value: { width: 80, height: 200 },
-    configurable: true,
-  })
+  const ctx = createCtx()
 
   return {
     ctx,
@@ -78,6 +82,7 @@ function createContext(overrides: Partial<RenderContext> = {}): RenderContext {
     xAxisLabels: [],
     period: 'daily',
     theme: 'light',
+    yAxisTicks: mockYAxisTicks,
     ...overrides,
   }
 }
@@ -93,7 +98,9 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledTimes(1)
+    const targetCtx = context.yAxisCtx!
+    expect(targetCtx.clearRect).toHaveBeenCalled()
+    expect(targetCtx.fillText).toHaveBeenCalled()
   })
 
   it('does not draw ticks when pane capability showPriceAxisTicks is false', () => {
@@ -111,21 +118,19 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledTimes(0)
+    const targetCtx = context.yAxisCtx!
+    expect(targetCtx.fillText).toHaveBeenCalledTimes(0)
   })
 
   it('uses ctx when yAxisCtx is not provided', () => {
     const plugin = createYAxisRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
-    const fallbackCtx = {} as CanvasRenderingContext2D
+    const fallbackCtx = createCtx()
     const context = createContext({ ctx: fallbackCtx, yAxisCtx: undefined })
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledWith(
-      expect.objectContaining({
-        ctx: fallbackCtx,
-      }),
-    )
+    expect(fallbackCtx.clearRect).toHaveBeenCalled()
+    expect(fallbackCtx.fillText).toHaveBeenCalled()
   })
 
   it('draws last price label via drawAxisPriceLabel for main pane when yAxisLabels contains lastPrice', () => {
@@ -162,7 +167,6 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    // Last price now flows through drawAxisPriceLabel; only the crosshair label uses drawCrosshairPriceLabel
     expect(drawCrosshairPriceLabel).toHaveBeenCalledTimes(1)
   })
 

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