@hugobatist/smartcode 0.1.0

package/dist/static/context-menu.js

@@ -0,0 +1,334 @@
+/**
+ * SmartCode Context Menu -- right-click context menu for diagram nodes and edges.
+ * Shows action items: Edit, Delete, Duplicate, Flag, Connect (nodes) or Delete, Flag (edges).
+ *
+ * Dependencies:
+ *   - interaction-state.js (SmartCodeInteraction)
+ *   - diagram-dom.js (DiagramDOM)
+ *   - diagram-editor.js (MmdEditor)
+ *   - annotations.js (SmartCodeAnnotations)
+ *   - selection.js (SmartCodeSelection)
+ *
+ * Usage:
+ *   SmartCodeContextMenu.init();
+ *   SmartCodeContextMenu.show(x, y, nodeInfo);
+ *   SmartCodeContextMenu.close();
+ */
+(function() {
+    'use strict';
+
+    var menuEl = null;
+    var outsideHandler = null;
+
+    // ── Helpers ──
+
+    function createMenuItem(label, className, handler) {
+        var item = document.createElement('div');
+        item.className = 'context-menu-item' + (className ? ' ' + className : '');
+        item.textContent = label;
+        item.addEventListener('click', function(e) {
+            e.stopPropagation();
+            closeContextMenu();
+            handler();
+        });
+        return item;
+    }
+
+    function createSeparator() {
+        var sep = document.createElement('div');
+        sep.className = 'context-menu-separator';
+        return sep;
+    }
+
+    // ── Duplicate Helper ──
+
+    function doDuplicate(nodeId) {
+        if (window.MmdEditor && MmdEditor.applyEdit && MmdEditor.duplicateNode) {
+            MmdEditor.applyEdit(function(c) { return MmdEditor.duplicateNode(c, nodeId); });
+        }
+    }
+
+    // ── Flag Helper ──
+
+    function doFlag() {
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.forceState('flagging');
+        }
+        if (window.SmartCodeAnnotations) {
+            var s = SmartCodeAnnotations.getState();
+            if (!s.flagMode) SmartCodeAnnotations.toggleFlagMode();
+        }
+        if (window.toast) toast('Flag Mode enabled -- click on a node to flag');
+    }
+
+    // ── Ghost Path Helper ──
+
+    var ghostPathSource = null;
+
+    function startGhostPathFlow(sourceNodeId) {
+        ghostPathSource = sourceNodeId;
+        if (window.toast) toast('Click destination node for ghost path');
+        var container = document.getElementById('preview-container');
+        if (container) container.addEventListener('click', ghostPathDestinationHandler, { once: true });
+    }
+
+    function ghostPathDestinationHandler(e) {
+        var nodeInfo = DiagramDOM.extractNodeId(e.target);
+        if (!nodeInfo || nodeInfo.type === 'edge' || !ghostPathSource) {
+            ghostPathSource = null;
+            if (window.toast) toast('Ghost path cancelled');
+            return;
+        }
+        if (nodeInfo.id === ghostPathSource) {
+            ghostPathSource = null;
+            if (window.toast) toast('Cannot create ghost path to same node');
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        var from = ghostPathSource;
+        var to = nodeInfo.id;
+        ghostPathSource = null;
+        SmartCodeModal.prompt({
+            title: 'Ghost Path: ' + from + ' → ' + to,
+            placeholder: 'Reason (optional)',
+            allowEmpty: true,
+            onConfirm: function(label) {
+                if (window.SmartCodeGhostPaths) SmartCodeGhostPaths.createGhostPath(from, to, label || undefined);
+            },
+        });
+    }
+
+    // ── Risk Level Helper ──
+
+    function bUrl(path) { return (window.SmartCodeBaseUrl || '') + path; }
+
+    function setRisk(nodeId, level) {
+        SmartCodeModal.prompt({
+            title: 'Risk: ' + level.charAt(0).toUpperCase() + level.slice(1),
+            placeholder: 'Reason for ' + level + ' risk...',
+            onConfirm: function(reason) {
+                var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+                if (!file) return;
+                fetch(bUrl('/api/annotations/' + encodeURIComponent(file) + '/risk'), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ nodeId: nodeId, level: level, reason: reason }),
+                }).then(function(r) {
+                    if (r.ok && window.toast) toast('Risk set: ' + level);
+                    else if (!r.ok && window.toast) toast('Error setting risk');
+                }).catch(function() {
+                    if (window.toast) toast('Error setting risk');
+                });
+            },
+        });
+    }
+
+    function removeRisk(nodeId) {
+        var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+        if (!file) return;
+        fetch(bUrl('/api/annotations/' + encodeURIComponent(file) + '/risk'), {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ nodeId: nodeId }),
+        }).then(function(r) {
+            if (r.ok && window.toast) toast('Risk removed');
+            else if (!r.ok && window.toast) toast('Error removing risk');
+        }).catch(function() {
+            if (window.toast) toast('Error removing risk');
+        });
+    }
+
+    // ── Submenu Helper ──
+
+    function createSubmenuItem(label, className, handler) {
+        var item = document.createElement('div');
+        item.className = 'context-menu-item context-menu-submenu' + (className ? ' ' + className : '');
+        item.textContent = label;
+        item.addEventListener('click', function(e) {
+            e.stopPropagation();
+            closeContextMenu();
+            handler();
+        });
+        return item;
+    }
+
+    // ── Show Context Menu ──
+
+    function showContextMenu(x, y, nodeInfo) {
+        closeContextMenu();
+
+        var menu = document.createElement('div');
+        menu.className = 'context-menu';
+
+        // Clamp position to stay on-screen
+        menu.style.left = Math.min(x, window.innerWidth - 200) + 'px';
+        menu.style.top = Math.min(y, window.innerHeight - 250) + 'px';
+
+        if (nodeInfo.type === 'node' || nodeInfo.type === 'subgraph') {
+            // Node context menu: 5 items
+            menu.appendChild(createMenuItem('Edit Text', '', function() {
+                if (window.SmartCodeInlineEdit) {
+                    if (window.SmartCodeInteraction) SmartCodeInteraction.transition('edit_action');
+                    SmartCodeInlineEdit.open(nodeInfo.id);
+                } else if (window.MmdEditor) {
+                    MmdEditor.doEditNodeText(nodeInfo.id);
+                }
+            }));
+
+            menu.appendChild(createMenuItem('Delete', 'danger', function() {
+                if (window.MmdEditor) MmdEditor.doRemoveNode(nodeInfo.id);
+            }));
+
+            menu.appendChild(createMenuItem('Duplicate', '', function() {
+                doDuplicate(nodeInfo.id);
+            }));
+
+            menu.appendChild(createSeparator());
+
+            menu.appendChild(createMenuItem('Flag', '', function() {
+                doFlag();
+            }));
+
+            menu.appendChild(createMenuItem('Toggle Breakpoint', '', function() {
+                if (window.SmartCodeBreakpoints) SmartCodeBreakpoints.toggleBreakpoint(nodeInfo.id);
+            }));
+
+            menu.appendChild(createMenuItem('New Edge', '', function() {
+                if (window.MmdEditor) MmdEditor.startConnectFrom(nodeInfo.id);
+            }));
+
+            menu.appendChild(createSeparator());
+
+            menu.appendChild(createMenuItem('Ghost Path to...', '', function() {
+                startGhostPathFlow(nodeInfo.id);
+            }));
+
+            // Risk level submenu items
+            menu.appendChild(createSubmenuItem('Risk: High', 'risk-high', function() {
+                setRisk(nodeInfo.id, 'high');
+            }));
+            menu.appendChild(createSubmenuItem('Risk: Medium', 'risk-medium', function() {
+                setRisk(nodeInfo.id, 'medium');
+            }));
+            menu.appendChild(createSubmenuItem('Risk: Low', 'risk-low', function() {
+                setRisk(nodeInfo.id, 'low');
+            }));
+            menu.appendChild(createSubmenuItem('Remove Risk', '', function() {
+                removeRisk(nodeInfo.id);
+            }));
+
+        } else if (nodeInfo.type === 'edge') {
+            // Edge context menu: 2 items
+            menu.appendChild(createMenuItem('Delete', 'danger', function() {
+                if (window.MmdEditor) {
+                    // Parse edge endpoints from content
+                    var editor = document.getElementById('editor');
+                    if (editor) {
+                        var patterns = MmdEditor.findEdgeEndpoints(nodeInfo.id, editor.value);
+                        if (patterns.length > 0) {
+                            MmdEditor.doRemoveEdge(patterns[0].from, patterns[0].to);
+                        }
+                    }
+                }
+            }));
+
+            menu.appendChild(createMenuItem('Flag', '', function() {
+                doFlag();
+            }));
+        }
+
+        document.body.appendChild(menu);
+        menuEl = menu;
+
+        // Outside click handler (delay to avoid immediate close)
+        setTimeout(function() {
+            outsideHandler = function(e) {
+                if (menu.contains(e.target)) return;
+                closeContextMenu();
+            };
+            document.addEventListener('mousedown', outsideHandler);
+        }, 50);
+    }
+
+    // ── Close Context Menu ──
+
+    function closeContextMenu() {
+        if (menuEl) {
+            menuEl.remove();
+            menuEl = null;
+        }
+        if (outsideHandler) {
+            document.removeEventListener('mousedown', outsideHandler);
+            outsideHandler = null;
+        }
+        // Transition FSM back to idle if in context-menu state
+        if (window.SmartCodeInteraction && SmartCodeInteraction.getState() === 'context-menu') {
+            SmartCodeInteraction.transition('close');
+        }
+    }
+
+    // ── Right-click Handler ──
+
+    function handleContextMenu(e) {
+        // Check FSM blocking states
+        if (window.SmartCodeInteraction && SmartCodeInteraction.isBlocking()) return;
+
+        // Don't show custom menu if in special modes
+        var fsmState = window.SmartCodeInteraction ? SmartCodeInteraction.getState() : 'idle';
+        if (fsmState === 'flagging' || fsmState === 'add-node' || fsmState === 'add-edge') return;
+
+        // Skip UI controls
+        if (e.target.closest('.zoom-controls') ||
+            e.target.closest('.flag-popover') ||
+            e.target.closest('.editor-popover')) return;
+
+        // Detect what was right-clicked
+        var nodeInfo = DiagramDOM.extractNodeId(e.target);
+        if (!nodeInfo) return; // Let browser default context menu show
+
+        e.preventDefault();
+
+        // Select the node/edge first
+        if (window.SmartCodeSelection) {
+            if (nodeInfo.type === 'node' || nodeInfo.type === 'subgraph') {
+                SmartCodeSelection.selectNode(nodeInfo.id);
+            } else if (nodeInfo.type === 'edge') {
+                SmartCodeSelection.selectEdge(nodeInfo.id);
+            }
+        }
+
+        // Transition FSM to context-menu state
+        if (window.SmartCodeInteraction) {
+            SmartCodeInteraction.transition('right_click', nodeInfo);
+        }
+
+        showContextMenu(e.clientX, e.clientY, nodeInfo);
+    }
+
+    // ── Escape Handler ──
+
+    function handleEscapeKey(e) {
+        if (e.key === 'Escape' && window.SmartCodeInteraction &&
+            SmartCodeInteraction.getState() === 'context-menu') {
+            closeContextMenu();
+        }
+    }
+
+    // ── Init ──
+
+    function init() {
+        var container = document.getElementById('preview-container');
+        if (container) {
+            container.addEventListener('contextmenu', handleContextMenu);
+        }
+        document.addEventListener('keydown', handleEscapeKey);
+    }
+
+    // ── Public API ──
+    window.SmartCodeContextMenu = {
+        init: init,
+        close: closeContextMenu,
+        show: showContextMenu,
+    };
+})();

