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

package/src/engine/controller/interaction.ts

@@ -77,6 +77,18 @@ export class InteractionController {
   private touchStartY = 0
   private pinchTracker = new PinchTracker()
   private lastClientPos: { x: number; y: number } | null = null
+  /**
+   * 空闲 hover 是否有未推导的指针输入。
+   * pointermove 只置位；flushPendingHover 每帧最多推导一次并写 kernel。
+   */
+  private hoverFlushPending = false
+  /**
+   * 本帧封存的 K 线几何（非 kernel signal，避免每帧广播大数组）。
+   * 仅 InteractionController hover 读取；绘制走 ChartRenderer FrameContext。
+   */
+  private framePositions: number[] | null = null
+  private frameCenters: number[] | null = null
+  private frameKWidthPx: number | null = null
   private markerState = new MarkerInteractionState()
   private lastHoverRenderKey = ''
   private useTooltipAnchorPositioning = false
@@ -322,6 +334,9 @@ export class InteractionController {
     this.activePaneIdOnDrag = null
     this.clearSeparatorState()
     if (!this.isTouchSession) {
+      // 取消已排队 hover，避免后续帧用 lastClientPos 把十字线刷回来
+      this.hoverFlushPending = false
+      this.lastClientPos = null
       this.clearHover()
       this.chart.scheduleDraw()
     }
@@ -330,7 +345,10 @@ export class InteractionController {
 
   /** 处理滚动事件 */
   onScroll(options: { scheduleDraw?: boolean } = {}) {
-    this._state.actions.updateFramePositions(null, null, null)
+    this.framePositions = null
+    this.frameCenters = null
+    this.frameKWidthPx = null
+    this.hoverFlushPending = false
     this.clearHover()
     if (options.scheduleDraw !== false) {
       this.chart.scheduleDraw()
@@ -382,15 +400,14 @@ export class InteractionController {
         const dy = Math.abs(e.clientY - this.touchStartY)
         if (elapsed >= InteractionController.LONG_PRESS_MS && dx < 10 && dy < 10) {
           this._state.actions.setDragMode('explore')
-          this.updatePlotHoverFromPoint(e.clientX, e.clientY)
-          this.chart.scheduleDraw()
+          this.queueHoverFlush()
           return
         }
       }
 
       if (this._state.readonly.dragMode.peek() === 'explore') {
-        this.updatePlotHoverFromPoint(e.clientX, e.clientY)
-        this.chart.scheduleDraw()
+        // explore 跟手：仍走 pending，由本帧 flush 推导（与空闲 hover 同路径）
+        this.queueHoverFlush()
         return
       }
 
@@ -415,36 +432,66 @@ export class InteractionController {
       return
     }
 
-    const location = this.getPlotPointerLocation(e.clientX, e.clientY)
-    if (!location) return
-    this._state.actions.setSeparatorHover(this.hitTestPaneSeparator(location.mouseY))
+    // 空闲 hover：只记录指针，不写 crosshair/tooltip Signal
+    this.queueHoverFlush()
+  }
 
-    this.updatePlotHoverFromPoint(e.clientX, e.clientY)
+  /**
+   * 标记有待推导的 hover 输入，并申请 Overlay 帧。
+   * 真正的 updatePlotHoverFromPoint 在 flushPendingHover 中执行。
+   */
+  private queueHoverFlush(): void {
+    this.hoverFlushPending = true
+    this.chart.scheduleDraw(UpdateLevel.Overlay)
+  }
+
+  /**
+   * 将 pending 指针推导为 crosshair/hover/tooltip 并写入 kernel。
+   * ChartRenderer 在 seal 几何之后、paint 之前调用，保证与本帧几何同代。
+   * 无 pending 时为 no-op。
+   */
+  flushPendingHover(): void {
+    if (!this.hoverFlushPending) return
+    this.hoverFlushPending = false
+    if (!this.lastClientPos) return
+
+    this.updatePlotHoverFromPoint(this.lastClientPos.x, this.lastClientPos.y)
     const hoverRenderKey = this.getHoverRenderKey()
     if (hoverRenderKey !== this.lastHoverRenderKey) {
       this.lastHoverRenderKey = hoverRenderKey
-      this.chart.scheduleDraw(UpdateLevel.Overlay)
     }
   }
 
   /**
-   * 设置当前帧的 K 线起始 x 坐标数组和可见范围
+   * 封存本帧 K 线几何到 controller 私有字段（非 kernel signal）。
+   * ChartRenderer 在 paint 前调用；引用未变则跳过 hover 重算。
+   *
    * @param positions K 线起始 x 坐标数组
-   * @param visibleRange 可见 K 线索引范围
+   * @param visibleRange 保留兼容签名（hover 用 viewport）
    * @param kWidthPx K 线宽度（物理像素）
-   * @param centers K 线中心 x 坐标数组（物理像素对齐后）
+   * @param centers K 线中心 x 坐标数组
    */
   setKLinePositions(
     positions: number[] | null,
-    visibleRange: { start: number; end: number } | null,
+    _visibleRange: { start: number; end: number } | null,
     kWidthPx?: number,
     centers?: number[] | null,
   ) {
-    this._state.actions.updateFramePositions(positions, centers ?? null, kWidthPx ?? null)
+    const nextWidth = kWidthPx ?? null
+    const nextCenters = centers ?? null
+    const unchanged =
+      this.framePositions === positions &&
+      this.frameCenters === nextCenters &&
+      this.frameKWidthPx === nextWidth
+
+    this.framePositions = positions
+    this.frameCenters = nextCenters
+    this.frameKWidthPx = nextWidth
 
-    // 十字线自动同步：positions 刷新后用最新鼠标位置重算，防止缩放/滚动后索引滞后
-    if (this.lastClientPos && !this._state.readonly.isDragging.peek()) {
-      this.updatePlotHoverFromPoint(this.lastClientPos.x, this.lastClientPos.y)
+    // 几何变化时标记 hover 待刷新；由 flushPendingHover 与 paint 同帧完成
+    if (!unchanged && this.lastClientPos && !this._state.readonly.isDragging.peek()) {
+      this.hoverFlushPending = true
+      this.flushPendingHover()
     }
   }
 
@@ -566,15 +613,16 @@ export class InteractionController {
     this.activePaneIdOnDrag = pane.id
     this._state.actions.setRightAxisHover(pane.id)
     this._state.actions.setSeparatorHover(null)
-    this._state.actions.updateCrosshair(null, null)
+    this._state.actions.updateCrosshair(null, null, null)
     this._state.actions.updateHover(null, pane.id)
     return true
   }
 
   clearHover() {
+    this.hoverFlushPending = false
     this.lastHoverRenderKey = ''
     this._state.actions.setRightAxisHover(null)
-    this._state.actions.updateCrosshair(null, null)
+    this._state.actions.updateCrosshair(null, null, null)
     this._state.actions.updateHover(null, null)
     this._state.actions.updateMarkerHover(null, null, null)
     this.markerState.clearAll(this.chart.getMarkerManager())
@@ -608,7 +656,7 @@ export class InteractionController {
     const pane = this.getPaneByY(mouseY)
     this._state.actions.setRightAxisHover(pane?.id || null)
     this._state.actions.setSeparatorHover(null)
-    this._state.actions.updateCrosshair(null, null)
+    this._state.actions.updateCrosshair(null, null, null)
     this._state.actions.updateHover(null, pane?.id || null)
   }
 
@@ -704,7 +752,7 @@ if (this.tooltipPositionMode === 'adaptive') {
     const separatorUpperPaneId = this.hitTestPaneSeparator(ctx.mouseY)
     this._state.actions.setSeparatorHover(separatorUpperPaneId)
     if (separatorUpperPaneId) {
-      this._state.actions.updateCrosshair(null, null)
+      this._state.actions.updateCrosshair(null, null, null)
       this._state.actions.updateHover(null, null)
       return true
     }
@@ -721,7 +769,7 @@ if (this.tooltipPositionMode === 'adaptive') {
     const result = this.markerState.updateHoverFromPoint(ctx.worldX, ctx.mouseX, ctx.mouseY, markerManager)
     this._state.actions.updateMarkerHover(result.hitMarkerId, result.hitMarkerData, result.hitCustomMarker)
     if (result.hit) {
-      this._state.actions.updateCrosshair(null, null)
+      this._state.actions.updateCrosshair(null, null, null)
       this._state.actions.setHoveredIndex(null)
       return true
     }
@@ -735,8 +783,8 @@ if (this.tooltipPositionMode === 'adaptive') {
    * 若无 kLinePositions、visibleRange 或 kWidthPx，返回 null。
    */
   private findNearestBar(ctx: HoverContext): NearestBar | null {
-    const kLinePositions = this._state.readonly.kLinePositions.peek()
-    const kWidthPx = this._state.readonly.kWidthPx.peek()
+    const kLinePositions = this.framePositions
+    const kWidthPx = this.frameKWidthPx
     const vp = this.chart.viewport.peek()
     const visibleRange = vp ? { start: vp.visibleFrom, end: vp.visibleTo } : null
     if (!kLinePositions || !visibleRange || !kWidthPx) return null
@@ -799,16 +847,16 @@ if (this.tooltipPositionMode === 'adaptive') {
    * 索引无效时清除十字线状态。
    */
   private positionCrosshair(ctx: HoverContext, bar: NearestBar): void {
-    const { mouseX, mouseY, scrollLeft, plotWidth, plotHeight, dpr } = ctx
+    const { mouseY, scrollLeft, plotWidth, plotHeight } = ctx
     const pane = this.getPaneByY(mouseY)
     this._state.actions.setActivePaneId(pane?.id || null)
 
     if (bar.globalIdx < 0 || bar.globalIdx >= this.chart.getInternalData().length) {
-      this._state.actions.updateCrosshair(null, null)
+      this._state.actions.updateCrosshair(null, null, null)
       return
     }
 
-    const kLineCenters = this._state.readonly.kLineCenters.peek()
+    const kLineCenters = this.frameCenters
     const centerX = kLineCenters?.[bar.localIdx] ?? bar.kLineStartX + bar.widthLogical / 2
     const snappedX = centerX - scrollLeft
 
@@ -819,6 +867,7 @@ if (this.tooltipPositionMode === 'adaptive') {
         y: Math.min(Math.max(mouseY, 0), plotHeight),
       },
       price,
+      bar.globalIdx,
     )
   }
 
@@ -938,10 +987,12 @@ if (this.tooltipPositionMode === 'adaptive') {
     this.clearSeparatorState()
     this.isTouchSession = false
     this.pinchTracker.reset()
-    this._state.actions.updateCrosshair(null, null)
+    this._state.actions.updateCrosshair(null, null, null)
     this._state.actions.updateHover(null, null)
     this.markerState.reset()
-    this._state.actions.updateFramePositions(null, null, null)
+    this.framePositions = null
+    this.frameCenters = null
+    this.frameKWidthPx = null
     this.lastHoverRenderKey = ''
   }
 

package/src/engine/data/__tests__/chartDataManager.incrementalLoad.test.ts

@@ -123,6 +123,7 @@ describe('ChartDataManager incremental load', () => {
     expect(hint).not.toBeNull()
     expect(hint!.style.opacity).toBe('1')
     expect(hint!.style.left).toBe('800px')
+    expect(hint!.style.background).toContain('--klc-color-selection-fill')
     expect(fetchCount).toBe(2)
   })
 })

package/src/engine/data/incrementalLoadHint.ts

@@ -1,6 +1,9 @@
 import type { ChartDom } from '../chartTypes'
 import { getPhysicalKLineConfig } from '../utils/klineConfig'
 
+/** 与 theme selectionFill 对齐：light #2D7FF933 / dark #4A9EFF33；fallback 为 light 默认 */
+const INCREMENTAL_LOAD_HINT_BG = 'var(--klc-color-selection-fill, #2D7FF933)'
+
 export interface HintDeps {
   getOption: () => { kWidth: number; kGap: number }
   getEffectiveDpr: () => number
@@ -33,6 +36,8 @@ export class IncrementalLoadHint {
 
     this._cancelFadeOut(entry)
     this._updateGeometry(hint, count, leftBufferWidth)
+    // 每次 show 刷新，跟随 light/dark / color preset
+    hint.style.background = INCREMENTAL_LOAD_HINT_BG
 
     if (!hint.isConnected) {
       host.appendChild(hint)
@@ -74,7 +79,7 @@ export class IncrementalLoadHint {
     hint.style.opacity = '0'
     hint.style.filter = 'blur(10px)'
     hint.style.transition = 'opacity 420ms ease, filter 420ms ease'
-    hint.style.background = 'rgba(71, 91, 132, 0.5)'
+    hint.style.background = INCREMENTAL_LOAD_HINT_BG
     hint.style.zIndex = '3'
     hint.style.willChange = 'opacity, filter, width'
     return { el: hint, timer: 0, removeTimer: 0, onTransitionEnd: null }

package/src/engine/drawing/DrawingState.ts

@@ -4,150 +4,168 @@ import type { DrawingObject, DrawingStyle } from '../../foundation/plugin/index'
 const PREVIEW_ID = '__preview__'
 
 /**
- * 交互会话层 CRUD。本地 drawings 数组是工作副本；
- * 持久业务 SSOT 是 kernel.drawing，经 DrawingChartAdapter.setDrawings 同步。
- * 禁止直接写 DrawingStore。
- *
- * 所有变更操作会自动同步到 DrawingChartAdapter（触发渲染）。
- * 不处理事件、不处理命中检测、不处理拖拽逻辑，只维护数据一致性。
+ * 交互会话层：只持预览与拖拽覆盖，不持完整图元列表。
+ * 已确认图元唯一 SSOT 是 kernel.drawing，经 adapter 读写。
  */
 export class DrawingState {
-  private drawings: DrawingObject[] = []
-  private selectedDrawingId: string | null = null
+  private preview: DrawingObject | null = null
+  private dragOverride: DrawingObject | null = null
 
   constructor(private adapter: DrawingChartAdapter) {}
 
   // ---- Read ----
 
-  /** 返回全部图元（含预览） */
+  /** kernel 已确认图元（不含预览） */
+  private committed(): DrawingObject[] {
+    return this.adapter.getFullDrawings().filter((d) => d.id !== PREVIEW_ID)
+  }
+
+  /** 渲染用：拖拽覆盖 + 预览（顺序：override 先，preview 后） */
+  getPaintOverlay(): DrawingObject[] {
+    const out: DrawingObject[] = []
+    if (this.dragOverride) out.push(this.dragOverride)
+    if (this.preview) out.push(this.preview)
+    return out
+  }
+
+  /** 已确认 ⊕ 会话覆盖（UI / getDrawings） */
   getAll(): DrawingObject[] {
-    return this.drawings
+    return mergePaint(this.committed(), this.getPaintOverlay())
   }
 
-  /** 返回非预览图元（用于命中检测） */
+  /** 命中检测用：已确认 + 拖拽覆盖，不含预览 */
   getNonPreview(): DrawingObject[] {
-    return this.drawings.filter((d) => d.id !== PREVIEW_ID)
+    return mergePaint(this.committed(), this.dragOverride ? [this.dragOverride] : [])
   }
 
-  /** 按 ID 查找图元 */
   getById(id: string): DrawingObject | undefined {
-    return this.drawings.find((d) => d.id === id)
+    if (this.dragOverride?.id === id) return this.dragOverride
+    if (this.preview?.id === id) return this.preview
+    return this.committed().find((d) => d.id === id)
   }
 
-  /** 是否有预览图元 */
   hasPreview(): boolean {
-    return this.drawings.some((d) => d.id === PREVIEW_ID)
+    return this.preview !== null
   }
 
-  /** 返回当前选中图元 */
   getSelected(): DrawingObject | null {
-    if (!this.selectedDrawingId) return null
-    return this.drawings.find((d) => d.id === this.selectedDrawingId) ?? null
+    const id = this.getSelectedId()
+    if (!id) return null
+    return this.getById(id) ?? null
   }
 
-  /** 返回当前选中图元的 ID */
   getSelectedId(): string | null {
-    return this.selectedDrawingId
+    return this.adapter.getSelectedDrawingId()
   }
 
-  // ---- Write ----
-  // 所有 write 方法都会调用 adapter.setDrawings() 触发渲染
+  // ---- Session (no kernel write) ----
 
-  /**
-   * 工作副本必须可变：kernel deepFreezeSnapshot 会冻结数组与元素。
-   * 浅 slice 仍会让 anchors/style 不可写，故做一层 plain 深拷贝。
-   */
-  private adoptWorkCopy(drawings: ReadonlyArray<DrawingObject>): DrawingObject[] {
-    return drawings.map((d) => ({
-      ...d,
-      anchors: d.anchors.map((a) => ({ ...a })),
-      params: { ...d.params },
-      style: { ...d.style },
-    }))
+  setPreview(preview: DrawingObject): void {
+    this.preview = preview
+    this.adapter.requestDraw?.()
   }
 
-  /** 整体替换图元列表；选中 id 不在列表时同步清本地与 kernel */
+  removePreview(): void {
+    if (!this.preview) return
+    this.preview = null
+    this.adapter.requestDraw?.()
+  }
+
+  setDragOverride(drawing: DrawingObject): void {
+    this.dragOverride = drawing
+    this.adapter.requestDraw?.()
+  }
+
+  clearDragOverride(): void {
+    if (!this.dragOverride) return
+    this.dragOverride = null
+  }
+
+  /** pointerup：把拖拽结果写入 kernel，清会话覆盖 */
+  commitDrag(): void {
+    if (!this.dragOverride) return
+    const next = mergePaint(this.committed(), [this.dragOverride])
+    this.dragOverride = null
+    this.adapter.setDrawings(next)
+  }
+
+  // ---- Committed writes (kernel) ----
+
   setDrawings(drawings: DrawingObject[]): void {
-    this.drawings = this.adoptWorkCopy(drawings)
-    if (this.selectedDrawingId && !this.drawings.some((d) => d.id === this.selectedDrawingId)) {
-      this.selectedDrawingId = null
-      this.adapter.setSelectedDrawingId(null)
-    }
-    this.adapter.setDrawings(this.drawings)
+    this.preview = null
+    this.dragOverride = null
+    const committed = drawings.filter((d) => d.id !== PREVIEW_ID)
+    this.clearSelectionIfMissing(committed)
+    this.adapter.setDrawings(committed)
   }
 
-  /** 替换图元列表，若选中项被移除则自动清除选中（含 kernel） */
   replaceDrawings(drawings: DrawingObject[]): void {
-    this.drawings = this.adoptWorkCopy(drawings)
-    if (this.selectedDrawingId && !this.drawings.some((d) => d.id === this.selectedDrawingId)) {
-      this.selectedDrawingId = null
-      this.adapter.setSelectedDrawingId(null)
-    }
-    this.adapter.setDrawings(this.drawings)
+    this.setDrawings(drawings)
   }
 
-  /** 添加或更新单个图元（id 相同则替换） */
   addOrUpdate(drawing: DrawingObject): void {
-    const idx = this.drawings.findIndex((d) => d.id === drawing.id)
-    if (idx >= 0) {
-      const next = this.drawings.slice()
-      next[idx] = drawing
-      this.drawings = next
-    } else {
-      this.drawings = [...this.drawings, drawing]
+    if (drawing.id === PREVIEW_ID) {
+      this.setPreview(drawing)
+      return
     }
-    this.adapter.setDrawings(this.drawings)
+    const next = mergePaint(this.committed(), [drawing])
+    this.adapter.setDrawings(next)
   }
 
-  /** 删除图元，若为选中项则清除选中 */
   removeDrawing(drawingId: string): void {
-    this.drawings = this.drawings.filter((d) => d.id !== drawingId)
-    if (this.selectedDrawingId === drawingId) {
-      this.selectedDrawingId = null
-    }
-    this.adapter.setDrawings(this.drawings)
+    if (this.dragOverride?.id === drawingId) this.dragOverride = null
+    if (this.preview?.id === drawingId) this.preview = null
+    const next = this.committed().filter((d) => d.id !== drawingId)
+    this.clearSelectionIfMissing(next)
+    this.adapter.setDrawings(next)
   }
 
-  /** 更新图元样式（合并到已有样式） */
   updateDrawingStyle(drawingId: string, style: Partial<DrawingStyle>): void {
-    this.drawings = this.drawings.map((d) =>
+    const next = this.committed().map((d) =>
       d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d,
     )
-    this.adapter.setDrawings(this.drawings)
+    if (this.dragOverride?.id === drawingId) {
+      this.dragOverride = { ...this.dragOverride, style: { ...this.dragOverride.style, ...style } }
+    }
+    this.adapter.setDrawings(next)
   }
 
-  /**
-   * 设置选中图元。
-   * 仅在选中 ID 确实变化时才触发 adapter 同步。
-   * 不触发 onDrawingSelected 回调 —— 由调用方（controller）管理。
-   */
   setSelected(drawing: DrawingObject | null): void {
     const newId = drawing?.id ?? null
-    if (this.selectedDrawingId === newId) return
-    this.selectedDrawingId = newId
+    if (this.adapter.getSelectedDrawingId() === newId) return
     this.adapter.setSelectedDrawingId(newId)
   }
 
-  /** 删除预览图元（__preview__） */
-  removePreview(): void {
-    if (!this.hasPreview()) return
-    this.drawings = this.drawings.filter((d) => d.id !== PREVIEW_ID)
-    this.adapter.setDrawings(this.drawings)
-  }
-
-  /** 设置预览图元（替换已有的 __preview__） */
-  setPreview(preview: DrawingObject): void {
-    this.drawings = [...this.drawings.filter((d) => d.id !== PREVIEW_ID), preview]
-    this.adapter.setDrawings(this.drawings)
-  }
-
-  /** 清空所有图元并清除选中 */
   clear(): void {
-    this.drawings = []
-    this.selectedDrawingId = null
+    this.preview = null
+    this.dragOverride = null
     this.adapter.setDrawings([])
     this.adapter.setSelectedDrawingId(null)
   }
+
+  private clearSelectionIfMissing(list: DrawingObject[]): void {
+    const selected = this.adapter.getSelectedDrawingId()
+    if (selected && !list.some((d) => d.id === selected)) {
+      this.adapter.setSelectedDrawingId(null)
+    }
+  }
+}
+
+/** 以 id 合并；overlay 覆盖同 id；__preview__ 追加在末尾 */
+export function mergePaint(
+  committed: ReadonlyArray<DrawingObject>,
+  overlay: ReadonlyArray<DrawingObject>,
+): DrawingObject[] {
+  const byId = new Map<string, DrawingObject>()
+  for (const d of committed) {
+    if (d.id !== PREVIEW_ID) byId.set(d.id, d)
+  }
+  const previews: DrawingObject[] = []
+  for (const o of overlay) {
+    if (o.id === PREVIEW_ID) previews.push(o)
+    else byId.set(o.id, o)
+  }
+  return [...byId.values(), ...previews]
 }
 
 export { PREVIEW_ID }