@qfo/qfchart 0.8.0 → 0.8.1

package/src/components/LayoutManager.ts

@@ -15,9 +15,9 @@ export interface PaneConfiguration {
 }
 
 export interface PaneBoundary {
-    yPercent: number;           // Y position in %, center of the gap between panes
-    aboveId: string | 'main';   // pane above (main chart or indicator id)
-    belowId: string;            // indicator id below
+    yPercent: number; // Y position in %, center of the gap between panes
+    aboveId: string | 'main'; // pane above (main chart or indicator id)
+    belowId: string; // indicator id below
 }
 
 export interface LayoutResult {
@@ -40,7 +40,7 @@ export class LayoutManager {
         isMainCollapsed: boolean = false,
         maximizedPaneId: string | null = null,
         marketData?: import('../types').OHLCV[],
-        mainHeightOverride?: number
+        mainHeightOverride?: number,
     ): LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number } {
         // Calculate pixelToPercent early for maximized logic
         let pixelToPercent = 0;
@@ -52,11 +52,11 @@ export class LayoutManager {
         const yAxisPaddingPercent = options.yAxisPadding !== undefined ? options.yAxisPadding : 5;
 
         // Grid styling options
-        const gridShow = options.grid?.show === true;               // default false
+        const gridShow = options.grid?.show === true; // default false
         const gridLineColor = options.grid?.lineColor ?? '#334155';
         const gridLineOpacity = options.grid?.lineOpacity ?? 0.5;
         const gridBorderColor = options.grid?.borderColor ?? '#334155';
-        const gridBorderShow = options.grid?.borderShow === true;    // default false
+        const gridBorderShow = options.grid?.borderShow === true; // default false
 
         // Layout margin options
         const layoutLeft = options.layout?.left ?? '10%';
@@ -195,9 +195,10 @@ export class LayoutManager {
                             if (options.yAxisLabelFormatter) {
                                 return options.yAxisLabelFormatter(value);
                             }
-                            const decimals = options.yAxisDecimalPlaces !== undefined
-                                ? options.yAxisDecimalPlaces
-                                : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                            const decimals =
+                                options.yAxisDecimalPlaces !== undefined
+                                    ? options.yAxisDecimalPlaces
+                                    : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                             return AxisUtils.formatValue(value, decimals);
                         },
                     },
@@ -407,9 +408,8 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined
-                        ? options.yAxisDecimalPlaces
-                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    const decimals =
+                        options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                     return AxisUtils.formatValue(value, decimals);
                 },
             },
@@ -483,9 +483,8 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined
-                        ? options.yAxisDecimalPlaces
-                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    const decimals =
+                        options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                     return AxisUtils.formatValue(value, decimals);
                 },
             },
@@ -521,7 +520,11 @@ export class LayoutManager {
 
                         // Check if this is a shape with price-relative positioning
                         const isShapeWithPriceLocation =
-                            plot.options.style === 'shape' && (plot.options.location === 'abovebar' || plot.options.location === 'AboveBar' || plot.options.location === 'belowbar' || plot.options.location === 'BelowBar');
+                            plot.options.style === 'shape' &&
+                            (plot.options.location === 'abovebar' ||
+                                plot.options.location === 'AboveBar' ||
+                                plot.options.location === 'belowbar' ||
+                                plot.options.location === 'BelowBar');
 
                         if (visualOnlyStyles.includes(plot.options.style)) {
                             // Assign these to a separate Y-axis so they don't affect price scale
@@ -582,7 +585,7 @@ export class LayoutManager {
         // Create Y-axes for incompatible plots
         // nextYAxisIndex already incremented in the loop above, so we know how many axes we need
         const numOverlayAxes = overlayYAxisMap.size > 0 ? nextYAxisIndex - 1 : 0;
-        
+
         // Track which overlay axes are for visual-only plots (background, barcolor, etc.)
         const visualOnlyAxes = new Set<number>();
         overlayYAxisMap.forEach((yAxisIdx, plotKey) => {
@@ -596,11 +599,11 @@ export class LayoutManager {
                 });
             });
         });
