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

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)