@qfo/qfchart 0.5.0

package/src/Utils.ts

@@ -0,0 +1,31 @@
+const imageCache = new Map<string, string>();
+
+export function textToBase64Image(
+  text: string,
+  color: string = "#00da3c",
+  fontSize: string = "64px"
+): string {
+  if (typeof document === "undefined") return "";
+
+  const cacheKey = `${text}-${color}-${fontSize}`;
+  if (imageCache.has(cacheKey)) {
+    return imageCache.get(cacheKey)!;
+  }
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = 32;
+  canvas.height = 32;
+
+  if (ctx) {
+    ctx.font = "bold " + fontSize + " Arial";
+    ctx.fillStyle = color;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, 16, 16);
+    const dataUrl = canvas.toDataURL("image/png");
+    imageCache.set(cacheKey, dataUrl);
+    return dataUrl;
+  }
+  return "";
+}

package/src/components/AbstractPlugin.ts

@@ -0,0 +1,104 @@
+import { ChartContext, Plugin, PluginConfig, OHLCV } from "../types";
+import { EventType, EventHandler } from "../utils/EventBus";
+
+export abstract class AbstractPlugin implements Plugin {
+  public id: string;
+  public name?: string;
+  public icon?: string;
+
+  protected context!: ChartContext;
+  private eventListeners: Array<{ event: EventType; handler: EventHandler }> =
+    [];
+
+  constructor(config: PluginConfig) {
+    this.id = config.id;
+    this.name = config.name;
+    this.icon = config.icon;
+  }
+
+  public init(context: ChartContext): void {
+    this.context = context;
+    this.onInit();
+  }
+
+  /**
+   * Lifecycle hook called after context is initialized.
+   * Override this instead of init().
+   */
+  protected onInit(): void {}
+
+  public activate(): void {
+    this.onActivate();
+    this.context.events.emit("plugin:activated", this.id);
+  }
+
+  /**
+   * Lifecycle hook called when the plugin is activated.
+   */
+  protected onActivate(): void {}
+
+  public deactivate(): void {
+    this.onDeactivate();
+    this.context.events.emit("plugin:deactivated", this.id);
+  }
+
+  /**
+   * Lifecycle hook called when the plugin is deactivated.
+   */
+  protected onDeactivate(): void {}
+
+  public destroy(): void {
+    this.removeAllListeners();
+    this.onDestroy();
+  }
+
+  /**
+   * Lifecycle hook called when the plugin is destroyed.
+   */
+  protected onDestroy(): void {}
+
+  // --- Helper Methods ---
+
+  /**
+   * Register an event listener that will be automatically cleaned up on destroy.
+   */
+  protected on(event: EventType, handler: EventHandler): void {
+    this.context.events.on(event, handler);
+    this.eventListeners.push({ event, handler });
+  }
+
+  /**
+   * Remove a specific event listener.
+   */
+  protected off(event: EventType, handler: EventHandler): void {
+    this.context.events.off(event, handler);
+    this.eventListeners = this.eventListeners.filter(
+      (l) => l.event !== event || l.handler !== handler
+    );
+  }
+
+  /**
+   * Remove all listeners registered by this plugin.
+   */
+  protected removeAllListeners(): void {
+    this.eventListeners.forEach(({ event, handler }) => {
+      this.context.events.off(event, handler);
+    });
+    this.eventListeners = [];
+  }
+
+  /**
+   * Access to the ECharts instance.
+   */
+  protected get chart() {
+    return this.context.getChart();
+  }
+
+  /**
+   * Access to market data.
+   */
+  protected get marketData(): OHLCV[] {
+    return this.context.getMarketData();
+  }
+}
+

package/src/components/DrawingEditor.ts

@@ -0,0 +1,248 @@
+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();
+  }
+}

package/src/components/GraphicBuilder.ts

