update: Add injection keys

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, CustomConnectionLine, HandleElement, Node, Position, RevueFlowStore } from '~/types'
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
+import { ConnectionLineType, CustomConnectionLine, HandleElement, Node, Position } from '~/types'
 import { getBezierPath, getSmoothStepPath } from '~/components/Edges/utils'
+import { Hooks, Store } from '~/context/symbols'
 
 interface ConnectionLineProps {
   sourceNode: Node
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<ConnectionLineProps>(), {
   connectionLineStyle: () => ({}),
 })
 
-const hooks = inject<RevueFlowHooks>('hooks')!
-const store = inject<RevueFlowStore>('store')!
+const hooks = inject(Hooks)!
+const store = inject(Store)!
 
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType

src/components/Edges/Edge.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import EdgeAnchor from './EdgeAnchor.vue'
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Dimensions, Edge, EdgeType, Elements, Position, RevueFlowStore, Transform } from '~/types'
+import { ConnectionMode, Dimensions, Edge, EdgeType, Elements, Position, Transform } from '~/types'
 import { onMouseDown } from '~/components/Handle/utils'
+import { Hooks, Store } from '~/context/symbols'
 
 interface EdgeProps {
   type: EdgeType
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<EdgeProps>(), {
   onlyRenderVisibleElements: false,
 })
 
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 
 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, RevueFlowStore } from '~/types'
+import { ElementId, Position } from '~/types'
 import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils'
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
+import { Hooks, Store } from '~/context/symbols'
 
 interface HandleProps {
   id?: string
@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<HandleProps>(), {
   connectable: true,
 })
 
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 const nodeId = inject<ElementId>('NodeIdContext')!
 
 const onMouseDownHandler = (event: MouseEvent) =>

src/components/Nodes/Node.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
-import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '~/types'
+import { Node, NodeDimensionUpdate, NodeType } from '~/types'
+import { Hooks, Store } from '~/context/symbols'
 
 interface NodeProps {
   node: Node
@@ -21,8 +21,8 @@ const props = withDefaults(defineProps<NodeProps>(), {
   selectNodesOnDrag: true,
 })
 
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 provide('NodeIdContext', props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)

src/components/NodesSelection/NodesSelection.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
-import { Node, RevueFlowStore } from '~/types'
-import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
+import { Node } from '~/types'
 import { isNode } from '~/utils/graph'
+import { Hooks, Store } from '~/context/symbols'
 
 interface NodesSelectionProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void
@@ -13,8 +13,8 @@ interface NodesSelectionProps {
 
 const props = defineProps<NodesSelectionProps>()
 
-const store = inject<RevueFlowStore>('store')!
-const hooks = inject<RevueFlowHooks>('hooks')!
+const store = inject(Store)!
+const hooks = inject(Hooks)!
 
 const selectedNodes = computed(() =>
   store.selectedElements

src/components/UserSelection/UserSelection.vue

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