fix: prevent Vue Flow edge render crash by clearing edges before structural node changes

editor/components/SceneGraph.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, ref, onMounted } from 'vue'
+import { watch, onMounted, nextTick } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -23,8 +23,8 @@ const emit = defineEmits<{
 
 const { nodes, edges, onNodeClick, onConnect, fitView } = useVueFlow()
 
-function rebuild() {
+function buildNodes() {
-  nodes.value = props.sceneNodes.map((n, i) => ({
+  return props.sceneNodes.map((n, i) => ({
     id: n.id,
     type: 'default',
     position: { x: (i % 4) * 220 + 50, y: Math.floor(i / 4) * 120 + 50 },
@@ -38,8 +38,10 @@ function rebuild() {
     targetPosition: 'left' as const,
     connectable: true,
   }))
+}
 
-  edges.value = props.sceneEdges.map((e) => ({
+function buildEdges() {
+  return props.sceneEdges.map((e) => ({
     id: e.id,
     source: e.source,
     target: e.target,
@@ -51,9 +53,33 @@ function rebuild() {
   }))
 }
 
+let lastNodesLen = 0
+let lastEdgesLen = 0
+
+async function structuralRebuild() {
+  edges.value = []
+  await nextTick()
+  nodes.value = buildNodes()
+  await nextTick()
+  edges.value = buildEdges()
+  lastNodesLen = props.sceneNodes.length
+  lastEdgesLen = props.sceneEdges.length
+}
+
+function styleOnlyRebuild() {
+  nodes.value = buildNodes()
+  edges.value = buildEdges()
+}
+
 watch(() => [props.sceneNodes, props.sceneEdges, props.startScene, props.selectedNodeId], () => {
-  rebuild()
+  const nodesLen = props.sceneNodes.length
-}, { deep: true, immediate: true })
+  const edgesLen = props.sceneEdges.length
+  if (nodesLen !== lastNodesLen || edgesLen !== lastEdgesLen) {
+    structuralRebuild()
+  } else {
+    styleOnlyRebuild()
+  }
+})
 
 onNodeClick((event) => {
   emit('selectNode', event.node.id)