refactor: perfomance optimisations through less dependency tracking

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

src/components/Edges/Edge.vue

@@ -99,6 +99,7 @@ const targetNodeHandles = computed(() =>
 
 const sourceHandle = computed(() => {
   if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
+  else return null
 })
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -115,6 +116,7 @@ const edgePos = computed(() =>
     targetPosition.value,
   ),
 )
+const elementsSelectable = computed(() => store.elementsSelectable)
 </script>
 <template>
   <g
@@ -125,7 +127,7 @@ const edgePos = computed(() =>
       {
         selected: isSelected,
         animated: props.edge.animated,
-        inactive: !store.elementsSelectable,
+        inactive: !elementsSelectable,
         updating,
       },
       props.edge.class,

src/components/Nodes/Node.vue

@@ -26,6 +26,7 @@ const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
 const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
 const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
+const scale = computed(() => store.transform[2])
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -117,17 +118,7 @@ onMounted(() => {
     }),
   )
 
-  watch(
-    () => props.node.type,
-    () => {
-      store.updateNodeDimensions({
-        id: props.node.id,
-        nodeElement: nodeElement.value,
-        forceUpdate: true,
-      })
-    },
-  )
-  watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
+  watch([props.node.type, props.node.sourcePosition, props.node.targetPosition], () => {
     nextTick(() => {
       store.updateNodeDimensions({
         id: props.node.id,
@@ -143,7 +134,7 @@ onMounted(() => {
   <DraggableCore
     cancel=".nodrag"
     :disabled="!draggable"
-    :scale="store.transform[2]"
+    :scale="scale"
     :grid="props.snapGrid"
     :enable-user-select-hack="false"
     @start="onDragStart"