From f858d139091a17cc2102abe3e40d0df930e0f1e4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Mar 2024 20:44:45 +0100
Subject: [PATCH] refactor(core): remove reactivity transform

---
 .../src/components/NodesSelection/NodesSelection.vue   |  8 ++++----
 .../src/container/EdgeRenderer/MarkerDefinitions.vue   | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue
index 95afeb75..4cab7063 100644
--- a/packages/core/src/components/NodesSelection/NodesSelection.vue
+++ b/packages/core/src/components/NodesSelection/NodesSelection.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useDrag, useUpdateNodePositions, useVueFlow } from '../../composables'
 import { arrowKeyDiffs, getRectOfNodes } from '../../utils'
 
-const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, userSelectionActive } = $(useVueFlow())
+const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, userSelectionActive } = useVueFlow()
 
 const updatePositions = useUpdateNodePositions()
 
@@ -23,12 +23,12 @@ const dragging = useDrag({
 })
 
 onMounted(() => {
-  if (!disableKeyboardA11y) {
+  if (!disableKeyboardA11y.value) {
     el.value?.focus({ preventScroll: true })
   }
 })
 
-const selectedNodesBBox = computed(() => getRectOfNodes(getSelectedNodes))
+const selectedNodesBBox = computed(() => getRectOfNodes(getSelectedNodes.value))
 
 const innerStyle = computed(() => ({
   width: `${selectedNodesBBox.value.width}px`,
@@ -38,7 +38,7 @@ const innerStyle = computed(() => ({
 }))
 
 function onContextMenu(event: MouseEvent) {
-  emits.selectionContextMenu({ event, nodes: getSelectedNodes })
+  emits.selectionContextMenu({ event, nodes: getSelectedNodes.value })
 }
 
 function onKeyDown(event: KeyboardEvent) {
diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
index 02f098fe..ff4b55fe 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -5,7 +5,7 @@ import { useVueFlow } from '../../composables'
 import { getMarkerId } from '../../utils'
 import MarkerSymbols from './MarkerSymbols.vue'
 
-const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = $(useVueFlow())
+const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = useVueFlow()
 
 const markers = computed(() => {
   const ids: string[] = []
@@ -16,9 +16,9 @@ const markers = computed(() => {
       const markerId = getMarkerId(marker, vueFlowId)
       if (!ids.includes(markerId)) {
         if (typeof marker === 'object') {
-          markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
+          markers.push({ ...marker, id: markerId, color: marker.color || defaultColor.value })
         } else {
-          markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
+          markers.push({ id: markerId, color: defaultColor.value, type: marker as MarkerType })
         }
 
         ids.push(markerId)
@@ -26,11 +26,11 @@ const markers = computed(() => {
     }
   }
 
-  for (const marker of [connectionLineOptions.markerEnd, connectionLineOptions.markerStart]) {
+  for (const marker of [connectionLineOptions.value.markerEnd, connectionLineOptions.value.markerStart]) {
     createMarkers(marker)
   }
 
-  edges.reduce<MarkerProps[]>((markers, edge) => {
+  edges.value.reduce<MarkerProps[]>((markers, edge) => {
     for (const marker of [edge.markerStart, edge.markerEnd]) {
       createMarkers(marker)
     }