@qfo/qfchart 0.8.0 → 0.8.2

package/src/components/DrawingEditor.ts

@@ -1,248 +1,297 @@
-import { ChartContext, DrawingElement, DataCoordinate } from "../types";
-import * as echarts from "echarts";
-
-export class DrawingEditor {
-  private context: ChartContext;
-  private isEditing: boolean = false;
-  private currentDrawing: DrawingElement | null = null;
-  private editingPointIndex: number | null = null;
-  private zr: any;
-
-  // Temporary ZRender elements for visual feedback during drag
-  private editGroup: any = null;
-  private editLine: any = null;
-  private editStartPoint: any = null;
-  private editEndPoint: any = null;
-
-  private isMovingShape: boolean = false;
-  private dragStart: { x: number; y: number } | null = null;
-  private initialPixelPoints: { x: number; y: number }[] = [];
-
-  constructor(context: ChartContext) {
-    this.context = context;
-    this.zr = this.context.getChart().getZr();
-    this.bindEvents();
-  }
-
-  private bindEvents() {
-    this.context.events.on("drawing:point:mousedown", this.onPointMouseDown);
-    this.context.events.on("drawing:mousedown", this.onDrawingMouseDown);
-  }
-
-  private onDrawingMouseDown = (payload: {
-    id: string;
-    x: number;
-    y: number;
-  }) => {
-    if (this.isEditing) return;
-
-    const drawing = this.context.getDrawing(payload.id);
-    if (!drawing) return;
-
-    this.isEditing = true;
-    this.isMovingShape = true;
-    this.currentDrawing = JSON.parse(JSON.stringify(drawing));
-    this.dragStart = { x: payload.x, y: payload.y };
-
-    // Capture initial pixel positions
-    this.initialPixelPoints = drawing.points.map((p) => {
-      const pixel = this.context.coordinateConversion.dataToPixel(p);
-      return pixel ? { x: pixel.x, y: pixel.y } : { x: 0, y: 0 }; // Fallback
-    });
-
-    this.context.lockChart();
-    this.createEditGraphic();
-
-    this.zr.on("mousemove", this.onMouseMove);
-    this.zr.on("mouseup", this.onMouseUp);
-  };
-
-  private onPointMouseDown = (payload: { id: string; pointIndex: number }) => {
-    if (this.isEditing) return;
-
-    const drawing = this.context.getDrawing(payload.id);
-    if (!drawing) return;
-
-    // Start Editing
-    this.isEditing = true;
-    this.currentDrawing = JSON.parse(JSON.stringify(drawing)); // Deep copy
-    this.editingPointIndex = payload.pointIndex;
-
-    this.context.lockChart();
-
-    // Create visual feedback (overlay)
-    this.createEditGraphic();
-
-    // Hide the actual drawing (optional, but good for UX so we don't see double)
-    // Actually, we can just drag the overlay and update the drawing on mouseup.
-    // The underlying drawing remains visible but static until updated.
-
-    // Bind temporary drag listeners
-    this.zr.on("mousemove", this.onMouseMove);
-    this.zr.on("mouseup", this.onMouseUp);
-    // Global mouseup to catch releases outside chart area if needed (window listener better?)
-    // ZRender usually handles global mouseup if initiated within.
-  };
-
-  private createEditGraphic() {
-    if (!this.currentDrawing) return;
-
-    this.editGroup = new echarts.graphic.Group();
-
-    // We need current pixel coordinates
-    const p1Data = this.currentDrawing.points[0];
-    const p2Data = this.currentDrawing.points[1];
-
-    const p1 = this.context.coordinateConversion.dataToPixel(p1Data);
-    const p2 = this.context.coordinateConversion.dataToPixel(p2Data);
-
-    if (!p1 || !p2) return;
-
-    // Create Line
-    this.editLine = new echarts.graphic.Line({
-      shape: { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y },
-      style: {
-        stroke: this.currentDrawing.style?.color || "#3b82f6",
-        lineWidth: this.currentDrawing.style?.lineWidth || 2,
-        lineDash: [4, 4], // Dashed to indicate editing
-      },
-      silent: true, // Events pass through to handlers
-    });
-
-    // Create Points (we only really need to visualize the one being dragged, but showing both is fine)
-    this.editStartPoint = new echarts.graphic.Circle({
-      shape: { cx: p1.x, cy: p1.y, r: 5 },
-      style: { fill: "#fff", stroke: "#3b82f6", lineWidth: 2 },
-      z: 1000,
-    });
-
-    this.editEndPoint = new echarts.graphic.Circle({
-      shape: { cx: p2.x, cy: p2.y, r: 5 },
-      style: { fill: "#fff", stroke: "#3b82f6", lineWidth: 2 },
-      z: 1000,
-    });
-
-    this.editGroup.add(this.editLine);
-    this.editGroup.add(this.editStartPoint);
-    this.editGroup.add(this.editEndPoint);
-
-    this.zr.add(this.editGroup);
-  }
-
-  private onMouseMove = (e: any) => {
-    if (!this.isEditing || !this.currentDrawing) return;
-
-    const x = e.offsetX;
-    const y = e.offsetY;
-
-    if (this.isMovingShape && this.dragStart) {
-      const dx = x - this.dragStart.x;
-      const dy = y - this.dragStart.y;
-
-      // Apply delta to all points
-      const newP1 = {
-        x: this.initialPixelPoints[0].x + dx,
-        y: this.initialPixelPoints[0].y + dy,
-      };
-      const newP2 = {
-        x: this.initialPixelPoints[1].x + dx,
-        y: this.initialPixelPoints[1].y + dy,
-      };
-
-      this.editLine.setShape({
-        x1: newP1.x,
-        y1: newP1.y,
-        x2: newP2.x,
-        y2: newP2.y,
-      });
-      this.editStartPoint.setShape({ cx: newP1.x, cy: newP1.y });
-      this.editEndPoint.setShape({ cx: newP2.x, cy: newP2.y });
-    } else if (this.editingPointIndex !== null) {
-      // Update the pixel position of the edited point in the overlay
-      if (this.editingPointIndex === 0) {
-        this.editLine.setShape({ x1: x, y1: y });
-        this.editStartPoint.setShape({ cx: x, cy: y });
-      } else {
-        this.editLine.setShape({ x2: x, y2: y });
-        this.editEndPoint.setShape({ cx: x, cy: y });
-      }
-    }
-  };
-
-  private onMouseUp = (e: any) => {
-    if (!this.isEditing) return;
-
-    // Commit changes
-    this.finishEditing(e.offsetX, e.offsetY);
-  };
-
-  private finishEditing(finalX: number, finishY: number) {
-    if (!this.currentDrawing) return;
-
-    if (this.isMovingShape && this.dragStart) {
-      const dx = finalX - this.dragStart.x;
-      const dy = finishY - this.dragStart.y;
-
-      // Update all points
-      const newPoints = this.initialPixelPoints.map((p, i) => {
-        const newX = p.x + dx;
-        const newY = p.y + dy;
-        return this.context.coordinateConversion.pixelToData({
-          x: newX,
-          y: newY,
-        });
-      });
-
-      // Check if conversion succeeded
-      if (newPoints.every((p) => p !== null)) {
-        // Update points
-        // Assuming 2 points for line tool
-        if (newPoints[0] && newPoints[1]) {
-          this.currentDrawing.points[0] = newPoints[0];
-          this.currentDrawing.points[1] = newPoints[1];
-
-          // Update pane index if we moved significantly (using start point as ref)
-          if (newPoints[0].paneIndex !== undefined) {
-            this.currentDrawing.paneIndex = newPoints[0].paneIndex;
-          }
-
-          this.context.updateDrawing(this.currentDrawing);
-        }
-      }
-    } else if (this.editingPointIndex !== null) {
-      // Convert final pixel to data
-      const newData = this.context.coordinateConversion.pixelToData({
-        x: finalX,
-        y: finishY,
-      });
-
-      if (newData) {
-        this.currentDrawing.points[this.editingPointIndex] = newData;
-
-        if (this.editingPointIndex === 0 && newData.paneIndex !== undefined) {
-          this.currentDrawing.paneIndex = newData.paneIndex;
-        }
-
-        this.context.updateDrawing(this.currentDrawing);
-      }
-    }
-
-    // Cleanup
-    this.isEditing = false;
-    this.isMovingShape = false;
-    this.dragStart = null;
-    this.initialPixelPoints = [];
-    this.currentDrawing = null;
-    this.editingPointIndex = null;
-
-    if (this.editGroup) {
-      this.zr.remove(this.editGroup);
-      this.editGroup = null;
-    }
-
-    this.zr.off("mousemove", this.onMouseMove);
-    this.zr.off("mouseup", this.onMouseUp);
-
-    this.context.unlockChart();
-  }
-}
+import { ChartContext, DrawingElement, DataCoordinate } from '../types';
+import * as echarts from 'echarts';
+
+export class DrawingEditor {
+    private context: ChartContext;
+    private isEditing: boolean = false;
+    private currentDrawing: DrawingElement | null = null;
+    private editingPointIndex: number | null = null;
+    private zr: any;
+
+    // Temporary ZRender elements for visual feedback during drag
+    private editGroup: any = null;
+    private editLines: any[] = [];
+    private editPoints: any[] = [];
+
+    private isMovingShape: boolean = false;
+    private dragStart: { x: number; y: number } | null = null;
+    private initialPixelPoints: { x: number; y: number }[] = [];
+
+    constructor(context: ChartContext) {
+        this.context = context;
+        this.zr = this.context.getChart().getZr();
+        this.bindEvents();
+    }
+
+    private bindEvents() {
+        this.context.events.on('drawing:point:mousedown', this.onPointMouseDown);
+        this.context.events.on('drawing:mousedown', this.onDrawingMouseDown);
+    }
+
+    private onDrawingMouseDown = (payload: { id: string; x: number; y: number }) => {
+        if (this.isEditing) return;
+
+        const drawing = this.context.getDrawing(payload.id);
+        if (!drawing) return;
+
+        this.isEditing = true;
+        this.isMovingShape = true;
+        this.currentDrawing = JSON.parse(JSON.stringify(drawing));
+        this.dragStart = { x: payload.x, y: payload.y };
+
+        // Capture initial pixel positions for all points
+        this.initialPixelPoints = drawing.points.map((p) => {
+            const pixel = this.context.coordinateConversion.dataToPixel(p);
+            return pixel ? { x: pixel.x, y: pixel.y } : { x: 0, y: 0 };
+        });
+
+        this.context.lockChart();
+        this.createEditGraphic();
+
+        this.zr.on('mousemove', this.onMouseMove);
+        this.zr.on('mouseup', this.onMouseUp);
+        // Safety net: catch mouseup outside the canvas
+        window.addEventListener('mouseup', this.onWindowMouseUp);
+    };
+
+    private onPointMouseDown = (payload: { id: string; pointIndex: number }) => {
+        if (this.isEditing) return;
+
+        const drawing = this.context.getDrawing(payload.id);
+        if (!drawing) return;
+
+        this.isEditing = true;
+        this.currentDrawing = JSON.parse(JSON.stringify(drawing));
+        this.editingPointIndex = payload.pointIndex;
+
+        // Capture initial pixel positions for all points
+        this.initialPixelPoints = drawing.points.map((p) => {
+            const pixel = this.context.coordinateConversion.dataToPixel(p);
+            return pixel ? { x: pixel.x, y: pixel.y } : { x: 0, y: 0 };
+        });
+
+        this.context.lockChart();
+        this.createEditGraphic();
+
+        this.zr.on('mousemove', this.onMouseMove);
+        this.zr.on('mouseup', this.onMouseUp);
+        // Safety net: catch mouseup outside the canvas
+        window.addEventListener('mouseup', this.onWindowMouseUp);
+    };
+
+    private createEditGraphic() {
+        if (!this.currentDrawing) return;
+
+        this.editGroup = new echarts.graphic.Group();
+        this.editLines = [];
+        this.editPoints = [];
+
+        const pixelPts = this.currentDrawing.points.map((p) => {
+            const px = this.context.coordinateConversion.dataToPixel(p);
+            return px ? { x: px.x, y: px.y } : null;
+        });
+
+        if (pixelPts.some((p) => !p)) return;
+        const pts = pixelPts as { x: number; y: number }[];
+
+        // Connect consecutive points with dashed lines
+        for (let i = 0; i < pts.length - 1; i++) {
+            const line = new echarts.graphic.Line({
+                shape: { x1: pts[i].x, y1: pts[i].y, x2: pts[i + 1].x, y2: pts[i + 1].y },
+                style: {
+                    stroke: this.currentDrawing.style?.color || '#3b82f6',
+                    lineWidth: this.currentDrawing.style?.lineWidth || 2,
+                    lineDash: [4, 4],
+                },
+                silent: true,
+            });
+            this.editLines.push(line);
+            this.editGroup.add(line);
+        }
+
+        // Control point circles for each point
+        for (let i = 0; i < pts.length; i++) {
+            const circle = new echarts.graphic.Circle({
+                shape: { cx: pts[i].x, cy: pts[i].y, r: 5 },
+                style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 2 },
+                z: 1000,
+            });
+            this.editPoints.push(circle);
+            this.editGroup.add(circle);
+        }
+
+        this.zr.add(this.editGroup);
+    }
+
+    private onMouseMove = (e: any) => {
+        if (!this.isEditing || !this.currentDrawing) return;
+
+        const x = e.offsetX;
+        const y = e.offsetY;
+
+        if (this.isMovingShape && this.dragStart) {
+            const dx = x - this.dragStart.x;
+            const dy = y - this.dragStart.y;
+
+            // Compute new positions for all points
+            const newPts = this.initialPixelPoints.map((p) => ({
+                x: p.x + dx,
+                y: p.y + dy,
+            }));
+
+            // Update lines
+            for (let i = 0; i < this.editLines.length; i++) {
+                this.editLines[i].setShape({
+                    x1: newPts[i].x,
+                    y1: newPts[i].y,
+                    x2: newPts[i + 1].x,
+                    y2: newPts[i + 1].y,
+                });
+            }
+
+            // Update point circles
+            for (let i = 0; i < this.editPoints.length; i++) {
+                this.editPoints[i].setShape({ cx: newPts[i].x, cy: newPts[i].y });
+            }
+        } else if (this.editingPointIndex !== null) {
+            // Compute new positions: only the dragged point moves
+            const newPts = this.initialPixelPoints.map((p) => ({ x: p.x, y: p.y }));
+            newPts[this.editingPointIndex] = { x, y };
+
+            // Update lines connected to this point
+            for (let i = 0; i < this.editLines.length; i++) {
+                this.editLines[i].setShape({
+                    x1: newPts[i].x,
+                    y1: newPts[i].y,
+                    x2: newPts[i + 1].x,
+                    y2: newPts[i + 1].y,
+                });
+            }
+
+            // Update the dragged point circle
+            this.editPoints[this.editingPointIndex].setShape({ cx: x, cy: y });
+        }
+    };
+
+    private onMouseUp = (e: any) => {
+        if (!this.isEditing) return;
+        this.finishEditing(e.offsetX, e.offsetY);
+    };
+
+    /**
+     * Safety net: catches mouseup when the cursor leaves the canvas area.
+     * Uses the last known pixel positions to compute the final drop location
+     * relative to the chart container.
+     */
+    private onWindowMouseUp = (e: MouseEvent) => {
+        if (!this.isEditing) return;
+
+        // Convert page coordinates to offset relative to the chart canvas
+        const dom = this.zr.dom as HTMLElement;
+        if (dom) {
+            const rect = dom.getBoundingClientRect();
+            const offsetX = e.clientX - rect.left;
+            const offsetY = e.clientY - rect.top;
+            this.finishEditing(offsetX, offsetY);
+        } else {
+            // Fallback: just clean up without committing the move
+            this.finishEditing(this.dragStart?.x ?? 0, this.dragStart?.y ?? 0);
+        }
+    };
+
+    /**
+     * Convert pixel to data, falling back to the drawing's known pane
+     * when the point is outside the grid (e.g., dragged beyond viewport).
+     * Uses convertFromPixel with the specific gridIndex directly, bypassing
+     * the containPixel check that would return null for out-of-bounds points.
+     */
+    private pixelToDataForPane(x: number, y: number, paneIndex: number): DataCoordinate | null {
+        // First try the normal conversion (respects pane boundaries)
+        const normal = this.context.coordinateConversion.pixelToData({ x, y });
+        if (normal) return normal;
+
+        // Fallback: force conversion using the drawing's known pane
+        try {
+            const chart = this.context.getChart();
+            const p = chart.convertFromPixel({ gridIndex: paneIndex }, [x, y]);
+            if (p) {
+                // We need the dataIndexOffset — read from the chart's xAxis data length
+                const option = chart.getOption() as any;
+                const xAxisData = option?.xAxis?.[paneIndex]?.data;
+                const marketData = this.context.getMarketData();
+                const dataIndexOffset = xAxisData ? Math.round((xAxisData.length - marketData.length) / 2) : 0;
+                return { timeIndex: Math.round(p[0]) - dataIndexOffset, value: p[1], paneIndex };
+            }
+        } catch (_) {
+            // Ignore conversion errors
+        }
+        return null;
+    }
+
+    private finishEditing(finalX: number, finalY: number) {
+        if (!this.currentDrawing) {
+            this.cleanup();
+            return;
+        }
+
+        const paneIndex = this.currentDrawing.paneIndex || 0;
+
+        if (this.isMovingShape && this.dragStart) {
+            const dx = finalX - this.dragStart.x;
+            const dy = finalY - this.dragStart.y;
+
+            // Update all points using pane-aware conversion
+            const newPoints = this.initialPixelPoints.map((p) =>
+                this.pixelToDataForPane(p.x + dx, p.y + dy, paneIndex),
+            );
+
+            if (newPoints.every((p) => p !== null)) {
+                for (let i = 0; i < newPoints.length; i++) {
+                    this.currentDrawing.points[i] = newPoints[i]!;
+                }
+
+                if (newPoints[0]?.paneIndex !== undefined) {
+                    this.currentDrawing.paneIndex = newPoints[0].paneIndex;
+                }
+
+                this.context.updateDrawing(this.currentDrawing);
+            }
+        } else if (this.editingPointIndex !== null) {
+            const newData = this.pixelToDataForPane(finalX, finalY, paneIndex);
+
+            if (newData) {
+                this.currentDrawing.points[this.editingPointIndex] = newData;
+
+                if (this.editingPointIndex === 0 && newData.paneIndex !== undefined) {
+                    this.currentDrawing.paneIndex = newData.paneIndex;
+                }
+
+                this.context.updateDrawing(this.currentDrawing);
+            }
+        }
+
+        this.cleanup();
+    }
+
+    private cleanup() {
+        this.isEditing = false;
+        this.isMovingShape = false;
+        this.dragStart = null;
+        this.initialPixelPoints = [];
+        this.currentDrawing = null;
+        this.editingPointIndex = null;
+        this.editLines = [];
+        this.editPoints = [];
+
+        if (this.editGroup) {
+            this.zr.remove(this.editGroup);
+            this.editGroup = null;
+        }
+
+        this.zr.off('mousemove', this.onMouseMove);
+        this.zr.off('mouseup', this.onMouseUp);
+        window.removeEventListener('mouseup', this.onWindowMouseUp);
+
+        this.context.unlockChart();
+    }
+}

