完善建模交互与结果曲线功能
支持元件接口接触吸附、旋转后兼容连接及无连线逻辑边。 完善 AMESim 图标显示、参数双栏、结果曲线待定窗口及相关端到端测试。
This commit is contained in:
ljz committed
1 parent
410ef535e8
commit
503394f3ed
10 files changed
+2542
-389
No files matched your search
+201
-12
@@ -293,6 +293,7 @@ textarea {
|
||||
.workbench {
|
||||
--palette-width: 230px;
|
||||
--properties-width: 330px;
|
||||
--component-parameters-height: 340px;
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--palette-width) 7px minmax(0, 1fr) 7px
|
||||
@@ -306,6 +307,11 @@ textarea {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.workbench.resizing-component-parameters-height {
|
||||
cursor: row-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.modeling-pane-splitter {
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
@@ -367,6 +373,71 @@ textarea {
|
||||
|
||||
.properties {
|
||||
border-left: 0;
|
||||
display: grid;
|
||||
grid-template-rows:
|
||||
minmax(0, var(--component-parameters-height)) 7px
|
||||
minmax(120px, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.properties-subpane {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.properties-subpane-content {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.properties-pane-splitter {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
min-height: 7px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
place-items: center;
|
||||
background: #eef2f6;
|
||||
cursor: row-resize;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.properties-pane-splitter::before {
|
||||
position: absolute;
|
||||
inset: 3px 0 auto;
|
||||
height: 1px;
|
||||
background: #c7d1dc;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.properties-pane-splitter span {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: #9eacbb;
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.properties-pane-splitter:hover span,
|
||||
.properties-pane-splitter:focus-visible span,
|
||||
.workbench.resizing-component-parameters-height .properties-pane-splitter span {
|
||||
background: #1d6fb8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.properties-pane-splitter:focus-visible {
|
||||
outline: 2px solid #1d6fb8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
@@ -1229,15 +1300,15 @@ textarea {
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 112px;
|
||||
height: 84px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.node-symbol {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 112px;
|
||||
height: 84px;
|
||||
place-items: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
@@ -1248,28 +1319,34 @@ textarea {
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare .sim-node-frame,
|
||||
.sim-node.symbol-presentation-bare.selected .sim-node-frame {
|
||||
.sim-node.symbol-presentation-bare.selected .sim-node-frame,
|
||||
.sim-node.component-icon-only .sim-node-frame,
|
||||
.sim-node.component-icon-only.selected .sim-node-frame {
|
||||
border-width: 0;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare .node-label {
|
||||
.sim-node.symbol-presentation-bare .node-label,
|
||||
.sim-node.component-icon-only .node-label {
|
||||
display: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sim-node.symbol-presentation-bare.selected .component-symbol-svg {
|
||||
.sim-node.symbol-presentation-bare.selected .component-symbol-svg,
|
||||
.sim-node.component-icon-only.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
|
||||
.sim-node.component-icon-only
|
||||
.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
|
||||
.sim-node.component-icon-only
|
||||
.component-symbol-svg {
|
||||
filter: drop-shadow(0 0 3px rgba(192, 138, 22, 0.68));
|
||||
}
|
||||
@@ -1310,10 +1387,49 @@ textarea {
|
||||
|
||||
.port-handle {
|
||||
z-index: 3;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #374151;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
box-sizing: border-box;
|
||||
border: 1.5px solid var(--port-handle-color, #475569);
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
|
||||
opacity: 1;
|
||||
transition: opacity 100ms ease, border-color 100ms ease,
|
||||
background 100ms ease, box-shadow 100ms ease;
|
||||
}
|
||||
|
||||
.port-handle-physical {
|
||||
--port-handle-color: #a12b70;
|
||||
}
|
||||
|
||||
.port-handle-signal {
|
||||
--port-handle-color: #dc2626;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.port-handle.port-connection-connected {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.port-handle.port-connection-origin {
|
||||
border-color: #d97706;
|
||||
background: #fff7d6;
|
||||
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.24),
|
||||
0 0 8px rgba(217, 119, 6, 0.42);
|
||||
}
|
||||
|
||||
.port-handle.port-connection-compatible {
|
||||
border-color: #15803d;
|
||||
background: #dcfce7;
|
||||
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.24),
|
||||
0 0 9px rgba(21, 128, 61, 0.48);
|
||||
}
|
||||
|
||||
.port-handle.port-connection-incompatible {
|
||||
pointer-events: none;
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
.flow-canvas .react-flow__edge-path,
|
||||
@@ -1342,6 +1458,38 @@ textarea {
|
||||
filter: drop-shadow(0 0 2px rgba(29, 111, 184, 0.42));
|
||||
}
|
||||
|
||||
.contact-edge-hit {
|
||||
cursor: pointer;
|
||||
fill: transparent;
|
||||
pointer-events: all;
|
||||
stroke: transparent;
|
||||
}
|
||||
|
||||
.contact-edge-marker {
|
||||
fill: #ffffff;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
stroke: #64748b;
|
||||
stroke-width: 1.5;
|
||||
transition: opacity 120ms ease-out, fill 120ms ease-out, stroke 120ms ease-out;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.react-flow__edge.editor-edge-contact:hover .contact-edge-marker,
|
||||
.react-flow__edge.editor-edge-contact.selected .contact-edge-marker,
|
||||
.react-flow__edge.editor-edge-contact.editor-edge-selected .contact-edge-marker,
|
||||
.contact-edge-hit:focus-visible + .contact-edge-marker {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.react-flow__edge.editor-edge-contact.selected .contact-edge-marker,
|
||||
.react-flow__edge.editor-edge-contact.editor-edge-selected .contact-edge-marker,
|
||||
.contact-edge-hit:focus-visible + .contact-edge-marker {
|
||||
fill: #dbeafe;
|
||||
stroke: #1d6fb8;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
@@ -1791,6 +1939,15 @@ textarea {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.results-system-canvas .contact-edge-hit {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.results-system-canvas .contact-edge-marker {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.results-chart-workspace {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
@@ -1834,6 +1991,38 @@ textarea {
|
||||
0 7px 20px rgba(30, 41, 59, 0.18);
|
||||
}
|
||||
|
||||
.result-chart-pending {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 7px;
|
||||
margin: 16px;
|
||||
padding: 24px;
|
||||
border: 1px dashed #9aaaba;
|
||||
border-radius: 5px;
|
||||
color: #718096;
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.result-chart-pending strong {
|
||||
color: #43556a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-chart-pending span {
|
||||
max-width: 300px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.result-chart-window.pending.drop-target .result-chart-pending {
|
||||
border-color: #1d6fb8;
|
||||
color: #1d6fb8;
|
||||
background: #edf6fd;
|
||||
}
|
||||
|
||||
.result-chart-window-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in new issue
Block a user