完善建模交互与结果曲线功能

支持元件接口接触吸附、旋转后兼容连接及无连线逻辑边。完善 AMESim 图标显示、参数双栏、结果曲线待定窗口及相关端到端测试。
2026-08-02 17:31:28 +08:00
1 parent 410ef535e8
commit 503394f3ed
@@ -0,0 +1,76 @@
+import {
+  BaseEdge,
+  getSmoothStepPath,
+  type EdgeProps,
+  type EdgeTypes,
+} from "@xyflow/react";
+
+export const CONTACT_AWARE_EDGE_TYPE = "contact-aware";
+// React Flow 在 Loose 模式下会把重叠 Handle 的边端点分别放在圆点两侧，
+// 因此两个端口中心完全重合时，edge props 仍会相差约一个 Handle 直径。
+export const CONTACT_EDGE_SCREEN_TOLERANCE = 12;
+
+export function ContactAwareEdge({
+  id,
+  interactionWidth,
+  markerEnd,
+  markerStart,
+  sourcePosition,
+  sourceX,
+  sourceY,
+  style,
+  targetPosition,
+  targetX,
+  targetY,
+}: EdgeProps) {
+  const distance = Math.hypot(targetX - sourceX, targetY - sourceY);
+  if (distance <= CONTACT_EDGE_SCREEN_TOLERANCE) {
+    const centerX = (sourceX + targetX) / 2;
+    const centerY = (sourceY + targetY) / 2;
+    return (
+      <>
+        <circle
+          aria-label="接触连接"
+          className="contact-edge-hit"
+          cx={centerX}
+          cy={centerY}
+          data-contact-edge-id={id}
+          r={12}
+          role="button"
+          tabIndex={0}
+        />
+        <circle
+          aria-hidden="true"
+          className="contact-edge-marker"
+          cx={centerX}
+          cy={centerY}
+          r={3.5}
+        />
+      </>
+    );
+  }
+
+  const [edgePath] = getSmoothStepPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY,
+    borderRadius: 0,
+  });
+  return (
+    <BaseEdge
+      id={id}
+      interactionWidth={interactionWidth}
+      markerEnd={markerEnd}
+      markerStart={markerStart}
+      path={edgePath}
+      style={style}
+    />
+  );
+}
+
+export const contactAwareEdgeTypes: EdgeTypes = {
+  [CONTACT_AWARE_EDGE_TYPE]: ContactAwareEdge,
+};