@363045841yyt/klinechart-core 0.8.7 → 0.8.9

package/src/engine/render/chartRenderer.ts

@@ -2,7 +2,8 @@ import type { KLineData } from '../../types/price'
 import type { ChartSettings } from '../../config/chartSettings'
 import type { SymbolSpec } from '../../controllers/types'
 import { getVisibleRange } from '../viewport/viewport'
-import type { RendererPlugin, RendererPluginWithHost, PluginHostImpl, RenderContext, YAxisLabel, XAxisLabel, YAxisRange, XAxisRange } from '../../plugin'
+import type { RendererPlugin, RendererPluginWithHost, PluginHostImpl, RenderContext, YAxisLabel, XAxisLabel, YAxisRange, XAxisRange, YAxisTick } from '../../plugin'
+import { calculateTickCount } from '../utils/tickCount'
 import { RendererPluginManager, wrapPaneInfo } from '../../plugin'
 import type { ChartDom, PaneSpec, ChartOptions, KLinePositions, Viewport, ViewportState } from '../chartTypes'
 import { PaneRenderer } from '../paneRenderer'
@@ -207,8 +208,15 @@ export class ChartRenderer {
       const levelToDraw = this.pendingUpdateLevel
       this.pendingUpdateLevel = UpdateLevel.All
       this.draw(levelToDraw)
-      const c = this.deps.getDom().container
+      const dom = this.deps.getDom()
+      const c = dom.container
       if (c) {
+        const scrollContent = dom.scrollContent
+        if (scrollContent) {
+          const dataManager = this.deps.getDataManager()
+          const w = Math.max(dataManager.getContentWidth(), dataManager.getLeftLoadBufferWidth()) + 'px'
+          if (scrollContent.style.width !== w) scrollContent.style.width = w
+        }
         this.deps.getViewportManager().applyPendingScrollLeft(c)
       }
     })
