fix: correct event listeners in examples

examples/EdgeTypes/EdgeTypesExample.vue

@@ -15,5 +15,16 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" :on-load="onLoad" :on-elements-remove="onElementsRemove" :on-connect="onConnect" :min-zoom="0.2" />
+  <Flow
+    :elements="elements"
+    :only-render-visible-elements="true"
+    :min-zoom="0.2"
+    @load="onLoad"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+  >
+    <MiniMap />
+    <Controls />
+    <Background />
+  </Flow>
 </template>

examples/EdgeTypes/utils.ts

@@ -22,6 +22,30 @@ const offsets = [
     x: nodeGapWidth,
     y: -nodeGapWidth,
   },
+  {
+    x: nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: 0,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth,
+  },
 ]
 
 let id = 0