refactor(core): use shallowRef where possible (#1847)

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

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 }),

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]),

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 ||

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 }),

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[] = []
 

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