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

package/dist/engine/drawing/interaction.js

@@ -1,615 +1,203 @@
-import { getPhysicalKLineConfig } from '../utils/klineConfig';
-import { computeLinearRegression } from './linearRegression';
-const ANCHOR_HIT_RADIUS = 8;
-const LINE_HIT_RADIUS = 6;
+import { DrawingState } from './DrawingState';
+import { AnchorCollector } from './AnchorCollector';
+import { PreviewRenderer } from './PreviewRenderer';
+import { HitTester } from './HitTester';
+import { DragHandler } from './DragHandler';
+import { resolveAnchorFromPointer } from './coordinateUtils';
+import { getAnchorCountForTool, getDrawingKind, CHANNEL_KINDS } from './toolConfig';
 /**
- * 绘图交互控制器
- * 封装绘图工具的交互逻辑，与 Vue 组件解耦
+ * 绘图交互控制器 v2 — 精简事件路由，组合子模块。
+ *
+ * ┌─────────────────────────────────────┐
+ * │ DrawingInteractionController        │
+ * │  ├─ DrawingState     (图元 CRUD)   │
+ * │  ├─ AnchorCollector  (锚点累积)    │
+ * │  ├─ PreviewRenderer  (预览构建)    │
+ * │  ├─ HitTester        (命中检测)    │
+ * │  └─ DragHandler      (拖拽管理)    │
+ * └─────────────────────────────────────┘
  */
 export class DrawingInteractionController {
-    adapter;
     activeTool = 'cursor';
-    pendingAnchors = [];
-    drawings = [];
+    adapter;
     callbacks = {};
-    previewDrawingId = '__preview__';
-    dragState = null;
-    selectedDrawingId = null;
-    // 单锚点工具列表
-    static SINGLE_ANCHOR_TOOLS = [
-        'h-line',
-        'h-ray',
-        'v-line',
-        'crosshair-line',
-    ];
-    // 双锚点工具列表
-    static DOUBLE_ANCHOR_TOOLS = [
-        'trend-line',
-        'ray',
-        'info-line',
-        'regression-channel',
-    ];
-    // 三锚点工具列表
-    static TRIPLE_ANCHOR_TOOLS = [
-        'parallel-channel',
-        'flat-line',
-        'disjoint-channel',
-    ];
+    drawingState;
+    anchorCollector;
+    previewRenderer;
+    hitTester;
+    dragHandler;
     constructor(adapter) {
         this.adapter = adapter;
-    }
+        this.drawingState = new DrawingState(adapter);
+        this.anchorCollector = new AnchorCollector();
+        this.previewRenderer = new PreviewRenderer();
+        this.hitTester = new HitTester();
+        this.dragHandler = new DragHandler();
+    }
+    // ============ 配置 ============
+    /** 注册回调（创建/选中/工具切换事件通知） */
     setCallbacks(callbacks) {
         this.callbacks = callbacks;
     }
+    // ============ 工具状态 ============
+    /** 返回当前激活的绘图工具 ID */
     getActiveTool() {
         return this.activeTool;
     }
+    /**
+     * 切换绘图工具。
+     * 切换时自动清空锚点累积、移除预览、结束拖拽、清除选中，并通知外部。
+     */
     setTool(toolId) {
         this.activeTool = toolId;
-        this.pendingAnchors = [];
-        this.removePreview();
-        this.dragState = null;
+        this.anchorCollector.reset();
+        this.drawingState.removePreview();
+        this.dragHandler.endDrag();
         this.setSelected(null);
         this.callbacks.onToolChange?.(toolId);
     }
+    // ============ 图元 CRUD（委托 DrawingState） ============
+    /** 返回所有图元（含预览） */
     getDrawings() {
-        return this.drawings;
+        return this.drawingState.getAll();
     }
+    /** 整体替换图元列表 */
     setDrawings(drawings) {
-        this.drawings = drawings;
-        this.adapter.setDrawings(drawings);
+        this.drawingState.setDrawings(drawings);
     }
