refactor: replace useStore with useVueFlow

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 import { groupEdgesByZLevel } from '../../utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
-const store = useStore()
+const { store } = useVueFlow()
 const getType = (type?: string) => {
   const t = type ?? 'default'
   let edgeType = store.getEdgeTypes[t]

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 import type { MarkerProps } from '../../types/edge'
+import { getMarkerId } from '../../utils'
 import Marker from './Marker.vue'
-import { getMarkerId } from '~/utils'
 
 interface MarkerDefinitionsProps {
   defaultColor: string
@@ -11,7 +11,7 @@ interface MarkerDefinitionsProps {
 const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
   defaultColor: '',
 })
-const store = useStore()
+const { store } = useVueFlow()
 
 const markers = computed(() => {
   const ids: string[] = []

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { GraphNode } from '../../types'
 import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 
-const store = useStore()
+const { store } = useVueFlow()
 const getType = (type?: string) => {
   const t = type ?? 'default'
   let nodeType = store.getNodeTypes[t]

src/container/SelectionPane/SelectionPane.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { EdgeChange, FlowElement, NodeChange } from '../../types'
-import { useStore, useKeyPress } from '../../composables'
+import { EdgeChange, NodeChange } from '../../types'
+import { useVueFlow, useKeyPress } from '../../composables'
 import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
-const store = useStore()
+const { store } = useVueFlow()
 
 const onClick = (event: MouseEvent) => {
   store.hooks.paneClick.trigger(event)

src/container/TransformationPane/TransformationPane.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 
-const store = useStore()
+const { store } = useVueFlow()
 </script>
 <template>
   <div

src/container/ZoomPane/ZoomPane.vue

@@ -2,7 +2,7 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { FlowInstance, FlowTransform, PanOnScrollMode } from '../../types'
-import { useKeyPress, useStore, useWindow, useZoomPanHelper } from '../../composables'
+import { useKeyPress, useWindow, useZoomPanHelper, useVueFlow } from '../../composables'
 import {
   clamp,
   clampPosition,
@@ -13,9 +13,9 @@ import {
   onLoadToObject,
 } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
-import TransformationPane from '~/container/TransformationPane/TransformationPane.vue'
+import TransformationPane from '../TransformationPane/TransformationPane.vue'
 
-const store = useStore()
+const { store } = useVueFlow()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -188,6 +188,7 @@ onMounted(() => {
 })
 nextTick(async () => {
   store.isReady = true
+
   // if ssr we can't wait for dimensions, they'll never really exist
   const window = useWindow()
   if ('screen' in window)