chore(resize-rotate): update demo

packages/resize-rotate-node/example/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
+import type { Elements, FlowEvents } from '@braks/vue-flow'
 import { Background, Controls, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
 import { ref } from 'vue'
 import { ResizeRotateNode } from '../src'
@@ -7,42 +7,12 @@ import initialElements from './elements'
 
 const elements = ref<Elements>(initialElements)
 
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
-
-const extent = ref([
-  [0, 0],
-  [Infinity, Infinity],
-])
-
-const onPaneReady = (store: VueFlowStore) => {
-  store.fitView({ minZoom: 1, maxZoom: 1 })
-
-  const bounds = store.vueFlowRef.value.getBoundingClientRect()
-
-  extent.value = [
-    [0, 0],
-    [bounds.width, bounds.height],
-  ]
-
-  store.setTranslateExtent(extent.value)
-}
+const onConnect = (params: FlowEvents['connect']) => (elements.value = addEdge(params, elements.value))
 </script>
 
 <template>
   <div style="height: 100%">
-    <VueFlow
-      v-model="elements"
-      class="vue-flow-basic-example"
-      :snap-to-grid="true"
-      :snap-grid="[10, 10]"
-      :prevent-scrolling="false"
-      :zoom-on-scroll="false"
-      :pan-on-drag="false"
-      :translate-extent="extent"
-      :node-extent="extent"
-      @connect="onConnect"
-      @pane-ready="onPaneReady"
-    >
+    <VueFlow v-model="elements" class="vue-flow-basic-example" fit-view @connect="onConnect">
       <template #node-resize-rotate="props">
         <ResizeRotateNode v-bind="props" />
       </template>