update(examples): correct examples

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

examples/Basic/Basic.vue

@@ -1,71 +1,45 @@
 <script lang="ts" setup>
-import {
-  VueFlow,
-  MiniMap,
-  Controls,
-  Background,
-  Connection,
-  Edge,
-  Elements,
-  FlowInstance,
-  addEdge,
-  isNode,
-  removeElements,
-} from '~/index'
+import { VueFlow, MiniMap, Controls, Background, FlowInstance, useVueFlow, useNodesState, useEdgesState } from '~/index'
 
-const onNodeDragStop = (e) => console.log('drag stop', e)
-const onElementClick = (e) => console.log('click', e)
-const nodes = ref<Elements>([
+const initialNodes = [
   { 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 } },
-])
-const edges = ref<Elements>([
+]
+const initialEdges = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-])
+]
 const vfInstance = ref<FlowInstance>()
-const onConnect = (params: Edge | Connection) => addEdge(params, edges.value)
-const onLoad = (flowInstance: FlowInstance) => {
+
+const { OnPaneReady, OnNodeDragStop, OnConnect } = 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
-}
+})
+OnNodeDragStop((e) => console.log('drag stop', e))
+OnConnect((params) => addEdges([params]))
 
 const updatePos = () => {
-  nodes.value = nodes.value.map((el) => {
+  nodes.forEach((el) => {
     el.position = {
       x: Math.random() * 400,
       y: Math.random() * 400,
     }
-    return el
   })
 }
 
 const logToObject = () => console.log(vfInstance.value?.toObject())
 const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
-
 const toggleclasss = () => {
-  nodes.value = nodes.value.map((el) => {
-    if (isNode(el)) el.class = el.class === 'light' ? 'dark' : 'light'
-    return el
-  })
+  nodes.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
 </script>
 <template>
-  <VueFlow
-    class="vue-flow-basic-example"
-    :nodes="nodes"
-    :edges="edges"
-    :default-zoom="1.5"
-    :min-zoom="0.2"
-    :max-zoom="4"
-    :zoom-on-scroll="false"
-    @connect="onConnect"
-    @node-drag-stop="onNodeDragStop"
-    @node-click="onElementClick"
-    @pane-ready="onLoad"
-  >
+  <VueFlow class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" :zoom-on-scroll="false">
     <Background />
     <MiniMap />
     <Controls />

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import { VueFlow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
+import { VueFlow, addEdge, Background, BackgroundVariant, Elements, useVueFlow } from '~/index'
 
 const elements = ref<Elements>([
   {
     id: '1',
     type: 'input',
-    data: { label: 'Node 1' },
+    label: 'Node 1',
     position: { x: 250, y: 5 },
   },
 ])
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const { applyNodeChanges, OnNodesChange, OnConnect } = useVueFlow()
+OnNodesChange(applyNodeChanges)
+OnConnect((params) => (elements.value = addEdge(params, elements.value)))
 </script>
 <template>
-  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect">
-    <template #custom-connection-line="props">
+  <VueFlow v-model="elements">
+    <template #connection-line="props">
       <ConnectionLine v-bind="props" />
     </template>
     <Background :variant="BackgroundVariant.Lines" />

examples/CustomNode/ColorSelectorNode.vue

@@ -24,6 +24,11 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
 <template>
   <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
   <div>

examples/CustomNode/CustomNode.vue

@@ -3,7 +3,6 @@ import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
   VueFlow,
   isEdge,
-  removeElements,
   addEdge,
   MiniMap,
   Controls,
@@ -16,6 +15,7 @@ import {
   Connection,
   ConnectionMode,
   Edge,
+  useVueFlow,
 } from '~/index'
 
 const elements = ref<Elements>([])
@@ -23,12 +23,6 @@ const bgColor = ref('#1A192B')
 const connectionLineStyle = { stroke: '#fff' }
 const snapGrid: SnapGrid = [16, 16]
 
-const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.fitView()
-  console.log('flow loaded:', flowInstance)
-}
-const onNodeDragStop = ({ node }) => console.log('drag stop', node)
-const onElementClick = ({ element }) => console.log('click', element)
 const nodeStroke = (n: Node): string => {
   if (n.type === 'input') return '#0041d0'
   if (n.type === 'selectorNode') return bgColor.value
@@ -95,33 +89,33 @@ onMounted(() => {
   ]
 })
 
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-
-const onConnect = (params: Connection | Edge) =>
-  (elements.value = addEdge(
+const { useNodesState, OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
+useNodesState(undefined, true)
+OnPaneReady((flowInstance) => {
+  flowInstance.fitView()
+  console.log('flow loaded:', flowInstance)
+})
+OnNodeDragStop(({ node }) => console.log('drag stop', node))
+OnConnect((params) =>
+  addEdge(
     {
       ...params,
       animated: true,
       style: { stroke: '#fff' },
     } as Edge,
     elements.value,
-  ))
+  ),
+)
 </script>
 <template>
   <VueFlow
     v-model="elements"
     :style="`background: ${bgColor}`"
-    :node-types="['selectorNode']"
     :connection-mode="ConnectionMode.Loose"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
     :snap-grid="snapGrid"
     :default-zoom="1.5"
-    @element-click="onElementClick"
-    @elements-remove="onElementsRemove"
-    @connect="onConnect"
-    @node-drag-stop="onNodeDragStop"
-    @load="onLoad"
   >
     <template #node-selectorNode="props">
       <ColorSelectorNode v-bind="props" />

examples/DragNDrop/DnD.vue

@@ -1,21 +1,27 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, Node } from '~/index'
-import './dnd.css'
-
-const flowInstance = ref<FlowInstance>()
-const elements = ref<Elements>([
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'input node' },
-    position: { x: 250, y: 5 },
-  },
-])
+import { VueFlow, Controls, FlowInstance, Node, useVueFlow } from '~/index'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
+const flowInstance = ref<FlowInstance>()
+
+const { useNodesState, useEdgesState, OnPaneReady, OnConnect } = useVueFlow()
+const { edges, addEdges } = useEdgesState()
+const { nodes, addNodes } = useNodesState(
+  [
+    {
+      id: '1',
+      type: 'input',
+      label: 'input node',
+      position: { x: 250, y: 5 },
+    },
+  ],
+  true,
+)
+
+OnPaneReady((instance) => (flowInstance.value = instance))
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()
   if (event.dataTransfer) {
@@ -23,9 +29,7 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
+OnConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
   if (flowInstance.value) {
@@ -35,15 +39,18 @@ const onDrop = (event: DragEvent) => {
       id: getId(),
       type,
       position,
-      data: { label: `${type} node` },
+      label: `${type} node`,
     } as Node
-    elements.value.push(newNode)
+    addNodes([newNode])
   }
 }
 </script>
 <template>
   <div class="dndflow" @drop="onDrop">
-    <VueFlow v-model="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver" />
+    <VueFlow @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>
+<style>
+@import './dnd.css';
+</style>

examples/EdgeTypes/EdgeTypesExample.vue

@@ -1,29 +1,16 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import {
-  VueFlow,
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  FlowInstance,
-  Connection,
-  Edge,
-  Elements,
-} from '~/index'
+import { VueFlow, MiniMap, Controls, Background, FlowInstance } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
   console.log(flowInstance.getElements())
 }
 
