From 729d3d5ca2fe412dfb8cd99cd1babf954327bc29 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 24 Nov 2021 14:26:24 +0100
Subject: [PATCH] update(examples): remove watchEffect from
 UpdateNodeExample.vue

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

update(examples): fix style calculation in CustomNode.vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/UpdateNode/UpdateNodeExample.vue             | 11 ++++-------
 examples/UpdateNodeInternals/CustomNode.vue           |  2 +-
 .../UpdateNodeInternalsExample.vue                    |  5 +----
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index fa703e4a..c4c4ae88 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -29,23 +29,20 @@ const updateNode = () => {
     return el
   })
 }
-
-watchEffect(() => {
-  updateNode()
-})
+onMounted(updateNode)
 </script>
 <template>
   <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
       <label>label:</label>
-      <input v-model="nodeName" />
+      <input v-model="nodeName" @input="updateNode" />
 
       <label class="updatenode__bglabel">background:</label>
-      <input v-model="nodeBg" type="color" />
+      <input v-model="nodeBg" type="color" @input="updateNode" />
 
       <div class="updatenode__checkboxwrapper">
         <label>hidden:</label>
-        <input v-model="nodeHidden" type="checkbox" />
+        <input v-model="nodeHidden" type="checkbox" @input="updateNode" />
       </div>
     </div>
   </VueFlow>
diff --git a/examples/UpdateNodeInternals/CustomNode.vue b/examples/UpdateNodeInternals/CustomNode.vue
index cb98c96f..626fd939 100644
--- a/examples/UpdateNodeInternals/CustomNode.vue
+++ b/examples/UpdateNodeInternals/CustomNode.vue
@@ -22,7 +22,7 @@ const props = defineProps<CustomNodeProps>()
       :key="`handle-${i}`"
       type="source"
       :position="Position.Right"
-      :style="{ top: 10 * i + props.data.handlePosition * 10 }"
+      :style="{ top: `${10 * i + props.data.handlePosition * 10}px` }"
     />
   </div>
 </template>
diff --git a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
index 1fe64870..245a67c9 100644
--- a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
+++ b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
@@ -47,10 +47,7 @@ const onPaneClick = (evt: MouseEvent) =>
 
 const toggleHandleCount = () =>
   (elements.value = elements.value.map((el) => {
-    if (isEdge(el)) {
-      return el
-    }
-
+    if (isEdge(el)) return el
     return { ...el, data: { ...el.data, handleCount: el.data?.handleCount === 1 ? 2 : 1 } }
   }))