feat: add useStore and useHooks composables that provide default store/hooks

examples/EdgeWithButton/ButtonEdge.vue

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

examples/Empty/EmptyExample.vue

@@ -12,8 +12,9 @@ import Flow, {
   FlowElement,
   Node,
   OnLoadParams,
+  addEdge,
+  removeElements,
 } from '~/index'
-import { addEdge, removeElements } from '~/utils/graph'
 
 const elements = ref<Elements>([])
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))

src/additional-components/Background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
 import { BackgroundVariant } from '~/types'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
 export interface BackgroundProps extends HTMLAttributes {
   variant?: BackgroundVariant
@@ -21,7 +21,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const store = inject(Store)!
+const store = useStore()
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
 const bgClasses = ['revue-flow__background']

src/additional-components/Controls/Controls.vue

@@ -7,8 +7,7 @@ import Fitview from '@/assets/icons/fitview.svg'
 import Lock from '@/assets/icons/lock.svg'
 import Unlock from '@/assets/icons/unlock.svg'
 import { FitViewParams } from '~/types'
-import useZoomPanHelper from '~/composables/useZoomPanHelper'
-import { Store } from '~/context'
+import { useZoomPanHelper, useStore } from '~/composables'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean
@@ -27,7 +26,7 @@ const props = withDefaults(defineProps<ControlProps>(), {
   showInteractive: true,
 })
 
-const store = inject(Store)!
+const store = useStore()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable

src/additional-components/MiniMap/MiniMap.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
 import MiniMapNode from './MiniMapNode.vue'
-import { getBoundsofRects, getRectOfNodes } from '~/utils/graph'
+import { getBoundsofRects, getRectOfNodes } from '~/utils'
 import { Node } from '~/types'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
 
@@ -31,7 +31,7 @@ declare const window: any
 const defaultWidth = 200
 const defaultHeight = 150
 
-const store = inject(Store)!
+const store = useStore()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight

src/components/ConnectionLine/ConnectionLine.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
 import { getBezierPath, getSmoothStepPath } from '~/components/Edges/utils'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
 interface ConnectionLineProps {
   sourceNode: Node
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<ConnectionLineProps>(), {
   connectionLineStyle: () => ({}),
 })
 
-const store = inject(Store)!
+const store = useStore()
 
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType

src/components/Edges/Edge.vue

@@ -2,9 +2,8 @@
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Edge, EdgeType, HandleElement, Position, EdgePositions } from '~/types'
-import { Hooks, Store } from '~/context'
-import { useHandle } from '~/composables'
+import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType
@@ -15,8 +14,8 @@ interface EdgeProps {
 
 const props = withDefaults(defineProps<EdgeProps>(), {})
 
-const store = inject(Store)!
-const hooks = inject(Hooks)!
+const store = useStore()
+const hooks = useHooks()
 
 hooks.connect.on((connection) => {
   hooks.edgeUpdate.trigger({ edge: props.edge, connection })

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ElementId, Position, ValidConnectionFunc } from '~/types'
-import { Hooks, Store } from '~/context'
-import { useHandle } from '~/composables'
+import { Position, ValidConnectionFunc } from '~/types'
+import { NodeIdContextKey } from '~/context'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface HandleProps {
   id?: string
@@ -18,9 +18,9 @@ const props = withDefaults(defineProps<HandleProps>(), {
   connectable: true,
 })
 
-const store = inject(Store)!
-const hooks = inject(Hooks)!
-const nodeId = inject<ElementId>('NodeIdContext')!
+const store = useStore()
+const hooks = useHooks()
+const nodeId = inject(NodeIdContextKey)!
 
 const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>

src/components/Nodes/Node.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
 import { Node, NodeDimensionUpdate, NodeType, SnapGrid } from '~/types'
-import { Hooks, Store } from '~/context'
+import { NodeIdContextKey } from '~/context'
+import { useHooks, useStore } from '~/composables'
 
 interface NodeProps {
   node: Node
@@ -24,9 +25,9 @@ const props = withDefaults(defineProps<NodeProps>(), {
   scale: 1,
 })
 
-const store = inject(Store)!
-const hooks = inject(Hooks)!
-provide('NodeIdContext', props.node.id)
+const store = useStore()
+const hooks = useHooks()
+provide(NodeIdContextKey, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 

src/components/NodesSelection/NodesSelection.vue

@@ -2,7 +2,7 @@
 import { DraggableEventListener } from '@braks/revue-draggable'
 import { Node } from '~/types'
 import { isNode } from '~/utils/graph'
-import { Hooks, Store } from '~/context'
+import { useHooks, useStore } from '~/composables'
 
 interface NodesSelectionProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void
@@ -13,8 +13,8 @@ interface NodesSelectionProps {
 
 const props = defineProps<NodesSelectionProps>()
 
-const store = inject(Store)!
-const hooks = inject(Hooks)!
+const store = useStore()
+const hooks = useHooks()
 
 const selectedNodes = computed(() =>
   store.selectedElements

src/components/UserSelection/UserSelection.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from '~/components/UserSelection/utils'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
-const store = inject(Store)!
+const store = useStore()
 const el = templateRef('user-selection', null)
 
 const onMouseDown = (event: MouseEvent) => {

src/composables/index.ts

@@ -1,6 +1,8 @@
 export { default as useHandle } from './useHandle'
 export { default as useHooks } from './useHooks'
+export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
 export { default as useZoom } from './useZoom'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
+export { default as useStore } from './useStore'

src/composables/useHandle.ts

@@ -1,6 +1,7 @@
 import { getHostForElement } from '~/utils'
-import { Hooks, Store } from '~/context'
 import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
+import useStore from '~/composables/useStore'
+import useHooks from '~/composables/useHooks'
 
 type Result = {
   elementBelow: Element | null
@@ -10,7 +11,7 @@ type Result = {
 }
 
 // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-export function checkElementBelowIsValid(
+export const checkElementBelowIsValid = (
   event: MouseEvent,
   connectionMode: ConnectionMode,
   isTarget: boolean,
@@ -18,7 +19,7 @@ export function checkElementBelowIsValid(
   handleId: ElementId | null,
   isValidConnection: ValidConnectionFunc,
   doc: Document,
-) {
+) => {
   const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
   const elementBelowIsTarget = elementBelow?.classList.contains('target') || false
   const elementBelowIsSource = elementBelow?.classList.contains('source') || false
@@ -62,14 +63,14 @@ export function checkElementBelowIsValid(
   return result
 }
 
-function resetRecentHandle(hoveredHandle: Element): void {
+const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('revue-flow__handle-valid')
   hoveredHandle?.classList.remove('revue-flow__handle-connecting')
 }
 
-export default function () {
-  const store = inject(Store)!
-  const hooks = inject(Hooks)!
+export default () => {
+  const store = useStore()
+  const hooks = useHooks()
 
   return (
     event: MouseEvent,

src/composables/useHooks.ts

@@ -1,8 +1,9 @@
-// global hooks
-import { Connection, Edge, Elements, FlowHooks, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '~/types'
+import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '~/types'
+import { Hooks } from '~/context'
 
-export default (): FlowHooks & { bind: (emit: (event: string, ...args: any[]) => void) => FlowHooks } => {
-  const eventHooks: FlowHooks = {
+// flow event hooks
+const hooks = (): FlowHooks => {
+  return {
     elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
     elementsRemove: createEventHook<Elements>(),
     nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
@@ -43,11 +44,13 @@ export default (): FlowHooks & { bind: (emit: (event: string, ...args: any[]) =>
     edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeUpdateEnd: createEventHook<{ event: MouseEvent; edge: Edge }>(),
   }
-
-  const bind = (emit: (event: string, args: any) => void) => {
+}
+export const createHooks = (): FlowHooks & { bind: (emit: EmitFunc) => FlowHooks } => {
+  const eventHooks = hooks()
+  const bind = (emit: EmitFunc) => {
     for (const [key, value] of Object.entries(eventHooks)) {
-      value.on((data: any) => {
-        emit(key, data)
+      value.on((data: unknown) => {
+        emit(key as keyof FlowHooks, data)
       })
     }
 
@@ -59,3 +62,17 @@ export default (): FlowHooks & { bind: (emit: (event: string, ...args: any[]) =>
     bind,
   }
 }
+
+export default (emit?: EmitFunc) => {
+  let hooks = inject(Hooks)!
+  if (!hooks) {
+    console.warn('hooks context not found; creating default hooks')
+    if (!emit) console.error('no emit function found for hook context.')
+    else {
+      hooks = createHooks().bind(emit)
+      provide(Hooks, hooks)
+    }
+  }
+
+  return hooks
+}

src/composables/useStore.ts

@@ -0,0 +1,18 @@
+import { FlowOptions } from '~/types'
+import useFlowStore from '~/store/useFlowStore'
+import { initialState } from '~/store'
+import { Store } from '~/context'
+
+export default (options?: Partial<FlowOptions>) => {
+  let store = inject(Store)!
+  if (!store) {
+    console.warn('store context not found; creating default store')
+    store = useFlowStore({
+      ...initialState(),
+      ...options,
+    })()
+    provide(Store, store)
+  }
+
+  return store
+}

src/composables/useUpdateNodeInternals.ts

@@ -1,8 +1,8 @@
 import { ElementId, UpdateNodeInternals } from '~/types'
-import { Store } from '~/context'
+import useStore from '~/composables/useStore'
 
-export default function (): UpdateNodeInternals {
-  const store = inject(Store)!
+export default (): UpdateNodeInternals => {
+  const store = useStore()
 
   return (id: ElementId) => {
     const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)

src/composables/useZoom.ts

@@ -5,7 +5,8 @@ import { get } from '@vueuse/core'
 import { FlowTransform, PanOnScrollMode, Transform, UseZoom, UseZoomOptions } from '~/types'
 import { clamp } from '~/utils'
 import useKeyPress from '~/composables/useKeyPress'
-import { Hooks, Store } from '~/context'
+import useHooks from '~/composables/useHooks'
+import useStore from '~/composables/useStore'
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
@@ -16,7 +17,7 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => (
   zoom: eventTransform.k,
 })
 
-export default function (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom {
+export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
   const {
     selectionKeyCode = 'Shift',
     zoomActivationKeyCode = 'Meta',
@@ -30,8 +31,8 @@ export default function (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZ
     panOnScrollMode = PanOnScrollMode.Free,
     paneMoveable = true,
   } = options
-  const hooks = inject(Hooks)!
-  const store = inject(Store)!
+  const hooks = useHooks()
+  const store = useStore()
   const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 })
 
   const clampedX = clamp(defaultPosition[0], store.translateExtent[0][0], store.translateExtent[1][0])

src/composables/useZoomPanHelper.ts

@@ -1,11 +1,13 @@
 import { zoomIdentity } from 'd3-zoom'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils/graph'
 import { FitViewParams, FlowTransform, Rect, UseZoomPanHelper, XYPosition } from '~/types'
-import { Store } from '~/context'
+import useStore from '~/composables/useStore'
 
 const DEFAULT_PADDING = 0.1
 
-export default function (store = inject(Store)!): UseZoomPanHelper {
+export default (): UseZoomPanHelper => {
+  const store = useStore()
+
   return {
     zoomIn: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1.2),
     zoomOut: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1 / 1.2),

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { getSourceTargetNodes } from './utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 import Edge from '~/components/Edges/Edge.vue'
 import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
 import { ConnectionLineType, EdgeType } from '~/types'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>
@@ -22,7 +21,7 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
   edgeUpdaterRadius: 10,
 })
 
-const store = inject(Store)!
+const store = useStore()
 
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(

src/container/Flow/Flow.vue

@@ -17,14 +17,11 @@ import {
   TranslateExtent,
   NodeExtent,
 } from '~/types'
-import useFlowStore from '~/store/useFlowStore'
-import { initialState } from '~/store'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
 import { createNodeTypes } from '~/container/NodeRenderer/utils'
-import { useHooks } from '~/composables'
-import { Hooks, Store } from '~/context'
+import { useHooks, useStore, createHooks } from '~/composables'
 
 export interface FlowProps {
   elements: Elements
@@ -99,7 +96,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   paneMoveable: true,
   edgeUpdaterRadius: 10,
 })
-const emit = defineEmits(Object.keys(useHooks()))
+const emit = defineEmits(Object.keys(createHooks()))
 
 const defaultNodeTypes: Record<string, NodeType> = {
   input: InputNode as NodeType,
@@ -114,14 +111,8 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
   smoothstep: SmoothStepEdge as EdgeType,
 }
 
-let store = inject(Store)!
-if (!store) {
-  store = useFlowStore({
-    ...initialState,
-    ...props,
-  })()
-  provide(Store, store)
-}
+const store = useStore(props)
+const hooks = useHooks(emit)
 
 const init = () => {
   store.$state = { ...store.$state, ...props }
@@ -137,9 +128,6 @@ onBeforeUnmount(() => store?.$dispose())
 onUpdated(() => init())
 init()
 
-const hooks = useHooks().bind(emit)
-provide(Hooks, hooks)
-
 const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
 </script>
@@ -184,6 +172,6 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
         </EdgeRenderer>
       </SelectionPane>
     </ZoomPane>
-    <slot></slot>
+    <slot v-bind="{ flowProps: props, store, hooks }"></slot>
   </div>
 </template>

src/container/NodeRenderer/NodeRenderer.vue

@@ -2,7 +2,7 @@
 import Node from '~/components/Nodes/Node.vue'
 import { NodeType, Node as TNode } from '~/types'
 import { getNodesInside } from '~/utils/graph'
-import { Store } from '~/context'
+import { useStore } from '~/composables'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>
@@ -10,7 +10,7 @@ interface NodeRendererProps {
 
 const props = defineProps<NodeRendererProps>()
 
-const store = inject(Store)!
+const store = useStore()
 
 const getNodes = computed(() =>
   store.onlyRenderVisibleElements

src/container/SelectionPane/SelectionPane.vue

@@ -3,8 +3,8 @@ import useKeyPress from '~/composables/useKeyPress'
 import { ElementId, FlowElement, KeyCode } from '~/types'
 import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
 import UserSelection from '~/components/UserSelection/UserSelection.vue'
-import { Hooks, Store } from '~/context'
 import { getConnectedEdges, isNode } from '~/utils/graph'
+import { useHooks, useStore } from '~/composables'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
   deleteKeyCode: 'Backspace',
   multiSelectionKeyCode: 'Meta',
 })
-const store = inject(Store)!
-const hooks = inject(Hooks)!
+const store = useStore()
+const hooks = useHooks()
 
 const onClick = (event: MouseEvent) => {
   hooks.paneClick.trigger(event)

src/container/ZoomPane/ZoomPane.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { KeyCode, PanOnScrollMode } from '~/types'
-import { useZoom, useZoomPanHelper } from '~/composables'
-import { Hooks, Store } from '~/context'
+import { useHooks, useStore, useZoom, useZoomPanHelper } from '~/composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
 interface ZoomPaneProps {
@@ -31,8 +30,8 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
 })
-const store = inject(Store)!
-const hooks = inject(Hooks)!
+const store = useStore()
+const hooks = useHooks()
 
 const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
 const { transform } = useZoom(zoomPaneEl, props)

src/context/index.ts

@@ -1,6 +1,6 @@
 import { InjectionKey } from 'vue'
-import { FlowHooks, FlowStore } from '~/types'
+import { ElementId, FlowHooks, FlowStore } from '~/types'
 
 export const Store: InjectionKey<FlowStore> = Symbol('store')
 export const Hooks: InjectionKey<FlowHooks> = Symbol('hooks')
-export const NodeIdContextKey: InjectionKey<string> = Symbol('NodeIdContext')
+export const NodeIdContextKey: InjectionKey<ElementId> = Symbol('NodeIdContext')

src/index.ts

@@ -14,9 +14,13 @@ export {
   updateEdge,
   getTransformForBounds,
   getRectOfNodes,
+  isInputDOMNode,
 } from './utils/graph'
 export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
 export { default as useUpdateNodeInternals } from './composables/useUpdateNodeInternals'
+export { default as useStore } from './composables/useStore'
+export { default as useHooks } from './composables/useHooks'
+export { default as useHandle } from './composables/useHandle'
 
 export * from './additional-components'
 export * from './types'

src/store/index.ts

@@ -1,6 +1,6 @@
 import { ConnectionMode, FlowState } from '~/types'
 
-export const initialState: FlowState = {
+export const initialState = (): FlowState => ({
   dimensions: {
     width: 0,
     height: 0,
@@ -54,4 +54,6 @@ export const initialState: FlowState = {
   multiSelectionActive: false,
 
   revueFlowVersion: typeof __REVUE_FLOW_VERSION__ !== 'undefined' ? __REVUE_FLOW_VERSION__ : '-',
-}
+})
+
+export { default as useFlowStore } from './useFlowStore'

src/types/hooks.ts

@@ -1,45 +1,48 @@
-// global hooks
 import { EventHook } from '@vueuse/core'
 import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types'
 
+export type FlowHook<T = any> = EventHook<T>
+
 export interface FlowHooks {
-  elementClick: EventHook<{ event: MouseEvent; element: Node | Edge }>
-  elementsRemove: EventHook<Elements>
-  nodeDoubleClick: EventHook<{ event: MouseEvent; node: Node }>
-  nodeClick: EventHook<{ event: MouseEvent; node: Node }>
-  nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>
-  nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>
-  nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>
-  nodeContextMenu: EventHook<{ event: MouseEvent; node: Node }>
-  nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>
-  nodeDrag: EventHook<{ event: MouseEvent; node: Node }>
-  nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>
-  connect: EventHook<Connection>
-  connectStart: EventHook<{
+  elementClick: FlowHook<{ event: MouseEvent; element: Node | Edge }>
+  elementsRemove: FlowHook<Elements>
+  nodeDoubleClick: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeClick: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeMouseEnter: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeMouseMove: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeMouseLeave: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeContextMenu: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeDragStart: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeDrag: FlowHook<{ event: MouseEvent; node: Node }>
+  nodeDragStop: FlowHook<{ event: MouseEvent; node: Node }>
+  connect: FlowHook<Connection>
+  connectStart: FlowHook<{
     event: MouseEvent
     params: OnConnectStartParams
   }>
-  connectStop: EventHook<MouseEvent>
-  connectEnd: EventHook<MouseEvent>
-  load: EventHook<OnLoadParams>
-  move: EventHook<FlowTransform | undefined>
-  moveStart: EventHook<FlowTransform | undefined>
-  moveEnd: EventHook<FlowTransform | undefined>
-  selectionChange: EventHook<Elements | null>
-  selectionDragStart: EventHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionDrag: EventHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionDragStop: EventHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionContextMenu: EventHook<{ event: MouseEvent; nodes: Node[] }>
-  paneScroll: EventHook<WheelEvent | undefined>
-  paneClick: EventHook<MouseEvent>
-  paneContextMenu: EventHook<MouseEvent>
-  edgeUpdate: EventHook<{ edge: Edge; connection: Connection }>
-  edgeContextMenu: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseEnter: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseMove: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseLeave: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeDoubleClick: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeClick: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>
-  edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>
+  connectStop: FlowHook<MouseEvent>
+  connectEnd: FlowHook<MouseEvent>
+  load: FlowHook<OnLoadParams>
+  move: FlowHook<FlowTransform | undefined>
+  moveStart: FlowHook<FlowTransform | undefined>
+  moveEnd: FlowHook<FlowTransform | undefined>
+  selectionChange: FlowHook<Elements | null>
+  selectionDragStart: FlowHook<{ event: MouseEvent; nodes: Node[] }>
+  selectionDrag: FlowHook<{ event: MouseEvent; nodes: Node[] }>
+  selectionDragStop: FlowHook<{ event: MouseEvent; nodes: Node[] }>
+  selectionContextMenu: FlowHook<{ event: MouseEvent; nodes: Node[] }>
+  paneScroll: FlowHook<WheelEvent | undefined>
+  paneClick: FlowHook<MouseEvent>
+  paneContextMenu: FlowHook<MouseEvent>
+  edgeUpdate: FlowHook<{ edge: Edge; connection: Connection }>
+  edgeContextMenu: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeMouseEnter: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeMouseMove: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeMouseLeave: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeDoubleClick: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeClick: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeUpdateStart: FlowHook<{ event: MouseEvent; edge: Edge }>
+  edgeUpdateEnd: FlowHook<{ event: MouseEvent; edge: Edge }>
 }
+
+export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void