chore: next release

docs/src/guide/node.md

@@ -342,8 +342,8 @@ import  { useVueFlow } from '@vue-flow/core'
 
 const instance = useVueFlow()
 
-// use the `updateNodeData` method to update the data of an edge
-instance.updateNodeData(edgeId, { hello: 'mona' })
+// use the `updateNodeData` method to update the data of an node
+instance.updateNodeData(nodeId, { hello: 'mona' })
 
 // find the node in the state by its id
 const node = instance.findNode(nodeId)

examples/vite/src/Basic/Basic.vue

@@ -6,11 +6,14 @@ import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
-const elements = ref<Elements>([
+const nodes = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+])
+
+const edges = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
@@ -23,7 +26,7 @@ const { onConnect, addEdges, setViewport, toObject } = useVueFlow({
 onConnect(addEdges)
 
 function updatePos() {
-  return elements.value.forEach((el) => {
+  return nodes.value.forEach((el) => {
     if (isNode(el)) {
       el.position = {
         x: Math.random() * 400,
@@ -40,20 +43,34 @@ function resetViewport() {
   return setViewport({ x: 0, y: 0, zoom: 1 })
 }
 function toggleclass() {
-  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+  return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow
+    :nodes="nodes"
+    :edges="edges"
+    :delete-key-code="['Backspace', 'Delete']"
+    fit-view-on-init
+    class="vue-flow-basic-example"
+  >
     <Background />
-    <MiniMap />
+    <MiniMap node-color="red" :nodes="nodes" :edges="edges" />
     <Controls />
     <Panel position="top-right" style="display: flex; gap: 5px">
+      <input />
       <button @click="resetViewport">reset viewport</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>
       <button @click="logToObject">toObject</button>
     </Panel>
   </VueFlow>
 </template>
+
+<style>
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+</style>

packages/controls/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vue-flow/controls
 
+## 1.1.3
+
+### Patch Changes
+
+- [#1912](https://github.com/bcakmakoglu/vue-flow/pull/1912) [`19d1d9d`](https://github.com/bcakmakoglu/vue-flow/commit/19d1d9d010d30c8fbaf7dafd112db583945a09ba) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `type="button"` to control buttons to avoid form submission if controls are nested in a form element.
+
 ## 1.1.2
 
 ### Patch Changes

packages/controls/package.json

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

packages/controls/src/ControlButton.vue

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <template>
-  <button class="vue-flow__controls-button">
+  <button type="button" class="vue-flow__controls-button">
     <slot />
   </button>
 </template>

packages/core/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vue-flow/core
 
+## 1.45.1
+
+### Patch Changes
+
+- [#1914](https://github.com/bcakmakoglu/vue-flow/pull/1914) [`8f65028`](https://github.com/bcakmakoglu/vue-flow/commit/8f65028389423fabd8d541a20045f3d53b075c16) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Calculate overlapping area in getNodeIntersections correctly.
+
+- [#1913](https://github.com/bcakmakoglu/vue-flow/pull/1913) [`5366b56`](https://github.com/bcakmakoglu/vue-flow/commit/5366b56c4368e5289f69262af7ac3e88963af7c2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Emit node drag-start, drag and drag-end events when a selection is dragged (selectionKeyCode).
+
+- [#1882](https://github.com/bcakmakoglu/vue-flow/pull/1882) [`742eb98`](https://github.com/bcakmakoglu/vue-flow/commit/742eb98a50ba90a895ff1d856e9e20e7331a0df6) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Use correct handlesuffix for connection lookup in `getHandleConnections` action.
+
 ## 1.45.0
 
 ### Minor Changes

packages/core/package.json

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

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -13,12 +13,15 @@ const dragging = useDrag({
   el,
   onStart(args) {
     emits.selectionDragStart(args)
+    emits.nodeDragStart(args)
   },
   onDrag(args) {
     emits.selectionDrag(args)
+    emits.nodeDrag(args)
   },
   onStop(args) {
     emits.selectionDragStop(args)
+    emits.nodeDragStop(args)
   },
 })
 

packages/core/src/store/actions.ts

@@ -73,7 +73,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   }
 
   const getHandleConnections: Actions['getHandleConnections'] = ({ id, type, nodeId }) => {
-    return Array.from(state.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? [])
+    const handleSuffix = id ? `-${type}-${id}` : `-${type}`
+    return Array.from(state.connectionLookup.get(`${nodeId}${handleSuffix}`)?.values() ?? [])
   }
 
   const findNode: Actions['findNode'] = (id) => {
@@ -661,7 +662,11 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
       const overlappingArea = getOverlappingArea(currNodeRect, nodeRect)
       const partiallyVisible = partially && overlappingArea > 0
 
-      if (partiallyVisible || overlappingArea >= Number(nodeRect.width) * Number(nodeRect.height)) {
+      if (
+        partiallyVisible ||
+        overlappingArea >= currNodeRect.width * currNodeRect.height ||
+        overlappingArea >= Number(nodeRect.width) * Number(nodeRect.height)
+      ) {
         intersections.push(n)
       }
     }