+    /** 清空锚点累积、预览、拖拽状态及所有图元 */
     clear() {
-        this.pendingAnchors = [];
-        this.removePreview();
-        this.dragState = null;
-        this.setSelected(null);
-    }
-    getSelectedDrawing() {
-        if (!this.selectedDrawingId)
-            return null;
-        return this.drawings.find((d) => d.id === this.selectedDrawingId) ?? null;
+        this.anchorCollector.reset();
+        this.drawingState.removePreview();
+        this.dragHandler.endDrag();
+        this.drawingState.clear();
     }
+    /** 更新指定图元的样式（合并） */
     updateDrawingStyle(drawingId, style) {
-        this.drawings = this.drawings.map((d) => d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d);
-        this.adapter.setDrawings(this.drawings);
+        this.drawingState.updateDrawingStyle(drawingId, style);
     }
+    /** 删除指定图元 */
     removeDrawing(drawingId) {
-        this.drawings = this.drawings.filter((d) => d.id !== drawingId);
-        if (this.selectedDrawingId === drawingId) {
-            this.setSelected(null);
-        }
-        this.adapter.setDrawings(this.drawings);
+        this.drawingState.removeDrawing(drawingId);
+    }
+    // ============ 选中状态 ============
+    /** 返回当前选中的图元 */
+    getSelectedDrawing() {
+        return this.drawingState.getSelected();
     }
