refactor: replace useStore with useVueFlow

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

src/additional-components/Background/Background.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { BackgroundVariant } from '../../types'
-import { useStore } from '../../composables'
+import { useVueFlow } from '../../composables'
 
 interface BackgroundProps {
   variant?: BackgroundVariant
@@ -20,7 +20,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const store = useStore()
+const { store } = useVueFlow()
 
 const background = computed(() => {
   const scaledGap = props.gap && props.gap * store.transform[2]

src/additional-components/Controls/Controls.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { FitViewParams } from '../../types'
-import { useZoomPanHelper, useStore } from '../../composables'
+import { useZoomPanHelper, useVueFlow } from '../../composables'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from '~/assets/icons/plus.svg'
 import MinusIcon from '~/assets/icons/minus.svg'
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ControlProps>(), {
 })
 const emit = defineEmits<ControlEvents>()
 
-const store = useStore()
+const { store } = useVueFlow()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = computed(() => store.nodesDraggable && store.nodesConnectable && store.elementsSelectable)

src/additional-components/MiniMap/MiniMap.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { GraphNode, ShapeRendering } from '../../types'
-import { useStore, useWindow } from '../../composables'
+import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import MiniMapNode from './MiniMapNode.vue'
 
@@ -29,7 +29,7 @@ const window = useWindow()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const store = useStore()
+const { store } = useVueFlow()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight

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)

src/composables/useHandle.ts

@@ -1,4 +1,4 @@
-import useStore from './useStore'
+import useVueFlow from './useVueFlow'
 import { getHostForElement } from '~/utils'
 import { Connection, ConnectionMode, HandleType, FlowStore, ValidConnectionFunc } from '~/types'
 
@@ -67,7 +67,7 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
-export default (store: FlowStore = useStore()) =>
+export default (store: FlowStore = useVueFlow().store) =>
   (
     event: MouseEvent,
     handleId: string,

src/composables/useZoomPanHelper.ts

@@ -1,5 +1,5 @@
 import { zoomIdentity } from 'd3-zoom'
-import useStore from './useStore'
+import useVueFlow from './useVueFlow'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
 import { GraphNode, FlowStore, UseZoomPanHelper, D3Selection } from '~/types'
 
@@ -7,7 +7,7 @@ const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-export default (store: FlowStore = useStore()): UseZoomPanHelper => ({
+export default (store: FlowStore = useVueFlow().store): UseZoomPanHelper => ({
   zoomIn: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1.2),
   zoomOut: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1 / 1.2),
   zoomTo: (zoomLevel, options) =>

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)