From b2b1fe822f19ad537796a4ccac0ca0a6986beb9e Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Oct 2021 21:15:14 +0200
Subject: [PATCH] feat: add useStore and useHooks composables that provide
 default store/hooks

---
 examples/EdgeWithButton/ButtonEdge.vue        | 16 +++-
 examples/Empty/EmptyExample.vue               |  3 +-
 .../Background/Background.vue                 |  4 +-
 .../Controls/Controls.vue                     |  5 +-
 src/additional-components/MiniMap/MiniMap.vue |  6 +-
 .../ConnectionLine/ConnectionLine.vue         |  4 +-
 src/components/Edges/Edge.vue                 |  9 +--
 src/components/Handle/Handle.vue              | 12 +--
 src/components/Nodes/Node.vue                 |  9 ++-
 .../NodesSelection/NodesSelection.vue         |  6 +-
 .../UserSelection/UserSelection.vue           |  4 +-
 src/composables/index.ts                      |  2 +
 src/composables/useHandle.ts                  | 15 ++--
 src/composables/useHooks.ts                   | 33 ++++++--
 src/composables/useStore.ts                   | 18 +++++
 src/composables/useUpdateNodeInternals.ts     |  6 +-
 src/composables/useZoom.ts                    |  9 ++-
 src/composables/useZoomPanHelper.ts           |  6 +-
 src/container/EdgeRenderer/EdgeRenderer.vue   |  5 +-
 src/container/Flow/Flow.vue                   | 22 ++----
 src/container/NodeRenderer/NodeRenderer.vue   |  4 +-
 src/container/SelectionPane/SelectionPane.vue |  6 +-
 src/container/ZoomPane/ZoomPane.vue           |  7 +-
 src/context/index.ts                          |  4 +-
 src/index.ts                                  |  4 +
 src/store/index.ts                            |  6 +-
 src/types/hooks.ts                            | 77 ++++++++++---------
 27 files changed, 174 insertions(+), 128 deletions(-)
 create mode 100644 src/composables/useStore.ts

diff --git a/examples/EdgeWithButton/ButtonEdge.vue b/examples/EdgeWithButton/ButtonEdge.vue
index 04e2b8df..0ac85e56 100644
--- a/examples/EdgeWithButton/ButtonEdge.vue
+++ b/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) {
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index d6b3b10d..6f38d111 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/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))
diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index aa1b7bf3..60e80d42 100644
--- a/src/additional-components/Background/Background.vue
+++ b/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']
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index 199af9ec..f44776c5 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/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
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index d71ac215..78ab76e6 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/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
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index d3cfc4ae..b9083f0e 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/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
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 398d6612..23bdab41 100644
--- a/src/components/Edges/Edge.vue
+++ b/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 })
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index e618dfb9..32f5d5fd 100644
--- a/src/components/Handle/Handle.vue
+++ b/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) =>
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 5e24c7a6..b8c3b91e 100644
--- a/src/components/Nodes/Node.vue
+++ b/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)
 
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index f54bb15d..9a3eb361 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/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
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index baaec19c..54cd68ea 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/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) => {
diff --git a/src/composables/index.ts b/src/composables/index.ts
index fbb01f9b..62157777 100644
--- a/src/composables/index.ts
+++ b/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'
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index ddac81ca..ca9bd77a 100644
--- a/src/composables/useHandle.ts
+++ b/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,
diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts
index b58d238f..b7300293 100644
--- a/src/composables/useHooks.ts
+++ b/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
+}
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
new file mode 100644
index 00000000..710ff5db
--- /dev/null
+++ b/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
+}
diff --git a/src/composables/useUpdateNodeInternals.ts b/src/composables/useUpdateNodeInternals.ts
index fafb4dbc..1eb2d120 100644
--- a/src/composables/useUpdateNodeInternals.ts
+++ b/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}"]`)
diff --git a/src/composables/useZoom.ts b/src/composables/useZoom.ts
index aa0184b6..524b8d95 100644
--- a/src/composables/useZoom.ts
+++ b/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])
diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts
index 81798c5c..c12f05f8 100644
--- a/src/composables/useZoomPanHelper.ts
+++ b/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),
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 2f5781db..4ea9938f 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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(
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index e905e4d2..8b66eaba 100644
--- a/src/container/Flow/Flow.vue
+++ b/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>
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index 1cdec092..16b4cf72 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/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
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index c98099a3..2eff11c8 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/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)
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index c236ec3b..2fd659a7 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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)
diff --git a/src/context/index.ts b/src/context/index.ts
index b29c0d30..405cdeb8 100644
--- a/src/context/index.ts
+++ b/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')
diff --git a/src/index.ts b/src/index.ts
index cb0aca97..f62f8034 100644
--- a/src/index.ts
+++ b/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'
diff --git a/src/store/index.ts b/src/store/index.ts
index 5224a7fe..01414e7f 100644
--- a/src/store/index.ts
+++ b/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'
diff --git a/src/types/hooks.ts b/src/types/hooks.ts
index 935dafe5..812bc258 100644
--- a/src/types/hooks.ts
+++ b/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