优化参数表样式与科学计数法支持
This commit is contained in:
1 parent
046aa49814
commit
32f21f08ff
6 files changed
+533
-50
No files matched your search
+131
-12
@@ -100,6 +100,7 @@ import {
|
||||
import {
|
||||
evaluateParameterExpression,
|
||||
isParameterExpressionValue,
|
||||
isScientificNotationValue,
|
||||
} from "./parameterExpression";
|
||||
import {
|
||||
WorkspaceViewTabs,
|
||||
@@ -108,6 +109,10 @@ import {
|
||||
|
||||
type ParameterValue = number | string;
|
||||
type UnitQuantity = string;
|
||||
type ParameterScientificNotation = {
|
||||
text: string;
|
||||
unit: string;
|
||||
};
|
||||
type PortKind = "physical" | "signal";
|
||||
type PortNominalRole = "inlet" | "outlet" | "bidirectional" | "input" | "output";
|
||||
type PortSide = "left" | "right";
|
||||
@@ -255,6 +260,7 @@ type SimulationNodeData = {
|
||||
ports: PortDefinition[];
|
||||
parameters: Record<string, ParameterValue>;
|
||||
parameterUnits: Record<string, string>;
|
||||
parameterScientificNotation: Record<string, ParameterScientificNotation>;
|
||||
rotation: NodeRotation;
|
||||
mirrored: boolean;
|
||||
portConnectionStates?: Record<string, PortConnectionState>;
|
||||
@@ -288,8 +294,12 @@ type ProjectNodePayload = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
data: Omit<SimulationNodeData, "parameterUnits"> & {
|
||||
data: Omit<
|
||||
SimulationNodeData,
|
||||
"parameterUnits" | "parameterScientificNotation"
|
||||
> & {
|
||||
parameterUnits?: Record<string, string>;
|
||||
parameterScientificNotation?: Record<string, ParameterScientificNotation>;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1199,6 +1209,7 @@ function buildNodeData(definition: ComponentDefinition): SimulationNodeData {
|
||||
ports: definition.ports.map((port) => ({ ...port })),
|
||||
parameters: defaultParameters(definition),
|
||||
parameterUnits: defaultParameterUnits(definition),
|
||||
parameterScientificNotation: {},
|
||||
rotation: 0,
|
||||
mirrored: false,
|
||||
};
|
||||
@@ -2709,6 +2720,7 @@ function DeferredNumberInput({
|
||||
<input
|
||||
aria-invalid={invalid}
|
||||
aria-label={ariaLabel}
|
||||
className="parameter-number-input"
|
||||
inputMode="text"
|
||||
onBlur={() => {
|
||||
editingRef.current = false;
|
||||
@@ -3971,12 +3983,31 @@ function FlowWorkbench() {
|
||||
const unit = findUnitOption(definition, selectedUnit);
|
||||
const normalizedDisplayValue = displayValue.trim();
|
||||
const numericValue = Number(normalizedDisplayValue);
|
||||
const baseValue =
|
||||
normalizedDisplayValue === "" || !Number.isFinite(numericValue)
|
||||
? normalizedDisplayValue
|
||||
: unit.toBase(numericValue);
|
||||
const hasFiniteNumericValue =
|
||||
normalizedDisplayValue !== "" && Number.isFinite(numericValue);
|
||||
const convertedBaseValue = hasFiniteNumericValue
|
||||
? unit.toBase(numericValue)
|
||||
: numericValue;
|
||||
const baseValue = hasFiniteNumericValue
|
||||
? convertedBaseValue
|
||||
: normalizedDisplayValue;
|
||||
const scientificNotation =
|
||||
hasFiniteNumericValue &&
|
||||
Number.isFinite(convertedBaseValue) &&
|
||||
isScientificNotationValue(normalizedDisplayValue)
|
||||
? { text: normalizedDisplayValue, unit: selectedUnit }
|
||||
: null;
|
||||
|
||||
updateSelectedNode((node) => ({
|
||||
updateSelectedNode((node) => {
|
||||
const parameterScientificNotation = {
|
||||
...node.data.parameterScientificNotation,
|
||||
};
|
||||
if (scientificNotation) {
|
||||
parameterScientificNotation[key] = scientificNotation;
|
||||
} else {
|
||||
delete parameterScientificNotation[key];
|
||||
}
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
@@ -3984,12 +4015,19 @@ function FlowWorkbench() {
|
||||
...node.data.parameters,
|
||||
[key]: baseValue,
|
||||
},
|
||||
parameterScientificNotation,
|
||||
},
|
||||
}));
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const updateSelectedChoice = (key: string, value: number) => {
|
||||
updateSelectedNode((node) => ({
|
||||
updateSelectedNode((node) => {
|
||||
const parameterScientificNotation = {
|
||||
...node.data.parameterScientificNotation,
|
||||
};
|
||||
delete parameterScientificNotation[key];
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
@@ -3997,8 +4035,10 @@ function FlowWorkbench() {
|
||||
...node.data.parameters,
|
||||
[key]: value,
|
||||
},
|
||||
parameterScientificNotation,
|
||||
},
|
||||
}));
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const updateSelectedParameterUnit = (key: string, unit: string) => {
|
||||
@@ -4181,7 +4221,9 @@ function FlowWorkbench() {
|
||||
key === "method"
|
||||
? value
|
||||
: normalizedValue !== "" && Number.isFinite(numericValue)
|
||||
? numericValue
|
||||
? isScientificNotationValue(normalizedValue)
|
||||
? normalizedValue
|
||||
: numericValue
|
||||
: normalizedValue,
|
||||
}));
|
||||
};
|
||||
@@ -4961,6 +5003,7 @@ function FlowWorkbench() {
|
||||
baseValue,
|
||||
definition,
|
||||
selectedUnit,
|
||||
selectedNode.data.parameterScientificNotation[key],
|
||||
);
|
||||
const mediumDefinitionIndex =
|
||||
isAmesimGasMediumDefinition(selectedDefinition) && key === "gi";
|
||||
@@ -5249,7 +5292,7 @@ function FlowWorkbench() {
|
||||
];
|
||||
const parameterTableAvailableWidth = Math.max(
|
||||
0,
|
||||
modelingPaneLayout.propertiesWidth - 24,
|
||||
modelingPaneLayout.propertiesWidth,
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -5900,6 +5943,9 @@ function buildProjectPayload(
|
||||
ports: node.data.ports.map((port) => ({ ...port })),
|
||||
parameters: { ...node.data.parameters },
|
||||
parameterUnits: { ...node.data.parameterUnits },
|
||||
parameterScientificNotation: {
|
||||
...node.data.parameterScientificNotation,
|
||||
},
|
||||
rotation: normalizeNodeRotation(node.data.rotation),
|
||||
mirrored: Boolean(node.data.mirrored),
|
||||
},
|
||||
@@ -5915,6 +5961,33 @@ function buildProjectPayload(
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeParameterScientificNotation(
|
||||
value: unknown,
|
||||
): Record<string, ParameterScientificNotation> {
|
||||
if (!value || typeof value !== "object" || Array.isArray(value)) {
|
||||
return {};
|
||||
}
|
||||
const normalized: Record<string, ParameterScientificNotation> = {};
|
||||
Object.entries(value as Record<string, unknown>).forEach(([key, entry]) => {
|
||||
if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
|
||||
return;
|
||||
}
|
||||
const candidate = entry as Record<string, unknown>;
|
||||
if (
|
||||
typeof candidate.text !== "string" ||
|
||||
typeof candidate.unit !== "string" ||
|
||||
!isScientificNotationValue(candidate.text)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
normalized[key] = {
|
||||
text: candidate.text.trim(),
|
||||
unit: candidate.unit,
|
||||
};
|
||||
});
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function normalizeLoadedNode(
|
||||
node: ProjectNodePayload,
|
||||
componentDefinitions: ComponentDefinition[],
|
||||
@@ -5935,6 +6008,9 @@ function normalizeLoadedNode(
|
||||
const parameterUnits = definition
|
||||
? { ...defaultParameterUnits(definition), ...(node.data.parameterUnits ?? {}) }
|
||||
: { ...(node.data.parameterUnits ?? {}) };
|
||||
const parameterScientificNotation = normalizeParameterScientificNotation(
|
||||
node.data.parameterScientificNotation,
|
||||
);
|
||||
|
||||
return {
|
||||
id: node.id,
|
||||
@@ -5953,6 +6029,7 @@ function normalizeLoadedNode(
|
||||
ports: normalizeLoadedPorts(node.data.ports, definition),
|
||||
parameters,
|
||||
parameterUnits,
|
||||
parameterScientificNotation,
|
||||
rotation: normalizeNodeRotation(node.data.rotation),
|
||||
mirrored: Boolean(node.data.mirrored),
|
||||
},
|
||||
@@ -6190,6 +6267,7 @@ function displayParameterValue(
|
||||
baseValue: ParameterValue,
|
||||
definition: ParameterDefinition,
|
||||
selectedUnit: string,
|
||||
scientificNotation?: ParameterScientificNotation,
|
||||
) {
|
||||
if (typeof baseValue === "string" && baseValue.trim() === "") {
|
||||
return "";
|
||||
@@ -6198,7 +6276,16 @@ function displayParameterValue(
|
||||
if (!Number.isFinite(numericValue)) {
|
||||
return String(baseValue);
|
||||
}
|
||||
return formatEditableNumber(findUnitOption(definition, selectedUnit).fromBase(numericValue));
|
||||
const displayValue = findUnitOption(definition, selectedUnit).fromBase(numericValue);
|
||||
if (
|
||||
scientificNotation &&
|
||||
isScientificNotationValue(scientificNotation.text)
|
||||
) {
|
||||
return scientificNotation.unit === selectedUnit
|
||||
? scientificNotation.text.trim()
|
||||
: formatScientificEditableNumber(displayValue, scientificNotation.text);
|
||||
}
|
||||
return formatEditableNumber(displayValue);
|
||||
}
|
||||
|
||||
function formatEditableNumber(value: number) {
|
||||
@@ -6208,6 +6295,38 @@ function formatEditableNumber(value: number) {
|
||||
return Number(value.toPrecision(12)).toString();
|
||||
}
|
||||
|
||||
const SCIENTIFIC_NOTATION_STYLE_PATTERN =
|
||||
/^[+-]?(?:\d+(?:\.(\d*))?|\.(\d+))([eE])([+-]?)(\d+)$/;
|
||||
|
||||
function formatScientificEditableNumber(value: number, notationHint: string) {
|
||||
if (!Number.isFinite(value)) {
|
||||
return "";
|
||||
}
|
||||
const style = SCIENTIFIC_NOTATION_STYLE_PATTERN.exec(notationHint.trim());
|
||||
if (!style) {
|
||||
return Number(value.toPrecision(12)).toExponential();
|
||||
}
|
||||
|
||||
const minimumFractionDigits = (style[1] ?? style[2] ?? "").length;
|
||||
const exponentMarker = style[3];
|
||||
const showPositiveExponentSign = style[4] === "+";
|
||||
const roundedDisplayValue = Number(value.toPrecision(15));
|
||||
const [rawMantissa, rawExponent] = roundedDisplayValue.toExponential().split("e");
|
||||
const [wholePart, rawFraction = ""] = rawMantissa.split(".");
|
||||
let fraction = rawFraction;
|
||||
while (fraction.endsWith("0") && fraction.length > minimumFractionDigits) {
|
||||
fraction = fraction.slice(0, -1);
|
||||
}
|
||||
if (fraction.length < minimumFractionDigits) {
|
||||
fraction = fraction.padEnd(minimumFractionDigits, "0");
|
||||
}
|
||||
|
||||
const exponent = Number(rawExponent);
|
||||
const exponentSign = exponent < 0 ? "-" : showPositiveExponentSign ? "+" : "";
|
||||
const exponentDigits = String(Math.abs(exponent));
|
||||
return `${wholePart}${fraction ? `.${fraction}` : ""}${exponentMarker}${exponentSign}${exponentDigits}`;
|
||||
}
|
||||
|
||||
function parameterMetadataValue(
|
||||
value: ParameterValue,
|
||||
definition: ParameterDefinition,
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
Fragment,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
@@ -173,7 +174,15 @@ export function ParameterTable({
|
||||
availableWidth,
|
||||
onColumnLayoutChange,
|
||||
}: ParameterTableProps) {
|
||||
const effectiveLayout = effectiveColumnLayout(columnLayout, availableWidth);
|
||||
const tableWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [measuredAvailableWidth, setMeasuredAvailableWidth] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const resolvedAvailableWidth = measuredAvailableWidth ?? availableWidth;
|
||||
const effectiveLayout = effectiveColumnLayout(
|
||||
columnLayout,
|
||||
resolvedAvailableWidth,
|
||||
);
|
||||
const columnDragRef = useRef<ColumnDragState | null>(null);
|
||||
const helpPreviewTimerRef = useRef<number | null>(null);
|
||||
const helpPreviewAnchorRef = useRef<HelpPreviewAnchor | null>(null);
|
||||
@@ -181,6 +190,26 @@ export function ParameterTable({
|
||||
useState<ColumnName | null>(null);
|
||||
const [helpPreview, setHelpPreview] = useState<HelpPreviewState | null>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const wrap = tableWrapRef.current;
|
||||
if (!wrap) {
|
||||
return;
|
||||
}
|
||||
const measureAvailableWidth = () => {
|
||||
const nextWidth = wrap.clientWidth;
|
||||
if (nextWidth <= 0) {
|
||||
return;
|
||||
}
|
||||
setMeasuredAvailableWidth((currentWidth) =>
|
||||
currentWidth === nextWidth ? currentWidth : nextWidth,
|
||||
);
|
||||
};
|
||||
measureAvailableWidth();
|
||||
const observer = new ResizeObserver(measureAvailableWidth);
|
||||
observer.observe(wrap);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const dismissHelpPreview = useCallback(() => {
|
||||
if (helpPreviewTimerRef.current !== null) {
|
||||
window.clearTimeout(helpPreviewTimerRef.current);
|
||||
@@ -258,7 +287,9 @@ export function ParameterTable({
|
||||
column === "name"
|
||||
? { ...startLayout, nameWidth: startLayout.nameWidth + boundaryDelta }
|
||||
: { ...startLayout, unitWidth: startLayout.unitWidth - boundaryDelta };
|
||||
onColumnLayoutChange(effectiveColumnLayout(proposed, availableWidth));
|
||||
onColumnLayoutChange(
|
||||
effectiveColumnLayout(proposed, resolvedAvailableWidth),
|
||||
);
|
||||
};
|
||||
|
||||
const startColumnResize = (
|
||||
@@ -311,11 +342,17 @@ export function ParameterTable({
|
||||
|
||||
const nameColumnMaximum = Math.max(
|
||||
MIN_NAME_WIDTH,
|
||||
Math.min(MAX_NAME_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.unitWidth),
|
||||
Math.min(
|
||||
MAX_NAME_WIDTH,
|
||||
resolvedAvailableWidth - MIN_VALUE_WIDTH - effectiveLayout.unitWidth,
|
||||
),
|
||||
);
|
||||
const unitColumnMaximum = Math.max(
|
||||
MIN_UNIT_WIDTH,
|
||||
Math.min(MAX_UNIT_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.nameWidth),
|
||||
Math.min(
|
||||
MAX_UNIT_WIDTH,
|
||||
resolvedAvailableWidth - MIN_VALUE_WIDTH - effectiveLayout.nameWidth,
|
||||
),
|
||||
);
|
||||
const tableStyle = {
|
||||
"--parameter-name-width": `${effectiveLayout.nameWidth}px`,
|
||||
@@ -369,6 +406,7 @@ export function ParameterTable({
|
||||
<div
|
||||
className={`parameter-table-wrap ${activeColumnResize ? `resizing-${activeColumnResize}` : ""}`}
|
||||
data-resizing-column={activeColumnResize ?? undefined}
|
||||
ref={tableWrapRef}
|
||||
>
|
||||
<table aria-label={ariaLabel} className="parameter-table" style={tableStyle}>
|
||||
<colgroup>
|
||||
|
||||
@@ -13,6 +13,14 @@ const NUMERIC_LITERAL_PATTERN =
|
||||
const UNSIGNED_NUMBER_PREFIX =
|
||||
/^(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?/;
|
||||
|
||||
export function isScientificNotationValue(value: number | string): value is string {
|
||||
if (typeof value !== "string") {
|
||||
return false;
|
||||
}
|
||||
const trimmed = value.trim();
|
||||
return NUMERIC_LITERAL_PATTERN.test(trimmed) && /[eE]/.test(trimmed);
|
||||
}
|
||||
|
||||
type TokenKind =
|
||||
| "number"
|
||||
| "identifier"
|
||||
|
||||
+92
-34
@@ -447,6 +447,17 @@ textarea {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.properties .panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-bottom-color: #c7cdd4;
|
||||
color: #293642;
|
||||
background: #f2f4f6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.palette-list {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
@@ -461,13 +472,13 @@ textarea {
|
||||
.parameter-table-wrap {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 12px 12px;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.parameter-table-wrap.parameter-form {
|
||||
display: block;
|
||||
padding: 0 12px 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.parameter-table {
|
||||
@@ -475,27 +486,30 @@ textarea {
|
||||
--parameter-unit-width: 72px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid #cbd5df;
|
||||
border: 0;
|
||||
border-spacing: 0;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
color: #263442;
|
||||
background: #ffffff;
|
||||
table-layout: fixed;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.parameter-table-head .parameter-table-cell {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
top: 0;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
overflow: visible;
|
||||
border-bottom-color: #bfcbd7;
|
||||
color: #475569;
|
||||
background: #edf1f5;
|
||||
font-size: 10px;
|
||||
border-right-color: #c4cad1;
|
||||
border-bottom-color: #b9c1c9;
|
||||
color: #35414c;
|
||||
background: #e3e6e9;
|
||||
box-shadow: 0 1px 0 rgba(51, 65, 85, 0.06);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.parameter-table-head .parameter-table-name-cell {
|
||||
@@ -507,16 +521,21 @@ textarea {
|
||||
}
|
||||
|
||||
.parameter-table-row {
|
||||
height: 36px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.parameter-table-head-row {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.parameter-table-cell {
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 2px 6px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 7px;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #d9e0e7;
|
||||
border-bottom: 1px solid #d9e0e7;
|
||||
border-right: 1px solid #d5d9de;
|
||||
border-bottom: 1px solid #e1e4e7;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -524,8 +543,22 @@ textarea {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.parameter-table
|
||||
> tbody
|
||||
> .parameter-table-row:nth-child(even)
|
||||
> .parameter-table-cell {
|
||||
background: #f3f4f5;
|
||||
}
|
||||
|
||||
.parameter-table > tbody > .parameter-table-row:hover > .parameter-table-cell {
|
||||
background: #f8fbfe;
|
||||
background: #eaf3f8;
|
||||
}
|
||||
|
||||
.parameter-table
|
||||
> tbody
|
||||
> .parameter-table-row:focus-within
|
||||
> .parameter-table-cell {
|
||||
background: #deedf5;
|
||||
}
|
||||
|
||||
.parameter-table-row:focus-visible {
|
||||
@@ -537,16 +570,21 @@ textarea {
|
||||
.parameter-table-name-cell {
|
||||
overflow: hidden;
|
||||
color: #344256;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.parameter-table > tbody .parameter-table-name-cell {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.parameter-value-cell,
|
||||
.parameter-table-value-cell,
|
||||
.parameter-unit-cell,
|
||||
.parameter-table-unit-cell {
|
||||
min-width: 0;
|
||||
padding: 2px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.parameter-unit-cell,
|
||||
@@ -561,30 +599,44 @@ textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
height: 30px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #d5dde6;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1px;
|
||||
outline: 0;
|
||||
color: #1f2933;
|
||||
background: #ffffff;
|
||||
font-size: 11px;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.parameter-table-cell select {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.parameter-table > tbody .parameter-table-value-cell,
|
||||
.parameter-table > tbody .parameter-table-value-cell input,
|
||||
.parameter-table > tbody .parameter-table-value-cell select {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.parameter-table > tbody .parameter-table-value-cell select {
|
||||
text-align-last: right;
|
||||
}
|
||||
|
||||
.parameter-table-cell input:hover:not(:disabled),
|
||||
.parameter-table-cell select:hover:not(:disabled) {
|
||||
border-color: #aebdcb;
|
||||
border-color: #aebbc7;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.parameter-table-cell input:focus,
|
||||
.parameter-table-cell select:focus {
|
||||
border-color: #1d6fb8;
|
||||
outline: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 0 0 1px #1d6fb8;
|
||||
}
|
||||
|
||||
@@ -597,24 +649,27 @@ textarea {
|
||||
.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;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.parameter-read-only-value,
|
||||
.parameter-table-read-only-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d5dde6;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #526172;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: #f4f6f8;
|
||||
background: transparent;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@@ -628,7 +683,10 @@ textarea {
|
||||
content: "—";
|
||||
}
|
||||
|
||||
.parameter-table-row.invalid > .parameter-table-cell {
|
||||
.parameter-table
|
||||
> tbody
|
||||
> .parameter-table-row.invalid
|
||||
> .parameter-table-cell {
|
||||
background: #fff8f7;
|
||||
}
|
||||
|
||||
|
||||
@@ -146,6 +146,16 @@ export const componentCatalog = {
|
||||
minimumExclusive: true,
|
||||
description: "用于验证参数表单位换算和 XML 基础单位输出的参考压力。",
|
||||
},
|
||||
{
|
||||
name: "reference_temperature",
|
||||
label: "参考温度",
|
||||
quantity: "temperature",
|
||||
unit: "K",
|
||||
default: 300,
|
||||
minimum: 0,
|
||||
minimumExclusive: false,
|
||||
description: "用于验证带偏移量单位的数值换算和显示精度。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -41,6 +41,7 @@ test("组件参数和仿真设置使用共享的三列表格", async ({ page })
|
||||
"节点 ID",
|
||||
"介质物性索引",
|
||||
"参考压力",
|
||||
"参考温度",
|
||||
]);
|
||||
await expect(simulationTable.getByRole("rowheader")).toHaveText([
|
||||
"起始时间",
|
||||
@@ -64,6 +65,173 @@ test("组件参数和仿真设置使用共享的三列表格", async ({ page })
|
||||
.locator("thead .parameter-table-name-cell")
|
||||
.evaluate((element) => element.getBoundingClientRect().width);
|
||||
expect(Math.abs(componentNameWidth - simulationNameWidth)).toBeLessThanOrEqual(1);
|
||||
|
||||
const panelTitleHeights = await page
|
||||
.locator(".properties .panel-title")
|
||||
.evaluateAll((elements) =>
|
||||
elements.map((element) => element.getBoundingClientRect().height),
|
||||
);
|
||||
expect(panelTitleHeights).toHaveLength(2);
|
||||
panelTitleHeights.forEach((height) => expect(height).toBeLessThanOrEqual(32));
|
||||
|
||||
const compactTableMetrics = await page
|
||||
.locator(".properties .parameter-table")
|
||||
.evaluateAll((tables) =>
|
||||
tables.map((table) => {
|
||||
const content = table.closest<HTMLElement>(".properties-subpane-content");
|
||||
const headerCell = table.querySelector<HTMLElement>("thead th");
|
||||
const bodyRows = Array.from(
|
||||
table.querySelectorAll<HTMLElement>("tbody .parameter-table-row"),
|
||||
);
|
||||
const control = table.querySelector<HTMLElement>("input, select");
|
||||
if (!content || !headerCell || !control) {
|
||||
throw new Error("参数表缺少布局测量所需的元素");
|
||||
}
|
||||
const tableBounds = table.getBoundingClientRect();
|
||||
const contentBounds = content.getBoundingClientRect();
|
||||
const tableStyle = getComputedStyle(table);
|
||||
const contentLeft = contentBounds.left + content.clientLeft;
|
||||
const contentRight = contentLeft + content.clientWidth;
|
||||
const controlBounds = control.getBoundingClientRect();
|
||||
const controlCell = control.closest<HTMLElement>("td");
|
||||
if (!controlCell) {
|
||||
throw new Error("参数控件不在数据单元格中");
|
||||
}
|
||||
const controlCellBounds = controlCell.getBoundingClientRect();
|
||||
return {
|
||||
leftInset: tableBounds.left - contentLeft,
|
||||
rightInset: contentRight - tableBounds.right,
|
||||
borderRadius: tableStyle.borderRadius,
|
||||
borderTopWidth: tableStyle.borderTopWidth,
|
||||
headerHeight: headerCell.getBoundingClientRect().height,
|
||||
headerPosition: getComputedStyle(headerCell).position,
|
||||
maximumRowHeight: Math.max(
|
||||
...bodyRows.map((row) => row.getBoundingClientRect().height),
|
||||
),
|
||||
controlHeight: controlBounds.height,
|
||||
controlContained:
|
||||
controlBounds.left >= controlCellBounds.left - 0.5 &&
|
||||
controlBounds.right <= controlCellBounds.right + 0.5 &&
|
||||
controlBounds.top >= controlCellBounds.top - 0.5 &&
|
||||
controlBounds.bottom <= controlCellBounds.bottom + 0.5,
|
||||
};
|
||||
}),
|
||||
);
|
||||
expect(compactTableMetrics).toHaveLength(2);
|
||||
compactTableMetrics.forEach((metrics) => {
|
||||
expect(Math.abs(metrics.leftInset)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(metrics.rightInset)).toBeLessThanOrEqual(1);
|
||||
expect(metrics.borderRadius).toBe("0px");
|
||||
expect(metrics.borderTopWidth).toBe("0px");
|
||||
expect(metrics.headerHeight).toBeLessThanOrEqual(28);
|
||||
expect(metrics.headerPosition).toBe("sticky");
|
||||
expect(metrics.maximumRowHeight).toBeLessThanOrEqual(32);
|
||||
expect(metrics.controlHeight).toBeGreaterThanOrEqual(22);
|
||||
expect(metrics.controlHeight).toBeLessThanOrEqual(28);
|
||||
expect(metrics.controlContained).toBe(true);
|
||||
});
|
||||
await expect(
|
||||
componentTable.getByRole("rowheader", {
|
||||
name: "组件名称",
|
||||
exact: true,
|
||||
}),
|
||||
).toHaveCSS("text-align", "left");
|
||||
await expect(page.getByLabel("参考压力", { exact: true })).toHaveCSS(
|
||||
"text-align",
|
||||
"right",
|
||||
);
|
||||
const valueColumnAlignment = await page
|
||||
.locator(".properties .parameter-table tbody .parameter-table-value-cell")
|
||||
.evaluateAll((cells) =>
|
||||
cells.every((cell) => {
|
||||
const controls = Array.from(
|
||||
cell.querySelectorAll<HTMLElement>("input, select"),
|
||||
);
|
||||
return (
|
||||
getComputedStyle(cell).textAlign === "right" &&
|
||||
controls.every(
|
||||
(control) => getComputedStyle(control).textAlign === "right",
|
||||
)
|
||||
);
|
||||
}),
|
||||
);
|
||||
expect(valueColumnAlignment).toBe(true);
|
||||
await expect(
|
||||
componentTable.locator(".parameter-table-read-only-value").first(),
|
||||
).toHaveCSS("justify-content", "flex-end");
|
||||
await expect(page.getByLabel("介质物性索引", { exact: true })).toHaveCSS(
|
||||
"text-align-last",
|
||||
"right",
|
||||
);
|
||||
const solver = page.getByLabel("求解器", { exact: true });
|
||||
await expect(solver).toHaveCSS("text-align", "right");
|
||||
await expect(solver).toHaveCSS("text-align-last", "right");
|
||||
await solver.selectOption("Radau");
|
||||
await expect(solver).toHaveValue("Radau");
|
||||
});
|
||||
|
||||
test("最窄参数面板滚动时表头固定且值列保持可用宽度", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await addPneumaticTestComponent(page);
|
||||
|
||||
const widthSeparator = page.getByRole("separator", {
|
||||
name: "调整参数面板宽度",
|
||||
exact: true,
|
||||
});
|
||||
await widthSeparator.focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(widthSeparator).toHaveAttribute("aria-valuenow", "280");
|
||||
|
||||
const heightSeparator = page.getByRole("separator", {
|
||||
name: "调整组件参数和仿真设置区域高度",
|
||||
exact: true,
|
||||
});
|
||||
await heightSeparator.focus();
|
||||
for (let step = 0; step < 11; step += 1) {
|
||||
await page.keyboard.press("ArrowUp");
|
||||
}
|
||||
await expect(heightSeparator).toHaveAttribute("aria-valuenow", "120");
|
||||
|
||||
const componentContent = page
|
||||
.getByRole("region", { name: "组件参数子栏", exact: true })
|
||||
.locator(".properties-subpane-content");
|
||||
await expect
|
||||
.poll(() =>
|
||||
componentContent.evaluate(
|
||||
(element) => element.scrollHeight - element.clientHeight,
|
||||
),
|
||||
)
|
||||
.toBeGreaterThan(0);
|
||||
await componentContent.evaluate((element) => {
|
||||
element.scrollTop = 48;
|
||||
});
|
||||
await expect
|
||||
.poll(() => componentContent.evaluate((element) => element.scrollTop))
|
||||
.toBeGreaterThan(0);
|
||||
|
||||
const narrowLayout = await componentContent.evaluate((content) => {
|
||||
const header = content.querySelector<HTMLElement>(
|
||||
"thead .parameter-table-name-cell",
|
||||
);
|
||||
const valueHeader = content.querySelector<HTMLElement>(
|
||||
"thead .parameter-table-value-cell",
|
||||
);
|
||||
const wrap = content.querySelector<HTMLElement>(".parameter-table-wrap");
|
||||
if (!header || !valueHeader || !wrap) {
|
||||
throw new Error("无法测量最窄参数表布局");
|
||||
}
|
||||
return {
|
||||
stickyTopDelta:
|
||||
header.getBoundingClientRect().top - content.getBoundingClientRect().top,
|
||||
valueWidth: valueHeader.getBoundingClientRect().width,
|
||||
horizontalOverflow: wrap.scrollWidth - wrap.clientWidth,
|
||||
};
|
||||
});
|
||||
expect(Math.abs(narrowLayout.stickyTopDelta)).toBeLessThanOrEqual(1);
|
||||
expect(narrowLayout.valueWidth).toBeGreaterThanOrEqual(95);
|
||||
expect(narrowLayout.horizontalOverflow).toBeLessThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("参数说明延迟显示,单位切换不改变 XML 基础值", async ({ page }) => {
|
||||
@@ -140,6 +308,63 @@ test("参数说明延迟显示,单位切换不改变 XML 基础值", async ({
|
||||
);
|
||||
});
|
||||
|
||||
test("科学计数法在提交、单位换算和工程加载后保持", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await addPneumaticTestComponent(page);
|
||||
|
||||
const pressureInput = page.getByLabel("参考压力", { exact: true });
|
||||
const pressureUnit = page.getByLabel("参考压力单位", { exact: true });
|
||||
|
||||
await pressureInput.fill("1e-5");
|
||||
await pressureInput.press("Enter");
|
||||
await pressureUnit.selectOption("kPa");
|
||||
await expect(pressureInput).toHaveValue("1e-8");
|
||||
await pressureUnit.selectOption("Pa");
|
||||
await expect(pressureInput).toHaveValue("1e-5");
|
||||
|
||||
await pressureUnit.selectOption("kPa");
|
||||
await pressureInput.fill("1.234567890123E+3");
|
||||
await pressureInput.press("Enter");
|
||||
await pressureUnit.selectOption("Pa");
|
||||
await expect(pressureInput).toHaveValue("1.234567890123E+6");
|
||||
await pressureUnit.selectOption("kPa");
|
||||
await expect(pressureInput).toHaveValue("1.234567890123E+3");
|
||||
|
||||
await pressureInput.fill("1.20E+3");
|
||||
await pressureInput.press("Enter");
|
||||
await pressureUnit.selectOption("Pa");
|
||||
await expect(pressureInput).toHaveValue("1.20E+6");
|
||||
await pressureUnit.selectOption("kPa");
|
||||
await expect(pressureInput).toHaveValue("1.20E+3");
|
||||
|
||||
const temperatureInput = page.getByLabel("参考温度", { exact: true });
|
||||
const temperatureUnit = page.getByLabel("参考温度单位", { exact: true });
|
||||
await temperatureUnit.selectOption("degC");
|
||||
await temperatureInput.fill("1e-10");
|
||||
await temperatureInput.press("Enter");
|
||||
await temperatureUnit.selectOption("K");
|
||||
await expect(temperatureInput).toHaveValue("2.731500000001e2");
|
||||
await temperatureUnit.selectOption("degC");
|
||||
await expect(temperatureInput).toHaveValue("1e-10");
|
||||
|
||||
await page.getByRole("button", { name: "保存工程", exact: true }).click();
|
||||
await pressureInput.fill("2");
|
||||
await pressureInput.press("Enter");
|
||||
await page.getByRole("button", { name: "加载工程", exact: true }).click();
|
||||
await page
|
||||
.locator('.flow-canvas .react-flow__node[data-id="amesim_pneumatic_test_1"]')
|
||||
.click();
|
||||
await expect(pressureUnit).toHaveValue("kPa");
|
||||
await expect(pressureInput).toHaveValue("1.20E+3");
|
||||
await expect(temperatureUnit).toHaveValue("degC");
|
||||
await expect(temperatureInput).toHaveValue("1e-10");
|
||||
|
||||
await page.getByRole("button", { name: "生成系统 XML", exact: true }).click();
|
||||
await expect(page.getByLabel("生成的系统 XML")).toContainText(
|
||||
'<Parameter name="reference_pressure" value="1200000"',
|
||||
);
|
||||
});
|
||||
|
||||
test("参数表列宽可调整并在刷新后保留", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
@@ -388,3 +613,28 @@ test("仿真数值设置同样保留公式,并在执行协议中使用计算
|
||||
await expect(xmlBlock).toContainText('tStop="7"');
|
||||
await expect(xmlBlock).not.toContainText(expression);
|
||||
});
|
||||
|
||||
test("仿真数值设置中的科学计数法在保存加载后保持", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
const stepInput = page.getByLabel("采样步长", { exact: true });
|
||||
const maxStepInput = page.getByLabel("最大积分步长", { exact: true });
|
||||
await stepInput.fill("1e-5");
|
||||
await stepInput.press("Enter");
|
||||
await maxStepInput.fill("1.20E-4");
|
||||
await maxStepInput.press("Enter");
|
||||
|
||||
await page.getByRole("button", { name: "保存工程", exact: true }).click();
|
||||
await stepInput.fill("0.1");
|
||||
await stepInput.press("Enter");
|
||||
await maxStepInput.fill("0.01");
|
||||
await maxStepInput.press("Enter");
|
||||
await page.getByRole("button", { name: "加载工程", exact: true }).click();
|
||||
|
||||
await expect(stepInput).toHaveValue("1e-5");
|
||||
await expect(maxStepInput).toHaveValue("1.20E-4");
|
||||
await page.getByRole("button", { name: "生成系统 XML", exact: true }).click();
|
||||
const xmlBlock = page.getByLabel("生成的系统 XML");
|
||||
await expect(xmlBlock).toContainText('step="0.00001"');
|
||||
await expect(xmlBlock).toContainText('maxStep="0.00012"');
|
||||
});
|
||||
Reference in new issue
Block a user