@qfo/qfchart 0.8.0 → 0.8.1

package/src/plugins/MeasureTool/index.ts

@@ -0,0 +1 @@
+export { MeasureTool } from './MeasureTool';

package/src/plugins/ThreeDrivesPatternTool/ThreeDrivesPatternDrawingRenderer.ts

@@ -0,0 +1,106 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+// Points: 0=start, 1=drive1, 2=correction1, 3=drive2, 4=correction2, 5=drive3, 6=end
+const LABELS = ['0', 'D1', 'C1', 'D2', 'C2', 'D3', ''];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336', '#00bcd4', '#e91e63'];
+
+export class ThreeDrivesPatternDrawingRenderer implements DrawingRenderer {
+    type = 'three_drives_pattern';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const color = drawing.style?.color || '#3b82f6';
+        if (pixelPoints.length < 2) return;
+
+        const children: any[] = [];
+
+        // Fill drive regions
+        // Drive 1 zone (0,1,2)
+        if (pixelPoints.length >= 3) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(0, 3).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(33, 150, 243, 0.06)' } });
+        }
+        // Drive 2 zone (2,3,4)
+        if (pixelPoints.length >= 5) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(2, 5).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(76, 175, 80, 0.06)' } });
+        }
+        // Drive 3 zone (4,5,6)
+        if (pixelPoints.length >= 7) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(4, 7).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(0, 188, 212, 0.06)' } });
+        }
+
+        // Zigzag legs
+        for (let i = 0; i < pixelPoints.length - 1; i++) {
+            const [x1, y1] = pixelPoints[i];
+            const [x2, y2] = pixelPoints[i + 1];
+            children.push({
+                type: 'line', name: 'line',
+                shape: { x1, y1, x2, y2 },
+                style: { stroke: LEG_COLORS[i % LEG_COLORS.length], lineWidth: drawing.style?.lineWidth || 2 },
+            });
+        }
+
+        // Dashed lines connecting drives (1→3, 3→5) and corrections (2→4)
+        const connectors: [number, number][] = [[1, 3], [3, 5], [2, 4]];
+        for (const [from, to] of connectors) {
+            if (from < pixelPoints.length && to < pixelPoints.length) {
+                children.push({
+                    type: 'line',
+                    shape: { x1: pixelPoints[from][0], y1: pixelPoints[from][1], x2: pixelPoints[to][0], y2: pixelPoints[to][1] },
+                    style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                    silent: true,
+                });
+            }
+        }
+
+        // Ratios between drives
+        const pts = drawing.points;
+        // Drive2/Drive1
+        if (pts.length >= 4) {
+            const d1 = Math.abs(pts[1].value - pts[0].value);
+            const d2 = Math.abs(pts[3].value - pts[2].value);
+            if (d1 !== 0) {
+                const r = (d2 / d1).toFixed(3);
+                const mx = (pixelPoints[2][0] + pixelPoints[3][0]) / 2;
+                const my = (pixelPoints[2][1] + pixelPoints[3][1]) / 2;
+                children.push({ type: 'text', style: { text: `D2/D1: ${r}`, x: mx + 10, y: my, fill: '#4caf50', fontSize: 9 }, silent: true });
+            }
+        }
+        // Drive3/Drive2
+        if (pts.length >= 6) {
+            const d2 = Math.abs(pts[3].value - pts[2].value);
+            const d3 = Math.abs(pts[5].value - pts[4].value);
+            if (d2 !== 0) {
+                const r = (d3 / d2).toFixed(3);
+                const mx = (pixelPoints[4][0] + pixelPoints[5][0]) / 2;
+                const my = (pixelPoints[4][1] + pixelPoints[5][1]) / 2;
+                children.push({ type: 'text', style: { text: `D3/D2: ${r}`, x: mx + 10, y: my, fill: '#00bcd4', fontSize: 9 }, silent: true });
+            }
+        }
+        // Correction1/Drive1
+        if (pts.length >= 3) {
+            const d1 = Math.abs(pts[1].value - pts[0].value);
+            const c1 = Math.abs(pts[2].value - pts[1].value);
+            if (d1 !== 0) {
+                const r = (c1 / d1).toFixed(3);
+                const mx = (pixelPoints[1][0] + pixelPoints[2][0]) / 2;
+                const my = (pixelPoints[1][1] + pixelPoints[2][1]) / 2;
+                children.push({ type: 'text', style: { text: r, x: mx + 8, y: my, fill: '#ff9800', fontSize: 10 }, silent: true });
+            }
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            if (!LABELS[i]) continue;
+            const [px, py] = pixelPoints[i];
+            const isHigh = (i === 0 || py <= pixelPoints[i - 1][1]) && (i === pixelPoints.length - 1 || py <= pixelPoints[i + 1]?.[1]);
+            children.push({ type: 'text', style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 11, fontWeight: 'bold', align: 'center', verticalAlign: 'middle' }, silent: true });
+        }
+
+        // Control points
+        for (let i = 0; i < pixelPoints.length; i++) {
+            children.push({ type: 'circle', name: `point-${i}`, shape: { cx: pixelPoints[i][0], cy: pixelPoints[i][1], r: 4 }, style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 }, z: 100 });
+        }
+
+        return { type: 'group', children };
+    }
+}