package/dist/static/custom-renderer.js

@@ -0,0 +1,201 @@
+/**
+ * SmartCode Custom Renderer -- orchestrates the custom SVG rendering pipeline.
+ * Fetches graph data from /api/graph/, runs dagre layout, builds SVG,
+ * and inserts into the preview container.
+ *
+ * Dependencies: dagre-layout.js (SmartCodeDagreLayout), svg-renderer.js (SmartCodeSvgRenderer),
+ *               renderer.js (SmartCodeRenderer), event-bus.js (SmartCodeEventBus),
+ *               pan-zoom.js (applyTransform, zoomFit)
+ * Dependents: app-init.js (called via renderWithType)
+ *
+ * Usage:
+ *   SmartCodeCustomRenderer.render(graphModel);
+ *   SmartCodeCustomRenderer.fetchAndRender(filePath);
+ */
+(function() {
+    'use strict';
+
+    // ── Status color palette (matches Mermaid classDef in renderer.js) ──
+    var STATUS_COLORS = {
+        'ok':          { fill: '#22c55e', stroke: '#16a34a', text: '#fff' },
+        'problem':     { fill: '#ef4444', stroke: '#dc2626', text: '#fff' },
+        'in-progress': { fill: '#eab308', stroke: '#ca8a04', text: '#000' },
+        'discarded':   { fill: '#71717a', stroke: '#52525b', text: '#fff' },
+    };
+
+    // ── Last rendered graph model (for re-application) ──
+    var lastGraphModel = null;
+
+    /**
+     * Apply status colors to SVG nodes based on the graph model's statuses map.
+     * @param {Object} graphModel - Graph model containing a .statuses map.
+     */
+    function applyStatusColors(graphModel) {
+        if (!graphModel || !graphModel.statuses) return;
+        var svg = document.querySelector('#preview svg');
+        if (!svg) return;
+        var statuses = graphModel.statuses;
+        for (var nodeId in statuses) {
+            if (!statuses.hasOwnProperty(nodeId)) continue;
+            var status = statuses[nodeId];
+            var colors = STATUS_COLORS[status];
+            if (!colors) continue;
+            var nodeEl = svg.querySelector('[data-node-id="' + nodeId + '"]');
+            if (!nodeEl) continue;
+            // Find shape element (rect, circle, polygon, etc.)
+            var shape = nodeEl.querySelector('rect, circle, polygon, path, ellipse');
+            if (!shape) {
+                var childG = nodeEl.querySelector('g');
+                if (childG) shape = childG.querySelector('rect, circle, polygon, path, ellipse');
+            }
+            if (shape) {
+                shape.setAttribute('fill', colors.fill);
+                shape.setAttribute('stroke', colors.stroke);
+            }
+            var textEl = nodeEl.querySelector('text');
+            if (textEl) textEl.setAttribute('fill', colors.text);
+        }
+    }
+
+    /**
+     * Parse a Mermaid-style inline style string into a key-value map.
+     * E.g. "fill:#e3f2fd,stroke:#1565c0" → { fill: '#e3f2fd', stroke: '#1565c0' }
+     */
+    function parseStyleString(styleStr) {
+        var result = {};
+        if (!styleStr) return result;
+        var parts = styleStr.split(',');
+        for (var i = 0; i < parts.length; i++) {
+            var kv = parts[i].split(':');
+            if (kv.length >= 2) {
+                result[kv[0].trim()] = kv.slice(1).join(':').trim();
+            }
+        }
+        return result;
+    }
+
+    /**
+     * Apply nodeStyles from the graph model to matching SVG elements.
+     * Targets both nodes (data-node-id) and subgraphs (data-subgraph-id).
+     */
+    function applyNodeStyles(graphModel) {
+        if (!graphModel || !graphModel.nodeStyles) return;
+        var svg = document.querySelector('#preview svg');
+        if (!svg) return;
+        var styles = graphModel.nodeStyles;
+        for (var targetId in styles) {
+            if (!styles.hasOwnProperty(targetId)) continue;
+            var parsed = parseStyleString(styles[targetId]);
+            // Try subgraph first (more common for style directives)
+            var el = svg.querySelector('[data-subgraph-id="' + targetId + '"]')
+                  || svg.querySelector('[data-node-id="' + targetId + '"]');
+            if (!el) continue;
+            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 (parsed.fill) shape.setAttribute('fill', parsed.fill);
+                if (parsed.stroke) shape.setAttribute('stroke', parsed.stroke);
+                if (parsed['stroke-width']) shape.setAttribute('stroke-width', parsed['stroke-width']);
+                if (parsed['stroke-dasharray']) shape.setAttribute('stroke-dasharray', parsed['stroke-dasharray']);
+            }
+            // Apply text color if specified
+            if (parsed.color) {
+                var textEl = el.querySelector('text');
+                if (textEl) textEl.setAttribute('fill', parsed.color);
+            }
+        }
+    }
+
+    /**
+     * Render a graph model into the preview container.
+     * Runs dagre layout, builds SVG, inserts into DOM, applies pan-zoom.
+     * @param {Object} graphModel - Graph model JSON (nodes, edges, subgraphs).
+     */
+    async function render(graphModel) {
+        if (!graphModel || !graphModel.nodes) return;
+
+        // Store for re-application
+        lastGraphModel = graphModel;
+
+        // Wait for fonts so text measurement is accurate
+        await document.fonts.ready;
+
+        // Compute layout via dagre — throws if NaN detected
+        var layout = SmartCodeDagreLayout.computeLayout(graphModel);
+
+        // Build SVG DOM
+        var svg = SmartCodeSvgRenderer.createSVG(layout);
+
+        // Insert into preview, clearing previous content
+        var preview = document.getElementById('preview');
+        preview.textContent = '';
+        preview.appendChild(svg);
+
+        // Apply inline styles from .mmd source (fill, stroke, etc.)
+        applyNodeStyles(graphModel);
+
+        // Apply current pan-zoom transform
+        if (window.applyTransform) window.applyTransform();
+
+        // Auto-fit on initial render
+        if (window.SmartCodeRenderer && SmartCodeRenderer.getInitialRender()) {
+            requestAnimationFrame(function() {
+                if (window.zoomFit) window.zoomFit();
+            });
+            SmartCodeRenderer.setInitialRender(false);
+        } else {
+            if (window.applyTransform) window.applyTransform();
+        }
+
+        // Apply flag indicators after SVG is in the DOM
+        if (window.SmartCodeAnnotations) SmartCodeAnnotations.applyFlagsToSVG();
+
+        // Apply status colors from graph model (overrides nodeStyles for flagged nodes)
+        applyStatusColors(graphModel);
+
+        // Re-apply heatmap risk overlay if active (heatmap overrides status colors)
+        if (window.SmartCodeHeatmap && SmartCodeHeatmap.isActive()) {
+            SmartCodeHeatmap.applyRiskOverlay();
+        }
+
+        // Apply collapse overlays if available
+        if (window.SmartCodeCollapseUI && SmartCodeCollapseUI.applyOverlays) {
+            SmartCodeCollapseUI.applyOverlays();
+        }
+
+        // Emit rendered event
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('diagram:rendered', {
+                svg: svg.outerHTML,
+                renderer: 'custom'
+            });
+        }
+    }
+
+    /**
+     * Fetch graph model from /api/graph/ endpoint and render it.
+     * @param {string} filePath - The diagram file path to fetch.
+     */
+    async function fetchAndRender(filePath) {
+        if (!filePath) return;
+
+        var resp = await fetch((window.SmartCodeBaseUrl || '') + '/api/graph/' + encodeURIComponent(filePath));
+        if (!resp.ok) {
+            throw new Error('Failed to fetch graph model: ' + resp.status + ' ' + resp.statusText);
+        }
+
+        var graphModel = await resp.json();
+        await render(graphModel);
+    }
+
+    // ── Public API ──
+    window.SmartCodeCustomRenderer = {
+        render: render,
+        fetchAndRender: fetchAndRender,
+        getLastGraphModel: function() { return lastGraphModel; },
+    };
+
+})();