chore(vite-examples): update basic example

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

Author: bcakmakoglu

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -15,13 +15,19 @@ const elements = ref<Elements>([
  { id: 'e1-3', source: '1', target: '3' },
 ])
 
-const { onConnect, addEdges, setTransform, toObject } = useVueFlow({
+const keyCode = ref('Shift')
+
+const { selectionKeyCode, onConnect, addEdges, setTransform, toObject } = useVueFlow({
  minZoom: 0.2,
  maxZoom: 4,
 })
 
 onConnect((params) => addEdges([params]))
 
+function changeKeyCode() {
+ keyCode.value = keyCode.value === 'Shift' ? 'Meta' : 'Shift'
+}
+
 function updatePos() {
  return elements.value.forEach((el) => {
  if (isNode(el)) {
@@ -45,15 +51,16 @@ function toggleclass() {
 </script>
 
 <template>
- <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+ <VueFlow v-model="elements" :selection-key-code="keyCode" fit-view-on-init class="vue-flow-basic-example">
  <Background />
  <MiniMap />
  <Controls />
- <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
- <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
- <button style="margin-right: 5px" @click="updatePos">change pos</button>
- <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
+ <Panel :position="PanelPosition.TopRight" style="display: flex; gap: 5px">
+ {{ selectionKeyCode }}
+ <button @click="changeKeyCode">change keyCode</button>
+ <button @click="updatePos">change pos</button>
+ <button @click="toggleclass">toggle class</button>
  <button @click="logToObject">toObject</button>
- </div>
+ </Panel>
  </VueFlow>
 </template>