@shumoku/core 0.1.0 → 0.2.0

package/dist/renderer/svg.js

@@ -3,6 +3,7 @@
  * Renders NetworkGraph to SVG
  */
 import { getDeviceIcon, getVendorIconEntry } from '../icons/index.js';
+import { DEFAULT_ICON_SIZE, ICON_LABEL_GAP, LABEL_LINE_HEIGHT, MAX_ICON_WIDTH_RATIO, } from '../constants.js';
 const LIGHT_THEME = {
     backgroundColor: '#ffffff',
     defaultNodeFill: '#e2e8f0',
@@ -69,30 +70,191 @@ export class SVGRenderer {
         const theme = graph.settings?.theme;
         this.themeColors = this.getThemeColors(theme);
         this.iconTheme = this.getIconTheme(theme);
+        // Calculate legend dimensions if enabled
+        const legendSettings = this.getLegendSettings(graph.settings?.legend);
+        let legendWidth = 0;
+        let legendHeight = 0;
+        if (legendSettings.enabled) {
+            const legendDims = this.calculateLegendDimensions(graph, legendSettings);
+            legendWidth = legendDims.width;
+            legendHeight = legendDims.height;
+        }
+        // Expand bounds to include legend with padding
+        const legendPadding = 20;
+        const expandedBounds = {
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width + (legendSettings.enabled && legendWidth > 0 ? legendPadding : 0),
+            height: bounds.height + (legendSettings.enabled && legendHeight > 0 ? legendPadding : 0),
+        };
         const parts = [];
-        // SVG header using content bounds
-        const viewBox = `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`;
-        parts.push(this.renderHeader(bounds.width, bounds.height, viewBox));
+        // SVG header using expanded bounds
+        const viewBox = `${expandedBounds.x} ${expandedBounds.y} ${expandedBounds.width} ${expandedBounds.height}`;
+        parts.push(this.renderHeader(expandedBounds.width, expandedBounds.height, viewBox));
         // Defs (markers, gradients)
         parts.push(this.renderDefs());
         // Styles
         parts.push(this.renderStyles());
-        // Subgraphs (background, render first)
+        // Layer 1: Subgraphs (background)
         layout.subgraphs.forEach((sg) => {
             parts.push(this.renderSubgraph(sg));
         });
-        // Links
+        // Layer 2: Node backgrounds (shapes)
+        layout.nodes.forEach((node) => {
+            parts.push(this.renderNodeBackground(node));
+        });
+        // Layer 3: Links (on top of node backgrounds)
         layout.links.forEach((link) => {
             parts.push(this.renderLink(link, layout.nodes));
         });
-        // Nodes
+        // Layer 4: Node foregrounds (content + ports, on top of links)
         layout.nodes.forEach((node) => {
-            parts.push(this.renderNode(node));
+            parts.push(this.renderNodeForeground(node));
         });
+        // Legend (if enabled) - use already calculated legendSettings
+        if (legendSettings.enabled && legendWidth > 0) {
+            parts.push(this.renderLegend(graph, layout, legendSettings));
+        }
         // Close SVG
         parts.push('</svg>');
         return parts.join('\n');
     }
+    /**
+     * Calculate legend dimensions without rendering
+     */
+    calculateLegendDimensions(graph, settings) {
+        const lineHeight = 20;
+        const padding = 12;
+        const iconWidth = 30;
+        const maxLabelWidth = 100;
+        // Count items
+        let itemCount = 0;
+        if (settings.showBandwidth) {
+            const usedBandwidths = new Set();
+            graph.links.forEach(link => {
+                if (link.bandwidth)
+                    usedBandwidths.add(link.bandwidth);
+            });
+            itemCount += usedBandwidths.size;
+        }
+        if (itemCount === 0) {
+            return { width: 0, height: 0 };
+        }
+        const width = iconWidth + maxLabelWidth + padding * 2;
+        const height = itemCount * lineHeight + padding * 2 + 20; // +20 for title
+        return { width, height };
+    }
+    /**
+     * Parse legend settings from various input formats
+     */
+    getLegendSettings(legend) {
+        if (legend === true) {
+            return {
+                enabled: true,
+                position: 'top-right',
+                showDeviceTypes: true,
+                showBandwidth: true,
+                showCableTypes: true,
+                showVlans: false,
+            };
+        }
+        if (legend && typeof legend === 'object') {
+            return {
+                enabled: legend.enabled !== false,
+                position: legend.position ?? 'top-right',
+                showDeviceTypes: legend.showDeviceTypes ?? true,
+                showBandwidth: legend.showBandwidth ?? true,
+                showCableTypes: legend.showCableTypes ?? true,
+                showVlans: legend.showVlans ?? false,
+            };
+        }
+        return { enabled: false, position: 'top-right' };
+    }
+    /**
+     * Render legend showing visual elements used in the diagram
+     */
+    renderLegend(graph, layout, settings) {
+        const items = [];
+        const lineHeight = 20;
+        const padding = 12;
+        const iconWidth = 30;
+        const maxLabelWidth = 100;
+        // Collect used bandwidths
+        const usedBandwidths = new Set();
+        graph.links.forEach(link => {
+            if (link.bandwidth)
+                usedBandwidths.add(link.bandwidth);
+        });
+        // Collect used device types
+        const usedDeviceTypes = new Set();
+        graph.nodes.forEach(node => {
+            if (node.type)
+                usedDeviceTypes.add(node.type);
+        });
+        // Build legend items
+        if (settings.showBandwidth && usedBandwidths.size > 0) {
+            const sortedBandwidths = ['1G', '10G', '25G', '40G', '100G'].filter(b => usedBandwidths.has(b));
+            for (const bw of sortedBandwidths) {
+                const config = this.getBandwidthConfig(bw);
+                items.push({
+                    icon: this.renderBandwidthLegendIcon(config.lineCount),
+                    label: bw,
+                });
+            }
+        }
+        if (items.length === 0)
+            return '';
+        // Calculate legend dimensions
+        const legendWidth = iconWidth + maxLabelWidth + padding * 2;
+        const legendHeight = items.length * lineHeight + padding * 2 + 20; // +20 for title
+        // Position based on settings
+        const { bounds } = layout;
+        let legendX = bounds.x + bounds.width - legendWidth - 10;
+        let legendY = bounds.y + bounds.height - legendHeight - 10;
+        switch (settings.position) {
+            case 'top-left':
+                legendX = bounds.x + 10;
+                legendY = bounds.y + 10;
+                break;
+            case 'top-right':
+                legendX = bounds.x + bounds.width - legendWidth - 10;
+                legendY = bounds.y + 10;
+                break;
+            case 'bottom-left':
+                legendX = bounds.x + 10;
+                legendY = bounds.y + bounds.height - legendHeight - 10;
+                break;
+        }
+        // Render legend box
+        let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
+  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
+    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
+  <text x="${padding}" y="${padding + 12}" class="subgraph-label" font-size="11">Legend</text>`;
+        // Render items
+        items.forEach((item, index) => {
+            const y = padding + 28 + index * lineHeight;
+            svg += `\n  <g transform="translate(${padding}, ${y})">`;
+            svg += `\n    ${item.icon}`;
+            svg += `\n    <text x="${iconWidth + 4}" y="4" class="node-label" font-size="10">${this.escapeXml(item.label)}</text>`;
+            svg += `\n  </g>`;
+        });
+        svg += '\n</g>';
+        return svg;
+    }
+    /**
+     * Render bandwidth indicator for legend
+     */
+    renderBandwidthLegendIcon(lineCount) {
+        const lineSpacing = 3;
+        const lineWidth = 24;
+        const strokeWidth = 2;
+        const offsets = this.calculateLineOffsets(lineCount, lineSpacing);
+        const lines = offsets.map(offset => {
+            const y = offset;
+            return `<line x1="0" y1="${y}" x2="${lineWidth}" y2="${y}" stroke="${this.themeColors.defaultLinkStroke}" stroke-width="${strokeWidth}" />`;
+        });
+        return `<g transform="translate(0, 0)">${lines.join('')}</g>`;
+    }
     renderHeader(width, height, viewBox) {
         return `<svg xmlns="http://www.w3.org/2000/svg"
   viewBox="${viewBox}"
@@ -195,8 +357,9 @@ export class SVGRenderer {
   <text x="${labelX}" y="${labelY}" class="subgraph-label" text-anchor="${textAnchor}">${this.escapeXml(subgraph.label)}</text>
 </g>`;
     }
-    renderNode(layoutNode) {
-        const { id, position, size, node, ports } = layoutNode;
+    /** Render node background (shape only) */
+    renderNodeBackground(layoutNode) {
+        const { id, position, size, node } = layoutNode;
         const x = position.x;
         const y = position.y;
         const w = size.width;
@@ -207,13 +370,18 @@ export class SVGRenderer {
         const strokeWidth = style.strokeWidth || 1;
         const strokeDasharray = style.strokeDasharray || '';
         const shape = this.renderNodeShape(node.shape, x, y, w, h, fill, stroke, strokeWidth, strokeDasharray);
-        const iconResult = this.renderNodeIcon(node, x, y, w, h);
-        const label = this.renderNodeLabel(node, x, y, h, iconResult.height);
+        return `<g class="node-bg" data-id="${id}">${shape}</g>`;
+    }
+    /** Render node foreground (content + ports) */
+    renderNodeForeground(layoutNode) {
+        const { id, position, size, node, ports } = layoutNode;
+        const x = position.x;
+        const y = position.y;
+        const w = size.width;
+        const content = this.renderNodeContent(node, x, y, w);
         const portsRendered = this.renderPorts(x, y, ports);
-        return `<g class="node" data-id="${id}" transform="translate(0,0)">
-  ${shape}
-  ${iconResult.svg}
-  ${label}
+        return `<g class="node-fg" data-id="${id}">
+  ${content}
   ${portsRendered}
 </g>`;
     }
@@ -320,9 +488,8 @@ export class SVGRenderer {
      * Calculate icon dimensions for a node
      */
     calculateIconInfo(node, w) {
-        const defaultIconSize = 40;
-        const iconPadding = 16;
-        const maxIconWidth = w - iconPadding;
+        // Cap icon width at MAX_ICON_WIDTH_RATIO of node width to leave room for ports
+        const maxIconWidth = Math.round(w * MAX_ICON_WIDTH_RATIO);
         // Try vendor-specific icon first (service for cloud, model for hardware)
         const iconKey = node.service || node.model;
         if (node.vendor && iconKey) {
@@ -337,8 +504,8 @@ export class SVGRenderer {
                         const vbWidth = parseInt(viewBoxMatch[1]);
                         const vbHeight = parseInt(viewBoxMatch[2]);
                         const aspectRatio = vbWidth / vbHeight;
-                        let iconWidth = Math.round(defaultIconSize * aspectRatio);
-                        let iconHeight = defaultIconSize;
+                        let iconWidth = Math.round(DEFAULT_ICON_SIZE * aspectRatio);
+                        let iconHeight = DEFAULT_ICON_SIZE;
                         if (iconWidth > maxIconWidth) {
                             iconWidth = maxIconWidth;
                             iconHeight = Math.round(maxIconWidth / aspectRatio);
@@ -357,8 +524,8 @@ export class SVGRenderer {
                     const vbWidth = parseInt(vbMatch[3]);
                     const vbHeight = parseInt(vbMatch[4]);
                     const aspectRatio = vbWidth / vbHeight;
-                    let iconWidth = Math.abs(aspectRatio - 1) < 0.01 ? defaultIconSize : Math.round(defaultIconSize * aspectRatio);
-                    let iconHeight = defaultIconSize;
+                    let iconWidth = Math.abs(aspectRatio - 1) < 0.01 ? DEFAULT_ICON_SIZE : Math.round(DEFAULT_ICON_SIZE * aspectRatio);
+                    let iconHeight = DEFAULT_ICON_SIZE;
                     if (iconWidth > maxIconWidth) {
                         iconWidth = maxIconWidth;
                         iconHeight = Math.round(maxIconWidth / aspectRatio);
@@ -371,9 +538,9 @@ export class SVGRenderer {
                 }
                 // Fallback: use viewBox directly
                 return {
-                    width: defaultIconSize,
-                    height: defaultIconSize,
-                    svg: `<svg width="${defaultIconSize}" height="${defaultIconSize}" viewBox="${viewBox}">${vendorIcon}</svg>`,
+                    width: DEFAULT_ICON_SIZE,
+                    height: DEFAULT_ICON_SIZE,
+                    svg: `<svg width="${DEFAULT_ICON_SIZE}" height="${DEFAULT_ICON_SIZE}" viewBox="${viewBox}">${vendorIcon}</svg>`,
                 };
             }
         }
@@ -382,36 +549,41 @@ export class SVGRenderer {
         if (!iconPath)
             return null;
         return {
-            width: defaultIconSize,
-            height: defaultIconSize,
-            svg: `<svg width="${defaultIconSize}" height="${defaultIconSize}" viewBox="0 0 24 24" fill="currentColor">${iconPath}</svg>`,
+            width: DEFAULT_ICON_SIZE,
+            height: DEFAULT_ICON_SIZE,
+            svg: `<svg width="${DEFAULT_ICON_SIZE}" height="${DEFAULT_ICON_SIZE}" viewBox="0 0 24 24" fill="currentColor">${iconPath}</svg>`,
         };
     }
-    renderNodeIcon(node, x, y, w, h) {
+    /**
+     * Render node content (icon + label) with dynamic vertical centering
+     */
+    renderNodeContent(node, x, y, w) {
         const iconInfo = this.calculateIconInfo(node, w);
-        if (!iconInfo)
-            return { svg: '', height: 0 };
-        const iconY = y - h / 2 + 12; // Position near top of node
-        const svg = `<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
-      ${iconInfo.svg}
-    </g>`;
-        return { svg, height: iconInfo.height };
-    }
-    renderNodeLabel(node, x, y, _h, iconHeight) {
         const labels = Array.isArray(node.label) ? node.label : [node.label];
-        const lineHeight = 16;
-        const totalHeight = labels.length * lineHeight;
-        // Shift labels down based on actual icon height (with small padding)
-        const iconOffset = iconHeight > 0 ? iconHeight - 8 : 0;
-        const startY = y - totalHeight / 2 + lineHeight / 2 + 4 + iconOffset;
-        const lines = labels.map((line, i) => {
-            // Parse simple HTML tags
+        const labelHeight = labels.length * LABEL_LINE_HEIGHT;
+        // Calculate total content height
+        const iconHeight = iconInfo?.height || 0;
+        const gap = iconHeight > 0 ? ICON_LABEL_GAP : 0;
+        const totalContentHeight = iconHeight + gap + labelHeight;
+        // Center the content block vertically in the node
+        const contentTop = y - totalContentHeight / 2;
+        const parts = [];
+        // Render icon at top of content block
+        if (iconInfo) {
+            const iconY = contentTop;
+            parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
+      ${iconInfo.svg}
+    </g>`);
+        }
+        // Render labels below icon
+        const labelStartY = contentTop + iconHeight + gap + LABEL_LINE_HEIGHT * 0.7; // 0.7 for text baseline adjustment
+        labels.forEach((line, i) => {
             const isBold = line.includes('<b>') || line.includes('<strong>');
             const cleanLine = line.replace(/<\/?b>|<\/?strong>|<br\s*\/?>/gi, '');
             const className = isBold ? 'node-label node-label-bold' : 'node-label';
-            return `<text x="${x}" y="${startY + i * lineHeight}" class="${className}" text-anchor="middle">${this.escapeXml(cleanLine)}</text>`;
+            parts.push(`<text x="${x}" y="${labelStartY + i * LABEL_LINE_HEIGHT}" class="${className}" text-anchor="middle">${this.escapeXml(cleanLine)}</text>`);
         });
-        return lines.join('\n  ');
+        return parts.join('\n  ');
     }
     renderLink(layoutLink, nodes) {
         const { id, points, link, fromEndpoint, toEndpoint } = layoutLink;
@@ -488,9 +660,6 @@ export class SVGRenderer {
         // Normalize direction
         const nx = len > 0 ? dx / len : 0;
         const ny = len > 0 ? dy / len : 1;
-        // Perpendicular direction (90 degrees rotated)
-        const perpX = -ny;
-        const perpY = nx;
         const isVertical = Math.abs(dy) > Math.abs(dx);
         // Hash port name as fallback
         const portHash = this.hashString(portName);
@@ -518,21 +687,27 @@ export class SVGRenderer {
         // Position: offset along line direction + fixed horizontal offset for vertical links
         let x;
         let y;
+        let anchor;
         if (isVertical) {
             // For vertical links, use fixed horizontal offset (simpler and consistent)
             x = endpoint.x + perpDist * sideMultiplier;
             y = endpoint.y + ny * offsetDist;
+            // Text anchor based on final position relative to endpoint
+            anchor = 'middle';
+            const labelDx = x - endpoint.x;
+            if (Math.abs(labelDx) > 8) {
+                anchor = labelDx > 0 ? 'start' : 'end';
+            }
         }
         else {
-            // For horizontal links, use perpendicular calculation
-            x = endpoint.x + nx * offsetDist + perpX * perpDist * sideMultiplier;
-            y = endpoint.y + ny * offsetDist + perpY * perpDist * sideMultiplier;
-        }
-        // Text anchor based on final position relative to endpoint
-        let anchor = 'middle';
-        const labelDx = x - endpoint.x;
-        if (Math.abs(labelDx) > 8) {
-            anchor = labelDx > 0 ? 'start' : 'end';
+            // For horizontal links, position label near the port (not toward center)
+            // Keep x near the endpoint, offset y below the line
+            x = endpoint.x;
+            y = endpoint.y + perpDist; // Always below the line
+            // Text anchor: extend toward the center of the link
+            // Start endpoint extends right (start), end endpoint extends left (end)
+            // Check direction: if nextPoint is to the left, we're on the right side
+            anchor = nx < 0 ? 'end' : 'start';
         }
         return { x, y, anchor };
     }
@@ -570,7 +745,7 @@ export class SVGRenderer {
         switch (type) {
             case 'thick': return 3;
             case 'double': return 2;
-            default: return 1.5;
+            default: return 2;
         }
     }
     /**
@@ -582,7 +757,7 @@ export class SVGRenderer {
      * 100G → 5 lines
      */
     getBandwidthConfig(bandwidth) {
-        const strokeWidth = 1.5;
+        const strokeWidth = 2;
         switch (bandwidth) {
             case '1G':
                 return { lineCount: 1, strokeWidth };
@@ -632,21 +807,44 @@ ${result}`;
         return paths.join('\n');
     }
     /**
-     * Generate SVG path string from points
+     * Generate SVG path string from points with rounded corners
      */
-    generatePath(points) {
-        if (points.length === 4) {
-            // Cubic bezier curve
-            return `M ${points[0].x} ${points[0].y} C ${points[1].x} ${points[1].y}, ${points[2].x} ${points[2].y}, ${points[3].x} ${points[3].y}`;
-        }
-        else if (points.length === 2) {
-            // Straight line
+    generatePath(points, cornerRadius = 8) {
+        if (points.length < 2)
+            return '';
+        if (points.length === 2) {
             return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
         }
-        else {
-            // Polyline
-            return `M ${points[0].x} ${points[0].y} ` + points.slice(1).map(p => `L ${p.x} ${p.y}`).join(' ');
+        const parts = [`M ${points[0].x} ${points[0].y}`];
+        for (let i = 1; i < points.length - 1; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const next = points[i + 1];
+            // Calculate distances to prev and next points
+            const distPrev = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+            const distNext = Math.hypot(next.x - curr.x, next.y - curr.y);
+            // Limit radius to half the shortest segment
+            const maxRadius = Math.min(distPrev, distNext) / 2;
+            const radius = Math.min(cornerRadius, maxRadius);
+            if (radius < 1) {
+                // Too small for rounding, just use straight line
+                parts.push(`L ${curr.x} ${curr.y}`);
+                continue;
+            }
+            // Calculate direction vectors
+            const dirPrev = { x: (curr.x - prev.x) / distPrev, y: (curr.y - prev.y) / distPrev };
+            const dirNext = { x: (next.x - curr.x) / distNext, y: (next.y - curr.y) / distNext };
+            // Points where curve starts and ends
+            const startCurve = { x: curr.x - dirPrev.x * radius, y: curr.y - dirPrev.y * radius };
+            const endCurve = { x: curr.x + dirNext.x * radius, y: curr.y + dirNext.y * radius };
+            // Line to start of curve, then quadratic bezier through corner
+            parts.push(`L ${startCurve.x} ${startCurve.y}`);
+            parts.push(`Q ${curr.x} ${curr.y} ${endCurve.x} ${endCurve.y}`);
         }
+        // Line to final point
+        const last = points[points.length - 1];
+        parts.push(`L ${last.x} ${last.y}`);
+        return parts.join(' ');
     }
     /**
      * Calculate offsets for parallel lines (centered around 0)
@@ -661,25 +859,54 @@ ${result}`;
         return offsets;
     }
     /**
-     * Offset points perpendicular to the line direction
+     * Offset points perpendicular to line direction, handling each segment properly
+     * For orthogonal paths, this maintains parallel lines through bends
      */
     offsetPoints(points, offset) {
         if (points.length < 2)
             return points;
-        // Calculate perpendicular direction from first to last point
-        const dx = points[points.length - 1].x - points[0].x;
-        const dy = points[points.length - 1].y - points[0].y;
+        const result = [];
+        for (let i = 0; i < points.length; i++) {
+            const p = points[i];
+            if (i === 0) {
+                // First point: use direction to next point
+                const next = points[i + 1];
+                const perp = this.getPerpendicular(p, next);
+                result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset });
+            }
+            else if (i === points.length - 1) {
+                // Last point: use direction from previous point
+                const prev = points[i - 1];
+                const perp = this.getPerpendicular(prev, p);
+                result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset });
+            }
+            else {
+                // Middle point (bend): offset based on incoming segment direction
+                const prev = points[i - 1];
+                const perp = this.getPerpendicular(prev, p);
+                result.push({ x: p.x + perp.x * offset, y: p.y + perp.y * offset });
+                // Also add a point for the outgoing segment if direction changes
+                const next = points[i + 1];
+                const perpNext = this.getPerpendicular(p, next);
+                // Check if direction changed (bend point)
+                if (Math.abs(perp.x - perpNext.x) > 0.01 || Math.abs(perp.y - perpNext.y) > 0.01) {
+                    result.push({ x: p.x + perpNext.x * offset, y: p.y + perpNext.y * offset });
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Get perpendicular unit vector for a line segment
+     */
+    getPerpendicular(from, to) {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
         const len = Math.sqrt(dx * dx + dy * dy);
         if (len === 0)
-            return points;
-        // Perpendicular unit vector
-        const perpX = -dy / len;
-        const perpY = dx / len;
-        // Offset all points
-        return points.map(p => ({
-            x: p.x + perpX * offset,
-            y: p.y + perpY * offset,
-        }));
+            return { x: 0, y: 0 };
+        // Perpendicular unit vector (rotate 90 degrees)
+        return { x: -dy / len, y: dx / len };
     }
     /**
      * Get default link type based on redundancy