-        
+
         for (let i = 0; i < numOverlayAxes; i++) {
             const yAxisIndex = i + 1; // Y-axis indices start at 1 for overlays
             const isVisualOnly = visualOnlyAxes.has(yAxisIndex);
-            
+
             yAxis.push({
                 position: 'left',
                 scale: !isVisualOnly, // Disable scaling for visual-only plots
@@ -636,9 +639,10 @@ export class LayoutManager {
                         if (options.yAxisLabelFormatter) {
                             return options.yAxisLabelFormatter(value);
                         }
-                        const decimals = options.yAxisDecimalPlaces !== undefined
-                            ? options.yAxisDecimalPlaces
-                            : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                        const decimals =
+                            options.yAxisDecimalPlaces !== undefined
+                                ? options.yAxisDecimalPlaces
+                                : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                         return AxisUtils.formatValue(value, decimals);
                     },
                 },
@@ -648,19 +652,21 @@ export class LayoutManager {
 
         // --- Generate DataZoom ---
         const dataZoom: any[] = [];
-        if (dzVisible) {
-            // Add 'inside' zoom (pan/drag) only if zoomOnTouch is enabled (default true)
-            const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
-            if (zoomOnTouch) {
-                dataZoom.push({
-                    type: 'inside',
-                    xAxisIndex: allXAxisIndices,
-                    start: dzStart,
-                    end: dzEnd,
-                    filterMode: 'weakFilter',
-                });
-            }
+        const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
+        const pannable = options.dataZoom?.pannable ?? true;
+
+        // 'inside' zoom provides pan/drag — enabled independently of slider visibility
+        if (zoomOnTouch && pannable) {
+            dataZoom.push({
+                type: 'inside',
+                xAxisIndex: allXAxisIndices,
+                start: dzStart,
+                end: dzEnd,
+                filterMode: 'weakFilter',
+            });
+        }
 
+        if (dzVisible) {
             if (dzPosition === 'top') {
                 dataZoom.push({
                     type: 'slider',
@@ -708,7 +714,7 @@ export class LayoutManager {
     private static calculateMaximized(
         containerHeight: number,
         options: QFChartOptions,
-        targetPaneIndex: number // 0 for main, 1+ for indicators
+        targetPaneIndex: number, // 0 for main, 1+ for indicators
     ): LayoutResult {
         return {
             grid: [],

package/src/components/SeriesBuilder.ts

@@ -35,9 +35,7 @@ export class SeriesBuilder {
             if (lineStyleType.startsWith('linestyle_')) {
                 lineStyleType = lineStyleType.replace('linestyle_', '') as any;
             }
-            const decimals = options.yAxisDecimalPlaces !== undefined
-                ? options.yAxisDecimalPlaces
-                : AxisUtils.autoDetectDecimals(marketData);
+            const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData);
 
             markLine = {
                 symbol: ['none', 'none'],
@@ -77,7 +75,8 @@ export class SeriesBuilder {
 
         return {
             type: 'candlestick',
-            name: options.title || 'Market',
+            id: '__candlestick__',
+            name: options.title,
             data: data,
             itemStyle: {
                 color: upColor,
@@ -100,7 +99,7 @@ export class SeriesBuilder {
         dataIndexOffset: number = 0,
         candlestickData?: OHLCV[], // Add candlestick data to access High/Low for positioning
         overlayYAxisMap?: Map<string, number>, // Map of overlay indicator IDs to their Y-axis indices
-        separatePaneYAxisOffset: number = 1 // Offset for separate pane Y-axes (accounts for overlay axes)
+        separatePaneYAxisOffset: number = 1, // Offset for separate pane Y-axes (accounts for overlay axes)
     ): { series: any[]; barColors: (string | null)[] } {
         const series: any[] = [];
         const barColors: (string | null)[] = new Array(totalDataLength).fill(null);
@@ -220,7 +219,7 @@ export class SeriesBuilder {
                             }
 
                             dataArray[offsetIndex] = value;
-                            colorArray[offsetIndex] = isNaColor ? null : (pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR);
+                            colorArray[offsetIndex] = isNaColor ? null : pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR;
                             optionsArray[offsetIndex] = point.options || {};
                         }
                     }
@@ -281,8 +280,9 @@ export class SeriesBuilder {
 
                         if (plot1Data && plot2Data) {
                             // Parse per-bar colors
-                            const { color: defaultColor, opacity: defaultOpacity } =
-                                ColorUtils.parseColor(plot.options.color || 'rgba(128, 128, 128, 0.2)');
+                            const { color: defaultColor, opacity: defaultOpacity } = ColorUtils.parseColor(
+                                plot.options.color || 'rgba(128, 128, 128, 0.2)',
+                            );
                             const hasPerBarColor = optionsArray.some((o: any) => o && o.color !== undefined);
 
                             const fillBarColors: { color: string; opacity: number }[] = [];
@@ -359,7 +359,7 @@ export class SeriesBuilder {
                             xAxisIndex,
                             yAxisIndex,
                             totalDataLength,
-                            entries
+                            entries,
                         );
                         if (batchedConfig) {
                             series.push(batchedConfig);
@@ -371,7 +371,7 @@ export class SeriesBuilder {
                             xAxisIndex,
                             yAxisIndex,
                             totalDataLength,
-                            entries
+                            entries,
                         );
                         if (batchedConfig) {
                             series.push(batchedConfig);

package/src/components/TooltipFormatter.ts

@@ -4,7 +4,7 @@ export class TooltipFormatter {
   public static format(params: any[], options: QFChartOptions): string {
     if (!params || params.length === 0) return "";
 
-    const marketName = options.title || "Market";
+    const marketName = options.title || "";
     const upColor = options.upColor || "#00da3c";
     const downColor = options.downColor || "#ec0000";
     const fontFamily = options.fontFamily || "sans-serif";

package/src/index.ts

@@ -1,6 +1,17 @@
-export * from "./types";
-export * from "./QFChart";
-export * from "./plugins/MeasureTool";
-export * from "./plugins/LineTool";
-export * from "./plugins/FibonacciTool";
-export * from "./components/AbstractPlugin";
+export * from "./types";
+export * from "./QFChart";
+export * from "./plugins/MeasureTool";
+export * from "./plugins/LineTool";
+export * from "./plugins/FibonacciTool";
+export * from "./plugins/FibonacciChannelTool";
+export * from "./plugins/FibSpeedResistanceFanTool";
+export * from "./plugins/FibTrendExtensionTool";
+export * from "./plugins/XABCDPatternTool";
+export * from "./plugins/ABCDPatternTool";
+export * from "./plugins/CypherPatternTool";
+export * from "./plugins/HeadAndShouldersTool";
+export * from "./plugins/TrianglePatternTool";
+export * from "./plugins/ThreeDrivesPatternTool";
+export * from "./plugins/ToolGroup";
+export * from "./components/AbstractPlugin";
+export * from "./components/DrawingRendererRegistry";

package/src/plugins/ABCDPatternTool/ABCDPatternDrawingRenderer.ts

@@ -0,0 +1,112 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50'];
+
+export class ABCDPatternDrawingRenderer implements DrawingRenderer {
+    type = 'abcd_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 triangle ABC
+        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.08)' },
+            });
+        }
+        // Fill triangle BCD
+        if (pixelPoints.length >= 4) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: { points: pixelPoints.slice(1, 4).map(([x, y]) => [x, y]) },
+                style: { fill: 'rgba(244, 67, 54, 0.08)' },
+            });
+        }
+
+        // Leg lines
+        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 connector A→C
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[0][0], y1: pixelPoints[0][1], x2: pixelPoints[2][0], y2: pixelPoints[2][1] },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                silent: true,
+            });
+        }
+        // Dashed connector B→D
+        if (pixelPoints.length >= 4) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[1][0], y1: pixelPoints[1][1], x2: pixelPoints[3][0], y2: pixelPoints[3][1] },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                silent: true,
+            });
+        }
+
+        // Fibonacci ratios
+        if (drawing.points.length >= 3) {
+            const ab = Math.abs(drawing.points[1].value - drawing.points[0].value);
+            const bc = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            if (ab !== 0) {
+                const ratio = (bc / ab).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) {
+            const bc = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            const cd = Math.abs(drawing.points[3].value - drawing.points[2].value);
+            if (bc !== 0) {
+                const ratio = (cd / bc).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 });
+            }
+        }
+
+        // Vertex labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            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: 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/ABCDPatternTool/ABCDPatternTool.ts

@@ -0,0 +1,136 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { ABCDPatternDrawingRenderer } from './ABCDPatternDrawingRenderer';
+
+const LABELS = ['A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50'];
+const TOTAL_POINTS = 4;
+
+export class ABCDPatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'abcd-pattern-tool',
+            name: options.name || 'ABCD Pattern',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="3,18 8,5 15,15 21,3"/><circle cx="3" cy="18" r="1.5" fill="#e3e3e3"/><circle cx="8" cy="5" r="1.5" fill="#e3e3e3"/><circle cx="15" cy="15" r="1.5" fill="#e3e3e3"/><circle cx="21" cy="3" r="1.5" fill="#e3e3e3"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.context.registerDrawingRenderer(new ABCDPatternDrawingRenderer());
+    }
+
+    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);
+        this.context.getChart().getZr().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.08)' }, silent: true }));
+        }
+        if (pts.length >= 4) {
+            this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(1, 4) }, style: { fill: 'rgba(244,67,54,0.08)' }, silent: true }));
+        }
+
+        // Legs
+        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
+        if (pts.length >= 3) {
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[0][0], y1: pts[0][1], x2: pts[2][0], y2: pts[2][1] }, style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+        }
+        if (pts.length >= 4) {
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[1][0], y1: pts[1][1], x2: pts[3][0], y2: pts[3][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]);
+            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: `abcd-${Date.now()}`,
+                type: 'abcd_pattern',
+                points: dataPoints as any[],
+                paneIndex: dataPoints[0]!.paneIndex || 0,
+                style: { color: '#3b82f6', lineWidth: 2 },
+            });
+        }
+    }
+}

