@qfo/qfchart 0.8.0 → 0.8.2

package/src/plugins/MeasureTool/index.ts

@@ -0,0 +1 @@
+export { MeasureTool } from './MeasureTool';

package/src/plugins/RayTool/RayDrawingRenderer.ts

@@ -0,0 +1,69 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class RayDrawingRenderer implements DrawingRenderer {
+    type = 'ray';
+
+    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';
+
+        // Extend the ray from p1 through p2 to the chart boundary
+        const [ex, ey] = this.extendToEdge(x1, y1, x2, y2, coordSys);
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2: ex, y2: ey },
+                    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(
+        x1: number, y1: number, x2: number, y2: number,
+        cs: { x: number; y: number; width: number; height: number },
+    ): [number, number] {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        if (dx === 0 && dy === 0) return [x2, y2];
+
+        const left = cs.x;
+        const right = cs.x + cs.width;
+        const top = cs.y;
+        const bottom = cs.y + cs.height;
+
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (right - x1) / dx : (left - x1) / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (bottom - y1) / dy : (top - y1) / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+
+        return [x1 + tMax * dx, y1 + tMax * dy];
+    }
+}

package/src/plugins/RayTool/RayTool.ts

@@ -0,0 +1,162 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { RayDrawingRenderer } from './RayDrawingRenderer';
+import * as echarts from 'echarts';
+
+const COLOR = '#d1d4dc';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class RayTool 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 dashLine: any = null;
+    private startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'ray-tool',
+            name: options?.name || 'Ray',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="20" x2="21" y2="4"/><circle cx="21" cy="4" r="0" fill="currentColor"/><polyline points="16,4 21,4 21,9" stroke-width="1.5"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new RayDrawingRenderer());
+    }
+
+    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: `ray-${Date.now()}`,
+                        type: 'ray',
+                        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.dashLine = 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.dashLine);
+        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 });
+
+        // Dashed extension from p2 to chart edge
+        const [ex, ey] = this.extendToEdge(x1, y1, x2, y2);
+        this.dashLine.setShape({ x1: x2, y1: y2, x2: ex, y2: ey });
+    }
+
+    private extendToEdge(x1: number, y1: number, x2: number, y2: number): [number, number] {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        if (dx === 0 && dy === 0) return [x2, y2];
+
+        const w = this.chart.getWidth();
+        const h = this.chart.getHeight();
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (w - x1) / dx : -x1 / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (h - y1) / dy : -y1 / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+        return [x1 + tMax * dx, y1 + tMax * dy];
+    }
+}

package/src/plugins/RayTool/index.ts

@@ -0,0 +1,2 @@
+export { RayTool } from './RayTool';
+export { RayDrawingRenderer } from './RayDrawingRenderer';

package/src/plugins/ThreeDrivesPatternTool/ThreeDrivesPatternDrawingRenderer.ts

@@ -0,0 +1,106 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+// Points: 0=start, 1=drive1, 2=correction1, 3=drive2, 4=correction2, 5=drive3, 6=end
+const LABELS = ['0', 'D1', 'C1', 'D2', 'C2', 'D3', ''];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336', '#00bcd4', '#e91e63'];
+
+export class ThreeDrivesPatternDrawingRenderer implements DrawingRenderer {
+    type = 'three_drives_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 drive regions
+        // Drive 1 zone (0,1,2)
+        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.06)' } });
+        }
+        // Drive 2 zone (2,3,4)
+        if (pixelPoints.length >= 5) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(2, 5).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(76, 175, 80, 0.06)' } });
+        }
+        // Drive 3 zone (4,5,6)
+        if (pixelPoints.length >= 7) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(4, 7).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(0, 188, 212, 0.06)' } });
+        }
+
+        // Zigzag 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 lines connecting drives (1→3, 3→5) and corrections (2→4)
+        const connectors: [number, number][] = [[1, 3], [3, 5], [2, 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 between drives
+        const pts = drawing.points;
+        // Drive2/Drive1
+        if (pts.length >= 4) {
+            const d1 = Math.abs(pts[1].value - pts[0].value);
+            const d2 = Math.abs(pts[3].value - pts[2].value);
+            if (d1 !== 0) {
+                const r = (d2 / d1).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: `D2/D1: ${r}`, x: mx + 10, y: my, fill: '#4caf50', fontSize: 9 }, silent: true });
+            }
+        }
+        // Drive3/Drive2
+        if (pts.length >= 6) {
+            const d2 = Math.abs(pts[3].value - pts[2].value);
+            const d3 = Math.abs(pts[5].value - pts[4].value);
+            if (d2 !== 0) {
+                const r = (d3 / d2).toFixed(3);
+                const mx = (pixelPoints[4][0] + pixelPoints[5][0]) / 2;
+                const my = (pixelPoints[4][1] + pixelPoints[5][1]) / 2;
+                children.push({ type: 'text', style: { text: `D3/D2: ${r}`, x: mx + 10, y: my, fill: '#00bcd4', fontSize: 9 }, silent: true });
+            }
+        }
+        // Correction1/Drive1
+        if (pts.length >= 3) {
+            const d1 = Math.abs(pts[1].value - pts[0].value);
+            const c1 = Math.abs(pts[2].value - pts[1].value);
+            if (d1 !== 0) {
+                const r = (c1 / d1).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: r, x: mx + 8, y: my, fill: '#ff9800', fontSize: 10 }, silent: true });
+            }
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            if (!LABELS[i]) continue;
+            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: 11, 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/ThreeDrivesPatternTool/ThreeDrivesPatternTool.ts

