From ffd3b672f14947449b42c8852aebe897a616ee58 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 3 Apr 2022 17:47:26 +0200
Subject: [PATCH] chore(examples): uniform basic example

---
 examples/src/Basic/Basic.vue | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/examples/src/Basic/Basic.vue b/examples/src/Basic/Basic.vue
index 0a72de73..9d93dd48 100644
--- a/examples/src/Basic/Basic.vue
+++ b/examples/src/Basic/Basic.vue
@@ -1,21 +1,19 @@
 <script lang="ts" setup>
 import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
-import ResizableNode from './ResizableNode.vue'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  {
-    id: '2',
-    type: 'resize',
-    label: 'Node 2',
-    position: { x: 100, y: 100 },
-  },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
+const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow({
+  defaultZoom: 1.5,
+  minZoom: 0.2,
+  maxZoom: 4,
+})
 onPaneReady(({ fitView }) => {
   fitView()
 })
@@ -37,19 +35,8 @@ const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 <template>
-  <VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <template #node-resize="props">
-      <ResizableNode v-bind="props" />
-    </template>
-    <Background :height="33" bg-color="pink">
-      <text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
-    </Background>
-    <Background :height="33" bg-color="purple">
-      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 2 </text>
-    </Background>
-    <Background :height="33" bg-color="crimson">
-      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 3 </text>
-    </Background>
+  <VueFlow v-model="elements" class="vue-flow-basic-example">
+    <Background />
     <MiniMap />
     <Controls />
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">