统一组件图标布局并完善选择吸附交互
This commit is contained in:
ljz committed
1 parent
40c72422ff
commit
7671418582
16 files changed
+4359
-598
No files matched your search
@@ -139,6 +139,8 @@ class ReactFlowSimulationConfig(BaseModel):
|
||||
class ReactFlowProjectPayload(BaseModel):
|
||||
name: str = "untitled"
|
||||
mediumReferenceVersion: Literal[1] | None = None
|
||||
# 仅用于前端展示布局迁移；求解器和 System XML 不读取该字段。
|
||||
presentationLayoutVersion: Literal[1] | None = None
|
||||
# Missing/None is reserved for projects written before canonical AMESim
|
||||
# option codes were introduced. Every current writer emits version 1.
|
||||
amesimParameterEncodingVersion: Literal[1] | None = Field(
|
||||
|
||||
+1284
-146
File diff suppressed because it is too large.
Load diff
+510
-158
@@ -1,8 +1,16 @@
|
||||
import { AmesimPnpl01Symbol } from "./componentSymbols/boundary";
|
||||
import { useLayoutEffect, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
AmesimPnpl01Symbol,
|
||||
PNPL01_PORT_ANCHOR,
|
||||
} from "./componentSymbols/boundary";
|
||||
import {
|
||||
AmesimF000Symbol,
|
||||
F000_PORT_ANCHOR,
|
||||
AmesimForcSymbol,
|
||||
FORC_PORT_ANCHORS,
|
||||
AmesimLmechn1Symbol,
|
||||
MECMAS21_PORT_ANCHORS,
|
||||
AmesimPnrp17Symbol,
|
||||
AmesimLstp00aSymbol,
|
||||
AmesimMecmas21Symbol,
|
||||
@@ -21,14 +29,31 @@ import {
|
||||
AmesimPnor001Symbol,
|
||||
AmesimPnvo001FixedSymbol,
|
||||
AmesimPnvo001SignalSymbol,
|
||||
PNVO001_PORT_ANCHORS,
|
||||
} from "./componentSymbols/pneumatic";
|
||||
import { SymbolSvg } from "./componentSymbols/primitives";
|
||||
import { AmesimStep0Symbol, AmesimUd00Symbol } from "./componentSymbols/signals";
|
||||
import { AmesimPnch012Symbol, AmesimPnch023Symbol } from "./componentSymbols/storage";
|
||||
import {
|
||||
SymbolSvg,
|
||||
SymbolViewBoxProvider,
|
||||
} from "./componentSymbols/primitives";
|
||||
import {
|
||||
AmesimStep0Symbol,
|
||||
AmesimUd00Symbol,
|
||||
SIGNAL_OUTPUT_PORT_ANCHOR,
|
||||
} from "./componentSymbols/signals";
|
||||
import {
|
||||
AmesimPnch012Symbol,
|
||||
AmesimPnch023Symbol,
|
||||
PNCH012_PORT_ANCHORS,
|
||||
PNCH023_PORT_ANCHORS,
|
||||
} from "./componentSymbols/storage";
|
||||
import type {
|
||||
ComponentSymbolLayout,
|
||||
ComponentSymbolParameters,
|
||||
ComponentSymbolPortAnchors,
|
||||
ComponentSymbolPresentation,
|
||||
ComponentSymbolSize,
|
||||
ComponentSymbolSizeTier,
|
||||
ComponentSymbolViewBox,
|
||||
SymbolDefinition,
|
||||
} from "./componentSymbols/types";
|
||||
|
||||
@@ -42,6 +67,125 @@ type ComponentSymbolProps = {
|
||||
parameters?: ComponentSymbolParameters;
|
||||
};
|
||||
|
||||
const DEFAULT_SYMBOL_VIEW_BOX: ComponentSymbolViewBox = {
|
||||
x: 0,
|
||||
// 既有图形使用 y=0..48；上下各保留 8 个逻辑单位，统一为 64×64 方形画布。
|
||||
y: -8,
|
||||
width: 64,
|
||||
height: 64,
|
||||
};
|
||||
|
||||
const SYMBOL_SIZE_BY_TIER: Record<
|
||||
Exclude<ComponentSymbolSizeTier, "custom">,
|
||||
ComponentSymbolSize
|
||||
> = {
|
||||
compact: { width: 80, height: 80 },
|
||||
small: { width: 96, height: 96 },
|
||||
standard: { width: 112, height: 112 },
|
||||
large: { width: 128, height: 128 },
|
||||
};
|
||||
|
||||
/** 组件库按工作区尺寸档位表达元件的相对大小，工作区画布不使用这组比例。 */
|
||||
const PALETTE_OCCUPANCY_BY_TIER: Record<ComponentSymbolSizeTier, number> = {
|
||||
compact: 0.45,
|
||||
small: 0.75,
|
||||
standard: 0.9,
|
||||
large: 0.9,
|
||||
custom: 0.9,
|
||||
};
|
||||
|
||||
function fittedPaletteViewBox(
|
||||
bounds: Pick<DOMRect, "x" | "y" | "width" | "height">,
|
||||
occupancy: number,
|
||||
): ComponentSymbolViewBox | null {
|
||||
const longestSide = Math.max(bounds.width, bounds.height);
|
||||
if (!Number.isFinite(longestSide) || longestSide <= 0) {
|
||||
return null;
|
||||
}
|
||||
const side = longestSide / occupancy;
|
||||
const centerX = bounds.x + bounds.width / 2;
|
||||
const centerY = bounds.y + bounds.height / 2;
|
||||
const round = (value: number) => Math.round(value * 10_000) / 10_000;
|
||||
return {
|
||||
x: round(centerX - side / 2),
|
||||
y: round(centerY - side / 2),
|
||||
width: round(side),
|
||||
height: round(side),
|
||||
};
|
||||
}
|
||||
|
||||
function sameViewBox(
|
||||
first: ComponentSymbolViewBox,
|
||||
second: ComponentSymbolViewBox,
|
||||
) {
|
||||
return (
|
||||
first.x === second.x &&
|
||||
first.y === second.y &&
|
||||
first.width === second.width &&
|
||||
first.height === second.height
|
||||
);
|
||||
}
|
||||
|
||||
const LEGACY_HORIZONTAL_PORT_ANCHORS: ComponentSymbolPortAnchors = {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
};
|
||||
const LEGACY_PNVO001_SIGNAL_PORT_ANCHORS: ComponentSymbolPortAnchors = {
|
||||
left: [
|
||||
{ x: 26, y: 46 },
|
||||
{ x: 2, y: 24 },
|
||||
],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
};
|
||||
|
||||
type CustomSymbolLayout = {
|
||||
viewBox?: ComponentSymbolViewBox;
|
||||
symbolSize: ComponentSymbolSize;
|
||||
nodeSize?: ComponentSymbolSize;
|
||||
};
|
||||
|
||||
function makeSymbolLayout(
|
||||
tier: Exclude<ComponentSymbolSizeTier, "custom">,
|
||||
portAnchors?: ComponentSymbolPortAnchors,
|
||||
): ComponentSymbolLayout;
|
||||
function makeSymbolLayout(
|
||||
tier: "custom",
|
||||
portAnchors: ComponentSymbolPortAnchors | undefined,
|
||||
custom: CustomSymbolLayout,
|
||||
): ComponentSymbolLayout;
|
||||
function makeSymbolLayout(
|
||||
tier: ComponentSymbolSizeTier,
|
||||
portAnchors?: ComponentSymbolPortAnchors,
|
||||
custom?: CustomSymbolLayout,
|
||||
): ComponentSymbolLayout {
|
||||
const symbolSize =
|
||||
tier === "custom"
|
||||
? custom?.symbolSize ?? SYMBOL_SIZE_BY_TIER.large
|
||||
: SYMBOL_SIZE_BY_TIER[tier];
|
||||
return {
|
||||
tier,
|
||||
viewBox: custom?.viewBox ?? DEFAULT_SYMBOL_VIEW_BOX,
|
||||
symbolSize,
|
||||
// 两侧各保留 10px 给接口 Handle；无接口的自定义图标可显式收紧节点框。
|
||||
nodeSize: custom?.nodeSize ?? {
|
||||
width: symbolSize.width + 20,
|
||||
height: symbolSize.height,
|
||||
},
|
||||
portAnchors,
|
||||
};
|
||||
}
|
||||
|
||||
/** 无接口元件不需要预留 Handle 空间，节点占地与对应档位的方形图标画布一致。 */
|
||||
function makePortlessSymbolLayout(
|
||||
tier: Exclude<ComponentSymbolSizeTier, "custom">,
|
||||
): ComponentSymbolLayout {
|
||||
const layout = makeSymbolLayout(tier);
|
||||
return {
|
||||
...layout,
|
||||
nodeSize: layout.symbolSize,
|
||||
};
|
||||
}
|
||||
|
||||
function CylinderSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
@@ -164,175 +308,315 @@ function JunctionSymbol() {
|
||||
}
|
||||
|
||||
const symbolRegistry = {
|
||||
cylinder: { presentation: "framed", render: CylinderSymbol },
|
||||
tank: { presentation: "framed", render: TankSymbol },
|
||||
pipe: { presentation: "framed", render: PipeSymbol },
|
||||
orifice: { presentation: "framed", render: OrificeSymbol },
|
||||
tee: { presentation: "framed", render: TeeSymbol },
|
||||
generic: { presentation: "framed", render: GenericSymbol },
|
||||
signal: { presentation: "framed", render: SignalSymbol },
|
||||
junction: { presentation: "framed", render: JunctionSymbol },
|
||||
amesim_pnpl01: { presentation: "framed", render: AmesimPnpl01Symbol },
|
||||
amesim_pnch023: { presentation: "framed", render: AmesimPnch023Symbol },
|
||||
amesim_pnch012: { presentation: "framed", render: AmesimPnch012Symbol },
|
||||
amesim_pnor001: { presentation: "framed", render: AmesimPnor001Symbol },
|
||||
cylinder: {
|
||||
presentation: "framed",
|
||||
render: CylinderSymbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [{ x: 61, y: 24 }],
|
||||
}),
|
||||
},
|
||||
tank: {
|
||||
presentation: "framed",
|
||||
render: TankSymbol,
|
||||
layout: makeSymbolLayout("small", { left: [{ x: 2, y: 24 }] }),
|
||||
},
|
||||
pipe: {
|
||||
presentation: "framed",
|
||||
render: PipeSymbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
orifice: {
|
||||
presentation: "framed",
|
||||
render: OrificeSymbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
tee: {
|
||||
presentation: "framed",
|
||||
render: TeeSymbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [
|
||||
{ x: 62, y: 12 },
|
||||
{ x: 62, y: 36 },
|
||||
],
|
||||
}),
|
||||
},
|
||||
generic: {
|
||||
presentation: "framed",
|
||||
render: GenericSymbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
signal: {
|
||||
presentation: "framed",
|
||||
render: SignalSymbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
junction: {
|
||||
presentation: "framed",
|
||||
render: JunctionSymbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_pnpl01: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnpl01Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("compact", { left: [PNPL01_PORT_ANCHOR] }),
|
||||
legacyPortAnchors: { left: [{ x: 2, y: 24 }] },
|
||||
},
|
||||
},
|
||||
amesim_pnch023: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnch023Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("small", {
|
||||
left: [PNCH023_PORT_ANCHORS.left],
|
||||
right: [PNCH023_PORT_ANCHORS.right],
|
||||
}),
|
||||
legacyPortAnchors: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
},
|
||||
},
|
||||
amesim_pnch012: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnch012Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("small", {
|
||||
// 保留第一对左右接口，将第二对对应到参考图的上下接口。
|
||||
left: [
|
||||
PNCH012_PORT_ANCHORS.left,
|
||||
PNCH012_PORT_ANCHORS.top,
|
||||
],
|
||||
right: [
|
||||
PNCH012_PORT_ANCHORS.right,
|
||||
PNCH012_PORT_ANCHORS.bottom,
|
||||
],
|
||||
}),
|
||||
legacyPortAnchors: {
|
||||
left: [
|
||||
{ x: 2, y: 16 },
|
||||
{ x: 2, y: 32 },
|
||||
],
|
||||
right: [
|
||||
{ x: 62, y: 16 },
|
||||
{ x: 62, y: 32 },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
amesim_pnor001: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnor001Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("small", {
|
||||
left: [PNVO001_PORT_ANCHORS.physicalLeft],
|
||||
right: [PNVO001_PORT_ANCHORS.physicalRight],
|
||||
}),
|
||||
legacyPortAnchors: LEGACY_HORIZONTAL_PORT_ANCHORS,
|
||||
},
|
||||
},
|
||||
amesim_pnvo001_fixed: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnvo001FixedSymbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("small", {
|
||||
left: [PNVO001_PORT_ANCHORS.physicalLeft],
|
||||
right: [PNVO001_PORT_ANCHORS.physicalRight],
|
||||
}),
|
||||
legacyPortAnchors: LEGACY_HORIZONTAL_PORT_ANCHORS,
|
||||
},
|
||||
},
|
||||
amesim_pnvo001: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnvo001SignalSymbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("small", {
|
||||
left: [
|
||||
PNVO001_PORT_ANCHORS.signal,
|
||||
PNVO001_PORT_ANCHORS.physicalLeft,
|
||||
],
|
||||
right: [PNVO001_PORT_ANCHORS.physicalRight],
|
||||
}),
|
||||
legacyPortAnchors: LEGACY_PNVO001_SIGNAL_PORT_ANCHORS,
|
||||
},
|
||||
},
|
||||
amesim_pnl00r: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnl00rSymbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_pnl0001: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnl0001Symbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_pnl0002: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnl0002Symbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_pnl0003: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnl0003Symbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_pn3node2: {
|
||||
presentation: "framed",
|
||||
render: AmesimPn3Node2Symbol,
|
||||
layout: makeSymbolLayout("compact", {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [
|
||||
{ x: 61, y: 12 },
|
||||
{ x: 61, y: 36 },
|
||||
],
|
||||
}),
|
||||
},
|
||||
amesim_p4node2: {
|
||||
presentation: "framed",
|
||||
render: AmesimP4Node2Symbol,
|
||||
layout: makeSymbolLayout("small", {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [
|
||||
{ x: 61, y: 8 },
|
||||
{ x: 61, y: 24 },
|
||||
{ x: 61, y: 40 },
|
||||
],
|
||||
}),
|
||||
},
|
||||
amesim_step0: {
|
||||
presentation: "framed",
|
||||
render: AmesimStep0Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("standard", { right: [SIGNAL_OUTPUT_PORT_ANCHOR] }),
|
||||
legacyPortAnchors: { right: [{ x: 60, y: 24 }] },
|
||||
},
|
||||
},
|
||||
amesim_ud00: {
|
||||
presentation: "framed",
|
||||
render: AmesimUd00Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("standard", { right: [SIGNAL_OUTPUT_PORT_ANCHOR] }),
|
||||
legacyPortAnchors: { right: [{ x: 60, y: 24 }] },
|
||||
},
|
||||
},
|
||||
amesim_f000: {
|
||||
presentation: "framed",
|
||||
render: AmesimF000Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("compact", { right: [F000_PORT_ANCHOR] }),
|
||||
legacyPortAnchors: { right: [{ x: 62, y: 24 }] },
|
||||
},
|
||||
},
|
||||
amesim_forc: {
|
||||
presentation: "framed",
|
||||
render: AmesimForcSymbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("standard", {
|
||||
left: [FORC_PORT_ANCHORS.left],
|
||||
right: [FORC_PORT_ANCHORS.right],
|
||||
}),
|
||||
legacyPortAnchors: LEGACY_HORIZONTAL_PORT_ANCHORS,
|
||||
},
|
||||
},
|
||||
amesim_mecmas21: {
|
||||
presentation: "framed",
|
||||
render: AmesimMecmas21Symbol,
|
||||
layout: {
|
||||
...makeSymbolLayout("standard", {
|
||||
left: [MECMAS21_PORT_ANCHORS.left],
|
||||
right: [MECMAS21_PORT_ANCHORS.right],
|
||||
}),
|
||||
legacyPortAnchors: LEGACY_HORIZONTAL_PORT_ANCHORS,
|
||||
},
|
||||
variantKey: (parameters) =>
|
||||
`${parameters?.useFriction ?? ""}:${parameters?.stoptype ?? ""}`,
|
||||
},
|
||||
amesim_lstp00a: {
|
||||
presentation: "framed",
|
||||
render: AmesimLstp00aSymbol,
|
||||
layout: makeSymbolLayout("standard", {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
}),
|
||||
},
|
||||
amesim_lmechn1: {
|
||||
presentation: "framed",
|
||||
render: AmesimLmechn1Symbol,
|
||||
layout: makeSymbolLayout(
|
||||
"custom",
|
||||
{
|
||||
left: [7, 12, 17, 22, 27, 32, 37, 42].map((y) => ({ x: 5, y })),
|
||||
right: [{ x: 59, y: 24 }],
|
||||
},
|
||||
{
|
||||
symbolSize: { width: 128, height: 128 },
|
||||
nodeSize: { width: 148, height: 128 },
|
||||
},
|
||||
),
|
||||
},
|
||||
amesim_pnrp17: {
|
||||
presentation: "framed",
|
||||
render: AmesimPnrp17Symbol,
|
||||
// PNRP17 的当前 112×112 画布作为 standard 档位基准。
|
||||
layout: makeSymbolLayout("standard", {
|
||||
left: [
|
||||
{ x: 25.5, y: 48 },
|
||||
{ x: 2, y: 4.4 },
|
||||
{ x: 2, y: 24.1 },
|
||||
],
|
||||
right: [
|
||||
{ x: 62, y: 4.4 },
|
||||
{ x: 62, y: 24.1 },
|
||||
],
|
||||
}),
|
||||
},
|
||||
amesim_pnl00r: { presentation: "framed", render: AmesimPnl00rSymbol },
|
||||
amesim_pnl0001: { presentation: "framed", render: AmesimPnl0001Symbol },
|
||||
amesim_pnl0002: { presentation: "framed", render: AmesimPnl0002Symbol },
|
||||
amesim_pnl0003: { presentation: "framed", render: AmesimPnl0003Symbol },
|
||||
amesim_pn3node2: { presentation: "framed", render: AmesimPn3Node2Symbol },
|
||||
amesim_p4node2: { presentation: "framed", render: AmesimP4Node2Symbol },
|
||||
amesim_step0: { presentation: "framed", render: AmesimStep0Symbol },
|
||||
amesim_ud00: { presentation: "framed", render: AmesimUd00Symbol },
|
||||
amesim_f000: { presentation: "framed", render: AmesimF000Symbol },
|
||||
amesim_forc: { presentation: "framed", render: AmesimForcSymbol },
|
||||
amesim_mecmas21: { presentation: "framed", render: AmesimMecmas21Symbol },
|
||||
amesim_lstp00a: { presentation: "framed", render: AmesimLstp00aSymbol },
|
||||
amesim_lmechn1: { presentation: "framed", render: AmesimLmechn1Symbol },
|
||||
amesim_pnrp17: { presentation: "framed", render: AmesimPnrp17Symbol },
|
||||
amesim_ideal_air_medium: {
|
||||
presentation: "bare",
|
||||
render: AmesimIdealAirMediumSymbol,
|
||||
layout: makePortlessSymbolLayout("standard"),
|
||||
},
|
||||
amesim_helium_medium: {
|
||||
presentation: "bare",
|
||||
render: AmesimHeliumMediumSymbol,
|
||||
layout: makePortlessSymbolLayout("standard"),
|
||||
},
|
||||
} satisfies Record<string, SymbolDefinition>;
|
||||
|
||||
type RegisteredComponentSymbol = keyof typeof symbolRegistry;
|
||||
|
||||
const symbolPortAnchors: Partial<
|
||||
Record<RegisteredComponentSymbol, ComponentSymbolPortAnchors>
|
||||
> = {
|
||||
cylinder: {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [{ x: 61, y: 24 }],
|
||||
},
|
||||
tank: { left: [{ x: 2, y: 24 }] },
|
||||
pipe: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
orifice: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
tee: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [
|
||||
{ x: 62, y: 12 },
|
||||
{ x: 62, y: 36 },
|
||||
],
|
||||
},
|
||||
generic: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
signal: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
junction: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnpl01: { left: [{ x: 2, y: 24 }] },
|
||||
amesim_pnch023: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnch012: {
|
||||
left: [
|
||||
{ x: 2, y: 16 },
|
||||
{ x: 2, y: 32 },
|
||||
],
|
||||
right: [
|
||||
{ x: 62, y: 16 },
|
||||
{ x: 62, y: 32 },
|
||||
],
|
||||
},
|
||||
amesim_pnor001: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnvo001_fixed: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnvo001: {
|
||||
left: [
|
||||
{ x: 26, y: 46 },
|
||||
{ x: 2, y: 24 },
|
||||
],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnl00r: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnl0001: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnl0002: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pnl0003: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_pn3node2: {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [
|
||||
{ x: 61, y: 12 },
|
||||
{ x: 61, y: 36 },
|
||||
],
|
||||
},
|
||||
amesim_p4node2: {
|
||||
left: [{ x: 3, y: 24 }],
|
||||
right: [
|
||||
{ x: 61, y: 8 },
|
||||
{ x: 61, y: 24 },
|
||||
{ x: 61, y: 40 },
|
||||
],
|
||||
},
|
||||
amesim_step0: { right: [{ x: 60, y: 24 }] },
|
||||
amesim_ud00: { right: [{ x: 60, y: 24 }] },
|
||||
amesim_f000: { right: [{ x: 62, y: 24 }] },
|
||||
amesim_forc: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_mecmas21: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_lstp00a: {
|
||||
left: [{ x: 2, y: 24 }],
|
||||
right: [{ x: 62, y: 24 }],
|
||||
},
|
||||
amesim_lmechn1: {
|
||||
left: [7, 12, 17, 22, 27, 32, 37, 42].map((y) => ({ x: 5, y })),
|
||||
right: [{ x: 59, y: 24 }],
|
||||
},
|
||||
amesim_pnrp17: {
|
||||
left: [
|
||||
{ x: 25.5, y: 48 },
|
||||
{ x: 2, y: 4.4 },
|
||||
{ x: 2, y: 24.1 },
|
||||
],
|
||||
right: [{ x: 62, y: 4.4 }, { x: 62, y: 24.1 }],
|
||||
},
|
||||
const fallbackComponentSymbolLayout: ComponentSymbolLayout = {
|
||||
...symbolRegistry.generic.layout,
|
||||
// 未注册图标只显示通用边框和名称，接口应落在边框边缘而不是 SVG 锚点。
|
||||
portAnchors: undefined,
|
||||
};
|
||||
|
||||
function isRegisteredComponentSymbol(symbol: string): symbol is RegisteredComponentSymbol {
|
||||
@@ -351,12 +635,27 @@ export function componentSymbolPresentation(
|
||||
: "framed";
|
||||
}
|
||||
|
||||
export function componentSymbolLayout(symbol: string): ComponentSymbolLayout {
|
||||
return isRegisteredComponentSymbol(symbol)
|
||||
? symbolRegistry[symbol].layout
|
||||
: fallbackComponentSymbolLayout;
|
||||
}
|
||||
|
||||
export function componentSymbolPortAnchors(
|
||||
symbol: string,
|
||||
): ComponentSymbolPortAnchors | undefined {
|
||||
return isRegisteredComponentSymbol(symbol)
|
||||
? symbolPortAnchors[symbol]
|
||||
: undefined;
|
||||
return componentSymbolLayout(symbol).portAnchors;
|
||||
}
|
||||
|
||||
export function componentSymbolVariantKey(
|
||||
symbol: string,
|
||||
parameters?: ComponentSymbolParameters,
|
||||
): string {
|
||||
if (!isRegisteredComponentSymbol(symbol)) {
|
||||
return "";
|
||||
}
|
||||
const definition: SymbolDefinition = symbolRegistry[symbol];
|
||||
return definition.variantKey?.(parameters) ?? "";
|
||||
}
|
||||
|
||||
export function ComponentSymbol({
|
||||
@@ -368,8 +667,16 @@ export function ComponentSymbol({
|
||||
const resolvedSymbol: RegisteredComponentSymbol = isRegisteredComponentSymbol(symbol)
|
||||
? symbol
|
||||
: "generic";
|
||||
const definition = symbolRegistry[resolvedSymbol];
|
||||
const definition: SymbolDefinition = symbolRegistry[resolvedSymbol];
|
||||
const SymbolRenderer = definition.render;
|
||||
const { layout } = definition;
|
||||
const rootRef = useRef<HTMLSpanElement>(null);
|
||||
const [paletteViewBox, setPaletteViewBox] = useState<ComponentSymbolViewBox>(
|
||||
layout.viewBox,
|
||||
);
|
||||
const paletteOccupancy = PALETTE_OCCUPANCY_BY_TIER[layout.tier];
|
||||
const variantKey = definition.variantKey?.(parameters) ?? "";
|
||||
const renderedViewBox = surface === "palette" ? paletteViewBox : layout.viewBox;
|
||||
const rootClassName = [
|
||||
"component-symbol",
|
||||
`component-symbol-${surface}`,
|
||||
@@ -379,14 +686,59 @@ export function ComponentSymbol({
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (surface !== "palette") {
|
||||
return;
|
||||
}
|
||||
const svg = rootRef.current?.querySelector<SVGSVGElement>("svg");
|
||||
if (!svg) {
|
||||
return;
|
||||
}
|
||||
let bounds: DOMRect;
|
||||
try {
|
||||
bounds = svg.getBBox();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
const fittedViewBox = fittedPaletteViewBox(bounds, paletteOccupancy);
|
||||
if (!fittedViewBox) {
|
||||
return;
|
||||
}
|
||||
setPaletteViewBox((currentViewBox) =>
|
||||
sameViewBox(currentViewBox, fittedViewBox)
|
||||
? currentViewBox
|
||||
: fittedViewBox,
|
||||
);
|
||||
}, [
|
||||
layout.tier,
|
||||
layout.viewBox.height,
|
||||
layout.viewBox.width,
|
||||
layout.viewBox.x,
|
||||
layout.viewBox.y,
|
||||
paletteOccupancy,
|
||||
resolvedSymbol,
|
||||
surface,
|
||||
variantKey,
|
||||
]);
|
||||
|
||||
return (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={rootClassName}
|
||||
data-component-symbol={resolvedSymbol}
|
||||
data-node-height={layout.nodeSize.height}
|
||||
data-node-width={layout.nodeSize.width}
|
||||
data-palette-occupancy={surface === "palette" ? paletteOccupancy : undefined}
|
||||
data-symbol-height={layout.symbolSize.height}
|
||||
data-symbol-presentation={definition.presentation}
|
||||
data-symbol-size-tier={layout.tier}
|
||||
data-symbol-width={layout.symbolSize.width}
|
||||
data-symbol-view-box={`${renderedViewBox.x} ${renderedViewBox.y} ${renderedViewBox.width} ${renderedViewBox.height}`}
|
||||
ref={rootRef}
|
||||
>
|
||||
<SymbolRenderer parameters={parameters} />
|
||||
<SymbolViewBoxProvider viewBox={renderedViewBox}>
|
||||
<SymbolRenderer parameters={parameters} />
|
||||
</SymbolViewBoxProvider>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -132,6 +132,7 @@ export type SimulationResultsSnapshot = {
|
||||
createdAt: string;
|
||||
project: {
|
||||
name: string;
|
||||
presentationLayoutVersion?: 1 | null;
|
||||
nodes: ResultProjectNode[];
|
||||
edges: ResultProjectEdge[];
|
||||
simulation: ResultSimulationConfig;
|
||||
@@ -3910,6 +3911,9 @@ function isSimulationResultsSnapshotValue(
|
||||
if (
|
||||
!isRecord(project) ||
|
||||
typeof project.name !== "string" ||
|
||||
(project.presentationLayoutVersion !== undefined &&
|
||||
project.presentationLayoutVersion !== null &&
|
||||
project.presentationLayoutVersion !== 1) ||
|
||||
!Array.isArray(project.nodes) ||
|
||||
!project.nodes.every(isResultProjectNode) ||
|
||||
!Array.isArray(project.edges) ||
|
||||
|
||||
@@ -1,15 +1,42 @@
|
||||
import { SYMBOL_ACCENT, SYMBOL_STROKE, SymbolSvg } from "./primitives";
|
||||
import { SymbolSvg } from "./primitives";
|
||||
|
||||
const PNPL01_STROKE = "#8b134f";
|
||||
const PNPL01_CONTENT_SCALE = 0.25;
|
||||
const PNPL01_CONTENT_CENTER = { x: 32, y: 24 } as const;
|
||||
const PNPL01_CONTENT_TRANSFORM = `translate(${PNPL01_CONTENT_CENTER.x} ${PNPL01_CONTENT_CENTER.y}) scale(${PNPL01_CONTENT_SCALE}) translate(${-PNPL01_CONTENT_CENTER.x} ${-PNPL01_CONTENT_CENTER.y})`;
|
||||
const PNPL01_CROSS_CENTER = {
|
||||
x:
|
||||
PNPL01_CONTENT_CENTER.x +
|
||||
(47 - PNPL01_CONTENT_CENTER.x) * PNPL01_CONTENT_SCALE,
|
||||
y: PNPL01_CONTENT_CENTER.y,
|
||||
} as const;
|
||||
|
||||
export const PNPL01_PORT_ANCHOR = {
|
||||
x: 16,
|
||||
y: PNPL01_CONTENT_CENTER.y,
|
||||
} as const;
|
||||
|
||||
export function AmesimPnpl01Symbol() {
|
||||
return (
|
||||
<SymbolSvg domain="pneumatic">
|
||||
<path d="M2 24h34" stroke={SYMBOL_STROKE} strokeWidth="2" />
|
||||
<path
|
||||
d="m35 17 14 14m0-14L35 31"
|
||||
stroke={SYMBOL_ACCENT}
|
||||
strokeLinecap="round"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
<g data-pnpl01-part="symbol">
|
||||
<path
|
||||
d={`M${PNPL01_PORT_ANCHOR.x} ${PNPL01_PORT_ANCHOR.y}H${PNPL01_CROSS_CENTER.x}`}
|
||||
data-pnpl01-part="extension"
|
||||
stroke={PNPL01_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<g data-pnpl01-part="body" transform={PNPL01_CONTENT_TRANSFORM}>
|
||||
<path
|
||||
d="M30 7 64 41M64 7 30 41"
|
||||
data-pnpl01-part="cross"
|
||||
stroke={PNPL01_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
@@ -12,9 +12,63 @@ 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 PNRP17_STROKE = "#8b134f";
|
||||
const PNRP17_FILL = "#cf9db6";
|
||||
const PNRP17_LIGHT_FILL = "#f5ebf0";
|
||||
// PNRP17 使用最终像素线宽；几何缩放不再改变参考图中的粗细层级。
|
||||
const PNRP17_PRIMARY_STROKE_WIDTH = 2;
|
||||
const PNRP17_DETAIL_STROKE_WIDTH = 1.5;
|
||||
|
||||
const mechanicalStroke = {
|
||||
fill: "none",
|
||||
@@ -34,16 +88,16 @@ function MechanicalSocket({ side }: { side: "left" | "right" }) {
|
||||
strokeLinejoin="miter"
|
||||
>
|
||||
<path
|
||||
d={facingLeft ? "M2 24h3.2" : "M58.8 24H62"}
|
||||
d={facingLeft ? "M2 24h4.2" : "M57.8 24H62"}
|
||||
strokeWidth="0.9"
|
||||
/>
|
||||
<path
|
||||
d={
|
||||
facingLeft
|
||||
? "M15.1 20.9H6.2v6.2h8.9"
|
||||
: "M48.9 20.9h8.9v6.2h-8.9"
|
||||
? "M14 18.5H6.2v11H14"
|
||||
: "M50 18.5h7.8v11H50"
|
||||
}
|
||||
strokeWidth="2"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
@@ -52,18 +106,28 @@ function MechanicalSocket({ side }: { side: "left" | "right" }) {
|
||||
export function AmesimF000Symbol() {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-amesim-f000" domain="mechanical">
|
||||
<path d="M41 24h21" {...mechanicalStroke} />
|
||||
<rect
|
||||
fill={SYMBOL_FILL}
|
||||
height="28"
|
||||
rx="1"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeWidth="2.2"
|
||||
width="18"
|
||||
x="23"
|
||||
y="12"
|
||||
/>
|
||||
<path d="M27 26h10" stroke={SYMBOL_ACCENT} strokeWidth="2" />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -71,37 +135,64 @@ export function AmesimF000Symbol() {
|
||||
export function AmesimForcSymbol() {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-amesim-forc" domain="mechanical">
|
||||
<g
|
||||
fill="none"
|
||||
stroke={SYMBOL_ACCENT}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.8"
|
||||
>
|
||||
<path d="M2 24h15" />
|
||||
<path d="m11 19 6 5-6 5" />
|
||||
<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>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="24"
|
||||
fill={SYMBOL_FILL}
|
||||
r="12"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<text
|
||||
dominantBaseline="central"
|
||||
fill={SYMBOL_STROKE}
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="13"
|
||||
fontWeight="600"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="24"
|
||||
>
|
||||
F
|
||||
</text>
|
||||
<path d="M44 24h6M50 18v12M50 18h8M50 30h8M58 18v12M58 24h4" {...mechanicalStroke} />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
@@ -141,7 +232,7 @@ export function AmesimMecmas21Symbol({
|
||||
<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"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
@@ -149,23 +240,24 @@ export function AmesimMecmas21Symbol({
|
||||
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="5.25"
|
||||
height="8.5"
|
||||
stroke={MECMAS21_STROKE}
|
||||
strokeWidth="1.2"
|
||||
width="60"
|
||||
x="2"
|
||||
y="2.6"
|
||||
width="61"
|
||||
x="1.5"
|
||||
y="-5.5"
|
||||
/>
|
||||
{limitsEnabled ? (
|
||||
<g data-mecmas-part="finite-lower-guide">
|
||||
<path
|
||||
d="M2 32.6H10V39.6H54V32.6H62V45.4H2Z"
|
||||
d="M1.5 34.5H9V45H55V34.5H62.5V53.5H1.5Z"
|
||||
fill={`url(#${hatchingId})`}
|
||||
stroke={MECMAS21_STROKE}
|
||||
strokeLinejoin="miter"
|
||||
@@ -176,19 +268,19 @@ export function AmesimMecmas21Symbol({
|
||||
<rect
|
||||
data-mecmas-part="unlimited-lower-guide"
|
||||
fill={`url(#${hatchingId})`}
|
||||
height="5.25"
|
||||
height="8.5"
|
||||
stroke={MECMAS21_STROKE}
|
||||
strokeWidth="1.2"
|
||||
width="60"
|
||||
x="2"
|
||||
y="40.23"
|
||||
width="61"
|
||||
x="1.5"
|
||||
y="45"
|
||||
/>
|
||||
)}
|
||||
</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"
|
||||
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"
|
||||
@@ -201,12 +293,12 @@ export function AmesimMecmas21Symbol({
|
||||
<rect
|
||||
data-mecmas-part="mass"
|
||||
fill={MECMAS21_FILL}
|
||||
height="23.1"
|
||||
height="34"
|
||||
stroke={MECMAS21_STROKE}
|
||||
strokeWidth="2"
|
||||
width="34"
|
||||
x="15"
|
||||
y="12.45"
|
||||
strokeWidth="2.5"
|
||||
width="36"
|
||||
x="14"
|
||||
y="7"
|
||||
/>
|
||||
<text
|
||||
dominantBaseline="central"
|
||||
@@ -216,23 +308,33 @@ export function AmesimMecmas21Symbol({
|
||||
fontWeight="500"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="29.2"
|
||||
y="31"
|
||||
>
|
||||
M
|
||||
</text>
|
||||
<path
|
||||
d="M18.94 18.8h5.88M21.9 16.6V21"
|
||||
d="M18.8 16.8H25M21.9 13.8v6"
|
||||
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"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -322,27 +424,27 @@ export function AmesimPnrp17Symbol() {
|
||||
fill={PNRP17_FILL}
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeLinejoin="miter"
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
/>
|
||||
<path
|
||||
d="M8.2 26.7h12.7v13.8h2v6.7H8.2Z"
|
||||
fill={PNRP17_FILL}
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeLinejoin="miter"
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
/>
|
||||
<path
|
||||
d="M28 40.5h28.5v6.7H28Z"
|
||||
fill={PNRP17_FILL}
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeLinejoin="miter"
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
/>
|
||||
<rect
|
||||
fill={PNRP17_LIGHT_FILL}
|
||||
height="34"
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
width="7.7"
|
||||
x="40.8"
|
||||
y="7.2"
|
||||
@@ -352,7 +454,7 @@ export function AmesimPnrp17Symbol() {
|
||||
fill={PNRP17_LIGHT_FILL}
|
||||
height="2.8"
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
width="31.5"
|
||||
x="9.3"
|
||||
y="22.7"
|
||||
@@ -361,7 +463,7 @@ export function AmesimPnrp17Symbol() {
|
||||
fill={PNRP17_LIGHT_FILL}
|
||||
height="2.8"
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
width="7.7"
|
||||
x="47.8"
|
||||
y="22.7"
|
||||
@@ -370,7 +472,7 @@ export function AmesimPnrp17Symbol() {
|
||||
d="M2 4.4h7.3m46.2 0H62M2 24.1h7.3m46.2 0H62M25.5 43.4V48"
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="1.2"
|
||||
strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
|
||||
/>
|
||||
{[15.3, 33].map((centerY) => (
|
||||
<g
|
||||
@@ -379,7 +481,7 @@ export function AmesimPnrp17Symbol() {
|
||||
stroke={PNRP17_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="miter"
|
||||
strokeWidth="1.1"
|
||||
strokeWidth={PNRP17_DETAIL_STROKE_WIDTH}
|
||||
>
|
||||
<path d={`M28.8 ${centerY}h-3.4`} />
|
||||
<path
|
||||
|
||||
@@ -1,24 +1,31 @@
|
||||
import { SYMBOL_ACCENT, SYMBOL_FILL, SYMBOL_STROKE, SymbolSvg } from "./primitives";
|
||||
import { SYMBOL_FILL, SymbolSvg } from "./primitives";
|
||||
|
||||
const MEDIUM_SYMBOL_COLOR = "#8b134f";
|
||||
const MEDIUM_SYMBOL_RADIUS = 19.2;
|
||||
const MEDIUM_SYMBOL_LABEL_FONT_SIZE = 13;
|
||||
|
||||
function MediumSymbol({ label }: { label: "Air" | "He" }) {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-medium-svg" domain="medium">
|
||||
<SymbolSvg
|
||||
className="component-symbol-medium-svg"
|
||||
domain="medium"
|
||||
>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="24"
|
||||
fill={SYMBOL_FILL}
|
||||
r="21"
|
||||
stroke={SYMBOL_STROKE}
|
||||
r={MEDIUM_SYMBOL_RADIUS}
|
||||
stroke={MEDIUM_SYMBOL_COLOR}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<text
|
||||
className="component-symbol-medium-label"
|
||||
data-symbol-label={label}
|
||||
dominantBaseline="central"
|
||||
fill={SYMBOL_ACCENT}
|
||||
fill={MEDIUM_SYMBOL_COLOR}
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize={label === "Air" ? 12 : 16}
|
||||
fontWeight="500"
|
||||
fontSize={MEDIUM_SYMBOL_LABEL_FONT_SIZE}
|
||||
fontWeight="600"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="24"
|
||||
|
||||
@@ -8,85 +8,87 @@ import {
|
||||
|
||||
const PNEUMATIC_STROKE_WIDTH = 1.7;
|
||||
const PNVO001_STROKE = "#8b134f";
|
||||
const ORIFICE_CONTENT_SCALE = 0.6;
|
||||
const ORIFICE_CONTENT_CENTER = { x: 32, y: 24 } as const;
|
||||
const ORIFICE_CONTENT_TRANSFORM = `translate(${ORIFICE_CONTENT_CENTER.x} ${ORIFICE_CONTENT_CENTER.y}) scale(${ORIFICE_CONTENT_SCALE}) translate(${-ORIFICE_CONTENT_CENTER.x} ${-ORIFICE_CONTENT_CENTER.y})`;
|
||||
|
||||
function OrificeBody({
|
||||
centerY = 25,
|
||||
leftPortY = centerY,
|
||||
}: {
|
||||
centerY?: number;
|
||||
leftPortY?: number;
|
||||
}) {
|
||||
const top = centerY - 10;
|
||||
const bottom = centerY + 10;
|
||||
const leftConnector =
|
||||
leftPortY === centerY
|
||||
? `M2 ${centerY}h18`
|
||||
: `M2 ${leftPortY}h14L20 ${centerY}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
d={`${leftConnector}M44 ${centerY}h18M20 ${centerY}h24`}
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={PNEUMATIC_STROKE_WIDTH}
|
||||
/>
|
||||
<path
|
||||
d={`M20 ${top}c5 6 9 7 12 7s7-1 12-7M20 ${bottom}c5-6 9-7 12-7s7 1 12 7`}
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={PNEUMATIC_STROKE_WIDTH}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
function scaledOrificePoint(x: number, y: number) {
|
||||
return {
|
||||
x:
|
||||
ORIFICE_CONTENT_CENTER.x +
|
||||
(x - ORIFICE_CONTENT_CENTER.x) * ORIFICE_CONTENT_SCALE,
|
||||
y:
|
||||
ORIFICE_CONTENT_CENTER.y +
|
||||
(y - ORIFICE_CONTENT_CENTER.y) * ORIFICE_CONTENT_SCALE,
|
||||
};
|
||||
}
|
||||
|
||||
/** Constant-coefficient pneumatic orifice (AMESim PNOR001). */
|
||||
export function AmesimPnor001Symbol() {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-amesim-pnor001-svg" domain="pneumatic">
|
||||
<OrificeBody centerY={24} />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
export const PNVO001_PORT_ANCHORS = {
|
||||
physicalLeft: scaledOrificePoint(0, 24),
|
||||
physicalRight: scaledOrificePoint(64, 24),
|
||||
signal: scaledOrificePoint(24.25, 56),
|
||||
} as const;
|
||||
|
||||
function Pnvo001Body({
|
||||
signalControlled = false,
|
||||
}: {
|
||||
signalControlled?: boolean;
|
||||
}) {
|
||||
type OrificeControl = "none" | "fixed" | "signal";
|
||||
|
||||
function Pnvo001Body({ control }: { control: OrificeControl }) {
|
||||
return (
|
||||
<>
|
||||
<g
|
||||
data-orifice-control={control}
|
||||
data-orifice-family="pnvo001"
|
||||
transform={ORIFICE_CONTENT_TRANSFORM}
|
||||
>
|
||||
<path
|
||||
d="M0 24.5h64"
|
||||
d="M0 24H64"
|
||||
data-orifice-part="flow-path"
|
||||
stroke={PNVO001_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="2.1"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M15.5 14.4Q33.4 27 51.2 14.4M15.5 34.8Q33.2 22.4 51.2 34.8"
|
||||
d="M14.4 11Q31.7 27.5 48.7 11M14.4 38Q31.7 18.2 48.7 38"
|
||||
data-orifice-part="curves"
|
||||
stroke={PNVO001_STROKE}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3.1"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
<path
|
||||
d="M19 46.7 44.5 10"
|
||||
stroke={PNVO001_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="2.6"
|
||||
/>
|
||||
{signalControlled ? (
|
||||
{control === "none" ? null : (
|
||||
<>
|
||||
<path
|
||||
d="M16.5 54.5 42 3.5"
|
||||
data-orifice-part="opening-arrow"
|
||||
stroke={PNVO001_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M48 -8 45.8 7.9 37 2.4Z"
|
||||
data-orifice-part="opening-arrow-head"
|
||||
fill={PNVO001_STROKE}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{control === "signal" ? (
|
||||
<path
|
||||
d="M26 48V36.6l7.2 10.1"
|
||||
d="M24.25 56V39L32 54.5"
|
||||
data-orifice-part="signal-control"
|
||||
stroke={PNVO001_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2.3"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
) : null}
|
||||
<path d="M50.6 0 38.6 8.2 48 12.3Z" fill={PNVO001_STROKE} />
|
||||
</>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
/** 定系数气动孔口（AMESim PNOR001）。 */
|
||||
export function AmesimPnor001Symbol() {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-amesim-pnor001-svg" domain="pneumatic">
|
||||
<Pnvo001Body control="none" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -97,7 +99,7 @@ export function AmesimPnvo001FixedSymbol() {
|
||||
className="component-symbol-amesim-pnvo001-fixed-svg"
|
||||
domain="pneumatic"
|
||||
>
|
||||
<Pnvo001Body />
|
||||
<Pnvo001Body control="fixed" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
@@ -109,7 +111,7 @@ export function AmesimPnvo001SignalSymbol() {
|
||||
className="component-symbol-amesim-pnvo001-signal-svg"
|
||||
domain="pneumatic"
|
||||
>
|
||||
<Pnvo001Body signalControlled />
|
||||
<Pnvo001Body control="signal" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { createContext, useContext, type ReactNode } from "react";
|
||||
|
||||
import type { ComponentSymbolViewBox } from "./types";
|
||||
|
||||
export type SymbolDomain =
|
||||
| "neutral"
|
||||
@@ -11,25 +13,48 @@ type SymbolSvgProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
domain?: SymbolDomain;
|
||||
viewBox?: string;
|
||||
strokeScaling?: "independent" | "geometry";
|
||||
};
|
||||
|
||||
type SymbolViewBoxProviderProps = {
|
||||
children: ReactNode;
|
||||
viewBox: ComponentSymbolViewBox;
|
||||
};
|
||||
|
||||
const SymbolViewBoxContext = createContext("0 -8 64 64");
|
||||
|
||||
export const SYMBOL_STROKE = "var(--component-symbol-stroke, currentColor)";
|
||||
export const SYMBOL_FILL = "var(--component-symbol-fill, #ffffff)";
|
||||
export const SYMBOL_ACCENT = "var(--component-symbol-accent, currentColor)";
|
||||
export const SYMBOL_MUTED = "var(--component-symbol-muted, #64748b)";
|
||||
|
||||
/** 由图标注册表统一提供 SVG 画布，避免渲染器与接口布局分别维护 viewBox。 */
|
||||
export function SymbolViewBoxProvider({
|
||||
children,
|
||||
viewBox,
|
||||
}: SymbolViewBoxProviderProps) {
|
||||
return (
|
||||
<SymbolViewBoxContext.Provider
|
||||
value={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
|
||||
>
|
||||
{children}
|
||||
</SymbolViewBoxContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function SymbolSvg({
|
||||
children,
|
||||
className,
|
||||
domain = "neutral",
|
||||
viewBox = "0 0 64 48",
|
||||
strokeScaling = "independent",
|
||||
}: SymbolSvgProps) {
|
||||
const viewBox = useContext(SymbolViewBoxContext);
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={["component-symbol-svg", className].filter(Boolean).join(" ")}
|
||||
data-symbol-domain={domain}
|
||||
data-symbol-stroke-scaling={strokeScaling}
|
||||
fill="none"
|
||||
focusable="false"
|
||||
viewBox={viewBox}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +1,76 @@
|
||||
import {
|
||||
SYMBOL_ACCENT,
|
||||
SYMBOL_FILL,
|
||||
SYMBOL_STROKE,
|
||||
SymbolSvg,
|
||||
} from "./primitives";
|
||||
|
||||
function ChamberCore({ variable }: { variable: boolean }) {
|
||||
const PNCH012_STROKE = "#8b134f";
|
||||
const PNCH_CHAMBER_CONTENT_SCALE = 0.45;
|
||||
const PNCH_CHAMBER_CONTENT_CENTER = { x: 32, y: 24 } as const;
|
||||
const PNCH_CHAMBER_CONTENT_TRANSFORM = `translate(${PNCH_CHAMBER_CONTENT_CENTER.x} ${PNCH_CHAMBER_CONTENT_CENTER.y}) scale(${PNCH_CHAMBER_CONTENT_SCALE}) translate(${-PNCH_CHAMBER_CONTENT_CENTER.x} ${-PNCH_CHAMBER_CONTENT_CENTER.y})`;
|
||||
const PNCH_CHAMBER_LABEL_RENDERED_SIZE = 15;
|
||||
const PNCH_CHAMBER_SMALL_CANVAS_SCALE = 96 / 64;
|
||||
// SVG 字号使用 viewBox 逻辑单位；抵消 small 画布缩放后，工作区最终显示为 15px。
|
||||
const PNCH_CHAMBER_LABEL_FONT_SIZE =
|
||||
PNCH_CHAMBER_LABEL_RENDERED_SIZE / PNCH_CHAMBER_SMALL_CANVAS_SCALE;
|
||||
|
||||
function scalePnchChamberAnchor(x: number, y: number) {
|
||||
return {
|
||||
x:
|
||||
PNCH_CHAMBER_CONTENT_CENTER.x +
|
||||
(x - PNCH_CHAMBER_CONTENT_CENTER.x) * PNCH_CHAMBER_CONTENT_SCALE,
|
||||
y:
|
||||
PNCH_CHAMBER_CONTENT_CENTER.y +
|
||||
(y - PNCH_CHAMBER_CONTENT_CENTER.y) * PNCH_CHAMBER_CONTENT_SCALE,
|
||||
} as const;
|
||||
}
|
||||
|
||||
export const PNCH012_PORT_ANCHORS = {
|
||||
bottom: scalePnchChamberAnchor(32, 56),
|
||||
left: scalePnchChamberAnchor(0, 24),
|
||||
right: scalePnchChamberAnchor(64, 24),
|
||||
top: scalePnchChamberAnchor(32, -8),
|
||||
} as const;
|
||||
|
||||
export const PNCH023_PORT_ANCHORS = {
|
||||
left: PNCH012_PORT_ANCHORS.left,
|
||||
right: PNCH012_PORT_ANCHORS.right,
|
||||
} as const;
|
||||
|
||||
export function AmesimPnch023Symbol() {
|
||||
return (
|
||||
<>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="24"
|
||||
fill={SYMBOL_FILL}
|
||||
r="13"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<SymbolSvg domain="pneumatic">
|
||||
<g data-pnch023-part="symbol" transform={PNCH_CHAMBER_CONTENT_TRANSFORM}>
|
||||
<path
|
||||
d="M0 24H11M53 24H64"
|
||||
data-pnch023-part="ports"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="24"
|
||||
data-pnch023-part="chamber"
|
||||
fill={SYMBOL_FILL}
|
||||
r="21"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</g>
|
||||
<text
|
||||
data-pnch023-part="label"
|
||||
dominantBaseline="central"
|
||||
fill={SYMBOL_ACCENT}
|
||||
fill={PNCH012_STROKE}
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="13"
|
||||
fontWeight="700"
|
||||
fontSize={PNCH_CHAMBER_LABEL_FONT_SIZE}
|
||||
fontWeight="600"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="24"
|
||||
>
|
||||
Cp
|
||||
</text>
|
||||
{variable ? (
|
||||
<g
|
||||
fill="none"
|
||||
stroke={SYMBOL_ACCENT}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="m20 13-5-5m0 0h4m-4 0v4" />
|
||||
<path d="m44 13 5-5m0 0h-4m4 0v4" />
|
||||
<path d="m20 35-5 5m0 0h4m-4 0v-4" />
|
||||
<path d="m44 35 5 5m0 0h-4m4 0v-4" />
|
||||
</g>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function AmesimPnch023Symbol() {
|
||||
return (
|
||||
<SymbolSvg domain="pneumatic">
|
||||
<path d="M2 24h17M45 24h17" stroke={SYMBOL_STROKE} strokeWidth="2" />
|
||||
<ChamberCore variable={false} />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
@@ -58,12 +78,54 @@ export function AmesimPnch023Symbol() {
|
||||
export function AmesimPnch012Symbol() {
|
||||
return (
|
||||
<SymbolSvg domain="pneumatic">
|
||||
<path
|
||||
d="M2 16h17M2 32h17M45 16h17M45 32h17"
|
||||
stroke={SYMBOL_STROKE}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<ChamberCore variable />
|
||||
<g data-pnch012-part="symbol" transform={PNCH_CHAMBER_CONTENT_TRANSFORM}>
|
||||
<path
|
||||
d="M0 24H11M53 24H64M32-8V3M32 45V56"
|
||||
data-pnch012-part="ports"
|
||||
stroke={PNCH012_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="24"
|
||||
data-pnch012-part="chamber"
|
||||
fill={SYMBOL_FILL}
|
||||
r="21"
|
||||
stroke={PNCH012_STROKE}
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<g
|
||||
data-pnch012-part="volume-arrows"
|
||||
fill="none"
|
||||
stroke={PNCH012_STROKE}
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="miter"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
{[0, 90, 180, 270].map((rotation) => (
|
||||
<path
|
||||
d="M4-3 10 3M3 9H16V-4L3 9Z"
|
||||
data-pnch012-part="volume-arrow"
|
||||
key={rotation}
|
||||
transform={`rotate(${rotation} 32 24)`}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</g>
|
||||
<text
|
||||
data-pnch012-part="label"
|
||||
dominantBaseline="central"
|
||||
fill={PNCH012_STROKE}
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize={PNCH_CHAMBER_LABEL_FONT_SIZE}
|
||||
fontWeight="600"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="24"
|
||||
>
|
||||
Cp
|
||||
</text>
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,41 @@ export type ComponentSymbolPortAnchors = Partial<
|
||||
Record<"left" | "right", readonly ComponentSymbolPortAnchor[]>
|
||||
>;
|
||||
|
||||
export type ComponentSymbolSizeTier =
|
||||
| "compact"
|
||||
| "small"
|
||||
| "standard"
|
||||
| "large"
|
||||
| "custom";
|
||||
|
||||
export type ComponentSymbolViewBox = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
export type ComponentSymbolSize = {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 元件在建模区中的唯一布局来源。
|
||||
*
|
||||
* viewBox 描述 SVG 逻辑坐标，symbolSize 描述图标显示槽，nodeSize 描述
|
||||
* React Flow 实际占地。接口锚点与三者放在一起，避免调整图标后出现接口漂移。
|
||||
*/
|
||||
export type ComponentSymbolLayout = {
|
||||
tier: ComponentSymbolSizeTier;
|
||||
viewBox: ComponentSymbolViewBox;
|
||||
symbolSize: ComponentSymbolSize;
|
||||
nodeSize: ComponentSymbolSize;
|
||||
portAnchors?: ComponentSymbolPortAnchors;
|
||||
/** 仅用于识别 presentationLayoutVersion 之前保存的固定尺寸接触连接。 */
|
||||
legacyPortAnchors?: ComponentSymbolPortAnchors;
|
||||
};
|
||||
|
||||
export type ComponentSymbolParameters = Readonly<
|
||||
Record<string, number | string>
|
||||
>;
|
||||
@@ -22,4 +57,6 @@ export type ComponentSymbolRendererProps = {
|
||||
export type SymbolDefinition = {
|
||||
presentation: ComponentSymbolPresentation;
|
||||
render: ComponentType<ComponentSymbolRendererProps>;
|
||||
layout: ComponentSymbolLayout;
|
||||
variantKey?: (parameters?: ComponentSymbolParameters) => string;
|
||||
};
|
||||
+21
-37
@@ -1203,6 +1203,15 @@ textarea {
|
||||
shape-rendering: geometricPrecision;
|
||||
}
|
||||
|
||||
/*
|
||||
* 图形占比由 viewBox 或内部 transform 控制；描边宽度始终按声明值渲染。
|
||||
* 这样调整元件几何缩放时，strokeWidth 不会被连带放大或缩小。
|
||||
*/
|
||||
.component-symbol-svg[data-symbol-stroke-scaling="independent"]
|
||||
:where(path, line, polyline, polygon, rect, circle, ellipse, use, text) {
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.component-symbol-svg[data-symbol-domain="neutral"] {
|
||||
--component-symbol-stroke: #334155;
|
||||
--component-symbol-fill: #f8fafc;
|
||||
@@ -1331,36 +1340,16 @@ textarea {
|
||||
|
||||
.component-drag-preview {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
z-index: -1;
|
||||
display: grid;
|
||||
grid-template-rows: 30px 12px;
|
||||
place-items: center;
|
||||
width: 72px;
|
||||
height: 58px;
|
||||
padding: 5px 6px 4px;
|
||||
border: 1px solid #7c8998;
|
||||
border-radius: 5px;
|
||||
color: #1f2933;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.component-drag-preview .palette-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.component-drag-preview-label {
|
||||
max-width: 60px;
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
font-weight: 650;
|
||||
line-height: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.component-drag-preview > .component-symbol {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1426,13 +1415,8 @@ textarea {
|
||||
|
||||
.sim-node {
|
||||
position: relative;
|
||||
width: 132px;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
.sim-node.orientation-vertical {
|
||||
width: 84px;
|
||||
height: 132px;
|
||||
width: var(--node-frame-width, 148px);
|
||||
height: var(--node-frame-height, 128px);
|
||||
}
|
||||
|
||||
.sim-node-frame {
|
||||
@@ -1441,8 +1425,8 @@ textarea {
|
||||
left: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 132px;
|
||||
height: 84px;
|
||||
width: var(--node-frame-width, 148px);
|
||||
height: var(--node-frame-height, 128px);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 6px;
|
||||
@@ -1492,16 +1476,16 @@ textarea {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 112px;
|
||||
height: 84px;
|
||||
width: var(--node-symbol-width, 128px);
|
||||
height: var(--node-symbol-height, 128px);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.node-symbol {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 112px;
|
||||
height: 84px;
|
||||
width: var(--node-symbol-width, 128px);
|
||||
height: var(--node-symbol-height, 128px);
|
||||
place-items: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -271,3 +271,106 @@ test("仅图标模式仍可拖入氦气介质并在画布显示专用图标", as
|
||||
heliumCanvasSymbol.locator('[data-symbol-label="He"]'),
|
||||
).toHaveText("He");
|
||||
});
|
||||
|
||||
test("从组件库拖入时使用工作区图标作为待拖入预览", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page.evaluate(() => {
|
||||
const dataTransferPrototype = DataTransfer.prototype;
|
||||
const originalSetDragImage = dataTransferPrototype.setDragImage;
|
||||
dataTransferPrototype.setDragImage = function (
|
||||
this: DataTransfer,
|
||||
image: Element,
|
||||
x: number,
|
||||
y: number,
|
||||
) {
|
||||
const bounds = image.getBoundingClientRect();
|
||||
const style = window.getComputedStyle(image);
|
||||
const symbol = image.querySelector<HTMLElement>(".component-symbol");
|
||||
const svg = image.querySelector<SVGSVGElement>(".component-symbol-svg");
|
||||
(
|
||||
window as Window & {
|
||||
__componentDragPreview?: {
|
||||
backgroundColor: string;
|
||||
borderTopWidth: string;
|
||||
hasLegacyCardLabel: boolean;
|
||||
height: number;
|
||||
hotspotX: number;
|
||||
hotspotY: number;
|
||||
rootClassName: string;
|
||||
symbolClassName: string;
|
||||
viewBox: string | null;
|
||||
width: number;
|
||||
};
|
||||
}
|
||||
).__componentDragPreview = {
|
||||
backgroundColor: style.backgroundColor,
|
||||
borderTopWidth: style.borderTopWidth,
|
||||
hasLegacyCardLabel: Boolean(
|
||||
image.querySelector(".component-drag-preview-label"),
|
||||
),
|
||||
height: bounds.height,
|
||||
hotspotX: x,
|
||||
hotspotY: y,
|
||||
rootClassName: image.className,
|
||||
symbolClassName: symbol?.className ?? "",
|
||||
viewBox: svg?.getAttribute("viewBox") ?? null,
|
||||
width: bounds.width,
|
||||
};
|
||||
dataTransferPrototype.setDragImage = originalSetDragImage;
|
||||
return originalSetDragImage.call(this, image, x, y);
|
||||
};
|
||||
});
|
||||
|
||||
const heliumItem = page
|
||||
.locator("aside.palette")
|
||||
.getByRole("button", { name: "氦气介质定义", exact: true });
|
||||
const canvas = page.locator(".flow-canvas .react-flow__pane");
|
||||
await heliumItem.dragTo(canvas, {
|
||||
targetPosition: { x: 420, y: 220 },
|
||||
});
|
||||
|
||||
const preview = await page.evaluate(
|
||||
() =>
|
||||
(
|
||||
window as Window & {
|
||||
__componentDragPreview?: {
|
||||
backgroundColor: string;
|
||||
borderTopWidth: string;
|
||||
hasLegacyCardLabel: boolean;
|
||||
height: number;
|
||||
hotspotX: number;
|
||||
hotspotY: number;
|
||||
rootClassName: string;
|
||||
symbolClassName: string;
|
||||
viewBox: string | null;
|
||||
width: number;
|
||||
};
|
||||
}
|
||||
).__componentDragPreview,
|
||||
);
|
||||
expect(preview).toBeDefined();
|
||||
expect(preview!.rootClassName).toContain("component-drag-preview");
|
||||
expect(preview!.symbolClassName).toContain("component-symbol-canvas");
|
||||
expect(preview!.symbolClassName).not.toContain("component-symbol-palette");
|
||||
expect(preview!.hasLegacyCardLabel).toBe(false);
|
||||
expect(preview!.borderTopWidth).toBe("0px");
|
||||
expect(preview!.backgroundColor).toBe("rgba(0, 0, 0, 0)");
|
||||
expect(Math.abs(preview!.hotspotX - preview!.width / 2)).toBeLessThanOrEqual(0.5);
|
||||
expect(Math.abs(preview!.hotspotY - preview!.height / 2)).toBeLessThanOrEqual(0.5);
|
||||
|
||||
const heliumNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_helium_medium_1"]',
|
||||
);
|
||||
const nodeBounds = await heliumNode.boundingBox();
|
||||
expect(nodeBounds).not.toBeNull();
|
||||
expect(preview!.width).toBeCloseTo(nodeBounds!.width, 1);
|
||||
expect(preview!.height).toBeCloseTo(nodeBounds!.height, 1);
|
||||
await expect
|
||||
.poll(() =>
|
||||
heliumNode
|
||||
.locator(".component-symbol-canvas .component-symbol-svg")
|
||||
.getAttribute("viewBox"),
|
||||
)
|
||||
.toBe(preview!.viewBox);
|
||||
await expect(page.locator("body > .component-drag-preview")).toHaveCount(0);
|
||||
});
|
||||
@@ -66,5 +66,39 @@ class ReactFlowProjectMediumReferenceVersionTests(unittest.TestCase):
|
||||
self.assertIn('<Parameter name="property_model" value="0.0"', xml)
|
||||
|
||||
|
||||
class ReactFlowPresentationLayoutVersionTests(unittest.TestCase):
|
||||
def test_layout_version_is_preserved_but_not_written_to_xml(self) -> None:
|
||||
project = ReactFlowProjectPayload(
|
||||
name="versioned-presentation-layout",
|
||||
presentationLayoutVersion=1,
|
||||
)
|
||||
|
||||
self.assertEqual(project.presentationLayoutVersion, 1)
|
||||
self.assertEqual(
|
||||
pydantic_to_jsonable(project)["presentationLayoutVersion"],
|
||||
1,
|
||||
)
|
||||
xml = build_reactflow_system_xml(project).decode("utf-8")
|
||||
self.assertNotIn("presentationLayoutVersion", xml)
|
||||
|
||||
def test_layout_version_rejects_unsupported_values(self) -> None:
|
||||
for version in (0, 2, -1, "1"):
|
||||
with self.subTest(version=version):
|
||||
with self.assertRaises(ValueError):
|
||||
ReactFlowProjectPayload(
|
||||
name="unsupported-presentation-layout",
|
||||
presentationLayoutVersion=version,
|
||||
)
|
||||
|
||||
def test_legacy_layout_version_remains_missing(self) -> None:
|
||||
project = ReactFlowProjectPayload(name="legacy-presentation-layout")
|
||||
|
||||
self.assertIsNone(project.presentationLayoutVersion)
|
||||
self.assertNotIn(
|
||||
"presentationLayoutVersion",
|
||||
pydantic_to_jsonable(project),
|
||||
)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
Reference in new issue
Block a user