完善端口标号与MECMAS21动态图标

frontend/src/componentSymbols/mechanical.tsx

@@ -1,12 +1,17 @@
+import { useId } from "react";
+
 import {
   SYMBOL_ACCENT,
   SYMBOL_FILL,
-  SYMBOL_MUTED,
   SYMBOL_STROKE,
   SymbolSvg,
 } from "./primitives";
+import type { ComponentSymbolRendererProps } from "./types";
 
 const MECHANICAL_LINE_WIDTH = 1.8;
+const MECMAS21_STROKE = "#00af00";
+const MECMAS21_HATCH = "#66cf66";
+const MECMAS21_FILL = "#ffffff";
 const PNRP17_STROKE = "#8b134f";
 const PNRP17_FILL = "#cf9db6";
 const PNRP17_LIGHT_FILL = "#f5ebf0";
@@ -22,23 +27,24 @@ const mechanicalStroke = {
 function MechanicalSocket({ side }: { side: "left" | "right" }) {
   const facingLeft = side === "left";
   return (
-    <g {...mechanicalStroke}>
-      <path d={facingLeft ? "M2 24h7" : "M55 24h7"} />
-      <path d={facingLeft ? "M15 19H9v10h6" : "M49 19h6v10h-6"} />
-    </g>
-  );
-}
-
-function GuideHatching({ y, upward }: { y: number; upward: boolean }) {
-  const direction = upward ? -1 : 1;
-  return (
-    <g stroke={SYMBOL_MUTED} strokeWidth="1">
-      {[14, 22, 30, 38, 46].map((x) => (
-        <path
-          d={`M${x - 3} ${y + direction * 3}L${x + 3} ${y - direction * 3}`}
-          key={x}
-        />
-      ))}
+    <g
+      fill="none"
+      stroke={MECMAS21_STROKE}
+      strokeLinecap="butt"
+      strokeLinejoin="miter"
+    >
+      <path
+        d={facingLeft ? "M2 24h3.2" : "M58.8 24H62"}
+        strokeWidth="0.9"
+      />
+      <path
+        d={
+          facingLeft
+            ? "M15.1 20.9H6.2v6.2h8.9"
+            : "M48.9 20.9h8.9v6.2h-8.9"
+        }
+        strokeWidth="2"
+      />
     </g>
   );
 }
@@ -100,44 +106,133 @@ export function AmesimForcSymbol() {
   );
 }
 
