@363045841yyt/klinechart-core 0.7.6 → 0.7.7

package/src/engine/renderers/subVolume.ts

@@ -2,7 +2,7 @@ import type { RendererPluginWithHost, RenderContext, PluginHost, BaseIndicatorSt
 import { RENDERER_PRIORITY } from '../../plugin'
 import { createIndicatorStateKey } from '../../plugin/stateKeys'
 import type { KLineData } from '../../types/price'
-import { getColors, type VolumeColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import { Indicator } from '../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../indicators/indicatorMetadata'
 import type { IndicatorScheduler } from '../indicators/scheduler'
@@ -61,7 +61,10 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
 
         draw(context: RenderContext) {
             const { ctx, pane, data, range, dpr } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            const upVolume = colors.volumeUp
+            const downVolume = colors.volumeDown
+            const neutralVolume = colors.candleDojiBorder
             const klineData = data as KLineData[]
             if (!klineData.length) return
 
@@ -124,13 +127,13 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
                 const finalH = rawH <= 0 ? minBarHPx : Math.max(rawH, minBarHPx)
                 const finalY = rawH <= 0 ? alignedBaseY - minBarHPx : alignedBaseY - finalH
 
-                const color = judgeColor(item, colors.VOLUME)
+                const color = judgeColor(item, upVolume, downVolume, neutralVolume)
 
                 let buf: Float32Array
                 let idx: number
-                if (color === colors.VOLUME.UP) {
+                if (color === upVolume) {
                     buf = upBuf; idx = upCount++
-                } else if (color === colors.VOLUME.DOWN) {
+                } else if (color === downVolume) {
                     buf = downBuf; idx = downCount++
                 } else {
                     buf = neutralBuf; idx = neutralCount++
@@ -142,9 +145,9 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
                 buf[off + 3] = finalH
             }
 
-            const usedWebGL = drawVolumeWithWebGL(context, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+            const usedWebGL = drawVolumeWithWebGL(context, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, upVolume, downVolume, neutralVolume)
             if (!usedWebGL) {
-                drawVolumeWithCanvas2D(ctx, context.scrollLeft, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+                drawVolumeWithCanvas2D(ctx, context.scrollLeft, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, upVolume, downVolume, neutralVolume)
             } else {
                 compositeVolumeWebGL(ctx, context)
             }
@@ -157,7 +160,7 @@ function drawVolumeWithWebGL(
     upBuf: Float32Array, upCount: number,
     downBuf: Float32Array, downCount: number,
     neutralBuf: Float32Array, neutralCount: number,
-    volumeColors: VolumeColors
+    upColor: string, downColor: string, neutralColor: string
 ): boolean {
     if (context.settings?.enableWebGLRendering === false) return false
     const surface = context.candleWebGLSurface
@@ -165,9 +168,9 @@ function drawVolumeWithWebGL(
 
     surface.clear()
 
-    const ok1 = upCount === 0 || surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, volumeColors.UP, context.scrollLeft)
-    const ok2 = downCount === 0 || surface.drawRectBuffer(downBuf.subarray(0, downCount * 4), downCount, volumeColors.DOWN, context.scrollLeft)
-    const ok3 = neutralCount === 0 || surface.drawRectBuffer(neutralBuf.subarray(0, neutralCount * 4), neutralCount, volumeColors.NEUTRAL, context.scrollLeft)
+    const ok1 = upCount === 0 || surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, upColor, context.scrollLeft)
+    const ok2 = downCount === 0 || surface.drawRectBuffer(downBuf.subarray(0, downCount * 4), downCount, downColor, context.scrollLeft)
+    const ok3 = neutralCount === 0 || surface.drawRectBuffer(neutralBuf.subarray(0, neutralCount * 4), neutralCount, neutralColor, context.scrollLeft)
 
     return ok1 && ok2 && ok3
 }
@@ -178,24 +181,24 @@ function drawVolumeWithCanvas2D(
     upBuf: Float32Array, upCount: number,
     downBuf: Float32Array, downCount: number,
     neutralBuf: Float32Array, neutralCount: number,
-    volumeColors: VolumeColors
+    upColor: string, downColor: string, neutralColor: string
 ): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
 
-    ctx.fillStyle = volumeColors.UP
+    ctx.fillStyle = upColor
     for (let i = 0; i < upCount; i++) {
         const off = i * 4
         ctx.fillRect(upBuf[off], upBuf[off + 1], upBuf[off + 2], upBuf[off + 3])
     }
 
-    ctx.fillStyle = volumeColors.DOWN
+    ctx.fillStyle = downColor
     for (let i = 0; i < downCount; i++) {
         const off = i * 4
         ctx.fillRect(downBuf[off], downBuf[off + 1], downBuf[off + 2], downBuf[off + 3])
     }
 
-    ctx.fillStyle = volumeColors.NEUTRAL
+    ctx.fillStyle = neutralColor
     for (let i = 0; i < neutralCount; i++) {
         const off = i * 4
         ctx.fillRect(neutralBuf[off], neutralBuf[off + 1], neutralBuf[off + 2], neutralBuf[off + 3])
@@ -212,15 +215,15 @@ function compositeVolumeWebGL(ctx: CanvasRenderingContext2D, context: RenderCont
 }
 
 /**
- * 判断成交量柱子颜色（使用 MACD 配色风格）
+ * 判断成交量柱子颜色
  */
-function judgeColor(dayData: KLineData, volumeColors: VolumeColors): string {
+function judgeColor(dayData: KLineData, upColor: string, downColor: string, neutralColor: string): string {
     if (dayData.close > dayData.open) {
-        return volumeColors.UP
+        return upColor
     } else if (dayData.close < dayData.open) {
-        return volumeColors.DOWN
+        return downColor
     } else {
-        return volumeColors.NEUTRAL
+        return neutralColor
     }
 }
 

package/src/engine/renderers/timeAxis.ts

@@ -1,4 +1,4 @@
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
@@ -26,7 +26,7 @@ export function createTimeAxisRendererPlugin(options: {
 
     draw(context: RenderContext) {
       const { ctx, data, range, scrollLeft, kWidth, kGap, dpr, paneWidth } = context
-      const colors = getColors(context.theme)
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const klineData = data as KLineData[]
 
       // 时间轴绘制到传入的 ctx
@@ -52,11 +52,11 @@ export function createTimeAxisRendererPlugin(options: {
         startIndex: range.start,
         endIndex: range.end,
         dpr,
-        textColor: colors.TEXT.SECONDARY,
-        lineColor: colors.BORDER.DARK,
+        textColor: colors.text.secondary,
+        lineColor: colors.border.dark,
         drawTopBorder: false,
         drawBottomBorder: false,
-      })
+      }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
       // 绘制来自 xAxisRanges 的时间范围带（先于标签绘制）
       if (context.xAxisRanges) {
@@ -87,9 +87,9 @@ export function createTimeAxisRendererPlugin(options: {
             timestamp: k.timestamp,
             dpr,
             fontSize: 12,
-            bgColor: colors.CROSSHAIR.LABEL_BG,
-            textColor: colors.CROSSHAIR.LABEL_TEXT,
-          })
+            bgColor: colors.crosshairLabelBg,
+            textColor: colors.crosshairLabelText,
+          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         }
       }
 
@@ -112,7 +112,7 @@ export function createTimeAxisRendererPlugin(options: {
               fontSize: 12,
               bgColor: label.style?.bgColor,
               textColor: label.style?.textColor,
-            })
+            }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
           }
         }
       }

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

@@ -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
@@ -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,9 +395,28 @@ export class LineWebGLSurface {
             const colorValue = parseColor(line.color)
             if (!colorValue) return false
 
+            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 })
+            drawCmds.push({
+                colorValue,
+                mode: gl.TRIANGLES,
+                firstVertex: totalFloats / 2,
+                pointCount: geometry.vertexCount,
+                vertices: geometry.vertices,
+            })
             totalFloats += geometry.vertices.length
         }
 
@@ -400,10 +424,19 @@ export class LineWebGLSurface {
             this.lineScratch = new Float32Array(nextBufferFloatCapacity(totalFloats))
         }
         let floatOffset = 0
-        for (const line of lines) {
-            const 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 msaaRender = this.beginMsaaRender(gl, region)
@@ -423,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])
@@ -793,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 {
@@ -823,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/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 = {