@trench-craft/sds 1.0.0

package/dist/src/graph/visualizer.js

@@ -0,0 +1,869 @@
+/**
+ * GraphVisualizer - 图谱可视化器
+ * 生成 HTML 交互图谱
+ */
+import { resolve } from 'path';
+import { writeFile, mkdir } from 'fs/promises';
+import { LayoutEngine } from './layouts.js';
+export class GraphVisualizer {
+    db;
+    projectDir;
+    layoutEngine;
+    constructor(projectDir, db) {
+        this.projectDir = projectDir;
+        this.db = db;
+        this.layoutEngine = new LayoutEngine();
+    }
+    /**
+     * 生成可视化
+     */
+    async visualize(options) {
+        const startTime = Date.now();
+        const errors = [];
+        try {
+            // 获取图数据
+            const { nodes, edges } = this.buildGraph(options);
+            // 根据格式生成输出
+            let content;
+            let outputPath;
+            switch (options.format) {
+                case 'html':
+                    content = this.generateHtml(nodes, edges, options);
+                    outputPath = options.outputPath || resolve(this.projectDir, '.sds', 'graph.html');
+                    break;
+                case 'svg':
+                    content = this.generateSvg(nodes, edges, options);
+                    outputPath = options.outputPath || resolve(this.projectDir, '.sds', 'graph.svg');
+                    break;
+                default:
+                    throw new Error(`Unsupported format: ${options.format}`);
+            }
+            // 确保目录存在
+            // sync removed
+            // sync removed
+            const { dirname } = await import('path');
+            await mkdir(dirname(outputPath), { recursive: true });
+            // 写入文件
+            await writeFile(outputPath, content, 'utf-8');
+            return {
+                status: 'completed',
+                outputPath,
+                format: options.format,
+                nodesCount: nodes.length,
+                edgesCount: edges.length,
+                durationMs: Date.now() - startTime,
+                errors,
+            };
+        }
+        catch (error) {
+            errors.push(error.message);
+            return {
+                status: 'failed',
+                outputPath: '',
+                format: options.format,
+                nodesCount: 0,
+                edgesCount: 0,
+                durationMs: Date.now() - startTime,
+                errors,
+            };
+        }
+    }
+    /**
+     * 构建图数据
+     */
+    buildGraph(options) {
+        const nodes = [];
+        const edges = [];
+        const nodeMap = new Map();
+        // 获取文件
+        const files = this.db.getAllFiles();
+        const symbols = this.db.getAllSymbols();
+        const callEdges = this.db.query(`
+      SELECT 
+        cg.id,
+        cg.caller_file_id,
+        cg.caller_symbol_id,
+        cg.callee_file_id,
+        cg.callee_symbol_id,
+        cg.relation_type,
+        f1.path as caller_file,
+        s1.name as caller_name,
+        f2.path as callee_file,
+        s2.name as callee_name
+      FROM call_graph cg
+      JOIN files f1 ON cg.caller_file_id = f1.id
+      LEFT JOIN symbols s1 ON cg.caller_symbol_id = s1.id
+      JOIN files f2 ON cg.callee_file_id = f2.id
+      LEFT JOIN symbols s2 ON cg.callee_symbol_id = s2.id
+    `);
+        // 创建模块节点
+        const modules = new Set();
+        for (const file of files) {
+            const parts = file.path.split('/');
+            if (parts.length > 1) {
+                modules.add(parts[0]);
+            }
+        }
+        for (const module of modules) {
+            const node = {
+                id: `module:${module}`,
+                label: module,
+                type: 'module',
+                size: 30,
+                color: '#4CAF50',
+                group: 'module',
+            };
+            nodes.push(node);
+            nodeMap.set(node.id, node);
+        }
+        // 创建文件节点
+        for (const file of files.slice(0, options.maxNodes)) {
+            const parts = file.path.split('/');
+            const module = parts.length > 1 ? parts[0] : 'root';
+            const node = {
+                id: `file:${file.path}`,
+                label: parts[parts.length - 1],
+                type: 'file',
+                path: file.path,
+                size: 15,
+                color: '#2196F3',
+                group: module,
+            };
+            nodes.push(node);
+            nodeMap.set(node.id, node);
+            // 添加模块到文件的边
+            edges.push({
+                id: `edge:module:${module}->file:${file.path}`,
+                source: `module:${module}`,
+                target: `file:${file.path}`,
+                type: 'import',
+                weight: 1,
+            });
+        }
+        // 创建符号节点
+        for (const symbol of symbols.slice(0, options.maxNodes * 2)) {
+            const file = files.find(f => f.id === symbol.fileId);
+            if (!file)
+                continue;
+            const node = {
+                id: `symbol:${file.path}:${symbol.name}`,
+                label: symbol.name,
+                type: symbol.type,
+                path: file.path,
+                line: symbol.lineStart,
+                size: 10,
+                color: this.getSymbolColor(symbol.type),
+                group: file.path.split('/')[0] || 'root',
+            };
+            nodes.push(node);
+            nodeMap.set(node.id, node);
+            // 添加文件到符号的边
+            edges.push({
+                id: `edge:file:${file.path}->symbol:${file.path}:${symbol.name}`,
+                source: `file:${file.path}`,
+                target: `symbol:${file.path}:${symbol.name}`,
+                type: 'import',
+                weight: 1,
+            });
+        }
+        // 创建调用边
+        for (const edge of callEdges.slice(0, options.maxEdges)) {
+            const sourceId = edge.caller_symbol_id
+                ? `symbol:${edge.caller_file}:${edge.caller_name}`
+                : `file:${edge.caller_file}`;
+            const targetId = edge.callee_symbol_id
+                ? `symbol:${edge.callee_file}:${edge.callee_name}`
+                : `file:${edge.callee_file}`;
+            if (nodeMap.has(sourceId) && nodeMap.has(targetId)) {
+                edges.push({
+                    id: `edge:${edge.id}`,
+                    source: sourceId,
+                    target: targetId,
+                    type: edge.relation_type,
+                    weight: 2,
+                });
+            }
+        }
+        return { nodes, edges };
+    }
+    /**
+     * 获取符号颜色
+     */
+    getSymbolColor(type) {
+        const colors = {
+            function: '#FF9800',
+            class: '#E91E63',
+            interface: '#9C27B0',
+            type: '#673AB7',
+            variable: '#607D8B',
+        };
+        return colors[type] || '#757575';
+    }
+    /**
+     * 生成 HTML
+     */
+    generateHtml(nodes, edges, options) {
+        const theme = options.theme === 'dark' ? 'dark' : 'light';
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TrenchCraft Graph Visualization</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
+      color: ${theme === 'dark' ? '#ffffff' : '#333333'};
+    }
+    
+    #container {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+    }
+    
+    #graph {
+      width: 100%;
+      height: 100%;
+    }
+    
+    #sidebar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 300px;
+      height: 100%;
+      background: ${theme === 'dark' ? '#2d2d2d' : '#f5f5f5'};
+      border-left: 1px solid ${theme === 'dark' ? '#444' : '#ddd'};
+      padding: 20px;
+      overflow-y: auto;
+    }
+    
+    #sidebar h2 {
+      margin-bottom: 20px;
+      font-size: 18px;
+    }
+    
+    #sidebar .stat {
+      margin-bottom: 10px;
+      padding: 10px;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border-radius: 5px;
+    }
+    
+    #sidebar .stat label {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 5px;
+    }
+    
+    #sidebar .stat value {
+      font-size: 24px;
+      color: #2196F3;
+    }
+    
+    #legend {
+      margin-top: 20px;
+    }
+    
+    #legend h3 {
+      margin-bottom: 10px;
+    }
+    
+    #legend .item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+    
+    #legend .item .color {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+    
+    #legend .item .label {
+      font-size: 14px;
+    }
+    
+    #controls {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    
+    #controls button {
+      padding: 10px 15px;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      cursor: pointer;
+      color: ${theme === 'dark' ? '#ffffff' : '#333333'};
+    }
+    
+    #controls button:hover {
+      background: ${theme === 'dark' ? '#4d4d4d' : '#f0f0f0'};
+    }
+    
+    #controls button.active {
+      background: #2196F3;
+      color: white;
+      border-color: #2196F3;
+    }
+    
+    #search-container {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    
+    #search-input {
+      padding: 10px 15px;
+      width: 300px;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      color: ${theme === 'dark' ? '#ffffff' : '#333333'};
+      font-size: 14px;
+    }
+    
+    #search-results {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      max-height: 300px;
+      overflow-y: auto;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      display: none;
+      z-index: 1000;
+    }
+    
+    #search-results .result-item {
+      padding: 10px 15px;
+      cursor: pointer;
+      border-bottom: 1px solid ${theme === 'dark' ? '#444' : '#eee'};
+    }
+    
+    #search-results .result-item:hover {
+      background: ${theme === 'dark' ? '#4d4d4d' : '#f0f0f0'};
+    }
+    
+    #search-results .result-item .name {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+    
+    #search-results .result-item .path {
+      font-size: 12px;
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+    }
+    
+    #filter-container {
+      position: absolute;
+      top: 70px;
+      left: 20px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    
+    #filter-container .filter-group {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+    
+    #filter-container .filter-group label {
+      font-size: 12px;
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+    }
+    
+    #filter-container .filter-group select {
+      padding: 5px 10px;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      color: ${theme === 'dark' ? '#ffffff' : '#333333'};
+      font-size: 12px;
+    }
+    
+    #path-highlight {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      padding: 10px 15px;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      display: none;
+      max-width: 400px;
+    }
+    
+    #path-highlight h4 {
+      margin-bottom: 10px;
+      font-size: 14px;
+    }
+    
+    #path-highlight .path-list {
+      font-size: 12px;
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+    }
+    
+    #path-highlight .path-list .path-item {
+      margin-bottom: 5px;
+      padding: 5px;
+      background: ${theme === 'dark' ? '#4d4d4d' : '#f0f0f0'};
+      border-radius: 3px;
+    }
+    
+    #tooltip {
+      position: absolute;
+      display: none;
+      background: ${theme === 'dark' ? '#3d3d3d' : '#ffffff'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 5px;
+      padding: 10px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      max-width: 300px;
+    }
+    
+    #tooltip h4 {
+      margin-bottom: 5px;
+    }
+    
+    #tooltip p {
+      font-size: 14px;
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+    }
+  </style>
+</head>
+<body>
+  <div id="container">
+    <div id="graph"></div>
+    <div id="sidebar">
+      <h2>Graph Statistics</h2>
+      <div class="stat">
+        <label>Nodes</label>
+        <value>${nodes.length}</value>
+      </div>
+      <div class="stat">
+        <label>Edges</label>
+        <value>${edges.length}</value>
+      </div>
+      <div id="legend">
+        <h3>Legend</h3>
+        <div class="item">
+          <div class="color" style="background: #4CAF50;"></div>
+          <div class="label">Module</div>
+        </div>
+        <div class="item">
+          <div class="color" style="background: #2196F3;"></div>
+          <div class="label">File</div>
+        </div>
+        <div class="item">
+          <div class="color" style="background: #FF9800;"></div>
+          <div class="label">Function</div>
+        </div>
+        <div class="item">
+          <div class="color" style="background: #E91E63;"></div>
+          <div class="label">Class</div>
+        </div>
+        <div class="item">
+          <div class="color" style="background: #9C27B0;"></div>
+          <div class="label">Interface</div>
+        </div>
+      </div>
+      <div id="selected-info" style="margin-top: 20px; display: none;">
+        <h3>Selected Node</h3>
+        <div id="selected-details"></div>
+      </div>
+    </div>
+    <div id="controls">
+      <button onclick="zoomIn()">Zoom In</button>
+      <button onclick="zoomOut()">Zoom Out</button>
+      <button onclick="resetView()">Reset</button>
+      <button onclick="togglePhysics()">Physics</button>
+      <button onclick="highlightAll()">Highlight All</button>
+      <button onclick="clearHighlight()">Clear Highlight</button>
+    </div>
+    <div id="search-container">
+      <input type="text" id="search-input" placeholder="Search nodes..." oninput="searchNodes(this.value)">
+      <div id="search-results"></div>
+    </div>
+    <div id="filter-container">
+      <div class="filter-group">
+        <label>Type:</label>
+        <select id="type-filter" onchange="filterByType(this.value)">
+          <option value="all">All</option>
+          <option value="module">Module</option>
+          <option value="file">File</option>
+          <option value="function">Function</option>
+          <option value="class">Class</option>
+          <option value="interface">Interface</option>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label>Group:</label>
+        <select id="group-filter" onchange="filterByGroup(this.value)">
+          <option value="all">All</option>
+          ${Array.from(new Set(nodes.map(n => n.group))).map(g => `<option value="${g}">${g}</option>`).join('\n          ')}
+        </select>
+      </div>
+    </div>
+    <div id="path-highlight">
+      <h4>Highlighted Path</h4>
+      <div id="path-list" class="path-list"></div>
+    </div>
+    <div id="tooltip">
+      <h4 id="tooltip-title"></h4>
+      <p id="tooltip-content"></p>
+    </div>
+  </div>
+  
+  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+  <script>
+    const nodes = ${JSON.stringify(nodes)};
+    const edges = ${JSON.stringify(edges)};
+    
+    const container = document.getElementById('graph');
+    const data = {
+      nodes: new vis.DataSet(nodes.map(n => ({
+        ...n,
+        shape: n.type === 'module' ? 'diamond' : n.type === 'file' ? 'dot' : 'triangle',
+        font: { color: '${theme === 'dark' ? '#fff' : '#333'}' }
+      }))),
+      edges: new vis.DataSet(edges.map(e => ({
+        ...e,
+        arrows: 'to',
+        color: { color: '${theme === 'dark' ? '#666' : '#999'}', highlight: '#2196F3' }
+      })))
+    };
+    
+    const options = {
+      nodes: {
+        borderWidth: 2,
+        shadow: true
+      },
+      edges: {
+        smooth: {
+          type: 'continuous'
+        }
+      },
+      physics: {
+        enabled: true,
+        solver: 'forceAtlas2Based',
+        forceAtlas2Based: {
+          gravitationalConstant: -100,
+          centralGravity: 0.01,
+          springLength: 100,
+          springConstant: 0.08
+        },
+        stabilization: {
+          iterations: 100
+        }
+      },
+      interaction: {
+        hover: true,
+        tooltipDelay: 200
+      }
+    };
+    
+    const network = new vis.Network(container, data, options);
+    
+    // 工具提示
+    const tooltip = document.getElementById('tooltip');
+    const tooltipTitle = document.getElementById('tooltip-title');
+    const tooltipContent = document.getElementById('tooltip-content');
+    
+    network.on('hoverNode', function(params) {
+      const node = nodes.find(n => n.id === params.node);
+      if (node) {
+        tooltipTitle.textContent = node.label;
+        tooltipContent.textContent = node.path ? \`\${node.path}\${node.line ? ':' + node.line : ''}\` : node.type;
+        tooltip.style.display = 'block';
+        tooltip.style.left = params.event.center.x + 10 + 'px';
+        tooltip.style.top = params.event.center.y + 10 + 'px';
+      }
+    });
+    
+    network.on('blurNode', function() {
+      tooltip.style.display = 'none';
+    });
+    
+    // 选择节点
+    network.on('selectNode', function(params) {
+      const nodeId = params.nodes[0];
+      const node = nodes.find(n => n.id === nodeId);
+      
+      if (node) {
+        const selectedInfo = document.getElementById('selected-info');
+        const selectedDetails = document.getElementById('selected-details');
+        
+        selectedDetails.innerHTML = \`
+          <div style="margin-bottom: 5px;"><strong>Name:</strong> \${node.label}</div>
+          <div style="margin-bottom: 5px;"><strong>Type:</strong> \${node.type}</div>
+          \${node.path ? \`<div style="margin-bottom: 5px;"><strong>Path:</strong> \${node.path}</div>\` : ''}
+          \${node.line ? \`<div style="margin-bottom: 5px;"><strong>Line:</strong> \${node.line}</div>\` : ''}
+          <div style="margin-bottom: 5px;"><strong>Group:</strong> \${node.group}</div>
+        \`;
+        
+        selectedInfo.style.display = 'block';
+        
+        // 高亮相关节点
+        highlightRelatedNodes(nodeId);
+      }
+    });
+    
+    // 高亮相关节点
+    function highlightRelatedNodes(nodeId) {
+      const connectedNodes = network.getConnectedNodes(nodeId);
+      const allNodes = data.nodes.get();
+      const allEdges = data.edges.get();
+      
+      // 更新节点样式
+      data.nodes.update(allNodes.map(n => ({
+        ...n,
+        opacity: connectedNodes.includes(n.id) || n.id === nodeId ? 1 : 0.3,
+        borderWidth: n.id === nodeId ? 4 : 2
+      })));
+      
+      // 更新边样式
+      data.edges.update(allEdges.map(e => ({
+        ...e,
+        opacity: e.from === nodeId || e.to === nodeId ? 1 : 0.3,
+        width: e.from === nodeId || e.to === nodeId ? 3 : 1
+      })));
+    }
+    
+    // 搜索功能
+    function searchNodes(query) {
+      const resultsContainer = document.getElementById('search-results');
+      
+      if (!query) {
+        resultsContainer.style.display = 'none';
+        return;
+      }
+      
+      const results = nodes.filter(n => 
+        n.label.toLowerCase().includes(query.toLowerCase()) ||
+        (n.path && n.path.toLowerCase().includes(query.toLowerCase()))
+      ).slice(0, 10);
+      
+      if (results.length === 0) {
+        resultsContainer.style.display = 'none';
+        return;
+      }
+      
+      resultsContainer.innerHTML = results.map(n => \`
+        <div class="result-item" onclick="selectNode('\${n.id}')">
+          <div class="name">\${n.label}</div>
+          <div class="path">\${n.path || n.type}</div>
+        </div>
+      \`).join('');
+      
+      resultsContainer.style.display = 'block';
+    }
+    
+    // 选择节点
+    function selectNode(nodeId) {
+      network.selectNodes([nodeId]);
+      network.focus(nodeId, { scale: 1.5, animation: true });
+      
+      const resultsContainer = document.getElementById('search-results');
+      resultsContainer.style.display = 'none';
+      
+      const searchInput = document.getElementById('search-input');
+      searchInput.value = '';
+      
+      highlightRelatedNodes(nodeId);
+    }
+    
+    // 按类型过滤
+    function filterByType(type) {
+      const allNodes = data.nodes.get();
+      const allEdges = data.edges.get();
+      
+      if (type === 'all') {
+        data.nodes.update(allNodes.map(n => ({ ...n, hidden: false })));
+        data.edges.update(allEdges.map(e => ({ ...e, hidden: false })));
+      } else {
+        const filteredNodes = allNodes.filter(n => n.type === type);
+        const filteredNodeIds = filteredNodes.map(n => n.id);
+        
+        data.nodes.update(allNodes.map(n => ({
+          ...n,
+          hidden: !filteredNodeIds.includes(n.id)
+        })));
+        
+        data.edges.update(allEdges.map(e => ({
+          ...e,
+          hidden: !filteredNodeIds.includes(e.from) || !filteredNodeIds.includes(e.to)
+        })));
+      }
+    }
+    
+    // 按组过滤
+    function filterByGroup(group) {
+      const allNodes = data.nodes.get();
+      const allEdges = data.edges.get();
+      
+      if (group === 'all') {
+        data.nodes.update(allNodes.map(n => ({ ...n, hidden: false })));
+        data.edges.update(allEdges.map(e => ({ ...e, hidden: false })));
+      } else {
+        const filteredNodes = allNodes.filter(n => n.group === group);
+        const filteredNodeIds = filteredNodes.map(n => n.id);
+        
+        data.nodes.update(allNodes.map(n => ({
+          ...n,
+          hidden: !filteredNodeIds.includes(n.id)
+        })));
+        
+        data.edges.update(allEdges.map(e => ({
+          ...e,
+          hidden: !filteredNodeIds.includes(e.from) || !filteredNodeIds.includes(e.to)
+        })));
+      }
+    }
+    
+    // 高亮所有节点
+    function highlightAll() {
+      const allNodes = data.nodes.get();
+      const allEdges = data.edges.get();
+      
+      data.nodes.update(allNodes.map(n => ({
+        ...n,
+        opacity: 1,
+        borderWidth: 2
+      })));
+      
+      data.edges.update(allEdges.map(e => ({
+        ...e,
+        opacity: 1,
+        width: 1
+      })));
+    }
+    
+    // 清除高亮
+    function clearHighlight() {
+      const allNodes = data.nodes.get();
+      const allEdges = data.edges.get();
+      
+      data.nodes.update(allNodes.map(n => ({
+        ...n,
+        opacity: 1,
+        borderWidth: 2
+      })));
+      
+      data.edges.update(allEdges.map(e => ({
+        ...e,
+        opacity: 1,
+        width: 1
+      })));
+      
+      document.getElementById('selected-info').style.display = 'none';
+      document.getElementById('path-highlight').style.display = 'none';
+    }
+    
+    // 控制函数
+    function zoomIn() {
+      network.moveTo({ scale: network.getScale() * 1.2 });
+    }
+    
+    function zoomOut() {
+      network.moveTo({ scale: network.getScale() / 1.2 });
+    }
+    
+    function resetView() {
+      network.fit();
+    }
+    
+    let physicsEnabled = true;
+    function togglePhysics() {
+      physicsEnabled = !physicsEnabled;
+      network.setOptions({ physics: { enabled: physicsEnabled } });
+      
+      const button = document.querySelector('button[onclick="togglePhysics()"]');
+      if (physicsEnabled) {
+        button.classList.add('active');
+      } else {
+        button.classList.remove('active');
+      }
+    }
+    
+    // 初始化物理引擎按钮状态
+    document.querySelector('button[onclick="togglePhysics()"]').classList.add('active');
+  </script>
+</body>
+</html>`;
+    }
+    /**
+     * 生成 SVG
+     */
+    generateSvg(nodes, edges, options) {
+        const width = 1200;
+        const height = 800;
+        const padding = 50;
+        // 简单的圆形布局
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const radius = Math.min(width, height) / 2 - padding;
+        const nodePositions = new Map();
+        nodes.forEach((node, i) => {
+            const angle = (2 * Math.PI * i) / nodes.length;
+            const x = centerX + radius * Math.cos(angle);
+            const y = centerY + radius * Math.sin(angle);
+            nodePositions.set(node.id, { x, y });
+        });
+        let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+  <style>
+    text { font-family: Arial, sans-serif; font-size: 12px; }
+    .node { cursor: pointer; }
+    .edge { stroke-opacity: 0.6; }
+  </style>
+  <rect width="100%" height="100%" fill="${options.theme === 'dark' ? '#1a1a1a' : '#ffffff'}"/>
+`;
+        // 绘制边
+        for (const edge of edges) {
+            const sourcePos = nodePositions.get(edge.source);
+            const targetPos = nodePositions.get(edge.target);
+            if (sourcePos && targetPos) {
+                svg += `  <line class="edge" x1="${sourcePos.x}" y1="${sourcePos.y}" x2="${targetPos.x}" y2="${targetPos.y}" stroke="${options.theme === 'dark' ? '#666' : '#999'}" stroke-width="${edge.weight}"/>
+`;
+            }
+        }
+        // 绘制节点
+        for (const node of nodes) {
+            const pos = nodePositions.get(node.id);
+            if (!pos)
+                continue;
+            const nodeSize = node.size / 2;
+            svg += `  <g class="node" transform="translate(${pos.x}, ${pos.y})">
+    <circle r="${nodeSize}" fill="${node.color}" stroke="${options.theme === 'dark' ? '#fff' : '#333'}" stroke-width="1"/>
+    <text text-anchor="middle" dy="4" fill="${options.theme === 'dark' ? '#fff' : '#333'}">${node.label}</text>
+  </g>
+`;
+        }
+        svg += `</svg>`;
+        return svg;
+    }
+}
+//# sourceMappingURL=visualizer.js.map