@363045841yyt/klinechart-core 0.7.3

package/dist/engine/drawing/interaction.js

@@ -0,0 +1,702 @@
+import { getPhysicalKLineConfig } from '../utils/klineConfig';
+import { computeLinearRegression } from './index';
+const ANCHOR_HIT_RADIUS = 8;
+const LINE_HIT_RADIUS = 6;
+/**
+ * 绘图交互控制器
+ * 封装绘图工具的交互逻辑，与 Vue 组件解耦
+ */
+export class DrawingInteractionController {
+    chart;
+    activeTool = 'cursor';
+    pendingAnchors = [];
+    drawings = [];
+    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',
+    ];
+    constructor(chart) {
+        this.chart = chart;
+    }
+    setCallbacks(callbacks) {
+        this.callbacks = callbacks;
+    }
+    getActiveTool() {
+        return this.activeTool;
+    }
+    setTool(toolId) {
+        this.activeTool = toolId;
+        this.pendingAnchors = [];
+        this.removePreview();
+        this.dragState = null;
+        this.setSelected(null);
+        this.callbacks.onToolChange?.(toolId);
+    }
+    getDrawings() {
+        return this.drawings;
+    }
+    setDrawings(drawings) {
+        this.drawings = drawings;
+        this.chart.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;
+    }
+    updateDrawingStyle(drawingId, style) {
+        this.drawings = this.drawings.map((d) => d.id === drawingId ? { ...d, style: { ...d.style, ...style } } : d);
+        this.chart.setDrawings(this.drawings);
+    }
+    removeDrawing(drawingId) {
+        this.drawings = this.drawings.filter((d) => d.id !== drawingId);
+        if (this.selectedDrawingId === drawingId) {
+            this.setSelected(null);
+        }
+        this.chart.setDrawings(this.drawings);
+    }
+    /**
+     * 处理指针移动事件
+     * @returns 是否处理了事件（阻止冒泡）
+     */
+    onPointerMove(e, container) {
+        // 拖拽已有图元
+        if (this.dragState) {
+            return this.handleDragMove(e, container);
+        }
+        // 创建预览
+        if (this.activeTool !== 'cursor') {
+            return this.handlePreviewMove(e, container);
+        }
+        return false;
+    }
+    /**
+     * 处理指针按下事件
+     * @returns 是否处理了事件（阻止冒泡）
+     */
+    onPointerDown(e, container) {
+        // 光标模式：命中检测已有图元
+        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, _container) {
+        if (!this.dragState)
+            return false;
+        this.dragState = null;
+        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);
+        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;
+    }
+    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.chart.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.chart.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.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);
+        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.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) => 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.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 };
+    }
+    screenToAnchor(screenX, screenY) {
+        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),
+        };
+    }
+    // ============ 工具方法 ============
+    setSelected(drawing) {
+        const newId = drawing?.id ?? null;
+        if (this.selectedDrawingId === newId)
+            return;
+        this.selectedDrawingId = newId;
+        this.chart.setSelectedDrawingId(newId);
+        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.chart.setDrawings(this.drawings);
+    }
+    resolveAnchorFromPointer(e, container) {
+        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),
+        };
+    }
+    createSingleAnchorDrawing(anchor) {
+        this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId);
+        const drawing = {
+            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');
+    }
+    createMultiAnchorDrawing(anchors) {
+        this.drawings = this.drawings.filter((d) => d.id !== this.previewDrawingId);
+        const kind = this.getDrawingKind(this.activeTool);
+        const params = 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 = {
+            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');
+    }
+    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