update(examples): fix examples

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

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">

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>()
 

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

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()

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">

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>

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 } },

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>