eb9c20e734
Double-click a DIRECT or SEDA node to navigate into that route's diagram. Breadcrumbs show the route stack and allow clicking back to any level. Escape key goes back one level. Route ID resolution handles camelCase endpoint URIs mapping to kebab-case route IDs (e.g. direct:callGetProduct → call-get-product) using the catalog's known route IDs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
160 lines
3.0 KiB
CSS
160 lines
3.0 KiB
CSS
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
overflow: hidden;
|
|
background: var(--bg-surface, #FFFFFF);
|
|
border: 1px solid var(--border, #E4DFD8);
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
.svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
outline: none;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
color: var(--text-muted, #9C9184);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
color: var(--error, #C0392B);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.zoomControls {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: var(--bg-surface, #FFFFFF);
|
|
border: 1px solid var(--border, #E4DFD8);
|
|
border-radius: var(--radius-sm, 5px);
|
|
padding: 4px;
|
|
box-shadow: var(--shadow-md, 0 2px 8px rgba(44, 37, 32, 0.08));
|
|
}
|
|
|
|
.zoomBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-primary, #1A1612);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm, 5px);
|
|
}
|
|
|
|
.zoomBtn:hover {
|
|
background: var(--bg-hover, #F5F0EA);
|
|
}
|
|
|
|
.zoomLevel {
|
|
font-size: 11px;
|
|
color: var(--text-muted, #9C9184);
|
|
min-width: 36px;
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
background: var(--bg-surface, #FFFFFF);
|
|
border: 1px solid var(--border, #E4DFD8);
|
|
border-radius: var(--radius-sm, 5px);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(44, 37, 32, 0.06));
|
|
z-index: 10;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.breadcrumbItem {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.breadcrumbSep {
|
|
margin: 0 6px;
|
|
color: var(--text-muted, #9C9184);
|
|
}
|
|
|
|
.breadcrumbLink {
|
|
background: none;
|
|
border: none;
|
|
color: var(--running, #1A7F8E);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.breadcrumbLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumbCurrent {
|
|
color: var(--text-primary, #1A1612);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nodeToolbar {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 3px 4px;
|
|
background: var(--bg-surface, #FFFFFF);
|
|
border: 1px solid var(--border, #E4DFD8);
|
|
border-radius: var(--radius-sm, 5px);
|
|
box-shadow: var(--shadow-lg, 0 4px 16px rgba(44, 37, 32, 0.10));
|
|
transform: translate(-50%, -100%);
|
|
margin-top: -6px;
|
|
z-index: 10;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.nodeToolbarBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-secondary, #5C5347);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm, 5px);
|
|
padding: 0;
|
|
}
|
|
|
|
.nodeToolbarBtn:hover {
|
|
background: var(--bg-hover, #F5F0EA);
|
|
color: var(--text-primary, #1A1612);
|
|
}
|