@hugobatist/smartcode 0.1.0

package/dist/static/dagre-layout.js

@@ -0,0 +1,291 @@
+/**
+ * SmartCode Dagre Layout -- graph layout computation using dagre.
+ * Converts a GraphModel JSON (from /api/graph/:file) into positioned nodes,
+ * edges with routed points, and subgraph bounding boxes.
+ *
+ * Dependencies: dagre (loaded via CDN in live.html)
+ * Dependents: canvas-renderer.js (Plan 02)
+ *
+ * Usage:
+ *   var result = SmartCodeDagreLayout.computeLayout(graphModel);
+ *   // result => { width, height, nodes[], edges[], subgraphs[] }
+ */
+(function() {
+    'use strict';
+
+    // ── Text measurement (lazy canvas init) ──
+
+    var _measureCanvas = null;
+
+    function getMeasureContext() {
+        if (!_measureCanvas) {
+            _measureCanvas = document.createElement('canvas');
+        }
+        return _measureCanvas.getContext('2d');
+    }
+
+    /**
+     * Measure the pixel width of a text string using an offscreen canvas.
+     * @param {string} text - The text to measure.
+     * @param {string} [font] - CSS font string. Defaults to '600 15px Inter, sans-serif'.
+     * @returns {number} Width in pixels.
+     */
+    function measureTextWidth(text, font) {
+        var ctx = getMeasureContext();
+        ctx.font = font || '600 15px Inter, sans-serif';
+        return ctx.measureText(text).width;
+    }
+
+    /**
+     * Calculate node dimensions based on label text and shape type.
+     * Returns { width, height } with shape-specific adjustments.
+     * @param {string} label - Node label text.
+     * @param {string} shape - Node shape (rect, circle, diamond, etc.).
+     * @returns {{ width: number, height: number }}
+     */
+    function measureNodeDimensions(label, shape) {
+        // Handle multiline labels: measure widest line, stack lines vertically
+        var labelStr = (label || '').replace(/\\n/g, '\n');
+        var lines = labelStr.split('\n');
+        var maxLineW = 0;
+        for (var li = 0; li < lines.length; li++) {
+            var lw = measureTextWidth(lines[li]);
+            if (lw > maxLineW) maxLineW = lw;
+        }
+        var textW = maxLineW;
+        var hPad = 32;
+        var lineH = 24;
+        var vPad = 24;
+        var w = textW + hPad;
+        var h = lineH * lines.length + vPad;
+
+        switch (shape) {
+            case 'circle':
+                var diameter = Math.max(w, h) + 8;
+                w = diameter;
+                h = diameter;
+                break;
+            case 'diamond':
+                w = w * 1.4;
+                h = h * 1.4;
+                break;
+            case 'hexagon':
+                w = w + h / 2;
+                break;
+            case 'cylinder':
+                h = h + 16;
+                break;
+            default:
+                break;
+        }
+
+        return { width: Math.ceil(w), height: Math.ceil(h) };
+    }
+
+    // ── Subgraph membership lookup ──
+
+    /**
+     * Build a Set of all subgraph IDs for quick lookup.
+     * @param {Object} graphModel - The graph model from /api/graph/:file.
+     * @returns {Set<string>}
+     */
+    function buildSubgraphIdSet(graphModel) {
+        var ids = {};
+        var entries = Object.keys(graphModel.subgraphs || {});
+        for (var i = 0; i < entries.length; i++) {
+            ids[entries[i]] = true;
+        }
+        return ids;
+    }
+
+    /**
+     * Resolve a subgraph endpoint to its first child node (dagre bug #238 workaround).
+     * When an edge references a subgraph ID, dagre cannot route it properly in
+     * compound mode. We redirect the edge to the first node inside the subgraph.
+     * @param {string} endpoint - Node or subgraph ID.
+     * @param {Object} subgraphIds - Lookup of subgraph IDs.
+     * @param {Object} subgraphs - The subgraphs map from graphModel.
+     * @returns {string} The resolved node ID.
+     */
+    function resolveEndpoint(endpoint, subgraphIds, subgraphs) {
+        if (subgraphIds[endpoint] && subgraphs[endpoint]) {
+            var sg = subgraphs[endpoint];
+            if (sg.nodeIds && sg.nodeIds.length > 0) {
+                return sg.nodeIds[0];
+            }
+        }
+        return endpoint;
+    }
+
+    // ── Layout computation ──
+
+    /**
+     * Compute a full layout for a GraphModel using dagre.
+     * @param {Object} graphModel - The graph model JSON from /api/graph/:file.
+     * @returns {{ width: number, height: number, nodes: Array, edges: Array, subgraphs: Array }}
+     */
+    function computeLayout(graphModel) {
+        /* global dagre */
+        var g = new dagre.graphlib.Graph({ compound: true });
+
+        g.setGraph({
+            rankdir: graphModel.direction || 'TB',
+            nodesep: 80,
+            ranksep: 100,
+            edgesep: 20,
+            marginx: 20,
+            marginy: 20,
+        });
+
+        g.setDefaultEdgeLabel(function() { return {}; });
+
+        // -- Add nodes --
+        var nodeEntries = Object.entries(graphModel.nodes || {});
+        for (var ni = 0; ni < nodeEntries.length; ni++) {
+            var nodeId = nodeEntries[ni][0];
+            var node = nodeEntries[ni][1];
+            var dims = measureNodeDimensions(node.label || nodeId, node.shape || 'rect');
+            g.setNode(nodeId, {
+                label: node.label || nodeId,
+                width: dims.width,
+                height: dims.height,
+                shape: node.shape || 'rect',
+            });
+        }
+
+        // -- Add subgraphs --
+        var sgEntries = Object.entries(graphModel.subgraphs || {});
+        var subgraphIds = buildSubgraphIdSet(graphModel);
+
+        for (var si = 0; si < sgEntries.length; si++) {
+            var sgId = sgEntries[si][0];
+            var sg = sgEntries[si][1];
+            g.setNode(sgId, {
+                label: sg.label || sgId,
+                clusterLabelPos: 'top',
+                style: 'subgraph',
+            });
+
+            // Parent child nodes inside this subgraph
+            var sgNodeIds = sg.nodeIds || [];
+            for (var sni = 0; sni < sgNodeIds.length; sni++) {
+                g.setParent(sgNodeIds[sni], sgId);
+            }
+
+            // Nested subgraphs
+            if (sg.parentId) {
+                g.setParent(sgId, sg.parentId);
+            }
+        }
+
+        // -- Add edges --
+        var edges = graphModel.edges || [];
+        var subgraphs = graphModel.subgraphs || {};
+
+        for (var ei = 0; ei < edges.length; ei++) {
+            var edge = edges[ei];
+            var from = resolveEndpoint(edge.from, subgraphIds, subgraphs);
+            var to = resolveEndpoint(edge.to, subgraphIds, subgraphs);
+
+            var edgeLabel = edge.label || '';
+            var edgeLabelW = edgeLabel ? measureTextWidth(edgeLabel) + 16 : 0;
+            var edgeLabelH = edgeLabel ? 20 : 0;
+
+            g.setEdge(from, to, {
+                label: edgeLabel,
+                width: edgeLabelW,
+                height: edgeLabelH,
+                labelpos: 'c',
+            });
+        }
+
+        // -- Run dagre layout --
+        dagre.layout(g);
+
+        // -- Extract results --
+        return extractLayoutResult(g, graphModel);
+    }
+
+    /**
+     * Extract positioned layout data from a dagre graph after layout().
+     * @param {Object} g - The dagre graph after layout.
+     * @param {Object} graphModel - The original graph model (for metadata).
+     * @returns {{ width: number, height: number, nodes: Array, edges: Array, subgraphs: Array }}
+     */
+    function extractLayoutResult(g, graphModel) {
+        var graphInfo = g.graph();
+        var subgraphIds = buildSubgraphIdSet(graphModel);
+
+        var layoutNodes = [];
+        var layoutSubgraphs = [];
+
+        var allNodeIds = g.nodes();
+        for (var i = 0; i < allNodeIds.length; i++) {
+            var nid = allNodeIds[i];
+            var ndata = g.node(nid);
+            if (!ndata) continue;
+
+            if (subgraphIds[nid]) {
+                layoutSubgraphs.push({
+                    id: nid,
+                    label: ndata.label || nid,
+                    x: ndata.x,
+                    y: ndata.y,
+                    width: ndata.width,
+                    height: ndata.height,
+                });
+            } else {
+                layoutNodes.push({
+                    id: nid,
+                    label: ndata.label || nid,
+                    shape: ndata.shape || 'rect',
+                    x: ndata.x,
+                    y: ndata.y,
+                    width: ndata.width,
+                    height: ndata.height,
+                });
+            }
+        }
+
+        var layoutEdges = [];
+        var dagreEdges = g.edges();
+        for (var j = 0; j < dagreEdges.length; j++) {
+            var de = dagreEdges[j];
+            var edata = g.edge(de);
+            if (!edata) continue;
+
+            // Find the original edge data for type/id
+            var origEdges = graphModel.edges || [];
+            var origEdge = null;
+            for (var k = 0; k < origEdges.length; k++) {
+                if (origEdges[k].from === de.v && origEdges[k].to === de.w) {
+                    origEdge = origEdges[k];
+                    break;
+                }
+            }
+
+            layoutEdges.push({
+                id: origEdge ? origEdge.id : (de.v + '->' + de.w),
+                from: de.v,
+                to: de.w,
+                label: edata.label || '',
+                type: origEdge ? origEdge.type : 'arrow',
+                points: edata.points || [],
+            });
+        }
+
+        return {
+            width: graphInfo.width || 0,
+            height: graphInfo.height || 0,
+            nodes: layoutNodes,
+            edges: layoutEdges,
+            subgraphs: layoutSubgraphs,
+        };
+    }
+
+    // ── Public API ──
+    window.SmartCodeDagreLayout = {
+        computeLayout: computeLayout,
+    };
+
+})();

