From 445718d6f4d6f4de77d403fd8df3e9d19be2d29c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 15 Dec 2021 18:15:19 +0100
Subject: [PATCH] update(examples): correct examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Basic/Basic.vue                      | 19 +++----
 examples/CustomNode/CustomNode.vue            | 42 ++++++----------
 examples/DragNDrop/DnD.vue                    |  6 +--
 examples/Edges/EdgesExample.vue               |  7 +--
 examples/Empty/EmptyExample.vue               |  8 +--
 examples/Hidden/HiddenExample.vue             | 34 ++++++-------
 examples/Interaction/InteractionExample.vue   | 28 +++++------
 examples/Layouting/LayoutingExample.vue       | 35 +++----------
 examples/Layouting/initial-elements.ts        | 22 ++++-----
 examples/MultiFlows/Flow.vue                  | 13 +++--
 examples/MultiFlows/MultiFlowsExample.vue     |  4 +-
 examples/Nesting/GroupNode.vue                |  9 ++--
 examples/Nesting/Nesting.vue                  |  2 +-
 .../NodeTypeChange/NodeTypeChangeExample.vue  | 21 +++-----
 examples/Overview/Overview.vue                | 32 ++++--------
 examples/Provider/ProviderExample.vue         | 38 ++++----------
 examples/Provider/Sidebar.vue                 | 11 ++---
 examples/RGBFlow/RGBFlow.vue                  |  7 +--
 examples/SaveRestore/Controls.vue             | 25 +++++-----
 examples/SaveRestore/SaveRestoreExample.vue   | 18 +++----
 examples/Switch/SwitchExample.vue             | 27 +++++-----
 examples/Unidirectional/CustomNode.vue        | 11 ++---
 .../Unidirectional/UnidirectionalExample.vue  |  6 ---
 .../UpdatableEdge/UpdatableEdgeExample.vue    | 16 ++----
 examples/UpdateNode/UpdateNodeExample.vue     | 18 +++----
 examples/Validation/CustomInput.vue           |  5 ++
 examples/Validation/CustomNode.vue            |  5 ++
 examples/Validation/ValidationExample.vue     | 39 +++++++--------
 .../ZoomPanHelper/ZoomPanHelperExample.vue    | 38 --------------
 examples/router.ts                            |  4 --
 src/composables/useVueFlow.ts                 |  4 +-
 src/store/store.ts                            | 49 +------------------
 32 files changed, 206 insertions(+), 397 deletions(-)
 delete mode 100644 examples/ZoomPanHelper/ZoomPanHelperExample.vue

diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index 40fa0688..cad84e73 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, FlowInstance, useVueFlow, useNodesState, useEdgesState } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, useVueFlow, useNodesState, useEdgesState } from '~/index'
 
 const initialNodes = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -11,17 +11,14 @@ const initialEdges = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ]
