完善建模交互、组件图标与系统协议

frontend/src/componentSymbols/pneumatic.tsx

@@ -118,6 +118,26 @@ export function AmesimPnvo001SignalSymbol() {
 
 type PipeSection = "C" | "R";
 
+const PIPE_NETWORK_CONTENT_CENTER = { x: 32, y: 24 } as const;
+const PIPE_NETWORK_CONTENT_SCALE = 0.64;
+const PIPE_NETWORK_CONTENT_TRANSFORM = `translate(${PIPE_NETWORK_CONTENT_CENTER.x} ${PIPE_NETWORK_CONTENT_CENTER.y}) scale(${PIPE_NETWORK_CONTENT_SCALE}) translate(${-PIPE_NETWORK_CONTENT_CENTER.x} ${-PIPE_NETWORK_CONTENT_CENTER.y})`;
+
+function scaledPipeNetworkPoint(x: number, y: number) {
+  return {
+    x:
+      PIPE_NETWORK_CONTENT_CENTER.x +
+      (x - PIPE_NETWORK_CONTENT_CENTER.x) * PIPE_NETWORK_CONTENT_SCALE,
+    y:
+      PIPE_NETWORK_CONTENT_CENTER.y +
+      (y - PIPE_NETWORK_CONTENT_CENTER.y) * PIPE_NETWORK_CONTENT_SCALE,
+  };
+}
+
+export const PIPE_NETWORK_PORT_ANCHORS = {
+  left: scaledPipeNetworkPoint(2, 24),
+  right: scaledPipeNetworkPoint(62, 24),
+} as const;
+
 function PipeNetworkBody({ sections }: { sections: readonly PipeSection[] }) {
   const left = 9;
   const right = 55;
@@ -126,7 +146,10 @@ function PipeNetworkBody({ sections }: { sections: readonly PipeSection[] }) {
   const sectionWidth = (right - left) / sections.length;
 
   return (
-    <>
+    <g
+      data-pipe-network-content="true"
+      transform={PIPE_NETWORK_CONTENT_TRANSFORM}
+    >
       <path
         d="M2 24h7M55 24h7"
         stroke={SYMBOL_STROKE}
@@ -169,7 +192,7 @@ function PipeNetworkBody({ sections }: { sections: readonly PipeSection[] }) {
           {section}
         </text>
       ))}
-    </>
+    </g>
   );
 }
 
@@ -209,34 +232,50 @@ export function AmesimPnl0003Symbol() {
   );
 }
 
-function JunctionTerminal({ x, y }: { x: number; y: number }) {
-  return (
-    <circle
-      cx={x}
-      cy={y}
-      fill={SYMBOL_FILL}
-      r="2"
-      stroke={SYMBOL_STROKE}
-      strokeWidth="1.3"
-    />
-  );
-}
+const JUNCTION_STROKE = "#8b134f";
+const JUNCTION_FINE_STROKE_WIDTH = 1.5;
+const JUNCTION_COLLECTOR_STROKE_WIDTH = 4;
+const JUNCTION_CENTER_RADIUS = 2.75;
+
+export const PN3NODE2_PORT_ANCHORS = {
+  port1: { x: 36.6, y: 11.2 },
+  port2: { x: 24.6, y: 24 },
+  port3: { x: 36.6, y: 36.8 },
+} as const;
+
+export const P4NODE2_PORT_ANCHORS = {
+  port1: { x: 32, y: 11.2 },
+  port2: { x: 19.2, y: 24 },
+  port3: { x: 44.8, y: 24 },
+  port4: { x: 32, y: 36.8 },
+} as const;
 
 /** Three-port pneumatic junction with one inlet-side and two outlet-side ports. */
 export function AmesimPn3Node2Symbol() {
   return (
     <SymbolSvg className="component-symbol-amesim-pn3node2-svg" domain="pneumatic">
       <path
-        d="M4 24h25M29 24C41 24 42 12 60 12M29 24c12 0 13 12 31 12"
-        stroke={SYMBOL_STROKE}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={PNEUMATIC_STROKE_WIDTH}
+        d="M36.6 11.2V36.8M24.6 24H27.5"
+        data-junction-part="fine-branches"
+        stroke={JUNCTION_STROKE}
+        strokeLinecap="butt"
+        strokeWidth={JUNCTION_FINE_STROKE_WIDTH}
+      />
+      <path
+        d="M27.5 24H36.6"
+        data-junction-part="collector-branch"
+        data-port-name="port_2"
+        stroke={JUNCTION_STROKE}
+        strokeLinecap="butt"
+        strokeWidth={JUNCTION_COLLECTOR_STROKE_WIDTH}
+      />
+      <circle
+        cx="36.6"
+        cy="24"
+        data-junction-part="center"
+        fill={JUNCTION_STROKE}
+        r={JUNCTION_CENTER_RADIUS}
       />
-      <circle cx="29" cy="24" fill={SYMBOL_ACCENT} r="3" />
-      <JunctionTerminal x={3} y={24} />
-      <JunctionTerminal x={61} y={12} />
-      <JunctionTerminal x={61} y={36} />
     </SymbolSvg>
   );
 }
@@ -246,17 +285,27 @@ export function AmesimP4Node2Symbol() {
   return (
     <SymbolSvg className="component-symbol-amesim-p4node2-svg" domain="pneumatic">
       <path
-        d="M4 24h24M28 24C40 24 42 8 60 8M28 24h32M28 24c12 0 14 16 32 16"
-        stroke={SYMBOL_STROKE}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={PNEUMATIC_STROKE_WIDTH}
+        d="M32 11.2V36.8M32 24H44.8M19.2 24H22.1"
+        data-junction-part="fine-branches"
+        stroke={JUNCTION_STROKE}
+        strokeLinecap="butt"
+        strokeWidth={JUNCTION_FINE_STROKE_WIDTH}
+      />
+      <path
+        d="M22.1 24H32"
+        data-junction-part="collector-branch"
+        data-port-name="port_2"
+        stroke={JUNCTION_STROKE}
+        strokeLinecap="butt"
+        strokeWidth={JUNCTION_COLLECTOR_STROKE_WIDTH}
+      />
+      <circle
+        cx="32"
+        cy="24"
+        data-junction-part="center"
+        fill={JUNCTION_STROKE}
+        r={JUNCTION_CENTER_RADIUS}
       />
-      <circle cx="28" cy="24" fill={SYMBOL_ACCENT} r="3" />
-      <JunctionTerminal x={3} y={24} />
-      <JunctionTerminal x={61} y={8} />
-      <JunctionTerminal x={61} y={24} />
-      <JunctionTerminal x={61} y={40} />
     </SymbolSvg>
   );
 }