From 88cfd402edfdb7de4333a680c22e9487138a119e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:35:17 +0200
Subject: [PATCH] perf(core): cleanup computed vars

---
 .../src/components/A11y/A11yDescriptions.vue  | 25 +++++-------
 .../core/src/components/Handle/Handle.vue     | 40 +++++++++----------
 packages/core/src/container/Pane/Pane.vue     |  5 ++-
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/components/A11y/A11yDescriptions.vue b/packages/core/src/components/A11y/A11yDescriptions.vue
index 7500f334..9688daad 100644
--- a/packages/core/src/components/A11y/A11yDescriptions.vue
+++ b/packages/core/src/components/A11y/A11yDescriptions.vue
@@ -1,21 +1,8 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue'
 import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 import { useVueFlow } from '../../composables'
 
 const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()
-
-const ariaLiveStyle: CSSProperties = {
-  position: 'absolute',
-  width: 1,
-  height: 1,
-  margin: -1,
-  border: 0,
-  padding: 0,
-  overflow: 'hidden',
-  clip: 'rect(0px, 0px, 0px, 0px)',
-  clipPath: 'inset(100%)',
-}
 </script>
 
 <script lang="ts">
@@ -41,7 +28,17 @@ export default {
     :id="`${ARIA_LIVE_MESSAGE}-${id}`"
     aria-live="assertive"
     aria-atomic="true"
-    :style="ariaLiveStyle"
+    style="
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0px, 0px, 0px, 0px);
+      clip-path: inset(100%);
+    "
   >
     {{ ariaLiveMessage }}
   </div>
diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index 64ef1960..c81dbca2 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -33,11 +33,28 @@ const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
 
 const handle = ref<HTMLDivElement>()
 
-const handleId = computed(() => id ?? `${nodeId}__handle-${position}`)
+const handleId = toRef(() => id ?? `${nodeId}__handle-${position}`)
 
-const isConnectableStart = computed(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
+const isConnectableStart = toRef(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
 
-const isConnectableEnd = computed(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true))
+const isConnectableEnd = toRef(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true))
+
+const isConnecting = toRef(
+  () =>
+    (connectionStartHandle.value?.nodeId === nodeId &&
+      connectionStartHandle.value?.handleId === handleId.value &&
+      connectionStartHandle.value?.type === type.value) ||
+    (connectionEndHandle.value?.nodeId === nodeId &&
+      connectionEndHandle.value?.handleId === handleId.value &&
+      connectionEndHandle.value?.type === type.value),
+)
+
+const isClickConnecting = toRef(
+  () =>
+    connectionClickStartHandle.value?.nodeId === nodeId &&
+    connectionClickStartHandle.value?.handleId === handleId.value &&
+    connectionClickStartHandle.value?.type === type.value,
+)
 
 const { handlePointerDown, handleClick } = useHandle({
   nodeId,
@@ -80,23 +97,6 @@ const isConnectable = computed(() => {
   return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
-const isConnecting = toRef(
-  () =>
-    (connectionStartHandle.value?.nodeId === nodeId &&
-      connectionStartHandle.value?.handleId === handleId.value &&
-      connectionStartHandle.value?.type === type.value) ||
-    (connectionEndHandle.value?.nodeId === nodeId &&
-      connectionEndHandle.value?.handleId === handleId.value &&
-      connectionEndHandle.value?.type === type.value),
-)
-
-const isClickConnecting = toRef(
-  () =>
-    connectionClickStartHandle.value?.nodeId === nodeId &&
-    connectionClickStartHandle.value?.handleId === handleId.value &&
-    connectionClickStartHandle.value?.type === type.value,
-)
-
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
 until(() => node.initialized)
   .toBe(true, { flush: 'post' })
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 3ad76d78..26d2406a 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
+import { toRef } from '@vueuse/core'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { GraphNode } from '../../types'
@@ -42,7 +43,7 @@ const prevSelectedEdgesCount = ref(0)
 
 const containerBounds = ref<DOMRect>()
 
-const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
+const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
 useKeyPress(deleteKeyCode, (keyPressed) => {
   if (!keyPressed) {