-const elements = ref<Elements>(getElements())
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const elements = getElements()
 </script>
 <template>
-  <VueFlow v-model="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
     <MiniMap />
     <Controls />
   </VueFlow>

examples/EdgeTypes/utils.ts

@@ -69,18 +69,18 @@ export function getElements(): Elements {
           y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300,
         }
         const sourceId = getNodeId()
-        const sourceData = { label: `Source ${sourceId}` }
+        const sourceLabel = `Source ${sourceId}`
         const sourceNode = {
           id: sourceId,
           style,
-          data: sourceData,
+          label: sourceLabel,
           position: sourcePosition,
           sourcePosition: currSourceTargetPos.source,
           targetPosition: currSourceTargetPos.target,
         }
 
         const targetId = getNodeId()
-        const targetData = { label: `Target ${targetId}` }
+        const targetLabel = `Target ${targetId}`
         const targetPosition = {
           x: sourcePosition.x + currOffset.x,
           y: sourcePosition.y + currOffset.y,
@@ -88,7 +88,7 @@ export function getElements(): Elements {
         const targetNode = {
           id: targetId,
           style,
-          data: targetData,
+          label: targetLabel,
           position: targetPosition,
           sourcePosition: currSourceTargetPos.source,
           targetPosition: currSourceTargetPos.target,

examples/EdgeWithButton/ButtonEdge.vue

@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerEnd, Position, useVueFlow, EdgeProps } from '~/index'
-
-interface CustomEdgeProps<T = any> extends EdgeProps<T> {
-  id: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  sourcePosition: Position
-  targetPosition: Position
-  markerEndId?: string
-  data?: T
-}
-
-const props = defineProps<CustomEdgeProps>()
-const store = useVueFlow()
-const onEdgeClick = (evt: Event, id: string) => {
-  const edge = store.getEdge(id)
-  if (edge) {
-    store.hooks.elementsRemove.trigger([edge])
-  }
-  evt.stopPropagation()
-  alert(`remove ${id}`)
-}
-
-const foreignObjectSize = 40
-
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-const markerEnd = computed(() => getMarkerEnd(props.markerEnd, props.markerEndId))
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
-</script>
-<template>
-  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
-  <foreignObject
-    :width="foreignObjectSize"
-    :height="foreignObjectSize"
-    :x="center[0] - foreignObjectSize / 2"
-    :y="center[1] - foreignObjectSize / 2"
-    class="edgebutton-foreignobject"
-    requiredExtensions="http://www.w3.org/1999/xhtml"
-  >
-    <body>
-      <button class="edgebutton" @click="(event) => onEdgeClick(event, props.id)">×</button>
-    </body>
-  </foreignObject>
-</template>
-<style>
-.edgebutton {
-  border-radius: 999px;
-  cursor: pointer;
-}
-.edgebutton:hover {
-  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
-}
-</style>

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import ButtonEdge from './ButtonEdge.vue'
-import {
-  VueFlow,
-  addEdge,
-  Background,
-  Connection,
-  Controls,
-  Edge,
-  Elements,
-  MiniMap,
-  FlowInstance,
-  removeElements,
-} from '~/index'
-
-const elements = ref<Elements>([
-  {
-    id: 'ewb-1',
-    type: 'input',
-    data: { label: 'Input 1' },
-    position: { x: 250, y: 0 },
-  },
-  { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
-  {
-    id: 'edge-1-2',
-    source: 'ewb-1',
-    target: 'ewb-2',
-    type: 'button',
-  },
-])
-
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'button' } as Edge, elements.value))
-</script>
-<template>
-  <VueFlow
-    key="edge-with-button"
-    v-model="elements"
-    :snap-to-grid="true"
-    :edge-types="['button']"
-    @load="onLoad"
-    @elementsRemove="onElementsRemove"
-    @connect="onConnect"
-  >
-    <template #edge-button="props">
-      <ButtonEdge v-bind="props" />
-    </template>
-    <MiniMap />
-    <Controls />
-    <Background />
-  </VueFlow>
-</template>

