update(examples): correct examples

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

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, instance } = useVueFlow()
-
-const { OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
 const { nodes } = useNodesState({ nodes: initialNodes, applyDefault: true })
 const { edges, addEdges } = useEdgesState({ edges: initialEdges, applyDefault: true })
-OnPaneReady((flowInstance) => {
+onPaneReady(({ fitView }) => {
-  flowInstance.fitView({ padding: 0.1 })
+  fitView({ padding: 0.1 })
-  vfInstance.value = flowInstance
 })
-OnNodeDragStop((e) => console.log('drag stop', e))
+onNodeDragStop((e) => console.log('drag stop', e))
-OnConnect((params) => addEdges([params]))
+onConnect((params) => addEdges([params]))
 
 const updatePos = () => {
   nodes.forEach((el) => {
@@ -32,8 +29,8 @@ const updatePos = () => {
   })
 }
 
-const logToObject = () => console.log(vfInstance.value?.toObject())
+const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclasss = () => {
   nodes.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }

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

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

examples/Edges/EdgesExample.vue

@@ -65,16 +65,13 @@ const initialEdges = [
   },
 ]
 
-const { OnPaneReady } = useVueFlow()
+const { nodes, edges } = useElementsState({
-const { nodes, edges, addEdges } = 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>

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])
+onConnect((params) => addEdges[params])
-OnPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
+onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
-OnNodeDragStop((node) => console.log('drag stop', node))
+onNodeDragStop((node) => console.log('drag stop', node))
 
 const addRandomNode = () => {
   const nodeId = (nodes.length + 1).toString()

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) => {
+  nodes.forEach((n) => (n.hidden = isHidden.value))
-    e.hidden = isHidden.value
+  edges.forEach((e) => (e.hidden = isHidden.value))
-    return e
-  })
 })
 </script>
 <template>
-  <VueFlow v-model="elements">
+  <VueFlow>
     <MiniMap />
     <Controls />
 

examples/Interaction/InteractionExample.vue