+    // ============ 事件处理 ============
     /**
-     * 处理指针移动事件
-     * @returns 是否处理了事件（阻止冒泡）
+     * 指针移动事件入口。
+     * 拖拽中 → 委托 DragHandler 更新锚点；绘图模式 → 构建预览图元。
+     * @returns true 表示事件已消费，需要重绘
      */
     onPointerMove(e, container) {
-        // 拖拽已有图元
-        if (this.dragState) {
-            return this.handleDragMove(e, container);
+        // 1) 正在拖拽
+        if (this.dragHandler.isDragging()) {
+            const drawing = this.drawingState.getById(this.dragHandler.getDraggingDrawingId() ?? '');
+            if (!drawing) {
+                this.dragHandler.endDrag();
+                return false;
+            }
+            const updated = this.dragHandler.handleDragMove(drawing, e, container, this.adapter);
+            if (!updated)
+                return false;
+            this.drawingState.addOrUpdate(updated);
+            return true;
         }
-        // 创建预览
+        // 2) 绘图工具预览
         if (this.activeTool !== 'cursor') {
-            return this.handlePreviewMove(e, container);
+            const anchor = resolveAnchorFromPointer(e, container, this.adapter);
+            if (!anchor) {
+                this.drawingState.removePreview();
+                return false;
+            }
+            const preview = this.previewRenderer.buildPreview(this.activeTool, this.anchorCollector.pendingAnchors, anchor);
+            if (!preview) {
+                this.drawingState.removePreview();
+                return false;
+            }
+            this.drawingState.setPreview(preview);
+            return true;
         }
         return false;
     }
     /**
-     * 处理指针按下事件
-     * @returns 是否处理了事件（阻止冒泡）
+     * 指针按下事件入口。
+     * 光标模式 → 命中检测 + 选中 + 拖拽开始；绘图模式 → 创建或累积锚点。
+     * @returns true 表示事件已消费
      */
     onPointerDown(e, container) {
-        // 光标模式：命中检测已有图元
+        // 光标模式：命中检测 → 选中 → 开始拖拽
         if (this.activeTool === 'cursor') {
             return this.handleCursorDown(e, container);
         }
-        const anchor = this.resolveAnchorFromPointer(e, container);
+        // 绘图模式
+        const anchor = resolveAnchorFromPointer(e, container, this.adapter);
         if (!anchor)
             return false;
-        // 单锚点工具：点击一次立即创建
-        if (DrawingInteractionController.SINGLE_ANCHOR_TOOLS.includes(this.activeTool)) {
+        const anchorCount = getAnchorCountForTool(this.activeTool);
+        // 单锚点工具：点击即创建
+        if (anchorCount === 1) {
             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 = [];
+        // 多锚点工具：累积
+        if (anchorCount === 2 || anchorCount === 3) {
+            const result = this.anchorCollector.addAnchor(anchor, this.activeTool);
+            if (result) {
+                this.createMultiAnchorDrawing(result);
+            }
+            return true;
         }
-        return true;
+        return false;
     }
     /**
-     * 处理指针释放事件
-     * @returns 是否处理了事件（阻止冒泡）
+     * 指针抬起事件入口。结束拖拽。
+     * @returns true 表示事件已消费
      */
     onPointerUp(_e, _container) {
-        if (!this.dragState)
+        if (!this.dragHandler.isDragging())
             return false;
-        this.dragState = null;
+        this.dragHandler.endDrag();
         return true;
     }
-    // ============ 光标模式：命中检测与拖拽 ============
+    // ============ 私有方法 ============
+    /** 光标模式下指针按下：命中检测 → 选中 → 开始拖拽 */
     handleCursorDown(e, container) {
         const rect = container.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
-        const hit = this.hitTest(mouseX, mouseY);
+        const hit = this.hitTester.hitTest(mouseX, mouseY, this.drawingState.getNonPreview(), this.adapter);
         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 },
-        };
+        this.dragHandler.startDrag(hit.drawing, 'anchorIndex' in hit ? hit.anchorIndex : undefined, mouseX, mouseY);
         return true;
     }
-    handleDragMove(e, container) {
-        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.adapter.setDrawings([...this.drawings]);
-        return true;
-    }
-    // ============ 预览模式 ============
-    handlePreviewMove(e, container) {
-        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;
-        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.adapter.setDrawings(this.drawings);
-        return true;
-    }
-    // ============ 命中检测 ============
-    hitTest(mouseX, mouseY) {
-        const drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId && d.visible);
-        const regressionGeometryCache = new Map();
-        // 锚点优先
-        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;
-    }
-    getDrawingLineSegments(drawing, regressionGeometryCache) {
-        const viewport = this.adapter.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 paneInfo = this.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 [];
-            }
-        }
-        // 多锚点图元：按 kind 特殊处理
-        const points = drawing.anchors.map((a) => this.anchorToScreen(a)).filter(Boolean);
-        if (points.length < 2)
-            return [];
-        const segments = [];
-        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;
-                    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;
-                    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;
-                    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 专用：回归线端点也是可拖拽的锚点区域
-     * 回归线端点可能远离存储的锚点，需要额外检测
-     */
-    hitTestRegressionEndpoints(drawing, mouseX, mouseY, regressionGeometryCache) {
-        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;
-    }
-    getRegressionChannelGeometry(drawing, regressionGeometryCache) {
-        const cached = regressionGeometryCache?.get(drawing.id);
-        if (cached !== undefined)
-            return cached;
-        const data = this.adapter.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) => item.close));
-        if (!regression) {
-            regressionGeometryCache?.set(drawing.id, null);
-            return null;
-        }
-        const sigma = drawing.params?.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 = [];
-        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 = [];
-        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;
-    }
-    getExtendMode(drawing) {
-        switch (drawing.kind) {
-            case 'ray':
-                return 'right';
-            case 'extended-line':
-                return 'both';
-            default:
-                return 'none';
-        }
-    }
-    // ============ 坐标转换 ============
-    anchorToScreen(anchor) {
-        const viewport = this.adapter.getViewport();
-        if (!viewport)
-            return null;
-        const { kWidth, kGap } = this.adapter.getKWidthKGap();
-        const dpr = this.adapter.getCurrentDpr();
-        const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr);
-        if (!Number.isFinite(anchor.index))
-            return null;
-        const x = (startXPx + anchor.index * unitPx + (unitPx - 1) / 2) / dpr - viewport.scrollLeft;
-        const y = this.adapter.priceToY('main', anchor.price);
-        return { x, y };
-    }
-    screenToAnchor(screenX, screenY) {
-        const data = this.adapter.getData();
-        const viewport = this.adapter.getViewport();
-        if (!viewport || data.length === 0)
-            return null;
-        const logicalIndex = this.adapter.getLogicalIndexAtX(screenX);
-        if (logicalIndex === null)
-            return null;
-        const paneInfo = this.adapter.getPaneInfo('main');
-        if (!paneInfo)
-            return null;
-        const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined;
-        return {
-            index: logicalIndex,
-            time: timestamp ?? undefined,
-            price: this.adapter.yToPrice('main', screenY - paneInfo.top),
-        };
-    }
-    // ============ 工具方法 ============
+    /** 设置选中图元并通知回调 */
     setSelected(drawing) {
-        const newId = drawing?.id ?? null;
-        if (this.selectedDrawingId === newId)
-            return;
-        this.selectedDrawingId = newId;
-        this.adapter.setSelectedDrawingId(newId);
+        this.drawingState.setSelected(drawing);
         this.callbacks.onDrawingSelected?.(drawing);
     }
