@shumoku/core 0.1.1 → 0.2.1

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

@@ -1,646 +0,0 @@
-/**
- * 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