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

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

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>