From a493168daf88e7488e668a9b5fedfdeaee37d4ab Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Nov 2021 18:04:50 +0100
Subject: [PATCH] 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>
---
 .../Controls/Controls.vue                     | 13 +++++++----
 src/composables/index.ts                      |  1 +
 src/composables/useVueFlow.ts                 | 22 +++++++++++++++++++
 src/index.ts                                  |  3 ++-
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/composables/useVueFlow.ts

diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index de9e5531..b9264c6d 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/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">
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 31ac1eb4..c173fcbd 100644
--- a/src/composables/index.ts
+++ b/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'
diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
new file mode 100644
index 00000000..2eb65b60
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 8824ac7d..f838935b 100644
--- a/src/index.ts
+++ b/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'