68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
// /static/js/graph/style.js
|
|
export const baseStyles = [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'shape': 'round-rectangle',
|
|
'background-color': '#e8f0ff',
|
|
'border-color': '#0ea5e9',
|
|
'border-width': 2,
|
|
'label': 'data(label)',
|
|
'color': '#0f172a',
|
|
'text-valign': 'center',
|
|
'text-halign': 'center',
|
|
'font-size': 12,
|
|
'text-wrap': 'wrap',
|
|
'text-max-width': 140,
|
|
'padding': '8px',
|
|
'width': 100,
|
|
'height': 50
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'line-color': '#64748b',
|
|
'width': 2,
|
|
'curve-style': 'straight',
|
|
|
|
// NEW: static “middle of edge” label
|
|
'label': 'data(midLabel)',
|
|
'text-rotation': 'autorotate',
|
|
'text-margin-y': -8, // nudge mid-label off the line a bit
|
|
|
|
// keep your side labels for “where the IP sits”
|
|
'source-label': 'data(sourceLabel)',
|
|
'target-label': 'data(targetLabel)',
|
|
'source-text-offset': 50,
|
|
'target-text-offset': 50,
|
|
|
|
'font-size': 11,
|
|
'color': '#334155',
|
|
'text-background-color': '#ffffff',
|
|
'text-background-opacity': 0.9,
|
|
'text-background-shape': 'round-rectangle',
|
|
'text-background-padding': 2,
|
|
'text-outline-color': '#ffffff',
|
|
'text-outline-width': 1
|
|
}
|
|
},
|
|
{
|
|
selector: ':selected',
|
|
style: { 'border-width': 3, 'border-color': '#22d3ee', 'line-color': '#22d3ee' }
|
|
},
|
|
|
|
// Optional: make compound parents (like Proxmox) look like containers
|
|
{
|
|
selector: ':parent',
|
|
style: {
|
|
'background-color': '#f8fafc',
|
|
'border-color': '#94a3b8',
|
|
'border-width': 2,
|
|
'padding': '12px',
|
|
'text-valign': 'top',
|
|
'text-halign': 'center',
|
|
'font-weight': '600'
|
|
}
|
|
}
|
|
]; |