From b792d7f536ec224c51aaf822cdb96baf158fb0c2 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 May 2025 13:56:01 +0200
Subject: [PATCH] refactor(core): use shallowRef where possible (#1847)

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/components/Nodes/DefaultNode.ts | 2 +-
 packages/core/src/components/Nodes/InputNode.ts   | 2 +-
 packages/core/src/components/Nodes/NodeWrapper.ts | 2 +-
 packages/core/src/components/Nodes/OutputNode.ts  | 2 +-
 packages/core/src/composables/useDrag.ts          | 4 ++--
 packages/core/src/container/Viewport/Viewport.vue | 6 +++---
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts
index e8af0cbd..a1794a17 100644
--- a/packages/core/src/components/Nodes/DefaultNode.ts
+++ b/packages/core/src/components/Nodes/DefaultNode.ts
@@ -13,7 +13,7 @@ const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
+  const label = data.label ?? _label
 
   return [
     h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
diff --git a/packages/core/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts
index bc892265..1338c6da 100644
--- a/packages/core/src/components/Nodes/InputNode.ts
+++ b/packages/core/src/components/Nodes/InputNode.ts
@@ -11,7 +11,7 @@ const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
+  const label = data.label ?? _label
 
   return [
     typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index 546ec96d..654ba955 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -86,7 +86,7 @@ const NodeWrapper = defineComponent({
 
     const isFocusable = toRef(() => (typeof node.focusable === 'undefined' ? nodesFocusable.value : node.focusable))
 
-    const hasPointerEvents = toRef(
+    const hasPointerEvents = computed(
       () =>
         isSelectable.value ||
         isDraggable.value ||
diff --git a/packages/core/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts
index a0cffdc1..605e99be 100644
--- a/packages/core/src/components/Nodes/OutputNode.ts
+++ b/packages/core/src/components/Nodes/OutputNode.ts
@@ -11,7 +11,7 @@ const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   isValidTargetPos,
   data,
 }) {
-  const label = data.label || _label
+  const label = data.label ?? _label
 
   return [
     h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index 2caf0e54..47bf39d0 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -2,7 +2,7 @@ import type { D3DragEvent, DragBehavior, SubjectPosition } from 'd3-drag'
 import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { MaybeRefOrGetter, Ref } from 'vue'
-import { ref, toValue, watch } from 'vue'
+import { shallowRef, toValue, watch } from 'vue'
 import type { MouseTouchEvent, NodeDragEvent, NodeDragItem, XYPosition } from '../types'
 import {
   calcAutoPan,
@@ -62,7 +62,7 @@ export function useDrag(params: UseDragParams) {
 
   const { onStart, onDrag, onStop, onClick, el, disabled, id, selectable, dragHandle } = params
 
-  const dragging = ref(false)
+  const dragging = shallowRef(false)
 
   let dragItems: NodeDragItem[] = []
 
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 69830713..3d98d0fa 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -2,7 +2,7 @@
 import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { onMounted, ref, toRef, watch } from 'vue'
+import { onMounted, shallowRef, toRef, watch } from 'vue'
 import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress } from '../../composables/useKeyPress'
@@ -44,9 +44,9 @@ const {
 
 useResizeHandler(viewportRef)
 
-const isZoomingOrPanning = ref(false)
+const isZoomingOrPanning = shallowRef(false)
 
-const isPanScrolling = ref(false)
+const isPanScrolling = shallowRef(false)
 
 let panScrollTimeout: ReturnType<typeof setTimeout> | null = null