-const vfInstance = ref<FlowInstance>()
-
-const { OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
+const { onPaneReady, onNodeDragStop, onConnect, instance } = useVueFlow()
 const { nodes } = useNodesState({ nodes: initialNodes, applyDefault: true })
 const { edges, addEdges } = useEdgesState({ edges: initialEdges, applyDefault: true })
-OnPaneReady((flowInstance) => {
-  flowInstance.fitView({ padding: 0.1 })
-  vfInstance.value = flowInstance
+onPaneReady(({ fitView }) => {
+  fitView({ padding: 0.1 })
 })
-OnNodeDragStop((e) => console.log('drag stop', e))
-OnConnect((params) => addEdges([params]))
+onNodeDragStop((e) => console.log('drag stop', e))
+onConnect((params) => addEdges([params]))
 
 const updatePos = () => {
   nodes.forEach((el) => {
@@ -32,8 +29,8 @@ const updatePos = () => {
   })
 }
 
-const logToObject = () => console.log(vfInstance.value?.toObject())
-const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const logToObject = () => console.log(instance.value?.toObject())
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclasss = () => {
   nodes.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index a402592b..ea54ab29 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -1,18 +1,17 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
-  VueFlow,
+  ConnectionMode,
+  Elements,
+  FlowElement,
   isEdge,
   MiniMap,
-  Controls,
   Node,
-  FlowElement,
-  Elements,
   Position,
   SnapGrid,
-  ConnectionMode,
-  useVueFlow,
   useNodesState,
+  useVueFlow,
+  VueFlow,
 } from '~/index'
 
 const elements = ref<Elements>([])
@@ -31,25 +30,14 @@ const nodeColor = (n: Node): string => {
   return '#fff'
 }
 
+const onChange = (event: Event) => {
+  elements.value.forEach((e: FlowElement) => {
+    if (isEdge(e) || e.id !== '2') return e
+    bgColor.value = (event.target as HTMLInputElement).value
+  })
+}
+
 onMounted(() => {
-  const onChange = (event: Event) => {
-    elements.value = elements.value.map((e: FlowElement) => {
-      if (isEdge(e) || e.id !== '2') {
-        return e
-      }
-      const color = (event.target as HTMLInputElement).value
-      bgColor.value = color
-
-      return {
-        ...e,
-        data: {
-          ...e.data,
-          color,
-        },
-      }
-    })
-  }
-
   elements.value = [
     {
       id: '1',
@@ -61,7 +49,7 @@ onMounted(() => {
     {
       id: '2',
       type: 'selectorNode',
-      data: { onChange, color: bgColor.value },
+      data: { onChange, color: bgColor },
       style: { border: '1px solid #777', padding: '10px' },
       position: { x: 250, y: 50 },
     },
@@ -86,9 +74,9 @@ onMounted(() => {
   ]
 })
 
-const { OnPaneReady } = useVueFlow()
+const { onPaneReady } = useVueFlow()
 useNodesState()
-OnPaneReady((flowInstance) => {
+onPaneReady((flowInstance) => {
   flowInstance.fitView()
   console.log('flow loaded:', flowInstance)
 })
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index 0f243d81..1ca6fd0f 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -7,7 +7,7 @@ const getId = () => `dndnode_${id++}`
 
 const flowInstance = ref<FlowInstance>()
 
-const { OnPaneReady, OnConnect } = useVueFlow()
+const { onPaneReady, onConnect } = useVueFlow()
 const { nodes, edges, addEdges, addNodes } = useElementsState({
   nodes: [
     {
@@ -18,7 +18,7 @@ const { nodes, edges, addEdges, addNodes } = useElementsState({
     },
   ],
 })
-OnPaneReady((instance) => (flowInstance.value = instance))
+onPaneReady((instance) => (flowInstance.value = instance))
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()
   if (event.dataTransfer) {
@@ -26,7 +26,7 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
-OnConnect((params) => addEdges([params]))
+onConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
   if (flowInstance.value) {
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index a9ccfca5..aa2faa01 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -65,16 +65,13 @@ const initialEdges = [
   },
 ]
 
-const { OnPaneReady } = useVueFlow()
-const { nodes, edges, addEdges } = useElementsState({
+const { nodes, edges } = useElementsState({
   nodes: initialNodes,
   edges: initialEdges,
 })
-
-OnPaneReady((flowInstance) => flowInstance.fitView())
 </script>
 <template>
-  <VueFlow :snap-to-grid="true">
+  <VueFlow :fit-view-on-init="true" :snap-to-grid="true">
     <template #edge-custom="props">
       <CustomEdge v-bind="props" />
     </template>
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index 7d6ee741..9b0334bd 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow, useElementsState } from '~/index'
 
-const { OnConnect, OnPaneReady, OnNodeDragStop, dimensions } = useVueFlow()
+const { onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 const { nodes, addNodes, edges, addEdges } = useElementsState()
 
-OnConnect((params) => addEdges[params])
-OnPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
-OnNodeDragStop((node) => console.log('drag stop', node))
+onConnect((params) => addEdges[params])
+onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
+onNodeDragStop((node) => console.log('drag stop', node))
 
 const addRandomNode = () => {
   const nodeId = (nodes.length + 1).toString()
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index c1fe0e63..72582ec4 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -1,28 +1,28 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Elements } from '~/index'
+import { VueFlow, MiniMap, Controls, useElementsState } from '~/index'
 
-const initialElements: Elements = [
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2' },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4' },
-]
-
-const elements = ref<Elements>(initialElements)
 const isHidden = ref(false)
 
+const { nodes, edges } = useElementsState({
+  nodes: [
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+    { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+    { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+    { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  ],
+  edges: [
+    { id: 'e1-2', source: '1', target: '2' },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e3-4', source: '3', target: '4' },
+  ],
+})
 watchEffect(() => {
-  elements.value.forEach((e) => {
-    e.hidden = isHidden.value
-    return e
-  })
+  nodes.forEach((n) => (n.hidden = isHidden.value))
+  edges.forEach((e) => (e.hidden = isHidden.value))
 })
 </script>
 <template>
-  <VueFlow v-model="elements">
+  <VueFlow>
     <MiniMap />
     <Controls />
 
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index 87ba7fbb..38b7a9bb 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -11,13 +11,13 @@ const {
   panOnScroll,
   panOnScrollMode,
   paneMoveable,
-  OnConnect,
-  OnNodeDragStart,
-  OnNodeDragStop,
-  OnPaneClick,
-  OnPaneScroll,
-  OnPaneContextMenu,
-  OnMoveEnd,
+  onConnect,
+  onNodeDragStart,
+  onNodeDragStop,
+  onPaneClick,
+  onPaneScroll,
+  onPaneContextMenu,
+  onMoveEnd,
 } = useVueFlow({
   modelValue: [
     { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -33,13 +33,13 @@ const { nodes, edges, addEdges } = useElementsState()
 const captureZoomClick = ref(false)
 const captureZoomScroll = ref(false)
 
-OnConnect((params) => addEdges([params]))
-OnNodeDragStart((e) => console.log('drag start', e))
-OnNodeDragStop((e) => console.log('drag stop', e))
-OnPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
-OnPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
-OnPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
-OnMoveEnd((flowTransform) => console.log('move end', flowTransform))
+onConnect((params) => addEdges([params]))
+onNodeDragStart((e) => console.log('drag start', e))
+onNodeDragStop((e) => console.log('drag stop', e))
+onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
+onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 <template>
   <VueFlow>
diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
index 6abe6a4e..e34c0b4b 100644
--- a/examples/Layouting/LayoutingExample.vue
+++ b/examples/Layouting/LayoutingExample.vue
@@ -1,20 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import initialElements from './initial-elements'
-import './layouting.css'
 
-import {
-  VueFlow,
-  Controls,
-  addEdge,
-  ConnectionMode,
-  Connection,
-  Edge,
-  Elements,
-  isNode,
-  CoordinateExtent,
-  Position,
-} from '~/index'
+import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -25,7 +13,6 @@ const nodeExtent: CoordinateExtent = [
 ]
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
 
 const onLayout = (direction: string) => {
   const isHorizontal = direction === 'LR'
@@ -41,33 +28,27 @@ const onLayout = (direction: string) => {
 
   dagre.layout(dagreGraph)
 
-  elements.value = elements.value.map((el) => {
+  elements.value.forEach((el) => {
     if (isNode(el)) {
       const nodeWithPosition = dagreGraph.node(el.id)
       el.targetPosition = isHorizontal ? Position.Left : Position.Top
       el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
       el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
     }
-
-    return el
   })
-  console.log(elements.value)
 }
 </script>
 <template>
   <div class="layoutflow">
-    <VueFlow
-      v-model="elements"
-      :node-extent="nodeExtent"
-      :connection-mode="ConnectionMode.Loose"
-      @connect="onConnect"
-      @load="() => onLayout('TB')"
-    >
+    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
       <Controls />
     </VueFlow>
     <div class="controls">
-      <button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
-      <button @click="() => onLayout('LR')">horizontal layout</button>
+      <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
+      <button @click="onLayout('LR')">horizontal layout</button>
     </div>
   </div>
 </template>
+<style>
+@import './layouting.css';
+</style>
diff --git a/examples/Layouting/initial-elements.ts b/examples/Layouting/initial-elements.ts
index cc473239..c294ff16 100644
--- a/examples/Layouting/initial-elements.ts
+++ b/examples/Layouting/initial-elements.ts
@@ -6,56 +6,56 @@ const elements: Elements = [
   {
     id: '1',
     type: 'input',
-    data: { label: 'input' },
+    label: 'input',
     position,
   },
   {
     id: '2',
-    data: { label: 'node 2' },
+    label: 'node 2',
     position,
   },
   {
     id: '2a',
-    data: { label: 'node 2a' },
+    label: 'node 2a',
     position,
   },
   {
     id: '2b',
-    data: { label: 'node 2b' },
+    label: 'node 2b',
     position,
   },
   {
     id: '2c',
-    data: { label: 'node 2c' },
+    label: 'node 2c',
     position,
   },
   {
     id: '2d',
-    data: { label: 'node 2d' },
+    label: 'node 2d',
     position,
   },
   {
     id: '3',
-    data: { label: 'node 3' },
+    label: 'node 3',
     position,
   },
   {
     id: '4',
-    data: { label: 'node 4' },
+    label: 'node 4',
     position,
   },
   {
     id: '5',
-    data: { label: 'node 5' },
+    label: 'node 5',
     position,
   },
   {
     id: '6',
     type: 'output',
-    data: { label: 'output' },
+    label: 'output',
     position,
   },
-  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+  { id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
   { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
   { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
   { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
index b72e06b4..709854f7 100644
--- a/examples/MultiFlows/Flow.vue
+++ b/examples/MultiFlows/Flow.vue
@@ -1,19 +1,18 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Connection, Elements, Edge, addEdge } from '~/index'
+import { VueFlow, Background, Elements } from '~/index'
 const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ]
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <VueFlow v-model="elements" @connect="onConnect">
+  <VueFlow v-model="elements" :fit-view-on-init="true">
     <Background />
   </VueFlow>
 </template>
diff --git a/examples/MultiFlows/MultiFlowsExample.vue b/examples/MultiFlows/MultiFlowsExample.vue
index c04ee41b..24fec277 100644
--- a/examples/MultiFlows/MultiFlowsExample.vue
+++ b/examples/MultiFlows/MultiFlowsExample.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import Flow from './Flow.vue'
-import './multiflows.css'
 </script>
 <template>
   <div class="vue-flow__example-multiflows">
@@ -8,3 +7,6 @@ import './multiflows.css'
     <Flow />
   </div>
 </template>
+<style>
+@import './multiflows.css';
+</style>
diff --git a/examples/Nesting/GroupNode.vue b/examples/Nesting/GroupNode.vue
index 59ced04a..6f39f519 100644
--- a/examples/Nesting/GroupNode.vue
+++ b/examples/Nesting/GroupNode.vue
@@ -3,18 +3,17 @@ import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
 import type { NodeProps } from '~/types/node'
 
 const props = defineProps<NodeProps>()
-const store = useVueFlow()
-store.hooks.nodeDragStop.on(({ node }) => {
+const { onNodeDragStop, getNodes, transform } = useVueFlow()
+onNodeDragStop(({ node }) => {
   const nodes = getNodesInside(
-    store.getNodes,
+    getNodes.value,
     {
       ...props.dimensions,
       x: props.computedPosition.x,
       y: props.computedPosition.y,
     },
-    store.transform,
+    transform.value,
   )
-  console.log(nodes)
   if (nodes.some((n) => n.id === node.id && n.id !== props.id)) {
     node.label = `In ${props.id}`
     node.data = {
diff --git a/examples/Nesting/Nesting.vue b/examples/Nesting/Nesting.vue
index 0550ec61..2b899a28 100644
--- a/examples/Nesting/Nesting.vue
+++ b/examples/Nesting/Nesting.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import GroupNode from './GroupNode.vue'
-import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '~/index'
+import { VueFlow, Elements, Edge, Connection, addEdge } from '~/index'
 
 const elements = ref<Elements<{ label: string; group?: string }>>([
   { id: 'node-2', label: 'node-2', position: { x: 50, y: 5 } },
diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index fc188e30..721a41cd 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
 import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
@@ -7,7 +6,7 @@ const initialElements: Elements = [
     id: '1',
     sourcePosition: Position.Right,
     type: 'input',
-    data: { label: 'Input' },
+    label: 'Input',
     position: { x: 0, y: 80 },
   },
   {
@@ -15,14 +14,12 @@ const initialElements: Elements = [
     type: 'output',
     sourcePosition: Position.Right,
     targetPosition: Position.Left,
-    data: { label: 'A Node' },
+    label: 'A Node',
     position: { x: 250, y: 0 },
   },
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
 ]
 
-const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
-
 const elements = ref<Elements>(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
@@ -30,18 +27,14 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
 
 const changeType = () => {
-  elements.value = elements.value.map((el) => {
-    if (isEdge(el) || el.type === 'input') return el
-
-    return {
-      ...el,
-      type: el.type === 'default' ? 'output' : 'default',
-    }
+  elements.value.forEach((el) => {
+    if (isEdge(el) || el.type === 'input') return
+    el.type = el.type === 'default' ? 'output' : 'default'
   })
 }
 </script>
 <template>
-  <VueFlow v-model="elements" @connect="onConnect" @load="onLoad">
-    <button :style="buttonStyle" @click="changeType">change type</button>
+  <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
+    <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
   </VueFlow>
 </template>
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
index 6803d52e..7444e93c 100644
--- a/examples/Overview/Overview.vue
+++ b/examples/Overview/Overview.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
 import {
   VueFlow,
   addEdge,
@@ -48,52 +47,40 @@ const initialElements: Elements = [
   {
     id: '1',
     type: 'input',
-    data: {
-      label: 'Welcome to <strong>Vue VueFlow!</strong>',
-    },
+    label: 'Welcome to <strong>Vue VueFlow!</strong>',
     position: { x: 250, y: 0 },
   },
   {
     id: '2',
-    data: {
-      label: 'This is a <strong>default node</strong>',
-    },
+    label: 'This is a <strong>default node</strong>',
     position: { x: 100, y: 100 },
   },
   {
     id: '3',
-    data: {
-      label: 'This one has a <strong>custom style</strong>',
-    },
+    label: 'This one has a <strong>custom style</strong>',
     position: { x: 400, y: 100 },
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
   {
     id: '4',
     position: { x: 250, y: 200 },
-    data: {
-      label: `You can find the docs on
+    label: `You can find the docs on
           <a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
             Github
           </a>`,
-    },
   },
   {
     id: '5',
-    data: {
-      label: 'Or check out the other <strong>examples</strong>',
-    },
+    label: 'Or check out the other <strong>examples</strong>',
     position: { x: 250, y: 325 },
   },
   {
     id: '6',
     type: 'output',
-    data: {
-      label: 'An <strong>output node</strong>',
-    },
+    label: 'An <strong>output node</strong>',
     position: { x: 100, y: 480 },
   },
-  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+  { id: '7', type: 'output', label: 'Another output node', position: { x: 400, y: 450 } },
   { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
@@ -111,7 +98,6 @@ const initialElements: Elements = [
   },
 ]
 
-const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
 const snapGrid: SnapGrid = [16, 16]
 
 const nodeStrokeColor = (n: Node): string => {
@@ -135,11 +121,12 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 <template>
   <VueFlow
     v-model="elements"
-    :connection-line-style="connectionLineStyle"
+    :connection-line-style="{ stroke: '#ddd' }"
     :snap-to-grid="true"
     :snap-grid="snapGrid"
     @element-click="onElementClick"
     @connect="onConnect"
+    @pane-ready="onLoad"
     @pane-click="onPaneClick"
     @pane-scroll="onPaneScroll"
     @pane-contex-menu="onPaneContextMenu"
@@ -153,7 +140,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     @selection-context-menu="onSelectionContextMenu"
     @selection-change="onSelectionChange"
     @move-end="onMoveEnd"
-    @load="onLoad"
     @edge-update="onEdgeMouseMove"
     @edge-context-menu="onEdgeContextMenu"
     @edge-mouse-enter="onEdgeMouseEnter"
diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
index de943f7b..dfb97cc6 100644
--- a/examples/Provider/ProviderExample.vue
+++ b/examples/Provider/ProviderExample.vue
@@ -1,51 +1,31 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import {
-  VueFlow,
-  addEdge,
-  Controls,
-  FlowInstance,
-  FlowElement,
-  Connection,
-  Edge,
-  Elements,
-  ConnectionMode,
-  useVueFlow,
-} from '~/index'
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
 
-import './provider.css'
-
-const onElementClick = (element: FlowElement) => console.log('click', element)
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 
 const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ]
 
 useVueFlow()
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
   <div class="providerflow">
     <Sidebar />
     <div class="vue-flow-wrapper">
-      <VueFlow
-        v-model="elements"
-        :connection-mode="ConnectionMode.Loose"
-        @element-click="onElementClick"
-        @connect="onConnect"
-        @elements-remove="onElementsRemove"
-        @load="onLoad"
-      >
+      <VueFlow v-model="elements" :connection-mode="ConnectionMode.Loose" @pane-ready="onLoad">
         <Controls />
       </VueFlow>
     </div>
   </div>
 </template>
+<style>
+@import './provider.css';
+</style>
diff --git a/examples/Provider/Sidebar.vue b/examples/Provider/Sidebar.vue
index 09dd507c..09923670 100644
--- a/examples/Provider/Sidebar.vue
+++ b/examples/Provider/Sidebar.vue
@@ -1,13 +1,10 @@
 <script lang="ts" setup>
 import { useVueFlow } from '~/index'
-const store = useVueFlow()
-
-const nodes = computed(() => store.getNodes)
-const transform = computed(() => store.transform)
+const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
 
 const selectAll = () => {
-  store.addSelectedNodes(nodes.value)
-  store.unsetUserSelection()
+  addSelectedNodes(getNodes.value)
+  nodesSelectionActive.value = true
 }
 </script>
 <template>
@@ -18,7 +15,7 @@ const selectAll = () => {
     <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>
-    <div v-for="node of nodes" :key="node.id">
+    <div v-for="node of getNodes" :key="node.id">
       Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
     </div>
 
diff --git a/examples/RGBFlow/RGBFlow.vue b/examples/RGBFlow/RGBFlow.vue
index 08024ad6..6e6c2379 100644
--- a/examples/RGBFlow/RGBFlow.vue
+++ b/examples/RGBFlow/RGBFlow.vue
@@ -30,15 +30,10 @@ const color = ref<Colors>({
   blue: 100,
 })
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
-const store = useVueFlow({
-  nodeTypes: ['rgb', 'rgb-output'],
-  edgeTypes: ['pathfinding'],
-  zoomOnScroll: false,
-})
 </script>
 <template>
   <div ref="page" class="demo-flow">
-    <VueFlow v-model="elements" @load="onLoad">
+    <VueFlow v-model="elements" @pane-ready="onLoad">
       <template #node-rgb="props">
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>
diff --git a/examples/SaveRestore/Controls.vue b/examples/SaveRestore/Controls.vue
index 65263b54..d1a6a820 100644
--- a/examples/SaveRestore/Controls.vue
+++ b/examples/SaveRestore/Controls.vue
@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
+import { useZoomPanHelper, FlowExportObject, Node, useVueFlow, useElementsState } from '~/index'
 
 const flowKey = 'example-flow'
 const state = useStorage(flowKey, {
-  elements: [],
+  nodes: [],
+  edges: [],
   position: [NaN, NaN],
   zoom: 1,
 } as FlowExportObject)
 
 const getNodeId = () => `randomnode_${+new Date()}`
 
-const { transform } = useZoomPanHelper()
-
-const flow = useVueFlow()
-const emit = defineEmits(['restore', 'add'])
+const { setTransform } = useZoomPanHelper()
+const { instance, dimensions } = useVueFlow()
+const { nodes, edges, addNodes, setNodes, setEdges } = useElementsState()
 
 const onSave = () => {
-  if (flow.instance) state.value = flow.instance.toObject()
+  state.value = instance.value.toObject()
 }
 
 const onRestore = () => {
@@ -24,18 +24,19 @@ const onRestore = () => {
 
   if (flow) {
     const [x = 0, y = 0] = flow.position
-    emit('restore', flow.elements ?? [])
-    transform({ x, y, zoom: flow.zoom || 0 })
+    setNodes(state.value.nodes)
+    setEdges(state.value.edges)
+    setTransform({ x, y, zoom: flow.zoom || 0 })
   }
 }
 
 const onAdd = () => {
   const newNode = {
     id: `random_node-${getNodeId()}`,
-    data: { label: 'Added node' },
-    position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
+    label: 'Added node',
+    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
   } as Node
-  flow.addElements([newNode])
+  addNodes([newNode])
 }
 </script>
 <template>
diff --git a/examples/SaveRestore/SaveRestoreExample.vue b/examples/SaveRestore/SaveRestoreExample.vue
index 3baf117f..08d6b9d1 100644
--- a/examples/SaveRestore/SaveRestoreExample.vue
+++ b/examples/SaveRestore/SaveRestoreExample.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { VueFlow, addEdge, Connection, Edge, Elements } from '~/index'
-
-import './save.css'
+import { VueFlow, Elements } from '~/index'
 
 const initialElements: Elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
 ]
 
 const elements = ref(initialElements)
-
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onRestore = (els: Elements) => (elements.value = els)
 </script>
 <template>
-  <VueFlow v-model="elements" storage-key="vue-flow-123" @connect="onConnect">
-    <Controls @restore="onRestore" />
+  <VueFlow v-model="elements">
+    <Controls />
   </VueFlow>
 </template>
+<style>
+@import './save.css';
+</style>
diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
index 164f6f66..02031c11 100644
--- a/examples/Switch/SwitchExample.vue
+++ b/examples/Switch/SwitchExample.vue
@@ -1,24 +1,21 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
-
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+import { VueFlow, Node, FlowElement, Elements } from '~/index'
 
 const elementsA: Elements = [
-  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
+  { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2a', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3a', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4a', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1a', target: '2a' },
   { id: 'e1-3', source: '1a', target: '3a' },
 ]
 
 const elementsB: Elements = [
-  { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, class: 'light' },
-  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
-  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
-  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, class: 'light' },
+  { id: 'inputb', type: 'input', label: 'Input', position: { x: 300, y: 5 }, class: 'light' },
+  { id: '1b', label: 'Node 1', position: { x: 0, y: 100 }, class: 'light' },
+  { id: '2b', label: 'Node 2', position: { x: 200, y: 100 }, class: 'light' },
+  { id: '3b', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4b', label: 'Node 4', position: { x: 600, y: 100 }, class: 'light' },
 
   { id: 'e1b', source: 'inputb', target: '1b' },
   { id: 'e2b', source: 'inputb', target: '2b' },
@@ -27,11 +24,9 @@ const elementsB: Elements = [
 ]
 
 const elements = ref(elementsA)
-
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <VueFlow v-model="elements" @element-click="onElementClick" @connect="onConnect" @node-drag-stop="onNodeDragStop">
+  <VueFlow v-model="elements">
     <div :style="{ position: 'absolute', right: 10, top: 10, zIndex: 4 }">
       <button style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
       <button @click="() => (elements = elementsB)">flow b</button>
diff --git a/examples/Unidirectional/CustomNode.vue b/examples/Unidirectional/CustomNode.vue
index efec4813..07f11d94 100644
--- a/examples/Unidirectional/CustomNode.vue
+++ b/examples/Unidirectional/CustomNode.vue
@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-// @ts-ignore
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, Position } from '~/index'
+import type { NodeProps } from '~/types/node'
 
-interface CustomNodeProps extends NodeProps {
-  id: string
-}
-const props = defineProps<CustomNodeProps>()
+const props = defineProps<NodeProps>()
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
 </script>
 <template>
-  <div :style="nodeStyles">
+  <div :key="props.id" :style="nodeStyles">
     <div>node {{ props.id }}</div>
     <Handle id="left" type="source" :position="Position.Left" />
     <Handle id="right" type="source" :position="Position.Right" />
diff --git a/examples/Unidirectional/UnidirectionalExample.vue b/examples/Unidirectional/UnidirectionalExample.vue
index b6b10950..03470434 100644
--- a/examples/Unidirectional/UnidirectionalExample.vue
+++ b/examples/Unidirectional/UnidirectionalExample.vue
@@ -174,10 +174,7 @@ let id = 4
 const getId = () => `${id++}`
 
 const elements = ref(initialElements)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'smoothstep' }, elements.value))
 const { project } = useZoomPanHelper()
-const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
-  (elements.value = updateEdge(oldEdge, newConnection, elements.value))
 
 const onPaneClick = (evt: MouseEvent) =>
   (elements.value = elements.value.concat({
@@ -189,12 +186,9 @@ const onPaneClick = (evt: MouseEvent) =>
 <template>
   <VueFlow
     v-model="elements"
-    :node-types="['custom']"
     :connection-line-type="ConnectionLineType.SmoothStep"
     :connection-mode="ConnectionMode.Loose"
-    @connect="onConnect"
     @pane-click="onPaneClick"
-    @edge-pdate="onEdgeUpdate"
   >
     <template #node-custom="props">
       <CustomNode v-bind="props" />
diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
index e3d9e83c..1ed6f3ad 100644
--- a/examples/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -16,27 +16,21 @@ const initialElements: Elements = [
   {
     id: '1',
     type: 'input',
-    data: {
-      label: 'Node <strong>A</strong>',
-    },
+    label: 'Node <strong>A</strong>',
     position: { x: 250, y: 0 },
   },
   {
     id: '2',
-    data: {
-      label: 'Node <strong>B</strong>',
-    },
+    label: 'Node <strong>B</strong>',
     position: { x: 100, y: 100 },
   },
   {
     id: '3',
-    data: {
-      label: 'Node <strong>C</strong>',
-    },
+    label: 'Node <strong>C</strong>',
     position: { x: 400, y: 100 },
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
-  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
+  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
 ]
 
 const elements = ref(initialElements)
@@ -52,7 +46,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     v-model="elements"
     :snap-to-grid="true"
     :connection-mode="ConnectionMode.Loose"
-    @load="onLoad"
+    @pane-ready="onLoad"
     @edge-update="onEdgeUpdate"
     @connect="onConnect"
     @edge-update-start="onEdgeUpdateStart"
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index 52bd5b91..a1c0f00c 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { VueFlow, 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: '1', label: '-', position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
 ]
 
@@ -17,18 +15,13 @@ const opts = ref({
 })
 
 const updateNode = () => {
-  elements.value = elements.value.map((el) => {
+  elements.value.forEach((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: opts.value.name,
-      }
+      el.label = opts.value.name
       el.style = { backgroundColor: opts.value.bg }
       el.hidden = opts.value.hidden
     }
-
-    return el
   })
 }
 
@@ -50,3 +43,6 @@ onMounted(updateNode)
     </div>
   </VueFlow>
 </template>
+<style>
+@import './updatenode.css';
+</style>
diff --git a/examples/Validation/CustomInput.vue b/examples/Validation/CustomInput.vue
index 3d24fd6b..d62d3577 100644
--- a/examples/Validation/CustomInput.vue
+++ b/examples/Validation/CustomInput.vue
@@ -6,6 +6,11 @@ interface CustomInputProps {
 }
 const props = defineProps<CustomInputProps>()
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <div>Only connectable with B</div>
   <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
diff --git a/examples/Validation/CustomNode.vue b/examples/Validation/CustomNode.vue
index 0c754302..702d582c 100644
--- a/examples/Validation/CustomNode.vue
+++ b/examples/Validation/CustomNode.vue
@@ -8,6 +8,11 @@ interface CustomNodeProps extends NodeProps {
 
 const props = defineProps<CustomNodeProps>()
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
   <div>{{ props.id }}</div>
diff --git a/examples/Validation/ValidationExample.vue b/examples/Validation/ValidationExample.vue
index 8888deb2..65c32eff 100644
--- a/examples/Validation/ValidationExample.vue
+++ b/examples/Validation/ValidationExample.vue
@@ -1,44 +1,38 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, addEdge, Connection, Elements, OnConnectStartParams, FlowInstance } from '~/index'
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useElementsState } from '~/index'
 
-import './validation.css'
-
-const initialElements: Elements = [
-  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
-  {
-    id: 'A',
-    type: 'customnode',
-    position: { x: 250, y: 0 },
-    isValidSourcePos: (connection) => {
-      console.log(connection)
-      return false
+const { nodes, edges, addEdges } = useElementsState({
+  nodes: [
+    { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+    {
+      id: 'A',
+      type: 'customnode',
+      position: { x: 250, y: 0 },
+      isValidSourcePos: () => false,
     },
-  },
-  { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
-  { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
-]
-
+    { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
+    { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
+  ],
+})
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
 const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
 const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
 
-const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection) => {
   console.log('on connect', params)
-  elements.value = addEdge(params, elements.value)
+  addEdges([params])
 }
 </script>
 <template>
   <VueFlow
     v-model="elements"
     :select-nodes-on-drag="false"
-    :node-types="['custominput', 'customnode']"
     class="validationflow"
     @connect="onConnect"
-    @oad="onLoad"
+    @pane-ready="onLoad"
     @connect-start="onConnectStart"
     @connect-stop="onConnectStop"
     @connect-end="onConnectEnd"
@@ -51,3 +45,6 @@ const onConnect = (params: Connection) => {
     </template>
   </VueFlow>
 </template>
+<style>
+@import './validation.css';
+</style>
diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
deleted file mode 100644
index 3e1f6d67..00000000
--- a/examples/ZoomPanHelper/ZoomPanHelperExample.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { VueFlow, addEdge, Background, MiniMap, useZoomPanHelper, Elements, Connection, Edge, Node } from '~/index'
-
-const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-]
-
-let id = 5
-const getId = () => `${id++}`
-
-const { project } = useZoomPanHelper()
-
-const elements = ref(initialElements)
-
-const onPaneClick = (evt: MouseEvent) => {
-  const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 })
-
-  elements.value = elements.value.concat({
-    id: getId(),
-    position: projectedPosition,
-    data: {
-      label: `${projectedPosition.x}-${projectedPosition.y}`,
-    },
-  } as Node)
-}
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-</script>
-<template>
-  <VueFlow v-model="elements" @connect="onConnect" @pane-click="onPaneClick">
-    <Background />
-    <MiniMap />
-  </VueFlow>
-</template>
diff --git a/examples/router.ts b/examples/router.ts
index af6db5be..bd1c81c3 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -93,10 +93,6 @@ export const routes: RouterOptions['routes'] = [
     path: '/validation',
     component: () => import('./Validation/ValidationExample.vue'),
   },
-  {
-    path: '/zoom-pan-helper',
-    component: () => import('./ZoomPanHelper/ZoomPanHelperExample.vue'),
-  },
   {
     path: '/nesting',
     component: () => import('./Nesting/Nesting.vue'),
diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
index 27b53dad..e108eb6e 100644
--- a/src/composables/useVueFlow.ts
+++ b/src/composables/useVueFlow.ts
@@ -1,5 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import { FlowOptions, UseVueFlow } from '~/types'
+import { FlowOptions, State, UseVueFlow } from '~/types'
 import { VueFlow } from '~/context'
 import { useStore } from '~/store'
 
@@ -11,7 +11,7 @@ export default (options?: FlowOptions): UseVueFlow => {
     : false
   if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
     const name = options?.id ?? `vue-flow-${id++}`
-    const store = useStore(name, options)
+    const store = useStore(options as State)
     vueFlow = {
       id: name,
       store: reactive(store),
diff --git a/src/store/store.ts b/src/store/store.ts
index b67b670b..6509db52 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,10 +1,9 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowExportObject, FlowHooksOn, FlowOptions, State, GraphEdge, GraphNode, Store } from '~/types'
-import { isEdge, isNode, onLoadToObject } from '~/utils'
+import { FlowHooksOn, State, Store } from '~/types'
 
-const useFlowStore = (preloadedState: State): Store => {
+export default (preloadedState: State): Store => {
   const state = reactive(useState(preloadedState))
   const getters = useGetters(state)
   const actions = useActions(state, getters)
@@ -25,47 +24,3 @@ const useFlowStore = (preloadedState: State): Store => {
     ...actions,
   }
 }
-
-export default (id: string, options?: FlowOptions): Store => {
-  const withStorage = options?.storageKey ?? false
-  let storedState = ref<FlowExportObject>()
-  const storageKey = id ?? options?.id
-  const preloadedState = options as State
-  if (withStorage) {
-    storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
-    if (storedState.value) {
-      preloadedState.nodes = (
-        storedState.value.nodes
-          ? storedState.value.nodes
-          : options?.nodes
-          ? options.nodes
-          : options?.modelValue
-          ? options?.modelValue.filter((el) => isNode(el))
-          : []
-      ) as GraphNode[]
-      preloadedState.edges = (
-        storedState.value.edges
-          ? storedState.value.edges
-          : options?.edges
-          ? options.edges
-          : options?.modelValue
-          ? options?.modelValue.filter((el) => isEdge(el))
-          : []
-      ) as GraphEdge[]
-      if (storedState.value.position && storedState.value.zoom)
-        preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
-    }
-  }
-  const store = useFlowStore(preloadedState)
-  if (withStorage && storageKey === id) {
-    const toObject = onLoadToObject(store.state)
-    watch(
-      store.state,
-      () => {
-        storedState.value = toObject()
-      },
-      { deep: true },
-    )
-  }
-  return store
-}