@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/engine/data/comparisonManager.ts

@@ -1,211 +1,129 @@
-import type { KLineData, SymbolSpec, DataFetcher } from '../../controllers/types'
-import { createSignal, type Signal } from '../../reactivity/signal'
-
-const COMPARISON_PALETTE = [
-  '#f59e0b',
-  '#8b5cf6',
-  '#06b6d4',
-  '#ec4899',
-  '#84cc16',
-  '#f97316',
-]
-const DEFAULT_COMPARISON_COLOR = '#f59e0b'
-const BUF_COMPARISON = 'cmp'
+import type { KLineData, SymbolSpec } from '../../controllers/types'
+import type { KLineBuffer } from '../../data/dataBufferTypes'
+
+const BUF_COMPARISON = 'cmp:'
+
+function comparisonKey(spec: SymbolSpec): string {
+  return `cmp:${spec.symbol}:${spec.period ?? 'daily'}`
+}
+
+function specsEqual(left: SymbolSpec | undefined, right: SymbolSpec): boolean {
+  if (!left) return false
+  const leftKeys = Object.keys(left) as Array<keyof SymbolSpec>
+  const rightKeys = Object.keys(right) as Array<keyof SymbolSpec>
+  return (
+    leftKeys.length === rightKeys.length &&
+    leftKeys.every((key) => Object.is(left[key], right[key]))
+  )
+}
 
 export interface ComparisonHooks {
-  createComparisonBuffer(
-    spec: SymbolSpec,
-  ): { key: string; buffer: import('../../data-fetchers/dataBufferTypes').KLineBuffer }
+  createComparisonBuffer(spec: SymbolSpec): { key: string; buffer: KLineBuffer }
   disposeBuffer(key: string): void
-  getKLineBuffer(key: string): import('../../data-fetchers/dataBufferTypes').KLineBuffer | undefined
-  hasKLineBuffer(key: string): boolean
+  getKLineBuffer(key: string): KLineBuffer | undefined
   getKLineBufferKeys(): string[]
   scheduleDraw(): void
+  getSpecs(): ReadonlyArray<SymbolSpec>
+  setLoading(loading: boolean): void
 }
 
