@363045841yyt/klinechart-core 0.7.3

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

@@ -0,0 +1,265 @@
+/**
+ * 副图指标配置表
+ *
+ * 定义各副图指标的默认参数和标题信息获取函数，
+ * 由 KLineChart.vue 消费，集中管理避免散落在组件中。
+ */
+
+import type { TitleInfo } from '../../renderers/paneTitle'
+import type { PluginHost } from '../../../plugin'
+import type { SubIndicatorType } from '../../renderers/Indicator'
+import {
+    getMACDTitleInfo,
+    getRSITitleInfo,
+    getCCITitleInfo,
+    getSTOCHTitleInfo,
+    getMOMTitleInfo,
+    getWMSRTitleInfo,
+    getKSTTitleInfo,
+    getFASTKTitleInfo,
+    getATRTitleInfo,
+} from '../../renderers/Indicator'
+
+export interface SubPaneIndicatorConfig {
+  defaultParams: Record<string, number | boolean | string>
+  getTitleInfo: (
+    data: any[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    paneId: string,  // 新增：paneId 参数
+  ) => TitleInfo | null
+}
+
+export const SUB_PANE_INDICATOR_CONFIGS: Record<SubIndicatorType, SubPaneIndicatorConfig> = {
+  VOLUME: {
+    defaultParams: {},
+    getTitleInfo: () => ({ name: 'VOL', params: [], values: [] }),
+  },
+  MACD: {
+    defaultParams: { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getMACDTitleInfo(
+        index,
+        (params.fastPeriod as number) ?? 12,
+        (params.slowPeriod as number) ?? 26,
+        (params.signalPeriod as number) ?? 9,
+        pluginHost,
+        paneId,  // 使用传入的 paneId
+      )
+    },
+  },
+  RSI: {
+    defaultParams: { period1: 6, period2: 12, period3: 24 },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getRSITitleInfo(
+        index,
+        (params.period1 as number) ?? 6,
+        (params.period2 as number) ?? 12,
+        (params.period3 as number) ?? 24,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  CCI: {
+    defaultParams: { period: 14, showCCI: true },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getCCITitleInfo(
+        index,
+        (params.period as number) ?? 14,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  STOCH: {
+    defaultParams: { n: 9, m: 3, showK: true, showD: true },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getSTOCHTitleInfo(
+        index,
+        (params.n as number) ?? 9,
+        (params.m as number) ?? 3,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  MOM: {
+    defaultParams: { period: 10, showMOM: true },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getMOMTitleInfo(
+        index,
+        (params.period as number) ?? 10,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  WMSR: {
+    defaultParams: { period: 14, showWMSR: true },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getWMSRTitleInfo(
+        index,
+        (params.period as number) ?? 14,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  KST: {
+    defaultParams: {
+      roc1: 10, roc2: 15, roc3: 20, roc4: 30,
+      signalPeriod: 9, showKST: true, showSignal: true,
+    },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getKSTTitleInfo(
+        index,
+        (params.roc1 as number) ?? 10,
+        (params.roc2 as number) ?? 15,
+        (params.roc3 as number) ?? 20,
+        (params.roc4 as number) ?? 30,
+        (params.signalPeriod as number) ?? 9,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+  FASTK: {
+    defaultParams: { period: 9, showFASTK: true },
+    getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+      if (index === null) return null
+      return getFASTKTitleInfo(
+        index,
+        (params.period as number) ?? 9,
+        pluginHost,
+        paneId,
+      )
+    },
+  },
+    ATR: {
+        defaultParams: { period: 14, showATR: true },
+        getTitleInfo: (_data, index, params, pluginHost, paneId) => {
+            if (index === null) return null
+            return getATRTitleInfo(
+                index,
+                (params.period as number) ?? 14,
+                pluginHost,
+                paneId,
+            )
+        },
+    },
+    WMA: {
+        defaultParams: { period: 10, showWMA: true },
+        getTitleInfo: () => ({ name: 'WMA', params: [], values: [] }),
+    },
+    DEMA: {
+        defaultParams: { period: 14, showDEMA: true },
+        getTitleInfo: () => ({ name: 'DEMA', params: [], values: [] }),
+    },
+    TEMA: {
+        defaultParams: { period: 14, showTEMA: true },
+        getTitleInfo: () => ({ name: 'TEMA', params: [], values: [] }),
+    },
+    HMA: {
+        defaultParams: { period: 14, showHMA: true },
+        getTitleInfo: () => ({ name: 'HMA', params: [], values: [] }),
+    },
+    KAMA: {
+        defaultParams: { period: 10, fastPeriod: 2, slowPeriod: 30, showKAMA: true },
+        getTitleInfo: () => ({ name: 'KAMA', params: [], values: [] }),
+    },
+    SAR: {
+        defaultParams: { step: 0.02, maxStep: 0.2, showSAR: true },
+        getTitleInfo: () => ({ name: 'SAR', params: [], values: [] }),
+    },
+    SUPERTREND: {
+        defaultParams: { atrPeriod: 10, multiplier: 3, showSuperTrend: true },
+        getTitleInfo: () => ({ name: 'SuperTrend', params: [], values: [] }),
+    },
+    KELTNER: {
+        defaultParams: { emaPeriod: 20, atrPeriod: 10, multiplier: 2, showUpper: true, showMiddle: true, showLower: true },
+        getTitleInfo: () => ({ name: 'Keltner', params: [], values: [] }),
+    },
+    DONCHIAN: {
+        defaultParams: { period: 20, showUpper: true, showMiddle: true, showLower: true },
+        getTitleInfo: () => ({ name: 'Donchian', params: [], values: [] }),
+    },
+    ICHIMOKU: {
+        defaultParams: { tenkanPeriod: 9, kijunPeriod: 26, spanBPeriod: 52, displacement: 26, showTenkan: true, showKijun: true, showSpanA: true, showSpanB: true, showChikou: true, showCloud: true },
+        getTitleInfo: () => ({ name: 'Ichimoku', params: [], values: [] }),
+    },
+    ROC: {
+        defaultParams: { period: 12, showROC: true },
+        getTitleInfo: () => ({ name: 'ROC', params: [], values: [] }),
+    },
+    TRIX: {
+        defaultParams: { period: 15, signalPeriod: 9, showTRIX: true, showSignal: true },
+        getTitleInfo: () => ({ name: 'TRIX', params: [], values: [] }),
+    },
+    HV: {
+        defaultParams: { period: 20, annualizationFactor: 252, showHV: true },
+        getTitleInfo: () => ({ name: 'HV', params: [], values: [] }),
+    },
+    PARKINSON: {
+        defaultParams: { period: 20, annualizationFactor: 252, showParkinson: true },
+        getTitleInfo: () => ({ name: 'Parkinson', params: [], values: [] }),
+    },
+    CHAIKIN_VOL: {
+        defaultParams: { emaPeriod: 10, rocPeriod: 10, showChaikinVol: true },
+        getTitleInfo: () => ({ name: 'ChaikinVol', params: [], values: [] }),
+    },
+    VMA: {
+        defaultParams: { period: 5, showVMA: true },
+        getTitleInfo: () => ({ name: 'VMA', params: [], values: [] }),
+    },
+    OBV: {
+        defaultParams: { showOBV: true },
+        getTitleInfo: () => ({ name: 'OBV', params: [], values: [] }),
+    },
+    PVT: {
+        defaultParams: { showPVT: true },
+        getTitleInfo: () => ({ name: 'PVT', params: [], values: [] }),
+    },
+    VWAP: {
+        defaultParams: { sessionResetGapMs: 0, showVWAP: true },
+        getTitleInfo: () => ({ name: 'VWAP', params: [], values: [] }),
+    },
+    CMF: {
+        defaultParams: { period: 20, showCMF: true },
+        getTitleInfo: () => ({ name: 'CMF', params: [], values: [] }),
+    },
+    MFI: {
+        defaultParams: { period: 14, showMFI: true },
+        getTitleInfo: () => ({ name: 'MFI', params: [], values: [] }),
+    },
+    PIVOT: {
+        defaultParams: { showPP: true, showR1: true, showR2: true, showR3: false, showS1: true, showS2: true, showS3: false },
+        getTitleInfo: () => ({ name: 'Pivot', params: [], values: [] }),
+    },
+    FIB: {
+        defaultParams: { period: 50, showLevels: true },
+        getTitleInfo: () => ({ name: 'Fib', params: [], values: [] }),
+    },
+    STRUCTURE: {
+        defaultParams: { leftWindow: 2, rightWindow: 2, breakoutSource: 'close', showSwingLabels: true, showBOS: true, showCHOCH: true, showProvisional: false },
+        getTitleInfo: () => ({ name: 'Structure', params: [], values: [] }),
+    },
+    ZONES: {
+        defaultParams: { showFVG: true, showOB: true, showFilledZones: false, obLookback: 5 },
+        getTitleInfo: () => ({ name: 'Zones', params: [], values: [] }),
+    },
+    VOLUME_PROFILE: {
+        defaultParams: { bins: 24, lookback: 0, valueAreaPercent: 0.7, showVolumeProfile: true },
+        getTitleInfo: () => ({ name: 'VP', params: [], values: [] }),
+    },
+}
+
+export const SUB_PANE_INDICATORS = Object.keys(SUB_PANE_INDICATOR_CONFIGS) as SubIndicatorType[]

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

@@ -0,0 +1,115 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { SuperTrendRenderState } from '../../indicators/supertrendState'
+import { createSuperTrendStateKey } from '../../indicators/supertrendState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const ST_UP_COLOR = '#22c55e'
+const ST_DOWN_COLOR = '#ef4444'
+
+export interface SuperTrendRendererOptions {
+    paneId?: string
+}
+
+function getSuperTrendStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn(`[SuperTrendRenderer] Scheduler not available via service locator`)
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('supertrend')
+    if (!meta) {
+        console.warn(`[SuperTrendRenderer] Indicator metadata for 'supertrend' not found, skip rendering`)
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createSuperTrendRendererPlugin(options: SuperTrendRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'sub_SuperTrend' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getSuperTrendStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `supertrend_${paneId}`,
+        version: '1.0.0',
+        description: 'SuperTrend ATR 趋势带渲染器（趋势翻转处颜色切换）',
+        debugName: 'SuperTrend',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) { pluginHost = host },
+        getDeclaredNamespaces() { const key = resolveKey(); return key ? [key] : [] },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, range, scrollLeft, kLineCenters } = context
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<SuperTrendRenderState>(stateKey)
+            if (!state || !state.params.showSuperTrend || state.visibleMin > state.visibleMax) return
+
+            const { series } = state
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.lineWidth = 1
+            ctx.lineJoin = 'round'
+            ctx.lineCap = 'round'
+
+            const drawEnd = Math.min(range.end, series.length)
+            let prevX: number | null = null
+            let prevY: number | null = null
+            let prevTrend: 'up' | 'down' | null = null
+
+            for (let i = range.start; i < drawEnd; i++) {
+                const point = series[i]
+                if (point === undefined) continue
+                const centerX = kLineCenters[i - range.start]
+                if (centerX === undefined) continue
+                const y = pane.yAxis.priceToY(point.value)
+
+                if (prevX !== null && prevTrend === point.trend) {
+                    ctx.strokeStyle = point.trend === 'up' ? ST_UP_COLOR : ST_DOWN_COLOR
+                    ctx.beginPath()
+                    ctx.moveTo(prevX, prevY!)
+                    ctx.lineTo(centerX, y)
+                    ctx.stroke()
+                }
+
+                prevX = centerX
+                prevY = y
+                prevTrend = point.trend
+            }
+            ctx.restore()
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<SuperTrendRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+        setConfig() {},
+    }
+}
+
+@Indicator({
+    name: 'supertrend',
+    displayName: 'SuperTrend',
+    category: 'oscillator',
+    stateKey: createSuperTrendStateKey,
+    defaultPaneId: 'sub_SuperTrend',
+    paneIdField: 'supertrendPaneId',
+    allowMainPane: true,
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createSuperTrendStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class SuperTrendIndicatorDefinition {
+    static rendererFactory = createSuperTrendRendererPlugin
+}

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

@@ -0,0 +1,136 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { TEMARenderState } from '../../indicators/temaState'
+import { createTEMAStateKey } from '../../indicators/temaState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const TEMA_COLOR = '#d946ef'
+
+type Point = { x: number; y: number }
+
+export interface TEMARendererOptions {
+    paneId?: string
+}
+
+function getTEMAStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[TEMARenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('tema')
+    if (!meta) {
+        console.warn('[TEMARenderer] Indicator metadata for \'tema\' not found, skip rendering')
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createTEMARendererPlugin(options: TEMARendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'main' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getTEMAStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `tema_${paneId}`,
+        version: '1.1.0',
+        description: 'TEMA 三重指数移动均线渲染器（WebGL + Canvas2D 回退）',
+        debugName: 'TEMA',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
+        getDeclaredNamespaces() {
+            const key = resolveKey()
+            return key ? [key] : []
+        },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<TEMARenderState>(stateKey)
+            if (!state || !state.params.showTEMA || state.visibleMin > state.visibleMax) return
+
+            const { series } = state
+            const drawEnd = Math.min(range.end, series.length)
+            const rangeStart = range.start
+
+            const points: Point[] = []
+            for (let i = range.start; i < drawEnd; i++) {
+                const value = series[i]
+                if (value === undefined) continue
+                const centerX = kLineCenters[i - rangeStart]
+                if (centerX === undefined) continue
+                points.push({ x: centerX, y: pane.yAxis.priceToY(value) })
+            }
+
+            if (points.length < 2) return
+
+            const enableWebGL = context.settings?.enableWebGLRendering !== false
+            let usedWebGL = false
+            if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+                const allOk = lineWebGLSurface.drawLineStrips(
+                    [{ points, width: 1, color: TEMA_COLOR }],
+                    scrollLeft,
+                )
+                if (allOk) {
+                    usedWebGL = true
+                    lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
+                }
+            }
+
+            if (usedWebGL) return
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.strokeStyle = TEMA_COLOR
+            ctx.lineWidth = 1
+            ctx.lineJoin = 'round'
+            ctx.lineCap = 'round'
+            ctx.beginPath()
+            ctx.moveTo(points[0]!.x, points[0]!.y)
+            for (let i = 1; i < points.length; i++) {
+                ctx.lineTo(points[i]!.x, points[i]!.y)
+            }
+            ctx.stroke()
+            ctx.restore()
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<TEMARenderState>(stateKey)
+            return state?.params ?? {}
+        },
+
+        setConfig() {
+            // no-op
+        },
+    }
+}
+
+@Indicator({
+    name: 'tema',
+    displayName: 'TEMA',
+    category: 'main',
+    stateKey: createTEMAStateKey,
+    defaultPaneId: 'main',
+    paneIdField: 'temaPaneId',
+    allowMainPane: true,
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createTEMAStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class TEMADefinition {
+    static rendererFactory = createTEMARendererPlugin
+}

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

@@ -0,0 +1,158 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { TRIXRenderState } from '../../indicators/trixState'
+import { createTRIXStateKey } from '../../indicators/trixState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const TRIX_COLOR = '#e11d48'
+const SIGNAL_COLOR = '#f59e0b'
+
+type Point = { x: number; y: number }
+
+export interface TRIXRendererOptions { paneId?: string }
+
+function getTRIXStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn(`[TRIXRenderer] Scheduler not available via service locator`)
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('trix')
+    if (!meta) {
+        console.warn(`[TRIXRenderer] Indicator metadata for 'trix' not found, skip rendering`)
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createTRIXRendererPlugin(options: TRIXRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'sub_TRIX' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getTRIXStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `trix_${paneId}`,
+        version: '1.1.0',
+        description: 'TRIX 三重指数平滑振荡器渲染器（WebGL + Canvas2D 回退）',
+        debugName: 'TRIX',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) { pluginHost = host },
+        getDeclaredNamespaces() { const key = resolveKey(); return key ? [key] : [] },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<TRIXRenderState>(stateKey)
+            if (!state || state.visibleMin > state.visibleMax) return
+            const { showTRIX, showSignal } = state.params
+            if (!showTRIX && !showSignal) return
+
+            const { valueMin, valueMax, series, signalSeries } = state
+            const displayRange = pane.yAxis.getDisplayRange({ minPrice: valueMin, maxPrice: valueMax })
+            const displayMin = displayRange.minPrice
+            const displayMax = displayRange.maxPrice
+            const displayValueRange = displayMax - displayMin || 1
+            const paneH = pane.height
+            const invRange = paneH / displayValueRange
+            const rangeStart = range.start
+            const toY = (v: number) => paneH - (v - displayMin) * invRange
+
+            // Zero line
+            const zeroY = toY(0)
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
+            ctx.lineWidth = 1
+            ctx.setLineDash([4, 4])
+            ctx.beginPath()
+            ctx.moveTo(scrollLeft, zeroY)
+            ctx.lineTo(scrollLeft + context.paneWidth, zeroY)
+            ctx.stroke()
+            ctx.setLineDash([])
+            ctx.restore()
+
+            const trixPts: Point[] = []
+            const sigPts: Point[] = []
+            const drawEnd = Math.min(range.end, series.length)
+            for (let i = range.start; i < drawEnd; i++) {
+                const centerX = kLineCenters[i - rangeStart]
+                if (centerX === undefined) continue
+                if (showTRIX) {
+                    const v = series[i]
+                    if (v !== undefined) trixPts.push({ x: centerX, y: toY(v) })
+                }
+                if (showSignal) {
+                    const s = signalSeries[i]
+                    if (s !== undefined) sigPts.push({ x: centerX, y: toY(s) })
+                }
+            }
+
+            if (trixPts.length < 2 && sigPts.length < 2) return
+
+            const lines: Array<{ points: Point[]; width: number; color: string }> = []
+            if (trixPts.length >= 2) lines.push({ points: trixPts, width: 1, color: TRIX_COLOR })
+            if (sigPts.length >= 2) lines.push({ points: sigPts, width: 1, color: SIGNAL_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 (usedWebGL) return
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+            ctx.lineWidth = 1
+            ctx.lineJoin = 'round'
+            ctx.lineCap = 'round'
+            drawLine(ctx, trixPts, TRIX_COLOR)
+            drawLine(ctx, sigPts, SIGNAL_COLOR)
+            ctx.restore()
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<TRIXRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+        setConfig() {},
+    }
+}
+
+function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): void {
+    if (pts.length < 2) return
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.moveTo(pts[0]!.x, pts[0]!.y)
+    for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i]!.x, pts[i]!.y)
+    ctx.stroke()
+}
+
+@Indicator({
+    name: 'trix',
+    displayName: 'TRIX',
+    category: 'oscillator',
+    stateKey: createTRIXStateKey,
+    defaultPaneId: 'sub_TRIX',
+    paneIdField: 'trixPaneId',
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createTRIXStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class TRIXIndicatorDefinition {
+    static rendererFactory = createTRIXRendererPlugin
+}