优化组件选择交互与视图适配时机

frontend/tests/e2e/component-symbols.spec.ts

@@ -428,6 +428,8 @@ test("AMESim canvas nodes use icon anchors and highlight only compatible free po
     "data-connection-state",
     "incompatible",
   );
+  await expect(sameNodePort).toHaveCSS("pointer-events", "none");
+  await expect(signalInput).toHaveCSS("pointer-events", "none");
 
   await page.locator(".flow-canvas .react-flow__pane").click({
     position: { x: 20, y: 20 },
@@ -455,9 +457,23 @@ test("AMESim canvas nodes use icon anchors and highlight only compatible free po
   await expect(compatiblePhysicalPort).toHaveAttribute("data-connected", "true");
   await expect(firstPhysicalOutput).toHaveCSS("opacity", "0");
   await expect(compatiblePhysicalPort).toHaveCSS("opacity", "0");
+  await expect(firstPhysicalOutput).toHaveCSS("pointer-events", "none");
+  await expect(compatiblePhysicalPort).toHaveCSS("pointer-events", "none");
 
   const physicalEdge = page.locator(".flow-canvas .react-flow__edge").first();
-  await physicalEdge.locator(".react-flow__edge-interaction").click({ force: true });
+  const edgeClickPoint = await physicalEdge
+    .locator(".react-flow__edge-interaction")
+    .evaluate((path: SVGPathElement) => {
+      const point = path.getPointAtLength(path.getTotalLength() / 2);
+      const matrix = path.getScreenCTM();
+      if (!matrix) {
+        throw new Error("Unable to resolve the edge screen position");
+      }
+      const screenPoint = new DOMPoint(point.x, point.y).matrixTransform(matrix);
+      return { x: screenPoint.x, y: screenPoint.y };
+    });
+  await page.mouse.click(edgeClickPoint.x, edgeClickPoint.y);
+  await expect(physicalEdge).toHaveClass(/selected|editor-edge-selected/);
   await page.getByRole("button", { name: "删除 (Delete)", exact: true }).click();
   await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
   await expect(firstPhysicalOutput).toHaveAttribute("data-connected", "false");
@@ -567,6 +583,19 @@ test("兼容接口接近时吸附为无连线接触连接，拖开后自动断
     '.port-handle[data-port-name="port_1"]',
   );
 
+  await dragNodePortNearTarget(
+    page,
+    secondOrifice,
+    secondPort,
+    firstPort,
+    16,
+  );
+  await expect(firstPort).toHaveAttribute("data-connection-state", "idle");
+  await expect(secondPort).toHaveAttribute("data-connection-state", "idle");
+  expect(await distanceBetween(firstPort, secondPort)).toBeGreaterThan(14);
+  await page.mouse.up();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+
   await dragNodePortNearTarget(
     page,
     secondOrifice,
@@ -801,3 +830,58 @@ test("旧工程保存的通用图标会按当前目录定义升级", async ({ pa
   ).toBeVisible();
   await expect(restoredNode.locator('[data-component-symbol="pipe"]')).toHaveCount(0);
 });
+
+test("专用图标的选择框和鼠标命中范围贴合实际图形包络", async ({ page }) => {
+  await page.goto("/");
+
+  const helium = await dragSymbolToCanvas(page, "amesim_helium_medium", {
+    x: 430,
+    y: 280,
+  });
+  const simNode = helium.locator(".sim-node");
+  const envelope = helium.locator('[data-symbol-envelope="true"]');
+  const circle = helium.locator(".component-symbol-svg circle");
+
+  await expect(helium).toHaveClass(/component-icon-node/);
+  await expect(helium).toHaveCSS("pointer-events", "none");
+  await expect(simNode).toHaveCSS("pointer-events", "none");
+  await expect(envelope).toHaveCSS("outline-style", "dashed");
+  await expect(envelope).toHaveCSS("pointer-events", "auto");
+  await expect(simNode).toHaveCSS("outline-style", "none");
+
+  const [nodeBounds, envelopeBounds, circleBounds, paneBounds] =
+    await Promise.all([
+      helium.boundingBox(),
+      envelope.boundingBox(),
+      circle.boundingBox(),
+      page.locator(".flow-canvas .react-flow__pane").boundingBox(),
+    ]);
+  expect(nodeBounds).not.toBeNull();
+  expect(envelopeBounds).not.toBeNull();
+  expect(circleBounds).not.toBeNull();
+  expect(paneBounds).not.toBeNull();
+  expect(envelopeBounds!.width).toBeLessThan(nodeBounds!.width * 0.7);
+  expect(
+    Math.abs(envelopeBounds!.width - envelopeBounds!.height),
+  ).toBeLessThan(3);
+  expect(envelopeBounds!.width - circleBounds!.width).toBeGreaterThanOrEqual(0);
+  expect(envelopeBounds!.width - circleBounds!.width).toBeLessThanOrEqual(4);
+
+  await page.mouse.click(paneBounds!.x + 8, paneBounds!.y + 8);
+  await expect(helium).not.toHaveClass(/selected/);
+
+  const oldTransparentMargin = {
+    x: nodeBounds!.x + 5,
+    y: envelopeBounds!.y + envelopeBounds!.height / 2,
+  };
+  expect(oldTransparentMargin.x).toBeLessThan(envelopeBounds!.x - 8);
+  await page.mouse.click(oldTransparentMargin.x, oldTransparentMargin.y);
+  await expect(helium).not.toHaveClass(/selected/);
+
+  await page.mouse.click(
+    envelopeBounds!.x + envelopeBounds!.width / 2,
+    envelopeBounds!.y + envelopeBounds!.height / 2,
+  );
+  await expect(helium).toHaveClass(/selected/);
+  await expect(envelope).toHaveCSS("outline-style", "dashed");
+});