diff --git a/src/public/script.js b/src/public/script.js index cee20ce..259c932 100644 --- a/src/public/script.js +++ b/src/public/script.js @@ -970,11 +970,7 @@ function renderDependencyGraph() { // 添加視口指示器 minimap.append("rect") - .attr("class", "minimap-viewport") - .attr("fill", "none") - .attr("stroke", "var(--accent-color)") - .attr("stroke-width", 1.5) - .attr("pointer-events", "none"); + .attr("class", "minimap-viewport"); g = svg.append("g"); @@ -1397,19 +1393,25 @@ function updateMinimap() { const nodes = simulation.nodes(); const links = simulation.force("link").links(); - // 計算當前圖的邊界 + // 計算當前圖的邊界(添加padding) + const padding = 20; // 添加內邊距 const xExtent = d3.extent(nodes, d => d.x); const yExtent = d3.extent(nodes, d => d.y); - const graphWidth = xExtent[1] - xExtent[0] || width; - const graphHeight = yExtent[1] - yExtent[0] || height; - const scale = Math.min(minimapSize / graphWidth, minimapSize / graphHeight) * 0.9; + const graphWidth = (xExtent[1] - xExtent[0]) || width; + const graphHeight = (yExtent[1] - yExtent[0]) || height; - // 創建縮放函數 + // 計算縮放比例,確保考慮padding + const scale = Math.min( + minimapSize / (graphWidth + padding * 2), + minimapSize / (graphHeight + padding * 2) + ) * 0.9; // 0.9作為安全係數 + + // 創建縮放函數,加入padding const minimapX = d3.scaleLinear() - .domain([xExtent[0] - graphWidth * 0.05, xExtent[1] + graphWidth * 0.05]) + .domain([xExtent[0] - padding, xExtent[1] + padding]) .range([0, minimapSize]); const minimapY = d3.scaleLinear() - .domain([yExtent[0] - graphHeight * 0.05, yExtent[1] + graphHeight * 0.05]) + .domain([yExtent[0] - padding, yExtent[1] + padding]) .range([0, minimapSize]); // 更新縮略圖中的連接 diff --git a/src/public/style.css b/src/public/style.css index a7681e1..6383001 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -485,3 +485,11 @@ g.node-item.highlighted circle { flex-grow: 1; /* 讓搜索框佔據更多空間 */ min-width: 150px; } + +/* 新增:缩略图视口指示器样式 */ +.minimap-viewport { + fill: rgba(255, 255, 255, 0.025); + stroke: rgba(255, 255, 255, 0.1); + stroke-width: 1; + pointer-events: none; +}