From ae621d084ca33028b051d2ecd12e5458a1906108 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 6 Oct 2021 10:30:08 +0200 Subject: [PATCH 01/14] chore(selection-listener): remove easy-peasy related comment --- src/components/SelectionListener/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/SelectionListener/index.tsx b/src/components/SelectionListener/index.tsx index 98e1e0d4..9f912794 100644 --- a/src/components/SelectionListener/index.tsx +++ b/src/components/SelectionListener/index.tsx @@ -7,9 +7,7 @@ interface SelectionListenerProps { onSelectionChange: (elements: Elements | null) => void; } -// This is just a helper component for calling the onSelectionChange listener. -// As soon as easy-peasy has implemented the effectOn hook, we can remove this component -// and use the hook instead. https://github.com/ctrlplusb/easy-peasy/pull/459 +// This is a helper component for calling the onSelectionChange listener export default ({ onSelectionChange }: SelectionListenerProps) => { const selectedElements = useStoreState((s) => s.selectedElements); From e6a18a9b245bc1e94ba2df0242b2e7c1518557e0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 11 Oct 2021 04:01:11 +0000 Subject: [PATCH 02/14] chore(deps): bump @types/react-redux from 7.1.18 to 7.1.19 Bumps [@types/react-redux](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-redux) from 7.1.18 to 7.1.19. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-redux) --- updated-dependencies: - dependency-name: "@types/react-redux" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 17 ++++++++++------- package.json | 2 +- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index ace876fc..dbe43699 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@babel/runtime": "^7.15.4", "@types/d3": "^7.0.0", - "@types/react-redux": "^7.1.18", + "@types/react-redux": "^7.1.19", "classcat": "^5.0.3", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0", @@ -52,6 +52,9 @@ "start-server-and-test": "^1.14.0", "typescript": "^4.4.3" }, + "engines": { + "node": ">=12" + }, "peerDependencies": { "react": "16 || 17", "react-dom": "16 || 17" @@ -2766,9 +2769,9 @@ } }, "node_modules/@types/react-redux": { - "version": "7.1.18", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", - "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", + "version": "7.1.19", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.19.tgz", + "integrity": "sha512-L37dSCT0aoJnCgpR8Iuginlbxoh7qhWOXiaDqEsxVMrER1CmVhFD+63NxgJeT4pkmEM28oX0NH4S4f+sXHTZjA==", "dependencies": { "@types/hoist-non-react-statics": "^3.3.0", "@types/react": "*", @@ -13229,9 +13232,9 @@ } }, "@types/react-redux": { - "version": "7.1.18", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", - "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", + "version": "7.1.19", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.19.tgz", + "integrity": "sha512-L37dSCT0aoJnCgpR8Iuginlbxoh7qhWOXiaDqEsxVMrER1CmVhFD+63NxgJeT4pkmEM28oX0NH4S4f+sXHTZjA==", "requires": { "@types/hoist-non-react-statics": "^3.3.0", "@types/react": "*", diff --git a/package.json b/package.json index 3e5250e4..03639960 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "dependencies": { "@babel/runtime": "^7.15.4", "@types/d3": "^7.0.0", - "@types/react-redux": "^7.1.18", + "@types/react-redux": "^7.1.19", "classcat": "^5.0.3", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0", From 47e558452990b956f513a9b51b7fd8c1b9a57b7f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 11 Oct 2021 04:01:37 +0000 Subject: [PATCH 03/14] chore(deps-dev): bump autoprefixer from 10.3.6 to 10.3.7 Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.3.6 to 10.3.7. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/autoprefixer/compare/10.3.6...10.3.7) --- updated-dependencies: - dependency-name: autoprefixer dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 141 ++++++++++++++++++++-------------------------- package.json | 2 +- 2 files changed, 62 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index ace876fc..41563526 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "@svgr/rollup": "^5.5.0", "@types/redux": "^3.6.31", "@types/resize-observer-browser": "^0.1.6", - "autoprefixer": "^10.3.6", + "autoprefixer": "^10.3.7", "babel-preset-react-app": "^10.0.0", "cypress": "^8.5.0", "postcss": "^8.3.8", @@ -52,6 +52,9 @@ "start-server-and-test": "^1.14.0", "typescript": "^4.4.3" }, + "engines": { + "node": ">=12" + }, "peerDependencies": { "react": "16 || 17", "react-dom": "16 || 17" @@ -3081,16 +3084,16 @@ } }, "node_modules/autoprefixer": { - "version": "10.3.6", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.6.tgz", - "integrity": "sha512-3bDjTfF0MfZntwVCSd18XAT2Zndufh3Mep+mafbzdIQEeWbncVRUVDjH8/EPANV9Hq40seJ24QcYAyhUsFz7gQ==", + "version": "10.3.7", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz", + "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==", "dev": true, "dependencies": { - "browserslist": "^4.17.1", - "caniuse-lite": "^1.0.30001260", + "browserslist": "^4.17.3", + "caniuse-lite": "^1.0.30001264", "fraction.js": "^4.1.1", - "nanocolors": "^0.2.8", "normalize-range": "^0.1.2", + "picocolors": "^0.2.1", "postcss-value-parser": "^4.1.0" }, "bin": { @@ -3674,16 +3677,16 @@ } }, "node_modules/browserslist": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.1.tgz", - "integrity": "sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==", + "version": "4.17.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.3.tgz", + "integrity": "sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==", "dev": true, "dependencies": { - "caniuse-lite": "^1.0.30001259", - "electron-to-chromium": "^1.3.846", + "caniuse-lite": "^1.0.30001264", + "electron-to-chromium": "^1.3.857", "escalade": "^3.1.1", - "nanocolors": "^0.1.5", - "node-releases": "^1.1.76" + "node-releases": "^1.1.77", + "picocolors": "^0.2.1" }, "bin": { "browserslist": "cli.js" @@ -3696,12 +3699,6 @@ "url": "https://opencollective.com/browserslist" } }, - "node_modules/browserslist/node_modules/nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - }, "node_modules/buffer": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", @@ -3830,24 +3827,15 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001260", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz", - "integrity": "sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==", + "version": "1.0.30001265", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz", + "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==", "dev": true, - "dependencies": { - "nanocolors": "^0.1.0" - }, "funding": { "type": "opencollective", "url": "https://opencollective.com/browserslist" } }, - "node_modules/caniuse-lite/node_modules/nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - }, "node_modules/caseless": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", @@ -4980,9 +4968,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.850", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.850.tgz", - "integrity": "sha512-ZzkDcdzePeF4dhoGZQT77V2CyJOpwfTZEOg4h0x6R/jQhGt/rIRpbRyVreWLtD7B/WsVxo91URm2WxMKR9JQZA==", + "version": "1.3.864", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.864.tgz", + "integrity": "sha512-v4rbad8GO6/yVI92WOeU9Wgxc4NA0n4f6P1FvZTY+jyY7JHEhw3bduYu60v3Q1h81Cg6eo4ApZrFPuycwd5hGw==", "dev": true }, "node_modules/emoji-regex": { @@ -7307,9 +7295,9 @@ } }, "node_modules/node-releases": { - "version": "1.1.76", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz", - "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==", + "version": "1.1.77", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", + "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==", "dev": true }, "node_modules/normalize-path": { @@ -7997,6 +7985,12 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", "dev": true }, + "node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "node_modules/picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", @@ -13483,16 +13477,16 @@ "dev": true }, "autoprefixer": { - "version": "10.3.6", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.6.tgz", - "integrity": "sha512-3bDjTfF0MfZntwVCSd18XAT2Zndufh3Mep+mafbzdIQEeWbncVRUVDjH8/EPANV9Hq40seJ24QcYAyhUsFz7gQ==", + "version": "10.3.7", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz", + "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==", "dev": true, "requires": { - "browserslist": "^4.17.1", - "caniuse-lite": "^1.0.30001260", + "browserslist": "^4.17.3", + "caniuse-lite": "^1.0.30001264", "fraction.js": "^4.1.1", - "nanocolors": "^0.2.8", "normalize-range": "^0.1.2", + "picocolors": "^0.2.1", "postcss-value-parser": "^4.1.0" } }, @@ -13964,24 +13958,16 @@ } }, "browserslist": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.1.tgz", - "integrity": "sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ==", + "version": "4.17.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.3.tgz", + "integrity": "sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001259", - "electron-to-chromium": "^1.3.846", + "caniuse-lite": "^1.0.30001264", + "electron-to-chromium": "^1.3.857", "escalade": "^3.1.1", - "nanocolors": "^0.1.5", - "node-releases": "^1.1.76" - }, - "dependencies": { - "nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - } + "node-releases": "^1.1.77", + "picocolors": "^0.2.1" } }, "buffer": { @@ -14068,21 +14054,10 @@ } }, "caniuse-lite": { - "version": "1.0.30001260", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz", - "integrity": "sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg==", - "dev": true, - "requires": { - "nanocolors": "^0.1.0" - }, - "dependencies": { - "nanocolors": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz", - "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==", - "dev": true - } - } + "version": "1.0.30001265", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz", + "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==", + "dev": true }, "caseless": { "version": "0.12.0", @@ -14949,9 +14924,9 @@ } }, "electron-to-chromium": { - "version": "1.3.850", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.850.tgz", - "integrity": "sha512-ZzkDcdzePeF4dhoGZQT77V2CyJOpwfTZEOg4h0x6R/jQhGt/rIRpbRyVreWLtD7B/WsVxo91URm2WxMKR9JQZA==", + "version": "1.3.864", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.864.tgz", + "integrity": "sha512-v4rbad8GO6/yVI92WOeU9Wgxc4NA0n4f6P1FvZTY+jyY7JHEhw3bduYu60v3Q1h81Cg6eo4ApZrFPuycwd5hGw==", "dev": true }, "emoji-regex": { @@ -16684,9 +16659,9 @@ } }, "node-releases": { - "version": "1.1.76", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz", - "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==", + "version": "1.1.77", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", + "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==", "dev": true }, "normalize-path": { @@ -17204,6 +17179,12 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", "dev": true }, + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", diff --git a/package.json b/package.json index 3e5250e4..b3d7ce14 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@svgr/rollup": "^5.5.0", "@types/redux": "^3.6.31", "@types/resize-observer-browser": "^0.1.6", - "autoprefixer": "^10.3.6", + "autoprefixer": "^10.3.7", "babel-preset-react-app": "^10.0.0", "cypress": "^8.5.0", "postcss": "^8.3.8", From 3be73ef4808916a3c05811fc3eca671b43714152 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 11 Oct 2021 04:01:50 +0000 Subject: [PATCH 04/14] chore(deps-dev): bump @babel/core from 7.15.5 to 7.15.8 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.15.5 to 7.15.8. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.15.8/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 109 ++++++++++++++++++++++++---------------------- package.json | 2 +- 2 files changed, 57 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index ace876fc..d12b7b21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "redux": "^4.1.1" }, "devDependencies": { - "@babel/core": "^7.15.5", + "@babel/core": "^7.15.8", "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.15.6", "@babel/preset-react": "^7.14.5", @@ -52,15 +52,18 @@ "start-server-and-test": "^1.14.0", "typescript": "^4.4.3" }, + "engines": { + "node": ">=12" + }, "peerDependencies": { "react": "16 || 17", "react-dom": "16 || 17" } }, "node_modules/@babel/code-frame": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", - "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz", + "integrity": "sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==", "dev": true, "dependencies": { "@babel/highlight": "^7.14.5" @@ -79,20 +82,20 @@ } }, "node_modules/@babel/core": { - "version": "7.15.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz", - "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.8.tgz", + "integrity": "sha512-3UG9dsxvYBMYwRv+gS41WKHno4K60/9GPy1CJaH6xy3Elq8CTtvtjT5R5jmNhXfCYLX2mTw+7/aq5ak/gOE0og==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.15.4", + "@babel/code-frame": "^7.15.8", + "@babel/generator": "^7.15.8", "@babel/helper-compilation-targets": "^7.15.4", - "@babel/helper-module-transforms": "^7.15.4", + "@babel/helper-module-transforms": "^7.15.8", "@babel/helpers": "^7.15.4", - "@babel/parser": "^7.15.5", + "@babel/parser": "^7.15.8", "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", - "@babel/types": "^7.15.4", + "@babel/types": "^7.15.6", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -109,12 +112,12 @@ } }, "node_modules/@babel/generator": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz", - "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.8.tgz", + "integrity": "sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==", "dev": true, "dependencies": { - "@babel/types": "^7.15.4", + "@babel/types": "^7.15.6", "jsesc": "^2.5.1", "source-map": "^0.5.0" }, @@ -295,19 +298,19 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz", - "integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", "dev": true, "dependencies": { "@babel/helper-module-imports": "^7.15.4", "@babel/helper-replace-supers": "^7.15.4", "@babel/helper-simple-access": "^7.15.4", "@babel/helper-split-export-declaration": "^7.15.4", - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-validator-identifier": "^7.15.7", "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", - "@babel/types": "^7.15.4" + "@babel/types": "^7.15.6" }, "engines": { "node": ">=6.9.0" @@ -400,9 +403,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", "dev": true, "engines": { "node": ">=6.9.0" @@ -461,9 +464,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz", - "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz", + "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -11239,9 +11242,9 @@ }, "dependencies": { "@babel/code-frame": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", - "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz", + "integrity": "sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==", "dev": true, "requires": { "@babel/highlight": "^7.14.5" @@ -11254,20 +11257,20 @@ "dev": true }, "@babel/core": { - "version": "7.15.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz", - "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.8.tgz", + "integrity": "sha512-3UG9dsxvYBMYwRv+gS41WKHno4K60/9GPy1CJaH6xy3Elq8CTtvtjT5R5jmNhXfCYLX2mTw+7/aq5ak/gOE0og==", "dev": true, "requires": { - "@babel/code-frame": "^7.14.5", - "@babel/generator": "^7.15.4", + "@babel/code-frame": "^7.15.8", + "@babel/generator": "^7.15.8", "@babel/helper-compilation-targets": "^7.15.4", - "@babel/helper-module-transforms": "^7.15.4", + "@babel/helper-module-transforms": "^7.15.8", "@babel/helpers": "^7.15.4", - "@babel/parser": "^7.15.5", + "@babel/parser": "^7.15.8", "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", - "@babel/types": "^7.15.4", + "@babel/types": "^7.15.6", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -11277,12 +11280,12 @@ } }, "@babel/generator": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz", - "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.8.tgz", + "integrity": "sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==", "dev": true, "requires": { - "@babel/types": "^7.15.4", + "@babel/types": "^7.15.6", "jsesc": "^2.5.1", "source-map": "^0.5.0" } @@ -11415,19 +11418,19 @@ } }, "@babel/helper-module-transforms": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz", - "integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", "dev": true, "requires": { "@babel/helper-module-imports": "^7.15.4", "@babel/helper-replace-supers": "^7.15.4", "@babel/helper-simple-access": "^7.15.4", "@babel/helper-split-export-declaration": "^7.15.4", - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-validator-identifier": "^7.15.7", "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", - "@babel/types": "^7.15.4" + "@babel/types": "^7.15.6" } }, "@babel/helper-optimise-call-expression": { @@ -11496,9 +11499,9 @@ } }, "@babel/helper-validator-identifier": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", - "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==", + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", "dev": true }, "@babel/helper-validator-option": { @@ -11542,9 +11545,9 @@ } }, "@babel/parser": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz", - "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz", + "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==", "dev": true }, "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { diff --git a/package.json b/package.json index 3e5250e4..3b466594 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "redux": "^4.1.1" }, "devDependencies": { - "@babel/core": "^7.15.5", + "@babel/core": "^7.15.8", "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.15.6", "@babel/preset-react": "^7.14.5", From fcc497da0ad96a42f91006f0a3c757d7c956fb5c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 11 Oct 2021 04:02:03 +0000 Subject: [PATCH 05/14] chore(deps-dev): bump @babel/preset-env from 7.15.6 to 7.15.8 Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.15.6 to 7.15.8. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.15.8/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 73 ++++++++++++++++++++++++----------------------- package.json | 2 +- 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index ace876fc..fce6fb56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "devDependencies": { "@babel/core": "^7.15.5", "@babel/plugin-transform-runtime": "^7.15.0", - "@babel/preset-env": "^7.15.6", + "@babel/preset-env": "^7.15.8", "@babel/preset-react": "^7.14.5", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^21.0.0", @@ -52,6 +52,9 @@ "start-server-and-test": "^1.14.0", "typescript": "^4.4.3" }, + "engines": { + "node": ">=12" + }, "peerDependencies": { "react": "16 || 17", "react-dom": "16 || 17" @@ -490,9 +493,9 @@ } }, "node_modules/@babel/plugin-proposal-async-generator-functions": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.4.tgz", - "integrity": "sha512-2zt2g5vTXpMC3OmK6uyjvdXptbhBXfA77XGrd3gh93zwG8lZYBLOBImiGBEG0RANu3JqKEACCz5CGk73OJROBw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.8.tgz", + "integrity": "sha512-2Z5F2R2ibINTc63mY7FLqGfEbmofrHU9FitJW1Q7aPaKFhiPvSq6QEt/BoWN5oME3GVyjcRuNNSRbb9LC0CSWA==", "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.14.5", @@ -1544,13 +1547,13 @@ } }, "node_modules/@babel/plugin-transform-spread": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz", - "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.15.8.tgz", + "integrity": "sha512-/daZ8s2tNaRekl9YJa9X4bzjpeRZLt122cpgFnQPLGUe61PH8zMEBmYqKkW5xF5JUEh5buEGXJoQpqBmIbpmEQ==", "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5" + "@babel/helper-skip-transparent-expression-wrappers": "^7.15.4" }, "engines": { "node": ">=6.9.0" @@ -1653,9 +1656,9 @@ } }, "node_modules/@babel/preset-env": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.15.6.tgz", - "integrity": "sha512-L+6jcGn7EWu7zqaO2uoTDjjMBW+88FXzV8KvrBl2z6MtRNxlsmUNRlZPaNNPUTgqhyC5DHNFk/2Jmra+ublZWw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.15.8.tgz", + "integrity": "sha512-rCC0wH8husJgY4FPbHsiYyiLxSY8oMDJH7Rl6RQMknbN9oDDHhM9RDFvnGM2MgkbUJzSQB4gtuwygY5mCqGSsA==", "dev": true, "dependencies": { "@babel/compat-data": "^7.15.0", @@ -1663,7 +1666,7 @@ "@babel/helper-plugin-utils": "^7.14.5", "@babel/helper-validator-option": "^7.14.5", "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.15.4", - "@babel/plugin-proposal-async-generator-functions": "^7.15.4", + "@babel/plugin-proposal-async-generator-functions": "^7.15.8", "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/plugin-proposal-class-static-block": "^7.15.4", "@babel/plugin-proposal-dynamic-import": "^7.14.5", @@ -1718,7 +1721,7 @@ "@babel/plugin-transform-regenerator": "^7.14.5", "@babel/plugin-transform-reserved-words": "^7.14.5", "@babel/plugin-transform-shorthand-properties": "^7.14.5", - "@babel/plugin-transform-spread": "^7.14.6", + "@babel/plugin-transform-spread": "^7.15.8", "@babel/plugin-transform-sticky-regex": "^7.14.5", "@babel/plugin-transform-template-literals": "^7.14.5", "@babel/plugin-transform-typeof-symbol": "^7.14.5", @@ -1727,7 +1730,7 @@ "@babel/preset-modules": "^0.1.4", "@babel/types": "^7.15.6", "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", "babel-plugin-polyfill-regenerator": "^0.2.2", "core-js-compat": "^3.16.0", "semver": "^6.3.0" @@ -3182,13 +3185,13 @@ } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.3.tgz", - "integrity": "sha512-rCOFzEIJpJEAU14XCcV/erIf/wZQMmMT5l5vXOpL5uoznyOGfDIjPj6FVytMvtzaKSTSVKouOCTPJ5OMUZH30g==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.5.tgz", + "integrity": "sha512-ninF5MQNwAX9Z7c9ED+H2pGt1mXdP4TqzlHKyPIYmJIYz0N+++uwdM7RnJukklhzJ54Q84vA4ZJkgs7lu5vqcw==", "dev": true, "dependencies": { "@babel/helper-define-polyfill-provider": "^0.2.2", - "core-js-compat": "^3.14.0" + "core-js-compat": "^3.16.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0" @@ -11559,9 +11562,9 @@ } }, "@babel/plugin-proposal-async-generator-functions": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.4.tgz", - "integrity": "sha512-2zt2g5vTXpMC3OmK6uyjvdXptbhBXfA77XGrd3gh93zwG8lZYBLOBImiGBEG0RANu3JqKEACCz5CGk73OJROBw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.8.tgz", + "integrity": "sha512-2Z5F2R2ibINTc63mY7FLqGfEbmofrHU9FitJW1Q7aPaKFhiPvSq6QEt/BoWN5oME3GVyjcRuNNSRbb9LC0CSWA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", @@ -12238,13 +12241,13 @@ } }, "@babel/plugin-transform-spread": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz", - "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.15.8.tgz", + "integrity": "sha512-/daZ8s2tNaRekl9YJa9X4bzjpeRZLt122cpgFnQPLGUe61PH8zMEBmYqKkW5xF5JUEh5buEGXJoQpqBmIbpmEQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5" + "@babel/helper-skip-transparent-expression-wrappers": "^7.15.4" } }, "@babel/plugin-transform-sticky-regex": { @@ -12305,9 +12308,9 @@ } }, "@babel/preset-env": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.15.6.tgz", - "integrity": "sha512-L+6jcGn7EWu7zqaO2uoTDjjMBW+88FXzV8KvrBl2z6MtRNxlsmUNRlZPaNNPUTgqhyC5DHNFk/2Jmra+ublZWw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.15.8.tgz", + "integrity": "sha512-rCC0wH8husJgY4FPbHsiYyiLxSY8oMDJH7Rl6RQMknbN9oDDHhM9RDFvnGM2MgkbUJzSQB4gtuwygY5mCqGSsA==", "dev": true, "requires": { "@babel/compat-data": "^7.15.0", @@ -12315,7 +12318,7 @@ "@babel/helper-plugin-utils": "^7.14.5", "@babel/helper-validator-option": "^7.14.5", "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.15.4", - "@babel/plugin-proposal-async-generator-functions": "^7.15.4", + "@babel/plugin-proposal-async-generator-functions": "^7.15.8", "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/plugin-proposal-class-static-block": "^7.15.4", "@babel/plugin-proposal-dynamic-import": "^7.14.5", @@ -12370,7 +12373,7 @@ "@babel/plugin-transform-regenerator": "^7.14.5", "@babel/plugin-transform-reserved-words": "^7.14.5", "@babel/plugin-transform-shorthand-properties": "^7.14.5", - "@babel/plugin-transform-spread": "^7.14.6", + "@babel/plugin-transform-spread": "^7.15.8", "@babel/plugin-transform-sticky-regex": "^7.14.5", "@babel/plugin-transform-template-literals": "^7.14.5", "@babel/plugin-transform-typeof-symbol": "^7.14.5", @@ -12379,7 +12382,7 @@ "@babel/preset-modules": "^0.1.4", "@babel/types": "^7.15.6", "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", "babel-plugin-polyfill-regenerator": "^0.2.2", "core-js-compat": "^3.16.0", "semver": "^6.3.0" @@ -13564,13 +13567,13 @@ } }, "babel-plugin-polyfill-corejs3": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.3.tgz", - "integrity": "sha512-rCOFzEIJpJEAU14XCcV/erIf/wZQMmMT5l5vXOpL5uoznyOGfDIjPj6FVytMvtzaKSTSVKouOCTPJ5OMUZH30g==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.5.tgz", + "integrity": "sha512-ninF5MQNwAX9Z7c9ED+H2pGt1mXdP4TqzlHKyPIYmJIYz0N+++uwdM7RnJukklhzJ54Q84vA4ZJkgs7lu5vqcw==", "dev": true, "requires": { "@babel/helper-define-polyfill-provider": "^0.2.2", - "core-js-compat": "^3.14.0" + "core-js-compat": "^3.16.2" } }, "babel-plugin-polyfill-regenerator": { diff --git a/package.json b/package.json index 3e5250e4..a82915db 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@babel/core": "^7.15.5", "@babel/plugin-transform-runtime": "^7.15.0", - "@babel/preset-env": "^7.15.6", + "@babel/preset-env": "^7.15.8", "@babel/preset-react": "^7.14.5", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^21.0.0", From f30ba98a53ae06e3341bbb8f25ddf33d6b141e5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 13 Oct 2021 16:43:11 +0200 Subject: [PATCH 06/14] feat(BezierEdge): use quadratic bezier curve for top-left and bottom-right edges --- src/components/Edges/BezierEdge.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 368fdcc6..b4c94197 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -37,9 +37,9 @@ export function getBezierPath({ if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) { path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(targetPosition)) { - path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`; + path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(sourcePosition)) { - path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`; + path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`; } return path; From b36c713650323d542aa206c22f3d3ee8d8f1a3d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Thu, 14 Oct 2021 09:15:04 +0200 Subject: [PATCH 07/14] feat(example): add example with floating edge and whole node as handle --- example/src/NodeAsHandle/CustomEdge.tsx | 163 ++++++++++++++++++++++++ example/src/NodeAsHandle/CustomNode.tsx | 16 +++ example/src/NodeAsHandle/index.tsx | 92 +++++++++++++ example/src/NodeAsHandle/style.css | 24 ++++ example/src/index.tsx | 5 + 5 files changed, 300 insertions(+) create mode 100644 example/src/NodeAsHandle/CustomEdge.tsx create mode 100644 example/src/NodeAsHandle/CustomNode.tsx create mode 100644 example/src/NodeAsHandle/index.tsx create mode 100644 example/src/NodeAsHandle/style.css diff --git a/example/src/NodeAsHandle/CustomEdge.tsx b/example/src/NodeAsHandle/CustomEdge.tsx new file mode 100644 index 00000000..032b9f36 --- /dev/null +++ b/example/src/NodeAsHandle/CustomEdge.tsx @@ -0,0 +1,163 @@ +import { FC, useMemo } from 'react'; +import cc from 'classcat'; +import { + EdgeProps, + getMarkerEnd, + useStoreState, + Position, + getBezierPath, + ConnectionLineComponentProps, +} from 'react-flow-renderer'; + +function getNodeIntersection(source: any, target: any) { + // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a + const w = source.__rf.width / 2; + const h = source.__rf.height / 2; + + const x2 = source.__rf.position.x + w; + const y2 = source.__rf.position.y + h; + const x1 = target.__rf.position.x; + const y1 = target.__rf.position.y; + + const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h); + const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h); + const a = 1 / (Math.abs(xx1) + Math.abs(yy1)); + const xx3 = a * xx1; + const yy3 = a * yy1; + const x = w * (xx3 + yy3) + x2; + const y = h * (-xx3 + yy3) + y2; + + return [x, y]; +} + +function getEdgePosition(node: any, x: number, y: number) { + const n = { ...node.__rf.position, ...node.__rf }; + const nx = Math.round(n.x); + const ny = Math.round(n.y); + const px = Math.round(x); + const py = Math.round(y); + + if (px <= nx + 1) { + return Position.Left; + } + if (px >= nx + n.width - 1) { + return Position.Right; + } + if (py <= ny + 1) { + return Position.Top; + } + if (py >= n.y + n.height - 1) { + return Position.Bottom; + } + + return Position.Top; +} + +function getArrow(source: any, target: any) { + const [sx, sy] = getNodeIntersection(source, target); + const [tx, ty] = getNodeIntersection(target, source); + + const sourcePos = getEdgePosition(source, sx, sy); + const targetPos = getEdgePosition(target, tx, ty); + + return { + sx, + sy, + tx, + ty, + label: null, + sourcePos, + targetPos, + }; +} + +const CustomEdge: FC = ({ + id, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + data, + arrowHeadType, + markerEndId, + style, +}) => { + const nodes = useStoreState((state) => state.nodes); + const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); + + const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]); + const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]); + + if (!sourceNode || !targetNode) { + return null; + } + + const { sx, sy, tx, ty, label, sourcePos, targetPos } = getArrow(sourceNode, targetNode); + + const d = getBezierPath({ + sourceX: sx, + sourceY: sy, + sourcePosition: sourcePos, + targetPosition: targetPos, + targetX: tx, + targetY: ty, + }); + + return ( + <> + + + + {label && ( + + + {label} + + + )} + + ); +}; + +export const ConnectionLine: FC = ({ + sourceX, + sourceY, + targetX, + targetY, + sourceNode, +}) => { + if (!sourceNode) { + return null; + } + + const targetNode = { __rf: { width: 100, height: 100, position: { x: targetX, y: targetY - 50 } } }; + const { sx, sy, tx, ty, label, sourcePos, targetPos } = getArrow(sourceNode, targetNode); + const d = getBezierPath({ + sourceX: sx, + sourceY: sy, + sourcePosition: sourcePos, + targetPosition: targetPos, + targetX: tx, + targetY: ty, + }); + + return ( + + + + + ); +}; + +export default CustomEdge; diff --git a/example/src/NodeAsHandle/CustomNode.tsx b/example/src/NodeAsHandle/CustomNode.tsx new file mode 100644 index 00000000..c1bc00de --- /dev/null +++ b/example/src/NodeAsHandle/CustomNode.tsx @@ -0,0 +1,16 @@ +import { Handle, Position, NodeProps } from 'react-flow-renderer'; + +const CustomNode = ({ data }: NodeProps) => { + const handleType = data?.isTarget ? 'target' : 'source'; + + return ( +
+ This is a node +
+ +
+
+ ); +}; + +export default CustomNode; diff --git a/example/src/NodeAsHandle/index.tsx b/example/src/NodeAsHandle/index.tsx new file mode 100644 index 00000000..b24b0571 --- /dev/null +++ b/example/src/NodeAsHandle/index.tsx @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; + +import ReactFlow, { + removeElements, + addEdge, + MiniMap, + Controls, + Background, + OnLoadParams, + EdgeTypesType, + Elements, + Connection, + Edge, + ArrowHeadType, + NodeTypesType, +} from 'react-flow-renderer'; + +import CustomEdge, { ConnectionLine } from './CustomEdge'; +import CustomNode from './CustomNode'; + +import './style.css'; + +const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); + +const getCustomEdge = (props: any) => ({ + type: 'custom', + arrowHeadType: ArrowHeadType.Arrow, + ...props, +}); + +function createElements() { + const elements = []; + const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; + + elements.push({ type: 'custom', id: 'source', data: { label: 'Source', isTarget: false }, position: center }); + + for (let i = 0; i < 8; i++) { + const degrees = i * (360 / 8); + const radians = degrees * (Math.PI / 180); + const x = 250 * Math.cos(radians) + center.x; + const y = 250 * Math.sin(radians) + center.y; + + elements.push({ type: 'custom', id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); + + if (i % 2 === 0) { + elements.push( + getCustomEdge({ + id: `source-${i}`, + source: 'source', + target: `${i}`, + }) + ); + } + } + + return elements; +} + +const initialElements: Elements = createElements(); + +const edgeTypes: EdgeTypesType = { + custom: CustomEdge, +}; + +const nodeTypes: NodeTypesType = { + custom: CustomNode, +}; + +const NodeAsHandleFlow = () => { + const [elements, setElements] = useState(initialElements); + + const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(getCustomEdge(params), els)); + + return ( + + + + + + ); +}; + +export default NodeAsHandleFlow; diff --git a/example/src/NodeAsHandle/style.css b/example/src/NodeAsHandle/style.css new file mode 100644 index 00000000..65661b0a --- /dev/null +++ b/example/src/NodeAsHandle/style.css @@ -0,0 +1,24 @@ +.customnode { + padding: 10px; + border: 1px solid #ddd; + position: relative; +} + +.handlewrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.react-flow__handle { + background-color: red; + opacity: 0.5; + height: 100%; + width: 100%; + border-radius: 0; + left: 0; + top: 0; + transform: none; +} diff --git a/example/src/index.tsx b/example/src/index.tsx index f81278ba..0f8a4b77 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -14,6 +14,7 @@ import Provider from './Provider'; import Hidden from './Hidden'; import EdgeTypes from './EdgeTypes'; import CustomConnectionLine from './CustomConnectionLine'; +import NodeAsHandle from './NodeAsHandle'; import NodeTypeChange from './NodeTypeChange'; import NodeTypesObjectChange from './NodeTypesObjectChange'; import UpdatableEdge from './UpdatableEdge'; @@ -79,6 +80,10 @@ const routes = [ path: '/custom-connectionline', component: CustomConnectionLine, }, + { + path: '/node-as-handle', + component: NodeAsHandle, + }, { path: '/nodetype-change', component: NodeTypeChange, From ecc02a1ee9bcbea4776d00764832488dfac6ba0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Thu, 14 Oct 2021 10:52:46 +0200 Subject: [PATCH 08/14] feat(floatingedge): configure connectionline --- example/src/NodeAsHandle/CustomEdge.tsx | 16 ++++++++-------- example/src/NodeAsHandle/CustomNode.tsx | 16 ---------------- example/src/NodeAsHandle/index.tsx | 13 ++----------- example/src/NodeAsHandle/style.css | 24 ------------------------ 4 files changed, 10 insertions(+), 59 deletions(-) delete mode 100644 example/src/NodeAsHandle/CustomNode.tsx delete mode 100644 example/src/NodeAsHandle/style.css diff --git a/example/src/NodeAsHandle/CustomEdge.tsx b/example/src/NodeAsHandle/CustomEdge.tsx index 032b9f36..988b1751 100644 --- a/example/src/NodeAsHandle/CustomEdge.tsx +++ b/example/src/NodeAsHandle/CustomEdge.tsx @@ -131,25 +131,25 @@ const CustomEdge: FC = ({ }; export const ConnectionLine: FC = ({ - sourceX, - sourceY, targetX, targetY, + sourcePosition, + targetPosition, sourceNode, }) => { if (!sourceNode) { return null; } - const targetNode = { __rf: { width: 100, height: 100, position: { x: targetX, y: targetY - 50 } } }; - const { sx, sy, tx, ty, label, sourcePos, targetPos } = getArrow(sourceNode, targetNode); + const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } }; + const { sx, sy } = getArrow(sourceNode, targetNode); const d = getBezierPath({ sourceX: sx, sourceY: sy, - sourcePosition: sourcePos, - targetPosition: targetPos, - targetX: tx, - targetY: ty, + sourcePosition, + targetPosition, + targetX, + targetY, }); return ( diff --git a/example/src/NodeAsHandle/CustomNode.tsx b/example/src/NodeAsHandle/CustomNode.tsx deleted file mode 100644 index c1bc00de..00000000 --- a/example/src/NodeAsHandle/CustomNode.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Handle, Position, NodeProps } from 'react-flow-renderer'; - -const CustomNode = ({ data }: NodeProps) => { - const handleType = data?.isTarget ? 'target' : 'source'; - - return ( -
- This is a node -
- -
-
- ); -}; - -export default CustomNode; diff --git a/example/src/NodeAsHandle/index.tsx b/example/src/NodeAsHandle/index.tsx index b24b0571..9e3879d3 100644 --- a/example/src/NodeAsHandle/index.tsx +++ b/example/src/NodeAsHandle/index.tsx @@ -12,13 +12,9 @@ import ReactFlow, { Connection, Edge, ArrowHeadType, - NodeTypesType, } from 'react-flow-renderer'; import CustomEdge, { ConnectionLine } from './CustomEdge'; -import CustomNode from './CustomNode'; - -import './style.css'; const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); @@ -32,7 +28,7 @@ function createElements() { const elements = []; const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; - elements.push({ type: 'custom', id: 'source', data: { label: 'Source', isTarget: false }, position: center }); + elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center }); for (let i = 0; i < 8; i++) { const degrees = i * (360 / 8); @@ -40,7 +36,7 @@ function createElements() { const x = 250 * Math.cos(radians) + center.x; const y = 250 * Math.sin(radians) + center.y; - elements.push({ type: 'custom', id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); + elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); if (i % 2 === 0) { elements.push( @@ -62,10 +58,6 @@ const edgeTypes: EdgeTypesType = { custom: CustomEdge, }; -const nodeTypes: NodeTypesType = { - custom: CustomNode, -}; - const NodeAsHandleFlow = () => { const [elements, setElements] = useState(initialElements); @@ -79,7 +71,6 @@ const NodeAsHandleFlow = () => { onConnect={onConnect} onLoad={onLoad} edgeTypes={edgeTypes} - nodeTypes={nodeTypes} connectionLineComponent={ConnectionLine} > diff --git a/example/src/NodeAsHandle/style.css b/example/src/NodeAsHandle/style.css deleted file mode 100644 index 65661b0a..00000000 --- a/example/src/NodeAsHandle/style.css +++ /dev/null @@ -1,24 +0,0 @@ -.customnode { - padding: 10px; - border: 1px solid #ddd; - position: relative; -} - -.handlewrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.react-flow__handle { - background-color: red; - opacity: 0.5; - height: 100%; - width: 100%; - border-radius: 0; - left: 0; - top: 0; - transform: none; -} From a76b111365dff3d7a7391cff8e025bc7498b6c85 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 Oct 2021 10:54:40 +0200 Subject: [PATCH 09/14] chore(examples): add old api src --- example/.gitignore | 2 ++ example/src/Undirectional/index.tsx | 27 +++++++++++++-------------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/example/.gitignore b/example/.gitignore index 4d29575d..43d022f7 100644 --- a/example/.gitignore +++ b/example/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +/src_oldapi \ No newline at end of file diff --git a/example/src/Undirectional/index.tsx b/example/src/Undirectional/index.tsx index f05ad21e..9f51296a 100644 --- a/example/src/Undirectional/index.tsx +++ b/example/src/Undirectional/index.tsx @@ -68,7 +68,7 @@ const initialElements: Elements = [ target: '01', sourceHandle: 'left', targetHandle: 'bottom', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -77,7 +77,7 @@ const initialElements: Elements = [ target: '01', sourceHandle: 'top', targetHandle: 'right', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -86,7 +86,7 @@ const initialElements: Elements = [ target: '02', sourceHandle: 'top', targetHandle: 'left', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -95,7 +95,7 @@ const initialElements: Elements = [ target: '02', sourceHandle: 'right', targetHandle: 'bottom', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -104,7 +104,7 @@ const initialElements: Elements = [ target: '03', sourceHandle: 'right', targetHandle: 'top', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -113,7 +113,7 @@ const initialElements: Elements = [ target: '03', sourceHandle: 'bottom', targetHandle: 'left', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -122,7 +122,7 @@ const initialElements: Elements = [ target: '04', sourceHandle: 'bottom', targetHandle: 'right', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -131,7 +131,7 @@ const initialElements: Elements = [ target: '04', sourceHandle: 'left', targetHandle: 'top', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -140,7 +140,7 @@ const initialElements: Elements = [ target: '10', sourceHandle: 'top', targetHandle: 'bottom', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -149,7 +149,7 @@ const initialElements: Elements = [ target: '20', sourceHandle: 'right', targetHandle: 'left', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -158,7 +158,7 @@ const initialElements: Elements = [ target: '30', sourceHandle: 'bottom', targetHandle: 'top', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, { @@ -167,7 +167,7 @@ const initialElements: Elements = [ target: '40', sourceHandle: 'left', targetHandle: 'right', - type: 'smoothstep', + type: 'default', arrowHeadType: ArrowHeadType.Arrow, }, ]; @@ -181,8 +181,7 @@ const getId = (): ElementId => `${id++}`; const UpdateNodeInternalsFlow = () => { const [elements, setElements] = useState(initialElements); - const onConnect = (params: Connection | Edge) => - setElements((els) => addEdge({ ...params, type: 'smoothstep' }, els)); + const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'default' }, els)); const { project } = useZoomPanHelper(); const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) => setElements((els) => updateEdge(oldEdge, newConnection, els)); From ab2391fd5151c38045eab7a04950ec7115ba78aa Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 Oct 2021 11:34:06 +0200 Subject: [PATCH 10/14] refactor(floating-edge-example): cleanup --- example/package-lock.json | 2 +- .../FloatingEdges/FloatingConnectionLine.tsx | 36 ++++ example/src/FloatingEdges/FloatingEdge.tsx | 35 ++++ example/src/FloatingEdges/index.tsx | 52 ++++++ example/src/FloatingEdges/utils.ts | 94 ++++++++++ example/src/NodeAsHandle/CustomEdge.tsx | 163 ------------------ example/src/NodeAsHandle/index.tsx | 83 --------- example/src/index.tsx | 6 +- package-lock.json | 3 + 9 files changed, 224 insertions(+), 250 deletions(-) create mode 100644 example/src/FloatingEdges/FloatingConnectionLine.tsx create mode 100644 example/src/FloatingEdges/FloatingEdge.tsx create mode 100644 example/src/FloatingEdges/index.tsx create mode 100644 example/src/FloatingEdges/utils.ts delete mode 100644 example/src/NodeAsHandle/CustomEdge.tsx delete mode 100644 example/src/NodeAsHandle/index.tsx diff --git a/example/package-lock.json b/example/package-lock.json index 3560909a..520b9afe 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -27,7 +27,7 @@ }, "..": { "name": "react-flow-renderer", - "version": "9.6.7", + "version": "9.6.8", "license": "MIT", "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/example/src/FloatingEdges/FloatingConnectionLine.tsx b/example/src/FloatingEdges/FloatingConnectionLine.tsx new file mode 100644 index 00000000..f45b16dc --- /dev/null +++ b/example/src/FloatingEdges/FloatingConnectionLine.tsx @@ -0,0 +1,36 @@ +import { FC } from 'react'; +import { getBezierPath, ConnectionLineComponentProps } from 'react-flow-renderer'; + +import { getArrow } from './utils'; + +const FloatingConnectionLine: FC = ({ + targetX, + targetY, + sourcePosition, + targetPosition, + sourceNode, +}) => { + if (!sourceNode) { + return null; + } + + const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } }; + const { sx, sy } = getArrow(sourceNode, targetNode); + const d = getBezierPath({ + sourceX: sx, + sourceY: sy, + sourcePosition, + targetPosition, + targetX, + targetY, + }); + + return ( + + + + + ); +}; + +export default FloatingConnectionLine; diff --git a/example/src/FloatingEdges/FloatingEdge.tsx b/example/src/FloatingEdges/FloatingEdge.tsx new file mode 100644 index 00000000..e39c318f --- /dev/null +++ b/example/src/FloatingEdges/FloatingEdge.tsx @@ -0,0 +1,35 @@ +import { FC, useMemo, CSSProperties } from 'react'; +import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer'; + +import { getArrow } from './utils'; + +const FloatingEdge: FC = ({ id, source, target, arrowHeadType, markerEndId, style }) => { + const nodes = useStoreState((state) => state.nodes); + const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); + + const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]); + const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]); + + if (!sourceNode || !targetNode) { + return null; + } + + const { sx, sy, tx, ty, sourcePos, targetPos } = getArrow(sourceNode, targetNode); + + const d = getBezierPath({ + sourceX: sx, + sourceY: sy, + sourcePosition: sourcePos, + targetPosition: targetPos, + targetX: tx, + targetY: ty, + }); + + return ( + + + + ); +}; + +export default FloatingEdge; diff --git a/example/src/FloatingEdges/index.tsx b/example/src/FloatingEdges/index.tsx new file mode 100644 index 00000000..04a5960b --- /dev/null +++ b/example/src/FloatingEdges/index.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; + +import ReactFlow, { + removeElements, + addEdge, + MiniMap, + Controls, + Background, + OnLoadParams, + EdgeTypesType, + Elements, + Connection, + Edge, + ArrowHeadType, +} from 'react-flow-renderer'; + +import FloatingEdge from './FloatingEdge'; +import FloatingConnectionLine from './FloatingConnectionLine'; +import { createElements } from './utils'; + +const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); + +const initialElements: Elements = createElements(); + +const edgeTypes: EdgeTypesType = { + floating: FloatingEdge, +}; + +const NodeAsHandleFlow = () => { + const [elements, setElements] = useState(initialElements); + + const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params: Connection | Edge) => + setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els)); + + return ( + + + + + + ); +}; + +export default NodeAsHandleFlow; diff --git a/example/src/FloatingEdges/utils.ts b/example/src/FloatingEdges/utils.ts new file mode 100644 index 00000000..352e7c3f --- /dev/null +++ b/example/src/FloatingEdges/utils.ts @@ -0,0 +1,94 @@ +import { Position, ArrowHeadType, Node } from 'react-flow-renderer'; + +function getNodeIntersection(source: Node, target: Node) { + // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a + const { width: sourceWidth, height: sourceHeight, position: sourcePosition } = source.__rf; + const targetPosition = target.__rf.position; + + const w = sourceWidth / 2; + const h = sourceHeight / 2; + + const x2 = sourcePosition.x + w; + const y2 = sourcePosition.y + h; + const x1 = targetPosition.x; + const y1 = targetPosition.y; + + const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h); + const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h); + const a = 1 / (Math.abs(xx1) + Math.abs(yy1)); + const xx3 = a * xx1; + const yy3 = a * yy1; + const x = w * (xx3 + yy3) + x2; + const y = h * (-xx3 + yy3) + y2; + + return [x, y]; +} + +function getEdgePosition(node: Node, x: number, y: number) { + const n = { ...node.__rf.position, ...node.__rf }; + const nx = Math.round(n.x); + const ny = Math.round(n.y); + const px = Math.round(x); + const py = Math.round(y); + + if (px <= nx + 1) { + return Position.Left; + } + if (px >= nx + n.width - 1) { + return Position.Right; + } + if (py <= ny + 1) { + return Position.Top; + } + if (py >= n.y + n.height - 1) { + return Position.Bottom; + } + + return Position.Top; +} + +export function getArrow(source: any, target: any) { + const [sx, sy] = getNodeIntersection(source, target); + const [tx, ty] = getNodeIntersection(target, source); + + const sourcePos = getEdgePosition(source, sx, sy); + const targetPos = getEdgePosition(target, tx, ty); + + return { + sx, + sy, + tx, + ty, + label: null, + sourcePos, + targetPos, + }; +} + +export function createElements() { + const elements = []; + const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; + + elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center }); + + for (let i = 0; i < 8; i++) { + const degrees = i * (360 / 8); + const radians = degrees * (Math.PI / 180); + const x = 250 * Math.cos(radians) + center.x; + const y = 250 * Math.sin(radians) + center.y; + + elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); + + if (i % 2 === 0) { + elements.push({ + id: `source-${i}`, + source: 'source', + target: `${i}`, + type: 'floating', + arrowHeadType: ArrowHeadType.Arrow, + }); + } + } + + return elements; +} diff --git a/example/src/NodeAsHandle/CustomEdge.tsx b/example/src/NodeAsHandle/CustomEdge.tsx deleted file mode 100644 index 988b1751..00000000 --- a/example/src/NodeAsHandle/CustomEdge.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { FC, useMemo } from 'react'; -import cc from 'classcat'; -import { - EdgeProps, - getMarkerEnd, - useStoreState, - Position, - getBezierPath, - ConnectionLineComponentProps, -} from 'react-flow-renderer'; - -function getNodeIntersection(source: any, target: any) { - // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a - const w = source.__rf.width / 2; - const h = source.__rf.height / 2; - - const x2 = source.__rf.position.x + w; - const y2 = source.__rf.position.y + h; - const x1 = target.__rf.position.x; - const y1 = target.__rf.position.y; - - const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h); - const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h); - const a = 1 / (Math.abs(xx1) + Math.abs(yy1)); - const xx3 = a * xx1; - const yy3 = a * yy1; - const x = w * (xx3 + yy3) + x2; - const y = h * (-xx3 + yy3) + y2; - - return [x, y]; -} - -function getEdgePosition(node: any, x: number, y: number) { - const n = { ...node.__rf.position, ...node.__rf }; - const nx = Math.round(n.x); - const ny = Math.round(n.y); - const px = Math.round(x); - const py = Math.round(y); - - if (px <= nx + 1) { - return Position.Left; - } - if (px >= nx + n.width - 1) { - return Position.Right; - } - if (py <= ny + 1) { - return Position.Top; - } - if (py >= n.y + n.height - 1) { - return Position.Bottom; - } - - return Position.Top; -} - -function getArrow(source: any, target: any) { - const [sx, sy] = getNodeIntersection(source, target); - const [tx, ty] = getNodeIntersection(target, source); - - const sourcePos = getEdgePosition(source, sx, sy); - const targetPos = getEdgePosition(target, tx, ty); - - return { - sx, - sy, - tx, - ty, - label: null, - sourcePos, - targetPos, - }; -} - -const CustomEdge: FC = ({ - id, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - data, - arrowHeadType, - markerEndId, - style, -}) => { - const nodes = useStoreState((state) => state.nodes); - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); - - const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]); - const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]); - - if (!sourceNode || !targetNode) { - return null; - } - - const { sx, sy, tx, ty, label, sourcePos, targetPos } = getArrow(sourceNode, targetNode); - - const d = getBezierPath({ - sourceX: sx, - sourceY: sy, - sourcePosition: sourcePos, - targetPosition: targetPos, - targetX: tx, - targetY: ty, - }); - - return ( - <> - - - - {label && ( - - - {label} - - - )} - - ); -}; - -export const ConnectionLine: FC = ({ - targetX, - targetY, - sourcePosition, - targetPosition, - sourceNode, -}) => { - if (!sourceNode) { - return null; - } - - const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } }; - const { sx, sy } = getArrow(sourceNode, targetNode); - const d = getBezierPath({ - sourceX: sx, - sourceY: sy, - sourcePosition, - targetPosition, - targetX, - targetY, - }); - - return ( - - - - - ); -}; - -export default CustomEdge; diff --git a/example/src/NodeAsHandle/index.tsx b/example/src/NodeAsHandle/index.tsx deleted file mode 100644 index 9e3879d3..00000000 --- a/example/src/NodeAsHandle/index.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useState } from 'react'; - -import ReactFlow, { - removeElements, - addEdge, - MiniMap, - Controls, - Background, - OnLoadParams, - EdgeTypesType, - Elements, - Connection, - Edge, - ArrowHeadType, -} from 'react-flow-renderer'; - -import CustomEdge, { ConnectionLine } from './CustomEdge'; - -const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); - -const getCustomEdge = (props: any) => ({ - type: 'custom', - arrowHeadType: ArrowHeadType.Arrow, - ...props, -}); - -function createElements() { - const elements = []; - const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; - - elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center }); - - for (let i = 0; i < 8; i++) { - const degrees = i * (360 / 8); - const radians = degrees * (Math.PI / 180); - const x = 250 * Math.cos(radians) + center.x; - const y = 250 * Math.sin(radians) + center.y; - - elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); - - if (i % 2 === 0) { - elements.push( - getCustomEdge({ - id: `source-${i}`, - source: 'source', - target: `${i}`, - }) - ); - } - } - - return elements; -} - -const initialElements: Elements = createElements(); - -const edgeTypes: EdgeTypesType = { - custom: CustomEdge, -}; - -const NodeAsHandleFlow = () => { - const [elements, setElements] = useState(initialElements); - - const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(getCustomEdge(params), els)); - - return ( - - - - - - ); -}; - -export default NodeAsHandleFlow; diff --git a/example/src/index.tsx b/example/src/index.tsx index 0f8a4b77..8371c0af 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -14,7 +14,7 @@ import Provider from './Provider'; import Hidden from './Hidden'; import EdgeTypes from './EdgeTypes'; import CustomConnectionLine from './CustomConnectionLine'; -import NodeAsHandle from './NodeAsHandle'; +import FloatingEdges from './FloatingEdges'; import NodeTypeChange from './NodeTypeChange'; import NodeTypesObjectChange from './NodeTypesObjectChange'; import UpdatableEdge from './UpdatableEdge'; @@ -81,8 +81,8 @@ const routes = [ component: CustomConnectionLine, }, { - path: '/node-as-handle', - component: NodeAsHandle, + path: '/floating-edges', + component: FloatingEdges, }, { path: '/nodetype-change', diff --git a/package-lock.json b/package-lock.json index ace876fc..66ed96b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,9 @@ "start-server-and-test": "^1.14.0", "typescript": "^4.4.3" }, + "engines": { + "node": ">=12" + }, "peerDependencies": { "react": "16 || 17", "react-dom": "16 || 17" From 0048d20b4681e564ac05f968dc33b187c96a99ab Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 14 Oct 2021 09:36:07 +0000 Subject: [PATCH 11/14] chore(deps-dev): bump postcss from 8.3.8 to 8.3.9 Bumps [postcss](https://github.com/postcss/postcss) from 8.3.8 to 8.3.9. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.3.8...8.3.9) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 22 +++++++++++----------- package.json | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index eb089ae4..adc947c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "autoprefixer": "^10.3.7", "babel-preset-react-app": "^10.0.0", "cypress": "^8.5.0", - "postcss": "^8.3.8", + "postcss": "^8.3.9", "postcss-cli": "^9.0.1", "postcss-nested": "^5.0.6", "prettier": "2.4.1", @@ -8077,13 +8077,13 @@ } }, "node_modules/postcss": { - "version": "8.3.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz", - "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==", + "version": "8.3.9", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz", + "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==", "dev": true, "dependencies": { - "nanocolors": "^0.2.2", - "nanoid": "^3.1.25", + "nanoid": "^3.1.28", + "picocolors": "^0.2.1", "source-map-js": "^0.6.2" }, "engines": { @@ -17246,13 +17246,13 @@ } }, "postcss": { - "version": "8.3.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz", - "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==", + "version": "8.3.9", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.9.tgz", + "integrity": "sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw==", "dev": true, "requires": { - "nanocolors": "^0.2.2", - "nanoid": "^3.1.25", + "nanoid": "^3.1.28", + "picocolors": "^0.2.1", "source-map-js": "^0.6.2" } }, diff --git a/package.json b/package.json index d186f620..47f526d0 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "autoprefixer": "^10.3.7", "babel-preset-react-app": "^10.0.0", "cypress": "^8.5.0", - "postcss": "^8.3.8", + "postcss": "^8.3.9", "postcss-cli": "^9.0.1", "postcss-nested": "^5.0.6", "prettier": "2.4.1", From 95cb060c49438d5b167cf5e59cb48ba9d40a4ec4 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 14 Oct 2021 09:36:10 +0000 Subject: [PATCH 12/14] chore(deps-dev): bump @babel/plugin-transform-runtime Bumps [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-runtime) from 7.15.0 to 7.15.8. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.15.8/packages/babel-plugin-transform-runtime) --- updated-dependencies: - dependency-name: "@babel/plugin-transform-runtime" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 22 +++++++++++----------- package.json | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index eb089ae4..ff317a2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@babel/core": "^7.15.8", - "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/plugin-transform-runtime": "^7.15.8", "@babel/preset-env": "^7.15.8", "@babel/preset-react": "^7.14.5", "@rollup/plugin-babel": "^5.3.0", @@ -1512,15 +1512,15 @@ } }, "node_modules/@babel/plugin-transform-runtime": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.0.tgz", - "integrity": "sha512-sfHYkLGjhzWTq6xsuQ01oEsUYjkHRux9fW1iUA68dC7Qd8BS1Unq4aZ8itmQp95zUzIcyR2EbNMTzAicFj+guw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.8.tgz", + "integrity": "sha512-+6zsde91jMzzvkzuEA3k63zCw+tm/GvuuabkpisgbDMTPQsIMHllE3XczJFFtEHLjjhKQFZmGQVRdELetlWpVw==", "dev": true, "dependencies": { - "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-module-imports": "^7.15.4", "@babel/helper-plugin-utils": "^7.14.5", "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", "babel-plugin-polyfill-regenerator": "^0.2.2", "semver": "^6.3.0" }, @@ -12209,15 +12209,15 @@ } }, "@babel/plugin-transform-runtime": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.0.tgz", - "integrity": "sha512-sfHYkLGjhzWTq6xsuQ01oEsUYjkHRux9fW1iUA68dC7Qd8BS1Unq4aZ8itmQp95zUzIcyR2EbNMTzAicFj+guw==", + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.8.tgz", + "integrity": "sha512-+6zsde91jMzzvkzuEA3k63zCw+tm/GvuuabkpisgbDMTPQsIMHllE3XczJFFtEHLjjhKQFZmGQVRdELetlWpVw==", "dev": true, "requires": { - "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-module-imports": "^7.15.4", "@babel/helper-plugin-utils": "^7.14.5", "babel-plugin-polyfill-corejs2": "^0.2.2", - "babel-plugin-polyfill-corejs3": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.5", "babel-plugin-polyfill-regenerator": "^0.2.2", "semver": "^6.3.0" } diff --git a/package.json b/package.json index d186f620..2c98d3c3 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ }, "devDependencies": { "@babel/core": "^7.15.8", - "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/plugin-transform-runtime": "^7.15.8", "@babel/preset-env": "^7.15.8", "@babel/preset-react": "^7.14.5", "@rollup/plugin-babel": "^5.3.0", From b9b597b1ac770308f5ea6917a539f0b9a157c42a Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 Oct 2021 11:41:10 +0200 Subject: [PATCH 13/14] chore: release v9.6.9 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 055e2385..dee85300 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "9.6.8", + "version": "9.6.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "9.6.8", + "version": "9.6.9", "license": "MIT", "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/package.json b/package.json index 60c091d4..d4f573b4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "9.6.8", + "version": "9.6.9", "engines": { "node": ">=12" }, From ceb96201deef186718e9e79f0afc80261aabe9f0 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 Oct 2021 12:29:05 +0200 Subject: [PATCH 14/14] refactor(floating-edges-example): comments and cleanup --- .../FloatingEdges/FloatingConnectionLine.tsx | 12 ++- example/src/FloatingEdges/FloatingEdge.tsx | 4 +- example/src/FloatingEdges/index.tsx | 29 +++---- example/src/FloatingEdges/style.css | 9 +++ example/src/FloatingEdges/utils.ts | 75 ++++++++++--------- 5 files changed, 74 insertions(+), 55 deletions(-) create mode 100644 example/src/FloatingEdges/style.css diff --git a/example/src/FloatingEdges/FloatingConnectionLine.tsx b/example/src/FloatingEdges/FloatingConnectionLine.tsx index f45b16dc..987af43d 100644 --- a/example/src/FloatingEdges/FloatingConnectionLine.tsx +++ b/example/src/FloatingEdges/FloatingConnectionLine.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; -import { getBezierPath, ConnectionLineComponentProps } from 'react-flow-renderer'; +import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer'; -import { getArrow } from './utils'; +import { getEdgeParams } from './utils'; const FloatingConnectionLine: FC = ({ targetX, @@ -14,8 +14,12 @@ const FloatingConnectionLine: FC = ({ return null; } - const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } }; - const { sx, sy } = getArrow(sourceNode, targetNode); + const targetNode = { + id: 'connection-target', + __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } }, + } as Node; + + const { sx, sy } = getEdgeParams(sourceNode, targetNode); const d = getBezierPath({ sourceX: sx, sourceY: sy, diff --git a/example/src/FloatingEdges/FloatingEdge.tsx b/example/src/FloatingEdges/FloatingEdge.tsx index e39c318f..60ee4b93 100644 --- a/example/src/FloatingEdges/FloatingEdge.tsx +++ b/example/src/FloatingEdges/FloatingEdge.tsx @@ -1,7 +1,7 @@ import { FC, useMemo, CSSProperties } from 'react'; import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer'; -import { getArrow } from './utils'; +import { getEdgeParams } from './utils'; const FloatingEdge: FC = ({ id, source, target, arrowHeadType, markerEndId, style }) => { const nodes = useStoreState((state) => state.nodes); @@ -14,7 +14,7 @@ const FloatingEdge: FC = ({ id, source, target, arrowHeadType, marker return null; } - const { sx, sy, tx, ty, sourcePos, targetPos } = getArrow(sourceNode, targetNode); + const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode); const d = getBezierPath({ sourceX: sx, diff --git a/example/src/FloatingEdges/index.tsx b/example/src/FloatingEdges/index.tsx index 04a5960b..7bdfc7a2 100644 --- a/example/src/FloatingEdges/index.tsx +++ b/example/src/FloatingEdges/index.tsx @@ -3,8 +3,6 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, - MiniMap, - Controls, Background, OnLoadParams, EdgeTypesType, @@ -14,6 +12,8 @@ import ReactFlow, { ArrowHeadType, } from 'react-flow-renderer'; +import './style.css'; + import FloatingEdge from './FloatingEdge'; import FloatingConnectionLine from './FloatingConnectionLine'; import { createElements } from './utils'; @@ -30,22 +30,23 @@ const NodeAsHandleFlow = () => { const [elements, setElements] = useState(initialElements); const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els)); return ( - - - - - +
+ + + +
); }; diff --git a/example/src/FloatingEdges/style.css b/example/src/FloatingEdges/style.css new file mode 100644 index 00000000..052fedb8 --- /dev/null +++ b/example/src/FloatingEdges/style.css @@ -0,0 +1,9 @@ +.floatingedges { + flex-direction: column; + display: flex; + height: 100%; +} + +.floatingedges .react-flow__handle { + opacity: 0; +} diff --git a/example/src/FloatingEdges/utils.ts b/example/src/FloatingEdges/utils.ts index 352e7c3f..c8962b72 100644 --- a/example/src/FloatingEdges/utils.ts +++ b/example/src/FloatingEdges/utils.ts @@ -1,17 +1,23 @@ -import { Position, ArrowHeadType, Node } from 'react-flow-renderer'; +import { Position, ArrowHeadType, Node, XYPosition } from 'react-flow-renderer'; -function getNodeIntersection(source: Node, target: Node) { +// this helper function returns the intersection point +// of the line between the center of the intersectionNode and the target node +function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition { // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a - const { width: sourceWidth, height: sourceHeight, position: sourcePosition } = source.__rf; - const targetPosition = target.__rf.position; + const { + width: intersectionNodeWidth, + height: intersectionNodeHeight, + position: intersectionNodePosition, + } = intersectionNode.__rf; + const targetPosition = targetNode.__rf.position; - const w = sourceWidth / 2; - const h = sourceHeight / 2; + const w = intersectionNodeWidth / 2; + const h = intersectionNodeHeight / 2; - const x2 = sourcePosition.x + w; - const y2 = sourcePosition.y + h; - const x1 = targetPosition.x; - const y1 = targetPosition.y; + const x2 = intersectionNodePosition.x + w; + const y2 = intersectionNodePosition.y + h; + const x1 = targetPosition.x + w; + const y1 = targetPosition.y + h; const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h); const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h); @@ -21,15 +27,16 @@ function getNodeIntersection(source: Node, target: Node) { const x = w * (xx3 + yy3) + x2; const y = h * (-xx3 + yy3) + y2; - return [x, y]; + return { x, y }; } -function getEdgePosition(node: Node, x: number, y: number) { +// returns the position (top,right,bottom or right) passed node compared to the intersection point +function getEdgePosition(node: Node, intersectionPoint: XYPosition) { const n = { ...node.__rf.position, ...node.__rf }; const nx = Math.round(n.x); const ny = Math.round(n.y); - const px = Math.round(x); - const py = Math.round(y); + const px = Math.round(intersectionPoint.x); + const py = Math.round(intersectionPoint.y); if (px <= nx + 1) { return Position.Left; @@ -47,19 +54,19 @@ function getEdgePosition(node: Node, x: number, y: number) { return Position.Top; } -export function getArrow(source: any, target: any) { - const [sx, sy] = getNodeIntersection(source, target); - const [tx, ty] = getNodeIntersection(target, source); +// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge +export function getEdgeParams(source: Node, target: Node) { + const sourceIntersectionPoint = getNodeIntersection(source, target); + const targetIntersectionPoint = getNodeIntersection(target, source); - const sourcePos = getEdgePosition(source, sx, sy); - const targetPos = getEdgePosition(target, tx, ty); + const sourcePos = getEdgePosition(source, sourceIntersectionPoint); + const targetPos = getEdgePosition(target, targetIntersectionPoint); return { - sx, - sy, - tx, - ty, - label: null, + sx: sourceIntersectionPoint.x, + sy: sourceIntersectionPoint.y, + tx: targetIntersectionPoint.x, + ty: targetIntersectionPoint.y, sourcePos, targetPos, }; @@ -69,7 +76,7 @@ export function createElements() { const elements = []; const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; - elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center }); + elements.push({ id: 'target', data: { label: 'Target' }, position: center }); for (let i = 0; i < 8; i++) { const degrees = i * (360 / 8); @@ -77,17 +84,15 @@ export function createElements() { const x = 250 * Math.cos(radians) + center.x; const y = 250 * Math.sin(radians) + center.y; - elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } }); + elements.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } }); - if (i % 2 === 0) { - elements.push({ - id: `source-${i}`, - source: 'source', - target: `${i}`, - type: 'floating', - arrowHeadType: ArrowHeadType.Arrow, - }); - } + elements.push({ + id: `edge-${i}`, + target: 'target', + source: `${i}`, + type: 'floating', + arrowHeadType: ArrowHeadType.Arrow, + }); } return elements;