@@ -502,6 +510,25 @@ export class ChartRenderer {
         theme: this.deps.getTheme(),
         isAsiaMarket: this.settings.isAsiaMarket as boolean,
         colorPresetSettings: this.settings.colorPresetSettings,
+        monthKeys: dataManager.getMonthKeys() ?? undefined,
+        dayKeys: dataManager.getDayKeys() ?? undefined,
+      }
+
+      {
+        const pt = pane.yAxis.getPaddingTop()
+        const pb = pane.yAxis.getPaddingBottom()
+        const yStart = pt
+        const yEnd = Math.max(pt, pane.height - pb)
+        const viewH = Math.max(0, yEnd - yStart)
+        const tickCount = Math.max(2, calculateTickCount(pane.height, pane.role === 'price'))
+        const yAxisTicks: YAxisTick[] = []
+        for (let i = 0; i < tickCount; i++) {
+          const t = tickCount <= 1 ? 0 : i / (tickCount - 1)
+          const y = yStart + t * viewH
+          const value = pane.yAxis.yToPrice(y)
+          yAxisTicks.push({ y, value })
+        }
+        context.yAxisTicks = yAxisTicks
       }
 
       if (shouldUpdateMain || shouldUpdateOverlay) {
@@ -542,6 +569,7 @@ export class ChartRenderer {
     }
     if (xAxisCtx) {
       const opt = this.deps.getOption()
+      const dataManager = this.deps.getDataManager()
       const timeAxisContext: RenderContext = {
         ctx: xAxisCtx,
         pane: {
@@ -570,8 +598,8 @@ export class ChartRenderer {
           },
           priceRange: { maxPrice: 0, minPrice: 0 },
         },
-        period: this.deps.getDataManager().currentPeriod,
-        data: this.deps.getDataManager().getRenderData(),
+        period: dataManager.currentPeriod,
+        data: dataManager.getRenderData(),
         range,
         scrollLeft: vp.scrollLeft,
         kWidth: opt.kWidth,
@@ -593,6 +621,8 @@ export class ChartRenderer {
         theme: this.deps.getTheme(),
         isAsiaMarket: this.settings.isAsiaMarket as boolean,
         colorPresetSettings: this.settings.colorPresetSettings,
+        monthKeys: dataManager.getMonthKeys() ?? undefined,
+        dayKeys: dataManager.getDayKeys() ?? undefined,
       }
       const errors = this.deps.getRendererPluginManager().renderPlugin('timeAxis', timeAxisContext)
       if (errors.length > 0) {

package/src/engine/renderers/Indicator/__tests__/createSubIndicatorRenderer.test.ts

@@ -47,7 +47,7 @@ describe('createSubIndicatorRenderer', () => {
   })
 
   it('supports legacy uppercase ids through registry normalization', () => {
-    const registry = new IndicatorRegistry()
+    const registry = new IndicatorRegistry(false)
     for (const definition of getBuiltinIndicatorDefinitions()) {
       registry.register(definition)
     }

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

@@ -1,9 +1,9 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import type { ATRRenderState } from '../../indicators/atrState'
-import { createATRStateKey } from '../../indicators/atrState'
-import { EMPTY_ATR_STATE } from '../../indicators/atrState'
+import type { ATRRenderState } from '../../indicators/state/atrState'
+import { createATRStateKey } from '../../indicators/state/atrState'
+import { EMPTY_ATR_STATE } from '../../indicators/state/atrState'
 import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'

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

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import { resolveThemeColors } from '../../../tokens'
-import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
+import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/state/bollState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import type { CCIRenderState } from '../../indicators/cciState'
-import { createCCIStateKey, EMPTY_CCI_STATE } from '../../indicators/cciState'
+import type { CCIRenderState } from '../../indicators/state/cciState'
+import { createCCIStateKey, EMPTY_CCI_STATE } from '../../indicators/state/cciState'
 import { createCCIVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'

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

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { ChaikinVolRenderState } from '../../indicators/chaikinVolState'
-import { createChaikinVolStateKey, EMPTY_CHAIKIN_VOL_STATE } from '../../indicators/chaikinVolState'
+import type { ChaikinVolRenderState } from '../../indicators/state/chaikinVolState'
+import { createChaikinVolStateKey, EMPTY_CHAIKIN_VOL_STATE } from '../../indicators/state/chaikinVolState'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'

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

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { CMFRenderState } from '../../indicators/cmfState'
-import { createCMFStateKey, EMPTY_CMF_STATE } from '../../indicators/cmfState'
+import type { CMFRenderState } from '../../indicators/state/cmfState'
+import { createCMFStateKey, EMPTY_CMF_STATE } from '../../indicators/state/cmfState'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { DEMARenderState } from '../../indicators/demaState'
-import { createDEMAStateKey, EMPTY_DEMA_STATE } from '../../indicators/demaState'
+import type { DEMARenderState } from '../../indicators/state/demaState'
+import { createDEMAStateKey, EMPTY_DEMA_STATE } from '../../indicators/state/demaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
-import type { DonchianRenderState } from '../../indicators/donchianState'
-import { createDonchianStateKey, EMPTY_DONCHIAN_STATE } from '../../indicators/donchianState'
+import type { DonchianRenderState } from '../../indicators/state/donchianState'
+import { createDonchianStateKey, EMPTY_DONCHIAN_STATE } from '../../indicators/state/donchianState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, DonchianSchedulerConfig } from '../../indicators/scheduler'

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

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import { resolveThemeColors } from '../../../tokens'
-import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
+import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/state/eneState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'

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

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import { resolveThemeColors } from '../../../tokens'
-import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
+import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/state/expmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'

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

@@ -2,8 +2,8 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import { createDashedLineRenderer } from './shared/dashedLines'
-import type { FASTKRenderState } from '../../indicators/fastkState'
-import { createFASTKStateKey, EMPTY_FASTK_STATE } from '../../indicators/fastkState'
+import type { FASTKRenderState } from '../../indicators/state/fastkState'
+import { createFASTKStateKey, EMPTY_FASTK_STATE } from '../../indicators/state/fastkState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'

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

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { FibRenderState } from '../../indicators/fibState'
-import { createFibStateKey, EMPTY_FIB_STATE } from '../../indicators/fibState'
+import type { FibRenderState } from '../../indicators/state/fibState'
+import { createFibStateKey, EMPTY_FIB_STATE } from '../../indicators/state/fibState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, FibSchedulerConfig } from '../../indicators/scheduler'

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { HMARenderState } from '../../indicators/hmaState'
-import { createHMAStateKey, EMPTY_HMA_STATE } from '../../indicators/hmaState'
+import type { HMARenderState } from '../../indicators/state/hmaState'
+import { createHMAStateKey, EMPTY_HMA_STATE } from '../../indicators/state/hmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'

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

@@ -1,9 +1,9 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import type { HVRenderState } from '../../indicators/hvState'
-import { createHVStateKey } from '../../indicators/hvState'
-import { EMPTY_HV_STATE } from '../../indicators/hvState'
+import type { HVRenderState } from '../../indicators/state/hvState'
+import { createHVStateKey } from '../../indicators/state/hvState'
+import { EMPTY_HV_STATE } from '../../indicators/state/hvState'
 import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'

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

@@ -2,8 +2,8 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import type { KLineData } from '../../../types/price'
-import type { IchimokuRenderState } from '../../indicators/ichimokuState'
-import { createIchimokuStateKey, EMPTY_ICHIMOKU_STATE } from '../../indicators/ichimokuState'
+import type { IchimokuRenderState } from '../../indicators/state/ichimokuState'
+import { createIchimokuStateKey, EMPTY_ICHIMOKU_STATE } from '../../indicators/state/ichimokuState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, IchimokuSchedulerConfig } from '../../indicators/scheduler'
@@ -18,6 +18,109 @@ const SPAN_B_COLOR = '#dc2626'
 const CHIKOU_COLOR = '#7c3aed'
 
 type Point = { x: number; y: number }
+type CloudSeg = { x: number; ya: number; yb: number; bull: boolean }
+
+function collectIchimokuPoints(
+  context: RenderContext,
+  series: IchimokuRenderState['series'],
+  params: IchimokuRenderState['params'],
+  pane: RenderContext['pane'],
+  kLineCenters: number[],
+  range: RenderContext['range'],
+) {
+  const toY = (price: number) => pane.yAxis.priceToY(price)
+  const rangeStart = range.start
+
+  const tenkanPts: Point[] = []
+  const kijunPts: Point[] = []
+  const spanAPts: Point[] = []
+  const spanBPts: Point[] = []
+  const chikouPts: Point[] = []
+  const cloudSegs: CloudSeg[] = []
+
+  const drawEnd = Math.min(range.end, series.length)
+  for (let i = range.start; i < drawEnd; i++) {
+    const p = series[i]
+    if (!p) continue
+    const centerX = kLineCenters[i - rangeStart]
+    if (centerX === undefined) continue
+    if (params.showTenkan && p.tenkan !== undefined) tenkanPts.push({ x: centerX, y: toY(p.tenkan) })
+    if (params.showKijun && p.kijun !== undefined) kijunPts.push({ x: centerX, y: toY(p.kijun) })
+    if (params.showSpanA && p.spanA !== undefined) spanAPts.push({ x: centerX, y: toY(p.spanA) })
+    if (params.showSpanB && p.spanB !== undefined) spanBPts.push({ x: centerX, y: toY(p.spanB) })
+    if (params.showChikou && p.chikou !== undefined) chikouPts.push({ x: centerX, y: toY(p.chikou) })
+    if (params.showCloud && p.spanA !== undefined && p.spanB !== undefined) {
+      cloudSegs.push({ x: centerX, ya: toY(p.spanA), yb: toY(p.spanB), bull: p.spanA > p.spanB })
+    }
+  }
+
+  const dataLen = (context.data as unknown[]).length
+  if (dataLen < series.length) {
+    const physConfig = getPhysicalKLineConfig(context.kWidth, context.kGap, context.dpr)
+    const futureEnd = Math.min(dataLen + params.displacement, series.length)
+    for (let i = dataLen; i < futureEnd; i++) {
+      const p = series[i]
+      if (!p) continue
+      const leftPx = physConfig.startXPx + i * physConfig.unitPx
+      const wickXPx = leftPx + (physConfig.kWidthPx - 1) / 2
+      const centerX = wickXPx / context.dpr
+      if (params.showSpanA && p.spanA !== undefined) spanAPts.push({ x: centerX, y: toY(p.spanA) })
+      if (params.showSpanB && p.spanB !== undefined) spanBPts.push({ x: centerX, y: toY(p.spanB) })
+      if (params.showCloud && p.spanA !== undefined && p.spanB !== undefined) {
+        cloudSegs.push({ x: centerX, ya: toY(p.spanA), yb: toY(p.spanB), bull: p.spanA > p.spanB })
+      }
+    }
+  }
+
+  return { tenkanPts, kijunPts, spanAPts, spanBPts, chikouPts, cloudSegs }
+}
+
+function renderCloudFill(
+  ctx: CanvasRenderingContext2D,
+  cloudSegs: CloudSeg[],
+  colors: ReturnType<typeof resolveThemeColors>,
+  scrollLeft: number,
+): void {
+  ctx.save()
+  ctx.translate(-scrollLeft, 0)
+  fillCloud(ctx, cloudSegs, colors.candleUpBody, colors.candleDownBody)
+  ctx.restore()
+}
+
+function renderIchimokuLines(
+  ctx: CanvasRenderingContext2D,
+  lineWebGLSurface: RenderContext['lineWebGLSurface'],
+  scrollLeft: number,
+  enableWebGL: boolean,
+  tenkanPts: Point[], kijunPts: Point[], spanAPts: Point[], spanBPts: Point[], chikouPts: Point[],
+): void {
+  const lines: Array<{ points: Point[]; width: number; color: string }> = []
+  if (tenkanPts.length >= 2) lines.push({ points: tenkanPts, width: 1, color: TENKAN_COLOR })
+  if (kijunPts.length >= 2) lines.push({ points: kijunPts, width: 1, color: KIJUN_COLOR })
+  if (spanAPts.length >= 2) lines.push({ points: spanAPts, width: 1, color: SPAN_A_COLOR })
+  if (spanBPts.length >= 2) lines.push({ points: spanBPts, width: 1, color: SPAN_B_COLOR })
+  if (chikouPts.length >= 2) lines.push({ points: chikouPts, width: 1, color: CHIKOU_COLOR })
+
+  if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+    const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
+    if (allOk) {
+      lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+      return
+    }
+  }
+
+  ctx.save()
+  ctx.translate(-scrollLeft, 0)
+  ctx.lineWidth = 1
+  ctx.lineJoin = 'round'
+  ctx.lineCap = 'round'
+  drawLine(ctx, tenkanPts, TENKAN_COLOR)
+  drawLine(ctx, kijunPts, KIJUN_COLOR)
+  drawLine(ctx, spanAPts, SPAN_A_COLOR)
+  drawLine(ctx, spanBPts, SPAN_B_COLOR)
+  drawLine(ctx, chikouPts, CHIKOU_COLOR)
+  ctx.restore()
+}
 
 interface IchimokuRendererOptions {
     paneId?: string
@@ -63,92 +166,15 @@ function createIchimokuRendererPlugin(options: IchimokuRendererOptions = {}): Re
             if (!stateKey) return
             const state = pluginHost?.getSharedState<IchimokuRenderState>(stateKey)
             if (!state || state.visibleMin > state.visibleMax) return
-            const { params, series } = state
-
-            const toY = (price: number) => pane.yAxis.priceToY(price)
-            const rangeStart = range.start
-
-            const tenkanPts: Point[] = []
-            const kijunPts: Point[] = []
-            const spanAPts: Point[] = []
-            const spanBPts: Point[] = []
-            const chikouPts: Point[] = []
-            const cloudSegs: { x: number; ya: number; yb: number; bull: boolean }[] = []
-
-            const drawEnd = Math.min(range.end, series.length)
-            for (let i = range.start; i < drawEnd; i++) {
-                const p = series[i]
-                if (!p) continue
-                const centerX = kLineCenters[i - rangeStart]
-                if (centerX === undefined) continue
-                if (params.showTenkan && p.tenkan !== undefined) tenkanPts.push({ x: centerX, y: toY(p.tenkan) })
-                if (params.showKijun && p.kijun !== undefined) kijunPts.push({ x: centerX, y: toY(p.kijun) })
-                if (params.showSpanA && p.spanA !== undefined) spanAPts.push({ x: centerX, y: toY(p.spanA) })
-                if (params.showSpanB && p.spanB !== undefined) spanBPts.push({ x: centerX, y: toY(p.spanB) })
-                if (params.showChikou && p.chikou !== undefined) chikouPts.push({ x: centerX, y: toY(p.chikou) })
-                if (params.showCloud && p.spanA !== undefined && p.spanB !== undefined) {
-                    cloudSegs.push({ x: centerX, ya: toY(p.spanA), yb: toY(p.spanB), bull: p.spanA > p.spanB })
-                }
-            }
-
-            // 未来云：在数据末尾延伸 displacement 根 spanA/spanB 线及云段
-            const dataLen = (context.data as unknown[]).length
-            if (dataLen < series.length) {
-                const physConfig = getPhysicalKLineConfig(context.kWidth, context.kGap, context.dpr)
-                const futureEnd = Math.min(dataLen + params.displacement, series.length)
-                for (let i = dataLen; i < futureEnd; i++) {
-                    const p = series[i]
-                    if (!p) continue
-                    const leftPx = physConfig.startXPx + i * physConfig.unitPx
-                    const wickXPx = leftPx + (physConfig.kWidthPx - 1) / 2
-                    const centerX = wickXPx / context.dpr
-                    if (params.showSpanA && p.spanA !== undefined) spanAPts.push({ x: centerX, y: toY(p.spanA) })
-                    if (params.showSpanB && p.spanB !== undefined) spanBPts.push({ x: centerX, y: toY(p.spanB) })
-                    if (params.showCloud && p.spanA !== undefined && p.spanB !== undefined) {
-                        cloudSegs.push({ x: centerX, ya: toY(p.spanA), yb: toY(p.spanB), bull: p.spanA > p.spanB })
-                    }
-                }
-            }
 
-            // Cloud fill (Canvas2D only)
-            if (params.showCloud && cloudSegs.length >= 2) {
-                ctx.save()
-                ctx.translate(-scrollLeft, 0)
-                fillCloud(ctx, cloudSegs, colors.candleUpBody, colors.candleDownBody)
-                ctx.restore()
-            }
+            const { params, series } = state
+            const points = collectIchimokuPoints(context, series, params, pane, kLineCenters, range)
 
-            // Lines (WebGL + Canvas2D fallback)
-            const lines: Array<{ points: Point[]; width: number; color: string }> = []
-            if (tenkanPts.length >= 2) lines.push({ points: tenkanPts, width: 1, color: TENKAN_COLOR })
-            if (kijunPts.length >= 2) lines.push({ points: kijunPts, width: 1, color: KIJUN_COLOR })
-            if (spanAPts.length >= 2) lines.push({ points: spanAPts, width: 1, color: SPAN_A_COLOR })
-            if (spanBPts.length >= 2) lines.push({ points: spanBPts, width: 1, color: SPAN_B_COLOR })
-            if (chikouPts.length >= 2) lines.push({ points: chikouPts, width: 1, color: CHIKOU_COLOR })
-
-            const enableWebGL = context.settings?.enableWebGLRendering !== false
-            let usedWebGL = false
-            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-                const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-                if (allOk) {
-                    usedWebGL = true
-                    lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-                }
+            if (params.showCloud && points.cloudSegs.length >= 2) {
+                renderCloudFill(ctx, points.cloudSegs, colors, scrollLeft)
             }
-
-            if (usedWebGL) return
-
-            ctx.save()
-            ctx.translate(-scrollLeft, 0)
-            ctx.lineWidth = 1
-            ctx.lineJoin = 'round'
-            ctx.lineCap = 'round'
-            drawLine(ctx, tenkanPts, TENKAN_COLOR)
-            drawLine(ctx, kijunPts, KIJUN_COLOR)
-            drawLine(ctx, spanAPts, SPAN_A_COLOR)
-            drawLine(ctx, spanBPts, SPAN_B_COLOR)
-            drawLine(ctx, chikouPts, CHIKOU_COLOR)
-            ctx.restore()
+            renderIchimokuLines(ctx, lineWebGLSurface, scrollLeft, context.settings?.enableWebGLRendering !== false,
+                points.tenkanPts, points.kijunPts, points.spanAPts, points.spanBPts, points.chikouPts)
         },
 
         getConfig() {

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { KAMARenderState } from '../../indicators/kamaState'
-import { createKAMAStateKey, EMPTY_KAMA_STATE } from '../../indicators/kamaState'
+import type { KAMARenderState } from '../../indicators/state/kamaState'
+import { createKAMAStateKey, EMPTY_KAMA_STATE } from '../../indicators/state/kamaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -134,7 +134,7 @@ const getKAMATitleInfo = createSingleLineTitleInfo({ createStateKey: createKAMAS
     mainPane: { rendererName: 'kama_main', toActiveConfig: (params, active) => ({ ...params, showKAMA: active }) },
     visibleState: { compose: createSparseVisibleStateComposer('kama', EMPTY_KAMA_STATE) },
     scale: { indicatorKey: 'kama', label: 'KAMA', decimals: 2 },
-    runtime: { defaultConfig:{period:10,fastPeriod:2,slowPeriod:30,showKAMA:true}, computeKey:'calcKAMAData', compute:(data,c)=>calcKAMAData(data,c.period,c.fastPeriod,c.slowPeriod) },
+    runtime: { defaultConfig: { period: 10, fastPeriod: 2, slowPeriod: 30, showKAMA: true }, computeKey: 'calcKAMAData', compute: (data, c) => calcKAMAData(data, c.period, c.fastPeriod, c.slowPeriod) },
 })
 class KAMADefinition {
     static rendererFactory = createKAMARendererPlugin

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

@@ -1,8 +1,8 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
-import type { KeltnerRenderState } from '../../indicators/keltnerState'
-import { createKeltnerStateKey, EMPTY_KELTNER_STATE } from '../../indicators/keltnerState'
+import type { KeltnerRenderState } from '../../indicators/state/keltnerState'
+import { createKeltnerStateKey, EMPTY_KELTNER_STATE } from '../../indicators/state/keltnerState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, KeltnerSchedulerConfig } from '../../indicators/scheduler'
@@ -111,7 +111,7 @@ function createKeltnerRendererPlugin(options: KeltnerRendererOptions = {}): Rend
             const state = pluginHost?.getSharedState<KeltnerRenderState>(stateKey)
             return state?.params ?? {}
         },
-        setConfig() {},
+        setConfig() { },
     }
 }
 
@@ -157,7 +157,7 @@ function getKeltnerTitleInfo(
     mainPane: { rendererName: 'keltner_main', toActiveConfig: (params, active) => ({ ...params, showUpper: active, showMiddle: active, showLower: active }) },
     scale: { indicatorKey: 'keltner', label: 'Keltner', decimals: 2 },
     visibleState: { compose: createBandVisibleStateComposer('keltner', EMPTY_KELTNER_STATE, 'lower', 'upper') },
-    runtime: { defaultConfig:{emaPeriod:20,atrPeriod:10,multiplier:2,showUpper:true,showMiddle:true,showLower:true}, computeKey:'calcKeltnerData', compute:(data,c)=>calcKeltnerData(data,c.emaPeriod,c.atrPeriod,c.multiplier) },
+    runtime: { defaultConfig: { emaPeriod: 20, atrPeriod: 10, multiplier: 2, showUpper: true, showMiddle: true, showLower: true }, computeKey: 'calcKeltnerData', compute: (data, c) => calcKeltnerData(data, c.emaPeriod, c.atrPeriod, c.multiplier) },
 })
 class KeltnerDefinition {
     static rendererFactory = createKeltnerRendererPlugin

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

@@ -1,9 +1,9 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import type { KSTRenderState } from '../../indicators/kstState'
-import { createKSTStateKey } from '../../indicators/kstState'
-import { EMPTY_KST_STATE } from '../../indicators/kstState'
+import type { KSTRenderState } from '../../indicators/state/kstState'
+import { createKSTStateKey } from '../../indicators/state/kstState'
+import { EMPTY_KST_STATE } from '../../indicators/state/kstState'
 import { createPaddedPointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -103,7 +103,7 @@ function createKSTRendererPlugin(options: KSTRendererOptions = {}): RendererPlug
         },
 
         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()
@@ -301,7 +301,7 @@ function getKSTTitleInfo(
     scaleRendererFactory: createKstScaleRendererPlugin,
     visibleState: { compose: createPaddedPointVisibleStateComposer('kst', EMPTY_KST_STATE, ['kst', 'signal'] as const) },
     getTitleInfo: getKSTTitleInfo,
-    runtime: { defaultConfig:{roc1:10,roc2:15,roc3:20,roc4:30,signalPeriod:9,showKST:true,showSignal:true}, computeKey:'calcKSTData', compute:(data,c)=>calcKSTData(data,c.roc1,c.roc2,c.roc3,c.roc4,c.signalPeriod) },
+    runtime: { defaultConfig: { roc1: 10, roc2: 15, roc3: 20, roc4: 30, signalPeriod: 9, showKST: true, showSignal: true }, computeKey: 'calcKSTData', compute: (data, c) => calcKSTData(data, c.roc1, c.roc2, c.roc3, c.roc4, c.signalPeriod) },
 })
 class KSTIndicatorDefinition {
     static rendererFactory = createKSTRendererPlugin

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

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import { MA_STATE_KEY, type MARenderState } from '../../indicators/maState'
+import { MA_STATE_KEY, type MARenderState } from '../../indicators/state/maState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'
@@ -161,7 +161,7 @@ function getMATitleInfo(
             chart.updateRendererConfig('ma', maFlags)
         },
     },
-    runtime: { defaultConfig:{ma5:true,ma10:true,ma20:true,ma30:true,ma60:true}, computeKey:'calcMAData', compute:(data,c)=>{const p=[5,10,20,30,60];const r:Record<number,(number|undefined)[]>={};for(const o of p){if((c as any)['ma'+o])r[o]=calcMAData(data,o)}return r} },
+    runtime: { defaultConfig: { ma5: true, ma10: true, ma20: true, ma30: true, ma60: true }, computeKey: 'calcMAData', compute: (data, c) => { const p = [5, 10, 20, 30, 60]; const r: Record<number, (number | undefined)[]> = {}; for (const o of p) { if ((c as any)['ma' + o]) r[o] = calcMAData(data, o) } return r } },
     getTitleInfo: getMATitleInfo,
 })
 class MADefinition {