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>

Author: bcakmakoglu

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