@363045841yyt/klinechart-core 0.7.3

package/src/semantic/controller.ts

@@ -0,0 +1,251 @@
+import { EventBus } from '../plugin/EventBus'
+import type { CustomMarkerEntity } from '../engine/marker/registry'
+import { SemanticConfigValidator } from './validator'
+import type {
+  SemanticChartConfig,
+  ApplyResult,
+  MainIndicatorConfig,
+  SubIndicatorConfig,
+  CustomMarker,
+  DataConfig,
+} from './types'
+import type { SubIndicatorType as CoreSubIndicatorType } from '../engine/renderers/Indicator'
+import type { KLineData } from '../controllers/types'
+
+export type SemanticEventType = 'config:loading' | 'config:ready' | 'config:error'
+
+export type DataFetcher = (
+  source: string,
+  config: {
+    symbol: string
+    startDate: string
+    endDate: string
+    period: string
+    adjust: string
+  },
+) => Promise<ReadonlyArray<KLineData>>
+
+let _dataFetcher: DataFetcher | null = null
+
+export function __setDataFetcher(fetcher: DataFetcher | null): void {
+  _dataFetcher = fetcher
+}
+
+async function getDataFetcher(): Promise<DataFetcher> {
+  if (_dataFetcher === null) {
+    throw new Error(
+      '[SemanticChartController] No data fetcher registered. ' +
+        'Call __setDataFetcher(...) before applying a config that requires data fetching.',
+    )
+  }
+  return _dataFetcher
+}
+
+interface SemanticChartAdapter {
+  updateData(data: ReadonlyArray<KLineData>): void
+  updateRendererConfig(name: string, config: Record<string, unknown>): void
+  clearSubPanes(): void
+  createSubPane(paneId: string, indicatorId: CoreSubIndicatorType, params?: Record<string, unknown>): boolean
+  clearCustomMarkers(): void
+  updateCustomMarkers(markers: ReadonlyArray<CustomMarkerEntity>): void
+}
+
+export class SemanticChartController {
+  private chart: SemanticChartAdapter
+  private validator: SemanticConfigValidator
+  private events: EventBus
+
+  constructor(chart: SemanticChartAdapter) {
+    this.chart = chart
+    this.validator = new SemanticConfigValidator()
+    this.events = new EventBus()
+  }
+
+  async applyConfig(config: SemanticChartConfig): Promise<ApplyResult> {
+    const validation = await this.validator.validate(config)
+    if (!validation.valid) {
+      return { success: false, errors: validation.errors }
+    }
+
+    const security = this.validator.securityCheck(config)
+    if (!security.passed) {
+      return { success: false, errors: security.violations }
+    }
+
+    this.events.emit('config:loading', undefined)
+    try {
+      await this.doApplyConfig(config)
+      this.events.emit('config:ready', undefined)
+      return { success: true }
+    } catch (error) {
+      this.events.emit('config:error', error)
+      return {
+        success: false,
+        errors: [error instanceof Error ? error.message : String(error)],
+      }
+    }
+  }
+
+  on(event: SemanticEventType, handler: (data?: unknown) => void): void {
+    this.events.on(event, handler)
+  }
+
+  off(event: SemanticEventType, handler: (data?: unknown) => void): void {
+    this.events.off(event, handler)
+  }
+
+  private async doApplyConfig(config: SemanticChartConfig): Promise<void> {
+    const fetcher = await getDataFetcher()
+    const data = await fetcher(config.data.source, {
+      symbol: config.data.symbol,
+      startDate: config.data.startDate,
+      endDate: config.data.endDate,
+      period: config.data.period,
+      adjust: config.data.adjust,
+    })
+    this.chart.updateData(data)
+
+    if (config.indicators) {
+      this.applyIndicators(config.indicators.main, config.indicators.sub)
+    }
+
+    if (config.markers) {
+      this.applyMarkers(config.markers.customMarkers, config.data.period)
+    }
+
+    if (config.chart) {
+      this.applyChartOptions(config.chart)
+    }
+  }
+
+  private applyIndicators(main?: MainIndicatorConfig[], sub?: SubIndicatorConfig[]): void {
+    if (main) {
+      for (const indicator of main) {
+        if (!indicator.enabled) continue
+        switch (indicator.type) {
+          case 'MA':
+            this.applyMAIndicator(indicator)
+            break
+          case 'BOLL':
+            this.applyBOLLIndicator(indicator)
+            break
+          case 'EXPMA':
+            this.applyEXPMAIndicator(indicator)
+            break
+          case 'ENE':
+            this.applyENEIndicator(indicator)
+            break
+        }
+      }
+    }
+
+    this.chart.clearSubPanes()
+
+    if (sub) {
+      for (const indicator of sub) {
+        this.applySubIndicator(indicator)
+      }
+    }
+  }
+
+  private applyMAIndicator(indicator: { type: 'MA'; enabled: boolean; params?: { periods: number[] } }): void {
+    const periods = indicator.params?.periods || [5, 10, 20, 30, 60]
+    const maFlags: { ma5?: boolean; ma10?: boolean; ma20?: boolean; ma30?: boolean; ma60?: boolean } = {}
+    for (const p of periods) {
+      if (p === 5) maFlags.ma5 = true
+      else if (p === 10) maFlags.ma10 = true
+      else if (p === 20) maFlags.ma20 = true
+      else if (p === 30) maFlags.ma30 = true
+      else if (p === 60) maFlags.ma60 = true
+    }
+    this.chart.updateRendererConfig('ma', maFlags)
+  }
+
+  private applyBOLLIndicator(indicator: {
+    type: 'BOLL'
+    enabled: boolean
+    params?: { period?: number; multiplier?: number }
+  }): void {
+    this.chart.updateRendererConfig('boll', {
+      period: indicator.params?.period || 20,
+      multiplier: indicator.params?.multiplier || 2,
+    })
+  }
+
+  private applyEXPMAIndicator(indicator: {
+    type: 'EXPMA'
+    enabled: boolean
+    params?: { fastPeriod?: number; slowPeriod?: number }
+  }): void {
+    this.chart.updateRendererConfig('expma', {
+      fastPeriod: indicator.params?.fastPeriod || 12,
+      slowPeriod: indicator.params?.slowPeriod || 50,
+    })
+  }
+
+  private applyENEIndicator(indicator: {
+    type: 'ENE'
+    enabled: boolean
+    params?: { period?: number; deviation?: number }
+  }): void {
+    this.chart.updateRendererConfig('ene', {
+      period: indicator.params?.period || 10,
+      deviation: indicator.params?.deviation || 11,
+    })
+  }
+
+  private applySubIndicator(indicator: SubIndicatorConfig): void {
+    if (!indicator.enabled) return
+    const { type, params } = indicator
+    const paneId = `${type}_0`
+    const success = this.chart.createSubPane(paneId, type as CoreSubIndicatorType, params)
+    if (!success) {
+      console.warn(`[Semantic] Failed to create sub pane for ${type}`)
+    }
+  }
+
+  private applyMarkers(markers?: CustomMarker[], period?: DataConfig['period']): void {
+    if (!markers || markers.length === 0) {
+      this.chart.clearCustomMarkers()
+      return
+    }
+    const entities: CustomMarkerEntity[] = markers.map((marker) => ({
+      id: marker.id,
+      date: marker.date,
+      timestamp: parseDateToTimestamp(marker.date, period || 'daily'),
+      shape: marker.shape,
+      groupKey: marker.groupKey,
+      offset: marker.offset,
+      style: marker.style,
+      label: marker.label,
+      metadata: marker.metadata,
+    }))
+    this.chart.updateCustomMarkers(entities)
+  }
+
+  private applyChartOptions(options: { kWidth?: number; kGap?: number; autoScrollToRight?: boolean }): void {
+    if (options.autoScrollToRight !== undefined) {
+    }
+  }
+}
+
+function parseDateToTimestamp(dateStr: string, _period: DataConfig['period']): number {
+  const hasTime = dateStr.includes(' ')
+  if (hasTime) {
+    const [datePart, timePart] = dateStr.split(' ')
+    const parts = datePart!.split('-').map(Number)
+    const year = parts[0]!
+    const month = parts[1]!
+    const day = parts[2]!
+    const timeParts = timePart!.split(':').map(Number)
+    const hour = timeParts[0]!
+    const minute = timeParts[1]!
+    return Date.UTC(year, month - 1, day, hour - 8, minute, 0, 0)
+  } else {
+    const parts = dateStr.split('-').map(Number)
+    const year = parts[0]!
+    const month = parts[1]!
+    const day = parts[2]!
+    return Date.UTC(year, month - 1, day, 0 - 8, 0, 0, 0)
+  }
+}

