@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/core/MermaidFlowchartRenderer.js

@@ -359,117 +359,182 @@ export function renderFlowchartPreviewSVG(diagram) {
 }
 
 /**
- * Render a flowchart diagram onto the canvas inside a Frame.
+ * Render a flowchart diagram onto the canvas as a real engine `Frame`
+ * containing independent shapes — Rectangle nodes (with embedded labels)
+ * joined by Arrow edges. Each child is fully independent for click /
+ * drag / resize / colour-change, exactly like a user-drawn shape; the
+ * Frame's `_diagramType` marker means deleting it pulls every child with
+ * it (so the diagram behaves as one logical unit when you're done with
+ * it) — see Frame.destroy().
+ *
+ * Issue #34 bug #3 (follow-up to #22 phase 5): drops the shared `groupId`
+ * glue that made selecting one shape select the whole diagram; the Frame
+ * is the explicit container instead.
  */
 export function renderFlowchartOnCanvas(diagram) {
     if (!diagram || !diagram.nodes || diagram.nodes.length === 0) return false;
-    if (!window.svg || !window.Frame) {
+    if (!window.svg || !window.Rectangle || !window.Frame) {
         console.error('[FlowchartRenderer] Engine not initialized');
         return false;
     }
 
-    // Generate the SVG markup (no fixed size — use natural dimensions)
-    const svgMarkup = renderFlowchartSVG(diagram);
-    if (!svgMarkup) return false;
-
-    // Parse SVG to get dimensions
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgMarkup, 'image/svg+xml');
-    const svgEl = doc.querySelector('svg');
-    if (!svgEl) return false;
+    const nodes = diagram.nodes;
+    const edges = diagram.edges || [];
 
-    const gWidth = parseFloat(svgEl.getAttribute('width'));
-    const gHeight = parseFloat(svgEl.getAttribute('height'));
+    // Diagram bounds (in the renderer's natural coordinate space)
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    nodes.forEach((n) => {
+        const nw = n.width || 140;
+        const nh = n.height || 60;
+        minX = Math.min(minX, n.x);
+        minY = Math.min(minY, n.y);
+        maxX = Math.max(maxX, n.x + nw);
+        maxY = Math.max(maxY, n.y + nh);
+    });
+    const dw = (maxX - minX) || 1;
+    const dh = (maxY - minY) || 1;
 
-    // Viewport center
+    // Center on the current viewport
     const vb = window.currentViewBox || { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
     const vcx = vb.x + vb.width / 2;
     const vcy = vb.y + vb.height / 2;
+    const ox = vcx - dw / 2 - minX;
+    const oy = vcy - dh / 2 - minY;
+
+    // ── Wrapper frame ──────────────────────────────────────────────────
+    // Created up-front so we can call addShapeToFrame as each child is
+    // built. _diagramType marks it so Frame.destroy() takes the children
+    // along on delete (issue #34 bug #3).
+    const PADDING = 40;
+    const frameTitle = diagram.title || 'Mermaid diagram';
+    const frame = new window.Frame(
+        vcx - dw / 2 - PADDING,
+        vcy - dh / 2 - PADDING,
+        dw + PADDING * 2,
+        dh + PADDING * 2,
+        {
+            stroke: '#888',
+            strokeWidth: 1,
+            fill: 'transparent',
+            opacity: 0.7,
+            frameName: frameTitle,
+        }
+    );
+    frame._diagramType = 'mermaid-flowchart';
+    window.shapes.push(frame);
+    if (window.pushCreateAction) window.pushCreateAction(frame);
+
+    const nodeMap = new Map(); // id → shape
+
+    // ── Nodes ──────────────────────────────────────────────────────────
+    for (const n of nodes) {
+        const nw = n.width || 140;
+        const nh = n.height || 60;
+        const nx = n.x + ox;
+        const ny = n.y + oy;
+        const cx = nx + nw / 2;
+        const cy = ny + nh / 2;
+
+        const opts = {
+            stroke: n.stroke || '#fff',
+            strokeWidth: n.strokeWidth ?? 1.5,
+            fill: n.fill || 'transparent',
+            fillStyle: n.fill && n.fill !== 'transparent' ? 'solid' : 'none',
+            roughness: 1,
+            label: n.label || '',
+        };
 
-    const framePad = 30;
-    const frameW = gWidth + framePad * 2;
-    const frameH = gHeight + framePad * 2;
-    const frameX = vcx - frameW / 2;
-    const frameY = vcy - frameH / 2;
-
-    const title = diagram.title || 'Flowchart';
+        let shape = null;
+        try {
+            if (n.type === 'circle' && window.Circle) {
+                shape = new window.Circle(cx, cy, nw / 2, nh / 2, opts);
+            } else if (n.type === 'diamond') {
+                const sz = Math.max(nw, nh) * 0.75;
+                shape = new window.Rectangle(cx - sz / 2, cy - sz / 2, sz, sz, opts);
+                shape.rotation = 45;
+                if (typeof shape.draw === 'function') shape.draw();
+            } else if (n.type === 'roundrect') {
+                shape = new window.Rectangle(nx, ny, nw, nh, { ...opts, cornerRadius: Math.min(nw, nh) * 0.2 });
+            } else {
+                shape = new window.Rectangle(nx, ny, nw, nh, opts);
+            }
+        } catch (err) {
+            console.warn('[FlowchartRenderer] Node creation failed:', n.id, err);
+            continue;
+        }
+        if (!shape) continue;
 
-    // Create frame
-    let frame;
-    try {
-        frame = new window.Frame(frameX, frameY, frameW, frameH, {
-            stroke: '#888', strokeWidth: 2, fill: 'transparent', opacity: 1,
-            frameName: title,
-        });
-        frame._diagramType = 'flowchart';
-        frame._diagramData = diagram;
+        window.shapes.push(shape);
+        if (window.pushCreateAction) window.pushCreateAction(shape);
+        frame.addShapeToFrame(shape);
 
-        window.shapes.push(frame);
-        if (window.pushCreateAction) window.pushCreateAction(frame);
-    } catch (err) {
-        console.error('[FlowchartRenderer] Frame creation failed:', err);
-        return false;
+        nodeMap.set(n.id, { shape, x: nx, y: ny, width: nw, height: nh, centerX: cx, centerY: cy });
     }
 
-    // Insert SVG content into the canvas
-    const NS = 'http://www.w3.org/2000/svg';
-    try {
-        const graphGroup = document.createElementNS(NS, 'g');
-        graphGroup.setAttribute('data-type', 'flowchart-diagram');
-        graphGroup.setAttribute('transform', `translate(${frameX + framePad}, ${frameY + framePad})`);
-
-        // Copy defs
-        const defs = svgEl.querySelector('defs');
-        if (defs) {
-            let mainDefs = window.svg.querySelector('defs');
-            if (!mainDefs) {
-                mainDefs = document.createElementNS(NS, 'defs');
-                window.svg.insertBefore(mainDefs, window.svg.firstChild);
-            }
-            while (defs.firstChild) {
-                mainDefs.appendChild(defs.firstChild);
-            }
-        }
+    // ── Edges ──────────────────────────────────────────────────────────
+    for (const e of edges) {
+        const fromNode = nodeMap.get(e.from);
+        const toNode = nodeMap.get(e.to);
+        if (!fromNode || !toNode) continue;
 
-        // Copy all child elements (skip defs)
-        while (svgEl.childNodes.length > 0) {
-            const child = svgEl.childNodes[0];
-            if (child.nodeName === 'defs') {
-                svgEl.removeChild(child);
-                continue;
-            }
-            graphGroup.appendChild(child);
-        }
+        // Connect from the source center to the target center — autoAttach
+        // will snap each endpoint to the appropriate edge of the shape.
+        const sp = { x: fromNode.centerX, y: fromNode.centerY };
+        const ep = { x: toNode.centerX, y: toNode.centerY };
 
-        window.svg.appendChild(graphGroup);
-
-        // Wrap as a shape-like object for the frame
-        const fcShape = {
-            shapeName: 'flowchartContent',
-            group: graphGroup,
-            element: graphGroup,
-            x: frameX + framePad,
-            y: frameY + framePad,
-            width: gWidth,
-            height: gHeight,
-            move(dx, dy) {
-                this.x += dx;
-                this.y += dy;
-                this.group.setAttribute('transform', `translate(${this.x}, ${this.y})`);
-            },
-            updateAttachedArrows() {},
+        const directed = e.directed !== false;
+        const style = e.style || 'normal';
+        const isThick = style === 'thick';
+        const isDotted = style === 'dotted';
+
+        const opts = {
+            stroke: e.stroke || '#fff',
+            strokeWidth: isThick ? 3 : 1.5,
+            roughness: 1,
+            strokeDasharray: isDotted ? '5 3' : '',
+            label: e.label || '',
         };
 
-        window.shapes.push(fcShape);
-        if (frame.addShapeToFrame) frame.addShapeToFrame(fcShape);
-    } catch (err) {
-        console.error('[FlowchartRenderer] SVG insertion failed:', err);
+        let connector = null;
+        try {
+            if (directed && window.Arrow) {
+                connector = new window.Arrow(sp, ep, opts);
+            } else if (window.Line) {
+                connector = new window.Line(sp, ep, opts);
+            } else if (window.Arrow) {
+                connector = new window.Arrow(sp, ep, opts);
+            }
+        } catch (err) {
+            console.warn('[FlowchartRenderer] Edge creation failed:', e, err);
+            continue;
+        }
+        if (!connector) continue;
+
+        window.shapes.push(connector);
+        if (window.pushCreateAction) window.pushCreateAction(connector);
+        frame.addShapeToFrame(connector);
+
+        // Wire arrow endpoints into the source/target shapes so moving a
+        // node drags its connections along. window.__autoAttach is set up
+        // by AIRenderer.initAIRenderer() during engine init.
+        if (directed && connector.shapeName === 'arrow' && typeof window.__autoAttach === 'function') {
+            try {
+                window.__autoAttach(connector, fromNode.shape, true, sp);
+                window.__autoAttach(connector, toNode.shape, false, ep);
+            } catch (err) {
+                console.warn('[FlowchartRenderer] autoAttach failed:', err);
+            }
+        }
     }
 
-    // Select the frame
-    window.currentShape = frame;
-    if (frame.selectFrame) frame.selectFrame();
-    if (window.__sketchStoreApi) window.__sketchStoreApi.setSelectedShapeSidebar('frame');
+    // Select the first node so the user has feedback that something
+    // landed. Selecting a child (not the frame) reinforces the
+    // "independent shapes inside a frame" model.
+    const first = nodeMap.values().next().value;
+    if (first) {
+        window.currentShape = first.shape;
+        if (typeof first.shape.selectShape === 'function') first.shape.selectShape();
+    }
 
     return true;
 }

package/src/core/MermaidSequenceRenderer.js

@@ -361,119 +361,194 @@ export function parseAndRenderSequence(src) {
 }
 
 /**
- * Render a sequence diagram onto the canvas inside a Frame.
- * Creates real SVG groups with data attributes so individual elements
- * can be selected and edited.
+ * Render a sequence diagram onto the canvas as a real engine `Frame`
+ * containing independent shapes — top + bottom participant boxes,
+ * dashed lifelines, and a real Arrow (or Line for `--x`/`-x`) per
+ * message. Each child is fully independent for click / drag / resize;
+ * the Frame's `_diagramType` marker makes Frame.destroy() pull the
+ * children along on delete, so the diagram still behaves as one
+ * logical unit when discarded.
+ *
+ * Issue #34 bug #3 (follow-up to #24 per-actor split): drops the shared
+ * `groupId` glue so clicking one shape selects only that shape.
+ *
+ * Notes and block-frames (alt/opt/loop) are skipped for now — they'd
+ * either need their own shape types or a richer label model. Self-
+ * messages are also skipped (would need a curved arrow).
  */
 export function renderSequenceOnCanvas(diagram) {
     if (!diagram || diagram.type !== 'sequenceDiagram') return false;
-    if (!window.svg || !window.Frame) {
-        console.error('[SequenceRenderer] Engine not initialized');
+    if (!window.svg || !window.Rectangle || !window.Line || !window.Arrow) {
+        console.error('[SequenceRenderer] Engine not initialized (Rectangle / Line / Arrow missing)');
         return false;
     }
 
-    // Generate the SVG markup
-    const svgMarkup = renderSequenceSVG(diagram);
-    if (!svgMarkup) return false;
+    const participants = diagram.participants || [];
+    const messages = diagram.messages || [];
+    if (participants.length === 0) return false;
 
-    // Parse SVG to get dimensions
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgMarkup, 'image/svg+xml');
-    const svgEl = doc.querySelector('svg');
-    if (!svgEl) return false;
+    // Mirror the layout math from renderSequenceSVG so the canvas layout
+    // matches the modal preview.
+    const pCount = participants.length;
+    const contentWidth = (pCount - 1) * PARTICIPANT_GAP + PARTICIPANT_W;
+    const totalWidth = Math.max(contentWidth + SIDE_MARGIN * 2, 400);
+    const startX = (totalWidth - contentWidth) / 2;
+    const pCenters = participants.map((_, i) => startX + i * PARTICIPANT_GAP + PARTICIPANT_W / 2);
 
-    const gWidth = parseFloat(svgEl.getAttribute('width'));
-    const gHeight = parseFloat(svgEl.getAttribute('height'));
+    const topBoxBottom = TOP_MARGIN + PARTICIPANT_H;
+    const msgYPositions = [];
+    let currentY = topBoxBottom + 30;
+    for (let mi = 0; mi < messages.length; mi++) {
+        msgYPositions.push(currentY);
+        currentY += MSG_ROW_HEIGHT;
+    }
+    const bottomBoxTop = currentY + 20;
+    const totalHeight = bottomBoxTop + PARTICIPANT_H + BOTTOM_MARGIN;
 
-    // Viewport center
+    // Centre the diagram on the current viewport so the user sees it
+    // right where they invoked the renderer.
     const vb = window.currentViewBox || { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
-    const vcx = vb.x + vb.width / 2;
-    const vcy = vb.y + vb.height / 2;
-
-    const framePad = 30;
-    const frameW = gWidth + framePad * 2;
-    const frameH = gHeight + framePad * 2;
-    const frameX = vcx - frameW / 2;
-    const frameY = vcy - frameH / 2;
-
-    const title = diagram.title || 'Sequence Diagram';
-
-    // Create frame
-    let frame;
-    try {
-        frame = new window.Frame(frameX, frameY, frameW, frameH, {
-            stroke: '#888', strokeWidth: 2, fill: 'transparent', opacity: 1,
-            frameName: title,
-        });
-        frame._diagramType = 'sequence';
-        frame._diagramData = diagram;
-
-        window.shapes.push(frame);
-        if (window.pushCreateAction) window.pushCreateAction(frame);
-    } catch (err) {
-        console.error('[SequenceRenderer] Frame creation failed:', err);
+    const ox = vb.x + vb.width / 2 - totalWidth / 2;
+    const oy = vb.y + vb.height / 2 - totalHeight / 2;
+
+    // ── Wrapper frame ──────────────────────────────────────────────────
+    // Issue #34 bug #3: drop the shared groupId glue. Each child is
+    // independent for click / drag / resize. The Frame's `_diagramType`
+    // marker makes Frame.destroy() pull the children along on delete,
+    // so the diagram still behaves as one logical unit when discarded.
+    if (!window.Frame) {
+        console.error('[SequenceRenderer] window.Frame missing — cannot wrap diagram');
         return false;
     }
-
-    // Insert SVG content into the canvas
-    const NS = 'http://www.w3.org/2000/svg';
-    try {
-        const graphGroup = document.createElementNS(NS, 'g');
-        graphGroup.setAttribute('data-type', 'sequence-diagram');
-        graphGroup.setAttribute('transform', `translate(${frameX + framePad}, ${frameY + framePad})`);
-
-        // Copy defs
-        const defs = svgEl.querySelector('defs');
-        if (defs) {
-            let mainDefs = window.svg.querySelector('defs');
-            if (!mainDefs) {
-                mainDefs = document.createElementNS(NS, 'defs');
-                window.svg.insertBefore(mainDefs, window.svg.firstChild);
-            }
-            while (defs.firstChild) {
-                mainDefs.appendChild(defs.firstChild);
-            }
+    const PADDING = 24;
+    const frameTitle = diagram.title || 'Sequence diagram';
+    const frame = new window.Frame(
+        ox - PADDING,
+        oy - PADDING,
+        totalWidth + PADDING * 2,
+        totalHeight + PADDING * 2,
+        {
+            stroke: '#888',
+            strokeWidth: 1,
+            fill: 'transparent',
+            opacity: 0.7,
+            frameName: frameTitle,
         }
+    );
+    frame._diagramType = 'mermaid-sequence';
+    window.shapes.push(frame);
+    if (window.pushCreateAction) window.pushCreateAction(frame);
 
-        // Copy all child elements (skip defs)
-        while (svgEl.childNodes.length > 0) {
-            const child = svgEl.childNodes[0];
-            if (child.nodeName === 'defs') {
-                svgEl.removeChild(child);
-                continue;
-            }
-            graphGroup.appendChild(child);
+    const created = [];
+
+    // ── Participants: top box + lifeline (and bottom box) ─────────────
+    const pIndex = new Map();
+    for (let pi = 0; pi < pCount; pi++) {
+        const p = participants[pi];
+        pIndex.set(p.name, pi);
+        const cx = pCenters[pi] + ox;
+        const bx = cx - PARTICIPANT_W / 2;
+
+        try {
+            // Top participant box
+            const topBox = new window.Rectangle(bx, TOP_MARGIN + oy, PARTICIPANT_W, PARTICIPANT_H, {
+                stroke: THEME.participantBorder,
+                strokeWidth: 1.5,
+                fill: THEME.participantBg,
+                fillStyle: 'solid',
+                roughness: 1,
+                label: p.name,
+            });
+            window.shapes.push(topBox);
+            if (window.pushCreateAction) window.pushCreateAction(topBox);
+            frame.addShapeToFrame(topBox);
+            created.push(topBox);
+
+            // Lifeline (dashed vertical line spanning the diagram height)
+            const lifeline = new window.Line(
+                { x: cx, y: topBoxBottom + oy },
+                { x: cx, y: bottomBoxTop + oy },
+                {
+                    stroke: THEME.lifeline,
+                    strokeWidth: 1,
+                    strokeDasharray: '6 4',
+                    roughness: 0,
+                }
+            );
+            window.shapes.push(lifeline);
+            if (window.pushCreateAction) window.pushCreateAction(lifeline);
+            frame.addShapeToFrame(lifeline);
+            created.push(lifeline);
+
+            // Bottom participant box (mirrors top — Mermaid convention)
+            const bottomBox = new window.Rectangle(bx, bottomBoxTop + oy, PARTICIPANT_W, PARTICIPANT_H, {
+                stroke: THEME.participantBorder,
+                strokeWidth: 1.5,
+                fill: THEME.participantBg,
+                fillStyle: 'solid',
+                roughness: 1,
+                label: p.name,
+            });
+            window.shapes.push(bottomBox);
+            if (window.pushCreateAction) window.pushCreateAction(bottomBox);
+            frame.addShapeToFrame(bottomBox);
+            created.push(bottomBox);
+        } catch (err) {
+            console.warn('[SequenceRenderer] Participant creation failed:', p.name, err);
         }
+    }
 
-        window.svg.appendChild(graphGroup);
-
-        // Wrap as a shape-like object for the frame
-        const seqShape = {
-            shapeName: 'sequenceContent',
-            group: graphGroup,
-            element: graphGroup,
-            x: frameX + framePad,
-            y: frameY + framePad,
-            width: gWidth,
-            height: gHeight,
-            move(dx, dy) {
-                this.x += dx;
-                this.y += dy;
-                this.group.setAttribute('transform', `translate(${this.x}, ${this.y})`);
-            },
-            updateAttachedArrows() {},
+    // ── Messages: arrow (or line for --x style) per row ───────────────
+    for (let mi = 0; mi < messages.length; mi++) {
+        const m = messages[mi];
+        const fromI = pIndex.get(m.from);
+        const toI = pIndex.get(m.to);
+        if (fromI == null || toI == null) continue;
+        if (fromI === toI) continue;  // skip self-messages (v1 limitation)
+
+        const fromCx = pCenters[fromI] + ox;
+        const toCx = pCenters[toI] + ox;
+        const y = msgYPositions[mi] + oy;
+
+        const labelText = m.number ? `${m.number}. ${m.text}` : m.text;
+
+        // Solid vs dashed (sync vs async response). `cross` style (-x)
+        // would render as a line with an X at the head — fall back to a
+        // line for that, arrow otherwise.
+        const isCross = !!m.cross && m.arrowHead === 'cross';
+        const opts = {
+            stroke: THEME.messageLine,
+            strokeWidth: 1.5,
+            roughness: 0,
+            strokeDasharray: m.solid ? '' : '6 4',
+            label: labelText || '',
         };
 
-        window.shapes.push(seqShape);
-        if (frame.addShapeToFrame) frame.addShapeToFrame(seqShape);
-    } catch (err) {
-        console.error('[SequenceRenderer] SVG insertion failed:', err);
+        try {
+            const sp = { x: fromCx, y };
+            const ep = { x: toCx, y };
+            const connector = isCross
+                ? new window.Line(sp, ep, opts)
+                : new window.Arrow(sp, ep, opts);
+            window.shapes.push(connector);
+            if (window.pushCreateAction) window.pushCreateAction(connector);
+            frame.addShapeToFrame(connector);
+            created.push(connector);
+        } catch (err) {
+            console.warn('[SequenceRenderer] Message creation failed:', m, err);
+        }
     }
 
-    // Select the frame
-    window.currentShape = frame;
-    if (frame.selectFrame) frame.selectFrame();
-    if (window.__sketchStoreApi) window.__sketchStoreApi.setSelectedShapeSidebar('frame');
+    // Auto-select the first node so the user has feedback that the
+    // diagram landed. Selecting a child (not the frame) reinforces the
+    // "independent shapes inside a frame" model from issue #34 bug #3.
+    const first = created[0];
+    if (first) {
+        window.currentShape = first;
+        if (typeof first.selectShape === 'function') first.selectShape();
+    }
 
+    console.log(`[SequenceRenderer] Done: ${pCount} participants, ${messages.length} messages`);
     return true;
 }
+