fix: zoom pan helper

examples/Basic/Basic.vue

@@ -60,13 +60,13 @@ const toggleClassnames = () => {
   <Flow
     class="revue-flow-basic-example"
     :elements="elements"
-    :on-elements-remove="onElementsRemove"
-    :on-connect="onConnect"
-    :on-node-drag-stop="onNodeDragStop"
-    :on-node-click="onElementClick"
     :default-zoom="1.5"
     :min-zoom="0.2"
     :max-zoom="4"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @node-click="onElementClick"
     @elementClick="onElementClick"
     @load="onLoad"
   >

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -15,7 +15,7 @@ const onElementsRemove = (elementsToRemove: Elements) =>
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 </script>
 <template>
-  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elementsRemove="onElementsRemove" @connect="onConnect">
+  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elements-remove="onElementsRemove" @connect="onConnect">
     <Background :variant="BackgroundVariant.Lines" />
   </Flow>
 </template>

examples/CustomNode/CustomNode.vue

@@ -114,17 +114,17 @@ const onConnect = (params: Connection | Edge) =>
 <template>
   <Flow
     :elements="elements"
-    :on-element-click="onElementClick"
-    :on-elements-remove="onElementsRemove"
-    :on-connect="onConnect"
-    :on-node-drag-stop="onNodeDragStop"
     :style="`background: ${bgColor}`"
-    :on-load="onLoad"
     :node-types="nodeTypes"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
     :snap-grid="snapGrid"
     :default-zoom="1.5"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @load="onLoad"
   >
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />

examples/EdgeWithButton/ButtonEdge.vue

@@ -1,15 +1,5 @@
 <script lang="ts" setup>
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
-import {
-  getEdgeCenter,
-  getBezierPath,
-  getMarkerEnd,
-  ArrowHeadType,
-  EdgeProps,
-  ElementId,
-  Position,
-  RevueFlowStore,
-} from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, EdgeProps, ElementId, Position, Hooks, Store } from '~/index'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: ElementId
@@ -25,8 +15,8 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
 }
 
 const props = defineProps<CustomEdgeProps>()
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 const onEdgeClick = (evt: Event, id: string) => {
   const edge = store.edges.find((edge) => edge.id === id)
   if (edge) {

examples/Superflow/Superflow.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import Flowy from '~/container/Flow/Flow.vue'
-import { Elements } from '~/types'
-
-const elements = ref<Elements>([
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-] as Elements)
-</script>
-
-<template>
-  <Flowy :elements="elements">
-    <div>Foobar!</div>
-  </Flowy>
-</template>

examples/router.ts

@@ -45,10 +45,6 @@ export const routes: RouterOptions['routes'] = [
     path: '/interaction',
     component: () => import('./Interaction/InteractionExample.vue'),
   },
-  {
-    path: '/super-flow',
-    component: () => import('./Superflow/Superflow.vue'),
-  },
 ]
 
 export const router = createRouter({