@@ -0,0 +1,263 @@
+import { LayoutResult } from './LayoutManager';
+import { QFChartOptions } from '../types';
+
+export class GraphicBuilder {
+    public static build(
+        layout: LayoutResult,
+        options: QFChartOptions,
+        onToggle: (id: string, action?: 'collapse' | 'maximize' | 'fullscreen') => void,
+        isMainCollapsed: boolean = false,
+        maximizedPaneId: string | null = null
+    ): any[] {
+        const graphic: any[] = [];
+        const pixelToPercent = layout.pixelToPercent;
+        const mainPaneTop = layout.mainPaneTop;
+
+        // Main Chart Title (Only if main chart is visible or maximized)
+        // If maximizedPaneId is set and NOT main, main title should be hidden?
+        // With current LayoutManager logic, if maximizedPaneId !== main, mainPaneHeight is 0.
+        // We should check heights or IDs.
+
+        const showMain = !maximizedPaneId || maximizedPaneId === 'main';
+
+        if (showMain) {
+            const titleTopMargin = 10 * pixelToPercent;
+            graphic.push({
+                type: 'text',
+                left: '8.5%',
+                top: mainPaneTop + titleTopMargin + '%',
+                z: 10,
+                style: {
+                    text: options.title || 'Market',
+                    fill: options.titleColor || '#fff',
+                    font: `bold 16px ${options.fontFamily || 'sans-serif'}`,
+                    textVerticalAlign: 'top',
+                },
+            });
+
+            // Watermark
+            if (options.watermark !== false) {
+                const bottomY = layout.mainPaneTop + layout.mainPaneHeight;
+                graphic.push({
+                    type: 'text',
+                    right: '11%',
+                    top: bottomY - 3 + '%', // Position 5% from bottom of main chart
+                    z: 10,
+                    style: {
+                        text: 'QFChart',
+                        fill: options.fontColor || '#cbd5e1',
+                        font: `bold 16px sans-serif`,
+                        opacity: 0.1,
+                    },
+                    cursor: 'pointer',
+                    onclick: () => {
+                        window.open('https://quantforge.org', '_blank');
+                    },
+                });
+            }
+
+            // Main Controls Group
+            const controls: any[] = [];
+
+            // Collapse Button
+            if (options.controls?.collapse) {
+                controls.push({
+                    type: 'group',
+                    children: [
+                        {
+                            type: 'rect',
+                            shape: { width: 20, height: 20, r: 2 },
+                            style: { fill: '#334155', stroke: '#475569', lineWidth: 1 },
+                            onclick: () => onToggle('main', 'collapse'),
+                        },
+                        {
+                            type: 'text',
+                            style: {
+                                text: isMainCollapsed ? '+' : '−',
+                                fill: '#cbd5e1',
+                                font: `bold 14px ${options.fontFamily}`,
+                                x: 10,
+                                y: 10,
+                                textAlign: 'center',
+                                textVerticalAlign: 'middle',
+                            },
+                            silent: true,
+                        },
+                    ],
+                });
+            }
+
+            // Maximize Button
+            if (options.controls?.maximize) {
+                const isMaximized = maximizedPaneId === 'main';
+                // Shift x position if collapse button exists
+                const xOffset = options.controls?.collapse ? 25 : 0;
+
+                controls.push({
+                    type: 'group',
+                    x: xOffset,
+                    children: [
+                        {
+                            type: 'rect',
+                            shape: { width: 20, height: 20, r: 2 },
+                            style: { fill: '#334155', stroke: '#475569', lineWidth: 1 },
+                            onclick: () => onToggle('main', 'maximize'),
+                        },
+                        {
+                            type: 'text',
+                            style: {
+                                text: isMaximized ? '❐' : '□', // Simple chars for now
+                                fill: '#cbd5e1',
+                                font: `14px ${options.fontFamily}`,
+                                x: 10,
+                                y: 10,
+                                textAlign: 'center',
+                                textVerticalAlign: 'middle',
+                            },
+                            silent: true,
+                        },
+                    ],
+                });
+            }
+
+            // Fullscreen Button
+            if (options.controls?.fullscreen) {
+                let xOffset = 0;
+                if (options.controls?.collapse) xOffset += 25;
+                if (options.controls?.maximize) xOffset += 25;
+
+                controls.push({
+                    type: 'group',
+                    x: xOffset,
+                    children: [
+                        {
+                            type: 'rect',
+                            shape: { width: 20, height: 20, r: 2 },
+                            style: { fill: '#334155', stroke: '#475569', lineWidth: 1 },
+                            onclick: () => onToggle('main', 'fullscreen'),
+                        },
+                        {
+                            type: 'text',
+                            style: {
+                                text: '⛶',
+                                fill: '#cbd5e1',
+                                font: `14px ${options.fontFamily}`,
+                                x: 10,
+                                y: 10,
+                                textAlign: 'center',
+                                textVerticalAlign: 'middle',
+                            },
+                            silent: true,
+                        },
+                    ],
+                });
+            }
+
+            if (controls.length > 0) {
+                graphic.push({
+                    type: 'group',
+                    right: '10.5%',
+                    top: mainPaneTop + '%',
+                    children: controls,
+                });
+            }
+        }
+
+        // Indicator Panes
+        layout.paneLayout.forEach((pane) => {
+            // If maximizedPaneId is set, and this is NOT the maximized pane, skip rendering its controls
+            if (maximizedPaneId && pane.indicatorId !== maximizedPaneId) {
+                return;
+            }
+
+            // Title
+            graphic.push({
+                type: 'text',
+                left: '8.5%',
+                top: pane.top + 10 * pixelToPercent + '%',
+                z: 10,
+                style: {
+                    text: pane.indicatorId || '',
+                    fill: pane.titleColor || '#fff',
+                    font: `bold 12px ${options.fontFamily || 'sans-serif'}`,
+                    textVerticalAlign: 'top',
+                },
+            });
+
+            // Controls
+            const controls: any[] = [];
+
+            // Collapse
+            if (pane.controls?.collapse) {
+                controls.push({
+                    type: 'group',
+                    children: [
+                        {
+                            type: 'rect',
+                            shape: { width: 20, height: 20, r: 2 },
+                            style: { fill: '#334155', stroke: '#475569', lineWidth: 1 },
+                            onclick: () => pane.indicatorId && onToggle(pane.indicatorId, 'collapse'),
+                        },
+                        {
+                            type: 'text',
+                            style: {
+                                text: pane.isCollapsed ? '+' : '−',
+                                fill: '#cbd5e1',
+                                font: `bold 14px ${options.fontFamily}`,
+                                x: 10,
+                                y: 10,
+                                textAlign: 'center',
+                                textVerticalAlign: 'middle',
+                            },
+                            silent: true,
+                        },
+                    ],
+                });
+            }
+
+            // Maximize
+            if (pane.controls?.maximize) {
+                // Assuming we add maximize to Indicator controls
+                const isMaximized = maximizedPaneId === pane.indicatorId;
+                const xOffset = pane.controls?.collapse ? 25 : 0;
+
+                controls.push({
+                    type: 'group',
+                    x: xOffset,
+                    children: [
+                        {
+                            type: 'rect',
+                            shape: { width: 20, height: 20, r: 2 },
+                            style: { fill: '#334155', stroke: '#475569', lineWidth: 1 },
+                            onclick: () => pane.indicatorId && onToggle(pane.indicatorId, 'maximize'),
+                        },
+                        {
+                            type: 'text',
+                            style: {
+                                text: isMaximized ? '❐' : '□',
+                                fill: '#cbd5e1',
+                                font: `14px ${options.fontFamily}`,
+                                x: 10,
+                                y: 10,
+                                textAlign: 'center',
+                                textVerticalAlign: 'middle',
+                            },
+                            silent: true,
+                        },
+                    ],
+                });
+            }
+
+            if (controls.length > 0) {
+                graphic.push({
+                    type: 'group',
+                    right: '10.5%',
+                    top: pane.top + '%',
+                    children: controls,
+                });
+            }
+        });
+
+        return graphic;
+    }
+}