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>

.changeset/young-moles-refuse.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Block pane ctx-menu from triggering if panOnDrag includes btn 2 (right-click) and let viewport emit pane ctx menu.

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node, ValidConnectionFunc } from '@vue-flow/core'
-import { ConnectionMode, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -45,22 +45,10 @@ function resetViewport() {
 function toggleclass() {
   return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
-
-const isValidConnection: ValidConnectionFunc = (...args) => {
-  console.log(args)
-  return true
-}
 </script>
 
 <template>
-  <VueFlow
-    :nodes="nodes"
-    :edges="edges"
-    :connection-mode="ConnectionMode.Strict"
-    :is-valid-connection="isValidConnection"
-    fit-view-on-init
-    class="vue-flow-basic-example"
-  >
+  <VueFlow :nodes="nodes" :edges="edges" class="vue-flow-basic-example" fit-view-on-init>
     <Background />
     <MiniMap />
     <Controls />

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