+type BufferSubscriptions = {
+  data: () => void
+  loading: () => void
+}
+
+/** Comparison buffer 的 runtime projection，不持有业务状态。 */
 export class ComparisonManager {
-  private _specs: SymbolSpec[] = []
-  private _data = new Map<string, KLineData[]>()
-  private _colors: Map<string, string> = new Map()
-  private _colorsSignal = createSignal<ReadonlyMap<string, string>>(new Map())
-  private _loadingSignal = createSignal<boolean>(false)
-  private _cmpLoadingUnsubs = new Map<string, () => void>()
-  private _hooks: ComparisonHooks
-
-  constructor(hooks: ComparisonHooks) {
-    this._hooks = hooks
-  }
+  private readonly subscriptions = new Map<string, BufferSubscriptions>()
+
+  constructor(private readonly hooks: ComparisonHooks) {}
 
   get specs(): SymbolSpec[] {
-    return this._specs
+    return this.hooks.getSpecs().map((spec) => ({ ...spec }))
   }
 
   get data(): Map<string, KLineData[]> {
-    return this._data
-  }
-
-  get colorsSignal(): Signal<ReadonlyMap<string, string>> {
-    return this._colorsSignal
-  }
-
-  get loadingSignal(): Signal<boolean> {
-    return this._loadingSignal
-  }
-
-  getColors(): Map<string, string> {
-    return this._colors
+    const result = new Map<string, KLineData[]>()
+    for (const spec of this.hooks.getSpecs()) {
+      const buffer = this.hooks.getKLineBuffer(comparisonKey(spec))
+      if (buffer) result.set(spec.symbol, [...buffer.getRawData()])
+    }
+    return result
   }
 
-  syncBuffers(specs: ReadonlyArray<SymbolSpec>, mainEarliest?: number): void {
-    this._specs = [...specs]
-    const nextKeys = new Set(specs.map((s) => s.symbol))
+  reconcile(mainEarliest?: number): void {
+    const specs = this.hooks.getSpecs()
+    const desired = new Map(specs.map((spec) => [comparisonKey(spec), spec]))
 
-    for (const key of this._hooks.getKLineBufferKeys()) {
-      if (!key.startsWith(BUF_COMPARISON)) continue
-      const symbol = key.split(':')[1]!
-      if (nextKeys.has(symbol)) continue
-      this._hooks.disposeBuffer(key)
-      this._data.delete(symbol)
+    for (const key of this.hooks.getKLineBufferKeys()) {
+      if (key.startsWith(BUF_COMPARISON) && !desired.has(key)) this.removeRuntime(key)
     }
 
-    for (const spec of specs) {
-      const key = `cmp:${spec.symbol}:${spec.period ?? 'daily'}`
-      const symbol = spec.symbol
-      let buf = this._hooks.getKLineBuffer(key)
-      if (!buf) {
-        const created = this._hooks.createComparisonBuffer(spec)
-        buf = created.buffer
-
-        const b = buf
-        const unsub = b.data.subscribe(() => {
-          this._data.set(symbol, [...b.getRawData()])
-          this._hooks.scheduleDraw()
-        })
-        this._cmpLoadingUnsubs.set(key, unsub)
-
-        const unsubLoading = buf.loading.subscribe(() => this._recomputeLoading())
-        this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading)
+    for (const [key, spec] of desired) {
+      let buffer = this.hooks.getKLineBuffer(key)
+      if (!buffer) {
+        buffer = this.hooks.createComparisonBuffer(spec).buffer
+        this.mountSubscriptions(key, buffer)
+      } else if (!this.subscriptions.has(key)) {
+        this.mountSubscriptions(key, buffer)
       }
-      buf.setSymbol(spec, mainEarliest)
-    }
-  }
-
-  clearAll(): void {
-    for (const key of this._hooks.getKLineBufferKeys()) {
-      if (key.startsWith(BUF_COMPARISON)) {
-        this._hooks.disposeBuffer(key)
+      if (!specsEqual(buffer.currentSpec ?? undefined, spec)) {
+        buffer.setSymbol(spec, mainEarliest)
       }
     }
-    this._data.clear()
-    this._colors.clear()
-    this._colorsSignal.set(new Map())
-    this._loadingSignal.set(false)
-    this._specs = []
-  }
 
-  addSymbol(spec: SymbolSpec, onComplete: () => void): void {
-    const symbol = spec.symbol
+    this.recomputeLoading()
+  }
 
-    for (const k of this._hooks.getKLineBufferKeys()) {
-      if (k.startsWith(BUF_COMPARISON) && k.split(':')[1] === symbol) return
+  clearAll(): void {
+    for (const key of this.hooks.getKLineBufferKeys()) {
+      if (key.startsWith(BUF_COMPARISON)) this.removeRuntime(key)
     }
-
-    this._specs.push(spec)
-
-    const color =
-      COMPARISON_PALETTE[this._colors.size % COMPARISON_PALETTE.length] ??
-      DEFAULT_COMPARISON_COLOR
-    this._colors.set(symbol, color)
-    this._colorsSignal.set(new Map(this._colors))
-
-    const key = `cmp:${symbol}:${spec.period ?? 'daily'}`
-
-    if (!this._hooks.hasKLineBuffer(key)) {
-      const created = this._hooks.createComparisonBuffer(spec)
-      const buf = created.buffer
-
-      const unsub = buf.data.subscribe(() => {
-        this._data.set(symbol, [...buf.getRawData()])
-        this._hooks.scheduleDraw()
-      })
-      this._cmpLoadingUnsubs.set(key, unsub)
-
-      const unsubLoading = buf.loading.subscribe(() => this._recomputeLoading())
-      this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading)
-
-      buf.setSymbol(spec)
+    for (const subscriptions of this.subscriptions.values()) {
+      subscriptions.data()
+      subscriptions.loading()
     }
-
-    onComplete()
+    this.subscriptions.clear()
+    this.hooks.setLoading(false)
   }
 
-  setData(symbol: string, data: KLineData[], onNewBuffer: (key: string) => void): void {
-    const period = 'daily'
-    const key = `cmp:${symbol}:${period}`
-
-    const existing = this._hooks.getKLineBuffer(key)
-    if (!existing) {
-      const buffer = this._hooks.createComparisonBuffer({
-        symbol,
-        period,
-      }).buffer
-
-      const unsub = buffer.data.subscribe(() => {
-        this._data.set(symbol, [...buffer.getRawData()])
-        this._hooks.scheduleDraw()
-      })
-      this._cmpLoadingUnsubs.set(key, unsub)
-
-      const unsubLoading = buffer.loading.subscribe(() => this._recomputeLoading())
-      this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading)
-
-      const color =
-        COMPARISON_PALETTE[this._colors.size % COMPARISON_PALETTE.length] ??
-        DEFAULT_COMPARISON_COLOR
-      this._colors.set(symbol, color)
-      this._colorsSignal.set(new Map(this._colors))
-
-      const spec: SymbolSpec = { symbol, period }
-      this._specs.push(spec)
-
-      buffer.setInlineData(data)
-      onNewBuffer(key)
-      return
+  setData(symbol: string, data: KLineData[]): boolean {
+    const spec = this.hooks.getSpecs().find((candidate) => candidate.symbol === symbol)
+    if (!spec) return false
+    let buffer = this.hooks.getKLineBuffer(comparisonKey(spec))
+    if (!buffer) {
+      this.reconcile()
+      buffer = this.hooks.getKLineBuffer(comparisonKey(spec))
     }
-    existing.setInlineData(data)
+    if (!buffer) return false
+    buffer.setInlineData(data)
+    return true
   }
 
-  removeSymbol(symbol: string): boolean {
-    let found = false
-    for (const key of this._hooks.getKLineBufferKeys()) {
-      if (key.startsWith(BUF_COMPARISON) && key.split(':')[1] === symbol) {
-        this._hooks.disposeBuffer(key)
-        found = true
-        break
-      }
+  ensureRange(firstVisibleTs: number, windowEarliestTs: number): void {
+    for (const spec of this.hooks.getSpecs()) {
+      this.hooks.getKLineBuffer(comparisonKey(spec))?.ensureRange(firstVisibleTs, windowEarliestTs)
     }
-    if (!found) return false
+  }
 
-    this._data.delete(symbol)
-    this._colors.delete(symbol)
-    this._colorsSignal.set(new Map(this._colors))
-    this._specs = this._specs.filter((s) => s.symbol !== symbol)
-    this._recomputeLoading()
-    return true
+  private mountSubscriptions(key: string, buffer: KLineBuffer): void {
+    const data = buffer.data.subscribe(() => this.hooks.scheduleDraw())
+    const loading = buffer.loading.subscribe(() => this.recomputeLoading())
+    this.subscriptions.set(key, { data, loading })
   }
 
-  ensureRange(firstVisibleTs: number, windowEarliestTs: number): void {
-    for (const key of this._hooks.getKLineBufferKeys()) {
-      if (key.startsWith(BUF_COMPARISON)) {
-        this._hooks.getKLineBuffer(key)?.ensureRange(firstVisibleTs, windowEarliestTs)
-      }
-    }
+  private removeRuntime(key: string): void {
+    const subscriptions = this.subscriptions.get(key)
+    subscriptions?.data()
+    subscriptions?.loading()
+    this.subscriptions.delete(key)
+    this.hooks.disposeBuffer(key)
   }
 
-  private _recomputeLoading(): void {
-    const anyLoading = [...this._hooks.getKLineBufferKeys()].some(
-      (k) => k.startsWith(BUF_COMPARISON) && this._hooks.getKLineBuffer(k)?.loading.peek(),
-    )
-    this._loadingSignal.set(anyLoading)
+  private recomputeLoading(): void {
+    const anyLoading = this.hooks
+      .getSpecs()
+      .some((spec) => this.hooks.getKLineBuffer(comparisonKey(spec))?.loading.peek() === true)
+    this.hooks.setLoading(anyLoading)
   }
-}
+}

package/src/engine/data/fetchBatchScheduler.ts

@@ -79,4 +79,4 @@ export class FetchBatchScheduler {
       )
     }
   }
-}
+}

package/src/engine/data/incrementalLoadHint.ts

@@ -8,89 +8,68 @@ export interface HintDeps {
   getViewport: () => { viewHeight: number } | null
 }
 
+interface ActiveHint {
+  el: HTMLDivElement
+  timer: number
+  removeTimer: number
+  onTransitionEnd: (() => void) | null
+}
+
 export class IncrementalLoadHint {
-  private _el: HTMLDivElement | null = null
-  private _timer: number | null = null
+  private _activeHint: ActiveHint | null = null
 
   constructor(private deps: HintDeps) {}
 
   show(count: number, leftBufferWidth: number): void {
     if (count <= 0) return
-    const hint = this._ensure()
-    if (!hint) return
-    this._clearTimer()
 
-    const dpr = this.deps.getEffectiveDpr()
-    const opt = this.deps.getOption()
-    const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
+    const host = this.deps.getDom().scrollContent ?? this.deps.getDom().container ?? null
+    if (!host) return
+    const ownerDoc = host.ownerDocument
+    if (!ownerDoc) return
+
+    const entry = this._activeHint ?? this._createHint(ownerDoc)
+    const hint = entry.el
+
+    this._cancelFadeOut(entry)
+    this._updateGeometry(hint, count, leftBufferWidth)
+
+    if (!hint.isConnected) {
+      host.appendChild(hint)
+      hint.getBoundingClientRect()
+    }
 
-    hint.style.left = `${leftBufferWidth}px`
-    const width = (startXPx + count * unitPx) / dpr
-    hint.style.width = `${Math.max(0, width)}px`
-    hint.style.height = `${Math.max(
-      0,
-      this.deps.getViewport()?.viewHeight ??
-        this.deps.getDom().container?.clientHeight ??
-        0,
-    )}px`
-    hint.getBoundingClientRect()
-
-    console.group('[LoadHint] show')
-    console.log('count:', count, 'leftBufferWidth:', leftBufferWidth)
-    console.log('dpr:', dpr, 'kWidth:', opt.kWidth, 'kGap:', opt.kGap)
-    console.log('unitPx:', unitPx, 'startXPx:', startXPx)
-    console.log('target left:', hint.style.left, 'target width:', hint.style.width)
-    const rect = hint.getBoundingClientRect()
-    console.log('hint rect:', rect)
-    const host = this.deps.getDom().scrollContent
-    if (host) console.log('host scrollLeft:', host.scrollLeft, 'scrollWidth:', host.scrollWidth)
-    console.groupEnd()
     hint.style.opacity = '1'
     hint.style.filter = 'blur(0px)'
 
-    this._timer = window.setTimeout(() => {
-      this._hide()
-      this._timer = null
+    this._activeHint = entry
+
+    entry.timer = window.setTimeout(() => {
+      this._fadeOutAndRemove(entry)
     }, 900)
   }
 
   hide(): void {
-    this._hide()
+    const entry = this._activeHint
+    if (!entry) return
+    this._cancelFadeOut(entry)
+    this._removeElement(entry)
+    this._activeHint = null
   }
 
   destroy(): void {
-    this._clearTimer()
-    this._el?.remove()
-    this._el = null
+    const entry = this._activeHint
+    if (!entry) return
+    this._cancelFadeOut(entry)
+    entry.el.remove()
+    this._activeHint = null
   }
 
-  private _clearTimer(): void {
-    if (this._timer !== null) {
-      window.clearTimeout(this._timer)
-      this._timer = null
-    }
-  }
-
-  private _hide(): void {
-    if (!this._el) return
-    this._el.style.opacity = '0'
-    this._el.style.filter = 'blur(10px)'
-  }
-
-  private _ensure(): HTMLDivElement | null {
-    const host = this.deps.getDom().scrollContent ?? this.deps.getDom().container ?? null
-    if (!host) return null
-    if (this._el && this._el.isConnected) return this._el
-
-    const ownerDoc = host.ownerDocument
-    if (!ownerDoc) return null
-
+  private _createHint(ownerDoc: Document): ActiveHint {
     const hint = ownerDoc.createElement('div')
     hint.className = 'klc-incremental-load-hint'
     hint.style.position = 'absolute'
     hint.style.top = '0'
-    hint.style.height = '0px'
-    hint.style.width = '0px'
     hint.style.pointerEvents = 'none'
     hint.style.opacity = '0'
     hint.style.filter = 'blur(10px)'
@@ -98,8 +77,62 @@ export class IncrementalLoadHint {
     hint.style.background = 'rgba(71, 91, 132, 0.5)'
     hint.style.zIndex = '3'
     hint.style.willChange = 'opacity, filter, width'
-    host.appendChild(hint)
-    this._el = hint
-    return hint
+    return { el: hint, timer: 0, removeTimer: 0, onTransitionEnd: null }
+  }
+
+  private _updateGeometry(hint: HTMLDivElement, count: number, leftBufferWidth: number): void {
+    const dpr = this.deps.getEffectiveDpr()
+    const opt = this.deps.getOption()
+    const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
+
+    hint.style.left = `${leftBufferWidth}px`
+    const width = (startXPx + count * unitPx) / dpr
+    hint.style.width = `${Math.max(0, width)}px`
+    hint.style.height = `${Math.max(
+      0,
+      this.deps.getViewport()?.viewHeight ?? this.deps.getDom().container?.clientHeight ?? 0,
+    )}px`
   }
-}
+
+  private _fadeOutAndRemove(entry: ActiveHint): void {
+    if (this._activeHint !== entry) return
+
+    const { el } = entry
+    el.style.opacity = '0'
+    el.style.filter = 'blur(10px)'
+
+    const onEnd = () => {
+      el.removeEventListener('transitionend', onEnd)
+      entry.onTransitionEnd = null
+      this._removeElement(entry)
+      if (this._activeHint === entry) {
+        this._activeHint = null
+      }
+    }
+    entry.onTransitionEnd = onEnd
+    el.addEventListener('transitionend', onEnd)
+
+    entry.removeTimer = window.setTimeout(() => {
+      this._removeElement(entry)
+      if (this._activeHint === entry) {
+        this._activeHint = null
+      }
+    }, 500)
+  }
+
+  private _cancelFadeOut(entry: ActiveHint): void {
+    clearTimeout(entry.timer)
+    clearTimeout(entry.removeTimer)
+    if (entry.onTransitionEnd) {
+      entry.el.removeEventListener('transitionend', entry.onTransitionEnd)
+      entry.onTransitionEnd = null
+    }
+  }
+
+  private _removeElement(entry: ActiveHint): void {
+    this._cancelFadeOut(entry)
+    if (entry.el.isConnected) {
+      entry.el.remove()
+    }
+  }
+}

package/src/engine/data/scrollCompensator.ts

@@ -9,8 +9,13 @@ export interface ScrollDeps {
   getDom: () => ChartDom
   getObservedSize: () => { width: number; height: number }
   getViewport: () => Viewport | null
+  /** 几何 SSOT：由 kernel viewport.readonly 注入 */
+  getLeftLoadBufferWidth: () => number
+  getContentWidth: () => number
 }
 
+export const SCROLL_TRAILING_SLOTS = 30
+
 export class ScrollCompensator {
   constructor(private deps: ScrollDeps) {}
 
@@ -28,7 +33,7 @@ export class ScrollCompensator {
     if (scrollLeft < 0) return
 
     if (scrollLeft <= 0) {
-      this.deps.setScrollLeft(this.getLeftLoadBufferWidth(dataLength))
+      this.deps.setScrollLeft(this.deps.getLeftLoadBufferWidth())
       return
     }
 
@@ -36,7 +41,7 @@ export class ScrollCompensator {
     const opt = this.deps.getOption()
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
     const totalDataWidth = (startXPx + dataLength * unitPx) / dpr
-    const leftBuffer = this.getLeftLoadBufferWidth(dataLength)
+    const leftBuffer = this.deps.getLeftLoadBufferWidth()
     if (scrollLeft >= leftBuffer + totalDataWidth) {
       this.deps.setScrollLeft(leftBuffer)
     }
@@ -49,45 +54,19 @@ export class ScrollCompensator {
     const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
     const lastKLineEndPx = (startXPx + dataLength * unitPx) / dpr
     const viewport = this.deps.getViewport()
-    const clientWidth =
-      viewport?.viewWidth ??
-      (this.deps.getObservedSize().width > 0
-        ? this.deps.getObservedSize().width
-        : undefined) ??
-      Math.round(this.deps.getDom().container?.clientWidth ?? 0)
+    const clientWidth = viewport?.viewWidth ?? 0
     if (clientWidth <= 0) return
 
-    const leftBuffer = this.getLeftLoadBufferWidth(dataLength)
+    const leftBuffer = this.deps.getLeftLoadBufferWidth()
     let target: number
     if (lastKLineEndPx <= clientWidth) {
       target = leftBuffer - (clientWidth - lastKLineEndPx)
     } else {
       target = leftBuffer + (lastKLineEndPx - clientWidth)
     }
-    const contentWidth = this.getContentWidth(dataLength)
+    const contentWidth = this.deps.getContentWidth()
     const maxScroll = Math.max(0, contentWidth - clientWidth)
     const scrollLeft = Math.round(Math.max(0, Math.min(target, maxScroll)) * dpr) / dpr
     this.deps.setScrollLeft(scrollLeft)
   }
-
-  getLeftLoadBufferWidth(dataLength: number): number {
-    if (dataLength === 0) return 0
-    const vp = this.deps.getViewport()
-    return (
-      vp?.plotWidth ??
-      (this.deps.getObservedSize().width > 0 ? this.deps.getObservedSize().width : undefined) ??
-      Math.round(this.deps.getDom().container?.clientWidth ?? 0)
-    )
-  }
-
-  getContentWidth(dataLength: number): number {
-    if (dataLength === 0) return 0
-    const opt = this.deps.getOption()
-    const viewWidth = this.deps.getViewport()?.plotWidth ?? 0
-    const dpr = this.deps.getEffectiveDpr()
-    const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
-    const TRAILING_SLOTS = 30
-    const dataPlotWidth = (startXPx + (dataLength + TRAILING_SLOTS) * unitPx) / dpr
-    return this.getLeftLoadBufferWidth(dataLength) + Math.max(dataPlotWidth, viewWidth)
-  }
-}
+}

package/src/engine/draw/__tests__/pixelAlign.spec.ts

@@ -6,7 +6,7 @@ import {
   alignRect,
   createVerticalLineRect,
   createHorizontalLineRect,
-} from '../pixelAlign'
+} from '../../../foundation/utils/pixelAlign'
 
 describe('roundToPhysicalPixel', () => {
   it('应该正确对齐到物理像素边界（dpr=1）', () => {

package/src/engine/drawing/DragHandler.ts

@@ -1,5 +1,5 @@
 import type { DrawingChartAdapter } from '../../controllers/types'
-import type { DrawingObject, DrawingAnchor } from '../../plugin'
+import type { DrawingObject, DrawingAnchor } from '../../foundation/plugin/index'
 
 import { resolveAnchorFromPointer, anchorToScreen, screenToAnchor } from './coordinateUtils'