@363045841yyt/klinechart-core 0.8.10-alpha.2 → 0.8.10

package/src/engine/drawing/DrawingState.ts

@@ -0,0 +1,132 @@
+import type { DrawingObject, DrawingStyle } from '../../plugin'
+import type { DrawingChartAdapter } from '../../controllers/types'
+
+const PREVIEW_ID = '__preview__'
+
+/**
+ * Drawing 数据管理层 —— 图元 CRUD、选中状态、预览管理。
+ *
+ * 所有变更操作会自动同步到 DrawingChartAdapter（触发渲染）。
+ * 不处理事件、不处理命中检测、不处理拖拽逻辑，只维护数据一致性。
+ */
+export class DrawingState {
+  private drawings: DrawingObject[] = []
+  private selectedDrawingId: string | null = null
+
+  constructor(private adapter: DrawingChartAdapter) {}
+
+  // ---- Read ----
+
+  /** 返回全部图元（含预览） */
+  getAll(): DrawingObject[] {
+    return this.drawings
+  }
+
+  /** 返回非预览图元（用于命中检测） */
+  getNonPreview(): DrawingObject[] {
+    return this.drawings.filter((d) => d.id !== PREVIEW_ID)
+  }
+
+  /** 按 ID 查找图元 */
+  getById(id: string): DrawingObject | undefined {
+    return this.drawings.find((d) => d.id === id)
+  }
+
+  /** 是否有预览图元 */
+  hasPreview(): boolean {
+    return this.drawings.some((d) => d.id === PREVIEW_ID)
+  }
+
+  /** 返回当前选中图元 */
+  getSelected(): DrawingObject | null {
+    if (!this.selectedDrawingId) return null
+    return this.drawings.find((d) => d.id === this.selectedDrawingId) ?? null
+  }
+
+  /** 返回当前选中图元的 ID */
+  getSelectedId(): string | null {
+    return this.selectedDrawingId
+  }
+
+  // ---- Write ----
+  // 所有 write 方法都会调用 adapter.setDrawings() 触发渲染
+
+  /** 整体替换图元列表（会清理选中状态） */
+  setDrawings(drawings: DrawingObject[]): void {
+    this.drawings = drawings
+    this.adapter.setDrawings(drawings)
+  }
+
+  /** 替换图元列表，若选中项被移除则自动清除选中 */
+  replaceDrawings(drawings: DrawingObject[]): void {
+    this.drawings = drawings
+    if (this.selectedDrawingId && !this.drawings.some((d) => d.id === this.selectedDrawingId)) {
+      this.selectedDrawingId = null
+    }
+    this.adapter.setDrawings(this.drawings)
+  }
+
+  /** 添加或更新单个图元（id 相同则替换） */
+  addOrUpdate(drawing: DrawingObject): void {
+    const idx = this.drawings.findIndex((d) => d.id === drawing.id)
+    if (idx >= 0) {
+      this.drawings[idx] = drawing
+    } else {
+      this.drawings.push(drawing)
+    }
+    this.adapter.setDrawings(this.drawings)
+  }
+
+  /** 删除图元，若为选中项则清除选中 */
+  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)
+  }
+
+  /** 更新图元样式（合并到已有样式） */
+  updateDrawingStyle(drawingId: string, style: Partial<DrawingStyle>): void {
+    this.drawings = this.drawings.map((d) =>
+      d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d
+    )
+    this.adapter.setDrawings(this.drawings)
+  }
+
+  /**
+   * 设置选中图元。
+   * 仅在选中 ID 确实变化时才触发 adapter 同步。
+   * 不触发 onDrawingSelected 回调 —— 由调用方（controller）管理。
+   */
+  setSelected(drawing: DrawingObject | null): void {
+    const newId = drawing?.id ?? null
+    if (this.selectedDrawingId === newId) return
+    this.selectedDrawingId = newId
+    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)
+    this.drawings.push(preview)
+    this.adapter.setDrawings(this.drawings)
+  }
+
+  /** 清空所有图元并清除选中 */
+  clear(): void {
+    this.drawings = []
+    this.selectedDrawingId = null
+    this.adapter.setDrawings([])
+    this.adapter.setSelectedDrawingId(null)
+  }
+}
+
+export { PREVIEW_ID }

package/src/engine/drawing/HitTester.ts

