From 528cac5d339761c4558cafc102c762e2330e7ad2 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 30 Mar 2022 16:42:50 +0200
Subject: [PATCH] regression(nodes,edges): removing nodes/edges breaks renderer

---
 package/src/components/Edges/EdgeWrapper.vue  |  6 ++---
 package/src/components/Nodes/NodeWrapper.vue  |  6 ++---
 .../container/EdgeRenderer/EdgeRenderer.vue   | 27 +++++++++----------
 .../container/NodeRenderer/NodeRenderer.vue   |  1 +
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index 66094b43..6e6149f1 100644
--- a/package/src/components/Edges/EdgeWrapper.vue
+++ b/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)!)
-if (!edge.value) throw new Error(`Edge with ${props.id} not found!`)
+const edge = useVModel(props, 'edge')
 
 const updating = ref(false)
 
diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index b0a91ec6..962bd4e9 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/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)!)
-if (!node.value) throw new Error(`[vueflow]: Node with ${props.id} not found!`)
+const node = useVModel(props, 'node')
 provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
diff --git a/package/src/container/EdgeRenderer/EdgeRenderer.vue b/package/src/container/EdgeRenderer/EdgeRenderer.vue
index aaf372c7..9ba023a9 100644
--- a/package/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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
-          v-for="edge of group.edges"
-          :id="edge.id"
-          :key="edge.id"
-          :name="names[edge.type] || 'default'"
-          :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
-          :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
-        >
-          <template #default="props">
-            <component :is="getType(edge.type)" v-bind="props" />
-          </template>
-        </EdgeWrapper>
-      </template>
+      <EdgeWrapper
+        v-for="edge of group.edges"
+        :id="edge.id"
+        :key="edge.id"
+        :edge="edge"
+        :name="names[edge.type] || 'default'"
+        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
+        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+      >
+        <template #default="props">
+          <component :is="getType(edge.type)" v-bind="props" />
+        </template>
+      </EdgeWrapper>
       <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <slot name="connection-line" />
       </ConnectionLine>
diff --git a/package/src/container/NodeRenderer/NodeRenderer.vue b/package/src/container/NodeRenderer/NodeRenderer.vue
index 86530862..d06bb809 100644
--- a/package/src/container/NodeRenderer/NodeRenderer.vue
+++ b/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"