@qfo/qfchart 0.7.3 → 0.8.1

package/src/plugins/XABCDPatternTool/XABCDPatternDrawingRenderer.ts

@@ -0,0 +1,178 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['X', 'A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336'];
+const FILL_COLOR_1 = 'rgba(33, 150, 243, 0.08)';
+const FILL_COLOR_2 = 'rgba(244, 67, 54, 0.08)';
+
+export class XABCDPatternDrawingRenderer implements DrawingRenderer {
+    type = 'xabcd_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 triangles XAB and BCD
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: {
+                    points: pixelPoints.slice(0, 3).map(([x, y]) => [x, y]),
+                },
+                style: { fill: FILL_COLOR_1, opacity: 1 },
+            });
+        }
+        if (pixelPoints.length >= 5) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: {
+                    points: pixelPoints.slice(2, 5).map(([x, y]) => [x, y]),
+                },
+                style: { fill: FILL_COLOR_2, opacity: 1 },
+            });
+        }
+
+        // Leg lines X→A→B→C→D
+        for (let i = 0; i < pixelPoints.length - 1; i++) {
+            const [x1, y1] = pixelPoints[i];
+            const [x2, y2] = pixelPoints[i + 1];
+            const legColor = LEG_COLORS[i % LEG_COLORS.length];
+
+            children.push({
+                type: 'line',
+                name: 'line',
+                shape: { x1, y1, x2, y2 },
+                style: { stroke: legColor, lineWidth: drawing.style?.lineWidth || 2 },
+            });
+        }
+
+        // Dashed connector lines: X→B, A→C, B→D (retrace references)
+        const connectors: [number, number][] = [[0, 2], [1, 3], [2, 4]];
+        for (const [from, to] of connectors) {
+            if (from < pixelPoints.length && to < pixelPoints.length) {
+                const [x1, y1] = pixelPoints[from];
+                const [x2, y2] = pixelPoints[to];
+                children.push({
+                    type: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                    silent: true,
+                });
+            }
+        }
+
+        // Fibonacci ratio labels on legs
+        if (drawing.points.length >= 3) {
+            // AB/XA ratio
+            const xa = Math.abs(drawing.points[1].value - drawing.points[0].value);
+            const ab = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            if (xa !== 0) {
+                const ratio = (ab / xa).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: ratio, x: mx + 8, y: my, fill: '#ff9800', fontSize: 10 },
+                    silent: true,
+                });
+            }
+        }
+        if (drawing.points.length >= 4) {
+            // BC/AB ratio
+            const ab = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            const bc = Math.abs(drawing.points[3].value - drawing.points[2].value);
+            if (ab !== 0) {
+                const ratio = (bc / ab).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: ratio, x: mx + 8, y: my, fill: '#4caf50', fontSize: 10 },
+                    silent: true,
+                });
+            }
+        }
+        if (drawing.points.length >= 5) {
+            // CD/BC ratio
+            const bc = Math.abs(drawing.points[3].value - drawing.points[2].value);
+            const cd = Math.abs(drawing.points[4].value - drawing.points[3].value);
+            if (bc !== 0) {
+                const ratio = (cd / bc).toFixed(3);
+                const mx = (pixelPoints[3][0] + pixelPoints[4][0]) / 2;
+                const my = (pixelPoints[3][1] + pixelPoints[4][1]) / 2;
+                children.push({
+                    type: 'text',
+                    style: { text: ratio, x: mx + 8, y: my, fill: '#f44336', fontSize: 10 },
+                    silent: true,
+                });
+            }
+
+            // XA/AD ratio (overall retracement)
+            const xa = Math.abs(drawing.points[1].value - drawing.points[0].value);
+            const ad = Math.abs(drawing.points[4].value - drawing.points[1].value);
+            if (xa !== 0) {
+                const ratio = (ad / xa).toFixed(3);
+                // Place near D point
+                const [dx, dy] = pixelPoints[4];
+                children.push({
+                    type: 'text',
+                    style: { text: `AD/XA: ${ratio}`, x: dx + 10, y: dy + 14, fill: '#aaa', fontSize: 9 },
+                    silent: true,
+                });
+            }
+        }
+
+        // Vertex labels (X, A, B, C, D)
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            const [px, py] = pixelPoints[i];
+            // Place label above or below the point based on neighbors
+            const isLocalHigh =
+                (i === 0 || py <= pixelPoints[i - 1][1]) &&
+                (i === pixelPoints.length - 1 || py <= pixelPoints[i + 1]?.[1]);
+            const labelY = isLocalHigh ? py - 14 : py + 16;
+
+            children.push({
+                type: 'text',
+                style: {
+                    text: LABELS[i],
+                    x: px,
+                    y: labelY,
+                    fill: '#e2e8f0',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    align: 'center',
+                    verticalAlign: 'middle',
+                },
+                silent: true,
+            });
+        }
+
+        // Control points
+        for (let i = 0; i < pixelPoints.length; i++) {
+            const [px, py] = pixelPoints[i];
+            children.push({
+                type: 'circle',
+                name: `point-${i}`,
+                shape: { cx: px, cy: py, r: 4 },
+                style: {
+                    fill: '#fff',
+                    stroke: color,
+                    lineWidth: 1,
+                    opacity: isSelected ? 1 : 0,
+                },
+                z: 100,
+            });
+        }
+
+        return {
+            type: 'group',
+            children,
+        };
+    }
+}