@@ -0,0 +1,288 @@
+import type { DrawingObject } from '../../plugin'
+import type { DrawingChartAdapter } from '../../controllers/types'
+import { anchorToScreen, pointToSegmentDist } from './coordinateUtils'
+import { getExtendMode } from './toolConfig'
+import { computeLinearRegression } from './linearRegression'
+
+// ---- Types ----
+
+/** 命中检测结果：anchorIndex 存在表示点到锚点，否则点到线段 */
+export type HitResult =
+  | { drawing: DrawingObject; anchorIndex: number }
+  | { drawing: DrawingObject }
+
+/** 二维线段，两端点为屏幕坐标（px） */
+export interface LineSegment {
+  a: { x: number; y: number }
+  b: { x: number; y: number }
+}
+
+/**
+ * 回归通道几何信息（屏幕坐标）。
+ * segments 为三条平行线（中/上/下），endpoints 标出可拖拽的端点。
+ */
+export interface RegressionChannelGeometry {
+  segments: LineSegment[]
+  endpoints: Array<{ point: { x: number; y: number }; anchorIndex: 0 | 1 }>
+}
+
+/** 锚点点击命中半径（px） */
+const ANCHOR_HIT_RADIUS = 8
+/** 线段点击命中半径（px） */
+const LINE_HIT_RADIUS = 6
+
+/**
+ * Hit detection — test mouse position against drawing anchors and line segments.
+ * Pure computation, no side effects.
+ */
+export class HitTester {
+  /**
+   * Find the drawing (and optionally which anchor) under the given mouse position.
+   * Anchors are checked first, then line segments.
+   */
+  hitTest(
+    mouseX: number,
+    mouseY: number,
+    drawings: DrawingObject[],
+    adapter: DrawingChartAdapter,
+  ): HitResult | null {
+    const visibleDrawings = drawings.filter((d) => d.visible)
+    const regressionGeometryCache = new Map<string, RegressionChannelGeometry | null>()
+
+    // Check anchor hits first
+    for (const drawing of visibleDrawings) {
+      // regression-channel: computed endpoints are also draggable
+      if (drawing.kind === 'regression-channel' && drawing.anchors.length >= 2) {
+        const hit = this.hitTestRegressionEndpoints(drawing, mouseX, mouseY, adapter, regressionGeometryCache)
+        if (hit) return hit
+      }
+
+      for (let i = 0; i < drawing.anchors.length; i++) {
+        const screen = anchorToScreen(drawing.anchors[i]!, adapter)
+        if (!screen) continue
+        const dist = Math.hypot(mouseX - screen.x, mouseY - screen.y)
+        if (dist <= ANCHOR_HIT_RADIUS) {
+          return { drawing, anchorIndex: i }
+        }
+      }
+    }
+
+    // Check line segment hits
+    for (const drawing of visibleDrawings) {
+      const segments = this.getDrawingLineSegments(drawing, adapter, regressionGeometryCache)
+      for (const seg of segments) {
+        const dist = pointToSegmentDist(mouseX, mouseY, seg.a, seg.b)
+        if (dist <= LINE_HIT_RADIUS) {
+          return { drawing }
+        }
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Get the screen-space line segments for a drawing, used for hit-testing.
+   */
+  getDrawingLineSegments(
+    drawing: DrawingObject,
+    adapter: DrawingChartAdapter,
+    regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
+  ): LineSegment[] {
+    const viewport = adapter.getViewport()
+    if (!viewport) return []
+
+    // regression-channel: compute from linear regression geometry
+    if (drawing.kind === 'regression-channel') {
+      return this.getRegressionChannelGeometry(drawing, adapter, regressionGeometryCache)?.segments ?? []
+    }
+
+    // Single-anchor drawings (horizontal-line, horizontal-ray, vertical-line, cross-line)
+    if (drawing.anchors.length === 1) {
+      const screen = anchorToScreen(drawing.anchors[0]!, adapter)
+      if (!screen) return []
+
+      const paneInfo = adapter.getPaneInfo('main')
+      if (!paneInfo) return []
+
+      const right = viewport.plotWidth
+      const bottom = paneInfo.height
+
+      switch (drawing.kind) {
+        case 'horizontal-line':
+          return [{ a: { x: 0, y: screen.y }, b: { x: right, y: screen.y } }]
+        case 'horizontal-ray':
+          return [{ a: screen, b: { x: right, y: screen.y } }]
+        case 'vertical-line':
+          return [{ a: { x: screen.x, y: 0 }, b: { x: screen.x, y: bottom } }]
+        case 'cross-line':
+          return [
+            { a: { x: 0, y: screen.y }, b: { x: right, y: screen.y } },
+            { a: { x: screen.x, y: 0 }, b: { x: screen.x, y: bottom } },
+          ]
+        default:
+          return []
+      }
+    }
+
+    // Multi-anchor drawings (2+)
+    const points = drawing.anchors
+      .map((a) => anchorToScreen(a, adapter))
+      .filter(Boolean) as { x: number; y: number }[]
+    if (points.length < 2) return []
+
+    const segments: LineSegment[] = []
+
+    if (points.length === 2) {
+      const a = points[0]!
+      const b = points[1]!
+      const dx = b.x - a.x
+      const dy = b.y - a.y
+
+      let start = a
+      let end = b
+
+      const extend = getExtendMode(drawing.kind)
+      const maxLen = Math.max(viewport.plotWidth, viewport.plotHeight) * 4
+
+      if (extend === 'right' || extend === 'both') {
+        end = { x: b.x + dx * maxLen, y: b.y + dy * maxLen }
+      }
+      if (extend === 'left' || extend === 'both') {
+        start = { x: a.x - dx * maxLen, y: a.y - dy * maxLen }
+      }
+
+      segments.push({ a: start, b: end })
+    } else if (points.length >= 3) {
+      switch (drawing.kind) {
+        case 'parallel-channel': {
+          const [p1, p2, p3] = points as [
+            { x: number; y: number },
+            { x: number; y: number },
+            { x: number; y: number },
+          ]
+          const dx = p2.x - p1.x
+          const dy = p2.y - p1.y
+          const p4 = { x: p3.x + dx, y: p3.y + dy }
+          segments.push({ a: p1, b: p2 }, { a: p3, b: p4 })
+          break
+        }
+        case 'flat-line': {
+          const [p1, p2, p3] = points as [
+            { x: number; y: number },
+            { x: number; y: number },
+            { x: number; y: number },
+          ]
+          const h1 = { x: p1.x, y: p3.y }
+          const h2 = { x: p2.x, y: p3.y }
+          segments.push({ a: p1, b: p2 }, { a: h1, b: h2 })
+          break
+        }
+        case 'disjoint-channel': {
+          const [p1, p2, p3] = points as [
+            { x: number; y: number },
+            { x: number; y: number },
+            { x: number; y: number },
+          ]
+          const dx = p2.x - p1.x
+          const dy = p2.y - p1.y
+          const p4 = { x: p3.x + dx, y: p3.y - dy }
+          segments.push({ a: p1, b: p2 }, { a: p3, b: p4 })
+          break
+        }
+        default:
+          for (let i = 0; i < points.length - 1; i++) {
+            segments.push({ a: points[i]!, b: points[i + 1]! })
+          }
+      }
+    }
+
+    return segments
+  }
+
+  /**
+   * Compute the screen-space geometry of a regression channel.
+   */
+  getRegressionChannelGeometry(
+    drawing: DrawingObject,
+    adapter: DrawingChartAdapter,
+    cache?: Map<string, RegressionChannelGeometry | null>,
+  ): RegressionChannelGeometry | null {
+    const cached = cache?.get(drawing.id)
+    if (cached !== undefined) return cached
+
+    const data = adapter.getData()
+    if (data.length === 0 || drawing.anchors.length < 2) {
+      cache?.set(drawing.id, null)
+      return null
+    }
+
+    const firstIndex = Math.round(drawing.anchors[0]!.index)
+    const secondIndex = Math.round(drawing.anchors[1]!.index)
+    const clampedFirst = Math.min(Math.max(firstIndex, 0), data.length - 1)
+    const clampedSecond = Math.min(Math.max(secondIndex, 0), data.length - 1)
+    const startIndex = Math.min(clampedFirst, clampedSecond)
+    const endIndex = Math.max(clampedFirst, clampedSecond)
+    const slice = data.slice(startIndex, endIndex + 1)
+    const regression = computeLinearRegression(
+      slice.map((item: { close: number }) => item.close),
+    )
+    if (!regression) {
+      cache?.set(drawing.id, null)
+      return null
+    }
+
+    const sigma = ((drawing.params as { sigma?: number } | undefined)?.sigma) ?? 2
+    const offset = regression.stdDev * sigma
+    const firstValue = regression.intercept
+    const lastValue = regression.intercept + regression.slope * (slice.length - 1)
+
+    const middleStart = anchorToScreen({ id: '', index: firstIndex, price: firstValue }, adapter)
+    const middleEnd = anchorToScreen({ id: '', index: secondIndex, price: lastValue }, adapter)
+    const upperStart = anchorToScreen({ id: '', index: firstIndex, price: firstValue + offset }, adapter)
+    const upperEnd = anchorToScreen({ id: '', index: secondIndex, price: lastValue + offset }, adapter)
+    const lowerStart = anchorToScreen({ id: '', index: firstIndex, price: firstValue - offset }, adapter)
+    const lowerEnd = anchorToScreen({ id: '', index: secondIndex, price: lastValue - offset }, adapter)
+
+    const segments: LineSegment[] = []
+    if (middleStart && middleEnd) segments.push({ a: middleStart, b: middleEnd })
+    if (upperStart && upperEnd) segments.push({ a: upperStart, b: upperEnd })
+    if (lowerStart && lowerEnd) segments.push({ a: lowerStart, b: lowerEnd })
+
+    const endpoints: RegressionChannelGeometry['endpoints'] = []
+    if (middleStart) endpoints.push({ point: middleStart, anchorIndex: 0 })
+    if (middleEnd) endpoints.push({ point: middleEnd, anchorIndex: 1 })
+    if (upperStart) endpoints.push({ point: upperStart, anchorIndex: 0 })
+    if (upperEnd) endpoints.push({ point: upperEnd, anchorIndex: 1 })
+    if (lowerStart) endpoints.push({ point: lowerStart, anchorIndex: 0 })
+    if (lowerEnd) endpoints.push({ point: lowerEnd, anchorIndex: 1 })
+
+    const geometry: RegressionChannelGeometry = { segments, endpoints }
+    cache?.set(drawing.id, geometry)
+    return geometry
+  }
+
+  /**
+   * regression-channel only: check hit against computed regression endpoints
+   * (which may be far from stored anchor positions).
+   */
+  private hitTestRegressionEndpoints(
+    drawing: DrawingObject,
+    mouseX: number,
+    mouseY: number,
+    adapter: DrawingChartAdapter,
+    cache?: Map<string, RegressionChannelGeometry | null>,
+  ): { drawing: DrawingObject; anchorIndex: number } | null {
+    const geometry = this.getRegressionChannelGeometry(drawing, adapter, cache)
+    if (!geometry) return null
+
+    for (const endpoint of geometry.endpoints) {
+      const dist = Math.hypot(mouseX - endpoint.point.x, mouseY - endpoint.point.y)
+      if (dist <= ANCHOR_HIT_RADIUS) {
+        return { drawing, anchorIndex: endpoint.anchorIndex }
+      }
+    }
+
+    return null
+  }
+}

package/src/engine/drawing/PreviewRenderer.ts

@@ -0,0 +1,157 @@
+import type { DrawingObject } from '../../plugin'
+import { PREVIEW_ID } from './DrawingState'
+import type { DrawingToolId } from './toolConfig'
+import { SINGLE_ANCHOR_TOOLS, DOUBLE_ANCHOR_TOOLS, TRIPLE_ANCHOR_TOOLS, getDrawingKind, CHANNEL_KINDS } from './toolConfig'
+import type { DrawingAnchorInput } from './coordinateUtils'
+
+/**
+ * Constructs preview DrawingObject instances for various tool types.
+ * Pure construction — no side effects, no adapter calls.
+ */
+export class PreviewRenderer {
+  /**
+   * Build a preview drawing from the current tool state and pointer anchor.
+   * @returns a preview DrawingObject, or null if the state is insufficient for a preview.
+   */
+  buildPreview(
+    activeTool: DrawingToolId,
+    pendingAnchors: DrawingAnchorInput[],
+    currentAnchor: DrawingAnchorInput,
+  ): DrawingObject | null {
+    const isSingle = SINGLE_ANCHOR_TOOLS.includes(activeTool as any)
+    const isDouble = DOUBLE_ANCHOR_TOOLS.includes(activeTool as any)
+    const isTriple = TRIPLE_ANCHOR_TOOLS.includes(activeTool as any)
+
+    if (!isSingle && !isDouble && !isTriple) return null
+
+    if (isSingle) {
+      return this.buildSingleAnchorPreview(activeTool, currentAnchor)
+    }
+
+    if (isDouble) {
+      if (pendingAnchors.length < 1) return null
+      return this.buildDoubleAnchorPreview(activeTool, pendingAnchors[0]!, currentAnchor)
+    }
+
+    // Triple anchor tools
+    return this.buildTripleAnchorPreview(activeTool, pendingAnchors, currentAnchor)
+  }
+
+  /** 单锚点工具预览：虚线样式 */
+  private buildSingleAnchorPreview(
+    activeTool: DrawingToolId,
+    anchor: DrawingAnchorInput,
+  ): DrawingObject {
+    return {
+      id: PREVIEW_ID,
+      kind: getDrawingKind(activeTool),
+      paneId: 'main',
+      visible: true,
+      anchors: [
+        { id: `${PREVIEW_ID}-a`, index: anchor.index, time: anchor.time, price: anchor.price },
+      ],
+      params: {},
+      style: {
+        stroke: '#2962ff',
+        strokeWidth: 1,
+        strokeStyle: 'dashed',
+      },
+    }
+  }
+
+  /** 双锚点工具预览：两个锚点之间的虚线，回归通道附带填充区域 */
+  private buildDoubleAnchorPreview(
+    activeTool: DrawingToolId,
+    first: DrawingAnchorInput,
+    second: DrawingAnchorInput,
+  ): DrawingObject {
+    return {
+      id: PREVIEW_ID,
+      kind: getDrawingKind(activeTool),
+      paneId: 'main',
+      visible: true,
+      anchors: [
+        { id: `${PREVIEW_ID}-a`, index: first.index, time: first.time, price: first.price },
+        { id: `${PREVIEW_ID}-b`, index: second.index, time: second.time, price: second.price },
+      ],
+      params: activeTool === 'regression-channel' ? { sigma: 2 } : {},
+      style: {
+        stroke: '#2962ff',
+        strokeWidth: 1,
+        strokeStyle: 'dashed',
+        ...(activeTool === 'regression-channel' ? { fillOpacity: 0.1 } : {}),
+      },
+    }
+  }
+
+  /**
+   * 三锚点工具预览：
+   * - pending 数 = 0 → 无法预览，返回 null
+   * - pending 数 = 1 → 暂以趋势线（双锚点）形式显示前两个点
+   * - pending 数 ≥ 2 → 完整三锚点预览（含 flat-line 的特殊 price 处理）
+   */
+  private buildTripleAnchorPreview(
+    activeTool: DrawingToolId,
+    pendingAnchors: DrawingAnchorInput[],
+    currentAnchor: DrawingAnchorInput,
+  ): DrawingObject | null {
+    if (pendingAnchors.length === 0) return null
+
+    if (pendingAnchors.length === 1) {
+      // Need 3 anchors but only have 1 pending — render as a trend-line segment (2 anchors)
+      // so the user can see what they're drawing before placing the 3rd point
+      return {
+        id: PREVIEW_ID,
+        kind: 'trend-line',
+        paneId: 'main',
+        visible: true,
+        anchors: [
+          { id: `${PREVIEW_ID}-a`, index: pendingAnchors[0]!.index, time: pendingAnchors[0]!.time, price: pendingAnchors[0]!.price },
+          { id: `${PREVIEW_ID}-b`, index: currentAnchor.index, time: currentAnchor.time, price: currentAnchor.price },
+        ],
+        params: {},
+        style: {
+          stroke: '#2962ff',
+          strokeWidth: 1,
+          strokeStyle: 'dashed',
+        },
+      }
+    }
+
+    // pendingAnchors.length >= 2 — full 3-anchor preview
+    const thirdAnchor = activeTool === 'flat-line'
+      ? {
+          id: `${PREVIEW_ID}-c`,
+          index: pendingAnchors[1]!.index,
+          time: pendingAnchors[1]!.time,
+          price: currentAnchor.price,
+        }
+      : {
+          id: `${PREVIEW_ID}-c`,
+          index: currentAnchor.index,
+          time: currentAnchor.time,
+          price: currentAnchor.price,
+        }
+
+    const isChannel = CHANNEL_KINDS.includes(getDrawingKind(activeTool) as any)
+
+    return {
+      id: PREVIEW_ID,
+      kind: getDrawingKind(activeTool),
+      paneId: 'main',
+      visible: true,
+      anchors: [
+        { id: `${PREVIEW_ID}-a`, index: pendingAnchors[0]!.index, time: pendingAnchors[0]!.time, price: pendingAnchors[0]!.price },
+        { id: `${PREVIEW_ID}-b`, index: pendingAnchors[1]!.index, time: pendingAnchors[1]!.time, price: pendingAnchors[1]!.price },
+        thirdAnchor,
+      ],
+      params: {},
+      style: {
+        stroke: '#2962ff',
+        strokeWidth: 1,
+        strokeStyle: 'dashed',
+        ...(isChannel ? { fillOpacity: 0.1 } : {}),
+      },
+    }
+  }
+}