refactor(types)!: Remove elements and replace with nodes and edges

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/Renderer/Renderer.vue

@@ -1,17 +1,9 @@
 <script lang="ts" setup>
 import { useStore, useWindow, useZoomPanHelper } from '../../composables'
-import { Elements, FlowInstance } from '../../types'
-import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import { FlowInstance } from '../../types'
+import { onLoadGetEdges, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
-interface RendererProps {
-  elements: Elements
-}
-
-const props = defineProps<RendererProps>()
 const store = useStore()
-
-// if there are preloaded elements we overwrite the current elements with the stored ones and reset the stored elements (so we can properly parse them)
-await store.setElements(props.elements, false)
 store.isReady = true
 
 nextTick(async () => {
@@ -28,7 +20,8 @@ nextTick(async () => {
     zoomTo,
     setTransform,
     project: onLoadProject(store),
-    getElements: onLoadGetElements(store),
+    getNodes: onLoadGetNodes(store),
+    getEdges: onLoadGetEdges(store),
     toObject: onLoadToObject(store),
   }
   store.hooks.load.trigger(instance)

src/container/VueFlow/VueFlow.vue

@@ -9,7 +9,6 @@ import { createHooks, initFlow } from '../../composables'
 import type { FlowProps } from '../../types/flow'
 
 const props = withDefaults(defineProps<FlowProps>(), {
-  modelValue: () => [],
   snapToGrid: false,
   onlyRenderVisibleElements: false,
   edgesUpdatable: false,
@@ -24,38 +23,15 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScroll: false,
   paneMoveable: true,
 })
-const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
+const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges'])
 const store = initFlow(emit, props.id)
-const elements = useVModel(props, 'modelValue', emit)
+const { nodes, edges } = useVModels(props, emit)
 store.setState(props)
 watch(
   () => props,
   () => store.setState(props),
   { flush: 'post', deep: true },
 )
-const { pause: pauseModel, resume: resumeModel } = pausableWatch(
-  () => props.modelValue.length,
-  async () => await store.setElements(elements.value),
-)
-const { pause, resume } = pausableWatch(elements, async (val) => await store.setElements(val), { flush: 'post' })
-
-until(() => store.isReady)
-  .toBe(true)
-  .then(() => {
-    watch(
-      () => store.elements,
-      (val) => {
-        pause()
-        pauseModel()
-        elements.value = val
-        setTimeout(() => {
-          resume()
-          resumeModel()
-        }, 1)
-      },
-      { flush: 'post', deep: true },
-    )
-  })
 </script>
 <script lang="ts">
 export default {
@@ -66,7 +42,7 @@ export default {
   <div class="vue-flow">
     <Suspense timeout="0">
       <template #default>
-        <Renderer :key="`renderer-${store.id}`" :elements="elements">
+        <Renderer :key="`renderer-${store.id}`">
           <ZoomPane :key="`zoom-pane-${store.id}`">
             <template #default="zoomPaneProps">
               <SelectionPane :key="`selection-pane-${store.id}`">