lujingze/SystemSimulationApp
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化仿真求解性能并修复流量闭合问题（初版）

Browse Source
This commit is contained in:
ljz committed 2026-08-16 17:46:05 +08:00
1 parent 57b459bc72
commit 5332a788f3
55 files changed
+8973 -549
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+987 -262
View File
File diff suppressed because it is too large. Load diff
frontend/src/CanvasGridBackground.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Background, BackgroundVariant } from "@xyflow/react";
export const CANVAS_GRID_SIZE = 18;
export type CanvasGridVisibility = {
lines: boolean;
dots: boolean;
};
type CanvasGridBackgroundProps = {
visibility: CanvasGridVisibility;
};
export function CanvasGridBackground({
visibility,
}: CanvasGridBackgroundProps) {
return (
<>
{visibility.lines ? (
<Background
color="#d6e0ea"
gap={CANVAS_GRID_SIZE * 5}
id="major-grid-lines"
lineWidth={1}
variant={BackgroundVariant.Lines}
/>
) : null}
{visibility.dots ? (
<Background
color="#c4d0dd"
gap={CANVAS_GRID_SIZE}
id="minor-grid-dots"
size={1}
variant={BackgroundVariant.Dots}
/>
) : null}
</>
);
}
frontend/src/ComponentSymbol.tsx
+5 -2
View File
@@ -1,4 +1,4 @@
import { useLayoutEffect, useRef, useState } from "react";
import { memo, useLayoutEffect, useRef, useState } from "react";
import {
AmesimPnpl01Symbol,
@@ -665,7 +665,7 @@ export function componentSymbolVariantKey(
return definition.variantKey?.(parameters) ?? "";
}
export function ComponentSymbol({
function ComponentSymbolImpl({
symbol,
surface,
className,
@@ -752,3 +752,6 @@ export function ComponentSymbol({
</span>
);
}
export const ComponentSymbol = memo(ComponentSymbolImpl);
ComponentSymbol.displayName = "ComponentSymbol";
frontend/src/SimulationResultsView.tsx
+37 -8
View File
@@ -20,15 +20,19 @@ import {
X,
} from "lucide-react";
import {
Background,
ConnectionLineType,
ConnectionMode,
Controls,
ReactFlow,
useReactFlow,
type Edge,
type Node,
type NodeTypes,
} from "@xyflow/react";
import {
CanvasGridBackground,
type CanvasGridVisibility,
} from "./CanvasGridBackground";
import { hasComponentSymbol } from "./ComponentSymbol";
import {
WorkspaceViewTabs,
type WorkspaceView,
@@ -52,6 +56,7 @@ type ResultNodeData = {
label: string;
componentType: string;
modelType: string;
symbol?: string;
ports: ResultPortDefinition[];
parameters: Record<string, number | string>;
parameterUnits?: Record<string, string>;
@@ -170,6 +175,7 @@ type SimulationResultFile = {
type SimulationResultsViewProps = {
snapshot: SimulationResultsSnapshot;
gridVisibility: CanvasGridVisibility;
nodeTypes: NodeTypes;
onViewChange: (view: WorkspaceView) => void;
onSnapshotLoad: (snapshot: SimulationResultsSnapshot) => void;
@@ -335,10 +341,12 @@ const RESULT_UNIT_OPTIONS: Record<string, ResultUnitOption[]> = {
export function SimulationResultsView({
snapshot,
gridVisibility,
nodeTypes,
onViewChange,
onSnapshotLoad,
}: SimulationResultsViewProps) {
const reactFlow = useReactFlow();
const resultStatus = simulationResultStatus(snapshot.result);
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(
snapshot.project.nodes[0]?.id ?? null,
@@ -467,7 +475,15 @@ export function SimulationResultsView({
() =>
snapshot.project.nodes.map((node) => ({
...node,
className: "results-readonly-node",
className: [
"results-readonly-node",
hasComponentSymbol(node.data.symbol ?? node.data.componentType) ||
hasComponentSymbol(node.data.modelType)
? "component-icon-node"
: "",
]
.filter(Boolean)
.join(" "),
connectable: false,
draggable: false,
focusable: true,
@@ -1134,7 +1150,23 @@ export function SimulationResultsView({
<section className="results-system-panel">
<div className="results-section-heading">
<strong>系统图</strong>
<span>{snapshot.project.nodes.length} 个组件</span>
<div className="results-system-heading-tools">
<span>{snapshot.project.nodes.length} 个组件</span>
<button
aria-label="适应系统图窗口"
onClick={() => {
void reactFlow.fitView({
duration: 180,
minZoom: 0.1,
padding: 0.18,
});
}}
title="适应窗口"
type="button"
>
<Scaling aria-hidden="true" size={14} strokeWidth={1.8} />
</button>
</div>
</div>
<div className="results-system-canvas">
<ReactFlow
@@ -1166,10 +1198,7 @@ export function SimulationResultsView({
fitOnMount
requestKey={snapshot.id}
/>
<Background gap={18} />
<Controls
fitViewOptions={{ duration: 180, minZoom: 0.1, padding: 0.18 }}
/>
<CanvasGridBackground visibility={gridVisibility} />
</ReactFlow>
</div>
</section>
frontend/src/styles.css
+38
View File
@@ -2138,6 +2138,32 @@ textarea {
font-size: 11px;
}
.results-system-heading-tools {
display: flex;
align-items: center;
gap: 8px;
}
.results-system-heading-tools button {
display: grid;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
place-items: center;
color: #526172;
background: transparent;
cursor: pointer;
}
.results-system-heading-tools button:hover,
.results-system-heading-tools button:focus-visible {
border-color: #c5cfda;
color: #1d6fb8;
background: #ffffff;
}
.results-chart-heading {
position: relative;
z-index: 25;
@@ -2265,6 +2291,18 @@ textarea {
cursor: pointer;
}
.results-system-canvas .react-flow__node.component-icon-node,
.results-system-canvas .react-flow__node.component-icon-node .sim-node {
pointer-events: none !important;
}
.results-system-canvas
.react-flow__node.component-icon-node
.node-symbol-envelope {
cursor: pointer;
pointer-events: auto;
}
.results-system-canvas .react-flow__handle {
cursor: default;
pointer-events: none;
frontend/tests/e2e/component-symbols.spec.ts
+35
View File
@@ -2902,6 +2902,8 @@ test("恢复工程时采用当前目录端口并明确丢弃已删除端口的
test("AMESim canvas nodes use icon anchors and highlight only compatible free ports", async ({
page,
}) => {
const pageErrors: string[] = [];
page.on("pageerror", (error) => pageErrors.push(error.message));
await page.goto("/");
const firstOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
@@ -3214,6 +3216,39 @@ test("AMESim canvas nodes use icon anchors and highlight only compatible free po
await expect(signalInput).toHaveCSS("opacity", "0");
await expect(signalOutput).toHaveCSS("pointer-events", "none");
await expect(signalInput).toHaveCSS("pointer-events", "none");
const renderedEdges = page.locator(".flow-canvas .react-flow__edge");
const clickEdgeMiddle = async (edgeIndex: number) => {
const point = await renderedEdges
.nth(edgeIndex)
.locator(".react-flow__edge-interaction")
.evaluate((path: SVGPathElement) => {
const localPoint = path.getPointAtLength(path.getTotalLength() / 2);
const matrix = path.getScreenCTM();
if (!matrix) {
throw new Error("Unable to resolve the edge screen position");
}
const screenPoint = new DOMPoint(
localPoint.x,
localPoint.y,
).matrixTransform(matrix);
return { x: screenPoint.x, y: screenPoint.y };
});
await page.mouse.click(point.x, point.y);
};
await clickEdgeMiddle(0);
await expect(renderedEdges).toHaveCount(2);
await expect(renderedEdges.nth(0)).toHaveClass(
/selected|editor-edge-selected/,
);
await clickEdgeMiddle(1);
await expect(renderedEdges).toHaveCount(2);
await expect(renderedEdges.nth(1)).toHaveClass(
/selected|editor-edge-selected/,
);
await expect(page.getByText("System Simulation Flow", { exact: true })).toBeVisible();
expect(pageErrors).toEqual([]);
});
test("端口图标随画布缩小且物理端口始终保持标准圆形", async ({ page }) => {
frontend/tests/e2e/fit-view.spec.ts
+231 -2
View File
@@ -6,9 +6,9 @@ import {
wideProject,
} from "./fixtures";
async function readModelingViewport(page: Page) {
async function readViewport(page: Page, canvasSelector: string) {
return page
.locator(".flow-canvas .react-flow__viewport")
.locator(`${canvasSelector} .react-flow__viewport`)
.evaluate((viewport) => {
const values =
getComputedStyle(viewport)
@@ -22,6 +22,10 @@ async function readModelingViewport(page: Page) {
});
}
async function readModelingViewport(page: Page) {
return readViewport(page, ".flow-canvas");
}
test("拖入组件不自动适配画布，手动适配按钮仍然生效", async ({ page }) => {
await prepareApp(page);
await page.goto("/");
@@ -257,10 +261,24 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
"system-simulation-flow:project:demo-system",
JSON.stringify(project),
);
window.localStorage.setItem(
"system-simulation-flow:canvas-grid-visibility",
JSON.stringify({ lines: true, dots: false }),
);
}, { project: wideProject, snapshot: resultSnapshot });
await page.goto("/");
await page.getByRole("button", { name: "加载工程" }).click();
await expect(
page.locator(
'.flow-canvas .react-flow__background pattern[id$="major-grid-lines"]',
),
).toHaveCount(1);
await expect(
page.locator(
'.flow-canvas .react-flow__background pattern[id$="minor-grid-dots"]',
),
).toHaveCount(0);
const freeModelingHandle = page.locator(
'.flow-canvas .react-flow__node[data-id="generic_sensor_1"] .port-handle[data-port-name="port_a"]',
);
@@ -271,6 +289,24 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
);
await page.getByRole("tab", { name: /^结果/ }).click();
await expectAllNodesInsideCanvas(page, ".results-system-canvas");
await expect(
page.locator(
'.results-system-canvas .react-flow__background pattern[id$="major-grid-lines"]',
),
).toHaveCount(1);
await expect(
page.locator(
'.results-system-canvas .react-flow__background pattern[id$="minor-grid-dots"]',
),
).toHaveCount(0);
await expect(
page.locator(".results-system-canvas .react-flow__controls"),
).toHaveCount(0);
const fitSystemViewButton = page.getByRole("button", {
name: "适应系统图窗口",
exact: true,
});
await expect(fitSystemViewButton).toBeVisible();
await expect(
page.locator(".results-system-canvas .react-flow__attribution"),
).toHaveCount(0);
@@ -278,6 +314,49 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
page.getByRole("complementary", { name: "仿真控制台", exact: true }),
).toHaveCount(0);
const resultPane = page.locator(".results-system-canvas .react-flow__pane");
const resultPaneBox = await resultPane.boundingBox();
expect(resultPaneBox).not.toBeNull();
const fittedResultViewport = await readViewport(
page,
".results-system-canvas",
);
await page.mouse.move(
resultPaneBox!.x + resultPaneBox!.width / 2,
resultPaneBox!.y + resultPaneBox!.height / 2,
);
await page.mouse.down();
await page.mouse.move(
resultPaneBox!.x + resultPaneBox!.width / 2 + 180,
resultPaneBox!.y + resultPaneBox!.height / 2 + 90,
{ steps: 5 },
);
await page.mouse.up();
await expect
.poll(async () => {
const viewport = await readViewport(page, ".results-system-canvas");
return Math.hypot(
viewport.x - fittedResultViewport.x,
viewport.y - fittedResultViewport.y,
);
})
.toBeGreaterThan(100);
const pannedResultViewport = await readViewport(
page,
".results-system-canvas",
);
await fitSystemViewButton.click();
await expect
.poll(async () => {
const viewport = await readViewport(page, ".results-system-canvas");
return Math.hypot(
viewport.x - pannedResultViewport.x,
viewport.y - pannedResultViewport.y,
);
})
.toBeGreaterThan(100);
await expectAllNodesInsideCanvas(page, ".results-system-canvas");
await page.getByRole("tab", { name: "建模" }).click();
await expectAllNodesInsideCanvas(page, ".flow-canvas");
await expect(freeModelingHandle).toHaveAttribute(
@@ -354,3 +433,153 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
expect(shape.circle).toEqual({ cx: 3, cy: 3, r: 2.5 });
}
});
test("结果页专用图标只按实际包络命中被相邻节点包围的元件", async ({
page,
}) => {
await prepareApp(page);
const pneumaticPort = (name: string, side: "left" | "right") => ({
name,
kind: "physical",
domain: "pneumatic",
nominalRole: "bidirectional",
positiveFlowDirection: "intoComponent",
side,
});
const pnplNode = (
id: string,
position: { x: number; y: number },
rotation: 0 | 90 | 180 | 270,
) => ({
id,
type: "simulationComponent",
position,
data: {
label: id,
componentType: "amesim_pnpl01",
modelType: "amesim_pnpl01",
modelVersion: "0.1.0",
ports: [pneumaticPort("port_1", "left")],
parameters: {},
parameterUnits: {},
parameterScientificNotation: {},
rotation,
mirrored: false,
},
});
const targetNodeId = "amesim_pnch012_2";
const overlapProject = {
...wideProject,
name: "overlapped-symbols",
nodes: [
{
id: "generic_sensor_0",
type: "simulationComponent",
position: { x: 360, y: 390 },
data: {
label: "generic_sensor_0",
componentType: "generic_sensor",
modelType: "generic_sensor",
modelVersion: "1.0.0",
symbol: "symbol-not-registered",
ports: [],
parameters: {},
parameterUnits: {},
parameterScientificNotation: {},
rotation: 0,
mirrored: false,
},
},
{
id: targetNodeId,
type: "simulationComponent",
position: { x: 569.2129060235693, y: 515.6448805401301 },
data: {
label: targetNodeId,
componentType: "amesim_pnch012",
modelType: "amesim_pnch012",
modelVersion: "0.1.0",
ports: [
pneumaticPort("port_1", "left"),
pneumaticPort("port_2", "right"),
pneumaticPort("port_3", "left"),
pneumaticPort("port_4", "right"),
],
parameters: {},
parameterUnits: {},
parameterScientificNotation: {},
rotation: 0,
mirrored: false,
},
},
pnplNode(
"amesim_pnpl01_7",
{ x: 535.6129060235693, y: 523.6448805401301 },
180,
),
pnplNode(
"amesim_pnpl01_8",
{ x: 587.2129060235693, y: 555.2448805401301 },
90,
),
pnplNode(
"amesim_pnpl01_9",
{ x: 618.8129060235693, y: 523.6448805401301 },
0,
),
],
edges: [],
};
const overlapSnapshot = {
...resultSnapshot,
id: "overlapped-symbols-result",
project: overlapProject,
};
await page.addInitScript((snapshot) => {
window.sessionStorage.setItem(
"system-simulation-flow:latest-result",
JSON.stringify(snapshot),
);
}, overlapSnapshot);
await page.goto("/");
await page.getByRole("tab", { name: /^结果/ }).click();
await expectAllNodesInsideCanvas(
page,
".results-system-canvas",
overlapProject.nodes.length,
);
const targetNode = page.locator(
`.results-system-canvas .react-flow__node[data-id="${targetNodeId}"]`,
);
const targetEnvelope = targetNode.locator('[data-symbol-envelope="true"]');
await expect(targetNode).toHaveClass(/component-icon-node/);
await expect(targetNode).toHaveCSS("pointer-events", "none");
await expect(targetEnvelope).toHaveCSS("pointer-events", "auto");
const pane = page.locator(".results-system-canvas .react-flow__pane");
const paneBox = await pane.boundingBox();
expect(paneBox).not.toBeNull();
await page.mouse.click(paneBox!.x + 6, paneBox!.y + 6);
await expect(targetNode).not.toHaveClass(/selected/);
const envelopeBox = await targetEnvelope.boundingBox();
expect(envelopeBox).not.toBeNull();
const targetPoint = {
x: envelopeBox!.x + envelopeBox!.width / 2,
y: envelopeBox!.y + envelopeBox!.height / 2,
};
const hitNodeId = await page.evaluate(({ x, y }) => {
const element = document.elementFromPoint(x, y);
return element?.closest<HTMLElement>(".react-flow__node")?.dataset.id ?? null;
}, targetPoint);
expect(hitNodeId).toBe(targetNodeId);
await page.mouse.click(targetPoint.x, targetPoint.y);
await expect(targetNode).toHaveClass(/selected/);
await expect(
page.locator(
'.results-system-canvas .react-flow__node[data-id^="amesim_pnpl01_"].selected',
),
).toHaveCount(0);
});