chore: next release

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/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vue-flow/core
 
+## 1.48.1
+
+### Patch Changes
+
+- [#1996](https://github.com/bcakmakoglu/vue-flow/pull/1996) [`1c9732a`](https://github.com/bcakmakoglu/vue-flow/commit/1c9732ae99313cce9d8125571b51440931f9a9b0) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Use the connecting handle result when updating a connection, so we get an accurate connection position for `toPosition`.
+
+- [#2001](https://github.com/bcakmakoglu/vue-flow/pull/2001) [`08d57fa`](https://github.com/bcakmakoglu/vue-flow/commit/08d57fa1609e1fc7b966fb08a99fbf4756bc11b5) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Block pane ctx-menu from triggering if panOnDrag includes btn 2 (right-click) and let viewport emit pane ctx menu.
+
 ## 1.48.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.48.0",
+  "version": "1.48.1",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",

packages/core/src/composables/useHandle.ts

@@ -244,6 +244,7 @@ export function useHandle({
         }
 
         const connectingHandle = closestHandle ?? result.toHandle
+
         updateConnection(
           connectingHandle && isValid
             ? rendererPointToPoint(
@@ -254,7 +255,7 @@ export function useHandle({
                 viewport.value,
               )
             : connectionPosition,
-          result.toHandle,
+          connectingHandle,
           getConnectionStatus(!!connectingHandle, isValid),
         )
 

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