feat: BFS-based left-to-right tree layout for scene graph

editor/components/SceneGraph.vue

@@ -7,6 +7,7 @@ import '@vue-flow/core/dist/style.css'
 import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import type { Connection } from '@vue-flow/core'
+import { computePositions } from '../composables/useLayout'
 
 const props = defineProps<{
   sceneNodes: { id: string; label: string }[]
@@ -25,20 +26,24 @@ const edges = ref<any[]>([])
 const { onNodeClick, onConnect, fitView } = useVueFlow()
 
 function makeNodes() {
-  return props.sceneNodes.map((n, i) => ({
-    id: n.id,
-    type: 'default',
-    position: { x: (i % 4) * 220 + 50, y: Math.floor(i / 4) * 120 + 50 },
-    data: { label: n.id === props.startScene ? `\u25b6 ${n.label}` : n.label },
-    style: n.id === props.startScene
-      ? { background: '#1b5e20', color: '#fff', borderColor: '#388e3c' }
-      : n.id === props.selectedNodeId
-        ? { background: '#1565c0', color: '#fff', borderColor: '#1976d2' }
-        : {},
-    sourcePosition: 'right' as const,
-    targetPosition: 'left' as const,
-    connectable: true,
-  }))
+  const positions = computePositions(props.sceneNodes, props.sceneEdges, props.startScene)
+  return props.sceneNodes.map((n) => {
+    const pos = positions.get(n.id) ?? { x: 0, y: 0 }
+    return {
+      id: n.id,
+      type: 'default',
+      position: pos,
+      data: { label: n.id === props.startScene ? `\u25b6 ${n.label}` : n.label },
+      style: n.id === props.startScene
+        ? { background: '#1b5e20', color: '#fff', borderColor: '#388e3c' }
+        : n.id === props.selectedNodeId
+          ? { background: '#1565c0', color: '#fff', borderColor: '#1976d2' }
+          : {},
+      sourcePosition: 'right' as const,
+      targetPosition: 'left' as const,
+      connectable: true,
+    }
+  })
 }
 
 function makeEdges() {