From b389418a38de2f7a466de90a48e7ad695f158ae5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 8 Nov 2022 21:11:56 +0100
Subject: [PATCH] docs: update node internals on resize

---
 docs/components/home/flows/Intro.vue | 36 +++++++++++++++-------------
 docs/src/assets/index.css            |  3 +++
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 24c28db0..8a4c6724 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -54,22 +54,23 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
-  nodes: [
-    { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
-    { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
-    { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
-    { id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
-  ],
-  edges: initialEdges,
-  elementsSelectable: true,
-  panOnDrag: false,
-  zoomOnScroll: false,
-  zoomOnDoubleClick: false,
-  zoomOnPinch: false,
-  preventScrolling: false,
-  elevateEdgesOnSelect: true,
-})
+const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges, updateNodeInternals } =
+  useVueFlow({
+    nodes: [
+      { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
+      { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
+      { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
+      { id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
+    ],
+    edges: initialEdges,
+    elementsSelectable: true,
+    panOnDrag: false,
+    zoomOnScroll: false,
+    zoomOnDoubleClick: false,
+    zoomOnPinch: false,
+    preventScrolling: false,
+    elevateEdgesOnSelect: true,
+  })
 
 const clickInterval = ref()
 const clicks = ref(0)
@@ -121,6 +122,7 @@ const el = templateRef<HTMLDivElement>('el', null)
 const setNodes = () => {
   if (breakpoints.isSmaller('md')) {
     const mainNode = getNode.value('intro')!
+
     getNodes.value.forEach((node) => {
       switch (node.id) {
         case 'intro':
@@ -201,6 +203,8 @@ const setNodes = () => {
     setEdges(initialEdges)
   }
 
+  updateNodeInternals(getNodes.value.map((n) => n.id))
+
   nextTick(() => {
     fitView()
   })
diff --git a/docs/src/assets/index.css b/docs/src/assets/index.css
index 727d85d9..2c845ff0 100644
--- a/docs/src/assets/index.css
+++ b/docs/src/assets/index.css
@@ -10,6 +10,9 @@
   backdrop-filter: blur(1px);
 }
 
+.VPPage {
+  @apply px-8 py-6 md:px-12 lg:px-24;
+}
 
 html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;