examples: cleanup basic example

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

examples/vite/src/Basic/Basic.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { Elements } from '@vue-flow/core'
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node, ValidConnectionFunc } from '@vue-flow/core'
+import { ConnectionMode, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
-const nodes = ref<Elements>([
+const nodes = ref<Node[]>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
 ])
 
-const edges = ref<Elements>([
+const edges = ref<Edge[]>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
@@ -45,32 +45,30 @@ function resetViewport() {
 function toggleclass() {
   return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
+
+const isValidConnection: ValidConnectionFunc = (...args) => {
+  console.log(args)
+  return true
+}
 </script>
 
 <template>
   <VueFlow
     :nodes="nodes"
     :edges="edges"
-    :delete-key-code="['Backspace', 'Delete']"
+    :connection-mode="ConnectionMode.Strict"
+    :is-valid-connection="isValidConnection"
     fit-view-on-init
     class="vue-flow-basic-example"
   >
     <Background />
-    <MiniMap node-color="red" :nodes="nodes" :edges="edges" />
+    <MiniMap />
     <Controls />
     <Panel position="top-right" style="display: flex; gap: 5px">
-      <input />
       <button @click="resetViewport">reset viewport</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>
       <button @click="logToObject">toObject</button>
     </Panel>
   </VueFlow>
 </template>
-
-<style>
-.vue-flow__minimap {
-  transform: scale(75%);
-  transform-origin: bottom right;
-}
-</style>