@qfo/qfchart 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qfo/qfchart",
-    "version": "0.8.1",
+    "version": "0.8.2",
     "description": "Professional financial charting library built on Apache ECharts with candlestick charts, technical indicators, and interactive drawing tools",
     "keywords": [
         "chart",

package/src/QFChart.ts

@@ -1397,22 +1397,22 @@ export class QFChart implements ChartContext {
         });
         drawingsByPane.forEach((paneDrawings) => {
             drawingSeriesUpdates.push({
-                data: paneDrawings.map((d) => [
-                    d.points[0].timeIndex + this.dataIndexOffset,
-                    d.points[0].value,
-                    d.points[1].timeIndex + this.dataIndexOffset,
-                    d.points[1].value,
-                ]),
+                data: paneDrawings.map((d) => {
+                    const row: number[] = [];
+                    d.points.forEach((p) => {
+                        row.push(p.timeIndex + this.dataIndexOffset, p.value);
+                    });
+                    return row;
+                }),
             });
         });
 
         // 6. Merge update — preserves drag/interaction state
         const updateOption: any = {
             xAxis: currentOption.xAxis.map(() => ({ data: categoryData })),
-            dataZoom: [
-                { start: newStart, end: newEnd },
-                { start: newStart, end: newEnd },
-            ],
+            dataZoom: (currentOption.dataZoom || []).map(() => ({
+                start: newStart, end: newEnd,
+            })),
             series: [
                 { data: coloredCandlestickData, markLine: candlestickSeries.markLine },
                 ...indicatorSeries.map((s) => {
@@ -1668,6 +1668,7 @@ export class QFChart implements ChartContext {
                         pixelPoints,
                         isSelected: drawing.id === this.selectedDrawingId,
                         api,
+                        coordSys: params.coordSys,
                     });
                 },
                 data: drawings.map((d) => {

package/src/components/LayoutManager.ts

@@ -268,6 +268,18 @@ export class LayoutManager {
 
         let mainHeightVal = 75; // Default if no separate pane
 
+        // Parse layout.mainPaneHeight option (e.g. '40%' or 40)
+        let configuredMainHeight: number | undefined;
+        if (options.layout?.mainPaneHeight !== undefined) {
+            const raw = options.layout.mainPaneHeight;
+            if (typeof raw === 'string') {
+                const parsed = parseFloat(raw);
+                if (!isNaN(parsed)) configuredMainHeight = parsed;
+            } else if (typeof raw === 'number') {
+                configuredMainHeight = raw as unknown as number;
+            }
+        }
+
         // Prepare separate panes configuration
         let paneConfigs: PaneConfiguration[] = [];
 
@@ -286,33 +298,54 @@ export class LayoutManager {
                 };
             });
 
-            // 2. Assign actual heights
-            // If collapsed, use small fixed height (e.g. 3%)
-            const resolvedPanes = panes.map((p) => ({
+            // 2. Assign raw heights (collapsed = 3%, otherwise use requested or default 15)
+            const rawPanes = panes.map((p) => ({
                 ...p,
-                height: p.isCollapsed ? 3 : p.requestedHeight !== undefined ? p.requestedHeight : 15,
+                rawHeight: p.isCollapsed ? 3 : p.requestedHeight !== undefined ? p.requestedHeight : 15,
             }));
 
-            // 3. Calculate total space needed for indicators
-            const totalIndicatorHeight = resolvedPanes.reduce((sum, p) => sum + p.height, 0);
-            const totalGaps = resolvedPanes.length * gapPercent;
-            const totalBottomSpace = totalIndicatorHeight + totalGaps;
-
-            // 4. Calculate Main Chart Height
-            // Available space = chartAreaBottom - mainPaneTop;
             const totalAvailable = chartAreaBottom - mainPaneTop;
-            mainHeightVal = totalAvailable - totalBottomSpace;
+            const totalGaps = rawPanes.length * gapPercent;
 
-            // Apply user-dragged main height override
+            // 4. Determine main chart height
             if (mainHeightOverride !== undefined && mainHeightOverride > 0 && !isMainCollapsed) {
+                // Drag-resize takes absolute priority
                 mainHeightVal = mainHeightOverride;
             } else if (isMainCollapsed) {
                 mainHeightVal = 3;
+            } else if (configuredMainHeight !== undefined && configuredMainHeight > 0) {
+                // User set mainPaneHeight — indicators fill remaining space proportionally
+                mainHeightVal = configuredMainHeight;
             } else {
-                // Safety check: ensure main chart has at least some space (e.g. 20%)
-                if (mainHeightVal < 20) {
-                    mainHeightVal = Math.max(mainHeightVal, 10);
-                }
+                // Auto: subtract indicator heights from available space
+                const totalIndicatorHeight = rawPanes.reduce((sum, p) => sum + p.rawHeight, 0);
+                mainHeightVal = totalAvailable - totalIndicatorHeight - totalGaps;
+                if (mainHeightVal < 20) mainHeightVal = Math.max(mainHeightVal, 10);
+            }
+
+            // 3. Resolve indicator heights
+            // When mainPaneHeight is configured (or drag override active), distribute remaining space
+            // proportionally among non-collapsed panes using their rawHeight as weights.
+            const isMainHeightFixed = (mainHeightOverride !== undefined && mainHeightOverride > 0 && !isMainCollapsed)
+                || (configuredMainHeight !== undefined && configuredMainHeight > 0 && !isMainCollapsed);
+
+            type ResolvedPane = (typeof rawPanes)[number] & { height: number };
+            let resolvedPanes: ResolvedPane[];
+            if (isMainHeightFixed) {
+                const remainingForIndicators = totalAvailable - mainHeightVal - totalGaps;
+                const totalWeights = rawPanes
+                    .filter((p) => !p.isCollapsed)
+                    .reduce((sum, p) => sum + p.rawHeight, 0);
+                resolvedPanes = rawPanes.map((p) => ({
+                    ...p,
+                    height: p.isCollapsed
+                        ? 3
+                        : totalWeights > 0
+                            ? Math.max(5, (p.rawHeight / totalWeights) * remainingForIndicators)
+                            : remainingForIndicators / rawPanes.filter((x) => !x.isCollapsed).length,
+                }));
+            } else {
+                resolvedPanes = rawPanes.map((p) => ({ ...p, height: p.rawHeight }));
             }
 
             // 5. Calculate positions
@@ -332,6 +365,7 @@ export class LayoutManager {
                 return config;
             });
         } else {
+            // No secondary panes — mainPaneHeight is ignored, fill all available space
             mainHeightVal = chartAreaBottom - mainPaneTop;
             if (isMainCollapsed) {
                 mainHeightVal = 3;

package/src/index.ts

@@ -2,6 +2,14 @@ export * from "./types";
 export * from "./QFChart";
 export * from "./plugins/MeasureTool";
 export * from "./plugins/LineTool";
+export * from "./plugins/RayTool";
+export * from "./plugins/InfoLineTool";
+export * from "./plugins/ExtendedLineTool";
+export * from "./plugins/TrendAngleTool";
+export * from "./plugins/HorizontalLineTool";
+export * from "./plugins/HorizontalRayTool";
+export * from "./plugins/VerticalLineTool";
+export * from "./plugins/CrossLineTool";
 export * from "./plugins/FibonacciTool";
 export * from "./plugins/FibonacciChannelTool";
 export * from "./plugins/FibSpeedResistanceFanTool";

package/src/plugins/CrossLineTool/CrossLineDrawingRenderer.ts

@@ -0,0 +1,49 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class CrossLineDrawingRenderer implements DrawingRenderer {
+    type = 'cross-line';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [px, py] = pixelPoints[0];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const left = coordSys.x;
+        const right = coordSys.x + coordSys.width;
+        const top = coordSys.y;
+        const bottom = coordSys.y + coordSys.height;
+
+        return {
+            type: 'group',
+            children: [
+                // Horizontal line
+                {
+                    type: 'line',
+                    name: 'line-h',
+                    shape: { x1: left, y1: py, x2: right, y2: py },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                // Vertical line
+                {
+                    type: 'line',
+                    name: 'line-v',
+                    shape: { x1: px, y1: top, x2: px, y2: bottom },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                // Center point
+                {
+                    type: 'circle',
+                    name: 'point-0',
+                    shape: { cx: px, cy: py, r: 4 },
+                    style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+                },
+            ],
+        };
+    }
+}

package/src/plugins/CrossLineTool/CrossLineTool.ts

@@ -0,0 +1,52 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { CrossLineDrawingRenderer } from './CrossLineDrawingRenderer';
+
+export class CrossLineTool extends AbstractPlugin {
+    private zr!: any;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'cross-line-tool',
+            name: options?.name || 'Cross Line',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new CrossLineDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.chart.getZr().setCursorStyle('crosshair');
+        this.zr.on('click', this.onClick);
+    }
+
+    protected onDeactivate(): void {
+        this.chart.getZr().setCursorStyle('default');
+        this.zr.off('click', this.onClick);
+    }
+
+    protected onDestroy(): void {}
+
+    private onClick = (params: any) => {
+        const point = this.getPoint(params);
+        if (!point) return;
+
+        const data = this.context.coordinateConversion.pixelToData({
+            x: point[0], y: point[1],
+        });
+
+        if (data) {
+            this.context.addDrawing({
+                id: `crossline-${Date.now()}`,
+                type: 'cross-line',
+                points: [data],
+                paneIndex: data.paneIndex || 0,
+                style: { color: '#d1d4dc', lineWidth: 1 },
+            });
+        }
+
+        this.context.disableTools();
+    };
+}

package/src/plugins/CrossLineTool/index.ts

@@ -0,0 +1,2 @@
+export { CrossLineTool } from './CrossLineTool';
+export { CrossLineDrawingRenderer } from './CrossLineDrawingRenderer';

package/src/plugins/ExtendedLineTool/ExtendedLineDrawingRenderer.ts

@@ -0,0 +1,73 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class ExtendedLineDrawingRenderer implements DrawingRenderer {
+    type = 'extended-line';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        let ex1 = x1, ey1 = y1, ex2 = x2, ey2 = y2;
+
+        if (dx !== 0 || dy !== 0) {
+            const left = coordSys.x;
+            const right = coordSys.x + coordSys.width;
+            const top = coordSys.y;
+            const bottom = coordSys.y + coordSys.height;
+
+            // Extend forward (past p2)
+            [ex2, ey2] = this.extendToEdge(x1, y1, dx, dy, left, right, top, bottom);
+            // Extend backward (past p1)
+            [ex1, ey1] = this.extendToEdge(x2, y2, -dx, -dy, left, right, top, bottom);
+        }
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1: ex1, y1: ey1, x2: ex2, y2: ey2 },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                {
+                    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 },
+                },
+            ],
+        };
+    }
+
+    private extendToEdge(
+        ox: number, oy: number, dx: number, dy: number,
+        left: number, right: number, top: number, bottom: number,
+    ): [number, number] {
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (right - ox) / dx : (left - ox) / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (bottom - oy) / dy : (top - oy) / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+        return [ox + tMax * dx, oy + tMax * dy];
+    }
+}

package/src/plugins/ExtendedLineTool/ExtendedLineTool.ts

@@ -0,0 +1,173 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { ExtendedLineDrawingRenderer } from './ExtendedLineDrawingRenderer';
+import * as echarts from 'echarts';
+
+const COLOR = '#d1d4dc';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class ExtendedLineTool extends AbstractPlugin {
+    private zr!: any;
+    private state: PluginState = 'idle';
+    private startPoint: number[] | null = null;
+    private endPoint: number[] | null = null;
+    private group: any = null;
+    private line: any = null;
+    private dashLineForward: any = null;
+    private dashLineBackward: any = null;
+    private startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'extended-line-tool',
+            name: options?.name || 'Extended Line',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="1" y1="23" x2="23" y2="1" stroke-dasharray="2,2" opacity="0.4"/><line x1="6" y1="18" x2="18" y2="6"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new ExtendedLineDrawingRenderer());
+    }
+
+    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);
+        this.removeGraphic();
+    }
+
+    protected onDestroy(): void {
+        this.removeGraphic();
+    }
+
+    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);
+
+            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) {
+                    this.context.addDrawing({
+                        id: `extended-line-${Date.now()}`,
+                        type: 'extended-line',
+                        points: [start, end],
+                        paneIndex: start.paneIndex || 0,
+                        style: { color: COLOR, lineWidth: 1 },
+                    });
+                }
+            }
+
+            this.removeGraphic();
+            this.context.disableTools();
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing') return;
+        this.endPoint = this.getPoint(params);
+        this.updateGraphic();
+    };
+
+    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: COLOR, lineWidth: 1 },
+            z: 100,
+        });
+        this.dashLineForward = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: COLOR, lineWidth: 1, lineDash: [4, 4], opacity: 0.5 },
+            z: 99,
+        });
+        this.dashLineBackward = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: COLOR, lineWidth: 1, lineDash: [4, 4], opacity: 0.5 },
+            z: 99,
+        });
+        this.startCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: COLOR, lineWidth: 1 },
+            z: 101,
+        });
+        this.endCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: COLOR, lineWidth: 1 },
+            z: 101,
+        });
+        this.group.add(this.dashLineBackward);
+        this.group.add(this.dashLineForward);
+        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 });
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        if (dx === 0 && dy === 0) return;
+
+        // Dashed extension forward (past p2)
+        const [fwX, fwY] = this.extendToEdge(x1, y1, dx, dy);
+        this.dashLineForward.setShape({ x1: x2, y1: y2, x2: fwX, y2: fwY });
+
+        // Dashed extension backward (past p1)
+        const [bwX, bwY] = this.extendToEdge(x2, y2, -dx, -dy);
+        this.dashLineBackward.setShape({ x1: x1, y1: y1, x2: bwX, y2: bwY });
+    }
+
+    private extendToEdge(ox: number, oy: number, dx: number, dy: number): [number, number] {
+        const w = this.chart.getWidth();
+        const h = this.chart.getHeight();
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (w - ox) / dx : -ox / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (h - oy) / dy : -oy / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+        return [ox + tMax * dx, oy + tMax * dy];
+    }
+}