package/src/plugins/ABCDPatternTool/index.ts

@@ -0,0 +1,2 @@
+export { ABCDPatternTool } from './ABCDPatternTool';
+export { ABCDPatternDrawingRenderer } from './ABCDPatternDrawingRenderer';

package/src/plugins/CypherPatternTool/CypherPatternDrawingRenderer.ts

@@ -0,0 +1,80 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['X', 'A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#00bcd4', '#e91e63', '#8bc34a', '#ff5722'];
+
+export class CypherPatternDrawingRenderer implements DrawingRenderer {
+    type = 'cypher_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: 'rgba(0, 188, 212, 0.08)' } });
+        }
+        if (pixelPoints.length >= 5) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(2, 5).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(233, 30, 99, 0.08)' } });
+        }
+
+        // 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 connectors X→B, X→C, A→D
+        const connectors: [number, number][] = [[0, 2], [0, 3], [1, 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
+        const pts = drawing.points;
+        if (pts.length >= 3) {
+            const xa = Math.abs(pts[1].value - pts[0].value);
+            const ab = Math.abs(pts[2].value - pts[1].value);
+            if (xa !== 0) {
+                const r = (ab / xa).toFixed(3);
+                children.push({ type: 'text', style: { text: r, x: (pixelPoints[1][0] + pixelPoints[2][0]) / 2 + 8, y: (pixelPoints[1][1] + pixelPoints[2][1]) / 2, fill: '#e91e63', fontSize: 10 }, silent: true });
+            }
+        }
+        if (pts.length >= 4) {
+            const xa = Math.abs(pts[1].value - pts[0].value);
+            const xc = Math.abs(pts[3].value - pts[0].value);
+            if (xa !== 0) {
+                const r = (xc / xa).toFixed(3);
+                children.push({ type: 'text', style: { text: `XC/XA: ${r}`, x: (pixelPoints[0][0] + pixelPoints[3][0]) / 2 + 8, y: (pixelPoints[0][1] + pixelPoints[3][1]) / 2, fill: '#8bc34a', fontSize: 10 }, silent: true });
+            }
+        }
+        if (pts.length >= 5) {
+            const xc = Math.abs(pts[3].value - pts[0].value);
+            const cd = Math.abs(pts[4].value - pts[3].value);
+            if (xc !== 0) {
+                const r = (cd / xc).toFixed(3);
+                children.push({ type: 'text', style: { text: r, x: (pixelPoints[3][0] + pixelPoints[4][0]) / 2 + 8, y: (pixelPoints[3][1] + pixelPoints[4][1]) / 2, fill: '#ff5722', fontSize: 10 }, silent: true });
+            }
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            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: 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 };
+    }
+}