chore: fix examples

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

examples/Basic/Basic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, addEdge } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
 
-const elements = ref([
+const elements = ref<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 } },
@@ -9,12 +9,12 @@ const elements = ref([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance } = useVueFlow()
+const { nodes, onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
 onPaneReady(({ fitView }) => {
   fitView({ padding: 0.1 })
 })
 onNodeDragStop((e) => console.log('drag stop', e))
-onConnect((params) => addEdge(params, elements.value))
+onConnect((params) => addEdges([params]))
 
 const updatePos = () =>
   elements.value.forEach((el) => {
@@ -26,7 +26,7 @@ const updatePos = () =>
     }
   })
 
-const logToObject = () => console.log(instance.value.toObject())
+const logToObject = () => console.log(instance.value?.toObject())
 const resetTransform = () => elements.value.push({ id: '1234', position: { x: 50, y: 50 }, label: 'Foobar' })
 const toggleclasss = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>

examples/CustomConnectionLine/ConnectionLine.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionLineProps } from '~/index'
-
-interface CustomConnectionLineProps extends ConnectionLineProps {
+interface CustomConnectionLineProps {
   sourceX: number
   sourceY: number
   targetX: number

examples/CustomNode/CustomNode.vue

@@ -8,7 +8,6 @@ import {
   Node,
   Position,
   SnapGrid,
-  useNodesState,
   useVueFlow,
   VueFlow,
   Controls,
@@ -76,7 +75,6 @@ onMounted(() => {
 })
 
 const { onPaneReady } = useVueFlow()
-useNodesState()
 onPaneReady((flowInstance) => {
   flowInstance.fitView()
   console.log('flow loaded:', flowInstance)

examples/DragNDrop/DnD.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Node, useVueFlow, useElementsState } from '~/index'
+import { VueFlow, FlowInstance, Node, useVueFlow } from '~/index'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
 const flowInstance = ref<FlowInstance>()
 
-const { onPaneReady, onConnect } = useVueFlow()
-const { nodes, edges, addEdges, addNodes } = useElementsState({
+const { onPaneReady, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   nodes: [
     {
       id: '1',

examples/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, Background, FlowInstance } from '~/index'
+import { VueFlow, MiniMap, Controls, FlowInstance } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

examples/Edges/CustomEdge.vue

@@ -41,7 +41,7 @@ export default {
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>
     <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
-      {{ props.data.text }}
+      {{ props.data?.text }}
     </textPath>
   </text>
 </template>

examples/Edges/EdgesExample.vue

@@ -2,7 +2,7 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, useElementsState, Edge, Node } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '~/index'
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
@@ -71,7 +71,7 @@ const initialEdges: Edge[] = [
   },
 ]
 
-const { nodes, edges } = useElementsState({
+const { nodes, edges } = useVueFlow({
   nodes: initialNodes,
   edges: initialEdges,
 })

examples/Empty/EmptyExample.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow, useElementsState } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '~/index'
 
-const { onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
-const { nodes, addNodes, edges, addEdges } = useElementsState()
+const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
-onConnect((params) => addEdges[params])
+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()
+  const nodeId = (nodes.value.length + 1).toString()
   const newNode: Node = {
     id: nodeId,
     label: `Node: ${nodeId}`,

examples/Hidden/HiddenExample.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useElementsState } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
 
 const isHidden = ref(false)
 
-const { nodes, edges } = useElementsState({
+const { nodes, edges } = useVueFlow({
   nodes: [
     { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
     { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
@@ -17,8 +17,8 @@ const { nodes, edges } = useElementsState({
   ],
 })
 watchEffect(() => {
-  nodes.forEach((n) => (n.hidden = isHidden.value))
-  edges.forEach((e) => (e.hidden = isHidden.value))
+  nodes.value.forEach((n) => (n.hidden = isHidden.value))
+  edges.value.forEach((e) => (e.hidden = isHidden.value))
 })
 </script>
 <template>

examples/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow, useElementsState } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
 
 const {
   nodesDraggable,
@@ -18,6 +18,9 @@ const {
   onPaneScroll,
   onPaneContextMenu,
   onMoveEnd,
+  nodes,
+  edges,
+  addEdges,
 } = useVueFlow({
   modelValue: [
     { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -29,7 +32,6 @@ const {
   ],
 })
 
-const { nodes, edges, addEdges } = useElementsState()
 const captureZoomClick = ref(false)
 const captureZoomScroll = ref(false)
 

examples/Nesting/Nesting.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { ConnectionMode, useElementsState, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
+import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
 
-const { onConnect } = useVueFlow({
+const { onConnect, nodes, edges, addEdges } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
-})
-const { nodes, edges, addEdges } = useElementsState({
   nodes: [
     { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
     {

examples/Overview/Overview.vue

@@ -5,7 +5,6 @@ import {
   MiniMap,
   Controls,
   Background,
-  isNode,
   Node,
   Elements,
   FlowInstance,
@@ -28,9 +27,6 @@ const onSelectionDrag = (e: FlowEvents['selectionDrag']) => console.log('selecti
 const onSelectionDragStart = (e: FlowEvents['selectionDragStart']) => console.log('selection drag start', e)
 const onSelectionDragStop = (e: FlowEvents['selectionDragStop']) => console.log('selection drag stop', e)
 const onSelectionContextMenu = (e: FlowEvents['selectionContextMenu']) => console.log('selection context menu', e)
-const onElementClick = ({ element }: FlowEvents['elementClick']) =>
-  console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
-const onSelectionChange = (elements: FlowEvents['selectionChange']) => console.log('selection change', elements)
 const onLoad = (flowInstance: FlowInstance) => {
   console.log('flow loaded:', flowInstance)
   flowInstance.fitView()
@@ -124,7 +120,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     :connection-line-style="{ stroke: '#ddd' }"
     :snap-to-grid="true"
     :snap-grid="snapGrid"
-    @element-click="onElementClick"
     @connect="onConnect"
     @pane-ready="onLoad"
     @pane-click="onPaneClick"
@@ -138,7 +133,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     @selection-drag="onSelectionDrag"
     @selection-drag-stop="onSelectionDragStop"
     @selection-context-menu="onSelectionContextMenu"
-    @selection-change="onSelectionChange"
     @move-end="onMoveEnd"
     @edge-update="onEdgeMouseMove"
     @edge-context-menu="onEdgeContextMenu"

examples/RGBFlow/RGBFlow.vue

@@ -2,7 +2,7 @@
 import { templateRef } from '@vueuse/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow, useVueFlow } from '~/index'
+import { Elements, FlowInstance, VueFlow } from '~/index'
 
 type Colors = {
   red: number

examples/SaveRestore/Controls.vue

@@ -1,22 +1,21 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow, useElementsState } from '~/index'
+import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
 
 const flowKey = 'example-flow'
-const state = useStorage(flowKey, {
+const state = useStorage<FlowExportObject>(flowKey, {
   nodes: [],
   edges: [],
   position: [NaN, NaN],
   zoom: 1,
-} as FlowExportObject)
+})
 
 const getNodeId = () => `randomnode_${+new Date()}`
 
 const { setTransform } = useZoomPanHelper()
-const { instance, dimensions } = useVueFlow()
-const { nodes, edges, addNodes, setNodes, setEdges } = useElementsState()
+const { nodes, edges, addNodes, setNodes, setEdges, instance, dimensions } = useVueFlow()
 
 const onSave = () => {
-  state.value = instance.value.toObject()
+  state.value = instance.value?.toObject()
 }
 
 const onRestore = () => {

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Node, FlowElement, Elements } from '~/index'
+import { VueFlow, Elements } from '~/index'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/Validation/ValidationExample.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useElementsState } from '~/index'
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '~/index'
 
-const { nodes, edges, addEdges } = useElementsState({
+const { nodes, edges, addEdges } = useVueFlow({
   nodes: [
     { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
     {
@@ -28,7 +28,6 @@ const onConnect = (params: Connection) => {
 </script>
 <template>
   <VueFlow
-    v-model="elements"
     :select-nodes-on-drag="false"
     class="validationflow"
     @connect="onConnect"