@363045841yyt/klinechart-core 0.7.5 → 0.7.7

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
@@ -118,6 +118,8 @@ const UNIT_QUAD = new Float32Array([
     1, 1,
 ])
 
+const MITER_DOT_MIN = 0.5
+
 export class CandleWebGLSurface {
     private shared: SharedWebGLSurface
     private handles: RectWebGLHandles | null = null
@@ -325,7 +327,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 }>>()
@@ -375,6 +377,8 @@ export class LineWebGLSurface {
             mode: number
             firstVertex: number
             pointCount: number
+            vertices?: Float32Array
+            points?: Array<{ x: number; y: number }>
         }
 
         const gl = this.shared.getGL()
@@ -383,6 +387,7 @@ export class LineWebGLSurface {
 
         const drawCmds: DrawCmd[] = []
         let totalFloats = 0
+        let hasNativeLines = false
 
         for (const line of lines) {
             if (line.points.length < 2) return false
@@ -390,41 +395,52 @@ 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
+            if (line.width <= 1) {
+                hasNativeLines = true
+                drawCmds.push({
+                    colorValue,
+                    mode: gl.LINE_STRIP,
+                    firstVertex: totalFloats / 2,
+                    pointCount: line.points.length,
+                    points: line.points,
+                })
+                totalFloats += line.points.length * 2
+                continue
             }
+
+            const geometry = this.getLineGeometry(line)
+            if (!geometry) return false
+            drawCmds.push({
+                colorValue,
+                mode: gl.TRIANGLES,
+                firstVertex: totalFloats / 2,
+                pointCount: geometry.vertexCount,
+                vertices: geometry.vertices,
+            })
+            totalFloats += geometry.vertices.length
         }
 
         if (this.lineScratch.length < totalFloats) {
             this.lineScratch = new Float32Array(nextBufferFloatCapacity(totalFloats))
         }
         let floatOffset = 0
-        for (const line of lines) {
-            const vertices = line.width === 1
-                ? this.getThinLineVertices(line.points).vertices
-                : this.getLineGeometry(line)!.vertices
-            this.lineScratch.set(vertices, floatOffset)
-            floatOffset += vertices.length
+        for (const cmd of drawCmds) {
+            if (cmd.vertices) {
+                this.lineScratch.set(cmd.vertices, floatOffset)
+                floatOffset += cmd.vertices.length
+                continue
+            }
+
+            const points = cmd.points
+            if (!points) return false
+            for (const point of points) {
+                this.lineScratch[floatOffset++] = point.x
+                this.lineScratch[floatOffset++] = point.y
+            }
         }
 
-        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
         }
 
@@ -440,6 +456,9 @@ export class LineWebGLSurface {
 
         gl.uniform2f(handles.basic.resolutionLocation, this.logicalWidth, this.logicalHeight)
         gl.uniform1f(handles.basic.scrollXLocation, scrollLeft)
+        if (hasNativeLines) {
+            gl.lineWidth(1)
+        }
 
         for (const cmd of drawCmds) {
             gl.uniform4f(handles.basic.colorLocation, cmd.colorValue[0], cmd.colorValue[1], cmd.colorValue[2], cmd.colorValue[3])
@@ -448,36 +467,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 +518,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 +539,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 +552,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 +570,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 +599,7 @@ export class LineWebGLSurface {
             return existing
         }
 
-        this.destroyLineMsaaTargets(gl)
+        this.destroyMsaaTargets(gl)
 
         const msaaFramebuffer = gl.createFramebuffer()
         const msaaColorRenderbuffer = gl.createRenderbuffer()
@@ -643,7 +663,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 +673,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(
@@ -809,7 +829,7 @@ function buildJoinedPolylineGeometry(points: Array<{ x: number; y: number }>, ha
                 miterNX *= invMiter
                 miterNY *= invMiter
                 const dot = miterNX * currNormal.nx + miterNY * currNormal.ny
-                const scale = 1 / Math.max(0.2, Math.abs(dot))
+                const scale = 1 / Math.max(MITER_DOT_MIN, Math.abs(dot))
                 miterNX *= scale
                 miterNY *= scale
             } else {
@@ -839,7 +859,7 @@ function buildJoinedPolylineGeometry(points: Array<{ x: number; y: number }>, ha
                 nextMiterNX *= invMiter
                 nextMiterNY *= invMiter
                 const dot = nextMiterNX * nextNormal.nx + nextMiterNY * nextNormal.ny
-                const scale = 1 / Math.max(0.2, Math.abs(dot))
+                const scale = 1 / Math.max(MITER_DOT_MIN, Math.abs(dot))
                 nextMiterNX *= scale
                 nextMiterNY *= scale
             } else {

package/src/engine/renderers/yAxis.ts

@@ -2,7 +2,8 @@ import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
 import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '../../utils/kLineDraw/axis'
 import { drawScaleTicks } from '../renderers/Indicator/scale/indicator_scale'
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
+
 import type { KLineData } from '../../types/price'
 import type { ScaleType } from '../utils/tickPosition'
 
@@ -25,7 +26,7 @@ export function createYAxisRendererPlugin(options: {
 
     draw(context: RenderContext) {
       const { ctx, pane, dpr, yAxisCtx, data } = context
-      const colors = getColors(context.theme)
+      const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const scaleType = pane.yAxis.getScaleType()
 
       const targetCtx = yAxisCtx || ctx
@@ -34,7 +35,7 @@ export function createYAxisRendererPlugin(options: {
 
       if (pane.capabilities.showPriceAxisTicks) {
         drawScaleTicks({
-          colors,
+          tickColor: tokenColors.text.secondary,
           ctx: targetCtx,
           dpr,
           axisWidth,
@@ -80,7 +81,7 @@ export function createYAxisRendererPlugin(options: {
             borderColor: label.style?.borderColor,
             textColor: label.style?.textColor ?? '#ffffff',
             fontSize: isLastPrice ? 12 : 11,
-          })
+          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         }
       }
 
@@ -98,7 +99,7 @@ export function createYAxisRendererPlugin(options: {
           fontSize: 12,
           priceOffset: 0,
           price: crosshair.price,
-        })
+        }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
       }
     },
   }

package/src/engine/subPaneManager.ts

@@ -2,6 +2,7 @@ import type { Chart } from './chart'
 import type { SubIndicatorType } from './renderers/Indicator'
 import { createSignal, type Signal } from '../reactivity/signal'
 import { createSubIndicatorRenderer } from './renderers/Indicator'
+import { createPaneTitleRendererPlugin } from './renderers/paneTitle'
 import { createVolumeScaleRendererPlugin } from './renderers/Indicator/scale/volume_scale'
 import { createMacdScaleRendererPlugin } from './renderers/Indicator/scale/macd_scale'
 import { createRsiScaleRendererPlugin } from './renderers/Indicator/scale/rsi_scale'
@@ -57,6 +58,7 @@ export interface SubPaneEntry {
     params: Record<string, unknown>
     rendererName: string
     scaleRendererName: string
+    paneTitleRendererName: string
 }
 
 export class SubPaneManager {
@@ -78,6 +80,7 @@ export class SubPaneManager {
 
         const rendererName = `${indicatorId.toLowerCase()}_${paneId}`
         const scaleRendererName = `${indicatorId.toLowerCase()}_scale_${paneId}`
+        const paneTitleRendererName = `paneTitle_${paneId}`
 
         const paneExists = chart.hasPane(paneId)
         if (!paneExists) {
@@ -91,10 +94,11 @@ export class SubPaneManager {
         }
 
         this.mountScaleRenderer(chart, paneId, indicatorId, scaleRendererName)
+        this.mountPaneTitleRenderer(chart, paneId, indicatorId, params)
 
         // 必须在 syncSchedulerConfig 之前注册 entry，
         // 否则 scheduler 的 buildActiveConfig 读不到新 paneId，会将新指标的 show* 标志置为 false
-        this.entries.set(paneId, { paneId, indicatorId, params, rendererName, scaleRendererName })
+        this.entries.set(paneId, { paneId, indicatorId, params, rendererName, scaleRendererName, paneTitleRendererName })
 
         this.syncSchedulerConfig(chart, paneId, indicatorId, params)
 
@@ -110,6 +114,7 @@ export class SubPaneManager {
 
         chart.removeRenderer(entry.rendererName)
         chart.removeRenderer(entry.scaleRendererName)
+        chart.removeRenderer(entry.paneTitleRendererName)
 
         this.entries.delete(paneId)
 
@@ -129,14 +134,17 @@ export class SubPaneManager {
 
         chart.removeRenderer(entry.rendererName)
         chart.removeRenderer(entry.scaleRendererName)
+        chart.removeRenderer(entry.paneTitleRendererName)
 
         const newRendererName = `${newIndicatorId.toLowerCase()}_${paneId}`
         const newScaleRendererName = `${newIndicatorId.toLowerCase()}_scale_${paneId}`
+        const newPaneTitleRendererName = `paneTitle_${paneId}`
 
         const renderer = createSubIndicatorRenderer({ indicatorId: newIndicatorId, paneId })
         chart.useRenderer(renderer, newParams as Record<string, number | boolean | string>)
 
         this.mountScaleRenderer(chart, paneId, newIndicatorId, newScaleRendererName)
+        this.mountPaneTitleRenderer(chart, paneId, newIndicatorId, newParams)
 
         this.syncSchedulerConfig(chart, paneId, newIndicatorId, newParams)
 
@@ -146,6 +154,7 @@ export class SubPaneManager {
             params: newParams,
             rendererName: newRendererName,
             scaleRendererName: newScaleRendererName,
+            paneTitleRendererName: newPaneTitleRendererName,
         })
 
         chart.getIndicatorScheduler().onSubPaneChanged()
@@ -180,6 +189,7 @@ export class SubPaneManager {
         for (const entry of this.entries.values()) {
             chart.removeRenderer(entry.rendererName)
             chart.removeRenderer(entry.scaleRendererName)
+            chart.removeRenderer(entry.paneTitleRendererName)
         }
         this.entries.clear()
         chart.getIndicatorScheduler().onSubPaneChanged()
@@ -439,4 +449,21 @@ export class SubPaneManager {
 
         chart.useRenderer(renderer)
     }
+
+    private mountPaneTitleRenderer(chart: Chart, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): void {
+        const rendererName = `paneTitle_${paneId}`
+        const existing = chart.getRenderer(rendererName)
+        if (existing) {
+            chart.updateRendererConfig(rendererName, { params, indicatorId })
+            return
+        }
+
+        const renderer = createPaneTitleRendererPlugin({
+            paneId,
+            title: indicatorId,
+            indicatorId,
+            params,
+        })
+        chart.useRenderer(renderer)
+    }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './reactivity'
 export * from './controllers'
 export { VERSION } from './version'
+export * from './tokens'

package/src/plugin/types.ts

@@ -309,7 +309,11 @@ export interface RenderContext {
   /** 需要在X轴上绘制的范围带列表（由绘图渲染器填充，先于标签绘制） */
   xAxisRanges?: XAxisRange[]
   /** 当前主题 */
-  theme: import('../engine/theme/colors').ChartTheme
+  theme: 'light' | 'dark'
+  /** 亚洲市场惯例（红涨绿跌）；为 true 时自动交换所有 bull/bear 颜色 */
+  isAsiaMarket?: boolean
+  /** 用户颜色预设覆盖项 */
+  colorPresetSettings?: import('../tokens').ColorPresetSettings
 }
 
 export type DrawingAnchor = {

package/src/semantic/controller.ts

@@ -41,7 +41,7 @@ async function getDataFetcher(): Promise<DataFetcher> {
   return _dataFetcher
 }
 
-interface SemanticChartAdapter {
+export interface SemanticChartAdapter {
   updateData(data: ReadonlyArray<KLineData>): void
   updateRendererConfig(name: string, config: Record<string, unknown>): void
   clearSubPanes(): void

package/src/semantic/index.ts

@@ -21,7 +21,7 @@ export type {
 } from './types'
 
 export { SemanticChartController, type SemanticEventType, __setDataFetcher } from './controller'
-export type { DataFetcher } from './controller'
+export type { DataFetcher, SemanticChartAdapter } from './controller'
 
 export { SemanticConfigValidator, sanitizeParams, sanitizeColor, validateColor, validateSymbol } from './validator'