chore(examples): update examples with new API for add/remove

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

examples/vite/src/Basic/Basic.vue

@@ -20,7 +20,7 @@ const { onConnect, addEdges, setTransform, toObject } = useVueFlow({
   maxZoom: 4,
 })
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
 
 function updatePos() {
   return elements.value.forEach((el) => {

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       this.instance = instance as any
     },
     onConnect(params: FlowEvents['connect']) {
-      this.instance?.addEdges([params])
+      this.instance?.addEdges(params)
     },
   },
 })

examples/vite/src/DragNDrop/DnD.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { Node } from '@vue-flow/core'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 
@@ -27,7 +26,7 @@ function onDragOver(event: DragEvent) {
 
 const wrapper = ref()
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
 
 function onDrop(event: DragEvent) {
   const type = event.dataTransfer?.getData('application/vueflow')
@@ -39,14 +38,12 @@ function onDrop(event: DragEvent) {
     y: event.clientY - flowbounds.top,
   })
 
-  const newNode = {
+  addNodes({
     id: getId(),
     type,
     position,
     label: `${type} node`,
-  } as Node
+  })
-
-  addNodes([newNode])
 }
 </script>
 

examples/vite/src/EasyConnect/CustomConnectionLine.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { GraphNode } from '@vue-flow/core'
 import { getStraightPath } from '@vue-flow/core'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
+
 const props = defineProps<{ sourceNode: GraphNode; sourceX: number; sourceY: number; targetX: number; targetY: number }>()
 
 const edgePath = computed(() =>

examples/vite/src/EasyConnect/EasyConnect.vue

@@ -43,11 +43,7 @@ const elements = ref<Elements>([
   },
 ])
 
-onConnect((params) => {
+onConnect(addEdges)
-  console.log('connecting')
-
-  addEdges([params])
-})
 </script>
 
 <template>

examples/vite/src/Edges/CustomEdge.vue

@@ -41,7 +41,7 @@ export default {
       }"
       class="nodrag nopan"
     >
-      <button class="edgebutton" @click="removeEdges([id])">×</button>
+      <button class="edgebutton" @click="removeEdges(id)">×</button>
     </div>
   </EdgeLabelRenderer>
 </template>

examples/vite/src/Empty/EmptyExample.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { Node } from '@vue-flow/core'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 import { Background, BackgroundVariant } from '@vue-flow/background'
@@ -8,18 +7,20 @@ import { MiniMap } from '@vue-flow/minimap'
 
 const { nodes, addNodes, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
+
 onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
+
 onNodeDragStop((node) => console.log('drag stop', node))
 
 function addRandomNode() {
   const nodeId = (nodes.value.length + 1).toString()
-  const newNode: Node = {
+
+  addNodes({
     id: nodeId,
     label: `Node: ${nodeId}`,
     position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
-  }
+  })
-  addNodes([newNode])
 }
 </script>
 

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -35,6 +35,6 @@ const d = computed(() =>
 <template>
   <g>
     <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d[0]" />
-    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -11,13 +11,13 @@ interface FloatingEdgeProps extends EdgeProps {
   markerEndId?: string
   sourceNode: GraphNode
   targetNode: GraphNode
-  nodes: GraphNode[]
   style?: CSSProperties
   markerEnd: MarkerType
   markerStart: MarkerType
 }
 
 const props = defineProps<FloatingEdgeProps>()
+
 const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
 
 const d = computed(
@@ -37,13 +37,6 @@ const d = computed(
 
 <template>
   <g class="vue-flow__connection">
-    <path
+    <path :id="id" class="vue-flow__edge-path" :d="d[0]" :marker-start="markerStart" :marker-end="markerEnd" :style="style" />
-      :id="props.id"
-      class="vue-flow__edge-path"
-      :d="d[0]"
-      :marker-start="props.markerStart"
-      :marker-end="props.markerEnd"
-      :style="props.style"
-    />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -8,25 +8,28 @@ import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
 
-const { addEdges, onConnect, onPaneReady, getNodes } = useVueFlow({
+const { addEdges, onConnect } = useVueFlow({
   modelValue: createElements(),
 })
-onPaneReady(({ fitView }) => fitView())
+
-onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: MarkerType.Arrow }]))
+onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerType.Arrow }))
 </script>
 
 <template>
   <div class="floatingedges">
-    <VueFlow>
+    <VueFlow fit-view-on-init>
       <Background :variant="BackgroundVariant.Lines" :gap="24" />
+
       <MiniMap />
+
       <Controls />
 
       <template #connection-line="props">
         <FloatingConnectionLine v-bind="props" />
       </template>
+
       <template #edge-floating="props">
-        <FloatingEdge v-bind="props" :nodes="getNodes" />
+        <FloatingEdge v-bind="props" />
       </template>
     </VueFlow>
   </div>

examples/vite/src/Hidden/HiddenExample.vue

@@ -19,15 +19,17 @@ const { nodes, edges } = useVueFlow({
     { id: 'e3-4', source: '3', target: '4' },
   ],
 })