-    removePreview() {
-        if (!this.drawings.some((d) => d.id === this.previewDrawingId))
-            return;
-        this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId);
-        this.adapter.setDrawings(this.drawings);
-    }
-    resolveAnchorFromPointer(e, container) {
-        const data = this.adapter.getData();
-        const viewport = this.adapter.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 paneInfo = this.adapter.getPaneInfo('main');
-        if (!paneInfo)
-            return null;
-        if (mouseY < paneInfo.top || mouseY > paneInfo.top + paneInfo.height)
-            return null;
-        const logicalIndex = this.adapter.getLogicalIndexAtX(mouseX);
-        if (logicalIndex === null)
-            return null;
-        const timestamp = this.adapter.getTimestampAtLogicalIndex(logicalIndex) ?? undefined;
-        return {
-            index: logicalIndex,
-            time: timestamp ?? undefined,
-            price: this.adapter.yToPrice('main', mouseY - paneInfo.top),
-        };
-    }
+    /** 单锚点工具：点击即创建图元，完成后切回光标模式 */
     createSingleAnchorDrawing(anchor) {
-        this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId);
+        this.drawingState.removePreview();
         const drawing = {
             id: `drawing-${Date.now()}`,
-            kind: this.getDrawingKind(this.activeTool),
+            kind: getDrawingKind(this.activeTool),
             paneId: 'main',
             visible: true,
-            anchors: [{ id: `${Date.now()}-a`, index: anchor.index, time: anchor.time, price: anchor.price }],
+            anchors: [
+                {
+                    id: `${Date.now()}-a`,
+                    index: anchor.index,
+                    time: anchor.time,
+                    price: anchor.price,
+                },
+            ],
             params: {},
             style: {
                 stroke: '#2962ff',
@@ -617,15 +205,15 @@ export class DrawingInteractionController {
                 strokeStyle: 'solid',
             },
         };
-        this.drawings = [...this.drawings, drawing];
-        this.adapter.setDrawings(this.drawings);
+        this.drawingState.addOrUpdate(drawing);
         this.callbacks.onDrawingCreated?.(drawing);
         this.activeTool = 'cursor';
         this.callbacks.onToolChange?.('cursor');
     }
+    /** 多锚点工具（2-3 锚点）：锚点累积满后创建图元，完成后切回光标模式 */
     createMultiAnchorDrawing(anchors) {
-        this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId);
-        const kind = this.getDrawingKind(this.activeTool);
+        this.drawingState.removePreview();
+        const kind = getDrawingKind(this.activeTool);
         const params = kind === 'regression-channel' ? { sigma: 2 } : {};
         const normalizedAnchors = kind === 'flat-line' && anchors.length >= 3
             ? [
@@ -638,7 +226,7 @@ export class DrawingInteractionController {
                 },
             ]
             : anchors;
-        const isChannel = ['parallel-channel', 'regression-channel', 'flat-line', 'disjoint-channel'].includes(kind);
+        const isChannel = CHANNEL_KINDS.includes(kind);
         const drawing = {
             id: `drawing-${Date.now()}`,
             kind,
@@ -658,37 +246,10 @@ export class DrawingInteractionController {
                 ...(isChannel ? { fillOpacity: 0.1 } : {}),
             },
         };
-        this.drawings = [...this.drawings, drawing];
-        this.adapter.setDrawings(this.drawings);
+        this.drawingState.addOrUpdate(drawing);
         this.callbacks.onDrawingCreated?.(drawing);
         this.activeTool = 'cursor';
         this.callbacks.onToolChange?.('cursor');
     }
-    getDrawingKind(toolId) {
-        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, py, a, b) {
-    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));
 }
 //# sourceMappingURL=interaction.js.map