@shumoku/core 0.1.0

package/dist/renderer/render-model/builder.js

@@ -0,0 +1,646 @@
+/**
+ * RenderModel Builder
+ * Converts LayoutResult to RenderModel
+ */
+import { getThemeColors, getVlanColor } from '../theme.js';
+import { getDeviceIcon, getVendorIconEntry } from '../../icons/index.js';
+// ============================================
+// Constants
+// ============================================
+const DEFAULT_FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+const DEFAULT_FONT_SIZE = 12;
+const PORT_LABEL_FONT_SIZE = 9;
+const SUBGRAPH_LABEL_FONT_SIZE = 14;
+const LINK_LABEL_FONT_SIZE = 11;
+const ENDPOINT_LABEL_FONT_SIZE = 9;
+// ============================================
+// Builder Class
+// ============================================
+export class RenderModelBuilder {
+    textMeasurer;
+    iconRegistry;
+    options;
+    theme;
+    version = 0;
+    constructor(textMeasurer, iconRegistry, options = {}) {
+        this.textMeasurer = textMeasurer;
+        this.iconRegistry = iconRegistry;
+        this.options = {
+            fontFamily: options.fontFamily ?? DEFAULT_FONT_FAMILY,
+            theme: options.theme ?? 'light',
+            showPortLabels: options.showPortLabels ?? true,
+            showEndpointLabels: options.showEndpointLabels ?? true,
+        };
+        this.theme = getThemeColors(this.options.theme);
+    }
+    /**
+     * Build RenderModel from NetworkGraph and LayoutResult
+     */
+    build(_graph, layout) {
+        const startTime = performance.now();
+        // Clear icon registry for fresh build
+        this.iconRegistry.clear();
+        // Build nodes
+        const nodes = new Map();
+        for (const [id, layoutNode] of layout.nodes) {
+            nodes.set(id, this.buildNode(layoutNode));
+        }
+        // Build links
+        const links = new Map();
+        for (const [id, layoutLink] of layout.links) {
+            links.set(id, this.buildLink(layoutLink, layout.nodes));
+        }
+        // Build subgraphs
+        const subgraphs = new Map();
+        for (const [id, layoutSubgraph] of layout.subgraphs) {
+            subgraphs.set(id, this.buildSubgraph(layoutSubgraph));
+        }
+        // Build defs
+        const defs = this.buildDefs();
+        // Build styles
+        const styles = this.buildStyles();
+        const renderTime = performance.now() - startTime;
+        return {
+            version: ++this.version,
+            bounds: layout.bounds,
+            viewBox: `${layout.bounds.x} ${layout.bounds.y} ${layout.bounds.width} ${layout.bounds.height}`,
+            backgroundColor: this.theme.backgroundColor,
+            defs,
+            styles,
+            subgraphs,
+            links,
+            nodes,
+            metadata: {
+                algorithm: layout.metadata?.algorithm ?? 'unknown',
+                renderTime,
+                nodeCount: nodes.size,
+                linkCount: links.size,
+                subgraphCount: subgraphs.size,
+            },
+        };
+    }
+    // ============================================
+    // Node Building
+    // ============================================
+    buildNode(layoutNode) {
+        const { id, position, size, node, ports } = layoutNode;
+        const style = this.resolveNodeStyle(node);
+        // Build labels
+        const labels = this.buildNodeLabels(node, position, size);
+        // Register icon
+        const iconInfo = this.registerNodeIcon(node);
+        // Build ports
+        const renderPorts = ports ? this.buildPorts(id, position, ports) : [];
+        return {
+            id,
+            position,
+            size,
+            shape: node.shape,
+            style,
+            labels,
+            iconRef: iconInfo?.iconRef,
+            iconPosition: iconInfo?.iconPosition
+                ? { x: position.x + iconInfo.iconPosition.x, y: position.y + iconInfo.iconPosition.y }
+                : undefined,
+            iconSize: iconInfo?.iconSize,
+            ports: renderPorts,
+            classes: ['node'],
+            dataAttributes: { 'data-id': id },
+            zIndex: 2,
+            dirty: false,
+            source: node,
+        };
+    }
+    resolveNodeStyle(node) {
+        const style = node.style || {};
+        return {
+            fill: style.fill || this.theme.defaultNodeFill,
+            stroke: style.stroke || this.theme.defaultNodeStroke,
+            strokeWidth: style.strokeWidth || 1,
+            strokeDasharray: style.strokeDasharray,
+            opacity: style.opacity,
+            filter: 'url(#shadow)',
+        };
+    }
+    buildNodeLabels(node, position, _size) {
+        const labels = Array.isArray(node.label) ? node.label : [node.label];
+        const lineHeight = 16;
+        const totalHeight = labels.length * lineHeight;
+        // Check if node has icon
+        const hasIcon = !!(node.vendor && (node.service || node.model)) || !!node.type;
+        const iconOffset = hasIcon ? 28 : 0;
+        const startY = position.y - totalHeight / 2 + lineHeight / 2 + 4 + iconOffset;
+        return labels.map((labelText, i) => {
+            const isBold = labelText.includes('<b>') || labelText.includes('<strong>');
+            const cleanText = labelText.replace(/<\/?b>|<\/?strong>|<br\s*\/?>/gi, '');
+            const textStyle = {
+                fontFamily: this.options.fontFamily,
+                fontSize: DEFAULT_FONT_SIZE,
+                fontWeight: isBold ? 'bold' : 'normal',
+                fill: this.theme.labelColor,
+                textAnchor: 'middle',
+                dominantBaseline: 'auto',
+            };
+            const metrics = this.textMeasurer.measure(cleanText, {
+                fontFamily: textStyle.fontFamily,
+                fontSize: textStyle.fontSize,
+                fontWeight: textStyle.fontWeight,
+            });
+            return {
+                id: `${node.id}-label-${i}`,
+                text: cleanText,
+                position: { x: position.x, y: startY + i * lineHeight },
+                textStyle,
+                measuredWidth: metrics.width,
+                measuredHeight: metrics.height,
+            };
+        });
+    }
+    registerNodeIcon(node) {
+        const iconKey = node.service || node.model;
+        const iconSize = 40;
+        const iconY = node.shape === 'circle' ? 0 : -20; // Offset from center
+        // Try vendor-specific icon first
+        if (node.vendor && iconKey) {
+            const iconEntry = getVendorIconEntry(node.vendor, iconKey, node.resource);
+            if (iconEntry) {
+                const iconTheme = this.options.theme === 'dark' ? 'dark' : 'light';
+                const content = iconEntry[iconTheme] || iconEntry.default;
+                const viewBox = iconEntry.viewBox || '0 0 48 48';
+                const symbolId = this.iconRegistry.register(`${node.vendor}-${iconKey}`, {
+                    content,
+                    viewBox,
+                });
+                return {
+                    iconRef: symbolId,
+                    iconPosition: { x: -iconSize / 2, y: iconY },
+                    iconSize: { width: iconSize, height: iconSize },
+                };
+            }
+        }
+        // Fall back to device type icon
+        if (node.type) {
+            const iconPath = getDeviceIcon(node.type);
+            if (iconPath) {
+                const symbolId = this.iconRegistry.register(`device-${node.type}`, {
+                    content: iconPath,
+                    viewBox: '0 0 24 24',
+                    width: 24,
+                    height: 24,
+                });
+                return {
+                    iconRef: symbolId,
+                    iconPosition: { x: -iconSize / 2, y: iconY },
+                    iconSize: { width: iconSize, height: iconSize },
+                };
+            }
+        }
+        return null;
+    }
+    // ============================================
+    // Port Building
+    // ============================================
+    buildPorts(nodeId, nodePosition, ports) {
+        const result = [];
+        for (const [portId, port] of ports) {
+            const absolutePosition = {
+                x: nodePosition.x + port.position.x,
+                y: nodePosition.y + port.position.y,
+            };
+            const labelPosition = this.calculatePortLabelPosition(absolutePosition, port.side);
+            const labelMetrics = this.textMeasurer.measure(port.label, {
+                fontFamily: this.options.fontFamily,
+                fontSize: PORT_LABEL_FONT_SIZE,
+            });
+            const textAnchor = port.side === 'left' ? 'end' : port.side === 'right' ? 'start' : 'middle';
+            const label = {
+                id: `${portId}-label`,
+                text: port.label,
+                position: labelPosition,
+                textStyle: {
+                    fontFamily: this.options.fontFamily,
+                    fontSize: PORT_LABEL_FONT_SIZE,
+                    fontWeight: 'normal',
+                    fill: this.theme.portLabelColor,
+                    textAnchor,
+                    dominantBaseline: 'auto',
+                },
+                measuredWidth: labelMetrics.width,
+                measuredHeight: labelMetrics.height,
+                background: {
+                    bounds: this.calculateLabelBackground(labelPosition, labelMetrics, textAnchor),
+                    style: { fill: this.theme.portLabelBg },
+                    cornerRadius: 2,
+                },
+            };
+            result.push({
+                id: portId,
+                nodeId,
+                relativePosition: port.position,
+                absolutePosition,
+                size: port.size,
+                side: port.side,
+                style: {
+                    fill: this.theme.portFill,
+                    stroke: this.theme.portStroke,
+                    strokeWidth: 1,
+                },
+                label,
+            });
+        }
+        return result;
+    }
+    calculatePortLabelPosition(portPosition, side) {
+        const offset = 12;
+        switch (side) {
+            case 'top':
+                return { x: portPosition.x, y: portPosition.y - offset };
+            case 'bottom':
+                return { x: portPosition.x, y: portPosition.y + offset + 4 };
+            case 'left':
+                return { x: portPosition.x - offset, y: portPosition.y };
+            case 'right':
+                return { x: portPosition.x + offset, y: portPosition.y };
+        }
+    }
+    calculateLabelBackground(position, metrics, textAnchor) {
+        const padding = 2;
+        const width = metrics.width + padding * 2;
+        const height = metrics.height + padding * 2;
+        let x = position.x - padding;
+        if (textAnchor === 'middle') {
+            x = position.x - width / 2;
+        }
+        else if (textAnchor === 'end') {
+            x = position.x - width + padding;
+        }
+        return {
+            x,
+            y: position.y - metrics.height + padding,
+            width,
+            height,
+        };
+    }
+    // ============================================
+    // Link Building
+    // ============================================
+    buildLink(layoutLink, nodes) {
+        const { id, from, to, fromEndpoint, toEndpoint, points, link } = layoutLink;
+        const style = this.resolveLinkStyle(link);
+        const pathData = this.generatePathData(points);
+        const lineCount = this.getBandwidthLineCount(link.bandwidth);
+        // Build center labels
+        const midPoint = this.getMidPoint(points);
+        const labels = this.buildLinkLabels(link, midPoint);
+        // Build endpoint labels
+        const fromNode = nodes.get(from);
+        const toNode = nodes.get(to);
+        const fromLabels = this.buildEndpointLabels(fromEndpoint, points, 'start', fromNode);
+        const toLabels = this.buildEndpointLabels(toEndpoint, points, 'end', toNode);
+        // Determine marker
+        const arrow = link.arrow ?? 'none';
+        const markerEnd = arrow === 'forward' || arrow === 'both' ? 'url(#arrow)' : undefined;
+        const markerStart = arrow === 'back' || arrow === 'both' ? 'url(#arrow)' : undefined;
+        return {
+            id,
+            fromNodeId: from,
+            toNodeId: to,
+            points,
+            pathData,
+            style,
+            markerStart,
+            markerEnd,
+            lineCount,
+            labels,
+            fromLabels,
+            toLabels,
+            classes: ['link-group'],
+            dataAttributes: { 'data-id': id },
+            zIndex: 1,
+            dirty: false,
+            source: link,
+        };
+    }
+    resolveLinkStyle(link) {
+        const style = link.style || {};
+        const stroke = style.stroke || getVlanColor(link.vlan) || this.theme.defaultLinkStroke;
+        const strokeWidth = style.strokeWidth || this.getLinkStrokeWidth(link.type);
+        const strokeDasharray = this.getLinkDasharray(link.type);
+        return {
+            fill: 'none',
+            stroke,
+            strokeWidth,
+            strokeDasharray: strokeDasharray || undefined,
+        };
+    }
+    getLinkStrokeWidth(type) {
+        switch (type) {
+            case 'thick': return 3;
+            case 'double': return 2;
+            default: return 1.5;
+        }
+    }
+    getLinkDasharray(type) {
+        switch (type) {
+            case 'dashed': return '5 3';
+            case 'invisible': return '0';
+            default: return '';
+        }
+    }
+    getBandwidthLineCount(bandwidth) {
+        switch (bandwidth) {
+            case '1G': return 1;
+            case '10G': return 2;
+            case '25G': return 3;
+            case '40G': return 4;
+            case '100G': return 5;
+            default: return 1;
+        }
+    }
+    generatePathData(points) {
+        if (points.length === 4) {
+            // 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
+            return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+        }
+        else {
+            // Polyline
+            return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+        }
+    }
+    getMidPoint(points) {
+        if (points.length === 4) {
+            // Bezier midpoint at t=0.5
+            const t = 0.5;
+            const mt = 1 - t;
+            return {
+                x: mt * mt * mt * points[0].x + 3 * mt * mt * t * points[1].x + 3 * mt * t * t * points[2].x + t * t * t * points[3].x,
+                y: mt * mt * mt * points[0].y + 3 * mt * mt * t * points[1].y + 3 * mt * t * t * points[2].y + t * t * t * points[3].y,
+            };
+        }
+        else if (points.length >= 2) {
+            const midIndex = Math.floor(points.length / 2);
+            if (midIndex > 0) {
+                return {
+                    x: (points[midIndex - 1].x + points[midIndex].x) / 2,
+                    y: (points[midIndex - 1].y + points[midIndex].y) / 2,
+                };
+            }
+        }
+        return points[0] || { x: 0, y: 0 };
+    }
+    buildLinkLabels(link, midPoint) {
+        const labels = [];
+        let yOffset = -8;
+        // Link label
+        if (link.label) {
+            const labelText = Array.isArray(link.label) ? link.label.join(' / ') : link.label;
+            const metrics = this.textMeasurer.measure(labelText, {
+                fontFamily: this.options.fontFamily,
+                fontSize: LINK_LABEL_FONT_SIZE,
+            });
+            labels.push({
+                id: `${link.id || 'link'}-label`,
+                text: labelText,
+                position: { x: midPoint.x, y: midPoint.y + yOffset },
+                textStyle: {
+                    fontFamily: this.options.fontFamily,
+                    fontSize: LINK_LABEL_FONT_SIZE,
+                    fontWeight: 'normal',
+                    fill: this.theme.labelSecondaryColor,
+                    textAnchor: 'middle',
+                    dominantBaseline: 'auto',
+                },
+                measuredWidth: metrics.width,
+                measuredHeight: metrics.height,
+            });
+            yOffset += 12;
+        }
+        // VLAN label
+        if (link.vlan && link.vlan.length > 0) {
+            const vlanText = link.vlan.length === 1
+                ? `VLAN ${link.vlan[0]}`
+                : `VLAN ${link.vlan.join(', ')}`;
+            const metrics = this.textMeasurer.measure(vlanText, {
+                fontFamily: this.options.fontFamily,
+                fontSize: LINK_LABEL_FONT_SIZE,
+            });
+            labels.push({
+                id: `${link.id || 'link'}-vlan`,
+                text: vlanText,
+                position: { x: midPoint.x, y: midPoint.y + yOffset },
+                textStyle: {
+                    fontFamily: this.options.fontFamily,
+                    fontSize: LINK_LABEL_FONT_SIZE,
+                    fontWeight: 'normal',
+                    fill: this.theme.labelSecondaryColor,
+                    textAnchor: 'middle',
+                    dominantBaseline: 'auto',
+                },
+                measuredWidth: metrics.width,
+                measuredHeight: metrics.height,
+            });
+        }
+        return labels;
+    }
+    buildEndpointLabels(endpoint, points, which, node) {
+        if (!this.options.showEndpointLabels || !endpoint.ip) {
+            return [];
+        }
+        const endpointIdx = which === 'start' ? 0 : points.length - 1;
+        const endpointPoint = points[endpointIdx];
+        const nextIdx = which === 'start' ? 1 : points.length - 2;
+        const nextPoint = points[nextIdx];
+        // Calculate label position (offset from endpoint)
+        const dx = nextPoint.x - endpointPoint.x;
+        const dy = nextPoint.y - endpointPoint.y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        const nx = len > 0 ? dx / len : 0;
+        const ny = len > 0 ? dy / len : 1;
+        const offsetDist = 30;
+        const perpDist = 20;
+        const perpX = -ny;
+        const perpY = nx;
+        const isVertical = Math.abs(dy) > Math.abs(dx);
+        const sideMultiplier = isVertical
+            ? (node ? (endpointPoint.x - node.position.x > 0 ? 1 : -1) : 1)
+            : (which === 'start' ? -1 : 1);
+        const labelX = isVertical
+            ? endpointPoint.x + perpDist * sideMultiplier
+            : endpointPoint.x + nx * offsetDist + perpX * perpDist * sideMultiplier;
+        const labelY = isVertical
+            ? endpointPoint.y + ny * offsetDist
+            : endpointPoint.y + ny * offsetDist + perpY * perpDist * sideMultiplier;
+        const textAnchor = Math.abs(labelX - endpointPoint.x) > 8
+            ? (labelX > endpointPoint.x ? 'start' : 'end')
+            : 'middle';
+        const metrics = this.textMeasurer.measure(endpoint.ip, {
+            fontFamily: this.options.fontFamily,
+            fontSize: ENDPOINT_LABEL_FONT_SIZE,
+        });
+        return [{
+                id: `${endpoint.node}-${endpoint.port || 'endpoint'}-ip`,
+                text: endpoint.ip,
+                position: { x: labelX, y: labelY },
+                textStyle: {
+                    fontFamily: this.options.fontFamily,
+                    fontSize: ENDPOINT_LABEL_FONT_SIZE,
+                    fontWeight: 'normal',
+                    fill: this.theme.labelColor,
+                    textAnchor,
+                    dominantBaseline: 'auto',
+                },
+                measuredWidth: metrics.width,
+                measuredHeight: metrics.height,
+                background: {
+                    bounds: this.calculateLabelBackground({ x: labelX, y: labelY }, metrics, textAnchor),
+                    style: {
+                        fill: this.theme.endpointLabelBg,
+                        stroke: this.theme.endpointLabelStroke,
+                        strokeWidth: 0.5,
+                    },
+                    cornerRadius: 2,
+                },
+            }];
+    }
+    // ============================================
+    // Subgraph Building
+    // ============================================
+    buildSubgraph(layoutSubgraph) {
+        const { id, bounds, subgraph } = layoutSubgraph;
+        const style = this.resolveSubgraphStyle(subgraph);
+        // Build label
+        const labelPos = { x: bounds.x + 10, y: bounds.y + 20 };
+        const labelMetrics = this.textMeasurer.measure(subgraph.label, {
+            fontFamily: this.options.fontFamily,
+            fontSize: SUBGRAPH_LABEL_FONT_SIZE,
+            fontWeight: 'bold',
+        });
+        // Register icon if present
+        let iconRef;
+        let iconPosition;
+        let iconSize;
+        const iconKey = subgraph.service || subgraph.model;
+        if (subgraph.vendor && iconKey) {
+            const iconEntry = getVendorIconEntry(subgraph.vendor, iconKey, subgraph.resource);
+            if (iconEntry) {
+                const iconTheme = this.options.theme === 'dark' ? 'dark' : 'light';
+                const content = iconEntry[iconTheme] || iconEntry.default;
+                const viewBox = iconEntry.viewBox || '0 0 48 48';
+                iconRef = this.iconRegistry.register(`${subgraph.vendor}-${iconKey}`, {
+                    content,
+                    viewBox,
+                });
+                iconPosition = { x: bounds.x + 8, y: bounds.y + 8 };
+                iconSize = { width: 24, height: 24 };
+                // Adjust label position for icon
+                labelPos.x = bounds.x + 24 + 16;
+            }
+        }
+        const label = {
+            id: `${id}-label`,
+            text: subgraph.label,
+            position: labelPos,
+            textStyle: {
+                fontFamily: this.options.fontFamily,
+                fontSize: SUBGRAPH_LABEL_FONT_SIZE,
+                fontWeight: 'bold',
+                fill: this.theme.subgraphLabelColor,
+                textAnchor: 'start',
+                dominantBaseline: 'auto',
+            },
+            measuredWidth: labelMetrics.width,
+            measuredHeight: labelMetrics.height,
+        };
+        return {
+            id,
+            bounds,
+            style,
+            cornerRadius: 8,
+            label,
+            iconRef,
+            iconPosition,
+            iconSize,
+            classes: ['subgraph'],
+            dataAttributes: { 'data-id': id },
+            zIndex: 0,
+            dirty: false,
+            source: subgraph,
+        };
+    }
+    resolveSubgraphStyle(subgraph) {
+        const style = subgraph.style || {};
+        return {
+            fill: style.fill || this.theme.subgraphFill,
+            stroke: style.stroke || this.theme.subgraphStroke,
+            strokeWidth: style.strokeWidth || 1,
+            strokeDasharray: style.strokeDasharray,
+        };
+    }
+    // ============================================
+    // Defs Building
+    // ============================================
+    buildDefs() {
+        // Get icons from registry
+        const icons = this.iconRegistry.getIcons();
+        // Build markers
+        const markers = new Map();
+        markers.set('arrow', {
+            id: 'arrow',
+            width: 10,
+            height: 7,
+            refX: 9,
+            refY: 3.5,
+            orient: 'auto',
+            content: '<polygon points="0 0, 10 3.5, 0 7" />',
+            fill: this.theme.defaultLinkStroke,
+        });
+        markers.set('arrow-red', {
+            id: 'arrow-red',
+            width: 10,
+            height: 7,
+            refX: 9,
+            refY: 3.5,
+            orient: 'auto',
+            content: '<polygon points="0 0, 10 3.5, 0 7" />',
+            fill: '#dc2626',
+        });
+        // Build filters
+        const filters = new Map();
+        filters.set('shadow', {
+            id: 'shadow',
+            x: '-20%',
+            y: '-20%',
+            width: '140%',
+            height: '140%',
+            content: '<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15" />',
+        });
+        return { icons, markers, filters };
+    }
+    // ============================================
+    // Styles Building
+    // ============================================
+    buildStyles() {
+        return `
+  .node { cursor: pointer; }
+  .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
+  .node-label { font-family: ${this.options.fontFamily}; font-size: 12px; fill: ${this.theme.labelColor}; }
+  .node-label-bold { font-weight: bold; }
+  .node-icon { color: ${this.theme.labelSecondaryColor}; }
+  .subgraph-icon { opacity: 0.9; }
+  .subgraph-label { font-family: ${this.options.fontFamily}; font-size: 14px; font-weight: 600; fill: ${this.theme.subgraphLabelColor}; }
+  .link-label { font-family: ${this.options.fontFamily}; font-size: 11px; fill: ${this.theme.labelSecondaryColor}; }
+  .endpoint-label { font-family: ${this.options.fontFamily}; font-size: 9px; fill: ${this.theme.labelColor}; }
+`;
+    }
+}
+// ============================================
+// Factory Function
+// ============================================
+export function createRenderModelBuilder(textMeasurer, iconRegistry, options) {
+    return new RenderModelBuilder(textMeasurer, iconRegistry, options);
+}
+//# sourceMappingURL=builder.js.map