package/src/components/DrawingRendererRegistry.ts

@@ -0,0 +1,13 @@
+import { DrawingRenderer } from '../types';
+
+export class DrawingRendererRegistry {
+    private renderers = new Map<string, DrawingRenderer>();
+
+    register(renderer: DrawingRenderer): void {
+        this.renderers.set(renderer.type, renderer);
+    }
+
+    get(type: string): DrawingRenderer | undefined {
+        return this.renderers.get(type);
+    }
+}

package/src/components/GraphicBuilder.ts

@@ -8,7 +8,7 @@ export class GraphicBuilder {
         onToggle: (id: string, action?: 'collapse' | 'maximize' | 'fullscreen') => void,
         isMainCollapsed: boolean = false,
         maximizedPaneId: string | null = null,
-        overlayIndicators: { id: string; titleColor?: string }[] = []
+        overlayIndicators: { id: string; titleColor?: string }[] = [],
     ): any[] {
         const graphic: any[] = [];
         const pixelToPercent = layout.pixelToPercent;
@@ -29,7 +29,7 @@ export class GraphicBuilder {
                 top: mainPaneTop + titleTopMargin + '%',
                 z: 10,
                 style: {
-                    text: options.title || 'Market',
+                    text: options.title || '',
                     fill: options.titleColor || '#fff',
                     font: `bold 16px ${options.fontFamily || 'sans-serif'}`,
                     textVerticalAlign: 'top',