package/src/semantic/drawShape.ts

@@ -0,0 +1,260 @@
+/**
+ * 标记形状绘制函数
+ * 支持 6 种预设形状：arrow_up, arrow_down, flag, circle, rectangle, diamond
+ */
+
+import type { MarkerShapeType, MarkerStyle, MarkerLabel } from './types'
+
+/** 默认尺寸映射 */
+const DEFAULT_SIZES: Record<MarkerShapeType, number> = {
+  arrow_up: 16,
+  arrow_down: 16,
+  flag: 14,
+  circle: 12,
+  rectangle: 14,
+  diamond: 12,
+}
+
+/**
+ * 绘制标记形状
+ */
+export function drawShape(
+  ctx: CanvasRenderingContext2D,
+  shape: MarkerShapeType,
+  x: number,
+  y: number,
+  size: number,
+  style: MarkerStyle
+): void {
+  const fillColor = style.fillColor || '#000000'
+  const strokeColor = style.strokeColor || fillColor
+  const actualSize = size || DEFAULT_SIZES[shape]
+
+  ctx.fillStyle = fillColor
+  ctx.strokeStyle = strokeColor
+  ctx.lineWidth = style.lineWidth || 1
+
+  if (style.opacity !== undefined) {
+    ctx.globalAlpha = style.opacity
+  }
+
+  switch (shape) {
+    case 'arrow_up':
+      drawArrowUp(ctx, x, y, actualSize)
+      break
+    case 'arrow_down':
+      drawArrowDown(ctx, x, y, actualSize)
+      break
+    case 'circle':
+      drawCircle(ctx, x, y, actualSize)
+      break
+    case 'rectangle':
+      drawRectangle(ctx, x, y, actualSize)
+      break
+    case 'diamond':
+      drawDiamond(ctx, x, y, actualSize)
+      break
+    case 'flag':
+      drawFlag(ctx, x, y, actualSize)
+      break
+  }
+
+  ctx.globalAlpha = 1
+}
+
+/** 标签最大宽度倍数（相对于 marker size） */
+const LABEL_MAX_WIDTH_SCALE = 2.5
+/** 标签与 marker 的间距 */
+const LABEL_GAP = 4
+
+/**
+ * 绘制文本标注
+ * @param isAboveMarker 标记是否在K线上方（true → 文字在标记上方，false → 文字在标记下方）
+ */
+export function drawLabel(
+  ctx: CanvasRenderingContext2D,
+  label: MarkerLabel,
+  x: number,
+  y: number,
+  markerSize: number,
+  style: MarkerStyle,
+  isAboveMarker: boolean = false
+): void {
+  const fontSize = label.fontSize || 12
+  const textColor = style.textColor || '#333333'
+  const markerRadius = markerSize / 2
+
+  ctx.font = `${fontSize}px sans-serif`
+  ctx.fillStyle = textColor
+  ctx.textBaseline = 'middle'
+
+  // 计算最大文本宽度（基于 marker size）
+  const maxWidth = markerSize * LABEL_MAX_WIDTH_SCALE
+
+  // 截断文本
+  const displayText = truncateText(ctx, label.text, maxWidth)
+
+  // 计算文本位置
+  const textWidth = ctx.measureText(displayText).width
+  let textX = x
+  let textY = y
+
+  switch (label.position) {
+    case 'left':
+      // 在 marker 左侧
+      textX = x - markerRadius - textWidth / 2 - LABEL_GAP
+      break
+    case 'right':
+      // 在 marker 右侧
+      textX = x + markerRadius + textWidth / 2 + LABEL_GAP
+      break
+    case 'top':
+      // 强制在 marker 上方
+      textY = y - markerRadius - fontSize / 2 - LABEL_GAP
+      break
+    case 'bottom':
+      // 强制在 marker 下方
+      textY = y + markerRadius + fontSize / 2 + LABEL_GAP
+      break
+    case 'inside':
+    default:
+      // 默认：根据标记位置自动决定
+      if (isAboveMarker) {
+        // 标记在K线上方 → 文字在标记上方
+        textY = y - markerRadius - fontSize / 2 - LABEL_GAP
+      } else {
+        // 标记在K线下方 → 文字在标记下方
+        textY = y + markerRadius + fontSize / 2 + LABEL_GAP
+      }
+      break
+  }
+
+  // 应用偏移
+  if (label.offset) {
+    textX += label.offset.x || 0
+    textY += label.offset.y || 0
+  }
+
+  // 对齐方式
+  ctx.textAlign = label.align || 'center'
+
+  ctx.fillText(displayText, textX, textY)
+}
+
+/**
+ * 截断文本
+ * @param ctx Canvas 上下文
+ * @param text 原始文本
+ * @param maxWidth 最大宽度
+ * @returns 截断后的文本（带省略号）
+ */
+function truncateText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string {
+  const fullWidth = ctx.measureText(text).width
+  if (fullWidth <= maxWidth) return text
+
+  // 添加省略号后测量
+  const ellipsis = '…'
+  const ellipsisWidth = ctx.measureText(ellipsis).width
+
+  // 二分查找最大可显示字符数
+  let left = 0
+  let right = text.length
+  while (left < right) {
+    const mid = Math.ceil((left + right) / 2)
+    const truncated = text.slice(0, mid)
+    const width = ctx.measureText(truncated).width + ellipsisWidth
+    if (width <= maxWidth) {
+      left = mid
+    } else {
+      right = mid - 1
+    }
+  }
+
+  return text.slice(0, left) + ellipsis
+}
+
+// ============ 形状绘制函数 ============
+
+function drawArrowUp(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  ctx.beginPath()
+  ctx.moveTo(x, y - size / 2)
+  ctx.lineTo(x - size / 2, y + size / 2)
+  ctx.lineTo(x + size / 2, y + size / 2)
+  ctx.closePath()
+  ctx.fill()
+}
+
+function drawArrowDown(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  ctx.beginPath()
+  ctx.moveTo(x, y + size / 2)
+  ctx.lineTo(x - size / 2, y - size / 2)
+  ctx.lineTo(x + size / 2, y - size / 2)
+  ctx.closePath()
+  ctx.fill()
+}
+
+function drawCircle(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  ctx.beginPath()
+  ctx.arc(x, y, size / 2, 0, Math.PI * 2)
+  ctx.fill()
+}
+
+function drawRectangle(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  ctx.fillRect(x - size / 2, y - size / 2, size, size)
+}
+
+function drawDiamond(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  ctx.beginPath()
+  ctx.moveTo(x, y - size / 2)
+  ctx.lineTo(x + size / 2, y)
+  ctx.lineTo(x, y + size / 2)
+  ctx.lineTo(x - size / 2, y)
+  ctx.closePath()
+  ctx.fill()
+}
+
+function drawFlag(ctx: CanvasRenderingContext2D, x: number, y: number, size: number): void {
+  // 旗杆
+  ctx.beginPath()
+  ctx.moveTo(x - size / 4, y + size / 2)
+  ctx.lineTo(x - size / 4, y - size / 2)
+  ctx.stroke()
+
+  // 旗帜
+  ctx.beginPath()
+  ctx.moveTo(x - size / 4, y - size / 2)
+  ctx.lineTo(x + size / 2, y - size / 4)
+  ctx.lineTo(x - size / 4, y)
+  ctx.closePath()
+  ctx.fill()
+}
+
+/**
+ * 点击测试（判断点是否在形状内）
+ */
+export function hitTestShape(
+  mx: number,
+  my: number,
+  shape: MarkerShapeType,
+  x: number,
+  y: number,
+  size: number
+): boolean {
+  const half = size / 2
+
+  switch (shape) {
+    case 'circle':
+      const dx = mx - x
+      const dy = my - y
+      return dx * dx + dy * dy <= half * half
+
+    case 'rectangle':
+    case 'diamond':
+    case 'arrow_up':
+    case 'arrow_down':
+    case 'flag':
+    default:
+      // 使用包围盒测试
+      return mx >= x - half && mx <= x + half && my >= y - half && my <= y + half
+  }
+}

package/src/semantic/index.ts

@@ -0,0 +1,28 @@
+export type {
+  SemanticChartConfig,
+  DataConfig,
+  IndicatorsConfig,
+  MainIndicatorConfig,
+  SubIndicatorConfig,
+  SubIndicatorType,
+  MAParams,
+  BOLLParams,
+  MarkersConfig,
+  CustomMarker,
+  MarkerShapeType,
+  MarkerStyle,
+  MarkerLabel,
+  LegendConfig,
+  ChartOptions,
+  ThemeConfig,
+  ApplyResult,
+  ValidationResult,
+  SecurityResult,
+} from './types'
+
+export { SemanticChartController, type SemanticEventType, __setDataFetcher } from './controller'
+export type { DataFetcher } from './controller'
+
+export { SemanticConfigValidator, sanitizeParams, sanitizeColor, validateColor, validateSymbol } from './validator'
+
+export { drawShape, drawLabel, hitTestShape } from './drawShape'