package/src/plugins/ThreeDrivesPatternTool/ThreeDrivesPatternTool.ts

@@ -0,0 +1,98 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { ThreeDrivesPatternDrawingRenderer } from './ThreeDrivesPatternDrawingRenderer';
+
+const LABELS = ['0', 'D1', 'C1', 'D2', 'C2', 'D3', ''];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336', '#00bcd4', '#e91e63'];
+const TOTAL_POINTS = 7;
+
+export class ThreeDrivesPatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'three-drives-pattern-tool',
+            name: options.name || 'Three Drives',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="1,20 4,8 7,14 11,5 15,12 19,2 23,10"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new ThreeDrivesPatternDrawingRenderer()); }
+
+    protected onActivate(): void {
+        this.state = 'idle'; this.points = [];
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        const zr = this.context.getChart().getZr();
+        zr.on('click', this.onClick); zr.on('mousemove', this.onMouseMove);
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle'; this.points = []; this.removeGraphic();
+        const zr = this.context.getChart().getZr();
+        zr.off('click', this.onClick); zr.off('mousemove', this.onMouseMove);
+        zr.setCursorStyle('default');
+    }
+
+    private onClick = (params: any) => {
+        const pt = this.getPoint(params);
+        if (this.state === 'idle') {
+            this.state = 'drawing'; this.points = [pt, [...pt]]; this.initGraphic(); this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            this.points[this.points.length - 1] = pt;
+            if (this.points.length >= TOTAL_POINTS) {
+                this.state = 'finished'; this.updateGraphic(); this.saveDrawing(); this.removeGraphic(); this.context.disableTools();
+            } else { this.points.push([...pt]); this.updateGraphic(); }
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing' || this.points.length < 2) return;
+        this.points[this.points.length - 1] = this.getPoint(params); this.updateGraphic();
+    };
+
+    private initGraphic() { this.graphicGroup = new echarts.graphic.Group(); this.context.getChart().getZr().add(this.graphicGroup); }
+    private removeGraphic() { if (this.graphicGroup) { this.context.getChart().getZr().remove(this.graphicGroup); this.graphicGroup = null; } }
+
+    private updateGraphic() {
+        if (!this.graphicGroup) return;
+        this.graphicGroup.removeAll();
+        const pts = this.points;
+
+        // Fills
+        if (pts.length >= 3) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(0, 3) }, style: { fill: 'rgba(33,150,243,0.06)' }, silent: true }));
+        if (pts.length >= 5) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(2, 5) }, style: { fill: 'rgba(76,175,80,0.06)' }, silent: true }));
+        if (pts.length >= 7) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(4, 7) }, style: { fill: 'rgba(0,188,212,0.06)' }, silent: true }));
+
+        // Zigzag
+        for (let i = 0; i < pts.length - 1; i++) {
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[i][0], y1: pts[i][1], x2: pts[i + 1][0], y2: pts[i + 1][1] }, style: { stroke: LEG_COLORS[i % LEG_COLORS.length], lineWidth: 2 }, silent: true }));
+        }
+
+        // Dashed connectors
+        const conn: [number, number][] = [[1, 3], [3, 5], [2, 4]];
+        for (const [f, t] of conn) {
+            if (f < pts.length && t < pts.length) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[f][0], y1: pts[f][1], x2: pts[t][0], y2: pts[t][1] }, style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+            }
+        }
+
+        // Labels & circles
+        for (let i = 0; i < pts.length && i < LABELS.length; i++) {
+            const [px, py] = pts[i];
+            const isHigh = (i === 0 || py <= pts[i - 1][1]) && (i === pts.length - 1 || py <= pts[i + 1]?.[1]);
+            if (LABELS[i]) {
+                this.graphicGroup.add(new echarts.graphic.Text({ style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 11, fontWeight: 'bold', align: 'center', verticalAlign: 'middle' }, silent: true }));
+            }
+            this.graphicGroup.add(new echarts.graphic.Circle({ shape: { cx: px, cy: py, r: 4 }, style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1.5 }, z: 101, silent: true }));
+        }
+    }
+
+    private saveDrawing() {
+        const dataPoints = this.points.map((pt) => this.context.coordinateConversion.pixelToData({ x: pt[0], y: pt[1] }));
+        if (dataPoints.every((p) => p !== null)) {
+            this.context.addDrawing({ id: `3drives-${Date.now()}`, type: 'three_drives_pattern', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/ThreeDrivesPatternTool/index.ts

@@ -0,0 +1,2 @@
+export { ThreeDrivesPatternTool } from './ThreeDrivesPatternTool';
+export { ThreeDrivesPatternDrawingRenderer } from './ThreeDrivesPatternDrawingRenderer';

package/src/plugins/ToolGroup.ts

@@ -0,0 +1,211 @@
+import { ChartContext, Plugin, PluginConfig } from '../types';
+import { AbstractPlugin } from '../components/AbstractPlugin';
+
+export interface ToolGroupConfig extends Omit<PluginConfig, 'id'> {
+    id?: string;
+    name: string;
+    icon?: string;
+}
+
+export class ToolGroup extends AbstractPlugin {
+    private plugins: Plugin[] = [];
+    private activeSubPlugin: Plugin | null = null;
+    private menuElement: HTMLElement | null = null;
+    private buttonElement: HTMLElement | null = null;
+    private originalIcon: string = '';
+    private arrowSvg: string = '';
+
+    constructor(config: ToolGroupConfig) {
+        // Create a small right-facing chevron arrow to indicate a dropdown menu
+        const arrowSvg = `<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; right: -4px; top: 50%; transform: translateY(-50%); opacity: 0.6;"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+        
+        let enhancedIcon = '';
+        if (config.icon) {
+            enhancedIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    ${config.icon}
+                </div>
+                ${arrowSvg}
+            </div>`;
+        } else {
+            enhancedIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                <span>${config.name.substring(0, 2).toUpperCase()}</span>
+                ${arrowSvg}
+            </div>`;
+        }
+
+        super({
+            id: config.id || `group-${config.name.toLowerCase().replace(/\s+/g, '-')}`,
+            name: config.name,
+            icon: enhancedIcon
+        });
+        
+        this.originalIcon = enhancedIcon;
+        this.arrowSvg = arrowSvg;
+    }
+
+    public add(plugin: Plugin): void {
+        this.plugins.push(plugin);
+    }
+
+    protected onInit(): void {
+        this.plugins.forEach(p => p.init(this.context));
+    }
+
+    protected onActivate(): void {
+        this.showMenu();
+    }
+
+    protected onDeactivate(): void {
+        this.hideMenu();
+        if (this.activeSubPlugin) {
+            this.activeSubPlugin.deactivate?.();
+            this.activeSubPlugin = null;
+        }
+        
+        // Restore original icon
+        if (this.buttonElement) {
+            this.buttonElement.innerHTML = this.originalIcon;
+        }
+    }
+
+    protected onDestroy(): void {
+        this.hideMenu();
+        this.plugins.forEach(p => p.destroy?.());
+    }
+
+    private showMenu(): void {
+        this.buttonElement = document.getElementById(`qfchart-plugin-btn-${this.id}`);
+        if (!this.buttonElement) return;
+
+        if (this.menuElement) {
+            this.hideMenu();
+        }
+
+        this.menuElement = document.createElement('div');
+        Object.assign(this.menuElement.style, {
+            position: 'fixed',
+            backgroundColor: '#1e293b',
+            border: '1px solid #334155',
+            borderRadius: '6px',
+            padding: '4px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            zIndex: '10000',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3)',
+            minWidth: '150px'
+        });
+
+        this.plugins.forEach(plugin => {
+            const item = document.createElement('div');
+            Object.assign(item.style, {
+                display: 'flex',
+                alignItems: 'center',
+                padding: '8px 12px',
+                cursor: 'pointer',
+                color: '#cbd5e1',
+                borderRadius: '4px',
+                fontSize: '13px',
+                fontFamily: this.context.getOptions().fontFamily || 'sans-serif',
+                transition: 'background-color 0.2s'
+            });
+
+            item.addEventListener('mouseenter', () => {
+                item.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+            });
+            item.addEventListener('mouseleave', () => {
+                item.style.backgroundColor = 'transparent';
+            });
+
+            if (plugin.icon) {
+                const iconContainer = document.createElement('div');
+                iconContainer.innerHTML = plugin.icon;
+                Object.assign(iconContainer.style, {
+                    width: '20px',
+                    height: '20px',
+                    marginRight: '10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                });
+                const svg = iconContainer.querySelector('svg');
+                if (svg) {
+                    svg.style.width = '100%';
+                    svg.style.height = '100%';
+                }
+                item.appendChild(iconContainer);
+            }
+
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = plugin.name || plugin.id;
+            item.appendChild(nameSpan);
+
+            item.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.activateSubPlugin(plugin);
+            });
+
+            this.menuElement!.appendChild(item);
+        });
+
+        document.body.appendChild(this.menuElement);
+
+        const rect = this.buttonElement.getBoundingClientRect();
+        this.menuElement.style.top = `${rect.top}px`;
+        this.menuElement.style.left = `${rect.right + 5}px`;
+
+        // Delay attaching the outside click listener so it doesn't fire on the current click
+        setTimeout(() => {
+            document.addEventListener('click', this.handleOutsideClick);
+        }, 0);
+    }
+
+    private hideMenu(): void {
+        if (this.menuElement && this.menuElement.parentNode) {
+            this.menuElement.parentNode.removeChild(this.menuElement);
+        }
+        this.menuElement = null;
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+
+    private handleOutsideClick = (e: MouseEvent): void => {
+        if (this.menuElement && !this.menuElement.contains(e.target as Node)) {
+            this.hideMenu();
+            if (!this.activeSubPlugin) {
+                // If clicked outside and no sub-plugin is active, deactivate the group
+                this.buttonElement?.click();
+            }
+        }
+    };
+
+    private activateSubPlugin(plugin: Plugin): void {
+        this.hideMenu();
+        
+        if (this.activeSubPlugin) {
+            this.activeSubPlugin.deactivate?.();
+        }
+
+        this.activeSubPlugin = plugin;
+        this.activeSubPlugin.activate?.();
+
+        // Update the group's button icon to match the active plugin
+        if (this.buttonElement) {
+            let subIcon = '';
+            if (plugin.icon) {
+                subIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                        ${plugin.icon}
+                    </div>
+                    ${this.arrowSvg}
+                </div>`;
+            } else {
+                subIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <span>${(plugin.name || plugin.id).substring(0, 2).toUpperCase()}</span>
+                    ${this.arrowSvg}
+                </div>`;
+            }
+            this.buttonElement.innerHTML = subIcon;
+        }
+    }
+}

package/src/plugins/TrianglePatternTool/TrianglePatternDrawingRenderer.ts

@@ -0,0 +1,107 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['1', '2', '3', '4', '5'];
+
+export class TrianglePatternDrawingRenderer implements DrawingRenderer {
+    type = 'triangle_pattern';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const color = drawing.style?.color || '#3b82f6';
+        if (pixelPoints.length < 2) return;
+
+        const children: any[] = [];
+
+        // Fill the triangle polygon with all points
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: { points: pixelPoints.map(([x, y]) => [x, y]) },
+                style: { fill: 'rgba(156, 39, 176, 0.06)' },
+            });
+        }
+
+        // Upper trendline: connect odd-indexed points (0, 2, 4) — highs
+        const upperPts = pixelPoints.filter((_, i) => i % 2 === 0);
+        if (upperPts.length >= 2) {
+            for (let i = 0; i < upperPts.length - 1; i++) {
+                children.push({
+                    type: 'line', name: 'line',
+                    shape: { x1: upperPts[i][0], y1: upperPts[i][1], x2: upperPts[i + 1][0], y2: upperPts[i + 1][1] },
+                    style: { stroke: '#f44336', lineWidth: 2 },
+                });
+            }
+            // Extend upper trendline
+            if (upperPts.length >= 2) {
+                const last = upperPts[upperPts.length - 1];
+                const prev = upperPts[upperPts.length - 2];
+                const dx = last[0] - prev[0];
+                const dy = last[1] - prev[1];
+                if (dx !== 0) {
+                    const extendX = last[0] + dx * 0.5;
+                    const extendY = last[1] + dy * 0.5;
+                    children.push({
+                        type: 'line',
+                        shape: { x1: last[0], y1: last[1], x2: extendX, y2: extendY },
+                        style: { stroke: '#f44336', lineWidth: 1, lineDash: [4, 4] },
+                        silent: true,
+                    });
+                }
+            }
+        }
+
+        // Lower trendline: connect even-indexed points (1, 3) — lows
+        const lowerPts = pixelPoints.filter((_, i) => i % 2 === 1);
+        if (lowerPts.length >= 2) {
+            for (let i = 0; i < lowerPts.length - 1; i++) {
+                children.push({
+                    type: 'line', name: 'line',
+                    shape: { x1: lowerPts[i][0], y1: lowerPts[i][1], x2: lowerPts[i + 1][0], y2: lowerPts[i + 1][1] },
+                    style: { stroke: '#4caf50', lineWidth: 2 },
+                });
+            }
+            // Extend lower trendline
+            if (lowerPts.length >= 2) {
+                const last = lowerPts[lowerPts.length - 1];
+                const prev = lowerPts[lowerPts.length - 2];
+                const dx = last[0] - prev[0];
+                const dy = last[1] - prev[1];
+                if (dx !== 0) {
+                    const extendX = last[0] + dx * 0.5;
+                    const extendY = last[1] + dy * 0.5;
+                    children.push({
+                        type: 'line',
+                        shape: { x1: last[0], y1: last[1], x2: extendX, y2: extendY },
+                        style: { stroke: '#4caf50', lineWidth: 1, lineDash: [4, 4] },
+                        silent: true,
+                    });
+                }
+            }
+        }
+
+        // Zigzag connecting all points
+        for (let i = 0; i < pixelPoints.length - 1; i++) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[i][0], y1: pixelPoints[i][1], x2: pixelPoints[i + 1][0], y2: pixelPoints[i + 1][1] },
+                style: { stroke: '#9c27b0', lineWidth: 1, lineDash: [2, 2] },
+                silent: true,
+            });
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            const [px, py] = pixelPoints[i];
+            const isHigh = i % 2 === 0;
+            children.push({ type: 'text', style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 12, fontWeight: 'bold', align: 'center', verticalAlign: 'middle' }, silent: true });
+        }
+
+        // Control points
+        for (let i = 0; i < pixelPoints.length; i++) {
+            children.push({ type: 'circle', name: `point-${i}`, shape: { cx: pixelPoints[i][0], cy: pixelPoints[i][1], r: 4 }, style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 }, z: 100 });
+        }
+
+        return { type: 'group', children };
+    }
+}

package/src/plugins/TrianglePatternTool/TrianglePatternTool.ts

@@ -0,0 +1,98 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { TrianglePatternDrawingRenderer } from './TrianglePatternDrawingRenderer';
+
+const LABELS = ['1', '2', '3', '4', '5'];
+const TOTAL_POINTS = 5;
+
+export class TrianglePatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'triangle-pattern-tool',
+            name: options.name || 'Triangle Pattern',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><path d="M2,4 L22,4 L12,20 Z"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new TrianglePatternDrawingRenderer()); }
+
+    protected onActivate(): void {
+        this.state = 'idle'; this.points = [];
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        const zr = this.context.getChart().getZr();
+        zr.on('click', this.onClick); zr.on('mousemove', this.onMouseMove);
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle'; this.points = []; this.removeGraphic();
+        const zr = this.context.getChart().getZr();
+        zr.off('click', this.onClick); zr.off('mousemove', this.onMouseMove);
+        zr.setCursorStyle('default');
+    }
+
+    private onClick = (params: any) => {
+        const pt = this.getPoint(params);
+        if (this.state === 'idle') {
+            this.state = 'drawing'; this.points = [pt, [...pt]]; this.initGraphic(); this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            this.points[this.points.length - 1] = pt;
+            if (this.points.length >= TOTAL_POINTS) {
+                this.state = 'finished'; this.updateGraphic(); this.saveDrawing(); this.removeGraphic(); this.context.disableTools();
+            } else { this.points.push([...pt]); this.updateGraphic(); }
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing' || this.points.length < 2) return;
+        this.points[this.points.length - 1] = this.getPoint(params); this.updateGraphic();
+    };
+
+    private initGraphic() { this.graphicGroup = new echarts.graphic.Group(); this.context.getChart().getZr().add(this.graphicGroup); }
+    private removeGraphic() { if (this.graphicGroup) { this.context.getChart().getZr().remove(this.graphicGroup); this.graphicGroup = null; } }
+
+    private updateGraphic() {
+        if (!this.graphicGroup) return;
+        this.graphicGroup.removeAll();
+        const pts = this.points;
+
+        if (pts.length >= 3) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts }, style: { fill: 'rgba(156,39,176,0.06)' }, silent: true }));
+
+        // Zigzag
+        for (let i = 0; i < pts.length - 1; i++) {
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[i][0], y1: pts[i][1], x2: pts[i + 1][0], y2: pts[i + 1][1] }, style: { stroke: '#9c27b0', lineWidth: 2 }, silent: true }));
+        }
+
+        // Upper trendline (even indices)
+        const upper = pts.filter((_, i) => i % 2 === 0);
+        if (upper.length >= 2) {
+            for (let i = 0; i < upper.length - 1; i++) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: upper[i][0], y1: upper[i][1], x2: upper[i + 1][0], y2: upper[i + 1][1] }, style: { stroke: '#f44336', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+            }
+        }
+        // Lower trendline (odd indices)
+        const lower = pts.filter((_, i) => i % 2 === 1);
+        if (lower.length >= 2) {
+            for (let i = 0; i < lower.length - 1; i++) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: lower[i][0], y1: lower[i][1], x2: lower[i + 1][0], y2: lower[i + 1][1] }, style: { stroke: '#4caf50', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+            }
+        }
+
+        for (let i = 0; i < pts.length && i < LABELS.length; i++) {
+            const [px, py] = pts[i];
+            const isHigh = i % 2 === 0;
+            this.graphicGroup.add(new echarts.graphic.Text({ style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 12, fontWeight: 'bold', align: 'center', verticalAlign: 'middle' }, silent: true }));
+            this.graphicGroup.add(new echarts.graphic.Circle({ shape: { cx: px, cy: py, r: 4 }, style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1.5 }, z: 101, silent: true }));
+        }
+    }
+
+    private saveDrawing() {
+        const dataPoints = this.points.map((pt) => this.context.coordinateConversion.pixelToData({ x: pt[0], y: pt[1] }));
+        if (dataPoints.every((p) => p !== null)) {
+            this.context.addDrawing({ id: `triangle-${Date.now()}`, type: 'triangle_pattern', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/TrianglePatternTool/index.ts

@@ -0,0 +1,2 @@
+export { TrianglePatternTool } from './TrianglePatternTool';
+export { TrianglePatternDrawingRenderer } from './TrianglePatternDrawingRenderer';