@qfo/qfchart 0.7.3 → 0.8.1

package/src/plugins/HeadAndShouldersTool/HeadAndShouldersTool.ts

@@ -0,0 +1,97 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { HeadAndShouldersDrawingRenderer } from './HeadAndShouldersDrawingRenderer';
+
+const LABELS = ['', 'LS', '', 'H', '', 'RS', ''];
+const TOTAL_POINTS = 7;
+
+export class HeadAndShouldersTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'head-and-shoulders-tool',
+            name: options.name || 'Head & Shoulders',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="1,18 4,10 7,14 12,3 17,14 20,10 23,18"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new HeadAndShouldersDrawingRenderer()); }
+
+    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(244,67,54,0.08)' }, silent: true }));
+        if (pts.length >= 7) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(4, 7) }, style: { fill: 'rgba(33,150,243,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: '#2196f3', lineWidth: 2 }, silent: true }));
+        }
+
+        // Neckline
+        if (pts.length >= 5) {
+            const [nx1, ny1] = pts[2];
+            const [nx2, ny2] = pts[4];
+            const dx = nx2 - nx1; const dy = ny2 - ny1;
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: nx1 - dx * 0.3, y1: ny1 - dy * 0.3, x2: nx2 + dx * 0.3, y2: ny2 + dy * 0.3 }, style: { stroke: '#ff9800', lineWidth: 2, lineDash: [6, 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: 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: `hs-${Date.now()}`, type: 'head_and_shoulders', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/HeadAndShouldersTool/index.ts

@@ -0,0 +1,2 @@
+export { HeadAndShouldersTool } from './HeadAndShouldersTool';
+export { HeadAndShouldersDrawingRenderer } from './HeadAndShouldersDrawingRenderer';

package/src/plugins/LineTool/LineDrawingRenderer.ts

@@ -0,0 +1,49 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class LineDrawingRenderer implements DrawingRenderer {
+    type = 'line';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const color = drawing.style?.color || '#3b82f6';
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 2,
+                    },
+                },
+                {
+                    type: 'circle',
+                    name: 'point-0',
+                    shape: { cx: x1, cy: y1, r: 4 },
+                    style: {
+                        fill: '#fff',
+                        stroke: color,
+                        lineWidth: 1,
+                        opacity: isSelected ? 1 : 0,
+                    },
+                },
+                {
+                    type: 'circle',
+                    name: 'point-1',
+                    shape: { cx: x2, cy: y2, r: 4 },
+                    style: {
+                        fill: '#fff',
+                        stroke: color,
+                        lineWidth: 1,
+                        opacity: isSelected ? 1 : 0,
+                    },
+                },
+            ],
+        };
+    }
+}

package/src/plugins/{LineTool.ts → LineTool/LineTool.ts}

