@363045841yyt/klinechart-core 0.8.6 → 0.8.7

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

@@ -2,8 +2,7 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { MFIRenderState } from '../../indicators/mfiState'
 import { createMFIStateKey, EMPTY_MFI_STATE } from '../../indicators/mfiState'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -28,7 +27,7 @@ function getMFIStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createMFIRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createMFIRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_MFI' } = options
     let pluginHost: PluginHost | null = null
 
@@ -130,25 +129,7 @@ export function createMFIRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
-export function getMFITitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    host: PluginHost,
-    paneId: string,
-): TitleInfo | null {
-    if (index === null) return null
-    const period = (params.period as number) ?? 14
-    const state = host.getSharedState<MFIRenderState>(createMFIStateKey(paneId))
-    const value = state?.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'MFI',
-        params: [period],
-        values: [{ label: 'MFI', value, color: MFI_COLOR }],
-    }
-}
+const getMFITitleInfo = createSingleLineTitleInfo({ createStateKey: createMFIStateKey, name: 'MFI', defaultPeriod: 14, color: MFI_COLOR })
 
 @Indicator({
     name: 'mfi',

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

@@ -11,11 +11,11 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, MOMSchedulerConfig } from '../../indicators/scheduler'
 import { createMomScaleRendererPlugin } from './scale/mom_scale'
 import { calcMOMData } from '../../indicators/calculators'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
-export interface MOMRendererOptions {
+interface MOMRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -37,7 +37,7 @@ function getMOMStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 MOM 渲染器插件
  */
-export function createMOMRendererPlugin(options: MOMRendererOptions = {}): RendererPluginWithHost {
+function createMOMRendererPlugin(options: MOMRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -274,33 +274,12 @@ function drawMOMLineWithCanvas2D(
     ctx.restore()
 }
 
-/**
- * 获取 MOM 标题信息（供 paneTitle 使用）
- */
-export function getMOMTitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    if (index === null) return null
-    const period = (params.period as number) ?? 10
-    const colors = resolveThemeColors('light')
-    const state = pluginHost.getSharedState<MOMRenderState>(createMOMStateKey(paneId))
-    if (!state) return null
-
-    const mom = state.series[index]
-    if (mom === undefined) return null
-
-    return {
-        name: 'MOM',
-        params: [period],
-        values: [
-            { label: 'MOM', value: mom, color: colors.mom.mom },
-        ],
-    }
-}
+const getMOMTitleInfo = createSingleLineTitleInfo({
+    createStateKey: createMOMStateKey,
+    name: 'MOM',
+    defaultPeriod: 10,
+    getColor: (colors) => colors.mom.mom,
+})
 
 @Indicator({
     name: 'mom',

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

@@ -7,8 +7,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, OBVSchedulerConfig } from '../../indicators/scheduler'
 import { calcOBVData } from '../../indicators/calculators'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const OBV_COLOR = '#16a34a'
 
@@ -28,7 +27,7 @@ function getOBVStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createOBVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createOBVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_OBV' } = options
     let pluginHost: PluginHost | null = null
 
@@ -111,24 +110,7 @@ export function createOBVRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
-export function getOBVTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  _params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const state = host.getSharedState<OBVRenderState>(createOBVStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'OBV',
-    params: [],
-    values: [{ label: 'OBV', value, color: OBV_COLOR }],
-  }
-}
+const getOBVTitleInfo = createSingleLineTitleInfo({ createStateKey: createOBVStateKey, name: 'OBV', color: OBV_COLOR })
 
 @Indicator({
     name: 'obv',

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

@@ -9,8 +9,7 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, ParkinsonSchedulerConfig } from '../../indicators/scheduler'
 import { calcParkinsonData } from '../../indicators/calculators'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const PARKINSON_COLOR = '#0891b2'
 
@@ -30,7 +29,7 @@ function getParkinsonStateKey(host: PluginHost | null, paneId: string): string |
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createParkinsonRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createParkinsonRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_Parkinson' } = options
     let pluginHost: PluginHost | null = null
 
@@ -114,26 +113,7 @@ export function createParkinsonRendererPlugin(options: { paneId?: string } = {})
     }
 }
 
-export function getParkinsonTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const period = (params.period as number) ?? 20
-  const annualizationFactor = (params.annualizationFactor as number) ?? 252
-  const state = host.getSharedState<ParkinsonRenderState>(createParkinsonStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'Parkinson',
-    params: [period, annualizationFactor],
-    values: [{ label: 'Parkinson', value, color: PARKINSON_COLOR }],
-  }
-}
+const getParkinsonTitleInfo = createSingleLineTitleInfo({ createStateKey: createParkinsonStateKey, name: 'Parkinson', getParams: (p) => [(p.period as number) ?? 20, (p.annualizationFactor as number) ?? 252], color: PARKINSON_COLOR })
 
 @Indicator({
     name: 'parkinson',

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

@@ -28,7 +28,7 @@ function getPivotStateKey(host: PluginHost | null, paneId: string): string | nul
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createPivotRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createPivotRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -116,7 +116,7 @@ function drawStep(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export const getPivotTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+const getPivotTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
     if (index === null || index < 0) return null
 
     const stateKey = createPivotStateKey(paneId)

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

@@ -7,8 +7,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, PVTSchedulerConfig } from '../../indicators/scheduler'
 import { calcPVTData } from '../../indicators/calculators'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const PVT_COLOR = '#a855f7'
 
@@ -28,7 +27,7 @@ function getPVTStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createPVTRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createPVTRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_PVT' } = options
     let pluginHost: PluginHost | null = null
 
@@ -111,24 +110,7 @@ export function createPVTRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
-export function getPVTTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  _params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const state = host.getSharedState<PVTRenderState>(createPVTStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'PVT',
-    params: [],
-    values: [{ label: 'PVT', value, color: PVT_COLOR }],
-  }
-}
+const getPVTTitleInfo = createSingleLineTitleInfo({ createStateKey: createPVTStateKey, name: 'PVT', color: PVT_COLOR })
 
 @Indicator({
     name: 'pvt',

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

@@ -8,14 +8,13 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, ROCSchedulerConfig } from '../../indicators/scheduler'
 import { calcROCData } from '../../indicators/calculators'
-import type { KLineData } from '../../../types/price'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const ROC_COLOR = '#0ea5e9'
 
 type LinePoint = { x: number; y: number }
 
-export interface ROCRendererOptions { paneId?: string }
+interface ROCRendererOptions { paneId?: string }
 
 function getROCStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -31,7 +30,7 @@ function getROCStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createROCRendererPlugin(options: ROCRendererOptions = {}): RendererPluginWithHost {
+function createROCRendererPlugin(options: ROCRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub_ROC' } = options
     let pluginHost: PluginHost | null = null
 
@@ -132,25 +131,7 @@ export function createROCRendererPlugin(options: ROCRendererOptions = {}): Rende
     }
 }
 
-export function getROCTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  params: Record<string, number | boolean | string>,
-  pluginHost: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const period = (params.period as number) ?? 12
-  const state = pluginHost.getSharedState<ROCRenderState>(createROCStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'ROC',
-    params: [period],
-    values: [{ label: 'ROC', value, color: ROC_COLOR }],
-  }
-}
+const getROCTitleInfo = createSingleLineTitleInfo({ createStateKey: createROCStateKey, name: 'ROC', defaultPeriod: 12, color: ROC_COLOR })
 
 @Indicator({
     name: 'roc',

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

@@ -14,7 +14,7 @@ import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
-export interface RSIRendererOptions {
+interface RSIRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getRSIStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 RSI 渲染器插件
  */
-export function createRSIRendererPlugin(options: RSIRendererOptions = {}): RendererPluginWithHost {
+function createRSIRendererPlugin(options: RSIRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -298,7 +298,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
  * 获取 RSI 标题信息（供 paneTitle 使用）
  * 从 StateStore 读取已计算的 RSI 数据
  */
-export function drawRSILinesWithCanvas2D(
+function drawRSILinesWithCanvas2D(
     ctx: CanvasRenderingContext2D,
     scrollLeft: number,
     rsi1Points: LinePoint[],
@@ -351,7 +351,7 @@ export function drawRSILinesWithCanvas2D(
     ctx.restore()
 }
 
-export function getRSITitleInfo(
+function getRSITitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

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

@@ -13,7 +13,7 @@ import { createValuePointVisibleStateComposer } from '../../indicators/visibleSt
 const DOT_RADIUS = 1.5
 const TAU = Math.PI * 2
 
-export interface SARRendererOptions {
+interface SARRendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getSARStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createSARRendererPlugin(options: SARRendererOptions = {}): RendererPluginWithHost {
+function createSARRendererPlugin(options: SARRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -99,7 +99,7 @@ export function createSARRendererPlugin(options: SARRendererOptions = {}): Rende
     }
 }
 
-export function getSARTitleInfo(
+function getSARTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/scale/indicator_scale.ts

@@ -57,6 +57,8 @@ export interface DrawScaleTicksOptions {
     hideEdgeTicks?: boolean
     scaleType?: ScaleType
     formatLabel?: (value: number) => string
+    /** 文字对齐方式，默认 'center'。左侧轴应使用 'right' */
+    textAlign?: CanvasTextAlign
 }
 
 const BASELINE_MIDDLE = 'middle' as const
@@ -77,6 +79,7 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
         hideEdgeTicks = true,
         scaleType = 'linear',
         formatLabel,
+        textAlign = 'center',
     } = options
 
     ctx.clearRect(0, 0, axisWidth, height)
@@ -84,11 +87,15 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
     const font = getFont(12)
     setCanvasFont(ctx, font)
     ctx.textBaseline = BASELINE_MIDDLE
-    ctx.textAlign = ALIGN_CENTER
+    ctx.textAlign = textAlign as CanvasTextAlign
     ctx.fillStyle = options.tickColor
 
-    const centerX = axisWidth / 2
-    const centerXPx = roundToPhysicalPixel(centerX, dpr)
+    const alignTo = textAlign === 'center'
+      ? roundToPhysicalPixel(axisWidth / 2, dpr)
+      : textAlign === 'right'
+        ? roundToPhysicalPixel(axisWidth - 4, dpr)
+        : roundToPhysicalPixel(4, dpr)
+    const textX = alignTo
 
     const positions = calculateValueTickPositions({
         height,
@@ -106,7 +113,7 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
 
     for (let i = 0; i < positions.length; i++) {
         const { y, value } = positions[i]!
-        ctx.fillText(format(value), centerXPx, alignToPhysicalPixelCenter(y, dpr))
+        ctx.fillText(format(value), textX, y)
     }
 }
 

package/src/engine/renderers/Indicator/shared/dashedLines.ts

@@ -0,0 +1,81 @@
+import { alignToPhysicalPixelCenter } from '../../../draw/pixelAlign'
+
+export function createDashedLineRenderer() {
+  let offscreenCanvas: HTMLCanvasElement | null = null
+  let offscreenCtx: CanvasRenderingContext2D | null = null
+  let cachedDashedLinesKey = ''
+
+  function getOffscreenCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
+    if (!offscreenCanvas || offscreenCanvas.width !== width || offscreenCanvas.height !== height) {
+      offscreenCanvas = document.createElement('canvas')
+      offscreenCanvas.width = width
+      offscreenCanvas.height = height
+      offscreenCtx = offscreenCanvas.getContext('2d')!
+      cachedDashedLinesKey = ''
+    }
+    return { canvas: offscreenCanvas, ctx: offscreenCtx! }
+  }
+
+  function buildKey(
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): string {
+    return `${paneWidth}|${paneHeight}|${displayMin.toFixed(4)}|${displayMax.toFixed(4)}|${dpr}`
+  }
+
+  function renderToOffscreen(
+    ctx: CanvasRenderingContext2D,
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): void {
+    const displayValueRange = displayMax - displayMin || 1
+    const y80 = alignToPhysicalPixelCenter(paneHeight - (80 - displayMin) / displayValueRange * paneHeight, dpr)
+    const y20 = alignToPhysicalPixelCenter(paneHeight - (20 - displayMin) / displayValueRange * paneHeight, dpr)
+
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    ctx.save()
+    ctx.scale(dpr, dpr)
+
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
+    ctx.lineWidth = 1
+    ctx.setLineDash([4, 4])
+    ctx.beginPath()
+    ctx.moveTo(0, y80)
+    ctx.lineTo(paneWidth, y80)
+    ctx.moveTo(0, y20)
+    ctx.lineTo(paneWidth, y20)
+    ctx.stroke()
+
+    ctx.restore()
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    paneWidth: number,
+    paneHeight: number,
+    displayMin: number,
+    displayMax: number,
+    dpr: number
+  ): void {
+    const key = buildKey(paneWidth, paneHeight, displayMin, displayMax, dpr)
+    if (cachedDashedLinesKey !== key) {
+      cachedDashedLinesKey = key
+      const { ctx: offCtx } = getOffscreenCanvas(
+        Math.ceil(paneWidth * dpr),
+        Math.ceil(paneHeight * dpr)
+      )
+      renderToOffscreen(offCtx, paneWidth, paneHeight, displayMin, displayMax, dpr)
+    }
+    if (offscreenCanvas) {
+      ctx.drawImage(offscreenCanvas, 0, 0, paneWidth, paneHeight)
+    }
+  }
+
+  return { render }
+}

package/src/engine/renderers/Indicator/shared/titleInfo.ts

@@ -0,0 +1,52 @@
+import type { PluginHost } from '../../../../plugin'
+import type { KLineData } from '../../../../types/price'
+import type { GetTitleInfoFn, TitleInfo } from '../../../indicators/indicatorMetadata'
+import { resolveThemeColors } from '../../../../tokens'
+
+interface SingleSeriesState {
+  timestamp: number
+  series: (number | undefined)[]
+  params?: Record<string, unknown>
+}
+
+interface SingleLineTitleInfoConfig {
+  createStateKey: (paneId: string) => string
+  name: string
+  label?: string
+  defaultPeriod?: number
+  getColor?: (colors: ReturnType<typeof resolveThemeColors>) => string
+  color?: string
+  getParams?: (stateParams: Record<string, unknown>) => number[]
+}
+
+export function createSingleLineTitleInfo(config: SingleLineTitleInfoConfig): GetTitleInfoFn {
+  const { createStateKey, name, label = name, defaultPeriod, getColor, color, getParams } = config
+
+  return (
+    _data: KLineData[],
+    index: number | null,
+    _params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    paneId: string,
+  ): TitleInfo | null => {
+    if (index === null) return null
+
+    const stateKey = createStateKey(paneId)
+    const state = pluginHost.getSharedState<SingleSeriesState>(stateKey)
+    if (!state) return null
+
+    const val = state.series[index]
+    if (val === undefined) return null
+
+    const resolvedColor = color ?? (getColor ? getColor(resolveThemeColors('light')) : 'inherit')
+    const resolvedParams = getParams
+      ? getParams(state.params as Record<string, unknown>)
+      : defaultPeriod !== undefined ? [(_params.period as number) ?? defaultPeriod] : []
+
+    return {
+      name,
+      params: resolvedParams,
+      values: [{ label, value: val, color: resolvedColor }],
+    }
+  }
+}

package/src/engine/renderers/Indicator/shared/webglBand.ts

@@ -0,0 +1,23 @@
+import type { RenderContext } from '../../../../plugin'
+
+export function getRgbaAlpha(color: string): number {
+  const match = color.match(/^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)$/i)
+  if (!match) return 1
+  const alpha = Number(match[1])
+  return Number.isFinite(alpha) ? alpha : 1
+}
+
+export function toOpaqueRgba(color: string): string {
+  return color.replace(/,\s*[\d.]+\s*\)$/i, ', 1)')
+}
+
+export function compositeLineSurface(
+  context: RenderContext,
+  surface: NonNullable<RenderContext['lineWebGLSurface']>,
+  alpha = 1
+): void {
+  surface.compositeTo(context.ctx, {
+    alpha,
+    imageSmoothingEnabled: false,
+  })
+}