package/src/plugins/ExtendedLineTool/index.ts

@@ -0,0 +1,2 @@
+export { ExtendedLineTool } from './ExtendedLineTool';
+export { ExtendedLineDrawingRenderer } from './ExtendedLineDrawingRenderer';

package/src/plugins/HorizontalLineTool/HorizontalLineDrawingRenderer.ts

@@ -0,0 +1,54 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class HorizontalLineDrawingRenderer implements DrawingRenderer {
+    type = 'horizontal-line';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [px, py] = pixelPoints[0];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const left = coordSys.x;
+        const right = coordSys.x + coordSys.width;
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1: left, y1: py, x2: right, y2: py },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                // Price label on the right
+                {
+                    type: 'rect',
+                    shape: { x: right - 70, y: py - 10, width: 65, height: 18, r: 2 },
+                    style: { fill: color, opacity: 0.9 },
+                    z2: 10,
+                },
+                {
+                    type: 'text',
+                    x: right - 67,
+                    y: py - 8,
+                    style: {
+                        text: drawing.points[0].value.toFixed(2),
+                        fill: '#fff',
+                        fontSize: 10,
+                        fontFamily: 'monospace',
+                    },
+                    z2: 11,
+                },
+                {
+                    type: 'circle',
+                    name: 'point-0',
+                    shape: { cx: px, cy: py, r: 4 },
+                    style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+                },
+            ],
+        };
+    }
+}

