revert(core): block pane ctx menu if panOnDrag includes [2] (right-click) (#2001)

* revert(core): block pane ctx menu if panOnDrag includes [2] (right-click)

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

* chore(changeset): add

---------

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

packages/core/src/container/Pane/Pane.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRef, watch } from 'vue'
+import { shallowRef, toRef, watch } from 'vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { EdgeChange, NodeChange } from '../../types'
@@ -33,15 +33,16 @@ const {
   connectionLookup,
   defaultEdgeOptions,
   connectionStartHandle,
+  panOnDrag,
 } = useVueFlow()
 
-const container = ref<HTMLDivElement | null>(null)
+const container = shallowRef<HTMLDivElement | null>(null)
 
-const selectedNodeIds = ref<Set<string>>(new Set())
+const selectedNodeIds = shallowRef<Set<string>>(new Set())
 
-const selectedEdgeIds = ref<Set<string>>(new Set())
+const selectedEdgeIds = shallowRef<Set<string>>(new Set())
 
-const containerBounds = ref<DOMRect>()
+const containerBounds = shallowRef<DOMRect | null>(null)
 
 const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
@@ -95,8 +96,10 @@ function onClick(event: MouseEvent) {
 }
 
 function onContextMenu(event: MouseEvent) {
-  event.preventDefault()
-  event.stopPropagation()
+  if (Array.isArray(panOnDrag.value) && panOnDrag.value?.includes(2)) {
+    event.preventDefault()
+    return
+  }
 
   emits.paneContextMenu(event)
 }
@@ -106,7 +109,7 @@ function onWheel(event: WheelEvent) {
 }
 
 function onPointerDown(event: PointerEvent) {
-  containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
+  containerBounds.value = vueFlowRef.value?.getBoundingClientRect() ?? null
 
   if (
     !elementsSelectable.value ||