From cd32f14a5a5093e755af05d026250bad9391561f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 11:05:27 +0200
Subject: [PATCH] update(examples): Add update node example

---
 examples/Provider/ProviderExample.vue         |  6 +--
 examples/Provider/Sidebar.vue                 |  2 +-
 examples/Provider/provider.css                |  4 +-
 .../UpdatableEdge/UpdatableEdgeExample.vue    |  2 +-
 examples/UpdateNode/UpdateNodeExample.vue     | 52 +++++++++++++++++++
 examples/UpdateNode/updatenode.css            | 21 ++++++++
 examples/router.ts                            |  4 ++
 7 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 examples/UpdateNode/UpdateNodeExample.vue
 create mode 100644 examples/UpdateNode/updatenode.css

diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
index 546a5be5..3e6ac97a 100644
--- a/examples/Provider/ProviderExample.vue
+++ b/examples/Provider/ProviderExample.vue
@@ -15,8 +15,8 @@ import Flow, {
 
 import './provider.css'
 
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onLoad = (flowInstance: OnLoadParams) => console.log('flow loaded:', flowInstance)
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -35,7 +35,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 <template>
   <div class="providerflow">
     <Sidebar />
-    <div class="reactflow-wrapper">
+    <div class="vue-flow-wrapper">
       <Flow
         :elements="elements"
         :connection-mode="ConnectionMode.Loose"
diff --git a/examples/Provider/Sidebar.vue b/examples/Provider/Sidebar.vue
index 285ef2bb..6ad050de 100644
--- a/examples/Provider/Sidebar.vue
+++ b/examples/Provider/Sidebar.vue
@@ -12,7 +12,7 @@ const selectAll = () => {
 </script>
 <template>
   <aside>
-    <div class="description">This is an example of how you can access the internal state outside of the ReactFlow component.</div>
+    <div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
     <div class="title">Zoom & pan transform</div>
     <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
     <div class="title">Nodes</div>
diff --git a/examples/Provider/provider.css b/examples/Provider/provider.css
index aa719acc..4e1ad3f4 100644
--- a/examples/Provider/provider.css
+++ b/examples/Provider/provider.css
@@ -24,7 +24,7 @@
   margin-bottom: 20px;
 }
 
-.providerflow .reactflow-wrapper {
+.providerflow .vue-flow-wrapper {
   flex-grow: 1;
   height: 100%;
 }
@@ -42,4 +42,4 @@
     width: 20%;
     max-width: 250px;
   }
-}
\ No newline at end of file
+}
diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
index 8e3a8eef..03126db1 100644
--- a/examples/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -40,7 +40,7 @@ const initialElements: Elements = [
 ] as Elements
 
 const elements = ref(initialElements)
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
 const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
 const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
 const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) =>
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
new file mode 100644
index 00000000..bbbaa866
--- /dev/null
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import Flow, { Elements } from '~/index'
+
+import './updatenode.css'
+
+const initialElements: Elements = [
+  { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+] as Elements
+
+const elements = ref<Elements>(initialElements)
+const nodeName = ref<string>('Node 1')
+const nodeBg = ref<string>('#eee')
+const nodeHidden = ref<boolean>(false)
+
+const updateNode = () => {
+  elements.value = elements.value.map((el) => {
+    if (el.id === '1') {
+      // it's important that you create a new object here in order to notify react flow about the change
+      el.data = {
+        ...el.data,
+        label: nodeName.value,
+      }
+      el.style = { backgroundColor: nodeBg.value }
+      el.isHidden = nodeHidden.value
+    }
+
+    return el
+  })
+}
+
+watchEffect(() => {
+  updateNode()
+})
+</script>
+<template>
+  <Flow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+    <div class="updatenode__controls">
+      <label>label:</label>
+      <input v-model="nodeName" />
+
+      <label class="updatenode__bglabel">background:</label>
+      <input v-model="nodeBg" type="color" />
+
+      <div class="updatenode__checkboxwrapper">
+        <label>hidden:</label>
+        <input v-model="nodeHidden" type="checkbox" />
+      </div>
+    </div>
+  </Flow>
+</template>
diff --git a/examples/UpdateNode/updatenode.css b/examples/UpdateNode/updatenode.css
new file mode 100644
index 00000000..95438054
--- /dev/null
+++ b/examples/UpdateNode/updatenode.css
@@ -0,0 +1,21 @@
+.updatenode__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.updatenode__controls label {
+  display: block;
+}
+
+.updatenode__bglabel {
+  margin-top: 10px;
+}
+
+.updatenode__checkboxwrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
diff --git a/examples/router.ts b/examples/router.ts
index 0b4915d6..ce1ddb71 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -89,6 +89,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/updateable-edge',
     component: () => import('./UpdatableEdge/UpdatableEdgeExample.vue'),
   },
+  {
+    path: '/update-node',
+    component: () => import('./UpdateNode/UpdateNodeExample.vue'),
+  },
 ]
 
 export const router = createRouter({