update: Add injection keys

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -4,15 +4,8 @@ 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,
-  ConnectionMode,
-  CustomConnectionLine,
-  Dimensions,
-  EdgeType,
-  RevueFlowStore,
-  Transform,
-} from '~/types'
+import { ConnectionLineType, ConnectionMode, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types'
+import { Store } from '~/context/symbols'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>
@@ -36,7 +29,7 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
   connectionLineType: ConnectionLineType.Bezier,
 })
 
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(

src/container/Flow/Flow.vue

@@ -11,7 +11,6 @@ import {
   ConnectionMode,
   Elements,
   PanOnScrollMode,
-  RevueFlowStore,
   NodeType,
   EdgeType,
   CustomConnectionLine,
@@ -19,13 +18,14 @@ import {
   TranslateExtent,
   NodeExtent,
 } from '~/types'
-import { RevueFlowHooks, useRevueFlow } from '~/hooks/RevueFlowHooks'
 import configureStore from '~/store/configure-store'
 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 '~/hooks/RevueFlowHooks'
+import { Hooks, Store } from '~/context/symbols'
 
 export interface FlowProps {
   elements: Elements
@@ -101,7 +101,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   paneMoveable: true,
   edgeUpdaterRadius: 10,
 })
-const emit = defineEmits(Object.keys(useRevueFlow()))
+const emit = defineEmits(Object.keys(useHooks()))
 
 const defaultNodeTypes: Record<string, NodeType> = {
   input: InputNode as NodeType,
@@ -116,13 +116,13 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
   smoothstep: SmoothStepEdge as EdgeType,
 }
 
-let store = inject<RevueFlowStore>('store')!
+let store = inject(Store)!
 if (!store) {
   store = configureStore({
     ...initialState,
     ...props,
   })()
-  provide<RevueFlowStore>('store', store)
+  provide(Store, store)
 }
 
 const init = () => {
@@ -138,8 +138,8 @@ onBeforeUnmount(() => store?.$dispose())
 onUpdated(() => init())
 init()
 
-const hooks = useRevueFlow().bind(emit)
-provide<RevueFlowHooks>('hooks', hooks)
+const hooks = useHooks().bind(emit)
+provide(Hooks, hooks)
 
 const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import Node from '~/components/Nodes/Node.vue'
-import { NodeType, Node as TNode, Transform, Dimensions, RevueFlowStore } from '~/types'
+import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
 import { getNodesInside } from '~/utils/graph'
+import { Store } from '~/context/symbols'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>
@@ -14,7 +15,7 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
   dimensions: () => ({ width: 0, height: 0 }),
 })
 
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 
 const getNodes = computed(() =>
   store.onlyRenderVisibleElements

src/container/SelectionPane/SelectionPane.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
 import useKeyPress from '~/hooks/useKeyPress'
-import { KeyCode, RevueFlowStore } from '~/types'
+import { KeyCode } from '~/types'
 import useGlobalKeyHandler from '~/hooks/useGlobalKeyHandler'
 import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
 import UserSelection from '~/components/UserSelection/UserSelection.vue'
+import { Hooks, Store } from '~/context/symbols'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
   deleteKeyCode: 'Backspace',
   multiSelectionKeyCode: 'Meta',
 })
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 const keyPressed = useKeyPress(props.selectionKeyCode)
 
 const onClick = (event: MouseEvent) => {

src/container/ZoomPane/ZoomPane.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { KeyCode, PanOnScrollMode, RevueFlowStore } from '~/types'
+import { KeyCode, PanOnScrollMode } from '~/types'
 import useZoom from '~/composables/useZoom'
 import useResizeHandler from '~/hooks/useResizeHandler'
 import useZoomPanHelper from '~/hooks/useZoomPanHelper'
+import { Store } from '~/context/symbols'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -31,7 +32,7 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
 })
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
 const { transform, d3Selection, d3Zoom } = useZoom(zoomPaneEl, props, (initD3ZoomPayload) => store.initD3Zoom(initD3ZoomPayload))