feat: Refactor code structure for improved readability and maintainability

2025-05-09 19:28:43 +08:00
parent d4b34bd6d4
commit 6a786c1519
17 changed files with 2913 additions and 583 deletions
--- a/src/components/equipments/Wire.vue
+++ b/src/components/equipments/Wire.vue
@@ -109,11 +109,11 @@ function calculatePathFromCommands(
  if (splitterIndex === -1) {
    // 如果没有分隔符，回退到正交路径
    return calculateOrthogonalPath(startX, startY, endX, endY);
-  }
-
+  }  
+  
  // 分割命令为起点和终点两部分
  const startCommands = commands.slice(0, splitterIndex);
-  const endCommands = commands.slice(splitterIndex + 1).reverse();
+  const endCommands = commands.slice(splitterIndex + 1);

  // 从起点开始生成路径
  let currentX = startX;
@@ -129,50 +129,62 @@ function calculatePathFromCommands(
    currentY = newY;
    pathPoints.push([currentX, currentY]);
  }
-  
-  // 从终点开始反向处理
+    // 从终点开始反向处理
  let endCurrentX = endX;
  let endCurrentY = endY;
  
  // 保存终点路径点，最后会反转
  const endPathPoints: [number, number][] = [[endCurrentX, endCurrentY]];
  
-  // 解析并执行终点命令（反向）
-  for (const cmd of endCommands) {
+  // 解析并执行终点命令（需要从后向前执行反向命令）
+  for (let i = endCommands.length - 1; i >= 0; i--) {
+    const cmd = reversePathCommand(endCommands[i]);
    const { newX, newY } = executePathCommand(endCurrentX, endCurrentY, cmd);
    endCurrentX = newX;
    endCurrentY = newY;
    endPathPoints.push([endCurrentX, endCurrentY]);
-  }
-  
-  // 反转终点路径点并去掉第一个（终点）
-  const reversedEndPoints = endPathPoints.slice(1).reverse();
+  }  // 反转终点路径点，保留所有点
+  const reversedEndPoints = [...endPathPoints].reverse();
  
  // 将两部分路径连接起来
