examples: cleanup examples and remove deprecated usages

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

examples/vite/src/CustomNode/CustomNode.vue

@@ -69,7 +69,9 @@ onMounted(() => {
 
 useVueFlow({
   connectionMode: ConnectionMode.Loose,
-  connectionLineStyle,
+  connectionLineOptions: {
+    style: connectionLineStyle,
+  },
   snapToGrid: true,
   snapGrid,
 })

examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, VueFlowStore } from '@vue-flow/core'
-import { Position, VueFlow, addEdge, isEdge } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
+import { Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
 
 const initialElements: Elements = [
   {
@@ -21,11 +21,13 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
 ]
 
+const { onConnect, addEdges, onPaneReady } = useVueFlow()
+
 const elements = ref<Elements>(initialElements)
 
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+onConnect((params) => addEdges([params]))
 
-const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
+onPaneReady((instance) => instance.fitView())
 
 const changeType = () => {
   elements.value.forEach((el) => {
@@ -36,7 +38,7 @@ const changeType = () => {
 </script>
 
 <template>
-  <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
+  <VueFlow v-model="elements">
     <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
   </VueFlow>
 </template>

examples/vite/src/Overview/Overview.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
-import { MarkerType, VueFlow, addEdge } from '@vue-flow/core'
+import type { Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
+import { MarkerType, VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
@@ -101,16 +101,14 @@ const nodeColor = (n: Node): string => {
 }
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 
 <template>
   <VueFlow
     v-model="elements"
     :connection-line-style="{ stroke: '#ddd' }"
-    :snap-to-grid="true"
+    snap-to-grid
     :snap-grid="snapGrid"
-    @connect="onConnect"
     @pane-ready="onLoad"
     @pane-click="onPaneClick"
     @pane-scroll="onPaneScroll"

examples/vite/src/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '@vue-flow/core'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 
 const initialElements: Elements = [
@@ -159,18 +159,7 @@ const initialElements: Elements = [
   },
 ]
 
-let id = 4
-const getId = () => `${id++}`
-
 const elements = ref(initialElements)
-const { project } = useZoomPanHelper()
-
-const onPaneClick = (evt: MouseEvent) =>
-  (elements.value = elements.value.concat({
-    id: getId(),
-    position: project({ x: evt.clientX, y: evt.clientY - 40 }),
-    type: 'custom',
-  } as Node))
 </script>
 
 <template>
@@ -178,7 +167,6 @@ const onPaneClick = (evt: MouseEvent) =>
     v-model="elements"
     :connection-line-type="ConnectionLineType.SmoothStep"
     :connection-mode="ConnectionMode.Loose"
-    @pane-click="onPaneClick"
     @pane-ready="({ fitView }) => fitView()"
   >
     <template #node-custom="props">

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import '@vue-flow/controls/dist/style.css'
@@ -26,14 +26,17 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', target: '2', label: 'Updatable target', updatable: 'target' },
 ]
 
+const { updateEdge } = useVueFlow()
+
 const elements = ref(initialElements)
+
 const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
+
 const onEdgeUpdateStart = ({ edge }: FlowEvents['edgeUpdateStart']) => console.log('start update', edge)
+
 const onEdgeUpdateEnd = ({ edge }: FlowEvents['edgeUpdateEnd']) => 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 onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => updateEdge(edge, connection)
 </script>
 
 <template>
@@ -43,7 +46,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     :connection-mode="ConnectionMode.Loose"
     @pane-ready="onLoad"
     @edge-update="onEdgeUpdate"
-    @connect="onConnect"
     @edge-update-start="onEdgeUpdateStart"
     @edge-update-end="onEdgeUpdateEnd"
   >