From a604dd8ab1d72ab50865349e3118c5d19c9dab1c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 16:09:39 +0100
Subject: [PATCH] refactor: replace useStore with useVueFlow

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/additional-components/Background/Background.vue     | 4 ++--
 src/additional-components/Controls/Controls.vue         | 4 ++--
 src/additional-components/MiniMap/MiniMap.vue           | 4 ++--
 src/components/ConnectionLine/ConnectionLine.vue        | 4 ++--
 src/components/Edges/EdgeWrapper.vue                    | 4 ++--
 src/components/Handle/Handle.vue                        | 4 ++--
 src/components/Nodes/NodeWrapper.vue                    | 4 ++--
 src/components/NodesSelection/NodesSelection.vue        | 4 ++--
 src/components/UserSelection/UserSelection.vue          | 4 ++--
 src/composables/useHandle.ts                            | 4 ++--
 src/composables/useZoomPanHelper.ts                     | 4 ++--
 src/container/EdgeRenderer/EdgeRenderer.vue             | 4 ++--
 src/container/EdgeRenderer/MarkerDefinitions.vue        | 6 +++---
 src/container/NodeRenderer/NodeRenderer.vue             | 4 ++--
 src/container/SelectionPane/SelectionPane.vue           | 6 +++---
 src/container/TransformationPane/TransformationPane.vue | 4 ++--
 src/container/ZoomPane/ZoomPane.vue                     | 7 ++++---
 17 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index a374fd72..34f6b2c2 100644
--- a/src/additional-components/Background/Background.vue
+++ b/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]
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index 2d7243d7..afdd5622 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/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)
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index c6e16811..6f23519b 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/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
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index 91aa3908..0ffc7e14 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/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)
diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue
index 3af08cfa..8e5c86a4 100644
--- a/src/components/Edges/EdgeWrapper.vue
+++ b/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()
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index 4ecab000..01ae6f03 100644
--- a/src/components/Handle/Handle.vue
+++ b/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',
diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index 79909ce9..f18f166f 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/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)
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index a2902abf..342c95bd 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/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(() => ({
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index 890ae030..d447edc7 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/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)
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index dbdcc112..ba71466b 100644
--- a/src/composables/useHandle.ts
+++ b/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,
diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts
index 7d81375a..ebbeb22a 100644
--- a/src/composables/useZoomPanHelper.ts
+++ b/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) =>
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 448f83d8..0624628d 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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]
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.vue b/src/container/EdgeRenderer/MarkerDefinitions.vue
index b375e82e..87a5f051 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/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[] = []
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index e0913fa3..f959409a 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/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]
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 97a6f988..6e79261c 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/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)
diff --git a/src/container/TransformationPane/TransformationPane.vue b/src/container/TransformationPane/TransformationPane.vue
index f074c0ca..98ca018d 100644
--- a/src/container/TransformationPane/TransformationPane.vue
+++ b/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
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index d15cb941..ccaac7f3 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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)