From 69dc45c3be6e3fd92c1ae51430ba8640e3ad0a34 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 14 Dec 2021 13:37:26 +0100
Subject: [PATCH] update(examples): fix examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../CustomConnectionLine.vue                  |  5 +----
 examples/CustomNode/ColorSelectorNode.vue     |  8 --------
 examples/CustomNode/CustomNode.vue            | 20 +++----------------
 examples/DragNDrop/DnD.vue                    | 13 +++++-------
 examples/Edges/EdgesExample.vue               | 12 +++++------
 examples/Empty/EmptyExample.vue               | 11 +++++-----
 examples/Hidden/HiddenExample.vue             |  2 +-
 examples/Interaction/InteractionExample.vue   | 11 ++++------
 8 files changed, 25 insertions(+), 57 deletions(-)

diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
index 7894d918..8caedcde 100644
--- a/examples/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import { VueFlow, addEdge, Background, BackgroundVariant, Elements, useVueFlow } from '~/index'
+import { VueFlow, Background, BackgroundVariant, Elements } from '~/index'
 
 const elements = ref<Elements>([
   {
@@ -10,9 +10,6 @@ const elements = ref<Elements>([
     position: { x: 250, y: 5 },
   },
 ])
-const { applyNodeChanges, OnNodesChange, OnConnect } = useVueFlow()
-OnNodesChange(applyNodeChanges)
-OnConnect((params) => (elements.value = addEdge(params, elements.value)))
 </script>
 <template>
   <VueFlow v-model="elements">
diff --git a/examples/CustomNode/ColorSelectorNode.vue b/examples/CustomNode/ColorSelectorNode.vue
index 0b0f982c..926eeeab 100644
--- a/examples/CustomNode/ColorSelectorNode.vue
+++ b/examples/CustomNode/ColorSelectorNode.vue
@@ -7,14 +7,6 @@ interface ColorSelectorNodeProps extends NodeProps {
     color: string
     onChange: (event: any) => void
   }
-  type: string
-  selected?: boolean
-  connectable?: boolean
-  xPos?: number
-  yPos?: number
-  targetPosition?: Position
-  sourcePosition?: Position
-  dragging?: boolean
 }
 const props = defineProps<ColorSelectorNodeProps>()
 
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index 98c6a0ec..a402592b 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -3,19 +3,16 @@ import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
   VueFlow,
   isEdge,
-  addEdge,
   MiniMap,
   Controls,
   Node,
   FlowElement,
-  FlowInstance,
   Elements,
   Position,
   SnapGrid,
-  Connection,
   ConnectionMode,
-  Edge,
   useVueFlow,
+  useNodesState,
 } from '~/index'
 
 const elements = ref<Elements>([])
@@ -89,23 +86,12 @@ onMounted(() => {
   ]
 })
 
-const { useNodesState, OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
-useNodesState(undefined, true)
+const { OnPaneReady } = useVueFlow()
+useNodesState()
 OnPaneReady((flowInstance) => {
   flowInstance.fitView()
   console.log('flow loaded:', flowInstance)
 })
-OnNodeDragStop(({ node }) => console.log('drag stop', node))
-OnConnect((params) =>
-  addEdge(
-    {
-      ...params,
-      animated: true,
-      style: { stroke: '#fff' },
-    } as Edge,
-    elements.value,
-  ),
-)
 </script>
 <template>
   <VueFlow
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index 68f0a64e..0f243d81 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Node, useVueFlow } from '~/index'
+import { VueFlow, Controls, FlowInstance, Node, useVueFlow, useElementsState } from '~/index'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
 const flowInstance = ref<FlowInstance>()
 
-const { useNodesState, useEdgesState, OnPaneReady, OnConnect } = useVueFlow()
-const { edges, addEdges } = useEdgesState()
-const { nodes, addNodes } = useNodesState(
-  [
+const { OnPaneReady, OnConnect } = useVueFlow()
+const { nodes, edges, addEdges, addNodes } = useElementsState({
+  nodes: [
     {
       id: '1',
       type: 'input',
@@ -18,9 +17,7 @@ const { nodes, addNodes } = useNodesState(
       position: { x: 250, y: 5 },
     },
   ],
-  true,
-)
-
+})
 OnPaneReady((instance) => (flowInstance.value = instance))
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index 0a3cf77a..a9ccfca5 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -2,7 +2,7 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, useElementsState } from '~/index'
 
 const initialNodes = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
@@ -65,13 +65,13 @@ const initialEdges = [
   },
 ]
 
-const { useNodesState, useEdgesState, OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
-const { nodes } = useNodesState(initialNodes)
-const { edges, addEdges } = useEdgesState(initialEdges)
+const { OnPaneReady } = useVueFlow()
+const { nodes, edges, addEdges } = useElementsState({
+  nodes: initialNodes,
+  edges: initialEdges,
+})
 
 OnPaneReady((flowInstance) => flowInstance.fitView())
-OnNodeDragStop((node) => console.log('drag stop', node))
-OnConnect((params) => addEdges([params]))
 </script>
 <template>
   <VueFlow :snap-to-grid="true">
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index 1daaf623..7d6ee741 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow, useElementsState } from '~/index'
 
-const { useNodesState, useEdgesState, OnConnect, OnPaneReady, OnNodeDragStop } = useVueFlow()
-const { nodes, addNodes } = useNodesState()
-const { edges, addEdges } = useEdgesState()
+const { OnConnect, OnPaneReady, OnNodeDragStop, dimensions } = useVueFlow()
+const { nodes, addNodes, edges, addEdges } = useElementsState()
 
 OnConnect((params) => addEdges[params])
 OnPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
@@ -14,8 +13,8 @@ const addRandomNode = () => {
   const newNode: Node = {
     id: nodeId,
     label: `Node: ${nodeId}`,
-    position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
-  } as Node
+    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
+  }
   addNodes([newNode])
 }
 </script>
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index a5a7b0cc..c1fe0e63 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Connection, Edge, Elements } from '~/index'
+import { VueFlow, MiniMap, Controls, Elements } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index a8c982ae..87ba7fbb 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow, useElementsState } from '~/index'
 
 const {
   nodesDraggable,
@@ -11,8 +11,6 @@ const {
   panOnScroll,
   panOnScrollMode,
   paneMoveable,
-  useNodesState,
-  useEdgesState,
   OnConnect,
   OnNodeDragStart,
   OnNodeDragStop,
@@ -31,8 +29,7 @@ const {
   ],
 })
 
-const { nodes } = useNodesState()
-const { edges, addEdges } = useEdgesState()
+const { nodes, edges, addEdges } = useElementsState()
 const captureZoomClick = ref(false)
 const captureZoomScroll = ref(false)
 
@@ -45,7 +42,7 @@ OnPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', ev
 OnMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 <template>
-  <VueFlow :nodes-draggable="captureZoomScroll">
+  <VueFlow>
     <MiniMap />
     <Controls />
 
@@ -53,7 +50,7 @@ OnMoveEnd((flowTransform) => console.log('move end', flowTransform))
       <div>
         <label for="draggable">
           nodesDraggable
-          <input id="draggable" type="checkbox" class="vue-flow__draggable" />
+          <input id="draggable" v-model="nodesDraggable" type="checkbox" class="vue-flow__draggable" />
         </label>
       </div>
       <div>