From 54438960b5c3e151e8ce139fd85dce53b9efebcc Mon Sep 17 00:00:00 2001
From: yitacls <75364857+yitacls@users.noreply.github.com>
Date: Tue, 10 Jun 2025 23:32:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=BC=A9?=
 =?UTF-8?q?=E7=95=A5=E5=9B=BE=E8=A7=86=E5=8F=A3=E6=8C=87=E7=A4=BA=E5=99=A8?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=EF=BC=8C=E6=9B=B4=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=E8=BD=BB=E5=BE=AE=E7=9A=84=E5=8D=8A=E9=80=8F=E6=98=8E?=
 =?UTF-8?q?=E7=99=BD=E8=89=B2=E5=8C=BA=E5=9F=9F=EF=BC=8C=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E7=89=B9=E5=AE=9A=E6=83=85=E5=86=B5=E4=B8=8B=E7=9A=84=E8=BF=87?=
 =?UTF-8?q?=E9=95=BF=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/public/script.js | 26 ++++++++++++++------------
 src/public/style.css |  8 ++++++++
 2 files changed, 22 insertions(+), 12 deletions(-)

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;
+}