统一组件图标布局并完善选择吸附交互

frontend/src/componentSymbols/signals.tsx

@@ -6,6 +6,31 @@ import {
 } from "./primitives";
 
 const SIGNAL_LINE_WIDTH = 1.8;
+const SIGNAL_CANVAS_SIZE = 64;
+const SIGNAL_WORKSPACE_OCCUPANCY = 0.6;
+const SIGNAL_SOURCE_BOUNDS = {
+  left: 9,
+  right: 60,
+  top: 6,
+  bottom: 42,
+} as const;
+const SIGNAL_SOURCE_CENTER = {
+  x: (SIGNAL_SOURCE_BOUNDS.left + SIGNAL_SOURCE_BOUNDS.right) / 2,
+  y: (SIGNAL_SOURCE_BOUNDS.top + SIGNAL_SOURCE_BOUNDS.bottom) / 2,
+} as const;
+const SIGNAL_CANVAS_CENTER = { x: 32, y: 24 } as const;
+const SIGNAL_CONTENT_SCALE =
+  (SIGNAL_CANVAS_SIZE * SIGNAL_WORKSPACE_OCCUPANCY) /
+  (SIGNAL_SOURCE_BOUNDS.right - SIGNAL_SOURCE_BOUNDS.left);
+const SIGNAL_CONTENT_TRANSFORM = `translate(${SIGNAL_CANVAS_CENTER.x} ${SIGNAL_CANVAS_CENTER.y}) scale(${SIGNAL_CONTENT_SCALE}) translate(${-SIGNAL_SOURCE_CENTER.x} ${-SIGNAL_SOURCE_CENTER.y})`;
+
+export const SIGNAL_OUTPUT_PORT_ANCHOR = {
+  x:
+    SIGNAL_CANVAS_CENTER.x +
+    (SIGNAL_SOURCE_BOUNDS.right - SIGNAL_SOURCE_CENTER.x) *
+      SIGNAL_CONTENT_SCALE,
+  y: SIGNAL_CANVAS_CENTER.y,
+} as const;
 
 function SignalOutput() {
   return (
@@ -25,23 +50,25 @@ function SignalOutput() {
 export function AmesimStep0Symbol() {
   return (
     <SymbolSvg className="component-symbol-amesim-step0" domain="signal">
-      <circle
-        cx="27"
-        cy="24"
-        fill={SYMBOL_FILL}
-        r="18"
-        stroke={SYMBOL_STROKE}
-        strokeWidth={SIGNAL_LINE_WIDTH}
-      />
-      <path
-        d="M14 30h8V17h18"
-        fill="none"
-        stroke={SYMBOL_ACCENT}
-        strokeLinecap="square"
-        strokeLinejoin="miter"
-        strokeWidth="2.2"
-      />
-      <SignalOutput />
+      <g data-signal-source="step0" transform={SIGNAL_CONTENT_TRANSFORM}>
+        <circle
+          cx="27"
+          cy="24"
+          fill={SYMBOL_FILL}
+          r="18"
+          stroke={SYMBOL_STROKE}
+          strokeWidth={SIGNAL_LINE_WIDTH}
+        />
+        <path
+          d="M14 30h8V17h18"
+          fill="none"
+          stroke={SYMBOL_ACCENT}
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          strokeWidth="2.2"
+        />
+        <SignalOutput />
+      </g>
     </SymbolSvg>
   );
 }
@@ -49,23 +76,25 @@ export function AmesimStep0Symbol() {
 export function AmesimUd00Symbol() {
   return (
     <SymbolSvg className="component-symbol-amesim-ud00" domain="signal">
-      <circle
-        cx="27"
-        cy="24"
-        fill={SYMBOL_FILL}
-        r="18"
-        stroke={SYMBOL_STROKE}
-        strokeWidth={SIGNAL_LINE_WIDTH}
-      />
-      <path
-        d="M13 30h5l5-10h5l5-9 5 19h3"
-        fill="none"
-        stroke={SYMBOL_ACCENT}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2.2"
-      />
-      <SignalOutput />
+      <g data-signal-source="ud00" transform={SIGNAL_CONTENT_TRANSFORM}>
+        <circle
+          cx="27"
+          cy="24"
+          fill={SYMBOL_FILL}
+          r="18"
+          stroke={SYMBOL_STROKE}
+          strokeWidth={SIGNAL_LINE_WIDTH}
+        />
+        <path
+          d="M13 30h5l5-10h5l5-9 5 19h3"
+          fill="none"
+          stroke={SYMBOL_ACCENT}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.2"
+        />
+        <SignalOutput />
+      </g>
     </SymbolSvg>
   );
 }