From 0184cdd2a9f27cbcb5a529608a6f29974d623aba Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 11 Apr 2022 11:06:10 +0200
Subject: [PATCH] docs: fitview mixing edges up on resize

---
 docs/components/home/Home.vue        |  2 --
 docs/components/home/flows/Intro.vue | 40 +++++++++++++++++-----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index 0eae985f..a2bf8c50 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -2,8 +2,6 @@
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
-import ArrowLeft from '~icons/carbon/arrow-left'
-import ArrowRight from '~icons/carbon/arrow-right'
 
 const dark = useDark({
   selector: 'html',
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index dfafc110..87eaf82f 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -42,10 +42,6 @@ const edgeId = ref('eintro-documentation')
 const el = templateRef<HTMLDivElement>('el', null)
 
 onPaneReady(({ fitView }) => {
-  fitView({
-    duration: 1500,
-  })
-
   const setNodes = () => {
     if (breakpoints.isSmaller('md')) {
       const mainNode = getNode.value('intro')!
@@ -69,14 +65,24 @@ onPaneReady(({ fitView }) => {
         }
       })
 
-      const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
-        source: 'examples',
-        target: 'documentation',
-        targetHandle: null,
-        sourceHandle: null,
+      nextTick(() => {
+        const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
+          source: 'examples',
+          target: 'documentation',
+          targetHandle: null,
+          sourceHandle: null,
+        })
+        if (newEdge) edgeId.value = newEdge.id
+
+        fitView({
+          duration: 1500,
+        })
       })
-      if (newEdge) edgeId.value = newEdge.id
     } else {
+      fitView({
+        duration: 1500,
+      })
+
       getNodes.value.forEach((node) => {
         const mainNode = getNode.value('intro')!
         switch (node.id) {
@@ -95,13 +101,15 @@ onPaneReady(({ fitView }) => {
         }
       })
 
-      const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
-        source: 'intro',
-        target: 'documentation',
-        targetHandle: null,
-        sourceHandle: null,
+      nextTick(() => {
+        const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
+          source: 'intro',
+          target: 'documentation',
+          targetHandle: null,
+          sourceHandle: null,
+        })
+        if (newEdge) edgeId.value = newEdge.id
       })
-      if (newEdge) edgeId.value = newEdge.id
     }
 
     setTimeout(