@@ -0,0 +1,98 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { ThreeDrivesPatternDrawingRenderer } from './ThreeDrivesPatternDrawingRenderer';
+
+const LABELS = ['0', 'D1', 'C1', 'D2', 'C2', 'D3', ''];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50', '#f44336', '#00bcd4', '#e91e63'];
+const TOTAL_POINTS = 7;
+
+export class ThreeDrivesPatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'three-drives-pattern-tool',
+            name: options.name || 'Three Drives',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="1,20 4,8 7,14 11,5 15,12 19,2 23,10"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new ThreeDrivesPatternDrawingRenderer()); }
+
+    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);
+        zr.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.06)' }, silent: true }));
+        if (pts.length >= 5) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(2, 5) }, style: { fill: 'rgba(76,175,80,0.06)' }, silent: true }));
+        if (pts.length >= 7) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(4, 7) }, style: { fill: 'rgba(0,188,212,0.06)' }, silent: true }));
+
+        // Zigzag
+        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
+        const conn: [number, number][] = [[1, 3], [3, 5], [2, 4]];
+        for (const [f, t] of conn) {
+            if (f < pts.length && t < pts.length) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[f][0], y1: pts[f][1], x2: pts[t][0], y2: pts[t][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]);
+            if (LABELS[i]) {
+                this.graphicGroup.add(new echarts.graphic.Text({ style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 11, 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: `3drives-${Date.now()}`, type: 'three_drives_pattern', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/ThreeDrivesPatternTool/index.ts

@@ -0,0 +1,2 @@
+export { ThreeDrivesPatternTool } from './ThreeDrivesPatternTool';
+export { ThreeDrivesPatternDrawingRenderer } from './ThreeDrivesPatternDrawingRenderer';

package/src/plugins/ToolGroup.ts

@@ -0,0 +1,211 @@
+import { ChartContext, Plugin, PluginConfig } from '../types';
+import { AbstractPlugin } from '../components/AbstractPlugin';
+
+export interface ToolGroupConfig extends Omit<PluginConfig, 'id'> {
+    id?: string;
+    name: string;
+    icon?: string;
+}
+
+export class ToolGroup extends AbstractPlugin {
+    private plugins: Plugin[] = [];
+    private activeSubPlugin: Plugin | null = null;
+    private menuElement: HTMLElement | null = null;
+    private buttonElement: HTMLElement | null = null;
+    private originalIcon: string = '';
+    private arrowSvg: string = '';
+
+    constructor(config: ToolGroupConfig) {
+        // Create a small right-facing chevron arrow to indicate a dropdown menu
+        const arrowSvg = `<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; right: -4px; top: 50%; transform: translateY(-50%); opacity: 0.6;"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+        
+        let enhancedIcon = '';
+        if (config.icon) {
+            enhancedIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    ${config.icon}
+                </div>
+                ${arrowSvg}
+            </div>`;
+        } else {
+            enhancedIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                <span>${config.name.substring(0, 2).toUpperCase()}</span>
+                ${arrowSvg}
+            </div>`;
+        }
+
+        super({
+            id: config.id || `group-${config.name.toLowerCase().replace(/\s+/g, '-')}`,
+            name: config.name,
+            icon: enhancedIcon
+        });
+        
+        this.originalIcon = enhancedIcon;
+        this.arrowSvg = arrowSvg;
+    }
+
+    public add(plugin: Plugin): void {
+        this.plugins.push(plugin);
+    }
+
+    protected onInit(): void {
+        this.plugins.forEach(p => p.init(this.context));
+    }
+
+    protected onActivate(): void {
+        this.showMenu();
+    }
+
+    protected onDeactivate(): void {
+        this.hideMenu();
+        if (this.activeSubPlugin) {
+            this.activeSubPlugin.deactivate?.();
+            this.activeSubPlugin = null;
+        }
+        
+        // Restore original icon
+        if (this.buttonElement) {
+            this.buttonElement.innerHTML = this.originalIcon;
+        }
+    }
+
+    protected onDestroy(): void {
+        this.hideMenu();
+        this.plugins.forEach(p => p.destroy?.());
+    }
+
+    private showMenu(): void {
+        this.buttonElement = document.getElementById(`qfchart-plugin-btn-${this.id}`);
+        if (!this.buttonElement) return;
+
+        if (this.menuElement) {
+            this.hideMenu();
+        }
+
+        this.menuElement = document.createElement('div');
+        Object.assign(this.menuElement.style, {
+            position: 'fixed',
+            backgroundColor: '#1e293b',
+            border: '1px solid #334155',
+            borderRadius: '6px',
+            padding: '4px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            zIndex: '10000',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3)',
+            minWidth: '150px'
+        });
+
+        this.plugins.forEach(plugin => {
+            const item = document.createElement('div');
+            Object.assign(item.style, {
+                display: 'flex',
+                alignItems: 'center',
+                padding: '8px 12px',
+                cursor: 'pointer',
+                color: '#cbd5e1',
+                borderRadius: '4px',
+                fontSize: '13px',
+                fontFamily: this.context.getOptions().fontFamily || 'sans-serif',
+                transition: 'background-color 0.2s'
+            });
+
+            item.addEventListener('mouseenter', () => {
+                item.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+            });
+            item.addEventListener('mouseleave', () => {
+                item.style.backgroundColor = 'transparent';
+            });
+
+            if (plugin.icon) {
+                const iconContainer = document.createElement('div');
+                iconContainer.innerHTML = plugin.icon;
+                Object.assign(iconContainer.style, {
+                    width: '20px',
+                    height: '20px',
+                    marginRight: '10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                });
+                const svg = iconContainer.querySelector('svg');
+                if (svg) {
+                    svg.style.width = '100%';
+                    svg.style.height = '100%';
+                }
+                item.appendChild(iconContainer);
+            }
+
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = plugin.name || plugin.id;
+            item.appendChild(nameSpan);
+
+            item.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.activateSubPlugin(plugin);
+            });
+
+            this.menuElement!.appendChild(item);
+        });
+
+        document.body.appendChild(this.menuElement);
+
+        const rect = this.buttonElement.getBoundingClientRect();
+        this.menuElement.style.top = `${rect.top}px`;
+        this.menuElement.style.left = `${rect.right + 5}px`;
+
+        // Delay attaching the outside click listener so it doesn't fire on the current click
+        setTimeout(() => {
+            document.addEventListener('click', this.handleOutsideClick);
+        }, 0);
+    }
+
+    private hideMenu(): void {
+        if (this.menuElement && this.menuElement.parentNode) {
+            this.menuElement.parentNode.removeChild(this.menuElement);
+        }
+        this.menuElement = null;
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+
+    private handleOutsideClick = (e: MouseEvent): void => {
+        if (this.menuElement && !this.menuElement.contains(e.target as Node)) {
+            this.hideMenu();
+            if (!this.activeSubPlugin) {
+                // If clicked outside and no sub-plugin is active, deactivate the group
+                this.buttonElement?.click();
+            }
+        }
+    };
+
+    private activateSubPlugin(plugin: Plugin): void {
+        this.hideMenu();
+        
+        if (this.activeSubPlugin) {
+            this.activeSubPlugin.deactivate?.();
+        }
+
+        this.activeSubPlugin = plugin;
+        this.activeSubPlugin.activate?.();
+
+        // Update the group's button icon to match the active plugin
+        if (this.buttonElement) {
+            let subIcon = '';
+            if (plugin.icon) {
+                subIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                        ${plugin.icon}
+                    </div>
+                    ${this.arrowSvg}
+                </div>`;
+            } else {
+                subIcon = `<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+                    <span>${(plugin.name || plugin.id).substring(0, 2).toUpperCase()}</span>
+                    ${this.arrowSvg}
+                </div>`;
+            }
+            this.buttonElement.innerHTML = subIcon;
+        }
+    }
+}