package/src/plugins/XABCDPatternTool/XABCDPatternTool.ts

@@ -0,0 +1,213 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { XABCDPatternDrawingRenderer } from './XABCDPatternDrawingRenderer';
+
+const LABELS = ['X', 'A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336'];
+const TOTAL_POINTS = 5;
+
+export class XABCDPatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'xabcd-pattern-tool',
+            name: options.name || 'XABCD Pattern',
+            icon:
+                options.icon ||
+                `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="2,18 6,6 11,14 16,4 21,16"/><circle cx="2" cy="18" r="1.5" fill="#e3e3e3"/><circle cx="6" cy="6" r="1.5" fill="#e3e3e3"/><circle cx="11" cy="14" r="1.5" fill="#e3e3e3"/><circle cx="16" cy="4" r="1.5" fill="#e3e3e3"/><circle cx="21" cy="16" r="1.5" fill="#e3e3e3"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.context.registerDrawingRenderer(new XABCDPatternDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.state = 'idle';
+        this.points = [];
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        this.bindEvents();
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle';
+        this.points = [];
+        this.removeGraphic();
+        this.unbindEvents();
+        this.context.getChart().getZr().setCursorStyle('default');
+    }
+
+    private bindEvents() {
+        const zr = this.context.getChart().getZr();
+        zr.on('click', this.onClick);
+        zr.on('mousemove', this.onMouseMove);
+    }
+
+    private unbindEvents() {
+        const zr = this.context.getChart().getZr();
+        zr.off('click', this.onClick);
+        zr.off('mousemove', this.onMouseMove);
+    }
+
+    private onClick = (params: any) => {
+        const pt = this.getPoint(params);
+
+        if (this.state === 'idle') {
+            this.state = 'drawing';
+            this.points = [pt, [...pt]]; // First point + cursor preview
+            this.initGraphic();
+            this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            // Replace the preview point with the confirmed click
+            this.points[this.points.length - 1] = pt;
+
+            if (this.points.length >= TOTAL_POINTS) {
+                // All 5 points placed
+                this.state = 'finished';
+                this.updateGraphic();
+                this.saveDrawing();
+                this.removeGraphic();
+                this.context.disableTools();
+            } else {
+                // Add a new preview point for the next position
+                this.points.push([...pt]);
+                this.updateGraphic();
+            }
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing' || this.points.length < 2) return;
+        // Update the last (preview) point
+        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;
+
+        // Fill triangles
+        if (pts.length >= 3) {
+            this.graphicGroup.add(
+                new echarts.graphic.Polygon({
+                    shape: { points: pts.slice(0, 3) },
+                    style: { fill: 'rgba(33, 150, 243, 0.08)' },
+                    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,
+                }),
+            );
+        }
+
+        // Leg lines
+        for (let i = 0; i < pts.length - 1; i++) {
+            const [x1, y1] = pts[i];
+            const [x2, y2] = pts[i + 1];
+            this.graphicGroup.add(
+                new echarts.graphic.Line({
+                    shape: { x1, y1, x2, y2 },
+                    style: { stroke: LEG_COLORS[i % LEG_COLORS.length], lineWidth: 2 },
+                    silent: true,
+                }),
+            );
+        }
+
+        // Dashed connectors X→B, A→C, B→D
+        const connectors: [number, number][] = [[0, 2], [1, 3], [2, 4]];
+        for (const [from, to] of connectors) {
+            if (from < pts.length && to < pts.length) {
+                const [x1, y1] = pts[from];
+                const [x2, y2] = pts[to];
+                this.graphicGroup.add(
+                    new echarts.graphic.Line({
+                        shape: { x1, y1, x2, y2 },
+                        style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                        silent: true,
+                    }),
+                );
+            }
+        }
+
+        // Vertex labels
+        for (let i = 0; i < pts.length && i < LABELS.length; i++) {
+            const [px, py] = pts[i];
+            const isLocalHigh =
+                (i === 0 || py <= pts[i - 1][1]) &&
+                (i === pts.length - 1 || py <= pts[i + 1]?.[1]);
+            const labelY = isLocalHigh ? py - 14 : py + 16;
+
+            this.graphicGroup.add(
+                new echarts.graphic.Text({
+                    style: {
+                        text: LABELS[i],
+                        x: px,
+                        y: labelY,
+                        fill: '#e2e8f0',
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                        align: 'center',
+                        verticalAlign: 'middle',
+                    },
+                    silent: true,
+                }),
+            );
+        }
+
+        // Point circles
+        for (let i = 0; i < pts.length; i++) {
+            const [px, py] = pts[i];
+            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: `xabcd-${Date.now()}`,
+                type: 'xabcd_pattern',
+                points: dataPoints as any[],
+                paneIndex: dataPoints[0]!.paneIndex || 0,
+                style: {
+                    color: '#3b82f6',
+                    lineWidth: 2,
+                },
+            });
+        }
+    }
+}

package/src/plugins/XABCDPatternTool/index.ts

@@ -0,0 +1,2 @@
+export { XABCDPatternTool } from './XABCDPatternTool';
+export { XABCDPatternDrawingRenderer } from './XABCDPatternDrawingRenderer';

package/src/types.ts

@@ -106,6 +106,7 @@ export interface QFChartOptions {
     };
     dataZoom?: {
         visible?: boolean;
+        pannable?: boolean; // Keep pan/drag when visible=false (default true)
         position?: 'top' | 'bottom';
         height?: number; // height in %, default 6
         start?: number; // 0-100, default 50
@@ -116,9 +117,18 @@ export interface QFChartOptions {
         position: 'floating' | 'left' | 'right';
         triggerOn?: 'mousemove' | 'click' | 'none'; // When to show tooltip/crosshair, default 'mousemove'
     };
+    grid?: {
+        show?: boolean; // Show/hide split lines (default true)
+        lineColor?: string; // Split line color (default '#334155')
+        lineOpacity?: number; // Split line opacity (default 0.5 main, 0.3 indicator panes)
+        borderColor?: string; // Axis line color (default '#334155')
+        borderShow?: boolean; // Show/hide axis border lines (default true)
+    };
     layout?: {
-        mainPaneHeight: string; // e.g. "60%"
-        gap: number; // e.g. 5 (percent)
+        mainPaneHeight?: string; // e.g. "60%"
+        gap?: number; // Gap between panes in % (default ~5)
+        left?: string; // Grid left margin (default '10%')
+        right?: string; // Grid right margin (default '10%')
     };
     watermark?: boolean; // Default true
 }
@@ -167,14 +177,20 @@ export interface ChartContext {
     // Interaction Locking
     lockChart(): void;
     unlockChart(): void;
+
+    // Drawing Renderer Registration
+    registerDrawingRenderer(renderer: DrawingRenderer): void;
+
+    // Snap to nearest candle OHLC value
+    snapToCandle(point: Coordinate): Coordinate;
 }
 
-export type DrawingType = 'line' | 'fibonacci';
+export type DrawingType = string;
 
 export interface DrawingElement {
     id: string;
     type: DrawingType;
-    points: DataCoordinate[]; // [start, end]
+    points: DataCoordinate[];
     paneIndex?: number; // Pane where this drawing belongs (default 0)
     style?: {
         color?: string;
@@ -182,6 +198,25 @@ export interface DrawingElement {
     };
 }
 
+// Drawing Renderer System
+
+export interface DrawingRenderContext {
+    drawing: DrawingElement;
+    /** Pixel coords for each point, in the same order as drawing.points */
+    pixelPoints: [number, number][];
+    /** Whether this drawing is currently selected */
+    isSelected: boolean;
+    /** The ECharts custom series api object */
+    api: any;
+}
+
+export interface DrawingRenderer {
+    /** The drawing type this renderer handles */
+    type: string;
+    /** Return an ECharts custom series renderItem group element */
+    render(ctx: DrawingRenderContext): any;
+}
+
 export interface PluginConfig {
     id: string;
     name?: string;

package/src/utils/ColorUtils.ts

@@ -4,7 +4,7 @@ export class ColorUtils {
      * Supports: hex (#RRGGBB, #RRGGBBAA), named colors (green, red), rgba(r,g,b,a), rgb(r,g,b)
      */
     public static parseColor(colorStr: string): { color: string; opacity: number } {
-        if (!colorStr) {
+        if (!colorStr || typeof colorStr !== 'string') {
             return { color: '#888888', opacity: 0.2 };
         }