metanka/test-x6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: vertical site stacking and tighter device layout
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Sites now stack vertically (top to bottom) instead of a horizontal
row. Reduced nodesep/margins for tighter horizontal device grouping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alina
2026-02-18 10:05:28 +03:00
parent 75585a1726
commit 669180a406
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/features/schema/layout/dagre-layout.ts
View File

@ -59,10 +59,10 @@ function layoutSiteDevices(
g.setDefaultEdgeLabel(() => ({})); g.setDefaultEdgeLabel(() => ({}));
g.setGraph({ g.setGraph({
rankdir: 'TB', rankdir: 'TB',
nodesep: 50, nodesep: 30,
ranksep: 70, ranksep: 60,
marginx: 20, marginx: 10,
marginy: 20, marginy: 10,
}); });
const deviceIdSet = new Set(devices.map((d) => d.id)); const deviceIdSet = new Set(devices.map((d) => d.id));
@ -185,16 +185,16 @@ export function applyDagreLayout(graph: Graph): void {
graph.startBatch('dagre-layout'); graph.startBatch('dagre-layout');
let cursorX = 50; const startX = 50;
const siteGap = 120; let cursorY = 50;
const startY = 50; const siteGap = 80;
for (const rootSite of rootSites) { for (const rootSite of rootSites) {
const rootDevices = getDeviceChildren(rootSite); const rootDevices = getDeviceChildren(rootSite);
// Layout root site devices // Layout root site devices
const devicesOffsetX = cursorX + SITE_PADDING; const devicesOffsetX = startX + SITE_PADDING;
const devicesOffsetY = startY + SITE_HEADER_HEIGHT + SITE_PADDING; const devicesOffsetY = cursorY + SITE_HEADER_HEIGHT + SITE_PADDING;
const devicesBbox = layoutSiteDevices( const devicesBbox = layoutSiteDevices(
graph, graph,
rootDevices, rootDevices,
@ -215,7 +215,7 @@ export function applyDagreLayout(graph: Graph): void {
); );
if (childSites.length > 0) { if (childSites.length > 0) {
let childCursorX = cursorX + SITE_PADDING; let childCursorX = startX + SITE_PADDING;
const childSiteYStart = contentMaxY + SITE_PADDING; const childSiteYStart = contentMaxY + SITE_PADDING;
for (const childSite of childSites) { for (const childSite of childSites) {
@ -250,8 +250,8 @@ export function applyDagreLayout(graph: Graph): void {
} }
// Size root site to wrap all content (devices + child sites) // Size root site to wrap all content (devices + child sites)
const rootSiteX = Math.min(cursorX, contentMinX - SITE_PADDING); const rootSiteX = Math.min(startX, contentMinX - SITE_PADDING);
const rootSiteY = startY; const rootSiteY = cursorY;
const rootSiteW = Math.max( const rootSiteW = Math.max(
contentMaxX - rootSiteX + SITE_PADDING, contentMaxX - rootSiteX + SITE_PADDING,
250, 250,
@ -261,7 +261,7 @@ export function applyDagreLayout(graph: Graph): void {
rootSite.setPosition(rootSiteX, rootSiteY); rootSite.setPosition(rootSiteX, rootSiteY);
rootSite.setSize(rootSiteW, rootSiteH); rootSite.setSize(rootSiteW, rootSiteH);
cursorX = rootSiteX + rootSiteW + siteGap; cursorY = rootSiteY + rootSiteH + siteGap;
} }
graph.stopBatch('dagre-layout'); graph.stopBatch('dagre-layout');