diff --git a/.changeset/clever-taxis-work.md b/.changeset/clever-taxis-work.md deleted file mode 100644 index 76d31527..00000000 --- a/.changeset/clever-taxis-work.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@vue-flow/core': minor ---- - -Add `nodesInitialized` event hook diff --git a/.changeset/five-readers-teach.md b/.changeset/five-readers-teach.md deleted file mode 100644 index 0cf6adce..00000000 --- a/.changeset/five-readers-teach.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -'@vue-flow/core': patch ---- - -Add `EdgeLabelRenderer` component export - -### Usage - -- You can use the `EdgeLabelRenderer` component to render the label of an edge outside the SVG context of edges. -- The `EdgeLabelRenderer` component is a component that handles teleporting your edge label into a HTML context -- This is useful if you want to use HTML elements in your edge label, like buttons - -```vue - - - - - - - -``` diff --git a/.changeset/lemon-news-kiss.md b/.changeset/lemon-news-kiss.md deleted file mode 100644 index aafcd0c9..00000000 --- a/.changeset/lemon-news-kiss.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@vue-flow/core': minor ---- - -Pass node intersections to node drag events (on single node drag) diff --git a/.changeset/neat-snakes-mix.md b/.changeset/neat-snakes-mix.md deleted file mode 100644 index 803c3060..00000000 --- a/.changeset/neat-snakes-mix.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -'@vue-flow/core': minor ---- - -Add intersection utils to help with checking if a node intersects with either other nodes or a given area - -### Usage - -- You can either use the action `getIntersectingNodes` to find all nodes that intersect with a given node - -```js -const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow() - -onNodeDrag(({ node }) => { - const intersections = getIntersectingNodes(node).map((n) => n.id) - - getNodes.value.forEach((n) => { - // highlight nodes that are intersecting with the dragged node - n.class = intersections.includes(n.id) ? 'highlight' : '' - }) -}) -``` - -- Node drag events will provide you with the intersecting nodes without having to call the action explicitly. - -```js - -onNodeDrag(({ intersections }) => { - getNodes.value.forEach((n) => { - n.class = intersections?.some((i) => i.id === n.id) ? 'highlight' : '' - }) -}) -``` - -- Or you can use the `isIntersecting` util to check if a node intersects with a given area - -```js -const { onNodeDrag, isNodeIntersecting } = useVueFlow() - -onNodeDrag(({ node }) => { - // highlight the node if it is intersecting with the given area - node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 }) ? 'highlight' : '' -}) -``` diff --git a/.changeset/weak-swans-glow.md b/.changeset/weak-swans-glow.md deleted file mode 100644 index 051f1fd0..00000000 --- a/.changeset/weak-swans-glow.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -'@vue-flow/additional-components': minor -'@vue-flow/core': minor ---- - -Add zoomable and pannable to MiniMap - -### Usage - -- Set `zoomable` and `pannable` to `true` in `MiniMap` component to enable interactions with the MiniMap - -```vue - -``` diff --git a/packages/additional-components/CHANGELOG.md b/packages/additional-components/CHANGELOG.md index b0be9af3..12c9c1c0 100644 --- a/packages/additional-components/CHANGELOG.md +++ b/packages/additional-components/CHANGELOG.md @@ -1,5 +1,23 @@ # @vue-flow/additional-components +## 1.2.0 + +### Minor Changes + +- [#396](https://github.com/bcakmakoglu/vue-flow/pull/396) [`03412ac`](https://github.com/bcakmakoglu/vue-flow/commit/03412acf0d4452c104cc342e5e11eb3a7671fe72) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add zoomable and pannable to MiniMap + + ### Usage + + - Set `zoomable` and `pannable` to `true` in `MiniMap` component to enable interactions with the MiniMap + + ```vue + + ``` + ## 1.1.0 ### Minor Changes diff --git a/packages/additional-components/package.json b/packages/additional-components/package.json index 2f855ddb..279f292c 100644 --- a/packages/additional-components/package.json +++ b/packages/additional-components/package.json @@ -1,6 +1,6 @@ { "name": "@vue-flow/additional-components", - "version": "1.1.0", + "version": "1.2.0", "private": false, "license": "MIT", "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 451ef9bb..0c1f04f5 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,137 @@ # @vue-flow/core +## 1.3.0 + +### Minor Changes + +- [#394](https://github.com/bcakmakoglu/vue-flow/pull/394) [`1403b65`](https://github.com/bcakmakoglu/vue-flow/commit/1403b65f612bd5c905b0ec240d4d16c16ff86df4) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `nodesInitialized` event hook + +- [#387](https://github.com/bcakmakoglu/vue-flow/pull/387) [`9530290`](https://github.com/bcakmakoglu/vue-flow/commit/95302901335303c4460373848ee07a532f150678) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Pass node intersections to node drag events (on single node drag) + +- [#387](https://github.com/bcakmakoglu/vue-flow/pull/387) [`a19b458`](https://github.com/bcakmakoglu/vue-flow/commit/a19b4581a7e237f746e7cf8837c25f3c36249962) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add intersection utils to help with checking if a node intersects with either other nodes or a given area + + ### Usage + + - You can either use the action `getIntersectingNodes` to find all nodes that intersect with a given node + + ```js + const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow() + + onNodeDrag(({ node }) => { + const intersections = getIntersectingNodes(node).map((n) => n.id) + + getNodes.value.forEach((n) => { + // highlight nodes that are intersecting with the dragged node + n.class = intersections.includes(n.id) ? 'highlight' : '' + }) + }) + ``` + + - Node drag events will provide you with the intersecting nodes without having to call the action explicitly. + + ```js + onNodeDrag(({ intersections }) => { + getNodes.value.forEach((n) => { + n.class = intersections?.some((i) => i.id === n.id) ? 'highlight' : '' + }) + }) + ``` + + - Or you can use the `isIntersecting` util to check if a node intersects with a given area + + ```js + const { onNodeDrag, isNodeIntersecting } = useVueFlow() + + onNodeDrag(({ node }) => { + // highlight the node if it is intersecting with the given area + node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 }) ? 'highlight' : '' + }) + ``` + +- [#396](https://github.com/bcakmakoglu/vue-flow/pull/396) [`03412ac`](https://github.com/bcakmakoglu/vue-flow/commit/03412acf0d4452c104cc342e5e11eb3a7671fe72) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add zoomable and pannable to MiniMap + + ### Usage + + - Set `zoomable` and `pannable` to `true` in `MiniMap` component to enable interactions with the MiniMap + + ```vue + + ``` + +### Patch Changes + +- [#361](https://github.com/bcakmakoglu/vue-flow/pull/361) [`43ff2a4`](https://github.com/bcakmakoglu/vue-flow/commit/43ff2a42e6d77251b3fe7987afa02c19cdb2f240) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `EdgeLabelRenderer` component export + + ### Usage + + - You can use the `EdgeLabelRenderer` component to render the label of an edge outside the SVG context of edges. + - The `EdgeLabelRenderer` component is a component that handles teleporting your edge label into a HTML context + - This is useful if you want to use HTML elements in your edge label, like buttons + + ```vue + + + + + + + + ``` + ## 1.2.2 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 6b6ff664..6271cd9a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@vue-flow/core", - "version": "1.2.2", + "version": "1.3.0", "private": false, "license": "MIT", "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",