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

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