regression(nodes,edges): removing nodes/edges breaks renderer

package/src/components/Edges/EdgeWrapper.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, Position } from '../../types'
+import { ConnectionMode, GraphEdge, Position } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
   id: string
   name: string
+  edge: GraphEdge
   selectable?: boolean
   updatable?: boolean
 }
 
 const props = defineProps<EdgeWrapper>()
 const { store } = useVueFlow()
-const edge = computed(() => store.getEdge(props.id)!)
+const edge = useVModel(props, 'edge')
-if (!edge.value) throw new Error(`Edge with ${props.id} not found!`)
 
 const updating = ref(false)
 

package/src/components/Nodes/NodeWrapper.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable/src/index'
 import { useVueFlow } from '../../composables'
-import { SnapGrid } from '../../types'
+import { GraphNode, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getXYZPos } from '../../utils'
 
 interface NodeWrapperProps {
   id: string
   name: string
+  node: GraphNode
   draggable: boolean
   selectable: boolean
   connectable: boolean
@@ -16,8 +17,7 @@ interface NodeWrapperProps {
 
 const props = defineProps<NodeWrapperProps>()
 const { store } = useVueFlow()
-const node = computed(() => store.getNode(props.id)!)
+const node = useVModel(props, 'node')
-if (!node.value) throw new Error(`[vueflow]: Node with ${props.id} not found!`)
 provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -75,20 +75,19 @@ export default {
   >
     <MarkerDefinitions v-if="group.isMaxLevel" :default-color="store.defaultMarkerColor" />
     <g>
-      <template v-if="store.getEdges.length">
+      <EdgeWrapper
-        <EdgeWrapper
+        v-for="edge of group.edges"
-          v-for="edge of group.edges"
+        :id="edge.id"
-          :id="edge.id"
+        :key="edge.id"
-          :key="edge.id"
+        :edge="edge"
-          :name="names[edge.type] || 'default'"
+        :name="names[edge.type] || 'default'"
-          :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
+        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
-          :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
-        >
+      >
-          <template #default="props">
+        <template #default="props">
-            <component :is="getType(edge.type)" v-bind="props" />
+          <component :is="getType(edge.type)" v-bind="props" />
-          </template>
+        </template>
-        </EdgeWrapper>
+      </EdgeWrapper>
-      </template>
       <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <slot name="connection-line" />
       </ConnectionLine>

package/src/container/NodeRenderer/NodeRenderer.vue

@@ -48,6 +48,7 @@ export default {
       v-for="node of store.getNodes"
       :id="node.id"
       :key="`vue-flow__node-${node.id}`"
+      :node="node"
       :name="names[node.type] || 'default'"
       :draggable="typeof node.draggable === 'undefined' ? store.nodesDraggable : !!node.draggable"
       :selectable="typeof node.selectable === 'undefined' ? store.elementsSelectable : !!node.selectable"