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