refactor: replace useStore with useVueFlow

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
 import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 
 interface ConnectionLineProps {
   sourceNode: GraphNode
 }
 const props = defineProps<ConnectionLineProps>()
-const store = useStore()
+const { store } = useVueFlow()
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
     ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)

src/components/Edges/EdgeWrapper.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useHandle, useStore } from '../../composables'
+import { useHandle, useVueFlow } from '../../composables'
 import { ConnectionMode, Position, GraphEdge } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
@@ -13,7 +13,7 @@ interface EdgeWrapper {
 }
 
 const props = withDefaults(defineProps<EdgeWrapper>(), {})
-const store = useStore()
+const { store } = useVueFlow()
 
 const updating = ref<boolean>(false)
 const handler = useHandle()

src/components/Handle/Handle.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useHandle, useStore } from '../../composables'
+import { useHandle, useVueFlow } from '../../composables'
 import { Position, ValidConnectionFunc } from '../../types'
 import { NodeId } from '../../context'
 
@@ -11,7 +11,7 @@ interface HandleProps {
   connectable?: boolean
 }
 
-const store = useStore()
+const { store } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   id: '',
   type: 'source',

src/components/Nodes/NodeWrapper.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 import { GraphNode, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getDimensions, getHandleBounds, getXYZPos } from '../../utils'
@@ -19,7 +19,7 @@ interface NodeWrapperProps {
 const props = defineProps<NodeWrapperProps>()
 const emit = defineEmits(['update:node'])
 const node = useVModel(props, 'node', emit)
-const store = useStore()
+const { store } = useVueFlow()
 provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)

src/components/NodesSelection/NodesSelection.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 import { GraphNode } from '../../types'
 
 interface Props {
   nodes: GraphNode[]
 }
-const store = useStore()
+const { store } = useVueFlow()
 const props = defineProps<Props>()
 const selectedNodesBBox = computed(() => getRectOfNodes(props.nodes))
 const innerStyle = computed(() => ({

src/components/UserSelection/UserSelection.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 import { SelectionRect as Rect } from '../../types'
 import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
-const store = useStore()
+const { store } = useVueFlow()
 const el = templateRef('user-selection', null)
 
 const prevNodes = ref(0)