feat: Add useVueFlow composable

* Allows for use of the vue flow instance without having to listen to the onLoad event
* fix usekeypress export
* Add types for controls events

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/additional-components/Controls/Controls.vue

@@ -16,19 +16,24 @@ export interface ControlProps extends HTMLAttributes {
   fitViewParams?: FitViewParams
 }
 
+interface ControlEvents {
+  (event: 'zoom-in'): void
+  (event: 'zoom-out'): void
+  (event: 'fit-view'): void
+  (event: 'interaction-change', active: boolean): void
+}
+
 const props = withDefaults(defineProps<ControlProps>(), {
   showZoom: true,
   showFitView: true,
   showInteractive: true,
 })
-// todo define types for events
-const emit = defineEmits(['zoom-in', 'zoom-out', 'fit-view', 'interaction-change'])
+const emit = defineEmits<ControlEvents>()
 
 const store = useStore()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = computed(() => store.nodesDraggable && store.nodesConnectable && store.elementsSelectable)
-const mapClasses = ['vue-flow__controls']
 
 const onZoomInHandler = () => {
   zoomIn()
@@ -51,7 +56,7 @@ const onInteractiveChangeHandler = () => {
 }
 </script>
 <template>
-  <div :class="mapClasses">
+  <div class="vue-flow__controls">
     <template v-if="props.showZoom">
       <slot name="control-zoom-in">
         <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">

src/composables/index.ts

@@ -5,3 +5,4 @@ export { default as useKeyPress } from './useKeyPress'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useStore } from './useStore'
 export { default as useWindow } from './useWindow'
+export { default as useVueFlow } from './useVueFlow'

src/composables/useVueFlow.ts

@@ -0,0 +1,22 @@
+import useHooks from './useHooks'
+import useStore from './useStore'
+import { FlowInstance } from '~/types'
+
+export default () => {
+  const store = useStore()
+  const hooks = useHooks()
+  const isReady = ref(false)
+  const instance = ref<FlowInstance>()
+  hooks.load.on((flow) => {
+    isReady.value = true
+    instance.value = flow
+    if (import.meta.env.DEV) console.log(`vue flow ${store.$id} ready.`)
+  })
+
+  return {
+    isReady,
+    instance,
+    store,
+    hooks,
+  }
+}

src/index.ts

@@ -22,7 +22,8 @@ export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
 export { default as useStore } from './composables/useStore'
 export { default as useHooks } from './composables/useHooks'
 export { default as useHandle } from './composables/useHandle'
-export { default as useKeyPress } from './composables/useHandle'
+export { default as useKeyPress } from './composables/useKeyPress'
+export { default as useVueFlow } from './composables/useVueFlow'
 
 export * from './additional-components'
 export * from './types'