examples/Edges/EdgesExample.vue

@@ -2,33 +2,23 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import {
-  VueFlow,
-  MiniMap,
-  Controls,
-  Background,
-  Elements,
-  FlowInstance,
-  FlowElement,
-  removeElements,
-  Connection,
-  Edge,
-  addEdge,
-  MarkerType,
-} from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow } from '~/index'
 
-const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
-  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
-  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
-  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
-  { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
-  { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
-  { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
-  { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
+const initialNodes = [
+  { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
+  { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
+  { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
+  { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
+  { id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
+  { id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
+  { id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
+  { id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
+  { id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
+]
+
+const initialEdges = [
   { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
   { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
@@ -75,25 +65,16 @@ const initialElements: Elements = [
   },
 ]
 
-const elements = ref<Elements>(initialElements)
+const { useNodesState, useEdgesState, OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
+const { nodes } = useNodesState(initialNodes)
+const { edges, addEdges } = useEdgesState(initialEdges)
 
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
-const onNodeDragStop = (node: Node) => console.log('drag stop', node)
-const onElementClick = (element: FlowElement) => console.log('click', element)
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+OnPaneReady((flowInstance) => flowInstance.fitView())
+OnNodeDragStop((node) => console.log('drag stop', node))
+OnConnect((params) => addEdges([params]))
 </script>
 <template>
-  <VueFlow
-    v-model="elements"
-    :snap-to-grid="true"
-    :edge-types="['custom', 'custom2']"
-    @element-click="onElementClick"
-    @elements-remove="onElementsRemove"
-    @connect="onConnect"
-    @node-drag-stop="onNodeDragStop"
-    @load="onLoad"
-  >
+  <VueFlow :snap-to-grid="true">
     <template #edge-custom="props">
       <CustomEdge v-bind="props" />
     </template>

examples/Empty/EmptyExample.vue

@@ -1,53 +1,32 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import {
-  VueFlow,
-  MiniMap,
-  Controls,
-  Background,
-  BackgroundVariant,
-  Connection,
-  Edge,
-  Elements,
-  FlowElement,
-  Node,
-  FlowInstance,
-  addEdge,
-  removeElements,
-} from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '~/index'
 
-const elements = ref<Elements>([])
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const { useNodesState, useEdgesState, OnConnect, OnPaneReady, OnNodeDragStop } = useVueFlow()
+const { nodes, addNodes } = useNodesState()
+const { edges, addEdges } = useEdgesState()
 
-const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
-const onElementClick = (element: FlowElement) => console.log('click', element)
-const onNodeDragStop = (node: 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 buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
 const addRandomNode = () => {
-  const nodeId = (elements.value.length + 1).toString()
+  const nodeId = (nodes.length + 1).toString()
   const newNode: Node = {
     id: nodeId,
     label: `Node: ${nodeId}`,
     position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
   } as Node
-  elements.value.push(newNode)
+  addNodes([newNode])
 }
 </script>
 <template>
-  <VueFlow
-    v-model="elements"
-    @load="onLoad"
-    @element-click="onElementClick"
-    @elements-remove="onElementsRemove"
-    @connect="onConnect"
-    @node-drag-stop="onNodeDragStop"
-  >
+  <VueFlow>
     <MiniMap />
     <Controls />
     <Background :variant="BackgroundVariant.Lines" />
 
-    <button type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
+    <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
+      add node
+    </button>
   </VueFlow>
 </template>

examples/Hidden/HiddenExample.vue

@@ -1,29 +1,28 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { VueFlow, MiniMap, Controls, Connection, Edge, Elements } from '~/index'
 
 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' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4' },
 ]
 
 const elements = ref<Elements>(initialElements)
-const isHidden = ref<boolean>(false)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const isHidden = ref(false)
 
 watchEffect(() => {
-  elements.value = elements.value.map((e) => {
+  elements.value.forEach((e) => {
     e.hidden = isHidden.value
     return e
   })
 })
 </script>
 <template>
-  <VueFlow v-model="elements" @connect="onConnect">
+  <VueFlow v-model="elements">
     <MiniMap />
     <Controls />
 

examples/Interaction/InteractionExample.vue

@@ -1,72 +1,51 @@
 <script lang="ts" setup>
-import {
-  VueFlow,
-  addEdge,
-  MiniMap,
-  Controls,
-  Elements,
-  Node,
-  FlowElement,
-  Connection,
-  Edge,
-  PanOnScrollMode,
-  FlowTransform,
-} from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
 
-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: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-]
+const {
+  nodesDraggable,
+  nodesConnectable,
+  elementsSelectable,
+  zoomOnScroll,
+  zoomOnDoubleClick,
+  zoomOnPinch,
+  panOnScroll,
+  panOnScrollMode,
+  paneMoveable,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  OnNodeDragStart,
+  OnNodeDragStop,
+  OnPaneClick,
+  OnPaneScroll,
+  OnPaneContextMenu,
+  OnMoveEnd,
+} = useVueFlow({
+  modelValue: [
+    { 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' },
+  ],
+})
 
-const elements = ref<Elements>(initialElements)
-
-const isSelectable = ref(false)
-const isDraggable = ref(false)
-const isConnectable = ref(false)
-const zoomOnScroll = ref(true)
-const zoomOnPinch = ref(false)
-const panOnScroll = ref(false)
-const panOnScrollMode = ref<PanOnScrollMode>(PanOnScrollMode.Free)
-const zoomOnDoubleClick = ref(false)
-const paneMoveable = ref(true)
+const { nodes } = useNodesState()
+const { edges, addEdges } = useEdgesState()
 const captureZoomClick = ref(false)
 const captureZoomScroll = ref(false)
-const captureElementClick = ref(false)
 
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onNodeDragStart = ({ node }) => console.log('drag start', node)
-const onNodeDragStop = ({ node }) => console.log('drag stop', node)
-const onElementClick = ({ element }) => (captureElementClick.value ? console.log('click', element) : undefined)
-const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event)
-const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event)
-const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event)
-const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform)
+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
-    v-model="elements"
-    :elements-selectable="isSelectable"
-    :nodes-connectable="isConnectable"
-    :nodes-draggable="isDraggable"
-    :zoom-on-scroll="zoomOnScroll"
-    :zoom-on-pinch="zoomOnPinch"
-    :pan-on-scroll="panOnScroll"
-    :pan-on-scroll-mode="panOnScrollMode"
-    :zoom-on-double-click="zoomOnDoubleClick"
-    :pane-moveable="paneMoveable"
-    @connect="onConnect"
-    @element-click="onElementClick"
-    @node-drag-start="onNodeDragStart"
-    @node-drag-stop="onNodeDragStop"
-    @pane-click="(e) => (captureZoomClick ? onPaneClick(e) : undefined)"
-    @pane-scroll="(e) => (captureZoomScroll ? onPaneScroll(e) : undefined)"
-    @pane-context-menu="(e) => (captureZoomClick ? onPaneContextMenu(e) : undefined)"
-    @move-end="onMoveEnd"
-  >
+  <VueFlow :nodes-draggable="captureZoomScroll">
     <MiniMap />
     <Controls />
 
@@ -74,19 +53,19 @@ const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', f
       <div>
         <label for="draggable">
           nodesDraggable
-          <input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
+          <input id="draggable" type="checkbox" class="vue-flow__draggable" />
         </label>
       </div>
       <div>
         <label for="connectable">
           nodesConnectable
-          <input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
+          <input id="connectable" v-model="nodesConnectable" type="checkbox" class="vue-flow__connectable" />
         </label>
       </div>
       <div>
         <label for="selectable">
           elementsSelectable
-          <input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
+          <input id="selectable" v-model="elementsSelectable" type="checkbox" class="vue-flow__selectable" />
         </label>
       </div>
       <div>
@@ -141,12 +120,6 @@ const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', f
           <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
-      <div>
-        <label for="captureelementclick">
-          capture onElementClick
-          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
-        </label>
-      </div>
     </div>
   </VueFlow>
 </template>

examples/Layouting/LayoutingExample.vue

@@ -14,7 +14,6 @@ import {
   isNode,
   CoordinateExtent,
   Position,
-  removeElements,
 } from '~/index'
 
 const dagreGraph = new dagre.graphlib.Graph()
@@ -27,7 +26,6 @@ const nodeExtent: CoordinateExtent = [
 
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 
 const onLayout = (direction: string) => {
   const isHorizontal = direction === 'LR'
@@ -63,7 +61,6 @@ const onLayout = (direction: string) => {
       :node-extent="nodeExtent"
       :connection-mode="ConnectionMode.Loose"
       @connect="onConnect"
-      @clements-remove="onElementsRemove"
       @load="() => onLayout('TB')"
     >
       <Controls />

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { VueFlow, Background, Connection, Elements, Edge, addEdge } 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' },
@@ -11,10 +11,9 @@ const initialElements: Elements = [
 
 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>
-  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" @connect="onConnect">
     <Background />
   </VueFlow>
 </template>

examples/NodeTypesIdChange/NodeA.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { NodeProps } from '~/index'
-
-interface NodeAProps extends NodeProps {
-  nodeStyles: Record<string, any>
-}
-const props = defineProps<NodeAProps>()
-</script>
-<template>
-  <div :style="props.nodeStyles">A</div>
-</template>

examples/NodeTypesIdChange/NodeB.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { NodeProps } from '~/index'
-
-interface NodeBPro extends NodeProps {
-  nodeStyles: Record<string, any>
-}
-const props = defineProps<NodeBPro>()
-</script>
-<template>
-  <div :style="props.nodeStyles">B</div>
-</template>

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import NodeA from './NodeA.vue'
-import NodeB from './NodeB.vue'
-import { VueFlow, Elements, Position, Connection, Edge, addEdge, NodeTypes } from '~/index'
-
-const initialElements: Elements = [
-  {
-    id: '1',
-    sourcePosition: Position.Right,
-    type: 'input',
-    data: { label: 'Input' },
-    position: { x: 0, y: 80 },
-  },
-  {
-    id: '2',
-    type: 'a',
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-    data: { label: 'A Node' },
-    position: { x: 250, y: 0 },
-  },
-]
-
-const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
-
-const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
-
-const nodeTypesObjects: Record<string, NodeTypes> = {
-  a: ['a'],
-  b: ['b'],
-}
-
-const elements = ref(initialElements)
-const nodeTypesId = ref('a')
-const changeType = () => {
-  const id = nodeTypesId.value === 'a' ? 'b' : 'a'
-  elements.value[1].type = id
-  nodeTypesId.value = id
-}
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-</script>
-<template>
-  <VueFlow v-model="elements" :node-types="nodeTypesObjects[nodeTypesId]" @connect="onConnect">
-    <template #node-a>
-      <NodeA :node-styles="nodeStyles" />
-    </template>
-    <template #node-b>
-      <NodeB :node-styles="nodeStyles" />
-    </template>
-    <button :style="buttonStyle" @click="changeType">change type</button>
-  </VueFlow>
-</template>

examples/Overview/Overview.vue

@@ -2,7 +2,6 @@
 import { CSSProperties } from 'vue'
 import {
   VueFlow,
-  removeElements,
   addEdge,
   MiniMap,
   Controls,
@@ -10,7 +9,6 @@ import {
   isNode,
   Node,
   Elements,
-  FlowElement,
   FlowInstance,
   FlowTransform,
   SnapGrid,
@@ -133,7 +131,6 @@ const nodeColor = (n: Node): string => {
 
 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>
   <VueFlow
@@ -142,7 +139,6 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     :snap-to-grid="true"
     :snap-grid="snapGrid"
     @element-click="onElementClick"
-    @elements-remove="onElementsRemove"
     @connect="onConnect"
     @pane-click="onPaneClick"
     @pane-scroll="onPaneScroll"

examples/Provider/ProviderExample.vue

@@ -3,7 +3,6 @@ import Sidebar from './Sidebar.vue'
 import {
   VueFlow,
   addEdge,
-  removeElements,
   Controls,
   FlowInstance,
   FlowElement,

examples/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { VueFlow, addEdge, Connection, Edge, Elements, removeElements } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements } from '~/index'
 
 import './save.css'
 
@@ -13,11 +13,10 @@ const initialElements: Elements = [
 const elements = ref(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onRestore = (els: Elements) => (elements.value = els)
 </script>
 <template>
-  <VueFlow v-model="elements" storage-key="vue-flow-123" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow v-model="elements" storage-key="vue-flow-123" @connect="onConnect">
     <Controls @restore="onRestore" />
   </VueFlow>
 </template>

examples/Stress/StressExample.vue

@@ -9,8 +9,8 @@ const onLoad = (flowInstance: FlowInstance) => {
   console.log(flowInstance.getNodes())
 }
 
-const { nodes, edges } = getElements(30, 30)
+const { nodes, edges } = getElements(10, 10)
 </script>
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" @load="onLoad"> </VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges" @pane-ready="onLoad"> </VueFlow>
 </template>

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+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)
@@ -29,16 +29,9 @@ const elementsB: Elements = [
 const elements = ref(elementsA)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <VueFlow
-    v-model="elements"
-    @element-click="onElementClick"
-    @elements-remove="onElementsRemove"
-    @connect="onConnect"
-    @node-drag-stop="onNodeDragStop"
-  >
+  <VueFlow v-model="elements" @element-click="onElementClick" @connect="onConnect" @node-drag-stop="onNodeDragStop">
     <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/UpdatableEdge/UpdatableEdgeExample.vue

@@ -8,7 +8,6 @@ import {
   FlowInstance,
   Connection,
   Edge,
-  removeElements,
   FlowEvents,
   ConnectionMode,
 } from '~/index'
@@ -47,7 +46,6 @@ const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
 const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) =>
   (elements.value = updateEdge(edge, connection, elements.value))
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
   <VueFlow
@@ -58,7 +56,6 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     @edge-update="onEdgeUpdate"
     @connect="onConnect"
     @edge-update-start="onEdgeUpdateStart"
-    @elements-remove="onElementsRemove"
     @edge-update-end="onEdgeUpdateEnd"
   >
     <Controls />

examples/UpdateNodeInternals/CustomNode.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { Handle, Position, NodeProps } from '~/index'
-
-interface CustomNodeProps extends NodeProps {
-  data: {
-    handleCount: number
-    handlePosition: number
-  }
-}
-const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }
-
-const props = defineProps<CustomNodeProps>()
-</script>
-<template>
-  <div :style="nodeStyles">
-    <Handle type="target" :position="Position.Left" />
-    <div>output handle count: {{ props.data.handleCount }}</div>
-    <Handle
-      v-for="i of props.data.handleCount"
-      :id="`handle-${i}`"
-      :key="`handle-${i}`"
-      type="source"
-      :position="Position.Right"
-      :style="{ top: `${10 * i + props.data.handlePosition * 10}px` }"
-    />
-  </div>
-</template>

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -1,74 +0,0 @@
-<script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import CustomNode from './CustomNode.vue'
-import {
-  VueFlow,
-  addEdge,
-  useZoomPanHelper,
-  Node,
-  Elements,
-  Connection,
-  Edge,
-  Position,
-  isEdge,
-  FlowInstance,
-} from '~/index'
-
-const initialHandleCount = 1
-
-const initialElements: Elements = [
-  {
-    id: '1',
-    type: 'custom',
-    data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
-    position: { x: 250, y: 5 },
-  },
-]
-
-const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
-
-let id = 5
-const getId = () => `${id++}`
-
-const elements = ref<Elements>(initialElements)
-const flowInstance = ref<FlowInstance>()
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const { project } = useZoomPanHelper()
-
-const onPaneClick = (evt: MouseEvent) =>
-  (elements.value = elements.value.concat({
-    id: getId(),
-    position: project({ x: evt.clientX, y: evt.clientY - 40 }),
-    data: { label: 'new node' },
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-  } as Node))
-
-const toggleHandleCount = () =>
-  (elements.value = elements.value.map((el) => {
-    if (isEdge(el)) return el
-    return { ...el, data: { ...el.data, handleCount: el.data?.handleCount === 1 ? 2 : 1 } }
-  }))
-
-const toggleHandlePosition = () =>
-  (elements.value = elements.value.map((el) => {
-    if (isEdge(el)) return el
-    return { ...el, data: { ...el.data, handlePosition: el.data?.handlePosition === 0 ? 1 : 0 } }
-  }))
-
-const onLoad = (instance: FlowInstance) => {
-  instance.fitView()
-  flowInstance.value = instance
-}
-</script>
-<template>
-  <VueFlow v-model="elements" :node-types="['custom']" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
-    <template #node-custom="props">
-      <CustomNode v-bind="props" />
-    </template>
-    <div :style="buttonWrapperStyles">
-      <button @click="toggleHandleCount">toggle handle count</button>
-      <button @click="toggleHandlePosition">toggle handle position</button>
-    </div>
-  </VueFlow>
-</template>

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -1,16 +1,5 @@
 <script lang="ts" setup>
-import {
-  VueFlow,
-  removeElements,
-  addEdge,
-  Background,
-  MiniMap,
-  useZoomPanHelper,
-  Elements,
-  Connection,
-  Edge,
-  Node,
-} from '~/index'
+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' },
@@ -40,10 +29,9 @@ const onPaneClick = (evt: MouseEvent) => {
   } as Node)
 }
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <VueFlow v-model="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
+  <VueFlow v-model="elements" @connect="onConnect" @pane-click="onPaneClick">
     <Background />
     <MiniMap />
   </VueFlow>

examples/router.ts

@@ -29,10 +29,6 @@ export const routes: RouterOptions['routes'] = [
     path: '/edges',
     component: () => import('./Edges/EdgesExample.vue'),
   },
-  {
-    path: '/button-edge',
-    component: () => import('./EdgeWithButton/EdgeWithButton.vue'),
-  },
   {
     path: '/edge-types',
     component: () => import('./EdgeTypes/EdgeTypesExample.vue'),
@@ -61,10 +57,6 @@ export const routes: RouterOptions['routes'] = [
     path: '/node-type-change',
     component: () => import('./NodeTypeChange/NodeTypeChangeExample.vue'),
   },
-  {
-    path: '/node-types-id-change',
-    component: () => import('./NodeTypesIdChange/NodeTypesIdChangeExample.vue'),
-  },
   {
     path: '/overview',
     component: () => import('./Overview/Overview.vue'),
@@ -97,10 +89,6 @@ export const routes: RouterOptions['routes'] = [
     path: '/update-node',
     component: () => import('./UpdateNode/UpdateNodeExample.vue'),
   },
-  {
-    path: '/update-node-internals',
-    component: () => import('./UpdateNodeInternals/UpdateNodeInternalsExample.vue'),
-  },
   {
     path: '/validation',
     component: () => import('./Validation/ValidationExample.vue'),