package/src/plugins/HorizontalLineTool/HorizontalLineTool.ts

@@ -0,0 +1,52 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { HorizontalLineDrawingRenderer } from './HorizontalLineDrawingRenderer';
+
+export class HorizontalLineTool extends AbstractPlugin {
+    private zr!: any;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'horizontal-line-tool',
+            name: options?.name || 'Horizontal Line',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="12" x2="22" y2="12"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new HorizontalLineDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.chart.getZr().setCursorStyle('crosshair');
+        this.zr.on('click', this.onClick);
+    }
+
+    protected onDeactivate(): void {
+        this.chart.getZr().setCursorStyle('default');
+        this.zr.off('click', this.onClick);
+    }
+
+    protected onDestroy(): void {}
+
+    private onClick = (params: any) => {
+        const point = this.getPoint(params);
+        if (!point) return;
+
+        const data = this.context.coordinateConversion.pixelToData({
+            x: point[0], y: point[1],
+        });
+
+        if (data) {
+            this.context.addDrawing({
+                id: `hline-${Date.now()}`,
+                type: 'horizontal-line',
+                points: [data],
+                paneIndex: data.paneIndex || 0,
+                style: { color: '#d1d4dc', lineWidth: 1 },
+            });
+        }
+
+        this.context.disableTools();
+    };
+}

package/src/plugins/HorizontalLineTool/index.ts

@@ -0,0 +1,2 @@
+export { HorizontalLineTool } from './HorizontalLineTool';
+export { HorizontalLineDrawingRenderer } from './HorizontalLineDrawingRenderer';

package/src/plugins/HorizontalRayTool/HorizontalRayDrawingRenderer.ts

@@ -0,0 +1,34 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class HorizontalRayDrawingRenderer implements DrawingRenderer {
+    type = 'horizontal-ray';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [px, py] = pixelPoints[0];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const right = coordSys.x + coordSys.width;
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1: px, y1: py, x2: right, y2: py },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                {
+                    type: 'circle',
+                    name: 'point-0',
+                    shape: { cx: px, cy: py, r: 4 },
+                    style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+                },
+            ],
+        };
+    }
+}