-export function AmesimMecmas21Symbol() {
+export function AmesimMecmas21Symbol({
+  parameters,
+}: ComponentSymbolRendererProps) {
+  const frictionEnabled = Number(parameters?.useFriction) === 2;
+  const stopType = Number(parameters?.stoptype);
+  const limitsEnabled = stopType === 1 || stopType === 2 || stopType === 3;
+  const showGuides = frictionEnabled || limitsEnabled;
+  const variant = frictionEnabled
+    ? limitsEnabled
+      ? "friction-limited"
+      : "friction-unlimited"
+    : limitsEnabled
+      ? "plain-limited"
+      : "plain-unlimited";
+  const hatchingId = `mecmas21-hatching-${useId().replace(
+    /[^a-zA-Z0-9_-]/g,
+    "",
+  )}`;
+
   return (
-    <SymbolSvg className="component-symbol-amesim-mecmas21" domain="mechanical">
-      <GuideHatching upward y={5} />
-      <GuideHatching upward={false} y={43} />
-      <path d="M10 8h44M10 40h44" stroke={SYMBOL_MUTED} strokeWidth="1.3" />
-      <MechanicalSocket side="left" />
-      <MechanicalSocket side="right" />
-      <rect
-        fill={SYMBOL_FILL}
-        height="26"
-        rx="1"
-        stroke={SYMBOL_STROKE}
-        strokeWidth="2"
-        width="34"
-        x="15"
-        y="11"
-      />
-      <text
-        dominantBaseline="central"
-        fill={SYMBOL_STROKE}
-        fontFamily="Arial, sans-serif"
-        fontSize="12"
-        fontWeight="600"
-        textAnchor="middle"
-        x="31"
-        y="28"
+    <SymbolSvg
+      className="component-symbol-amesim-mecmas21"
+      domain="mechanical"
+    >
+      <defs>
+        <pattern
+          height="5.05"
+          id={hatchingId}
+          patternUnits="userSpaceOnUse"
+          width="5.05"
+        >
+          <rect fill={MECMAS21_FILL} height="5.05" width="5.05" />
+          <path
+            d="M-1 1 1-1M0 5.05 5.05 0M4.05 6.05 6.05 4.05"
+            stroke={MECMAS21_HATCH}
+            strokeWidth="1.55"
+          />
+        </pattern>
+      </defs>
+      <g
+        data-mecmas-friction={frictionEnabled ? "enabled" : "disabled"}
+        data-mecmas-limits={limitsEnabled ? "finite" : "unlimited"}
+        data-mecmas-variant={variant}
       >
-        M
-      </text>
-      <path
-        d="M22 18h15m-5-4 5 4-5 4"
-        fill="none"
-        stroke={SYMBOL_ACCENT}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
+        {showGuides ? (
+          <g data-mecmas-part="guides">
+            <rect
+              data-mecmas-part="upper-guide"
+              fill={`url(#${hatchingId})`}
+              height="5.25"
+              stroke={MECMAS21_STROKE}
+              strokeWidth="1.2"
+              width="60"
+              x="2"
+              y="2.6"
+            />
+            {limitsEnabled ? (
+              <g data-mecmas-part="finite-lower-guide">
+                <path
+                  d="M2 32.6H10V39.6H54V32.6H62V45.4H2Z"
+                  fill={`url(#${hatchingId})`}
+                  stroke={MECMAS21_STROKE}
+                  strokeLinejoin="miter"
+                  strokeWidth="1.2"
+                />
+              </g>
+            ) : (
+              <rect
+                data-mecmas-part="unlimited-lower-guide"
+                fill={`url(#${hatchingId})`}
+                height="5.25"
+                stroke={MECMAS21_STROKE}
+                strokeWidth="1.2"
+                width="60"
+                x="2"
+                y="40.23"
+              />
+            )}
+          </g>
+        ) : null}
+        {frictionEnabled ? (
+          <path
+            d="M16.49 9.93h4.9m3.81 0h4.9m3.93 0h4.9m3.79 0h4.9M16.49 38.07h4.9m3.81 0h4.9m3.93 0h4.9m3.79 0h4.9"
+            data-mecmas-part="friction-markers"
+            stroke={MECMAS21_STROKE}
+            strokeLinecap="butt"
+            strokeWidth="0.92"
+          />
+        ) : null}
+        <g data-mecmas-part="core">
+          <MechanicalSocket side="left" />
+          <MechanicalSocket side="right" />
+          <rect
+            data-mecmas-part="mass"
+            fill={MECMAS21_FILL}
+            height="23.1"
+            stroke={MECMAS21_STROKE}
+            strokeWidth="2"
+            width="34"
+            x="15"
+            y="12.45"
+          />
+          <text
+            dominantBaseline="central"
+            fill={MECMAS21_STROKE}
+            fontFamily="Arial, sans-serif"
+            fontSize="10"
+            fontWeight="500"
+            textAnchor="middle"
+            x="32"
+            y="29.2"
+          >
+            M
+          </text>
+          <path
+            d="M18.94 18.8h5.88M21.9 16.6V21"
+            fill="none"
+            stroke={MECMAS21_STROKE}
+            strokeLinecap="square"
+            strokeWidth="1.05"
+          />
+          <path
+            d="M45.92 18.81 39.66 15.31 39.54 17.98H26.55v1.74h12.99l.12 2.93Z"
+            fill={MECMAS21_STROKE}
+          />
+        </g>
+      </g>
     </SymbolSvg>
   );
 }

frontend/src/componentSymbols/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ComponentType } from "react";
 
 export type ComponentSymbolPresentation = "framed" | "bare";
 
@@ -11,7 +11,15 @@ export type ComponentSymbolPortAnchors = Partial<
   Record<"left" | "right", readonly ComponentSymbolPortAnchor[]>
 >;
 
+export type ComponentSymbolParameters = Readonly<
+  Record<string, number | string>
+>;
+
+export type ComponentSymbolRendererProps = {
+  parameters?: ComponentSymbolParameters;
+};
+
 export type SymbolDefinition = {
   presentation: ComponentSymbolPresentation;
-  render: () => ReactNode;
+  render: ComponentType<ComponentSymbolRendererProps>;
 };