Improve GraphFX UI editing and image previews

graphfx-ui/src/lib/layout.ts

@@ -1,10 +1,10 @@
 import type { Edge, Node, Position } from '@vue-flow/core'
 import dagre from '@dagrejs/dagre'
 
-const DEFAULT_NODE_WIDTH = 280
-const DEFAULT_ROW_HEIGHT = 34
-const DEFAULT_HEADER_HEIGHT = 88
-const MIN_NODE_HEIGHT = 150
+const DEFAULT_NODE_WIDTH = 340
+const DEFAULT_ROW_HEIGHT = 44
+const DEFAULT_HEADER_HEIGHT = 92
+const MIN_NODE_HEIGHT = 170
 
 type LayoutDirection = 'LR' | 'TB'
 
@@ -42,10 +42,10 @@ export function layoutGraph(nodes: Node[], edges: Edge[], options: LayoutOptions
   graph.setDefaultEdgeLabel(() => ({}))
   graph.setGraph({
     rankdir: direction,
-    nodesep: 90,
-    ranksep: 130,
-    marginx: 40,
-    marginy: 40,
+    nodesep: 150,
+    ranksep: 210,
+    marginx: 80,
+    marginy: 80,
   })
 
   for (const node of nodes) {