fix: correct event listeners in examples

examples/DragNDrop/DnD.vue

@@ -49,7 +49,7 @@ const onDrop = (event: DragEvent) => {
 <template>
   <div class="dndflow">
     <div class="revueflow-wrapper" @drop="onDrop">
-      <Flow :elements="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+      <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
       </Flow>
     </div>

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

examples/Edges/EdgesExample.vue

@@ -84,13 +84,13 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 <template>
   <Flow
     :elements="elements"
-    :on-element-click="onElementClick"
-    :on-elements-remove="onElementsRemove"
-    :on-connect="onConnect"
-    :on-node-drag-stop="onNodeDragStop"
-    :on-load="onLoad"
     :snap-to-grid="true"
     :edge-types="edgeTypes"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @load="onLoad"
   >
     <MiniMap />
     <Controls />

examples/Empty/EmptyExample.vue

@@ -37,12 +37,12 @@ const addRandomNode = () => {
 <template>
   <Flow
     :elements="elements"
-    :on-load="onLoad"
-    :on-element-click="onElementClick"
-    :on-elements-remove="onElementsRemove"
-    :on-connect="(p) => onConnect(p)"
-    :on-node-drag-stop="onNodeDragStop"
     :only-render-visible-elements="false"
+    @load="onLoad"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="(p) => onConnect(p)"
+    @node-drag-stop="onNodeDragStop"
   >
     <MiniMap />
     <Controls />

examples/Hidden/HiddenExample.vue

@@ -23,7 +23,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <Flow :elements="elements" :on-connect="onConnect">
+  <Flow :elements="elements" @connect="onConnect">
     <MiniMap />
     <Controls />
 

examples/Interaction/InteractionExample.vue

@@ -56,15 +56,15 @@ const captureElementClick = ref(false)
     :pan-on-scroll="panOnScroll"
     :pan-on-scroll-mode="panOnScrollMode"
     :zoom-on-double-click="zoomOnDoubleClick"
-    :on-connect="onConnect"
-    :on-element-click="captureElementClick ? onElementClick : undefined"
-    :on-node-drag-start="onNodeDragStart"
-    :on-node-drag-stop="onNodeDragStop"
     :pane-moveable="paneMoveable"
-    :on-pane-click="captureZoomClick ? onPaneClick : undefined"
+    @connect="onConnect"
-    :on-pane-scroll="captureZoomScroll ? onPaneScroll : undefined"
+    @element-click="captureElementClick ? onElementClick : undefined"
-    :on-pane-context-menu="captureZoomClick ? onPaneContextMenu : undefined"
+    @node-drag-start="onNodeDragStart"
-    :on-move-end="onMoveEnd"
+    @node-drag-stop="onNodeDragStop"
+    @pane-click="captureZoomClick ? onPaneClick : undefined"
+    @pane-scroll="captureZoomScroll ? onPaneScroll : undefined"
+    @pane-context-menu="captureZoomClick ? onPaneContextMenu : undefined"
+    @move-end="onMoveEnd"
   >
     <MiniMap />
     <Controls />

src/container/Flow/Flow.vue

@@ -126,6 +126,7 @@ if (!store) {
 }
 
 const init = () => {
+  store.$state = { ...store.$state, ...props }
   store.setElements(props.elements)
   store.setMinZoom(props.minZoom)
   store.setMaxZoom(props.maxZoom)