From 4e9ad11fc5b9660922b6fa54f68792688e0cde85 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 26 May 2022 21:29:53 +0200
Subject: [PATCH] docs: update stress example

---
 docs/components/examples/stress/App.vue  | 23 +++++++++++++++++------
 docs/components/examples/stress/utils.js |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/docs/components/examples/stress/App.vue b/docs/components/examples/stress/App.vue
index 92977f71..934fbdc6 100644
--- a/docs/components/examples/stress/App.vue
+++ b/docs/components/examples/stress/App.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
+import { VueFlow, isNode, useVueFlow, getConnectedEdges } from "@braks/vue-flow";
+import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
 const { nodes, edges } = getElements(15, 15)
 const elements = ref([...nodes, ...edges])
 
-const { onPaneReady } = useVueFlow()
+const { onPaneReady, dimensions, instance, onNodeClick, getEdges } = useVueFlow()
 
 onPaneReady((i) => {
   i.fitView({
@@ -17,15 +17,26 @@ onPaneReady((i) => {
 
 const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 
-const updatePos = () =>
+const updatePos = () => {
   elements.value.forEach((el) => {
     if (isNode(el)) {
       el.position = {
-        x: Math.random() * window.innerWidth,
-        y: Math.random() * window.innerHeight,
+        x: Math.random() * 10 * dimensions.value.width,
+        y: Math.random() * 10 * dimensions.value.height,
       }
     }
   })
+  nextTick(() => {
+    instance.value.fitView({ duration: 1000, padding: 0.5 })
+  })
+}
+
+onNodeClick(({ node }) => {
+  const connectedEdges = getConnectedEdges([node], getEdges.value)
+  connectedEdges.forEach((edge) => {
+    edge.style = { stroke: '#10b981', strokeWidth: 3 }
+  })
+})
 </script>
 
 <template>
diff --git a/docs/components/examples/stress/utils.js b/docs/components/examples/stress/utils.js
index 5d17c2eb..4eccda32 100644
--- a/docs/components/examples/stress/utils.js
+++ b/docs/components/examples/stress/utils.js
@@ -9,7 +9,7 @@ export function getElements(xElements = 10, yElements = 10) {
       const position = { x: x * 75, y: y * 75 }
       const node = {
         id: nodeId.toString(),
-        style: { width: `50px`, fontSize: `11px` },
+        style: { width: `50px`, fontSize: `11px`, zIndex: 1 },
         label: `Node ${nodeId}`,
         class: 'light',
         position,