Files
SystemSimulationApp/frontend/src/componentSymbols/mechanical.tsx
T

710 lines
21 KiB
TypeScript

import { useId } from "react";
import {
SYMBOL_ACCENT,
SYMBOL_FILL,
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 MECMAS21_CONTENT_SCALE = 0.72;
const MECMAS21_CONTENT_CENTER = { x: 32, y: 24 } as const;
const MECMAS21_CONTENT_TRANSFORM = `translate(${MECMAS21_CONTENT_CENTER.x} ${MECMAS21_CONTENT_CENTER.y}) scale(${MECMAS21_CONTENT_SCALE}) translate(${-MECMAS21_CONTENT_CENTER.x} ${-MECMAS21_CONTENT_CENTER.y})`;
const MECMAS21_SELECTION_ENVELOPE = {
x: 9.608,
y: 2.328,
width: 44.784,
height: 43.344,
} as const;
const F000_CONTENT_SCALE = 0.25;
const F000_CONTENT_CENTER = { x: 32, y: 24 } as const;
const F000_CONTENT_TRANSFORM = `translate(${F000_CONTENT_CENTER.x} ${F000_CONTENT_CENTER.y}) scale(${F000_CONTENT_SCALE}) translate(${-F000_CONTENT_CENTER.x} ${-F000_CONTENT_CENTER.y})`;
const F000_FRAME_RIGHT_X =
F000_CONTENT_CENTER.x +
(52 - F000_CONTENT_CENTER.x) * F000_CONTENT_SCALE;
export const F000_PORT_ANCHOR = {
x: 48,
y: 24,
} as const;
const FORC_STROKE = "#00af00";
const FORC_CONTENT_SCALE = 0.64;
const FORC_CONTENT_CENTER = { x: 32, y: 24 } as const;
const FORC_CONTENT_TRANSFORM = `translate(${FORC_CONTENT_CENTER.x} ${FORC_CONTENT_CENTER.y}) scale(${FORC_CONTENT_SCALE}) translate(${-FORC_CONTENT_CENTER.x} ${-FORC_CONTENT_CENTER.y})`;
export const FORC_PORT_ANCHORS = {
left: {
x:
FORC_CONTENT_CENTER.x +
(2 - FORC_CONTENT_CENTER.x) * FORC_CONTENT_SCALE,
y: FORC_CONTENT_CENTER.y,
},
right: {
x:
FORC_CONTENT_CENTER.x +
(62 - FORC_CONTENT_CENTER.x) * FORC_CONTENT_SCALE,
y: FORC_CONTENT_CENTER.y,
},
} as const;
export const MECMAS21_PORT_ANCHORS = {
left: {
x:
MECMAS21_CONTENT_CENTER.x +
(2 - MECMAS21_CONTENT_CENTER.x) * MECMAS21_CONTENT_SCALE,
y: 24,
},
right: {
x:
MECMAS21_CONTENT_CENTER.x +
(62 - MECMAS21_CONTENT_CENTER.x) * MECMAS21_CONTENT_SCALE,
y: 24,
},
} as const;
const LSTP00A_STROKE = "#00af00";
const LSTP00A_STROKE_WIDTH = 3;
const LSTP00A_CONTENT_SCALE = (64 * 0.65) / 60;
const LSTP00A_CONTENT_CENTER = { x: 32, y: 24 } as const;
const LSTP00A_CONTENT_TRANSFORM = `translate(${LSTP00A_CONTENT_CENTER.x} ${LSTP00A_CONTENT_CENTER.y}) scale(${LSTP00A_CONTENT_SCALE}) translate(${-LSTP00A_CONTENT_CENTER.x} ${-LSTP00A_CONTENT_CENTER.y})`;
export const LSTP00A_PORT_ANCHORS = {
left: {
x:
LSTP00A_CONTENT_CENTER.x +
(2 - LSTP00A_CONTENT_CENTER.x) * LSTP00A_CONTENT_SCALE,
y: LSTP00A_CONTENT_CENTER.y,
},
right: {
x:
LSTP00A_CONTENT_CENTER.x +
(62 - LSTP00A_CONTENT_CENTER.x) * LSTP00A_CONTENT_SCALE,
y: LSTP00A_CONTENT_CENTER.y,
},
} as const;
const PNRP17_STROKE = "#8b134f";
const PNRP17_FILL = "#cf9db6";
const PNRP17_LIGHT_FILL = "#f5ebf0";
// PNRP17 使用最终像素线宽;几何缩放不再改变参考图中的粗细层级。
const PNRP17_PRIMARY_STROKE_WIDTH = 2.1;
const PNRP17_DETAIL_STROKE_WIDTH = 1.9;
const PNRP17_VERTICAL_CENTER = 24.5;
const PNRP17_VERTICAL_SCALE = 1.21;
const PNRP17_CONTENT_TRANSFORM = `translate(0 ${PNRP17_VERTICAL_CENTER}) scale(1 ${PNRP17_VERTICAL_SCALE}) translate(0 ${-PNRP17_VERTICAL_CENTER})`;
const pnrp17ScaledY = (y: number) =>
PNRP17_VERTICAL_CENTER +
(y - PNRP17_VERTICAL_CENTER) * PNRP17_VERTICAL_SCALE;
export const PNRP17_PORT_ANCHORS = {
bottom: { x: 25.5, y: pnrp17ScaledY(48) },
upperLeft: { x: 2, y: pnrp17ScaledY(4.4) },
middleLeft: { x: 2, y: pnrp17ScaledY(24.1) },
upperRight: { x: 62, y: pnrp17ScaledY(4.4) },
middleRight: { x: 62, y: pnrp17ScaledY(24.1) },
} as const;
const mechanicalStroke = {
fill: "none",
stroke: SYMBOL_STROKE,
strokeLinecap: "round" as const,
strokeLinejoin: "round" as const,
strokeWidth: MECHANICAL_LINE_WIDTH,
};
function MechanicalSocket({ side }: { side: "left" | "right" }) {
const facingLeft = side === "left";
return (
<g
fill="none"
stroke={MECMAS21_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
>
<path
d={facingLeft ? "M2 24h4.2" : "M57.8 24H62"}
strokeWidth="0.9"
/>
<path
d={
facingLeft
? "M14 18.5H6.2v11H14"
: "M50 18.5h7.8v11H50"
}
strokeWidth="2.5"
/>
</g>
);
}
export function AmesimF000Symbol() {
return (
<SymbolSvg className="component-symbol-amesim-f000" domain="mechanical">
<g data-f000-part="symbol">
<path
d={`M${F000_FRAME_RIGHT_X} ${F000_PORT_ANCHOR.y}H${F000_PORT_ANCHOR.x}`}
data-f000-part="extension"
stroke={SYMBOL_STROKE}
strokeLinecap="butt"
strokeWidth="1.5"
/>
<g data-f000-part="body" transform={F000_CONTENT_TRANSFORM}>
<rect
data-f000-part="frame"
fill="#ffffff"
height="34"
stroke={SYMBOL_STROKE}
strokeLinejoin="miter"
strokeWidth="2.5"
width="52"
x="0"
y="7"
/>
</g>
</g>
</SymbolSvg>
);
}
export function AmesimForcSymbol() {
return (
<SymbolSvg className="component-symbol-amesim-forc" domain="mechanical">
<g data-forc-part="symbol" transform={FORC_CONTENT_TRANSFORM}>
<path
d="M2 24H18"
data-forc-part="left-extension"
stroke={FORC_STROKE}
strokeLinecap="butt"
strokeWidth="1.5"
/>
<path
d="M11.5 19.8 18 24 11.5 28.2"
data-forc-part="input-arrow"
fill="none"
stroke={FORC_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="2"
/>
<rect
data-forc-part="mechanical-socket"
fill="#ffffff"
height="10"
stroke={FORC_STROKE}
strokeLinejoin="miter"
strokeWidth="2"
width="14"
x="39"
y="19"
/>
<path
d="M53 24H62"
data-forc-part="right-extension"
stroke={FORC_STROKE}
strokeLinecap="butt"
strokeWidth="1.5"
/>
<circle
cx="30"
cy="24"
data-forc-part="force-circle"
fill="#ffffff"
r="12"
stroke={FORC_STROKE}
strokeWidth="2"
/>
<text
data-forc-part="label"
dominantBaseline="central"
fill={FORC_STROKE}
fontFamily="Arial, sans-serif"
fontSize="15"
fontWeight="600"
textAnchor="middle"
x="30"
y="24"
>
F
</text>
</g>
</SymbolSvg>
);
}
export function AmesimMecmas21Symbol({
parameters,
}: ComponentSymbolRendererProps) {
const frictionEnabled = Number(parameters?.useFriction ?? 2) === 2;
const stopType = Number(parameters?.stoptype ?? 1);
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"
>
<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"
/>
</pattern>
</defs>
<g
data-mecmas-friction={frictionEnabled ? "enabled" : "disabled"}
data-mecmas-limits={limitsEnabled ? "finite" : "unlimited"}
data-mecmas-variant={variant}
transform={MECMAS21_CONTENT_TRANSFORM}
>
{showGuides ? (
<g data-mecmas-part="guides">
<rect
data-mecmas-part="upper-guide"
fill={`url(#${hatchingId})`}
height="8.5"
stroke={MECMAS21_STROKE}
strokeWidth="1.2"
width="61"
x="1.5"
y="-5.5"
/>
{limitsEnabled ? (
<g data-mecmas-part="finite-lower-guide">
<path
d="M1.5 34.5H9V45H55V34.5H62.5V53.5H1.5Z"
fill={`url(#${hatchingId})`}
stroke={MECMAS21_STROKE}
strokeLinejoin="miter"
strokeWidth="1.2"
/>
</g>
) : (
<rect
data-mecmas-part="unlimited-lower-guide"
fill={`url(#${hatchingId})`}
height="8.5"
stroke={MECMAS21_STROKE}
strokeWidth="1.2"
width="61"
x="1.5"
y="45"
/>
)}
</g>
) : null}
{frictionEnabled ? (
<path
d="M16.5 5.25h4.9m3.8 0h4.9m3.9 0h4.9m3.8 0h4.9M16.5 42.75h4.9m3.8 0h4.9m3.9 0h4.9m3.8 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="34"
stroke={MECMAS21_STROKE}
strokeWidth="2.5"
width="36"
x="14"
y="7"
/>
<text
dominantBaseline="central"
fill={MECMAS21_STROKE}
fontFamily="Arial, sans-serif"
fontSize="10"
fontWeight="500"
textAnchor="middle"
x="32"
y="31"
>
M
</text>
<path
d="M18.8 16.8H25M21.9 13.8v6"
fill="none"
stroke={MECMAS21_STROKE}
strokeLinecap="square"
strokeWidth="1.05"
/>
<path
d="M46 16.8 39.5 12v3.6h-13V18h13v3.6Z"
fill={MECMAS21_STROKE}
/>
</g>
</g>
{/* 固定选择包络:参数切换为仅中央滑块时,虚线框仍保持完整状态大小。 */}
<rect
data-mecmas-part="selection-envelope"
fill="transparent"
height={MECMAS21_SELECTION_ENVELOPE.height}
pointerEvents="none"
width={MECMAS21_SELECTION_ENVELOPE.width}
x={MECMAS21_SELECTION_ENVELOPE.x}
y={MECMAS21_SELECTION_ENVELOPE.y}
/>
</SymbolSvg>
);
}
export function AmesimLstp00aSymbol() {
return (
<SymbolSvg className="component-symbol-amesim-lstp00a" domain="mechanical">
<g
data-lstp00a-part="symbol"
fill="#ffffff"
stroke={LSTP00A_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth={LSTP00A_STROKE_WIDTH}
transform={LSTP00A_CONTENT_TRANSFORM}
>
<path
d="M2 24H7.5"
data-lstp00a-part="left-extension"
fill="none"
/>
<path
d="M56.5 24H62"
data-lstp00a-part="right-extension"
fill="none"
/>
<path
data-lstp00a-part="left-socket"
d="M13.75 19.75H6.25V28.25H13.75"
fill="none"
/>
<path
data-lstp00a-part="right-socket"
d="M49.75 19.75H57.25V28.25H49.75"
fill="none"
/>
<path
d="M28.75 17.2C31.2 16 32.6 0 35 0c1.4 0 2.2 17.2 3.7 17.2 2.8 0 3.8-16 7.3-16"
data-lstp00a-part="spring"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.75 39H36M41 39H46M36 31V47M33.75 27H41V50.5H33.75"
data-lstp00a-part="lower-link"
fill="none"
/>
<rect
data-lstp00a-part="left-rail"
height="53"
width="3.75"
x="13.75"
y="-2.5"
/>
<rect
data-lstp00a-part="middle-rail"
height="53"
width="3.75"
x="25"
y="-2.5"
/>
<rect
data-lstp00a-part="right-rail"
height="53"
width="3.75"
x="46"
y="-2.5"
/>
</g>
</SymbolSvg>
);
}
export const LMECHN1_DEFAULT_RIGHT_PORT_COUNT = 2;
export const LMECHN1_MAX_RIGHT_PORT_COUNT = 20;
const LMECHN1_PALETTE_RIGHT_PORT_COUNT = 5;
const LMECHN1_PORT_ROW_SPACING = 13;
const LMECHN1_BODY_LEFT = 18;
const LMECHN1_BODY_RIGHT = 46;
const LMECHN1_SOCKET_WIDTH = 6;
const LMECHN1_SOCKET_HALF_HEIGHT = 2.5;
const LMECHN1_LEFT_SOCKET_OUTER_X = LMECHN1_BODY_LEFT - LMECHN1_SOCKET_WIDTH;
const LMECHN1_RIGHT_SOCKET_OUTER_X = LMECHN1_BODY_RIGHT + LMECHN1_SOCKET_WIDTH;
export function lmechn1RightPortCount(
parameters?: ComponentSymbolRendererProps["parameters"],
) {
const candidate = Number(parameters?.v1);
if (!Number.isInteger(candidate)) {
return LMECHN1_DEFAULT_RIGHT_PORT_COUNT;
}
return Math.min(
LMECHN1_MAX_RIGHT_PORT_COUNT,
Math.max(1, candidate),
);
}
export function lmechn1SymbolMetrics(
parameters?: ComponentSymbolRendererProps["parameters"],
) {
const rightPortCount = lmechn1RightPortCount(parameters);
const requestedBodyHeight = Math.max(
28,
12 + (rightPortCount - 1) * LMECHN1_PORT_ROW_SPACING,
);
const viewBoxHeight = Math.max(48, requestedBodyHeight + 8);
const bodyHeight = Math.min(requestedBodyHeight, viewBoxHeight - 8);
const bodyTop = (viewBoxHeight - bodyHeight) / 2;
const rightPortSpan = (rightPortCount - 1) * LMECHN1_PORT_ROW_SPACING;
const firstPortY = (viewBoxHeight - rightPortSpan) / 2;
const rightPortRows = Array.from(
{ length: rightPortCount },
(_, index) => firstPortY + index * LMECHN1_PORT_ROW_SPACING,
);
return {
bodyHeight,
bodyTop,
rightPortCount,
rightPortRows,
viewBoxHeight,
} as const;
}
export function AmesimLmechn1Symbol({
parameters,
surface,
}: ComponentSymbolRendererProps) {
// 组件库始终展示一个固定、易辨识的标准图;工作区才按实际端口数展开。
const metrics = lmechn1SymbolMetrics(
surface === "palette"
? { ...parameters, v1: LMECHN1_PALETTE_RIGHT_PORT_COUNT }
: parameters,
);
const centerY = metrics.viewBoxHeight / 2;
return (
<SymbolSvg className="component-symbol-amesim-lmechn1" domain="mechanical">
<rect
data-lmechn1-part="body"
fill={SYMBOL_FILL}
height={metrics.bodyHeight}
rx="1"
stroke={SYMBOL_STROKE}
strokeWidth="2.5"
width={LMECHN1_BODY_RIGHT - LMECHN1_BODY_LEFT}
x={LMECHN1_BODY_LEFT}
y={metrics.bodyTop}
/>
{metrics.rightPortRows.map((y, index) => (
<g data-lmechn1-port={`port_${index + 1}`} key={index}>
<path
d={`M${LMECHN1_RIGHT_SOCKET_OUTER_X} ${y}H62`}
data-lmechn1-part="right-port-line"
fill="none"
stroke={SYMBOL_STROKE}
strokeLinecap="butt"
strokeWidth="1.5"
/>
<path
d={`M${LMECHN1_BODY_RIGHT} ${y - LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_RIGHT_SOCKET_OUTER_X}V${y + LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_BODY_RIGHT}`}
data-lmechn1-part="right-port-socket"
fill="none"
stroke={SYMBOL_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="1.5"
/>
</g>
))}
<g data-lmechn1-part="reference-port">
<path
d={`M2 ${centerY}H${LMECHN1_LEFT_SOCKET_OUTER_X}`}
data-lmechn1-part="reference-port-line"
fill="none"
stroke={SYMBOL_STROKE}
strokeLinecap="butt"
strokeWidth="1.5"
/>
<path
d={`M${LMECHN1_BODY_LEFT} ${centerY - LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_LEFT_SOCKET_OUTER_X}V${centerY + LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_BODY_LEFT}`}
data-lmechn1-part="reference-port-socket"
fill="none"
stroke={SYMBOL_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="1.5"
/>
</g>
<text
data-lmechn1-part="label"
fill={SYMBOL_STROKE}
fontFamily="Arial, sans-serif"
fontSize="6.2"
fontWeight="600"
stroke="none"
textAnchor="middle"
x="32"
y={centerY - 6.2}
>
<tspan x="32">linear</tspan>
<tspan dy="6.5" x="32">node</tspan>
<tspan dy="6.5" x="32">(displ.)</tspan>
</text>
</SymbolSvg>
);
}
function Pnrp17ArrowPair({ centerY }: { centerY: number }) {
return (
<g
data-pnrp17-part="chamber-arrows"
fill="none"
stroke={PNRP17_STROKE}
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth={PNRP17_DETAIL_STROKE_WIDTH}
transform={`translate(0 ${centerY})`}
>
<g data-pnrp17-arrow="left" transform="translate(18.2 0)">
<path d="M9.1 0H3.9" />
<path d="M3.9 -2.5 0 0 3.9 2.5Z" fill="#ffffff" />
</g>
<g
data-pnrp17-arrow="right"
transform="translate(38.8 0) scale(-1 1)"
>
<path d="M9.1 0H3.9" />
<path d="M3.9 -2.5 0 0 3.9 2.5Z" fill="#ffffff" />
</g>
</g>
);
}
export function AmesimPnrp17Symbol() {
return (
<SymbolSvg className="component-symbol-amesim-pnrp17" domain="mechanical">
<g data-pnrp17-part="symbol" transform={PNRP17_CONTENT_TRANSFORM}>
<path
data-pnrp17-part="upper-shell"
d="M13.4 1.1H51.4V3h4.1v2.9h-4.1v1.9H18.2V21.1H3.3V7.3H13.4V5.9H9.3V3h4.1Z"
fill={PNRP17_FILL}
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
/>
<rect
data-pnrp17-part="upper-left-wall"
fill={PNRP17_STROKE}
height="13.8"
width="2.9"
x="15.3"
y="7.3"
/>
<path
data-pnrp17-part="lower-left-shell"
d="M3.3 27H18.2V40.7H20V46.6H3.3Z"
fill={PNRP17_FILL}
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
/>
<rect
data-pnrp17-part="lower-left-wall"
fill={PNRP17_STROKE}
height="13.7"
width="2.9"
x="15.3"
y="27"
/>
<path
data-pnrp17-part="lower-base"
d="M28 40.5h28.5v6.7H28Z"
fill={PNRP17_FILL}
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
/>
<rect
data-pnrp17-part="piston-sleeve"
fill={PNRP17_LIGHT_FILL}
height="34"
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
width="7.7"
x="40.8"
y="7.2"
/>
<rect
data-pnrp17-part="piston-face"
fill={PNRP17_STROKE}
height="34"
width="1.8"
x="38.8"
y="7.2"
/>
<rect
data-pnrp17-part="horizontal-rod-left"
fill={PNRP17_LIGHT_FILL}
height="2.8"
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
width="31.5"
x="9.3"
y="22.7"
/>
<rect
data-pnrp17-part="horizontal-rod-right"
fill={PNRP17_LIGHT_FILL}
height="2.8"
stroke={PNRP17_STROKE}
strokeLinejoin="miter"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
width="7.7"
x="47.8"
y="22.7"
/>
<path
data-pnrp17-part="horizontal-extensions"
d="M2 4.4h7.3m46.2 0H62M2 24.1h7.3m46.2 0H62"
fill="none"
stroke={PNRP17_STROKE}
strokeLinecap="butt"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
/>
<path
data-pnrp17-part="bottom-port"
d="M25.5 43.4V48"
fill="none"
stroke={PNRP17_STROKE}
strokeLinecap="butt"
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
/>
<Pnrp17ArrowPair centerY={15.15} />
<Pnrp17ArrowPair centerY={32.9} />
</g>
</SymbolSvg>
);
}