-watchEffect(() => {
+
-  nodes.value.forEach((n) => (n.hidden = isHidden.value))
+watch(isHidden, (shouldHide) => {
-  edges.value.forEach((e) => (e.hidden = isHidden.value))
+  nodes.value.forEach((n) => (n.hidden = shouldHide))
+  edges.value.forEach((e) => (e.hidden = shouldHide))
 })
 </script>
 
 <template>
   <VueFlow>
     <MiniMap />
+
     <Controls />
 
     <div :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }">

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -33,23 +33,31 @@ const {
 })
 
 const captureZoomClick = ref(false)
+
 const captureZoomScroll = ref(false)
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
+
 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>
     <MiniMap />
+
     <Controls />
 
-    <div :style="{ position: 'absolute', left: 10, top: 10, zIndex: 4 }">
+    <Panel :position="PanelPosition.TopLeft">
       <div>
         <label for="draggable">
           nodesDraggable
@@ -120,6 +128,6 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
           <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
-    </div>
+    </Panel>
   </VueFlow>
 </template>

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Panel, PanelPosition, Position, VueFlow, isNode } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import '@vue-flow/controls/dist/style.css'
@@ -9,6 +9,7 @@ import '@vue-flow/controls/dist/style.css'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
+
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
 const nodeExtent: CoordinateExtent = [
@@ -47,14 +48,11 @@ function onLayout(direction: string) {
   <div class="layoutflow">
     <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
       <Controls />
+
+      <Panel style="display: flex; gap: 10px" :position="PanelPosition.TopRight">
+        <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
+        <button @click="onLayout('LR')">horizontal layout</button>
+      </Panel>
     </VueFlow>
-    <div class="controls">
-      <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
-      <button @click="onLayout('LR')">horizontal layout</button>
-    </div>
   </div>
 </template>
-
-<style>
-@import 'layouting.css';
-</style>

examples/vite/src/Layouting/layouting.css

@@ -1,15 +0,0 @@
-.layoutflow {
-  flex-grow: 1;
-  position: relative;
-}
-
-.layoutflow .controls {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 10;
-}
-
-.controls button {
-  margin-left: 10px;
-}

examples/vite/src/MultiFlows/Flow.vue

@@ -16,7 +16,7 @@ const elements = ref<Elements>(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" :fit-view-on-init="true">
+  <VueFlow v-model="elements" fit-view-on-init>
     <Background />
   </VueFlow>
 </template>

examples/vite/src/MultiFlows/MultiFlowsExample.vue

@@ -5,6 +5,7 @@ import Flow from './Flow.vue'
 <template>
   <div class="vue-flow__example-multiflows">
     <Flow />
+
     <Flow />
   </div>
 </template>

examples/vite/src/Nesting/GroupNode.vue

@@ -31,7 +31,9 @@ onNodeDragStop(({ node }) => {
 <template>
   <div class="vue-flow__group-node">
     <Handle type="target" :position="Position.Top" />
+
     <strong>Group {{ label }}</strong>
+
     <Handle type="source" :position="Position.Bottom" />
   </div>
 </template>

examples/vite/src/Nesting/Nesting.vue

@@ -73,21 +73,19 @@ const { onConnect, addEdges, addNodes, findNode } = useVueFlow({
   ],
 })
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
 
 onMounted(() => {
   // add nodes to parent
-  addNodes([
+  addNodes({
-    {
+    id: '999',
-      id: '999',
+    type: 'input',
-      type: 'input',
+    label: 'Added after mount',
-      label: 'Added after mount',
+    position: { x: 20, y: 100 },
-      position: { x: 20, y: 100 },
+    class: 'light',
-      class: 'light',
+    expandParent: true,
-      expandParent: true,
+    parentNode: '2',
-      parentNode: '2',
+  })
-    },
-  ])
 
   setTimeout(() => {
     const node = findNode('999')!

examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, isEdge } from '@vue-flow/core'
 
 const initialElements: Elements = [
   {
@@ -21,14 +21,8 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
 ]
 
-const { onConnect, addEdges, onPaneReady } = useVueFlow()
-
 const elements = ref<Elements>(initialElements)
 
-onConnect((params) => addEdges([params]))
-
-onPaneReady((instance) => instance.fitView())
-
 function changeType() {
   elements.value.forEach((el) => {
     if (isEdge(el) || el.type === 'input') {
@@ -40,7 +34,7 @@ function changeType() {
 </script>
 
 <template>
-  <VueFlow v-model="elements">
+  <VueFlow v-model="elements" fit-view-on-init>
     <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
   </VueFlow>
 </template>

examples/vite/src/Pinia/PiniaExample.vue

@@ -6,7 +6,7 @@ const store = useStore()
 
 const { onConnect, addEdges } = useVueFlow()
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
 </script>
 
 <template>

examples/vite/src/Provider/ProviderExample.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import type { Elements, VueFlowStore } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
-import '@vue-flow/controls/dist/style.css'
-
 import Sidebar from './Sidebar.vue'
 
-function onLoad(flowInstance: VueFlowStore) {
-  return console.log('flow loaded:', flowInstance)
-}
-
 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 } },
@@ -21,14 +15,16 @@ const initialElements: Elements = [
 ]
 
 useVueFlow()
+
 const elements = ref<Elements>(initialElements)
 </script>
 
 <template>
   <div class="providerflow">
     <Sidebar />
+
     <div class="vue-flow-wrapper">
-      <VueFlow v-model="elements" :connection-mode="ConnectionMode.Loose" @pane-ready="onLoad">
+      <VueFlow v-model="elements">
         <Controls />
       </VueFlow>
     </div>

examples/vite/src/RGBFlow/RGBFlow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Elements, VueFlowStore } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
@@ -20,10 +20,6 @@ const elements = ref<Elements>([
   { id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
 ])
 
-function onLoad(flowInstance: VueFlowStore) {
-  flowInstance.fitView({ padding: 1 })
-}
-
 const color = ref<Colors>({
   red: 100,
   green: 150,
@@ -37,10 +33,11 @@ function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
 
 <template>
   <div class="demo-flow">
-    <VueFlow v-model="elements" @pane-ready="onLoad">
+    <VueFlow v-model="elements">
       <template #node-rgb="props">
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>
+
       <template #node-rgb-output="props">
         <RGBOutputNode v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>

examples/vite/src/SaveRestore/Controls.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '@vue-flow/core'
+import type { FlowExportObject } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
-const state = useStorage<FlowExportObject>(flowKey, {
+
+const state = useStorage<FlowExportObject | null>(flowKey, {
   nodes: [],
   edges: [],
   position: [NaN, NaN],
@@ -21,26 +22,25 @@ function onSave() {
 }
 
 function onRestore() {
-  const flow: FlowExportObject | null = state.value
+  const flow = state.value
 
   if (flow) {
     const [x = 0, y = 0] = flow.position
 
-    setNodes(state.value.nodes)
+    setNodes(flow.nodes)
 
-    setEdges(state.value.edges)
+    setEdges(flow.edges)
 
     setTransform({ x, y, zoom: flow.zoom || 0 })
   }
 }
 
 function onAdd() {
-  const newNode = {
+  addNodes({
     id: `random_node-${getNodeId()}`,
     label: 'Added node',
     position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
-  } as Node
+  })
-  addNodes([newNode])
 }
 </script>
 

examples/vite/src/SnapHandle/SnappableConnectionLine.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ConnectionLineProps, GraphNode, HandleElement, Position, StartHandle } from '@vue-flow/core'
+import type { ConnectingHandle, ConnectionLineProps, GraphNode, HandleElement, Position } from '@vue-flow/core'
 import { getBezierPath, useVueFlow } from '@vue-flow/core'
 
 interface CustomConnectionLineProps extends ConnectionLineProps {
@@ -14,7 +14,7 @@ interface CustomConnectionLineProps extends ConnectionLineProps {
 interface ClosestElements {
   node: GraphNode | null
   handle: HandleElement | null
-  startHandle: StartHandle | null
+  startHandle: ConnectingHandle | null
 }
 
 const props = defineProps<CustomConnectionLineProps>()

examples/vite/src/Stress/StressExample.vue

@@ -5,6 +5,7 @@ import { Background } from '@vue-flow/background'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(15, 15)
+
 const elements = ref([...nodes, ...edges])
 
 const { onPaneReady, dimensions, fitView } = useVueFlow()

examples/vite/src/UpdateNode/UpdateNodeExample.vue

@@ -9,6 +9,7 @@ const initialElements: Elements = [
 ]
 
 const elements = ref<Elements>(initialElements)
+
 const opts = reactive({
   bg: '#eeeeee',
   name: 'Node 1',

examples/vite/src/Validation/ValidationExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, OnConnectStartParams, VueFlowStore } from '@vue-flow/core'
+import type { Connection, OnConnectStartParams } from '@vue-flow/core'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
@@ -17,19 +17,18 @@ const { addEdges } = useVueFlow({
     { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
   ],
 })
-function onLoad(flowInstance: VueFlowStore) {
+
-  return flowInstance.fitView()
-}
 function onConnectStart({ nodeId, handleType }: OnConnectStartParams) {
   return console.log('on connect start', { nodeId, handleType })
 }
+
 function onConnectEnd(event: MouseEvent) {
   return console.log('on connect end', event)
 }
 
 function onConnect(params: Connection) {
   console.log('on connect', params)
-  addEdges([params])
+  addEdges(params)
 }
 </script>
 
@@ -38,7 +37,6 @@ function onConnect(params: Connection) {
     :select-nodes-on-drag="false"
     class="validationflow"
     @connect="onConnect"
-    @pane-ready="onLoad"
     @connect-start="onConnectStart"
     @connect-end="onConnectEnd"
   >