@@ -1,190 +1,161 @@
-import { AbstractPlugin } from '../components/AbstractPlugin';
-import * as echarts from 'echarts';
-
-type PluginState = 'idle' | 'drawing' | 'finished';
-
-export class LineTool extends AbstractPlugin {
-    private zr!: any;
-    private state: PluginState = 'idle';
-    private startPoint: number[] | null = null;
-    private endPoint: number[] | null = null;
-
-    // ZRender Elements
-    private group: any = null;
-    private line: any = null;
-    private startCircle: any = null;
-    private endCircle: any = null;
-
-    constructor(options: { name?: string; icon?: string }) {
-        super({
-            id: 'trend-line',
-            name: options?.name || 'Trend Line',
-            icon:
-                options?.icon ||
-                `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="22" x2="22" y2="2" /></svg>`,
-        });
-    }
-
-    protected onInit(): void {
-        this.zr = this.chart.getZr();
-    }
-
-    protected onActivate(): void {
-        this.state = 'idle';
-        this.chart.getZr().setCursorStyle('crosshair');
-
-        this.zr.on('click', this.onClick);
-        this.zr.on('mousemove', this.onMouseMove);
-    }
-
-    protected onDeactivate(): void {
-        this.state = 'idle';
-        this.chart.getZr().setCursorStyle('default');
-
-        this.zr.off('click', this.onClick);
-        this.zr.off('mousemove', this.onMouseMove);
-
-        // Clean up clear listeners
-        this.disableClearListeners();
-
-        // @ts-ignore - state type comparison
-        if (this.state === 'drawing') {
-            this.removeGraphic();
-        }
-    }
-
-    protected onDestroy(): void {
-        this.removeGraphic();
-    }
-
-    // --- Interaction Handlers ---
-
-    private onMouseDown = () => {
-        // No longer needed
-    };
-
-    private onChartInteraction = () => {
-        // No longer needed
-    };
-
-    private onClick = (params: any) => {
-        if (this.state === 'idle') {
-            this.state = 'drawing';
-            this.startPoint = [params.offsetX, params.offsetY];
-            this.endPoint = [params.offsetX, params.offsetY];
-            this.initGraphic();
-            this.updateGraphic();
-        } else if (this.state === 'drawing') {
-            this.state = 'finished';
-            this.endPoint = [params.offsetX, params.offsetY];
-            this.updateGraphic();
-
-            // Convert to native chart drawing
-            if (this.startPoint && this.endPoint) {
-                const start = this.context.coordinateConversion.pixelToData({
-                    x: this.startPoint[0],
-                    y: this.startPoint[1],
-                });
-                const end = this.context.coordinateConversion.pixelToData({
-                    x: this.endPoint[0],
-                    y: this.endPoint[1],
-                });
-
-                if (start && end) {
-                    // Use the pane index from the start point (assume drawing starts and ends in same pane or use start pane)
-                    const paneIndex = start.paneIndex || 0;
-
-                    this.context.addDrawing({
-                        id: `line-${Date.now()}`,
-                        type: 'line',
-                        points: [start, end],
-                        paneIndex: paneIndex,
-                        style: {
-                            color: '#3b82f6',
-                            lineWidth: 2,
-                        },
-                    });
-                }
-            }
-
-            // Cleanup local ZRender graphic as it's now part of the chart series
-            this.removeGraphic();
-            this.context.disableTools();
-        }
-    };
-
-    private saveDataCoordinates() {
-        // No longer needed
-    }
-
-    private updateGraphicFromData() {
-        // No longer needed
-    }
-
-    private enableClearListeners(): void {
-        // No longer needed
-    }
-
-    private clearHandlers: any = {};
-
-    private disableClearListeners(): void {
-        // No longer needed
-    }
-
-    private onMouseMove = (params: any) => {
-        if (this.state !== 'drawing') return;
-        this.endPoint = [params.offsetX, params.offsetY];
-        this.updateGraphic();
-    };
-
-    // --- Graphics ---
-
-    private initGraphic(): void {
-        if (this.group) return;
-
-        this.group = new echarts.graphic.Group();
-
-        this.line = new echarts.graphic.Line({
-            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
-            style: { stroke: '#3b82f6', lineWidth: 2 },
-            z: 100,
-        });
-
-        this.startCircle = new echarts.graphic.Circle({
-            shape: { cx: 0, cy: 0, r: 4 },
-            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
-            z: 101,
-        });
-
-        this.endCircle = new echarts.graphic.Circle({
-            shape: { cx: 0, cy: 0, r: 4 },
-            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
-            z: 101,
-        });
-
-        this.group.add(this.line);
-        this.group.add(this.startCircle);
-        this.group.add(this.endCircle);
-
-        this.zr.add(this.group);
-    }
-
-    private removeGraphic(): void {
-        if (this.group) {
-            this.zr.remove(this.group);
-            this.group = null;
-            this.disableClearListeners();
-        }
-    }
-
-    private updateGraphic(): void {
-        if (!this.startPoint || !this.endPoint || !this.group) return;
-
-        const [x1, y1] = this.startPoint;
-        const [x2, y2] = this.endPoint;
-
-        this.line.setShape({ x1, y1, x2, y2 });
-        this.startCircle.setShape({ cx: x1, cy: y1 });
-        this.endCircle.setShape({ cx: x2, cy: y2 });
-    }
-}
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { LineDrawingRenderer } from './LineDrawingRenderer';
+import * as echarts from 'echarts';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class LineTool extends AbstractPlugin {
+    private zr!: any;
+    private state: PluginState = 'idle';
+    private startPoint: number[] | null = null;
+    private endPoint: number[] | null = null;
+
+    // ZRender Elements
+    private group: any = null;
+    private line: any = null;
+    private startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'trend-line',
+            name: options?.name || 'Trend Line',
+            icon:
+                options?.icon ||
+                `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="22" x2="22" y2="2" /></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new LineDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.state = 'idle';
+        this.chart.getZr().setCursorStyle('crosshair');
+
+        this.zr.on('click', this.onClick);
+        this.zr.on('mousemove', this.onMouseMove);
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle';
+        this.chart.getZr().setCursorStyle('default');
+
+        this.zr.off('click', this.onClick);
+        this.zr.off('mousemove', this.onMouseMove);
+
+        // @ts-ignore - state type comparison
+        if (this.state === 'drawing') {
+            this.removeGraphic();
+        }
+    }
+
+    protected onDestroy(): void {
+        this.removeGraphic();
+    }
+
+    // --- Interaction Handlers ---
+
+    private onClick = (params: any) => {
+        if (this.state === 'idle') {
+            this.state = 'drawing';
+            this.startPoint = this.getPoint(params);
+            this.endPoint = this.getPoint(params);
+            this.initGraphic();
+            this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            this.state = 'finished';
+            this.endPoint = this.getPoint(params);
+            this.updateGraphic();
+
+            // Convert to native chart drawing
+            if (this.startPoint && this.endPoint) {
+                const start = this.context.coordinateConversion.pixelToData({
+                    x: this.startPoint[0],
+                    y: this.startPoint[1],
+                });
+                const end = this.context.coordinateConversion.pixelToData({
+                    x: this.endPoint[0],
+                    y: this.endPoint[1],
+                });
+
+                if (start && end) {
+                    const paneIndex = start.paneIndex || 0;
+
+                    this.context.addDrawing({
+                        id: `line-${Date.now()}`,
+                        type: 'line',
+                        points: [start, end],
+                        paneIndex: paneIndex,
+                        style: {
+                            color: '#3b82f6',
+                            lineWidth: 2,
+                        },
+                    });
+                }
+            }
+
+            // Cleanup local ZRender graphic as it's now part of the chart series
+            this.removeGraphic();
+            this.context.disableTools();
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing') return;
+        this.endPoint = this.getPoint(params);
+        this.updateGraphic();
+    };
+
+    // --- Graphics ---
+
+    private initGraphic(): void {
+        if (this.group) return;
+
+        this.group = new echarts.graphic.Group();
+
+        this.line = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: '#3b82f6', lineWidth: 2 },
+            z: 100,
+        });
+
+        this.startCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
+            z: 101,
+        });
+
+        this.endCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
+            z: 101,
+        });
+
+        this.group.add(this.line);
+        this.group.add(this.startCircle);
+        this.group.add(this.endCircle);
+
+        this.zr.add(this.group);
+    }
+
+    private removeGraphic(): void {
+        if (this.group) {
+            this.zr.remove(this.group);
+            this.group = null;
+        }
+    }
+
+    private updateGraphic(): void {
+        if (!this.startPoint || !this.endPoint || !this.group) return;
+
+        const [x1, y1] = this.startPoint;
+        const [x2, y2] = this.endPoint;
+
+        this.line.setShape({ x1, y1, x2, y2 });
+        this.startCircle.setShape({ cx: x1, cy: y1 });
+        this.endCircle.setShape({ cx: x2, cy: y2 });
+    }
+}

package/src/plugins/LineTool/index.ts

@@ -0,0 +1,2 @@
+export { LineTool } from './LineTool';
+export { LineDrawingRenderer } from './LineDrawingRenderer';