package/dist/static/diagram-dom.js

@@ -0,0 +1,241 @@
+/**
+ * DiagramDOM — abstraction layer for SVG DOM queries.
+ * Supports both Mermaid-rendered SVGs and custom SmartCode SVGs.
+ * Consolidates SVG element lookups duplicated across annotations.js,
+ * collapse-ui.js, search.js, and diagram-editor.js.
+ *
+ * IMPORTANT: Never cache SVG element references — render()
+ * replaces the entire SVG via innerHTML, invalidating all references.
+ *
+ * Usage:
+ *   DiagramDOM.getSVG();
+ *   DiagramDOM.getRendererType();  // 'custom' | 'mermaid'
+ *   DiagramDOM.findNodeElement('myNode');
+ *   DiagramDOM.extractNodeId(clickedElement);
+ */
+(function() {
+    'use strict';
+
+    var NODE_RE = /^flowchart-(.+)-\d+$/;
+    var SUBGRAPH_RE = /^subGraph\d+-(.+)-\d+$/;
+    var EDGE_RE = /^L-(.+)$/;
+
+    var DiagramDOM = {
+        /**
+         * Returns the current SVG element, or null.
+         */
+        getSVG: function() {
+            return document.querySelector('#preview svg');
+        },
+
+        /**
+         * Detects whether the current SVG is from the custom renderer.
+         * Checks for the `.smartcode-diagram` class on the root <g> element.
+         * @returns {'custom'|'mermaid'}
+         */
+        getRendererType: function() {
+            var svg = this.getSVG();
+            if (!svg) return 'mermaid';
+            return svg.querySelector('.smartcode-diagram') ? 'custom' : 'mermaid';
+        },
+
+        /**
+         * Finds the SVG element for a given node ID.
+         * Tries data-node-id attribute first (custom), then Mermaid regex.
+         */
+        findNodeElement: function(nodeId) {
+            var svg = this.getSVG();
+            if (!svg) return null;
+            // Custom renderer: data-node-id attribute
+            var custom = svg.querySelector('[data-node-id="' + nodeId + '"]');
+            if (custom) return custom;
+            // Mermaid: regex on element id attributes
+            var elements = svg.querySelectorAll('[id]');
+            for (var i = 0; i < elements.length; i++) {
+                var el = elements[i];
+                var id = el.getAttribute('id');
+                var match = id ? id.match(NODE_RE) : null;
+                if (match && match[1] === nodeId) return el;
+            }
+            return null;
+        },
+
+        /**
+         * Finds the SVG element for a given subgraph ID.
+         * Matches /^subGraph\d+-(.+)-\d+$/.
+         */
+        findSubgraphElement: function(subgraphId) {
+            var svg = this.getSVG();
+            if (!svg) return null;
+            // Custom renderer: data-subgraph-id attribute
+            var custom = svg.querySelector('[data-subgraph-id="' + subgraphId + '"]');
+            if (custom) return custom;
+            // Mermaid: regex on element id attributes
+            var elements = svg.querySelectorAll('[id]');
+            for (var i = 0; i < elements.length; i++) {
+                var el = elements[i];
+                var id = el.getAttribute('id');
+                var match = id ? id.match(SUBGRAPH_RE) : null;
+                if (match && match[1] === subgraphId) return el;
+            }
+            return null;
+        },
+
+        /**
+         * Walks up the DOM from an element to find node/edge/subgraph identity.
+         * Consolidates duplicated logic from annotations.js, collapse-ui.js,
+         * search.js, and diagram-editor.js.
+         *
+         * Returns: { type: 'node'|'edge'|'subgraph', id: string } or null.
+         */
+        extractNodeId: function(element) {
+            var el = element;
+            while (el && el !== document.body) {
+                // Custom renderer: check data attributes first
+                if (el.getAttribute) {
+                    var dataNodeId = el.getAttribute('data-node-id');
+                    if (dataNodeId) return { type: 'node', id: dataNodeId };
+                    var dataEdgeId = el.getAttribute('data-edge-id');
+                    if (dataEdgeId) return { type: 'edge', id: dataEdgeId };
+                    var dataSubgraphId = el.getAttribute('data-subgraph-id');
+                    if (dataSubgraphId) return { type: 'subgraph', id: dataSubgraphId };
+                }
+                // Mermaid: regex patterns on id attribute
+                var id = el.getAttribute ? el.getAttribute('id') : null;
+                if (id) {
+                    var nodeMatch = id.match(NODE_RE);
+                    if (nodeMatch) return { type: 'node', id: nodeMatch[1] };
+                    var edgeMatch = id.match(EDGE_RE);
+                    if (edgeMatch) return { type: 'edge', id: 'L-' + edgeMatch[1] };
+                    var subMatch = id.match(SUBGRAPH_RE);
+                    if (subMatch) return { type: 'subgraph', id: subMatch[1] };
+                }
+                el = el.parentElement;
+            }
+            return null;
+        },
+
+        /**
+         * Returns getBBox() of the found node element, or null.
+         */
+        getNodeBBox: function(nodeId) {
+            var el = this.findNodeElement(nodeId);
+            if (!el || !el.getBBox) return null;
+            return el.getBBox();
+        },
+
+        /**
+         * Returns the .nodeLabel textContent within a node, or null.
+         */
+        getNodeLabel: function(nodeId) {
+            var el = this.findNodeElement(nodeId);
+            if (!el) return null;
+            // Custom renderer: direct child <text> element
+            if (el.getAttribute('data-node-id')) {
+                var textEl = el.querySelector('text');
+                return textEl ? textEl.textContent : null;
+            }
+            // Mermaid: .nodeLabel span
+            var label = el.querySelector('.nodeLabel');
+            return label ? label.textContent : null;
+        },
+
+        /**
+         * Returns all node label elements from the SVG.
+         * Custom renderer: <text> children of .smartcode-node
+         * Mermaid: .nodeLabel elements
+         */
+        getAllNodeLabels: function() {
+            var svg = this.getSVG();
+            if (!svg) return [];
+            if (this.getRendererType() === 'custom') {
+                return Array.from(svg.querySelectorAll('.smartcode-node > text'));
+            }
+            return Array.from(svg.querySelectorAll('.nodeLabel'));
+        },
+
+        /**
+         * Walks up to find .node, .cluster, or .smartcode-edge parent element.
+         */
+        findMatchParent: function(element) {
+            var current = element;
+            while (current && current.tagName !== 'svg') {
+                if (current.classList &&
+                    (current.classList.contains('node') ||
+                     current.classList.contains('cluster') ||
+                     current.classList.contains('smartcode-node') ||
+                     current.classList.contains('smartcode-subgraph') ||
+                     current.classList.contains('smartcode-edge'))) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        },
+
+        /**
+         * Finds the SVG element for a given edge ID.
+         * Custom: data-edge-id attribute
+         * Mermaid: id="L-{edgeId}"
+         */
+        findEdgeElement: function(edgeId) {
+            var svg = this.getSVG();
+            if (!svg) return null;
+            // Custom renderer: data-edge-id attribute
+            var custom = svg.querySelector('[data-edge-id="' + edgeId + '"]');
+            if (custom) return custom;
+            // Mermaid: id="L-{edgeId}"
+            var mermaid = svg.querySelector('[id="L-' + edgeId + '"]');
+            return mermaid || null;
+        },
+
+        /**
+         * Adds/removes outline styling on a node.
+         */
+        highlightNode: function(nodeId, on) {
+            var el = this.findNodeElement(nodeId);
+            if (!el) return;
+            // SVG elements don't support CSS outline — modify shape stroke instead
+            var shape = el.querySelector('rect, circle, polygon, path, ellipse');
+            if (!shape) {
+                var childG = el.querySelector('g');
+                if (childG) shape = childG.querySelector('rect, circle, polygon, path, ellipse');
+            }
+            if (shape) {
+                if (on) {
+                    shape.setAttribute('data-prev-stroke', shape.getAttribute('stroke') || '');
+                    shape.setAttribute('data-prev-stroke-width', shape.getAttribute('stroke-width') || '');
+                    shape.setAttribute('stroke', '#3b82f6');
+                    shape.setAttribute('stroke-width', '3');
+                } else {
+                    shape.setAttribute('stroke', shape.getAttribute('data-prev-stroke') || '');
+                    shape.setAttribute('stroke-width', shape.getAttribute('data-prev-stroke-width') || '');
+                }
+            }
+        },
+
+        /**
+         * Returns all node elements from the SVG.
+         * Custom: .smartcode-node elements; Mermaid: .node elements
+         */
+        getAllNodeElements: function() {
+            var svg = this.getSVG();
+            if (!svg) return [];
+            if (this.getRendererType() === 'custom') {
+                return Array.from(svg.querySelectorAll('.smartcode-node'));
+            }
+            return Array.from(svg.querySelectorAll('.node'));
+        },
+
+        /**
+         * Returns SVG viewBox baseVal, or null.
+         */
+        getViewBox: function() {
+            var svg = this.getSVG();
+            if (!svg) return null;
+            return (svg.viewBox && svg.viewBox.baseVal) ? svg.viewBox.baseVal : null;
+        }
+    };
+
+    window.DiagramDOM = DiagramDOM;
+})();