@363045841yyt/klinechart-core 0.7.5 → 0.7.6

package/src/engine/chart.ts

@@ -9,7 +9,6 @@ import { PaneRenderer } from './paneRenderer'
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface'
 import { MarkerManager, type CustomMarkerEntity } from './marker/registry'
 import { getPhysicalKLineConfig, calcKWidthPx } from './utils/klineConfig'
-import { computeContentWidth } from './chart-store'
 import { computeZoom, computeZoomToLevel, type ZoomConfig } from './utils/zoom'
 import { IndicatorScheduler } from './indicators/scheduler'
 import { getRegisteredIndicatorDefinitions } from './indicators/indicatorDefinitionRegistry'
@@ -214,21 +213,12 @@ export class Chart {
     /** pane ratio 状态（按 paneId 维护，sum=1 仅对可见 pane） */
     private _internalPaneRatios: Map<string, number> = new Map()
 
-    /** 视口变化回调（供外部同步 DPR/尺寸） */
-    private onViewportChange?: (viewport: Viewport) => void
-
     /** 共享 X 轴上下文缓存 */
     private xAxisCtx: CanvasRenderingContext2D | null = null
 
     /** Chart 级共享 WebGL canvas/context */
     private sharedWebGLSurface: SharedWebGLSurface
 
-    /** pane 布局回流回调（Chart -> UI 单向） */
-    private onPaneLayoutChange?: (panes: PaneSpec[]) => void
-
-    /** 数据变化回调（供外部同步 dataLength） */
-    private onDataChange?: (data: KLineData[]) => void
-
     /** 当前缩放级别（1 ~ zoomLevelCount） */
     private currentZoomLevel: number = 1
 
@@ -1243,21 +1233,6 @@ export class Chart {
         return this.zoomLevelCount
     }
 
-    /** 注册视口变化回调 */
-    setOnViewportChange(cb: (viewport: Viewport) => void) {
-        this.onViewportChange = cb
-    }
-
-    /** 注册 pane 布局回流回调 */
-    setOnPaneLayoutChange(cb: (panes: PaneSpec[]) => void) {
-        this.onPaneLayoutChange = cb
-    }
-
-    /** 注册数据变化回调 */
-    setOnDataChange(cb: (data: KLineData[]) => void) {
-        this.onDataChange = cb
-    }
-
     /** 获取所有 PaneRenderer */
     getPaneRenderers(): PaneRenderer[] {
         return this.paneRenderers
@@ -1436,7 +1411,7 @@ export class Chart {
         })
         this._paneRatiosSignal.set(ratios)
 
-        this.onPaneLayoutChange?.(this.getPaneLayoutSpecs())
+        this._paneLayoutSignal.set(this.getPaneLayoutSpecs())
     }
 
     private applyPaneLayoutSpecs(panes: PaneSpec[]): void {
@@ -1781,7 +1756,6 @@ export class Chart {
     updateData(data: KLineData[]) {
         this._internalData = data ?? []
         this._dataSignal.set([...this._internalData])
-        this.onDataChange?.(this._internalData)
 
         // 重算 DOM scrollLeft 状态, 防止左右滚动超出数据长度范围
         const container = this.dom.container
@@ -1848,13 +1822,16 @@ export class Chart {
 
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth(): number {
-        return computeContentWidth({
-            dataLength: this._internalData.length,
-            kWidth: this.opt.kWidth,
-            kGap: this.opt.kGap,
-            viewWidth: this._internalViewport?.plotWidth ?? 0,
-            viewportDpr: this.getEffectiveDpr(),
-        })
+        const dataLength = this._internalData.length
+        if (dataLength === 0) return 0
+        const kWidth = this.opt.kWidth
+        const kGap = this.opt.kGap
+        const viewWidth = this._internalViewport?.plotWidth ?? 0
+        const dpr = this.getEffectiveDpr()
+        const TRAILING_DRAWING_SLOTS = 24
+        const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
+        const dataPlotWidth = (startXPx + (dataLength + TRAILING_DRAWING_SLOTS) * unitPx) / dpr
+        return Math.max(dataPlotWidth, viewWidth)
     }
 
 
@@ -1936,8 +1913,6 @@ export class Chart {
         // 清理渲染器插件管理器（会调用所有 onUninstall）
         this.rendererPluginManager.clear()
 
-        this.onViewportChange = undefined
-        this.onPaneLayoutChange = undefined
         this.indicatorScheduler.destroy()
         await this.pluginHost.destroy()
     }
@@ -2255,7 +2230,18 @@ export class Chart {
 
         this._internalViewport = vp
         if (viewportChanged) {
-            this.onViewportChange?.(vp)
+            const current = this._viewportSignal.peek()
+            this._viewportSignal.set({
+                zoomLevel: current.zoomLevel,
+                plotWidth: vp.plotWidth,
+                plotHeight: vp.plotHeight,
+                dpr: vp.dpr > 0 ? vp.dpr : current.dpr,
+                visibleFrom: current.visibleFrom,
+                visibleTo: current.visibleTo,
+                desiredScrollLeft: current.desiredScrollLeft,
+                kWidth: current.kWidth,
+                kGap: current.kGap,
+            })
         }
         return vp
     }
@@ -2280,6 +2266,7 @@ export class Chart {
     private _drawingToolSignal = createSignal<DrawingToolType | null>(null)
     private _drawingsSignal = createSignal<ReadonlyArray<import('../plugin').DrawingObject>>([])
     private _paneRatiosSignal = createSignal<Readonly<Record<string, number>>>({})
+    private _paneLayoutSignal = createSignal<PaneSpec[]>([])
     private _interactionSignal = createSignal<InteractionSnapshot>({
         crosshairPos: null,
         crosshairIndex: null,
@@ -2369,6 +2356,10 @@ export class Chart {
         return this._paneRatiosSignal
     }
 
+    get paneLayout(): Signal<PaneSpec[]> {
+        return this._paneLayoutSignal
+    }
+
     /** 交互状态信号 */
     get interactionState(): Signal<InteractionSnapshot> {
         return this._interactionSignal

package/src/engine/controller/interaction.ts

@@ -102,10 +102,17 @@ export class InteractionController {
 
     constructor(chart: Chart) {
         this.chart = chart
+        this.setupPinchZoom()
     }
 
-    setOnPinchZoom(callback: (delta: number, centerX: number) => void) {
-        this.pinchTracker.setOnPinchZoom(callback)
+    private setupPinchZoom(): void {
+        this.pinchTracker.setOnPinchZoom((delta, centerClientX) => {
+            const container = this.chart.getDom().container
+            if (!container) return
+            const rect = container.getBoundingClientRect()
+            const centerX = centerClientX - rect.left
+            this.chart.handlePinchZoom(delta, centerX)
+        })
     }
 
     /** 更新用户设置 */

package/src/engine/drawing/interaction.ts

@@ -1,5 +1,5 @@
 import type { DrawingObject, DrawingKind, DrawingAnchor, DrawingStyle } from '../../plugin'
-import type { Chart } from '../chart'
+import type { DrawingChartAdapter } from '../../controllers/types'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
 import { computeLinearRegression } from './index'
 
@@ -55,7 +55,7 @@ const LINE_HIT_RADIUS = 6
  * 封装绘图工具的交互逻辑，与 Vue 组件解耦
  */
 export class DrawingInteractionController {
-  private chart: Chart
+  private adapter: DrawingChartAdapter
   private activeTool: DrawingToolId = 'cursor'
   private pendingAnchors: DrawingAnchorInput[] = []
   private drawings: DrawingObject[] = []
@@ -87,8 +87,8 @@ export class DrawingInteractionController {
     'disjoint-channel',
   ]
 
-  constructor(chart: Chart) {
-    this.chart = chart
+  constructor(adapter: DrawingChartAdapter) {
+    this.adapter = adapter
   }
 
   setCallbacks(callbacks: DrawingInteractionCallbacks) {
@@ -114,7 +114,7 @@ export class DrawingInteractionController {
 
   setDrawings(drawings: DrawingObject[]) {
     this.drawings = drawings
-    this.chart.setDrawings(drawings)
+    this.adapter.setDrawings(drawings)
   }
 
   clear() {
@@ -133,7 +133,7 @@ export class DrawingInteractionController {
     this.drawings = this.drawings.map((d) =>
       d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d
     )
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   removeDrawing(drawingId: string): void {
@@ -141,7 +141,7 @@ export class DrawingInteractionController {
     if (this.selectedDrawingId === drawingId) {
       this.setSelected(null)
     }
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   /**
@@ -287,7 +287,7 @@ export class DrawingInteractionController {
       }
     }
 
-    this.chart.setDrawings([...this.drawings])
+    this.adapter.setDrawings([...this.drawings])
     return true
   }
 
@@ -400,7 +400,7 @@ export class DrawingInteractionController {
 
     this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
     this.drawings = [...this.drawings, preview]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     return true
   }
 
@@ -446,7 +446,7 @@ export class DrawingInteractionController {
     drawing: DrawingObject,
     regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
   ): LineSegment[] {
-    const viewport = this.chart.getViewport()
+    const viewport = this.adapter.getViewport()
     if (!viewport) return []
 
     if (drawing.kind === 'regression-channel') {
@@ -458,12 +458,11 @@ export class DrawingInteractionController {
       const screen = this.anchorToScreen(drawing.anchors[0]!)
       if (!screen) return []
 
-      const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-      const pane = paneRenderer?.getPane()
-      if (!pane) return []
+      const paneInfo = this.adapter.getPaneInfo('main')
+      if (!paneInfo) return []
 
       const right = viewport.plotWidth
-      const bottom = pane.height
+      const bottom = paneInfo.height
 
       switch (drawing.kind) {
         case 'horizontal-line':
@@ -582,7 +581,7 @@ export class DrawingInteractionController {
     const cached = regressionGeometryCache?.get(drawing.id)
     if (cached !== undefined) return cached
 
-    const data = this.chart.getData()
+    const data = this.adapter.getData()
     if (data.length === 0 || drawing.anchors.length < 2) {
       regressionGeometryCache?.set(drawing.id, null)
       return null
@@ -645,21 +644,17 @@ export class DrawingInteractionController {
   // ============ 坐标转换 ============
 
   private anchorToScreen(anchor: DrawingAnchor): { x: number; y: number } | null {
-    const viewport = this.chart.getViewport()
+    const viewport = this.adapter.getViewport()
     if (!viewport) return null
 
-    const opt = this.chart.getOption()
-    const dpr = this.chart.getCurrentDpr()
-    const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
+    const { kWidth, kGap } = this.adapter.getKWidthKGap()
+    const dpr = this.adapter.getCurrentDpr()
+    const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr)
     if (!Number.isFinite(anchor.index)) return null
 
     const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
-
-    const y = pane.yAxis.priceToY(anchor.price)
+    const y = this.adapter.priceToY('main', anchor.price)
     return { x, y }
   }
 
@@ -667,23 +662,22 @@ export class DrawingInteractionController {
     screenX: number,
     screenY: number
   ): DrawingAnchorInput | null {
-    const data = this.chart.getData()
-    const viewport = this.chart.getViewport()
+    const data = this.adapter.getData()
+    const viewport = this.adapter.getViewport()
     if (!viewport || data.length === 0) return null
 
-    const logicalIndex = this.chart.getLogicalIndexAtX(screenX)
+    const logicalIndex = this.adapter.getLogicalIndexAtX(screenX)
     if (logicalIndex === null) return null
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
+    const paneInfo = this.adapter.getPaneInfo('main')
+    if (!paneInfo) return null
 
-    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+    const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
 
     return {
       index: logicalIndex,
       time: timestamp ?? undefined,
-      price: pane.yAxis.yToPrice(screenY - pane.top),
+      price: this.adapter.yToPrice('main', screenY - paneInfo.top),
     }
   }
 
@@ -693,22 +687,22 @@ export class DrawingInteractionController {
     const newId = drawing?.id ?? null
     if (this.selectedDrawingId === newId) return
     this.selectedDrawingId = newId
-    this.chart.setSelectedDrawingId(newId)
+    this.adapter.setSelectedDrawingId(newId)
     this.callbacks.onDrawingSelected?.(drawing)
   }
 
   private removePreview() {
     if (!this.drawings.some((d) => d.id === this.previewDrawingId)) return
     this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
   }
 
   private resolveAnchorFromPointer(
     e: PointerEvent,
     container: HTMLElement
   ): DrawingAnchorInput | null {
-    const data = this.chart.getData()
-    const viewport = this.chart.getViewport()
+    const data = this.adapter.getData()
+    const viewport = this.adapter.getViewport()
     if (!viewport || data.length === 0) return null
 
     const rect = container.getBoundingClientRect()
@@ -718,21 +712,18 @@ export class DrawingInteractionController {
       return null
     }
 
-    const paneRenderer = this.chart.getPaneRenderers().find((item) => {
-      const pane = item.getPane()
-      return pane.id === 'main' && mouseY >= pane.top && mouseY <= pane.top + pane.height
-    })
-    const pane = paneRenderer?.getPane()
-    if (!pane) return null
+    const paneInfo = this.adapter.getPaneInfo('main')
+    if (!paneInfo) return null
+    if (mouseY < paneInfo.top || mouseY > paneInfo.top + paneInfo.height) return null
 
-    const logicalIndex = this.chart.getLogicalIndexAtX(mouseX)
+    const logicalIndex = this.adapter.getLogicalIndexAtX(mouseX)
     if (logicalIndex === null) return null
-    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+    const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
 
     return {
       index: logicalIndex,
       time: timestamp ?? undefined,
-      price: pane.yAxis.yToPrice(mouseY - pane.top),
+      price: this.adapter.yToPrice('main', mouseY - paneInfo.top),
     }
   }
 
@@ -754,7 +745,7 @@ export class DrawingInteractionController {
     }
 
     this.drawings = [...this.drawings, drawing]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     this.callbacks.onDrawingCreated?.(drawing)
     this.activeTool = 'cursor'
     this.callbacks.onToolChange?.('cursor')
@@ -801,7 +792,7 @@ export class DrawingInteractionController {
     }
 
     this.drawings = [...this.drawings, drawing]
-    this.chart.setDrawings(this.drawings)
+    this.adapter.setDrawings(this.drawings)
     this.callbacks.onDrawingCreated?.(drawing)
     this.activeTool = 'cursor'
     this.callbacks.onToolChange?.('cursor')

package/src/engine/renderers/paneTitle.ts

@@ -1,7 +1,9 @@
-import type { RendererPlugin, RenderContext } from '../../plugin'
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import { getColors } from '../theme/colors'
 import { getFont, setCanvasFont } from '../theme/fonts'
+import { SUB_PANE_INDICATOR_CONFIGS } from './Indicator/subPaneConfig'
+import type { SubIndicatorType } from './Indicator'
 
 const textWidthCache = new Map<string, number>()
 const TEXT_WIDTH_CACHE_LIMIT = 256
@@ -21,49 +23,30 @@ function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
     return width
 }
 
-/**
- * 单个数值项
- */
 export interface TitleValueItem {
-    /** 标签（如 "DIF"、"DEA"） */
     label: string
-    /** 数值 */
     value: number
-    /** 颜色 */
     color: string
 }
 
-/**
- * 标题信息（由指标渲染器提供）
- */
 export interface TitleInfo {
-    /** 指标名称（如 "MACD"） */
     name: string
-    /** 参数列表（如 [12, 26, 9]） */
     params?: number[]
-    /** 数值项列表 */
     values?: TitleValueItem[]
 }
 
 export interface PaneTitleOptions {
-    /** 面板 ID */
     paneId: string
-    /** 标题文本（静态模式） */
     title: string
-    /** 副标题/描述 */
     description?: string
-    /** Y 偏移（逻辑像素） */
     yOffset?: number
-    /** 动态标题信息提供函数 */
-    getTitleInfo?: () => TitleInfo | null
+    indicatorId: SubIndicatorType
+    params: Record<string, unknown>
 }
 
-/**
- * 创建面板标题渲染器插件
- * 在面板左上角显示标题，支持动态指标数值显示
- */
-export function createPaneTitleRendererPlugin(options: PaneTitleOptions): RendererPlugin {
+export function createPaneTitleRendererPlugin(options: PaneTitleOptions): RendererPluginWithHost {
     let currentOptions = { ...options }
+    let pluginHost: PluginHost | null = null
 
     return {
         name: `paneTitle_${options.paneId}`,
@@ -74,6 +57,10 @@ export function createPaneTitleRendererPlugin(options: PaneTitleOptions): Render
         priority: RENDERER_PRIORITY.FOREGROUND,
         layer: 'overlay',
 
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
         draw(context: RenderContext) {
             const { overlayCtx, pane, paneWidth } = context
             const colors = getColors(context.theme)
@@ -89,7 +76,11 @@ export function createPaneTitleRendererPlugin(options: PaneTitleOptions): Render
             overlayCtx.textAlign = 'left'
             overlayCtx.textBaseline = 'top'
 
-            const titleInfo = currentOptions.getTitleInfo?.()
+            const config = SUB_PANE_INDICATOR_CONFIGS[currentOptions.indicatorId]
+            const crosshairIndex = context.crosshairIndex ?? null
+            const titleInfo = config && pluginHost
+                ? config.getTitleInfo(context.data, crosshairIndex, currentOptions.params as Record<string, number | boolean | string>, pluginHost, currentOptions.paneId)
+                : null
 
             if (titleInfo) {
                 let currentX = x

package/src/engine/renderers/webgl/candleSurface.ts

@@ -46,7 +46,7 @@ type LineWebGLHandles = {
     basic: BasicLineWebGLHandles
 }
 
-type LineMsaaTargets = {
+type MsaaTargets = {
     samples: number
     widthPx: number
     heightPx: number
@@ -325,7 +325,7 @@ export class LineWebGLSurface {
     private fillScratch = new Float32Array(0)
     private lineScratch = new Float32Array(0)
     private region: WebGLRegion | null = null
-    private msaaTargets: LineMsaaTargets | null = null
+    private msaaTargets: MsaaTargets | null = null
 
     // Geometry cache: 以 points 数组引用 + halfWidth 为 key，避免每帧重算法线/miter
     private geoCache = new WeakMap<Array<{ x: number; y: number }>, Map<number, { vertices: Float32Array; vertexCount: number }>>()
@@ -390,16 +390,10 @@ export class LineWebGLSurface {
             const colorValue = parseColor(line.color)
             if (!colorValue) return false
 
-            if (line.width === 1) {
-                const { vertexCount, vertices } = this.getThinLineVertices(line.points)
-                drawCmds.push({ colorValue, mode: gl.LINE_STRIP, firstVertex: totalFloats / 2, pointCount: vertexCount })
-                totalFloats += vertices.length
-            } else {
-                const geometry = this.getLineGeometry(line)
-                if (!geometry) return false
-                drawCmds.push({ colorValue, mode: gl.TRIANGLES, firstVertex: totalFloats / 2, pointCount: geometry.vertexCount })
-                totalFloats += geometry.vertices.length
-            }
+            const geometry = this.getLineGeometry(line)
+            if (!geometry) return false
+            drawCmds.push({ colorValue, mode: gl.TRIANGLES, firstVertex: totalFloats / 2, pointCount: geometry.vertexCount })
+            totalFloats += geometry.vertices.length
         }
 
         if (this.lineScratch.length < totalFloats) {
@@ -407,24 +401,13 @@ export class LineWebGLSurface {
         }
         let floatOffset = 0
         for (const line of lines) {
-            const vertices = line.width === 1
-                ? this.getThinLineVertices(line.points).vertices
-                : this.getLineGeometry(line)!.vertices
+            const vertices = this.getLineGeometry(line)!.vertices
             this.lineScratch.set(vertices, floatOffset)
             floatOffset += vertices.length
         }
 
-        const physical = this.shared.getPhysicalRegion(region)
-        const msaaTargets = physical ? this.ensureLineMsaaTargets(gl, physical) : null
-        const useMsaa = msaaTargets !== null
-
-        if (useMsaa) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, msaaTargets.msaaFramebuffer)
-            gl.viewport(0, 0, msaaTargets.widthPx, msaaTargets.heightPx)
-            gl.disable(gl.SCISSOR_TEST)
-            gl.clearColor(0, 0, 0, 0)
-            gl.clear(gl.COLOR_BUFFER_BIT)
-        } else if (!this.shared.bindRegion(region)) {
+        const msaaRender = this.beginMsaaRender(gl, region)
+        if (!msaaRender && !this.shared.bindRegion(region)) {
             return false
         }
 
@@ -448,36 +431,14 @@ export class LineWebGLSurface {
 
         gl.bindVertexArray(null)
 
-        if (useMsaa && msaaTargets && physical) {
-            this.resolveLineMsaaToSharedRegion(gl, msaaTargets, physical)
+        if (msaaRender) {
+            this.resolveMsaaToSharedRegion(gl, msaaRender.targets, msaaRender.physical)
         }
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null)
         return true
     }
 
-    private getThinLineVertices(points: Array<{ x: number; y: number }>): { vertices: Float32Array; vertexCount: number } {
-        let widthMap = this.geoCache.get(points)
-        if (widthMap) {
-            const cached = widthMap.get(0)
-            if (cached) return cached
-        } else {
-            widthMap = new Map()
-            this.geoCache.set(points, widthMap)
-        }
-
-        const vertexCount = points.length
-        const vertices = new Float32Array(vertexCount * 2)
-        let writeIndex = 0
-        for (const point of points) {
-            vertices[writeIndex++] = point.x
-            vertices[writeIndex++] = point.y
-        }
-        const result = { vertices, vertexCount }
-        widthMap.set(0, result)
-        return result
-    }
-
     private getLineGeometry(line: LineStrip): { vertices: Float32Array; vertexCount: number } | null {
         const halfWidth = line.width / 2
         let widthMap = this.geoCache.get(line.points)
@@ -521,7 +482,11 @@ export class LineWebGLSurface {
         }
 
         const gl = this.shared.getGL()
-        if (!gl || !this.region || !this.shared.bindRegion(this.region)) return false
+        const region = this.region
+        if (!gl || !region) return false
+
+        const msaaRender = this.beginMsaaRender(gl, region)
+        if (!msaaRender && !this.shared.bindRegion(region)) return false
 
         gl.useProgram(handles.basic.program)
         gl.bindVertexArray(handles.basic.vao)
@@ -538,6 +503,12 @@ export class LineWebGLSurface {
         gl.uniform4f(handles.basic.colorLocation, colorValue[0], colorValue[1], colorValue[2], colorValue[3])
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexCount)
         gl.bindVertexArray(null)
+
+        if (msaaRender) {
+            this.resolveMsaaToSharedRegion(gl, msaaRender.targets, msaaRender.physical)
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null)
         return true
     }
 
@@ -545,7 +516,7 @@ export class LineWebGLSurface {
         const handles = this.handles
         const gl = this.shared.getGL()
         if (gl) {
-            this.destroyLineMsaaTargets(gl)
+            this.destroyMsaaTargets(gl)
         }
         if (!handles) {
             this.vertexCapacity = 0
@@ -563,7 +534,20 @@ export class LineWebGLSurface {
         this.vertexCapacity = 0
     }
 
-    private ensureLineMsaaTargets(gl: WebGL2RenderingContext, physical: PhysicalRegion): LineMsaaTargets | null {
+    private beginMsaaRender(gl: WebGL2RenderingContext, region: WebGLRegion): { targets: MsaaTargets; physical: PhysicalRegion } | null {
+        const physical = this.shared.getPhysicalRegion(region)
+        const targets = physical ? this.ensureMsaaTargets(gl, physical) : null
+        if (!physical || !targets) return null
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, targets.msaaFramebuffer)
+        gl.viewport(0, 0, targets.widthPx, targets.heightPx)
+        gl.disable(gl.SCISSOR_TEST)
+        gl.clearColor(0, 0, 0, 0)
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        return { targets, physical }
+    }
+
+    private ensureMsaaTargets(gl: WebGL2RenderingContext, physical: PhysicalRegion): MsaaTargets | null {
         const preferredSamples = 4
         const maxSamples = Number(gl.getParameter(gl.MAX_SAMPLES)) || 0
         const samples = Math.max(1, Math.min(preferredSamples, maxSamples))
@@ -579,7 +563,7 @@ export class LineWebGLSurface {
             return existing
         }
 
-        this.destroyLineMsaaTargets(gl)
+        this.destroyMsaaTargets(gl)
 
         const msaaFramebuffer = gl.createFramebuffer()
         const msaaColorRenderbuffer = gl.createRenderbuffer()
@@ -643,7 +627,7 @@ export class LineWebGLSurface {
         return targets
     }
 
-    private destroyLineMsaaTargets(gl: WebGL2RenderingContext): void {
+    private destroyMsaaTargets(gl: WebGL2RenderingContext): void {
         const targets = this.msaaTargets
         if (!targets) return
         gl.deleteFramebuffer(targets.msaaFramebuffer)
@@ -653,7 +637,7 @@ export class LineWebGLSurface {
         this.msaaTargets = null
     }
 
-    private resolveLineMsaaToSharedRegion(gl: WebGL2RenderingContext, targets: LineMsaaTargets, physical: PhysicalRegion): void {
+    private resolveMsaaToSharedRegion(gl: WebGL2RenderingContext, targets: MsaaTargets, physical: PhysicalRegion): void {
         gl.bindFramebuffer(gl.READ_FRAMEBUFFER, targets.msaaFramebuffer)
         gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, targets.resolveFramebuffer)
         gl.blitFramebuffer(