@@ -11,13 +11,13 @@ const {
   panOnScroll,
   panOnScrollMode,
   paneMoveable,
-  OnConnect,
+  onConnect,
-  OnNodeDragStart,
+  onNodeDragStart,
-  OnNodeDragStop,
+  onNodeDragStop,
-  OnPaneClick,
+  onPaneClick,
-  OnPaneScroll,
+  onPaneScroll,
-  OnPaneContextMenu,
+  onPaneContextMenu,
-  OnMoveEnd,
+  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]))
+onConnect((params) => addEdges([params]))
-OnNodeDragStart((e) => console.log('drag start', e))
+onNodeDragStart((e) => console.log('drag start', e))
-OnNodeDragStop((e) => console.log('drag stop', e))
+onNodeDragStop((e) => console.log('drag stop', e))
-OnPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
-OnPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
-OnPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
+onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
-OnMoveEnd((flowTransform) => console.log('move end', flowTransform))
+onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 <template>
   <VueFlow>

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 {
+import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
-  VueFlow,
-  Controls,
-  addEdge,
-  ConnectionMode,
-  Connection,
-  Edge,
-  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
+    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
-      v-model="elements"
-      :node-extent="nodeExtent"
-      :connection-mode="ConnectionMode.Loose"
-      @connect="onConnect"
-      @load="() => onLayout('TB')"
-    >
       <Controls />
     </VueFlow>
     <div class="controls">
-      <button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
+      <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
-      <button @click="() => onLayout('LR')">horizontal layout</button>
+      <button @click="onLayout('LR')">horizontal layout</button>
     </div>
   </div>
 </template>
+<style>
+@import './layouting.css';
+</style>

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

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: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, 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>

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>

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()
+const { onNodeDragStop, getNodes, transform } = useVueFlow()
-store.hooks.nodeDragStop.on(({ node }) => {
+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 = {

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

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) => {
+  elements.value.forEach((el) => {
-    if (isEdge(el) || el.type === 'input') return el
+    if (isEdge(el) || el.type === 'input') return
-
+    el.type = el.type === 'default' ? 'output' : 'default'
-    return {
-      ...el,
-      type: el.type === 'default' ? 'output' : 'default',
-    }
   })
 }
 </script>
 <template>
-  <VueFlow v-model="elements" @connect="onConnect" @load="onLoad">
+  <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
-    <button :style="buttonStyle" @click="changeType">change type</button>
+    <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
   </VueFlow>
 </template>

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"

examples/Provider/ProviderExample.vue

@@ -1,51 +1,31 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import {
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
-  VueFlow,
-  addEdge,
-  Controls,
-  FlowInstance,
-  FlowElement,
-  Connection,
-  Edge,
-  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: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { 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
+      <VueFlow v-model="elements" :connection-mode="ConnectionMode.Loose" @pane-ready="onLoad">
-        v-model="elements"
-        :connection-mode="ConnectionMode.Loose"
-        @element-click="onElementClick"
-        @connect="onConnect"
-        @elements-remove="onElementsRemove"
-        @load="onLoad"
-      >
         <Controls />
       </VueFlow>
     </div>
   </div>
 </template>
+<style>
+@import './provider.css';
+</style>

examples/Provider/Sidebar.vue

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
 import { useVueFlow } from '~/index'
-const store = useVueFlow()
+const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
-
-const nodes = computed(() => store.getNodes)
-const transform = computed(() => store.transform)
 
 const selectAll = () => {
-  store.addSelectedNodes(nodes.value)
+  addSelectedNodes(getNodes.value)
-  store.unsetUserSelection()
+  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>
 

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>

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 { setTransform } = useZoomPanHelper()
-
+const { instance, dimensions } = useVueFlow()
-const flow = useVueFlow()
+const { nodes, edges, addNodes, setNodes, setEdges } = useElementsState()
-const emit = defineEmits(['restore', 'add'])
 
 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 ?? [])
+    setNodes(state.value.nodes)
-    transform({ x, y, zoom: flow.zoom || 0 })
+    setEdges(state.value.edges)
+    setTransform({ x, y, zoom: flow.zoom || 0 })
   }
 }
 
 const onAdd = () => {
   const newNode = {
     id: `random_node-${getNodeId()}`,
-    data: { label: 'Added node' },
+    label: 'Added node',
-    position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
+    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
   } as Node
-  flow.addElements([newNode])
+  addNodes([newNode])
 }
 </script>
 <template>

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 { VueFlow, Elements } from '~/index'
-
-import './save.css'
 
 const initialElements: Elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
+  { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { 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">
+  <VueFlow v-model="elements">
-    <Controls @restore="onRestore" />
+    <Controls />
   </VueFlow>
 </template>
+<style>
+@import './save.css';
+</style>

examples/Switch/SwitchExample.vue

@@ -1,24 +1,21 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { VueFlow, Node, FlowElement, Elements } from '~/index'
-
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
 
 const elementsA: Elements = [
-  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
+  { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '2a', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '3a', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, 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: 'inputb', type: 'input', label: 'Input', position: { x: 300, y: 5 }, class: 'light' },
-  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
+  { id: '1b', label: 'Node 1', position: { x: 0, y: 100 }, class: 'light' },
-  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
+  { id: '2b', label: 'Node 2', position: { x: 200, y: 100 }, class: 'light' },
-  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '3b', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, 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>

examples/Unidirectional/CustomNode.vue

@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-// @ts-ignore
+import { Handle, Position } from '~/index'
-import { Handle, NodeProps, Position } from '~/index'
+import type { NodeProps } from '~/types/node'
 
-interface CustomNodeProps extends NodeProps {
+const props = defineProps<NodeProps>()
-  id: string
-}
-const props = defineProps<CustomNodeProps>()
 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" />

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

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"

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: '1', label: '-', position: { x: 100, y: 100 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { 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.label = opts.value.name
-        ...el.data,
-        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>

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

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>

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 { nodes, edges, addEdges } = useElementsState({
-
+  nodes: [
-const initialElements: Elements = [
+    { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
-  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+    {
-  {
+      id: 'A',
-    id: 'A',
+      type: 'customnode',
-    type: 'customnode',
+      position: { x: 250, y: 0 },
-    position: { x: 250, y: 0 },
+      isValidSourcePos: () => false,
-    isValidSourcePos: (connection) => {
-      console.log(connection)
-      return false
     },
-  },
+    { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, 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' },
-  { 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>

examples/ZoomPanHelper/ZoomPanHelperExample.vue

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

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'),

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

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 { FlowHooksOn, State, Store } from '~/types'
-import { isEdge, isNode, onLoadToObject } from '~/utils'
 
-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
-}