diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md index c513ce317..05e43a2f7 100644 --- a/docs/src/guide/node.md +++ b/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) diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue index c5be8653d..f23c150c0 100644 --- a/examples/vite/src/Basic/Basic.vue +++ b/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([ +const nodes = ref([ { 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([ { 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,16 +43,23 @@ 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')) } + + diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 82c1be7e7..5d1fe919b 100644 --- a/packages/controls/CHANGELOG.md +++ b/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 diff --git a/packages/controls/package.json b/packages/controls/package.json index 3e2a3fa2d..cc008dac0 100644 --- a/packages/controls/package.json +++ b/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<78412429+bcakmakoglu@users.noreply.github.com>", diff --git a/packages/controls/src/ControlButton.vue b/packages/controls/src/ControlButton.vue index 498b0a9e1..e2d1aadfc 100644 --- a/packages/controls/src/ControlButton.vue +++ b/packages/controls/src/ControlButton.vue @@ -6,7 +6,7 @@ export default { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 89c0f5a4c..67b915327 100644 --- a/packages/core/CHANGELOG.md +++ b/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 diff --git a/packages/core/package.json b/packages/core/package.json index a933e937e..1b188e9a2 100644 --- a/packages/core/package.json +++ b/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<78412429+bcakmakoglu@users.noreply.github.com>", diff --git a/packages/core/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue index ae6d39b4c..e9b5e2b6f 100644 --- a/packages/core/src/components/NodesSelection/NodesSelection.vue +++ b/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) }, }) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index ab8616d1a..5019c6168 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -73,7 +73,8 @@ export function useActions(state: State, nodeLookup: ComputedRef, 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, 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) } }