feat: integrate AMESim media models and editor UI
This commit is contained in:
ljz committed
1 parent
3e4f466114
commit
e7177ab03e
181 files changed
+7042
-25270
No files matched your search
+1438
-220
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,235 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export type ComponentSymbolSurface = "palette" | "canvas";
|
||||
export type ComponentSymbolPresentation = "framed" | "bare";
|
||||
|
||||
type ComponentSymbolProps = {
|
||||
symbol: string;
|
||||
surface: ComponentSymbolSurface;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type SymbolDefinition = {
|
||||
presentation: ComponentSymbolPresentation;
|
||||
render: () => ReactNode;
|
||||
};
|
||||
|
||||
type SymbolSvgProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function SymbolSvg({ children, className }: SymbolSvgProps) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={["component-symbol-svg", className].filter(Boolean).join(" ")}
|
||||
fill="none"
|
||||
focusable="false"
|
||||
viewBox="0 0 64 48"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function CylinderSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M3 24h7M54 24h7" stroke="currentColor" strokeWidth="2" />
|
||||
<rect
|
||||
fill="#dbeafe"
|
||||
height="26"
|
||||
rx="11"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
width="44"
|
||||
x="10"
|
||||
y="11"
|
||||
/>
|
||||
<path d="M33 12v24M33 24h21" stroke="currentColor" strokeWidth="2" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function TankSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M32 2v5M32 41v5" stroke="currentColor" strokeWidth="2" />
|
||||
<path
|
||||
d="M16 13c0-4 7.2-7 16-7s16 3 16 7v22c0 4-7.2 7-16 7s-16-3-16-7V13Z"
|
||||
fill="#dcfce7"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path d="M16 13c0 4 7.2 7 16 7s16-3 16-7" stroke="currentColor" strokeWidth="2" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function PipeSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 19h60M2 29h60" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M9 17v14M55 17v14" stroke="currentColor" strokeWidth="2" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function OrificeSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 24h18M44 24h18" stroke="currentColor" strokeWidth="2" />
|
||||
<path
|
||||
d="m19 9 13 15-13 15V9ZM45 9 32 24l13 15V9Z"
|
||||
fill="#ffedd5"
|
||||
stroke="currentColor"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function TeeSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 27h60M32 27V3" stroke="currentColor" strokeWidth="8" />
|
||||
<path d="M2 27h60M32 27V3" stroke="#f8fafc" strokeWidth="4" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function GenericSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 24h9M53 24h9" stroke="currentColor" strokeWidth="2" />
|
||||
<rect
|
||||
fill="#f8fafc"
|
||||
height="30"
|
||||
rx="3"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
width="42"
|
||||
x="11"
|
||||
y="9"
|
||||
/>
|
||||
<path d="m23 30 18-12M23 18h18v12" stroke="currentColor" strokeWidth="1.5" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function SignalSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 24h8M54 24h8" stroke="currentColor" strokeWidth="2" />
|
||||
<circle cx="32" cy="24" fill="#f8fafc" r="22" stroke="currentColor" strokeWidth="2" />
|
||||
<path
|
||||
d="M16 25c4-13 8-13 12 0s8 13 12 0 6-10 8-4"
|
||||
stroke="#2563eb"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function JunctionSymbol() {
|
||||
return (
|
||||
<SymbolSvg>
|
||||
<path d="M2 24h60M32 2v44" stroke="currentColor" strokeWidth="2" />
|
||||
<circle cx="32" cy="24" fill="currentColor" r="5" />
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
function MediumSymbol({ label }: { label: "Air" | "He" }) {
|
||||
return (
|
||||
<SymbolSvg className="component-symbol-medium-svg">
|
||||
<circle cx="32" cy="24" fill="#ffffff" r="22" stroke="#c026d3" strokeWidth="2" />
|
||||
<text
|
||||
className="component-symbol-medium-label"
|
||||
data-symbol-label={label}
|
||||
dominantBaseline="central"
|
||||
fill="#a21caf"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize={label === "Air" ? 12 : 16}
|
||||
fontWeight="500"
|
||||
textAnchor="middle"
|
||||
x="32"
|
||||
y="24"
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
</SymbolSvg>
|
||||
);
|
||||
}
|
||||
|
||||
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_ideal_air_medium: {
|
||||
presentation: "bare",
|
||||
render: () => <MediumSymbol label="Air" />,
|
||||
},
|
||||
amesim_helium_medium: {
|
||||
presentation: "bare",
|
||||
render: () => <MediumSymbol label="He" />,
|
||||
},
|
||||
} satisfies Record<string, SymbolDefinition>;
|
||||
|
||||
type RegisteredComponentSymbol = keyof typeof symbolRegistry;
|
||||
|
||||
function isRegisteredComponentSymbol(symbol: string): symbol is RegisteredComponentSymbol {
|
||||
return Object.prototype.hasOwnProperty.call(symbolRegistry, symbol);
|
||||
}
|
||||
|
||||
export function hasComponentSymbol(symbol: string): boolean {
|
||||
return isRegisteredComponentSymbol(symbol);
|
||||
}
|
||||
|
||||
export function componentSymbolPresentation(
|
||||
symbol: string,
|
||||
): ComponentSymbolPresentation {
|
||||
return isRegisteredComponentSymbol(symbol)
|
||||
? symbolRegistry[symbol].presentation
|
||||
: "framed";
|
||||
}
|
||||
|
||||
export function ComponentSymbol({
|
||||
symbol,
|
||||
surface,
|
||||
className,
|
||||
}: ComponentSymbolProps) {
|
||||
const resolvedSymbol: RegisteredComponentSymbol = isRegisteredComponentSymbol(symbol)
|
||||
? symbol
|
||||
: "generic";
|
||||
const definition = symbolRegistry[resolvedSymbol];
|
||||
const rootClassName = [
|
||||
"component-symbol",
|
||||
`component-symbol-${surface}`,
|
||||
`component-symbol-${resolvedSymbol}`,
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={rootClassName}
|
||||
data-component-symbol={resolvedSymbol}
|
||||
data-symbol-presentation={definition.presentation}
|
||||
>
|
||||
{definition.render()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,484 @@
|
||||
import {
|
||||
Fragment,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import type {
|
||||
CSSProperties,
|
||||
FocusEvent as ReactFocusEvent,
|
||||
KeyboardEvent as ReactKeyboardEvent,
|
||||
MouseEvent as ReactMouseEvent,
|
||||
PointerEvent as ReactPointerEvent,
|
||||
ReactNode,
|
||||
} from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
export type ParameterColumnLayout = {
|
||||
nameWidth: number;
|
||||
unitWidth: number;
|
||||
};
|
||||
|
||||
export type ParameterTableRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
value: ReactNode;
|
||||
unit?: ReactNode;
|
||||
help?: string;
|
||||
error?: string;
|
||||
readOnly?: boolean;
|
||||
description?: string;
|
||||
defaultValue?: string;
|
||||
range?: string;
|
||||
currentUnit?: string;
|
||||
};
|
||||
|
||||
type ParameterTableProps = {
|
||||
ariaLabel: string;
|
||||
rows: readonly ParameterTableRow[];
|
||||
columnLayout: ParameterColumnLayout;
|
||||
availableWidth: number;
|
||||
onColumnLayoutChange: (layout: ParameterColumnLayout) => void;
|
||||
};
|
||||
|
||||
type ColumnName = "name" | "unit";
|
||||
|
||||
type ColumnDragState = {
|
||||
column: ColumnName;
|
||||
pointerId: number;
|
||||
startX: number;
|
||||
startLayout: ParameterColumnLayout;
|
||||
};
|
||||
|
||||
type HelpPreviewState = {
|
||||
rowId: string;
|
||||
left: number;
|
||||
top: number;
|
||||
transform: string;
|
||||
};
|
||||
|
||||
type HelpPreviewAnchor = {
|
||||
rowId: string;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
};
|
||||
|
||||
export const PARAMETER_COLUMN_LAYOUT_KEY =
|
||||
"system-simulation-flow:parameter-column-layout";
|
||||
|
||||
export const DEFAULT_PARAMETER_COLUMN_LAYOUT: ParameterColumnLayout = {
|
||||
nameWidth: 112,
|
||||
unitWidth: 72,
|
||||
};
|
||||
|
||||
const MIN_NAME_WIDTH = 80;
|
||||
const MAX_NAME_WIDTH = 220;
|
||||
const MIN_VALUE_WIDTH = 96;
|
||||
const MIN_UNIT_WIDTH = 48;
|
||||
const MAX_UNIT_WIDTH = 112;
|
||||
const COLUMN_KEYBOARD_STEP = 8;
|
||||
const HELP_PREVIEW_DELAY_MS = 500;
|
||||
const HELP_PREVIEW_GAP = 12;
|
||||
const HELP_PREVIEW_MARGIN = 8;
|
||||
const HELP_PREVIEW_MAX_WIDTH = 300;
|
||||
const HELP_PREVIEW_ESTIMATED_HEIGHT = 156;
|
||||
|
||||
function boundedWidth(value: number, minimum: number, maximum: number) {
|
||||
return Math.min(maximum, Math.max(minimum, value));
|
||||
}
|
||||
|
||||
export function loadParameterColumnLayout(): ParameterColumnLayout {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
localStorage.getItem(PARAMETER_COLUMN_LAYOUT_KEY) ?? "null",
|
||||
) as Partial<ParameterColumnLayout> | null;
|
||||
if (
|
||||
!parsed ||
|
||||
!Number.isFinite(parsed.nameWidth) ||
|
||||
!Number.isFinite(parsed.unitWidth)
|
||||
) {
|
||||
return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
|
||||
}
|
||||
return {
|
||||
nameWidth: boundedWidth(Number(parsed.nameWidth), MIN_NAME_WIDTH, MAX_NAME_WIDTH),
|
||||
unitWidth: boundedWidth(Number(parsed.unitWidth), MIN_UNIT_WIDTH, MAX_UNIT_WIDTH),
|
||||
};
|
||||
} catch {
|
||||
return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
|
||||
}
|
||||
}
|
||||
|
||||
export function saveParameterColumnLayout(layout: ParameterColumnLayout) {
|
||||
try {
|
||||
localStorage.setItem(PARAMETER_COLUMN_LAYOUT_KEY, JSON.stringify(layout));
|
||||
} catch {
|
||||
// Column resizing remains available when browser storage is unavailable.
|
||||
}
|
||||
}
|
||||
|
||||
function effectiveColumnLayout(
|
||||
preferred: ParameterColumnLayout,
|
||||
availableWidth: number,
|
||||
): ParameterColumnLayout {
|
||||
const usableWidth = Number.isFinite(availableWidth)
|
||||
? Math.max(MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH, availableWidth)
|
||||
: MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH;
|
||||
let nameWidth = boundedWidth(preferred.nameWidth, MIN_NAME_WIDTH, MAX_NAME_WIDTH);
|
||||
let unitWidth = boundedWidth(preferred.unitWidth, MIN_UNIT_WIDTH, MAX_UNIT_WIDTH);
|
||||
let overflow = nameWidth + MIN_VALUE_WIDTH + unitWidth - usableWidth;
|
||||
if (overflow > 0) {
|
||||
const unitReduction = Math.min(overflow, unitWidth - MIN_UNIT_WIDTH);
|
||||
unitWidth -= unitReduction;
|
||||
overflow -= unitReduction;
|
||||
}
|
||||
if (overflow > 0) {
|
||||
nameWidth -= Math.min(overflow, nameWidth - MIN_NAME_WIDTH);
|
||||
}
|
||||
return { nameWidth, unitWidth };
|
||||
}
|
||||
|
||||
function rowHasHelpPreview(row: ParameterTableRow) {
|
||||
return Boolean(
|
||||
row.description ||
|
||||
(typeof row.help === "string" && row.help) ||
|
||||
row.defaultValue ||
|
||||
row.range ||
|
||||
row.currentUnit,
|
||||
);
|
||||
}
|
||||
|
||||
function helpPreviewPosition(clientX: number, clientY: number) {
|
||||
const placeOnRight =
|
||||
clientX + HELP_PREVIEW_GAP + HELP_PREVIEW_MAX_WIDTH <=
|
||||
window.innerWidth - HELP_PREVIEW_MARGIN;
|
||||
const placeBelow =
|
||||
clientY + HELP_PREVIEW_GAP + HELP_PREVIEW_ESTIMATED_HEIGHT <=
|
||||
window.innerHeight - HELP_PREVIEW_MARGIN;
|
||||
return {
|
||||
left: clientX + (placeOnRight ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
|
||||
top: clientY + (placeBelow ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
|
||||
transform: `translate(${placeOnRight ? "0" : "-100%"}, ${
|
||||
placeBelow ? "0" : "-100%"
|
||||
})`,
|
||||
};
|
||||
}
|
||||
|
||||
export function ParameterTable({
|
||||
ariaLabel,
|
||||
rows,
|
||||
columnLayout,
|
||||
availableWidth,
|
||||
onColumnLayoutChange,
|
||||
}: ParameterTableProps) {
|
||||
const effectiveLayout = effectiveColumnLayout(columnLayout, availableWidth);
|
||||
const columnDragRef = useRef<ColumnDragState | null>(null);
|
||||
const helpPreviewTimerRef = useRef<number | null>(null);
|
||||
const helpPreviewAnchorRef = useRef<HelpPreviewAnchor | null>(null);
|
||||
const [activeColumnResize, setActiveColumnResize] =
|
||||
useState<ColumnName | null>(null);
|
||||
const [helpPreview, setHelpPreview] = useState<HelpPreviewState | null>(null);
|
||||
|
||||
const dismissHelpPreview = useCallback(() => {
|
||||
if (helpPreviewTimerRef.current !== null) {
|
||||
window.clearTimeout(helpPreviewTimerRef.current);
|
||||
helpPreviewTimerRef.current = null;
|
||||
}
|
||||
helpPreviewAnchorRef.current = null;
|
||||
setHelpPreview(null);
|
||||
}, []);
|
||||
|
||||
const scheduleHelpPreview = useCallback(
|
||||
(
|
||||
target: HTMLElement,
|
||||
row: ParameterTableRow,
|
||||
pointer?: { clientX: number; clientY: number },
|
||||
) => {
|
||||
dismissHelpPreview();
|
||||
if (!rowHasHelpPreview(row)) {
|
||||
return;
|
||||
}
|
||||
const bounds = target.getBoundingClientRect();
|
||||
const fallbackAnchor = {
|
||||
clientX: bounds.left + bounds.width / 2,
|
||||
clientY: bounds.top + bounds.height / 2,
|
||||
};
|
||||
helpPreviewAnchorRef.current = {
|
||||
rowId: row.id,
|
||||
...(pointer ?? fallbackAnchor),
|
||||
};
|
||||
helpPreviewTimerRef.current = window.setTimeout(() => {
|
||||
helpPreviewTimerRef.current = null;
|
||||
const anchor =
|
||||
helpPreviewAnchorRef.current?.rowId === row.id
|
||||
? helpPreviewAnchorRef.current
|
||||
: { rowId: row.id, ...fallbackAnchor };
|
||||
setHelpPreview({
|
||||
rowId: row.id,
|
||||
...helpPreviewPosition(anchor.clientX, anchor.clientY),
|
||||
});
|
||||
}, HELP_PREVIEW_DELAY_MS);
|
||||
},
|
||||
[dismissHelpPreview],
|
||||
);
|
||||
|
||||
const trackHelpPointer = (
|
||||
event: ReactMouseEvent<HTMLTableRowElement>,
|
||||
row: ParameterTableRow,
|
||||
) => {
|
||||
helpPreviewAnchorRef.current = {
|
||||
rowId: row.id,
|
||||
clientX: event.clientX,
|
||||
clientY: event.clientY,
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const dismissOnViewportChange = () => dismissHelpPreview();
|
||||
window.addEventListener("scroll", dismissOnViewportChange, true);
|
||||
window.addEventListener("resize", dismissOnViewportChange);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", dismissOnViewportChange, true);
|
||||
window.removeEventListener("resize", dismissOnViewportChange);
|
||||
if (helpPreviewTimerRef.current !== null) {
|
||||
window.clearTimeout(helpPreviewTimerRef.current);
|
||||
helpPreviewTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [dismissHelpPreview]);
|
||||
|
||||
const changeColumnLayout = (
|
||||
column: ColumnName,
|
||||
boundaryDelta: number,
|
||||
startLayout = effectiveLayout,
|
||||
) => {
|
||||
const proposed =
|
||||
column === "name"
|
||||
? { ...startLayout, nameWidth: startLayout.nameWidth + boundaryDelta }
|
||||
: { ...startLayout, unitWidth: startLayout.unitWidth - boundaryDelta };
|
||||
onColumnLayoutChange(effectiveColumnLayout(proposed, availableWidth));
|
||||
};
|
||||
|
||||
const startColumnResize = (
|
||||
event: ReactPointerEvent<HTMLDivElement>,
|
||||
column: ColumnName,
|
||||
) => {
|
||||
dismissHelpPreview();
|
||||
event.preventDefault();
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
columnDragRef.current = {
|
||||
column,
|
||||
pointerId: event.pointerId,
|
||||
startX: event.clientX,
|
||||
startLayout: effectiveLayout,
|
||||
};
|
||||
setActiveColumnResize(column);
|
||||
};
|
||||
|
||||
const moveColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const drag = columnDragRef.current;
|
||||
if (!drag || drag.pointerId !== event.pointerId) {
|
||||
return;
|
||||
}
|
||||
changeColumnLayout(drag.column, event.clientX - drag.startX, drag.startLayout);
|
||||
};
|
||||
|
||||
const stopColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
if (columnDragRef.current?.pointerId !== event.pointerId) {
|
||||
return;
|
||||
}
|
||||
columnDragRef.current = null;
|
||||
setActiveColumnResize(null);
|
||||
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
};
|
||||
|
||||
const resizeColumnWithKeyboard = (
|
||||
event: ReactKeyboardEvent<HTMLDivElement>,
|
||||
column: ColumnName,
|
||||
) => {
|
||||
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
dismissHelpPreview();
|
||||
const step = event.shiftKey ? COLUMN_KEYBOARD_STEP * 3 : COLUMN_KEYBOARD_STEP;
|
||||
changeColumnLayout(column, event.key === "ArrowRight" ? step : -step);
|
||||
};
|
||||
|
||||
const nameColumnMaximum = Math.max(
|
||||
MIN_NAME_WIDTH,
|
||||
Math.min(MAX_NAME_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.unitWidth),
|
||||
);
|
||||
const unitColumnMaximum = Math.max(
|
||||
MIN_UNIT_WIDTH,
|
||||
Math.min(MAX_UNIT_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.nameWidth),
|
||||
);
|
||||
const tableStyle = {
|
||||
"--parameter-name-width": `${effectiveLayout.nameWidth}px`,
|
||||
"--parameter-unit-width": `${effectiveLayout.unitWidth}px`,
|
||||
} as CSSProperties;
|
||||
const previewRow = helpPreview
|
||||
? rows.find((row) => row.id === helpPreview.rowId) ?? null
|
||||
: null;
|
||||
const previewDescription = previewRow?.description ||
|
||||
(typeof previewRow?.help === "string" ? previewRow.help : "");
|
||||
|
||||
const renderColumnResizer = (column: ColumnName) => {
|
||||
const currentWidth =
|
||||
column === "name" ? effectiveLayout.nameWidth : effectiveLayout.unitWidth;
|
||||
const minimum = column === "name" ? MIN_NAME_WIDTH : MIN_UNIT_WIDTH;
|
||||
const maximum = column === "name" ? nameColumnMaximum : unitColumnMaximum;
|
||||
const label = column === "name" ? "调整参数名列宽" : "调整单位列宽";
|
||||
return (
|
||||
<div
|
||||
aria-label={label}
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax={Math.round(maximum)}
|
||||
aria-valuemin={minimum}
|
||||
aria-valuenow={Math.round(currentWidth)}
|
||||
aria-valuetext={`${column === "name" ? "参数名" : "单位"}列 ${Math.round(currentWidth)} 像素`}
|
||||
className="parameter-table-column-resizer"
|
||||
data-column={column}
|
||||
onDoubleClick={() => {
|
||||
dismissHelpPreview();
|
||||
onColumnLayoutChange({ ...DEFAULT_PARAMETER_COLUMN_LAYOUT });
|
||||
}}
|
||||
onKeyDown={(event) => resizeColumnWithKeyboard(event, column)}
|
||||
onLostPointerCapture={stopColumnResize}
|
||||
onPointerCancel={stopColumnResize}
|
||||
onPointerDown={(event) => startColumnResize(event, column)}
|
||||
onPointerMove={moveColumnResize}
|
||||
onPointerUp={stopColumnResize}
|
||||
role="separator"
|
||||
tabIndex={0}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const rowBlurred = (event: ReactFocusEvent<HTMLTableRowElement>) => {
|
||||
if (!event.currentTarget.contains(event.relatedTarget as globalThis.Node | null)) {
|
||||
dismissHelpPreview();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`parameter-table-wrap ${activeColumnResize ? `resizing-${activeColumnResize}` : ""}`}
|
||||
data-resizing-column={activeColumnResize ?? undefined}
|
||||
>
|
||||
<table aria-label={ariaLabel} className="parameter-table" style={tableStyle}>
|
||||
<colgroup>
|
||||
<col style={{ width: effectiveLayout.nameWidth }} />
|
||||
<col />
|
||||
<col style={{ width: effectiveLayout.unitWidth }} />
|
||||
</colgroup>
|
||||
<thead className="parameter-table-head">
|
||||
<tr className="parameter-table-row parameter-table-head-row">
|
||||
<th className="parameter-table-cell parameter-table-name-cell" scope="col">
|
||||
参数
|
||||
{renderColumnResizer("name")}
|
||||
</th>
|
||||
<th className="parameter-table-cell parameter-table-value-cell" scope="col">
|
||||
值
|
||||
{renderColumnResizer("unit")}
|
||||
</th>
|
||||
<th className="parameter-table-cell parameter-table-unit-cell" scope="col">
|
||||
单位
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => {
|
||||
const hasPreview = rowHasHelpPreview(row);
|
||||
const hasUnit = row.unit !== undefined && row.unit !== null;
|
||||
return (
|
||||
<Fragment key={row.id}>
|
||||
<tr
|
||||
aria-describedby={
|
||||
helpPreview?.rowId === row.id
|
||||
? "parameter-help-preview"
|
||||
: undefined
|
||||
}
|
||||
className={`parameter-table-row ${row.error ? "invalid" : ""} ${hasUnit ? "" : "unitless"} ${row.readOnly ? "read-only" : ""}`}
|
||||
onBlurCapture={rowBlurred}
|
||||
onFocusCapture={(event) =>
|
||||
scheduleHelpPreview(event.currentTarget, row)
|
||||
}
|
||||
onMouseEnter={(event) =>
|
||||
scheduleHelpPreview(event.currentTarget, row, {
|
||||
clientX: event.clientX,
|
||||
clientY: event.clientY,
|
||||
})
|
||||
}
|
||||
onMouseLeave={dismissHelpPreview}
|
||||
onMouseMove={(event) => trackHelpPointer(event, row)}
|
||||
tabIndex={row.readOnly && hasPreview ? 0 : undefined}
|
||||
>
|
||||
<th
|
||||
className="parameter-table-cell parameter-table-name-cell"
|
||||
scope="row"
|
||||
>
|
||||
{row.name}
|
||||
</th>
|
||||
<td className="parameter-table-cell parameter-table-value-cell">
|
||||
{row.value}
|
||||
</td>
|
||||
<td className="parameter-table-cell parameter-table-unit-cell">
|
||||
{hasUnit ? row.unit : <span aria-label="无单位">—</span>}
|
||||
</td>
|
||||
</tr>
|
||||
{row.error ? (
|
||||
<tr className="parameter-table-message-row">
|
||||
<td className="parameter-table-cell" colSpan={3}>
|
||||
<small className="field-error">{row.error}</small>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{helpPreview && previewRow && typeof document !== "undefined"
|
||||
? createPortal(
|
||||
<div
|
||||
className="parameter-help-preview"
|
||||
id="parameter-help-preview"
|
||||
role="tooltip"
|
||||
style={{
|
||||
left: helpPreview.left,
|
||||
position: "fixed",
|
||||
top: helpPreview.top,
|
||||
transform: helpPreview.transform,
|
||||
}}
|
||||
>
|
||||
<strong className="parameter-help-preview-title">
|
||||
{previewRow.name}
|
||||
</strong>
|
||||
{previewDescription ? (
|
||||
<span className="parameter-help-preview-description">
|
||||
{previewDescription}
|
||||
</span>
|
||||
) : null}
|
||||
{previewRow.defaultValue ||
|
||||
previewRow.range ||
|
||||
previewRow.currentUnit ? (
|
||||
<span className="parameter-help-preview-meta">
|
||||
{previewRow.defaultValue ? (
|
||||
<span>默认值：{previewRow.defaultValue}</span>
|
||||
) : null}
|
||||
{previewRow.range ? <span>范围：{previewRow.range}</span> : null}
|
||||
{previewRow.currentUnit ? (
|
||||
<span>当前单位：{previewRow.currentUnit}</span>
|
||||
) : null}
|
||||
</span>
|
||||
) : null}
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+600
-177
@@ -387,11 +387,385 @@ textarea {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.parameter-table-wrap {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 12px 12px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.parameter-table-wrap.parameter-form {
|
||||
display: block;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.parameter-table {
|
||||
--parameter-name-width: 116px;
|
||||
--parameter-unit-width: 72px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid #cbd5df;
|
||||
border-spacing: 0;
|
||||
border-radius: 4px;
|
||||
color: #263442;
|
||||
background: #ffffff;
|
||||
table-layout: fixed;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.parameter-table-head .parameter-table-cell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
overflow: visible;
|
||||
border-bottom-color: #bfcbd7;
|
||||
color: #475569;
|
||||
background: #edf1f5;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.parameter-table-head .parameter-table-name-cell {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.parameter-table-head .parameter-table-value-cell {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.parameter-table-row {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.parameter-table-cell {
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 2px 6px;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #d9e0e7;
|
||||
border-bottom: 1px solid #d9e0e7;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.parameter-table-cell:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.parameter-table > tbody > .parameter-table-row:hover > .parameter-table-cell {
|
||||
background: #f8fbfe;
|
||||
}
|
||||
|
||||
.parameter-table-row:focus-visible {
|
||||
outline: 2px solid rgba(29, 111, 184, 0.5);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.parameter-name-cell,
|
||||
.parameter-table-name-cell {
|
||||
overflow: hidden;
|
||||
color: #344256;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.parameter-value-cell,
|
||||
.parameter-table-value-cell,
|
||||
.parameter-unit-cell,
|
||||
.parameter-table-unit-cell {
|
||||
min-width: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.parameter-unit-cell,
|
||||
.parameter-table-unit-cell {
|
||||
color: #526172;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.parameter-table-cell input,
|
||||
.parameter-table-cell select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #d5dde6;
|
||||
border-radius: 2px;
|
||||
outline: 0;
|
||||
color: #1f2933;
|
||||
background: #ffffff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.parameter-table-cell select {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.parameter-table-cell input:hover:not(:disabled),
|
||||
.parameter-table-cell select:hover:not(:disabled) {
|
||||
border-color: #aebdcb;
|
||||
}
|
||||
|
||||
.parameter-table-cell input:focus,
|
||||
.parameter-table-cell select:focus {
|
||||
border-color: #1d6fb8;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px #1d6fb8;
|
||||
}
|
||||
|
||||
.parameter-table-cell input:focus-visible,
|
||||
.parameter-table-cell select:focus-visible {
|
||||
outline: 2px solid rgba(29, 111, 184, 0.28);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.parameter-table-row.read-only .parameter-value-cell,
|
||||
.parameter-table-row.read-only .parameter-table-value-cell,
|
||||
.parameter-table-cell input:read-only {
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
.parameter-read-only-value,
|
||||
.parameter-table-read-only-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d5dde6;
|
||||
border-radius: 2px;
|
||||
color: #526172;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: #f4f6f8;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.parameter-table-row.unitless .parameter-unit-cell,
|
||||
.parameter-table-row.unitless .parameter-table-unit-cell {
|
||||
color: #8a96a4;
|
||||
}
|
||||
|
||||
.parameter-table-row.unitless .parameter-unit-cell:empty::before,
|
||||
.parameter-table-row.unitless .parameter-table-unit-cell:empty::before {
|
||||
content: "—";
|
||||
}
|
||||
|
||||
.parameter-table-row.invalid > .parameter-table-cell {
|
||||
background: #fff8f7;
|
||||
}
|
||||
|
||||
.parameter-table-row.invalid input,
|
||||
.parameter-table-row.invalid select,
|
||||
.parameter-table-cell input[aria-invalid="true"],
|
||||
.parameter-table-cell select[aria-invalid="true"] {
|
||||
border-color: #c63b32;
|
||||
box-shadow: inset 0 0 0 1px rgba(198, 59, 50, 0.18);
|
||||
}
|
||||
|
||||
.parameter-table-message-row {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.parameter-table-message-row > .parameter-table-cell {
|
||||
height: auto;
|
||||
min-height: 24px;
|
||||
padding: 4px 7px 5px;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.parameter-table-message-row .field-error,
|
||||
.parameter-table-message-row .field-hint {
|
||||
display: block;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.parameter-table-row.invalid + .parameter-table-message-row > .parameter-table-cell {
|
||||
color: #b42318;
|
||||
background: #fff8f7;
|
||||
}
|
||||
|
||||
.parameter-table > tbody > tr:last-child > .parameter-table-cell {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.parameter-column-resizer,
|
||||
.parameter-table-column-resizer {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
right: -5px;
|
||||
bottom: 0;
|
||||
width: 9px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
cursor: col-resize;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.parameter-column-resizer::after,
|
||||
.parameter-table-column-resizer::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
left: 4px;
|
||||
width: 1px;
|
||||
background: #aebac7;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.parameter-column-resizer:hover::after,
|
||||
.parameter-column-resizer:focus-visible::after,
|
||||
.parameter-column-resizer:active::after,
|
||||
.parameter-table-column-resizer:hover::after,
|
||||
.parameter-table-column-resizer:focus-visible::after,
|
||||
.parameter-table-column-resizer:active::after {
|
||||
width: 2px;
|
||||
background: #1d6fb8;
|
||||
}
|
||||
|
||||
.parameter-column-resizer:focus-visible,
|
||||
.parameter-table-column-resizer:focus-visible {
|
||||
outline: 2px solid rgba(29, 111, 184, 0.42);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.parameter-table-wrap[data-resizing-column],
|
||||
.parameter-table-wrap[data-resizing-column] * {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.parameter-table-wrap[data-resizing-column="name"]
|
||||
.parameter-column-resizer[data-column="name"]::after,
|
||||
.parameter-table-wrap[data-resizing-column="unit"]
|
||||
.parameter-column-resizer[data-column="unit"]::after,
|
||||
.parameter-table-wrap.resizing-name
|
||||
.parameter-column-resizer[data-column="name"]::after,
|
||||
.parameter-table-wrap.resizing-unit
|
||||
.parameter-column-resizer[data-column="unit"]::after,
|
||||
.parameter-table-wrap[data-resizing-column="name"]
|
||||
.parameter-table-column-resizer[data-column="name"]::after,
|
||||
.parameter-table-wrap[data-resizing-column="unit"]
|
||||
.parameter-table-column-resizer[data-column="unit"]::after,
|
||||
.parameter-table-wrap.resizing-name
|
||||
.parameter-table-column-resizer[data-column="name"]::after,
|
||||
.parameter-table-wrap.resizing-unit
|
||||
.parameter-table-column-resizer[data-column="unit"]::after {
|
||||
width: 2px;
|
||||
background: #1d6fb8;
|
||||
}
|
||||
|
||||
.parameter-table .field,
|
||||
.parameter-table .parameter-control {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.parameter-help-preview {
|
||||
position: fixed;
|
||||
z-index: 10020;
|
||||
width: max-content;
|
||||
max-width: min(300px, calc(100vw - 16px));
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #c7d1dc;
|
||||
border-radius: 5px;
|
||||
color: #263442;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.parameter-help-preview .title,
|
||||
.parameter-help-preview-title {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
color: #17212b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.parameter-help-preview .description,
|
||||
.parameter-help-preview-description {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
overflow-wrap: anywhere;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.parameter-help-preview .meta,
|
||||
.parameter-help-preview-meta {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin-top: 7px;
|
||||
padding-top: 6px;
|
||||
overflow-wrap: anywhere;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.palette-panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.palette-display-mode {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 1px;
|
||||
padding: 1px;
|
||||
border: 1px solid #cad5e1;
|
||||
border-radius: 5px;
|
||||
background: #f4f7fa;
|
||||
}
|
||||
|
||||
.palette-display-mode-button {
|
||||
display: grid;
|
||||
width: 23px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
place-items: center;
|
||||
color: #64748b;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-display-mode-button:hover {
|
||||
color: #155a94;
|
||||
background: #e6f0f8;
|
||||
}
|
||||
|
||||
.palette-display-mode-button:focus-visible {
|
||||
outline: 2px solid #1d6fb8;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.palette-display-mode-button[aria-pressed="true"] {
|
||||
color: #155a94;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.catalog-source {
|
||||
@@ -455,11 +829,57 @@ textarea {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.palette-collapse-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 2px 0;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-collapse-toggle:hover {
|
||||
color: #155a94;
|
||||
}
|
||||
|
||||
.palette-collapse-toggle:focus-visible {
|
||||
outline: 2px solid #1d6fb8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.palette-collapse-chevron {
|
||||
flex: 0 0 auto;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
|
||||
.palette-collapse-toggle[aria-expanded="false"] .palette-collapse-chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.palette-library-toggle {
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.palette-category-items {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-category-items {
|
||||
grid-template-columns: repeat(auto-fill, 76px);
|
||||
gap: 6px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.compact-form {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@@ -481,6 +901,37 @@ textarea {
|
||||
text-align: left;
|
||||
background: #ffffff;
|
||||
cursor: grab;
|
||||
transition: border-color 120ms ease, box-shadow 120ms ease,
|
||||
background 120ms ease, transform 80ms ease;
|
||||
}
|
||||
|
||||
.palette-item:hover {
|
||||
border-color: #85add0;
|
||||
background: #f5faff;
|
||||
box-shadow: 0 2px 6px rgba(21, 90, 148, 0.1);
|
||||
}
|
||||
|
||||
.palette-item:focus-visible {
|
||||
border-color: #1d6fb8;
|
||||
outline: 2px solid rgba(29, 111, 184, 0.32);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.palette-item:active {
|
||||
cursor: grabbing;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.palette-item-copy {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.palette-item-copy strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.palette-item small {
|
||||
@@ -494,11 +945,116 @@ textarea {
|
||||
}
|
||||
|
||||
.palette-icon {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.component-symbol {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.component-symbol-svg {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid #4b5563;
|
||||
background: #f8fafc;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.component-symbol-medium-label {
|
||||
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-list {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-item {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 48px 16px;
|
||||
gap: 4px;
|
||||
width: 76px;
|
||||
height: 82px;
|
||||
min-height: 82px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 5px;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-item-copy {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-item-copy strong {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-item-copy small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.palette[data-view-mode="icons"] .palette-icon {
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.palette-icon-preview {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: grid;
|
||||
grid-template-rows: 56px auto;
|
||||
min-width: 104px;
|
||||
max-width: 220px;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 11px 10px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
place-items: center;
|
||||
color: #1f2937;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.palette-icon-preview-symbol {
|
||||
display: grid;
|
||||
flex: 0 0 56px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.palette-icon-preview-symbol > .component-symbol {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.palette-icon-preview-label {
|
||||
max-width: 198px;
|
||||
margin-top: 5px;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.component-drag-preview {
|
||||
@@ -521,38 +1077,8 @@ textarea {
|
||||
}
|
||||
|
||||
.component-drag-preview .palette-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
.component-drag-preview .icon-pipe {
|
||||
width: 34px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.component-drag-preview .icon-orifice {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.component-drag-preview .icon-tee {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.component-drag-preview .icon-tee::before {
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 8px;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
.component-drag-preview .icon-tee::after {
|
||||
left: 10px;
|
||||
width: 8px;
|
||||
height: 28px;
|
||||
border-width: 1.5px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.component-drag-preview-label {
|
||||
@@ -565,82 +1091,6 @@ textarea {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-cylinder {
|
||||
border-radius: 13px;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.icon-tank {
|
||||
border-radius: 50%;
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.icon-pipe {
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.icon-orifice {
|
||||
transform: rotate(45deg);
|
||||
background: #ffedd5;
|
||||
}
|
||||
|
||||
.icon-tee {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.icon-generic {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.icon-generic::before,
|
||||
.icon-generic::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
box-sizing: border-box;
|
||||
border: 1.5px solid #4b5563;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon-generic::before {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.icon-generic::after {
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
.icon-tee::before,
|
||||
.icon-tee::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 6px;
|
||||
background: #e5e7eb;
|
||||
border: 2px solid #4b5563;
|
||||
}
|
||||
|
||||
.icon-tee::before {
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.icon-tee::after {
|
||||
top: 0;
|
||||
left: 11px;
|
||||
width: 10px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.flow-canvas {
|
||||
position: relative;
|
||||
@@ -756,6 +1206,38 @@ textarea {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.node-symbol > .component-symbol {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare .sim-node-frame,
|
||||
.sim-node.symbol-presentation-bare.selected .sim-node-frame {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare .node-label {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare.selected .component-symbol-svg {
|
||||
filter: drop-shadow(0 0 3px rgba(29, 111, 184, 0.62));
|
||||
}
|
||||
|
||||
.react-flow__node.validation-error
|
||||
.sim-node.symbol-presentation-bare
|
||||
.component-symbol-svg {
|
||||
filter: drop-shadow(0 0 3px rgba(198, 59, 50, 0.68));
|
||||
}
|
||||
|
||||
.react-flow__node.validation-warning
|
||||
.sim-node.symbol-presentation-bare
|
||||
.component-symbol-svg {
|
||||
filter: drop-shadow(0 0 3px rgba(192, 138, 22, 0.68));
|
||||
}
|
||||
|
||||
.node-label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@@ -790,72 +1272,6 @@ textarea {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.symbol-cylinder,
|
||||
.symbol-tank,
|
||||
.symbol-pipe,
|
||||
.symbol-orifice,
|
||||
.symbol-tee {
|
||||
box-sizing: border-box;
|
||||
width: 42px;
|
||||
height: 22px;
|
||||
border: 2px solid #4b5563;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.symbol-cylinder {
|
||||
height: 28px;
|
||||
border-radius: 12px;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.symbol-tank {
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.symbol-pipe {
|
||||
height: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.symbol-orifice {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(45deg);
|
||||
background: #ffedd5;
|
||||
}
|
||||
|
||||
.symbol-tee {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.symbol-tee::before,
|
||||
.symbol-tee::after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.symbol-tee::before {
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 42px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.symbol-tee::after {
|
||||
top: 0;
|
||||
left: 15px;
|
||||
width: 12px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.port-handle {
|
||||
z-index: 3;
|
||||
width: 10px;
|
||||
@@ -941,6 +1357,13 @@ textarea {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.node-id {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e3e8ef;
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { prepareApp } from "./fixtures";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await prepareApp(page);
|
||||
});
|
||||
|
||||
test("拖入介质定义后可供气动元件选择，删除定义会回退到内置空气", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
|
||||
const canvas = page.locator(".flow-canvas .react-flow__pane");
|
||||
await page
|
||||
.getByRole("button", { name: /空气介质定义/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 280, y: 220 } });
|
||||
|
||||
const mediumNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_ideal_air_medium_1"]',
|
||||
);
|
||||
await expect(mediumNode).toBeVisible();
|
||||
await mediumNode.click();
|
||||
await expect(page.getByLabel("介质定义索引（自动分配）")).toHaveValue("1");
|
||||
const propertyModelSelect = page.getByLabel("物性计算模型");
|
||||
await expect(propertyModelSelect).toHaveValue("0");
|
||||
await expect(propertyModelSelect.locator('option[value="0"]')).toHaveText(
|
||||
"理想气体",
|
||||
);
|
||||
|
||||
await page
|
||||
.getByRole("button", { name: /AMESim 气动测试元件/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 650, y: 360 } });
|
||||
|
||||
const pneumaticNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_pneumatic_test_1"]',
|
||||
);
|
||||
await expect(pneumaticNode).toBeVisible();
|
||||
await pneumaticNode.click();
|
||||
|
||||
const mediumSelect = page.getByLabel("介质物性索引");
|
||||
await expect(mediumSelect).toHaveValue("0");
|
||||
await expect(mediumSelect.locator('option[value="0"]')).toHaveText("0");
|
||||
await expect(mediumSelect.locator('option[value="1"]')).toHaveText("1");
|
||||
|
||||
await mediumSelect.selectOption("1");
|
||||
await expect(mediumSelect).toHaveValue("1");
|
||||
|
||||
await mediumNode.click();
|
||||
await page.getByRole("button", { name: "删除 (Delete)" }).click();
|
||||
await expect(mediumNode).toHaveCount(0);
|
||||
|
||||
await pneumaticNode.click();
|
||||
await expect(page.getByLabel("介质物性索引")).toHaveValue("0");
|
||||
|
||||
const consolePanel = page.getByRole("complementary", {
|
||||
name: "仿真控制台",
|
||||
exact: true,
|
||||
});
|
||||
await page.getByRole("button", { name: "展开仿真控制台" }).click();
|
||||
await expect(consolePanel).toContainText(
|
||||
"介质定义已删除，1 个介质物性引用已切回 0 — 空气（理想气体，内置默认）",
|
||||
);
|
||||
|
||||
await page.getByRole("button", { name: "生成系统 XML" }).click();
|
||||
const xmlBlock = consolePanel.getByLabel("生成的系统 XML");
|
||||
await expect(xmlBlock).toContainText('mediumReferenceVersion="1"');
|
||||
await expect(xmlBlock).toContainText('<Parameter name="gi" value="0"');
|
||||
});
|
||||
|
||||
test("介质定义的物性计算模型会写入 XML", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
const canvas = page.locator(".flow-canvas .react-flow__pane");
|
||||
await page
|
||||
.getByRole("button", { name: /空气介质定义/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 280, y: 220 } });
|
||||
|
||||
const mediumNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_ideal_air_medium_1"]',
|
||||
);
|
||||
await mediumNode.click();
|
||||
await expect(page.getByLabel("物性计算模型")).toHaveValue("0");
|
||||
|
||||
await page.getByRole("button", { name: "生成系统 XML" }).click();
|
||||
const consolePanel = page.getByRole("complementary", {
|
||||
name: "仿真控制台",
|
||||
exact: true,
|
||||
});
|
||||
await expect(consolePanel.getByLabel("生成的系统 XML")).toContainText(
|
||||
'<Parameter name="property_model" value="0"',
|
||||
);
|
||||
});
|
||||
|
||||
test("氦气介质自动分配 gi，并以 Peng–Robinson 模型写入 XML", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
|
||||
const canvas = page.locator(".flow-canvas .react-flow__pane");
|
||||
await page
|
||||
.getByRole("button", { name: /空气介质定义/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 240, y: 180 } });
|
||||
await page
|
||||
.getByRole("button", { name: /氦气介质定义/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 520, y: 180 } });
|
||||
|
||||
const heliumNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_helium_medium_1"]',
|
||||
);
|
||||
await expect(heliumNode).toBeVisible();
|
||||
await heliumNode.click();
|
||||
await expect(page.getByLabel("介质定义索引（自动分配）")).toHaveValue("2");
|
||||
|
||||
const propertyModelSelect = page.getByLabel("物性计算模型");
|
||||
await expect(propertyModelSelect).toHaveValue("0");
|
||||
await expect(propertyModelSelect.locator('option[value="0"]')).toHaveText(
|
||||
"Peng–Robinson",
|
||||
);
|
||||
|
||||
await page
|
||||
.getByRole("button", { name: /AMESim 气动测试元件/ })
|
||||
.dragTo(canvas, { targetPosition: { x: 760, y: 360 } });
|
||||
|
||||
const pneumaticNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_pneumatic_test_1"]',
|
||||
);
|
||||
await expect(pneumaticNode).toBeVisible();
|
||||
await pneumaticNode.click();
|
||||
|
||||
const mediumSelect = page.getByLabel("介质物性索引");
|
||||
await expect(mediumSelect.locator("option")).toHaveText(["0", "1", "2"]);
|
||||
await mediumSelect.selectOption("2");
|
||||
await expect(mediumSelect).toHaveValue("2");
|
||||
|
||||
await page.getByRole("button", { name: "生成系统 XML" }).click();
|
||||
const consolePanel = page.getByRole("complementary", {
|
||||
name: "仿真控制台",
|
||||
exact: true,
|
||||
});
|
||||
const xmlBlock = consolePanel.getByLabel("生成的系统 XML");
|
||||
await expect(xmlBlock).toContainText('type="amesim_helium_medium"');
|
||||
await expect(xmlBlock).toContainText('<Parameter name="gi" value="2"');
|
||||
await expect(xmlBlock).toContainText(
|
||||
'<Parameter name="property_model" value="0"',
|
||||
);
|
||||
|
||||
const xml = await xmlBlock.textContent();
|
||||
expect(xml).toMatch(
|
||||
/<Component[^>]+type="amesim_helium_medium"[\s\S]*?<Parameter name="gi" value="2"[\s\S]*?<Parameter name="property_model" value="0"[\s\S]*?<\/Component>/,
|
||||
);
|
||||
expect(xml).toMatch(
|
||||
/<Component[^>]+type="amesim_pneumatic_test"[\s\S]*?<Parameter name="gi" value="2"[\s\S]*?<\/Component>/,
|
||||
);
|
||||
});
|
||||
|
||||
test("导入工程中的未知物性计算模型会被检查出来", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
const project = {
|
||||
name: "invalid-property-model",
|
||||
mediumReferenceVersion: 1,
|
||||
nodes: [
|
||||
{
|
||||
id: "amesim_ideal_air_medium_1",
|
||||
type: "simulationComponent",
|
||||
position: { x: 280, y: 220 },
|
||||
data: {
|
||||
label: "空气介质_1",
|
||||
componentType: "amesim_ideal_air_medium",
|
||||
modelType: "amesim_ideal_air_medium",
|
||||
ports: [],
|
||||
parameters: { gi: 1, property_model: 99 },
|
||||
parameterUnits: {},
|
||||
rotation: 0,
|
||||
mirrored: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
edges: [],
|
||||
simulation: {
|
||||
t_start: 0,
|
||||
t_stop: 1,
|
||||
step: 0.1,
|
||||
max_step: 0.05,
|
||||
method: "RK45",
|
||||
},
|
||||
};
|
||||
|
||||
await page.locator('input[type="file"]').setInputFiles({
|
||||
name: "invalid-property-model.json",
|
||||
mimeType: "application/json",
|
||||
buffer: Buffer.from(JSON.stringify(project)),
|
||||
});
|
||||
await page.getByRole("button", { name: "检查模型" }).click();
|
||||
|
||||
const consolePanel = page.getByRole("complementary", {
|
||||
name: "仿真控制台",
|
||||
exact: true,
|
||||
});
|
||||
await expect(consolePanel).toContainText(
|
||||
"空气介质_1：物性计算模型不在支持的可选项中",
|
||||
);
|
||||
});
|
||||
@@ -25,13 +25,136 @@ export const componentCatalog = {
|
||||
temporary: true,
|
||||
order: 1,
|
||||
components: [
|
||||
{
|
||||
type: "amesim_ideal_air_medium",
|
||||
label: "空气介质定义",
|
||||
modelType: "amesim_ideal_air_medium",
|
||||
modelVersion: "0.2.0",
|
||||
symbol: "amesim_ideal_air_medium",
|
||||
order: 1,
|
||||
category: {
|
||||
id: "media",
|
||||
label: "介质物性",
|
||||
order: 1,
|
||||
},
|
||||
role: "amesimGasMediumDefinition",
|
||||
ports: [],
|
||||
parameters: [
|
||||
{
|
||||
name: "gi",
|
||||
label: "介质定义索引（gi）",
|
||||
quantity: "dimensionless",
|
||||
unit: "",
|
||||
default: 1,
|
||||
minimum: 1,
|
||||
maximum: 99,
|
||||
minimumExclusive: false,
|
||||
description: "介质定义索引由画布自动分配；索引 0 保留给内置理想空气。",
|
||||
},
|
||||
{
|
||||
name: "property_model",
|
||||
label: "物性计算模型",
|
||||
quantity: "dimensionless",
|
||||
unit: "",
|
||||
default: 0,
|
||||
minimum: 0,
|
||||
maximum: 0,
|
||||
minimumExclusive: false,
|
||||
editor: "amesimGasPropertyModel",
|
||||
options: [{ value: 0, label: "理想气体" }],
|
||||
description: "选择空气介质采用的物性计算模型。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "amesim_helium_medium",
|
||||
label: "氦气介质定义",
|
||||
modelType: "amesim_helium_medium",
|
||||
modelVersion: "0.1.0",
|
||||
symbol: "amesim_helium_medium",
|
||||
order: 2,
|
||||
category: {
|
||||
id: "media",
|
||||
label: "介质物性",
|
||||
order: 1,
|
||||
},
|
||||
role: "amesimGasMediumDefinition",
|
||||
ports: [],
|
||||
parameters: [
|
||||
{
|
||||
name: "gi",
|
||||
label: "介质定义索引（gi）",
|
||||
quantity: "dimensionless",
|
||||
unit: "",
|
||||
default: 1,
|
||||
minimum: 1,
|
||||
maximum: 99,
|
||||
minimumExclusive: false,
|
||||
description: "介质定义索引由画布自动分配；索引 0 保留给内置理想空气。",
|
||||
},
|
||||
{
|
||||
name: "property_model",
|
||||
label: "物性计算模型",
|
||||
quantity: "dimensionless",
|
||||
unit: "",
|
||||
default: 0,
|
||||
minimum: 0,
|
||||
maximum: 0,
|
||||
minimumExclusive: false,
|
||||
editor: "amesimGasPropertyModel",
|
||||
options: [{ value: 0, label: "Peng–Robinson" }],
|
||||
description: "氦气当前使用 Peng–Robinson 状态方程计算物性。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "amesim_pneumatic_test",
|
||||
label: "AMESim 气动测试元件",
|
||||
modelType: "amesim_pneumatic_test",
|
||||
modelVersion: "1.0.0",
|
||||
symbol: "symbol-not-registered",
|
||||
order: 3,
|
||||
category: {
|
||||
id: "pneumatic",
|
||||
label: "气动元件",
|
||||
order: 2,
|
||||
},
|
||||
ports: [
|
||||
physicalPort("port_a", "left", "bidirectional"),
|
||||
physicalPort("port_b", "right", "bidirectional"),
|
||||
],
|
||||
parameters: [
|
||||
{
|
||||
name: "gi",
|
||||
label: "介质物性模型（gi）",
|
||||
quantity: "dimensionless",
|
||||
unit: "",
|
||||
default: 0,
|
||||
minimum: 0,
|
||||
maximum: 99,
|
||||
minimumExclusive: false,
|
||||
editor: "amesimGasReference",
|
||||
description: "选择该气动元件引用的画布介质定义索引；0 表示内置理想空气。",
|
||||
},
|
||||
{
|
||||
name: "reference_pressure",
|
||||
label: "参考压力",
|
||||
quantity: "pressure",
|
||||
unit: "Pa",
|
||||
default: 100000,
|
||||
minimum: 0,
|
||||
minimumExclusive: true,
|
||||
description: "用于验证参数表单位换算和 XML 基础单位输出的参考压力。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "generic_sensor",
|
||||
label: "通用测试元件",
|
||||
modelType: "generic_sensor",
|
||||
modelVersion: "1.0.0",
|
||||
symbol: "symbol-not-registered",
|
||||
order: 1,
|
||||
order: 4,
|
||||
category: {
|
||||
id: "generic",
|
||||
label: "通用组件",
|
||||
@@ -49,6 +172,7 @@ export const componentCatalog = {
|
||||
unit: "",
|
||||
default: 1,
|
||||
minimumExclusive: false,
|
||||
description: "传感器输入值的无量纲放大倍数。",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -158,8 +282,12 @@ export const resultSnapshot = {
|
||||
|
||||
export async function prepareApp(page: Page) {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.clear();
|
||||
window.sessionStorage.clear();
|
||||
const preparedKey = "system-simulation-flow:e2e-storage-prepared";
|
||||
if (window.sessionStorage.getItem(preparedKey) !== "1") {
|
||||
window.localStorage.clear();
|
||||
window.sessionStorage.clear();
|
||||
window.sessionStorage.setItem(preparedKey, "1");
|
||||
}
|
||||
window.location.hash = "#/modeling";
|
||||
});
|
||||
await page.route("**/api/components/catalog", async (route) => {
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
import { expect, test, type Locator } from "@playwright/test";
|
||||
import { prepareApp } from "./fixtures";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await prepareApp(page);
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.removeItem(
|
||||
"system-simulation-flow:palette-collapsed-sections",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
async function expectFixedIconCardSize(
|
||||
item: Locator,
|
||||
) {
|
||||
const itemBox = await item.boundingBox();
|
||||
const iconBox = await item.locator(".palette-icon").boundingBox();
|
||||
|
||||
expect(itemBox).not.toBeNull();
|
||||
expect(iconBox).not.toBeNull();
|
||||
expect(itemBox!.width).toBeGreaterThanOrEqual(75);
|
||||
expect(itemBox!.width).toBeLessThanOrEqual(77);
|
||||
expect(itemBox!.height).toBeGreaterThanOrEqual(81);
|
||||
expect(itemBox!.height).toBeLessThanOrEqual(83);
|
||||
expect(iconBox!.width).toBeGreaterThanOrEqual(47);
|
||||
expect(iconBox!.width).toBeLessThanOrEqual(49);
|
||||
expect(iconBox!.height).toBeGreaterThanOrEqual(47);
|
||||
expect(iconBox!.height).toBeLessThanOrEqual(49);
|
||||
}
|
||||
|
||||
test("组件库可切换详细与仅图标显示，并在刷新后保留选择", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
const palette = page.locator("aside.palette");
|
||||
const detailedButton = page.getByRole("button", {
|
||||
name: "详细显示",
|
||||
exact: true,
|
||||
});
|
||||
const iconsButton = page.getByRole("button", {
|
||||
name: "仅图标显示",
|
||||
exact: true,
|
||||
});
|
||||
const airItem = palette.getByRole("button", {
|
||||
name: "空气介质定义",
|
||||
exact: true,
|
||||
});
|
||||
const heliumItem = palette.getByRole("button", {
|
||||
name: "氦气介质定义",
|
||||
exact: true,
|
||||
});
|
||||
|
||||
await expect(palette).toHaveAttribute("data-view-mode", "detailed");
|
||||
await expect(detailedButton).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(iconsButton).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(airItem.locator(".palette-item-copy")).toBeVisible();
|
||||
|
||||
const airSymbol = airItem.locator(
|
||||
'[data-component-symbol="amesim_ideal_air_medium"]',
|
||||
);
|
||||
const heliumSymbol = heliumItem.locator(
|
||||
'[data-component-symbol="amesim_helium_medium"]',
|
||||
);
|
||||
await expect(airSymbol.locator("svg")).toBeVisible();
|
||||
await expect(
|
||||
airSymbol.locator('[data-symbol-label="Air"]'),
|
||||
).toHaveText("Air");
|
||||
await expect(airSymbol.locator(".component-symbol-medium-svg path")).toHaveCount(0);
|
||||
await expect(heliumSymbol.locator("svg")).toBeVisible();
|
||||
await expect(
|
||||
heliumSymbol.locator('[data-symbol-label="He"]'),
|
||||
).toHaveText("He");
|
||||
await expect(heliumSymbol.locator(".component-symbol-medium-svg path")).toHaveCount(0);
|
||||
|
||||
const unknownSymbol = palette
|
||||
.getByRole("button", { name: "通用测试元件", exact: true })
|
||||
.locator('[data-component-symbol="generic"]');
|
||||
await expect(unknownSymbol.locator("svg")).toBeVisible();
|
||||
|
||||
await iconsButton.click();
|
||||
await expect(palette).toHaveAttribute("data-view-mode", "icons");
|
||||
await expect(detailedButton).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(airItem).toBeVisible();
|
||||
await expect(airItem.locator(".palette-item-name")).toBeVisible();
|
||||
await expect(airItem.locator(".palette-item-name")).toHaveText("空气介质定义");
|
||||
await expect(airItem.locator(".palette-item-meta")).toBeHidden();
|
||||
await expect(airItem).not.toHaveAttribute("title");
|
||||
|
||||
await page.reload();
|
||||
|
||||
await expect(palette).toHaveAttribute("data-view-mode", "icons");
|
||||
await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(airItem.locator(".palette-item-name")).toBeVisible();
|
||||
await expect(airItem.locator(".palette-item-meta")).toBeHidden();
|
||||
});
|
||||
|
||||
test("组件库和分类支持独立折叠并同步可访问状态", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
const palette = page.locator("aside.palette");
|
||||
const libraryToggle = palette.getByRole("button", {
|
||||
name: "自动化测试组件库",
|
||||
exact: true,
|
||||
});
|
||||
const categoryToggle = palette.getByRole("button", {
|
||||
name: "介质物性",
|
||||
exact: true,
|
||||
});
|
||||
|
||||
await expect(libraryToggle).toHaveAttribute("aria-expanded", "true");
|
||||
const libraryContentId = await libraryToggle.getAttribute("aria-controls");
|
||||
expect(libraryContentId).toBeTruthy();
|
||||
await expect(page.locator(`[id="${libraryContentId}"]`)).toBeVisible();
|
||||
|
||||
await expect(categoryToggle).toHaveAttribute("aria-expanded", "true");
|
||||
const categoryItemsId = await categoryToggle.getAttribute("aria-controls");
|
||||
expect(categoryItemsId).toBeTruthy();
|
||||
await expect(page.locator(`[id="${categoryItemsId}"]`)).toBeVisible();
|
||||
await expect(
|
||||
palette.getByRole("button", { name: "空气介质定义", exact: true }),
|
||||
).toBeVisible();
|
||||
|
||||
await categoryToggle.click();
|
||||
await expect(categoryToggle).toHaveAttribute("aria-expanded", "false");
|
||||
await expect(page.locator(`[id="${categoryItemsId}"]`)).toHaveCount(0);
|
||||
await expect(
|
||||
palette.getByRole("button", { name: "空气介质定义", exact: true }),
|
||||
).toHaveCount(0);
|
||||
|
||||
await categoryToggle.click();
|
||||
await expect(categoryToggle).toHaveAttribute("aria-expanded", "true");
|
||||
await expect(page.locator(`[id="${categoryItemsId}"]`)).toBeVisible();
|
||||
|
||||
await libraryToggle.click();
|
||||
await expect(libraryToggle).toHaveAttribute("aria-expanded", "false");
|
||||
await expect(page.locator(`[id="${libraryContentId}"]`)).toHaveCount(0);
|
||||
await expect(
|
||||
palette.getByRole("button", { name: "介质物性", exact: true }),
|
||||
).toHaveCount(0);
|
||||
|
||||
await libraryToggle.click();
|
||||
await expect(libraryToggle).toHaveAttribute("aria-expanded", "true");
|
||||
await expect(page.locator(`[id="${libraryContentId}"]`)).toBeVisible();
|
||||
await expect(
|
||||
palette.getByRole("button", { name: "介质物性", exact: true }),
|
||||
).toHaveAttribute("aria-expanded", "true");
|
||||
});
|
||||
|
||||
test("仅图标模式名称截断且卡片尺寸不随侧栏和视口改变", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page
|
||||
.getByRole("button", { name: "仅图标显示", exact: true })
|
||||
.click();
|
||||
|
||||
const palette = page.locator("aside.palette");
|
||||
const longNameItem = palette.getByRole("button", {
|
||||
name: "AMESim 气动测试元件",
|
||||
exact: true,
|
||||
});
|
||||
const name = longNameItem.locator(".palette-item-name");
|
||||
const meta = longNameItem.locator(".palette-item-meta");
|
||||
|
||||
await expect(name).toBeVisible();
|
||||
await expect(name).toHaveText("AMESim 气动测试元件");
|
||||
await expect(meta).toBeHidden();
|
||||
await expect(longNameItem).not.toHaveAttribute("title");
|
||||
const truncation = await name.evaluate((element) => {
|
||||
const style = window.getComputedStyle(element);
|
||||
return {
|
||||
clipped: element.scrollWidth > element.clientWidth,
|
||||
overflow: style.overflow,
|
||||
textOverflow: style.textOverflow,
|
||||
whiteSpace: style.whiteSpace,
|
||||
};
|
||||
});
|
||||
expect(truncation).toEqual({
|
||||
clipped: true,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
});
|
||||
|
||||
await expectFixedIconCardSize(longNameItem);
|
||||
const initialPaletteBox = await palette.boundingBox();
|
||||
expect(initialPaletteBox).not.toBeNull();
|
||||
|
||||
const paletteSeparator = page.getByRole("separator", {
|
||||
name: "调整组件库宽度",
|
||||
});
|
||||
await paletteSeparator.focus();
|
||||
for (let index = 0; index < 5; index += 1) {
|
||||
await page.keyboard.press("ArrowRight");
|
||||
}
|
||||
await expect(paletteSeparator).toHaveAttribute("aria-valuenow", "330");
|
||||
const expandedPaletteBox = await palette.boundingBox();
|
||||
expect(expandedPaletteBox).not.toBeNull();
|
||||
expect(expandedPaletteBox!.width).toBeGreaterThan(initialPaletteBox!.width + 90);
|
||||
await expectFixedIconCardSize(longNameItem);
|
||||
|
||||
await page.setViewportSize({ width: 1000, height: 760 });
|
||||
await expect
|
||||
.poll(async () => Number(await paletteSeparator.getAttribute("aria-valuenow")))
|
||||
.toBeLessThan(330);
|
||||
await expectFixedIconCardSize(longNameItem);
|
||||
});
|
||||
|
||||
test("仅图标模式悬停后显示完整名称和图标预览并在移开后关闭", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await page
|
||||
.getByRole("button", { name: "仅图标显示", exact: true })
|
||||
.click();
|
||||
|
||||
const item = page.locator("aside.palette").getByRole("button", {
|
||||
name: "AMESim 气动测试元件",
|
||||
exact: true,
|
||||
});
|
||||
const preview = page.locator("body > .palette-icon-preview[role='tooltip']");
|
||||
|
||||
await item.hover();
|
||||
await page.waitForTimeout(600);
|
||||
await expect(preview).toBeVisible();
|
||||
await expect(preview.locator(".palette-icon-preview-label")).toHaveText(
|
||||
"AMESim 气动测试元件",
|
||||
);
|
||||
await expect(
|
||||
preview.locator(
|
||||
'.palette-icon-preview-symbol [data-component-symbol="generic"] svg',
|
||||
),
|
||||
).toBeVisible();
|
||||
await expect(item).toHaveAttribute("aria-describedby", "palette-icon-preview");
|
||||
|
||||
await page.locator(".palette-panel-title").hover();
|
||||
await expect(preview).toHaveCount(0);
|
||||
await expect(item).not.toHaveAttribute("aria-describedby", "palette-icon-preview");
|
||||
});
|
||||
|
||||
test("仅图标模式仍可拖入氦气介质并在画布显示专用图标", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
await page
|
||||
.getByRole("button", { name: "仅图标显示", exact: true })
|
||||
.click();
|
||||
|
||||
const palette = page.locator("aside.palette");
|
||||
const heliumItem = 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 heliumNode = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_helium_medium_1"]',
|
||||
);
|
||||
await expect(heliumNode).toBeVisible();
|
||||
await expect(
|
||||
heliumNode.locator(".sim-node.symbol-presentation-bare"),
|
||||
).toBeVisible();
|
||||
|
||||
const heliumCanvasSymbol = heliumNode.locator(
|
||||
'.node-symbol [data-component-symbol="amesim_helium_medium"]',
|
||||
);
|
||||
await expect(heliumCanvasSymbol).toHaveAttribute(
|
||||
"data-symbol-presentation",
|
||||
"bare",
|
||||
);
|
||||
await expect(heliumCanvasSymbol.locator("svg")).toBeVisible();
|
||||
await expect(
|
||||
heliumCanvasSymbol.locator('[data-symbol-label="He"]'),
|
||||
).toHaveText("He");
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
import { expect, test, type Locator, type Page } from "@playwright/test";
|
||||
|
||||
import { prepareApp } from "./fixtures";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await prepareApp(page);
|
||||
});
|
||||
|
||||
function parameterRow(table: Locator, name: string) {
|
||||
return table.getByRole("rowheader", { name, exact: true }).locator("..");
|
||||
}
|
||||
|
||||
async function addPneumaticTestComponent(page: Page) {
|
||||
const canvas = page.locator(".flow-canvas .react-flow__pane");
|
||||
await page
|
||||
.getByRole("button", { name: "AMESim 气动测试元件", exact: true })
|
||||
.dragTo(canvas, { targetPosition: { x: 620, y: 330 } });
|
||||
const node = page.locator(
|
||||
'.flow-canvas .react-flow__node[data-id="amesim_pneumatic_test_1"]',
|
||||
);
|
||||
await expect(node).toBeVisible();
|
||||
await node.click();
|
||||
}
|
||||
|
||||
test("组件参数和仿真设置使用共享的三列表格", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await addPneumaticTestComponent(page);
|
||||
|
||||
const componentTable = page.getByRole("table", { name: "组件参数" });
|
||||
const simulationTable = page.getByRole("table", { name: "仿真设置" });
|
||||
await expect(componentTable).toBeVisible();
|
||||
await expect(simulationTable).toBeVisible();
|
||||
|
||||
await expect(componentTable.getByRole("columnheader")).toHaveText([
|
||||
"参数",
|
||||
"值",
|
||||
"单位",
|
||||
]);
|
||||
await expect(componentTable.getByRole("rowheader")).toHaveText([
|
||||
"组件名称",
|
||||
"节点 ID",
|
||||
"介质物性索引",
|
||||
"参考压力",
|
||||
]);
|
||||
await expect(simulationTable.getByRole("rowheader")).toHaveText([
|
||||
"起始时间",
|
||||
"结束时间",
|
||||
"采样步长",
|
||||
"最大积分步长",
|
||||
"求解器",
|
||||
]);
|
||||
|
||||
await expect(parameterRow(simulationTable, "起始时间").locator("td").last()).toHaveText(
|
||||
"s",
|
||||
);
|
||||
await expect(parameterRow(simulationTable, "求解器").locator("td").last()).toHaveText(
|
||||
"—",
|
||||
);
|
||||
|
||||
const componentNameWidth = await componentTable
|
||||
.locator("thead .parameter-table-name-cell")
|
||||
.evaluate((element) => element.getBoundingClientRect().width);
|
||||
const simulationNameWidth = await simulationTable
|
||||
.locator("thead .parameter-table-name-cell")
|
||||
.evaluate((element) => element.getBoundingClientRect().width);
|
||||
expect(Math.abs(componentNameWidth - simulationNameWidth)).toBeLessThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("参数说明延迟显示，单位切换不改变 XML 基础值", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await addPneumaticTestComponent(page);
|
||||
|
||||
const componentTable = page.getByRole("table", { name: "组件参数" });
|
||||
const pressureRow = parameterRow(componentTable, "参考压力");
|
||||
const preview = page.locator("body > #parameter-help-preview");
|
||||
|
||||
const pressureRowBox = await pressureRow.boundingBox();
|
||||
expect(pressureRowBox).not.toBeNull();
|
||||
const pointer = {
|
||||
x: pressureRowBox!.x + pressureRowBox!.width / 2,
|
||||
y: pressureRowBox!.y + pressureRowBox!.height / 2,
|
||||
};
|
||||
await page.mouse.move(pointer.x, pointer.y);
|
||||
await page.waitForTimeout(600);
|
||||
await expect(preview).toBeVisible();
|
||||
await expect(preview.locator(".parameter-help-preview-title")).toHaveText("参考压力");
|
||||
await expect(preview.locator(".parameter-help-preview-description")).toContainText(
|
||||
"单位换算和 XML 基础单位输出",
|
||||
);
|
||||
await expect(preview.locator(".parameter-help-preview-meta")).toContainText(
|
||||
"默认值：100000",
|
||||
);
|
||||
await expect(preview.locator(".parameter-help-preview-meta")).toContainText(
|
||||
"当前单位：Pa",
|
||||
);
|
||||
const previewBox = await preview.boundingBox();
|
||||
expect(previewBox).not.toBeNull();
|
||||
const horizontalGap =
|
||||
pointer.x < previewBox!.x
|
||||
? previewBox!.x - pointer.x
|
||||
: pointer.x > previewBox!.x + previewBox!.width
|
||||
? pointer.x - (previewBox!.x + previewBox!.width)
|
||||
: 0;
|
||||
const verticalGap =
|
||||
pointer.y < previewBox!.y
|
||||
? previewBox!.y - pointer.y
|
||||
: pointer.y > previewBox!.y + previewBox!.height
|
||||
? pointer.y - (previewBox!.y + previewBox!.height)
|
||||
: 0;
|
||||
expect(Math.hypot(horizontalGap, verticalGap)).toBeLessThanOrEqual(24);
|
||||
await page.mouse.move(pointer.x + 24, pointer.y);
|
||||
await page.waitForTimeout(100);
|
||||
const stationaryPreviewBox = await preview.boundingBox();
|
||||
expect(stationaryPreviewBox).not.toBeNull();
|
||||
expect(Math.abs(stationaryPreviewBox!.x - previewBox!.x)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(stationaryPreviewBox!.y - previewBox!.y)).toBeLessThanOrEqual(1);
|
||||
|
||||
await page.locator(".panel-title").filter({ hasText: "组件参数" }).hover();
|
||||
await expect(preview).toHaveCount(0);
|
||||
|
||||
await page.getByLabel("参考压力单位").selectOption("kPa");
|
||||
await expect(page.getByLabel("参考压力", { exact: true })).toHaveValue("100");
|
||||
|
||||
await pressureRow.hover();
|
||||
await page.waitForTimeout(600);
|
||||
await expect(preview.locator(".parameter-help-preview-meta")).toContainText(
|
||||
"默认值：100",
|
||||
);
|
||||
await expect(preview.locator(".parameter-help-preview-meta")).toContainText(
|
||||
"当前单位：kPa",
|
||||
);
|
||||
|
||||
await page.getByRole("button", { name: "生成系统 XML", exact: true }).click();
|
||||
const consolePanel = page.getByRole("complementary", {
|
||||
name: "仿真控制台",
|
||||
exact: true,
|
||||
});
|
||||
await expect(consolePanel.getByLabel("生成的系统 XML")).toContainText(
|
||||
'<Parameter name="reference_pressure" value="100000"',
|
||||
);
|
||||
});
|
||||
|
||||
test("参数表列宽可调整并在刷新后保留", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
const simulationTable = page.getByRole("table", { name: "仿真设置" });
|
||||
const nameHeader = simulationTable.locator("thead .parameter-table-name-cell");
|
||||
const separator = simulationTable.getByRole("separator", {
|
||||
name: "调整参数名列宽",
|
||||
exact: true,
|
||||
});
|
||||
const initialWidth = await nameHeader.evaluate(
|
||||
(element) => element.getBoundingClientRect().width,
|
||||
);
|
||||
const initialValue = Number(await separator.getAttribute("aria-valuenow"));
|
||||
const separatorBox = await separator.boundingBox();
|
||||
expect(separatorBox).not.toBeNull();
|
||||
await page.mouse.move(
|
||||
separatorBox!.x + separatorBox!.width / 2,
|
||||
separatorBox!.y + separatorBox!.height / 2,
|
||||
);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(
|
||||
separatorBox!.x + separatorBox!.width / 2 + 16,
|
||||
separatorBox!.y + separatorBox!.height / 2,
|
||||
{ steps: 3 },
|
||||
);
|
||||
await page.mouse.up();
|
||||
|
||||
await expect(separator).toHaveAttribute(
|
||||
"aria-valuenow",
|
||||
String(initialValue + 16),
|
||||
);
|
||||
const resizedWidth = await nameHeader.evaluate(
|
||||
(element) => element.getBoundingClientRect().width,
|
||||
);
|
||||
expect(resizedWidth).toBeGreaterThan(initialWidth + 14);
|
||||
|
||||
await page.reload();
|
||||
const reloadedTable = page.getByRole("table", { name: "仿真设置" });
|
||||
await expect(
|
||||
reloadedTable.getByRole("separator", {
|
||||
name: "调整参数名列宽",
|
||||
exact: true,
|
||||
}),
|
||||
).toHaveAttribute("aria-valuenow", String(initialValue + 16));
|
||||
|
||||
const wrapOverflow = await reloadedTable.evaluate((table) => {
|
||||
const wrap = table.closest<HTMLElement>(".parameter-table-wrap");
|
||||
return wrap ? wrap.scrollWidth - wrap.clientWidth : Number.POSITIVE_INFINITY;
|
||||
});
|
||||
expect(wrapOverflow).toBeLessThanOrEqual(1);
|
||||
|
||||
const reloadedSeparator = reloadedTable.getByRole("separator", {
|
||||
name: "调整参数名列宽",
|
||||
exact: true,
|
||||
});
|
||||
await reloadedSeparator.dblclick();
|
||||
await expect(reloadedSeparator).toHaveAttribute("aria-valuenow", "112");
|
||||
await reloadedSeparator.focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(reloadedSeparator).toHaveAttribute("aria-valuenow", "120");
|
||||
});
|
||||
Reference in new issue
Block a user