@363045841yyt/klinechart-core 0.7.3

package/src/engine/drawing/interaction.ts

@@ -0,0 +1,842 @@
+import type { DrawingObject, DrawingKind, DrawingAnchor, DrawingStyle } from '../../plugin'
+import type { Chart } from '../chart'
+import { getPhysicalKLineConfig } from '../utils/klineConfig'
+import { computeLinearRegression } from './index'
+
+export type DrawingToolId =
+  | 'cursor'
+  | 'trend-line'
+  | 'ray'
+  | 'h-line'
+  | 'h-ray'
+  | 'v-line'
+  | 'crosshair-line'
+  | 'info-line'
+  | 'parallel-channel'
+  | 'regression-channel'
+  | 'flat-line'
+  | 'disjoint-channel'
+
+export interface DrawingAnchorInput {
+  index: number
+  time?: number
+  price: number
+}
+
+export interface DrawingInteractionCallbacks {
+  onDrawingCreated?: (drawing: DrawingObject) => void
+  onToolChange?: (toolId: DrawingToolId) => void
+  onDrawingSelected?: (drawing: DrawingObject | null) => void
+}
+
+type HitResult =
+  | { drawing: DrawingObject; anchorIndex: number }
+  | { drawing: DrawingObject }
+
+type LineSegment = { a: { x: number; y: number }; b: { x: number; y: number } }
+
+type RegressionChannelGeometry = {
+  segments: LineSegment[]
+  endpoints: Array<{ point: { x: number; y: number }; anchorIndex: 0 | 1 }>
+}
+
+interface DragState {
+  drawingId: string
+  anchorIndex?: number
+  snapshot: DrawingAnchor[]
+  startMouse: { x: number; y: number }
+}
+
+const ANCHOR_HIT_RADIUS = 8
+const LINE_HIT_RADIUS = 6
+
+/**
+ * 绘图交互控制器
+ * 封装绘图工具的交互逻辑，与 Vue 组件解耦
+ */
+export class DrawingInteractionController {
+  private chart: Chart
+  private activeTool: DrawingToolId = 'cursor'
+  private pendingAnchors: DrawingAnchorInput[] = []
+  private drawings: DrawingObject[] = []
+  private callbacks: DrawingInteractionCallbacks = {}
+  private previewDrawingId = '__preview__'
+  private dragState: DragState | null = null
+  private selectedDrawingId: string | null = null
+
+  // 单锚点工具列表
+  private static readonly SINGLE_ANCHOR_TOOLS: DrawingToolId[] = [
+    'h-line',
+    'h-ray',
+    'v-line',
+    'crosshair-line',
+  ]
+
+  // 双锚点工具列表
+  private static readonly DOUBLE_ANCHOR_TOOLS: DrawingToolId[] = [
+    'trend-line',
+    'ray',
+    'info-line',
+    'regression-channel',
+  ]
+
+  // 三锚点工具列表
+  private static readonly TRIPLE_ANCHOR_TOOLS: DrawingToolId[] = [
+    'parallel-channel',
+    'flat-line',
+    'disjoint-channel',
+  ]
+
+  constructor(chart: Chart) {
+    this.chart = chart
+  }
+
+  setCallbacks(callbacks: DrawingInteractionCallbacks) {
+    this.callbacks = callbacks
+  }
+
+  getActiveTool(): DrawingToolId {
+    return this.activeTool
+  }
+
+  setTool(toolId: DrawingToolId) {
+    this.activeTool = toolId
+    this.pendingAnchors = []
+    this.removePreview()
+    this.dragState = null
+    this.setSelected(null)
+    this.callbacks.onToolChange?.(toolId)
+  }
+
+  getDrawings(): DrawingObject[] {
+    return this.drawings
+  }
+
+  setDrawings(drawings: DrawingObject[]) {
+    this.drawings = drawings
+    this.chart.setDrawings(drawings)
+  }
+
+  clear() {
+    this.pendingAnchors = []
+    this.removePreview()
+    this.dragState = null
+    this.setSelected(null)
+  }
+
+  getSelectedDrawing(): DrawingObject | null {
+    if (!this.selectedDrawingId) return null
+    return this.drawings.find((d) => d.id === this.selectedDrawingId) ?? null
+  }
+
+  updateDrawingStyle(drawingId: string, style: Partial<DrawingStyle>): void {
+    this.drawings = this.drawings.map((d) =>
+      d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d
+    )
+    this.chart.setDrawings(this.drawings)
+  }
+
+  removeDrawing(drawingId: string): void {
+    this.drawings = this.drawings.filter((d) => d.id !== drawingId)
+    if (this.selectedDrawingId === drawingId) {
+      this.setSelected(null)
+    }
+    this.chart.setDrawings(this.drawings)
+  }
+
+  /**
+   * 处理指针移动事件
+   * @returns 是否处理了事件（阻止冒泡）
+   */
+  onPointerMove(e: PointerEvent, container: HTMLElement): boolean {
+    // 拖拽已有图元
+    if (this.dragState) {
+      return this.handleDragMove(e, container)
+    }
+
+    // 创建预览
+    if (this.activeTool !== 'cursor') {
+      return this.handlePreviewMove(e, container)
+    }
+
+    return false
+  }
+
+  /**
+   * 处理指针按下事件
+   * @returns 是否处理了事件（阻止冒泡）
+   */
+  onPointerDown(e: PointerEvent, container: HTMLElement): boolean {
+    // 光标模式：命中检测已有图元
+    if (this.activeTool === 'cursor') {
+      return this.handleCursorDown(e, container)
+    }
+
+    const anchor = this.resolveAnchorFromPointer(e, container)
+    if (!anchor) return false
+
+    // 单锚点工具：点击一次立即创建
+    if (DrawingInteractionController.SINGLE_ANCHOR_TOOLS.includes(this.activeTool)) {
+      this.createSingleAnchorDrawing(anchor)
+      return true
+    }
+
+    // 双/三锚点工具：累积锚点
+    const isDouble = DrawingInteractionController.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool)
+    const isTriple = DrawingInteractionController.TRIPLE_ANCHOR_TOOLS.includes(this.activeTool)
+    if (!isDouble && !isTriple) return false
+
+    this.pendingAnchors.push(anchor)
+    const requiredAnchors = isDouble ? 2 : 3
+
+    if (this.pendingAnchors.length >= requiredAnchors) {
+      this.createMultiAnchorDrawing(this.pendingAnchors)
+      this.pendingAnchors = []
+    }
+    return true
+  }
+
+  /**
+   * 处理指针释放事件
+   * @returns 是否处理了事件（阻止冒泡）
+   */
+  onPointerUp(_e: PointerEvent, _container: HTMLElement): boolean {
+    if (!this.dragState) return false
+    this.dragState = null
+    return true
+  }
+
+  // ============ 光标模式：命中检测与拖拽 ============
+
+  private handleCursorDown(e: PointerEvent, container: HTMLElement): boolean {
+    const rect = container.getBoundingClientRect()
+    const mouseX = e.clientX - rect.left
+    const mouseY = e.clientY - rect.top
+
+    const hit = this.hitTest(mouseX, mouseY)
+    if (!hit) {
+      this.setSelected(null)
+      return false
+    }
+
+    this.setSelected(hit.drawing)
+
+    this.dragState = {
+      drawingId: hit.drawing.id,
+      anchorIndex: 'anchorIndex' in hit ? hit.anchorIndex : undefined,
+      snapshot: hit.drawing.anchors.map((a) => ({ ...a })),
+      startMouse: { x: mouseX, y: mouseY },
+    }
+    return true
+  }
+
+  private handleDragMove(e: PointerEvent, container: HTMLElement): boolean {
+    if (!this.dragState) return false
+
+    const drawing = this.drawings.find((d) => d.id === this.dragState!.drawingId)
+    if (!drawing) {
+      this.dragState = null
+      return false
+    }
+
+    const newAnchor = this.resolveAnchorFromPointer(e, container)
+
+    if (this.dragState.anchorIndex !== undefined) {
+      // 拖拽单个锚点
+      if (newAnchor) {
+        const idx = this.dragState.anchorIndex
+        drawing.anchors[idx] = {
+          ...drawing.anchors[idx]!,
+          index: newAnchor.index,
+          time: newAnchor.time,
+          price: newAnchor.price,
+        }
+        // flat-line：第三个锚点的 index/time 始终跟随第二个锚点
+        if (drawing.kind === 'flat-line' && idx === 1 && drawing.anchors.length >= 3) {
+          drawing.anchors[2] = {
+            ...drawing.anchors[2]!,
+            index: newAnchor.index,
+            time: newAnchor.time,
+          }
+        }
+      }
+    } else {
+      // 拖拽整条线：基于鼠标偏移量移动所有锚点
+      const rect = container.getBoundingClientRect()
+      const mouseX = e.clientX - rect.left
+      const mouseY = e.clientY - rect.top
+      const dx = mouseX - this.dragState.startMouse.x
+      const dy = mouseY - this.dragState.startMouse.y
+
+      for (let i = 0; i < drawing.anchors.length; i++) {
+        const snap = this.dragState.snapshot[i]!
+        const snapScreen = this.anchorToScreen(snap)
+        if (!snapScreen) continue
+
+        const targetX = snapScreen.x + dx
+        const targetY = snapScreen.y + dy
+        const newFromScreen = this.screenToAnchor(targetX, targetY)
+        if (newFromScreen) {
+          drawing.anchors[i] = {
+            ...drawing.anchors[i]!,
+            index: newFromScreen.index,
+            time: newFromScreen.time,
+            price: newFromScreen.price,
+          }
+        }
+      }
+    }
+
+    this.chart.setDrawings([...this.drawings])
+    return true
+  }
+
+  // ============ 预览模式 ============
+
+  private handlePreviewMove(e: PointerEvent, container: HTMLElement): boolean {
+    const anchor = this.resolveAnchorFromPointer(e, container)
+    if (!anchor) {
+      this.removePreview()
+      return false
+    }
+
+    const isSingle = DrawingInteractionController.SINGLE_ANCHOR_TOOLS.includes(this.activeTool)
+    const isDouble = DrawingInteractionController.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool)
+    const isTriple = DrawingInteractionController.TRIPLE_ANCHOR_TOOLS.includes(this.activeTool)
+    if (!isSingle && !isDouble && !isTriple) return false
+
+    let preview: DrawingObject
+
+    if (isSingle) {
+      preview = {
+        id: this.previewDrawingId,
+        kind: this.getDrawingKind(this.activeTool),
+        paneId: 'main',
+        visible: true,
+        anchors: [{ id: `${this.previewDrawingId}-a`, index: anchor.index, time: anchor.time, price: anchor.price }],
+        params: {},
+        style: {
+          stroke: '#2962ff',
+          strokeWidth: 1,
+          strokeStyle: 'dashed',
+        },
+      }
+    } else if (isDouble && this.pendingAnchors.length >= 1) {
+      preview = {
+        id: this.previewDrawingId,
+        kind: this.getDrawingKind(this.activeTool),
+        paneId: 'main',
+        visible: true,
+        anchors: [
+          { id: `${this.previewDrawingId}-a`, index: this.pendingAnchors[0]!.index, time: this.pendingAnchors[0]!.time, price: this.pendingAnchors[0]!.price },
+          { id: `${this.previewDrawingId}-b`, index: anchor.index, time: anchor.time, price: anchor.price },
+        ],
+        params: this.activeTool === 'regression-channel' ? { sigma: 2 } : {},
+        style: {
+          stroke: '#2962ff',
+          strokeWidth: 1,
+          strokeStyle: 'dashed',
+          ...(this.activeTool === 'regression-channel' ? { fillOpacity: 0.1 } : {}),
+        },
+      }
+    } else if (isTriple) {
+      if (this.pendingAnchors.length === 0) return false
+
+      if (this.pendingAnchors.length === 1) {
+        // 修复：用 trend-line 渲染线段预览（2 个锚点），三锚点工具的 definition 需要 3 个锚点才能渲染
+        preview = {
+          id: this.previewDrawingId,
+          kind: 'trend-line',
+          paneId: 'main',
+          visible: true,
+          anchors: [
+            { id: `${this.previewDrawingId}-a`, index: this.pendingAnchors[0]!.index, time: this.pendingAnchors[0]!.time, price: this.pendingAnchors[0]!.price },
+            { id: `${this.previewDrawingId}-b`, index: anchor.index, time: anchor.time, price: anchor.price },
+          ],
+          params: {},
+          style: {
+            stroke: '#2962ff',
+            strokeWidth: 1,
+            strokeStyle: 'dashed',
+          },
+        }
+      } else {
+        const thirdAnchor = this.activeTool === 'flat-line'
+          ? {
+              id: `${this.previewDrawingId}-c`,
+              index: this.pendingAnchors[1]!.index,
+              time: this.pendingAnchors[1]!.time,
+              price: anchor.price,
+            }
+          : {
+              id: `${this.previewDrawingId}-c`,
+              index: anchor.index,
+              time: anchor.time,
+              price: anchor.price,
+            }
+
+        preview = {
+          id: this.previewDrawingId,
+          kind: this.getDrawingKind(this.activeTool),
+          paneId: 'main',
+          visible: true,
+          anchors: [
+            { id: `${this.previewDrawingId}-a`, index: this.pendingAnchors[0]!.index, time: this.pendingAnchors[0]!.time, price: this.pendingAnchors[0]!.price },
+            { id: `${this.previewDrawingId}-b`, index: this.pendingAnchors[1]!.index, time: this.pendingAnchors[1]!.time, price: this.pendingAnchors[1]!.price },
+            thirdAnchor,
+          ],
+          params: {},
+          style: {
+            stroke: '#2962ff',
+            strokeWidth: 1,
+            strokeStyle: 'dashed',
+            fillOpacity: 0.1,
+          },
+        }
+      }
+    } else {
+      return false
+    }
+
+    this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
+    this.drawings = [...this.drawings, preview]
+    this.chart.setDrawings(this.drawings)
+    return true
+  }
+
+  // ============ 命中检测 ============
+
+  private hitTest(mouseX: number, mouseY: number): HitResult | null {
+    const drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId && d.visible)
+    const regressionGeometryCache = new Map<string, RegressionChannelGeometry | null>()
+
+    // 锚点优先
+    for (const drawing of drawings) {
+      // regression-channel：回归线端点也是可拖拽区域
+      if (drawing.kind === 'regression-channel' && drawing.anchors.length >= 2) {
+        const hit = this.hitTestRegressionEndpoints(drawing, mouseX, mouseY, regressionGeometryCache)
+        if (hit) return hit
+      }
+
+      for (let i = 0; i < drawing.anchors.length; i++) {
+        const screen = this.anchorToScreen(drawing.anchors[i]!)
+        if (!screen) continue
+        const dist = Math.hypot(mouseX - screen.x, mouseY - screen.y)
+        if (dist <= ANCHOR_HIT_RADIUS) {
+          return { drawing, anchorIndex: i }
+        }
+      }
+    }
+
+    // 线条其次
+    for (const drawing of drawings) {
+      const segments = this.getDrawingLineSegments(drawing, regressionGeometryCache)
+      for (const seg of segments) {
+        const dist = pointToSegmentDist(mouseX, mouseY, seg.a, seg.b)
+        if (dist <= LINE_HIT_RADIUS) {
+          return { drawing }
+        }
+      }
+    }
+
+    return null
+  }
+
+  private getDrawingLineSegments(
+    drawing: DrawingObject,
+    regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
+  ): LineSegment[] {
+    const viewport = this.chart.getViewport()
+    if (!viewport) return []
+
+    if (drawing.kind === 'regression-channel') {
+      return this.getRegressionChannelGeometry(drawing, regressionGeometryCache)?.segments ?? []
+    }
+
+    // 单锚点图元：根据 kind 构造屏幕线段
+    if (drawing.anchors.length === 1) {
+      const screen = this.anchorToScreen(drawing.anchors[0]!)
+      if (!screen) return []
+
+      const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
+      const pane = paneRenderer?.getPane()
+      if (!pane) return []
+
+      const right = viewport.plotWidth
+      const bottom = pane.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 []
+      }
+    }
+
+    // 多锚点图元：按 kind 特殊处理
+    const points = drawing.anchors.map((a) => this.anchorToScreen(a)).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 = this.getExtendMode(drawing)
+      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 })
+          segments.push({ 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 })
+          segments.push({ 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
+  }
+
+
+  /**
+   * regression-channel 专用：回归线端点也是可拖拽的锚点区域
+   * 回归线端点可能远离存储的锚点，需要额外检测
+   */
+  private hitTestRegressionEndpoints(
+    drawing: DrawingObject,
+    mouseX: number,
+    mouseY: number,
+    regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
+  ): { drawing: DrawingObject; anchorIndex: number } | null {
+    const geometry = this.getRegressionChannelGeometry(drawing, regressionGeometryCache)
+    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
+  }
+
+
+  private getRegressionChannelGeometry(
+    drawing: DrawingObject,
+    regressionGeometryCache?: Map<string, RegressionChannelGeometry | null>,
+  ): RegressionChannelGeometry | null {
+    const cached = regressionGeometryCache?.get(drawing.id)
+    if (cached !== undefined) return cached
+
+    const data = this.chart.getData()
+    if (data.length === 0 || drawing.anchors.length < 2) {
+      regressionGeometryCache?.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) {
+      regressionGeometryCache?.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 = this.anchorToScreen({ id: '', index: firstIndex, price: firstValue })
+    const middleEnd = this.anchorToScreen({ id: '', index: secondIndex, price: lastValue })
+    const upperStart = this.anchorToScreen({ id: '', index: firstIndex, price: firstValue + offset })
+    const upperEnd = this.anchorToScreen({ id: '', index: secondIndex, price: lastValue + offset })
+    const lowerStart = this.anchorToScreen({ id: '', index: firstIndex, price: firstValue - offset })
+    const lowerEnd = this.anchorToScreen({ id: '', index: secondIndex, price: lastValue - offset })
+
+    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 = { segments, endpoints }
+    regressionGeometryCache?.set(drawing.id, geometry)
+    return geometry
+  }
+
+  private getExtendMode(drawing: DrawingObject): 'none' | 'left' | 'right' | 'both' {
+    switch (drawing.kind) {
+      case 'ray':
+        return 'right'
+      case 'extended-line':
+        return 'both'
+      default:
+        return 'none'
+    }
+  }
+
+  // ============ 坐标转换 ============
+
+  private anchorToScreen(anchor: DrawingAnchor): { x: number; y: number } | null {
+    const viewport = this.chart.getViewport()
+    if (!viewport) return null
+
+    const opt = this.chart.getOption()
+    const dpr = this.chart.getCurrentDpr()
+    const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr)
+    if (!Number.isFinite(anchor.index)) return null
+
+    const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft
+
+    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
+    const pane = paneRenderer?.getPane()
+    if (!pane) return null
+
+    const y = pane.yAxis.priceToY(anchor.price)
+    return { x, y }
+  }
+
+  private screenToAnchor(
+    screenX: number,
+    screenY: number
+  ): DrawingAnchorInput | null {
+    const data = this.chart.getData()
+    const viewport = this.chart.getViewport()
+    if (!viewport || data.length === 0) return null
+
+    const logicalIndex = this.chart.getLogicalIndexAtX(screenX)
+    if (logicalIndex === null) return null
+
+    const paneRenderer = this.chart.getPaneRenderers().find((item) => item.getPane().id === 'main')
+    const pane = paneRenderer?.getPane()
+    if (!pane) return null
+
+    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+
+    return {
+      index: logicalIndex,
+      time: timestamp ?? undefined,
+      price: pane.yAxis.yToPrice(screenY - pane.top),
+    }
+  }
+
+  // ============ 工具方法 ============
+
+  private setSelected(drawing: DrawingObject | null) {
+    const newId = drawing?.id ?? null
+    if (this.selectedDrawingId === newId) return
+    this.selectedDrawingId = newId
+    this.chart.setSelectedDrawingId(newId)
+    this.callbacks.onDrawingSelected?.(drawing)
+  }
+
+  private removePreview() {
+    if (!this.drawings.some((d) => d.id === this.previewDrawingId)) return
+    this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
+    this.chart.setDrawings(this.drawings)
+  }
+
+  private resolveAnchorFromPointer(
+    e: PointerEvent,
+    container: HTMLElement
+  ): DrawingAnchorInput | null {
+    const data = this.chart.getData()
+    const viewport = this.chart.getViewport()
+    if (!viewport || data.length === 0) return null
+
+    const rect = container.getBoundingClientRect()
+    const mouseX = e.clientX - rect.left
+    const mouseY = e.clientY - rect.top
+    if (mouseX < 0 || mouseY < 0 || mouseX > viewport.plotWidth || mouseY > viewport.plotHeight) {
+      return null
+    }
+
+    const paneRenderer = this.chart.getPaneRenderers().find((item) => {
+      const pane = item.getPane()
+      return pane.id === 'main' && mouseY >= pane.top && mouseY <= pane.top + pane.height
+    })
+    const pane = paneRenderer?.getPane()
+    if (!pane) return null
+
+    const logicalIndex = this.chart.getLogicalIndexAtX(mouseX)
+    if (logicalIndex === null) return null
+    const timestamp = this.chart.getTimestampAtLogicalIndex(logicalIndex) ?? undefined
+
+    return {
+      index: logicalIndex,
+      time: timestamp ?? undefined,
+      price: pane.yAxis.yToPrice(mouseY - pane.top),
+    }
+  }
+
+  private createSingleAnchorDrawing(anchor: DrawingAnchorInput) {
+    this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
+
+    const drawing: DrawingObject = {
+      id: `drawing-${Date.now()}`,
+      kind: this.getDrawingKind(this.activeTool),
+      paneId: 'main',
+      visible: true,
+      anchors: [{ id: `${Date.now()}-a`, index: anchor.index, time: anchor.time, price: anchor.price }],
+      params: {},
+      style: {
+        stroke: '#2962ff',
+        strokeWidth: 1,
+        strokeStyle: 'solid',
+      },
+    }
+
+    this.drawings = [...this.drawings, drawing]
+    this.chart.setDrawings(this.drawings)
+    this.callbacks.onDrawingCreated?.(drawing)
+    this.activeTool = 'cursor'
+    this.callbacks.onToolChange?.('cursor')
+  }
+
+  private createMultiAnchorDrawing(anchors: DrawingAnchorInput[]) {
+    this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId)
+
+    const kind = this.getDrawingKind(this.activeTool)
+    const params: Record<string, unknown> = kind === 'regression-channel' ? { sigma: 2 } : {}
+
+    const normalizedAnchors = kind === 'flat-line' && anchors.length >= 3
+      ? [
+          anchors[0]!,
+          anchors[1]!,
+          {
+            index: anchors[1]!.index,
+            time: anchors[1]!.time,
+            price: anchors[2]!.price,
+          },
+        ]
+      : anchors
+
+    const isChannel = ['parallel-channel', 'regression-channel', 'flat-line', 'disjoint-channel'].includes(kind)
+
+    const drawing: DrawingObject = {
+      id: `drawing-${Date.now()}`,
+      kind,
+      paneId: 'main',
+      visible: true,
+      anchors: normalizedAnchors.map((a, i) => ({
+        id: `${Date.now()}-${String.fromCharCode(97 + i)}`,
+        index: a.index,
+        time: a.time,
+        price: a.price,
+      })),
+      params,
+      style: {
+        stroke: '#2962ff',
+        strokeWidth: 1,
+        strokeStyle: 'solid',
+        ...(isChannel ? { fillOpacity: 0.1 } : {}),
+      },
+    }
+
+    this.drawings = [...this.drawings, drawing]
+    this.chart.setDrawings(this.drawings)
+    this.callbacks.onDrawingCreated?.(drawing)
+    this.activeTool = 'cursor'
+    this.callbacks.onToolChange?.('cursor')
+  }
+
+  private getDrawingKind(toolId: DrawingToolId): DrawingKind {
+    switch (toolId) {
+      case 'cursor':
+        throw new Error('cursor is not a drawing kind')
+      case 'h-line':
+        return 'horizontal-line'
+      case 'h-ray':
+        return 'horizontal-ray'
+      case 'v-line':
+        return 'vertical-line'
+      case 'crosshair-line':
+        return 'cross-line'
+      default:
+        return toolId
+    }
+  }
+}
+
+function pointToSegmentDist(
+  px: number,
+  py: number,
+  a: { x: number; y: number },
+  b: { x: number; y: number }
+): number {
+  const dx = b.x - a.x
+  const dy = b.y - a.y
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) return Math.hypot(px - a.x, py - a.y)
+
+  let t = ((px - a.x) * dx + (py - a.y) * dy) / lenSq
+  t = Math.max(0, Math.min(1, t))
+  return Math.hypot(px - (a.x + t * dx), py - (a.y + t * dy))
+}