Merge branch 'master' into release/2.0.0

Author: bcakmakoglu

CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.42.4] - 2025-03-17
+
+[e9168d3](e9168d30841ec0cdb15c4034a3fe89f26657b5dc)...[f49e509](f49e50996f4d9e294b45b0125e45231acc45b3be)
+
+### Bug Fixes
+
+- Use null as fallback id for edge source handle (#1794) ([c9fd24d](c9fd24dc827358db2cdebff95c1b18dcd155f979))
+- Reset drag items on drag end (#1798) ([b85b0ec](b85b0ec66fce9500f74795f5eef6aa40ce1beac1))
+- Remove edge lookup update when updating connection lookup ([05e4df2](05e4df2cb62a12cdcbe866a0007b622941d4af92))
+
+## [1.42.3] - 2025-03-13
+
+[d3b0eb9](d3b0eb91357fa1630f75e359f48cc9a60c83845f)...[e9168d3](e9168d30841ec0cdb15c4034a3fe89f26657b5dc)
+
+### Bug Fixes
+
+- Unwrap ref when checking if connection in progress (#1789) ([410a59d](410a59df5b355df17a4a66726ab6dd1a8ef0246c))
+
+## [1.42.2] - 2025-03-09
+
+[d7f5506](d7f5506882b4438ee04f8f08217547f38379366e)...[d3b0eb9](d3b0eb91357fa1630f75e359f48cc9a60c83845f)
+
+### Bug Fixes
+
+- Bind attrs to minimap node (#1754) ([acdd1ad](acdd1ad8b0ef8b5cfa501f3e0425712b37e89c65))
+- Prevent pane click event when connection is in progress  (#1776) ([49b2780](49b27807401ef1f54a37c8b5d16df4517dcba6df))
+- Avoid removing handle bounds on handle unmount (#1781) ([dd9c92f](dd9c92ff81af28cb2474da4f56825d43daa8a930))
+- Set default value for isVisible to undefined (#1785) ([2ba98ef](2ba98efef018325a0086e82065dd44279ff1e25c))
+
+### Miscellaneous Tasks
+
+- Cleanup ([67b652e](67b652e159b7866eb2edb75d1324614ff7ca5702))
+
 ## [1.42.1] - 2025-01-16
 
 [5a5b2c1](5a5b2c15d76ac6173e616b947e227f6974bfe444)...[d7f5506](d7f5506882b4438ee04f8f08217547f38379366e)

packages/core/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @vue-flow/core
 
+## 1.42.5
+
+### Patch Changes
+
+- [#1807](https://github.com/bcakmakoglu/vue-flow/pull/1807) [`60482cf`](https://github.com/bcakmakoglu/vue-flow/commit/60482cf983d9f674070a48bdfd0624fe6e28a110) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Prevent keypress events from being swallowed when a button element is focused.
+
+## 1.42.4
+
+### Patch Changes
+
+- [#1794](https://github.com/bcakmakoglu/vue-flow/pull/1794) [`e0bb46e`](https://github.com/bcakmakoglu/vue-flow/commit/e0bb46e9ee6c67737e40d154bbd8eae5cdde0cce) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Use null as fallback id for edge source handle
+
+- [#1796](https://github.com/bcakmakoglu/vue-flow/pull/1796) [`978b896`](https://github.com/bcakmakoglu/vue-flow/commit/978b8966468737897b6b63fd1ff38d2eee7772d9) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Remove edgelookup update when updating connection lookup as edge lookup is computed already
+
+- [#1796](https://github.com/bcakmakoglu/vue-flow/pull/1796) [`a6a3000`](https://github.com/bcakmakoglu/vue-flow/commit/a6a30008ead042f01b3dd7e82cc015cbfd4f65a2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Reset drag items on drag end
+
+## 1.42.3
+
+### Patch Changes
+
+- [#1789](https://github.com/bcakmakoglu/vue-flow/pull/1789) [`f4fc254`](https://github.com/bcakmakoglu/vue-flow/commit/f4fc254f5bfb152fb217d9e6278b2737f29293a4) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Unwrap ref when checking if connection in progress.
+
+## 1.42.2
+
+### Patch Changes
+
+- [#1781](https://github.com/bcakmakoglu/vue-flow/pull/1781) [`a14d16d`](https://github.com/bcakmakoglu/vue-flow/commit/a14d16d9d0df1f24a18ce2c4f7ca42b7802cf640) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Prevent removal of handle bounds when `<Handle>` is unmounted.
+
+- [#1776](https://github.com/bcakmakoglu/vue-flow/pull/1776) [`41bed0c`](https://github.com/bcakmakoglu/vue-flow/commit/41bed0cb674cba1b3f22c5e4c4e9c1d0c03a5c61) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Prevent pane click event when connection is in progress.
+
 ## 1.42.1
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.42.1",
+  "version": "1.42.5",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<[email protected]>",

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -313,7 +313,7 @@ const EdgeWrapper = defineComponent({
       updating.value = true
 
       nodeId.value = isSourceHandle ? edge.value.target : edge.value.source
-      handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
+      handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? null
 
       edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
 

packages/core/src/components/Handle/Handle.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
+import { computed, onMounted, ref, toRef } from 'vue'
 import type { HandleProps } from '../../types'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
@@ -136,14 +136,6 @@ onMounted(() => {
   node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
 })
 
-onUnmounted(() => {
-  // clean up node internals
-  const handleBounds = node.handleBounds[type.value]
-  if (handleBounds) {
-    node.handleBounds[type.value] = handleBounds.filter((b) => b.id !== handleId)
-  }
-})
-
 function onPointerDown(event: MouseEvent | TouchEvent) {
   const isMouseTriggered = isMouseEvent(event)
 

packages/core/src/composables/useDrag.ts

@@ -12,7 +12,6 @@ import {
   getEventPosition,
   handleNodeClick,
   hasSelector,
-  isUseDragEvent,
   snapPosition,
 } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
@@ -226,8 +225,10 @@ export function useDrag(params: UseDragParams) {
   }
 
   const eventEnd = (event: UseDragEvent) => {
-    if (!isUseDragEvent(event) && !dragStarted && !dragging.value && !multiSelectionActive.value) {
-      const evt = event as MouseTouchEvent
+    let isClick = false
+
+    if (!dragStarted && !dragging.value && !multiSelectionActive.value) {
+      const evt = event.sourceEvent as MouseTouchEvent
 
       const pointerPos = getPointerPosition(evt)
 
@@ -238,19 +239,11 @@ export function useDrag(params: UseDragParams) {
       // dispatch a click event if the node was attempted to be dragged but the threshold was not exceeded
       if (distance !== 0 && distance <= nodeDragThreshold.value) {
         onClick?.(evt)
+        isClick = true
       }
-
-      return
     }
 
-    dragging.value = false
-    autoPanStarted = false
-    dragStarted = false
-    lastPos = { x: undefined, y: undefined }
-
-    cancelAnimationFrame(autoPanId)
-
-    if (dragItems.length) {
+    if (dragItems.length && !isClick) {
       updateNodePositions(dragItems, false, false)
 
       const [currentNode, nodes] = getEventHandlerParams({
@@ -261,6 +254,14 @@ export function useDrag(params: UseDragParams) {
 
       onStop({ event: event.sourceEvent, node: currentNode, nodes })
     }
+
+    dragItems = []
+    dragging.value = false
+    autoPanStarted = false
+    dragStarted = false
+    lastPos = { x: undefined, y: undefined }
+
+    cancelAnimationFrame(autoPanId)
   }
 
   watch([() => toValue(disabled), el], ([isDisabled, nodeEl], _, onCleanup) => {

packages/core/src/composables/useKeyPress.ts

@@ -7,10 +7,13 @@ type PressedKeys = Set<string>
 type KeyOrCode = 'key' | 'code'
 
 export interface UseKeyPressOptions {
-  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
   target?: MaybeRefOrGetter<EventTarget | null | undefined>
+  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
+  preventDefault?: MaybeRefOrGetter<boolean>
 }
 
+const inputTags = ['INPUT', 'SELECT', 'TEXTAREA']
+
 export function isInputDOMNode(event: KeyboardEvent): boolean {
   const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
 
@@ -19,12 +22,12 @@ export function isInputDOMNode(event: KeyboardEvent): boolean {
   const closest = typeof target?.closest === 'function' ? target.closest('.nokey') : null
 
   // when an input field is focused we don't want to trigger deletion or movement of nodes
-  return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || hasAttribute || !!closest
+  return inputTags.includes(target?.nodeName) || hasAttribute || !!closest
 }
 
 // we want to be able to do a multi selection event if we are in an input field
 function wasModifierPressed(event: KeyboardEvent) {
-  return event.ctrlKey || event.metaKey || event.shiftKey
+  return event.ctrlKey || event.metaKey || event.shiftKey || event.altKey
 }
 
 function isKeyMatch(pressedKey: string, keyToMatch: string, pressedKeys: Set<string>, isKeyUp: boolean) {
@@ -88,6 +91,8 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
 
   const target = toRef(() => toValue(options?.target) ?? window)
 
+  const preventDefault = toRef(() => toValue(options?.preventDefault) ?? true)
+
   const isPressed = ref(toValue(keyFilter) === true)
 
   let modifierPressed = false
@@ -124,7 +129,12 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
         return
       }
 
-      e.preventDefault()
+      const target = (e.composedPath?.()?.[0] || e.target) as Element | null
+      const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A'
+
+      if (!preventDefault.value && (modifierPressed || !isInteractiveElement)) {
+        e.preventDefault()
+      }
 
       isPressed.value = true
     },

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

@@ -32,6 +32,7 @@ const {
   nodeLookup,
   connectionLookup,
   defaultEdgeOptions,
+  connectionStartHandle,
 } = useVueFlow()
 
 const container = ref<HTMLDivElement | null>(null)
@@ -44,6 +45,8 @@ const containerBounds = ref<DOMRect>()
 
 const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
+const connectionInProgress = toRef(() => connectionStartHandle.value !== null)
+
 // Used to prevent click events when the user lets go of the selectionKey during a selection
 let selectionInProgress = false
 let selectionStarted = false
@@ -79,7 +82,7 @@ function wrapHandler(handler: Function, containerRef: HTMLDivElement | null) {
 }
 
 function onClick(event: MouseEvent) {
-  if (selectionInProgress) {
+  if (selectionInProgress || connectionInProgress.value) {
     selectionInProgress = false
     return
   }

packages/core/src/store/actions.ts

@@ -509,7 +509,13 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   }
 
   const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) => {
-    const prevEdge = findEdge(oldEdge.id)!
+    const prevEdge = findEdge(oldEdge.id)
+
+    if (!prevEdge) {
+      return false
+    }
+
+    const prevEdgeIndex = state.edges.indexOf(prevEdge)
 
     const newEdge = updateEdgeAction(oldEdge, newConnection, prevEdge, shouldReplaceId, state.hooks.error.trigger)
 
@@ -525,7 +531,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         state.edges,
       )
 
-      state.edges.splice(state.edges.indexOf(prevEdge), 1, validEdge)
+      state.edges = state.edges.map((edge, index) => (index === prevEdgeIndex ? validEdge : edge))
 
       updateConnectionLookup(state.connectionLookup, edgeLookup.value, [validEdge])
 

packages/core/src/utils/store.ts

@@ -165,7 +165,6 @@ function addConnectionToLookup(
 
 export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: GraphEdge[]) {
   connectionLookup.clear()
-  edgeLookup.clear()
 
   for (const edge of edges) {
     const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge
@@ -176,8 +175,6 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
 
     addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle)
     addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle)
-
-    edgeLookup.set(edge.id, edge)
   }
 }