-  const allPoints = [...pathPoints, ...reversedEndPoints];
-  
-  // 如果起点和终点路径没有连接上，添加连接线段
-  if (allPoints.length >= 2) {
-    const startFinalPoint = allPoints[pathPoints.length - 1];
-    const endFirstPoint = allPoints[pathPoints.length];
-    if (startFinalPoint && endFirstPoint && 
-        (startFinalPoint[0] !== endFirstPoint[0] || startFinalPoint[1] !== endFirstPoint[1])) {
-      // 添加连接点 - 这里使用正交连接
-      const middlePoints = generateOrthogonalConnection(
-        startFinalPoint[0], startFinalPoint[1], 
-        endFirstPoint[0], endFirstPoint[1]
-      );
-      
-      // 将起点路径、连接路径和终点路径拼接起来
-      allPoints.splice(pathPoints.length, 0, ...middlePoints);
-    }
+  // 如果终点路径的第一个点与起点路径的最后一个点相同，则去掉重复点
+  let combinedPoints;
+  if (pathPoints.length > 0 && reversedEndPoints.length > 0 &&
+      pathPoints[pathPoints.length - 1][0] === reversedEndPoints[0][0] &&
+      pathPoints[pathPoints.length - 1][1] === reversedEndPoints[0][1]) {
+    combinedPoints = [...pathPoints, ...reversedEndPoints.slice(1)];
+  } else {
+    combinedPoints = [...pathPoints, ...reversedEndPoints];
  }
  
-  // 生成SVG路径
+  const allPoints = combinedPoints;
+  // 检查是否需要添加中间连接点
+  if (allPoints.length >= 2) {
+    const startPathEndPoint = pathPoints.length > 0 ? pathPoints[pathPoints.length - 1] : null;
+    const endPathStartPoint = reversedEndPoints.length > 0 ? reversedEndPoints[0] : null;
+    
+    // 只有当起点路径和终点路径不相连时才添加连接线
+    if (startPathEndPoint && endPathStartPoint && 
+        (startPathEndPoint[0] !== endPathStartPoint[0] || startPathEndPoint[1] !== endPathStartPoint[1])) {
+      // 使用正交连接或直接连接
+      let middlePoints: [number, number][] = [];
+      
+      // 正交连接，添加额外点以确保路径是正交的
+      middlePoints = generateOrthogonalConnection(
+        startPathEndPoint[0], startPathEndPoint[1], 
+        endPathStartPoint[0], endPathStartPoint[1]
+      );
+      
+      // 在起点路径和终点路径之间插入中间点
+      allPoints.splice(pathPoints.length, 0, ...middlePoints);
+    }
+  }  // 生成SVG路径
  if (allPoints.length < 2) {
+    // 如果没有足够的点，直接从起点到终点画一条线
    return `M ${startX} ${startY} L ${endX} ${endY}`;
  }
  
+  // 使用所有点生成路径字符串
  let pathStr = `M ${allPoints[0][0]} ${allPoints[0][1]}`;
  for (let i = 1; i < allPoints.length; i++) {
    pathStr += ` L ${allPoints[i][0]} ${allPoints[i][1]}`;
@@ -184,38 +196,48 @@ function calculatePathFromCommands(
 // 执行单个路径命令
 function executePathCommand(x: number, y: number, command: string): { newX: number; newY: number } {
  // 解析命令，例如 "down10", "right20", "downright5" 等
+  let newX = x;
+  let newY = y;
+  
  if (command.startsWith('right')) {
    const distance = parseInt(command.substring(5), 10) || 10;
-    return { newX: x + distance, newY: y };
+    newX = x + distance;
+    newY = y;
  } else if (command.startsWith('left')) {
    const distance = parseInt(command.substring(4), 10) || 10;
-    return { newX: x - distance, newY: y };
+    newX = x - distance;
+    newY = y;
  } else if (command.startsWith('down')) {
    if (command.startsWith('downright')) {
      const distance = parseInt(command.substring(9), 10) || 10;
-      return { newX: x + distance, newY: y + distance };
+      newX = x + distance;
+      newY = y + distance;
    } else if (command.startsWith('downleft')) {
      const distance = parseInt(command.substring(8), 10) || 10;
-      return { newX: x - distance, newY: y + distance };
+      newX = x - distance;
+      newY = y + distance;
    } else {
      const distance = parseInt(command.substring(4), 10) || 10;
-      return { newX: x, newY: y + distance };
+      newX = x;
+      newY = y + distance;
    }
  } else if (command.startsWith('up')) {
    if (command.startsWith('upright')) {
      const distance = parseInt(command.substring(7), 10) || 10;
-      return { newX: x + distance, newY: y - distance };
+      newX = x + distance;
+      newY = y - distance;
    } else if (command.startsWith('upleft')) {
      const distance = parseInt(command.substring(6), 10) || 10;
-      return { newX: x - distance, newY: y - distance };
+      newX = x - distance;
+      newY = y - distance;
    } else {
      const distance = parseInt(command.substring(2), 10) || 10;
-      return { newX: x, newY: y - distance };
+      newX = x;
+      newY = y - distance;
    }
  }
  
-  // 默认情况下不移动
-  return { newX: x, newY: y };
+  return { newX, newY };
 }

 // 生成两点之间的正交连接点
@@ -268,6 +290,48 @@ function calculateOrthogonalPath(startX: number, startY: number, endX: number, e
  }
 }

+// 添加反转命令函数 - 将方向命令反转
+function reversePathCommand(command: string): string {
+  // 提取距离部分
+  const distanceMatch = command.match(/\d+$/);
+  const distance = distanceMatch ? distanceMatch[0] : "10"; // 默认距离是10
+  
+  // 根据命令类型返回反向命令
+  // 水平方向反转
+  if (command.startsWith('right')) {
+    return `left${distance}`;
+  } 
+  else if (command.startsWith('left')) {
+    return `right${distance}`;
+  } 
+  // 垂直和斜向反转
+  else if (command.startsWith('down')) {
+    if (command.startsWith('downright')) {
+      return `upleft${distance}`;
+    } 
+    else if (command.startsWith('downleft')) {
+      return `upright${distance}`;
+    } 
+    else {
+      return `up${distance}`;
+    }
+  } 
+  else if (command.startsWith('up')) {
+    if (command.startsWith('upright')) {
+      return `downleft${distance}`;
+    } 
+    else if (command.startsWith('upleft')) {
+      return `downright${distance}`;
+    } 
+    else {
+      return `down${distance}`;
+    }
+  }
+  
+  // 默认情况下，无法反转就返回原命令
+  return command;
+}
+
 // 监听约束状态变化
 let unsubscribe: (() => void) | null = null;