From ae621d084ca33028b051d2ecd12e5458a1906108 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 6 Oct 2021 10:30:08 +0200 Subject: [PATCH 01/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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; From d3b1148bcab61d7bf925fa9b82b5a1b73d43b264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Thu, 14 Oct 2021 17:53:50 +0200 Subject: [PATCH 15/18] feat(markers): implement more generic api for markerEnd and markerStart handling --- example/src/Edges/CustomEdge.tsx | 7 +- example/src/Edges/CustomEdge2.tsx | 7 +- example/src/Edges/index.tsx | 15 ++- example/src/FloatingEdges/FloatingEdge.tsx | 7 +- example/src/FloatingEdges/index.tsx | 4 +- example/src/Overview/index.tsx | 3 +- example/src/Undirectional/index.tsx | 13 -- src/components/Edges/BezierEdge.tsx | 16 ++- src/components/Edges/SmoothStepEdge.tsx | 20 +-- src/components/Edges/StraightEdge.tsx | 7 +- src/components/Edges/wrapEdge.tsx | 24 +++- .../EdgeRenderer/MarkerDefinitions.tsx | 126 ++++++++++++------ src/container/EdgeRenderer/index.tsx | 11 +- src/container/FlowRenderer/index.tsx | 1 + src/container/GraphView/index.tsx | 8 +- src/container/ReactFlow/index.tsx | 9 +- src/types/index.ts | 18 ++- src/utils/graph.ts | 16 +++ 18 files changed, 192 insertions(+), 120 deletions(-) diff --git a/example/src/Edges/CustomEdge.tsx b/example/src/Edges/CustomEdge.tsx index f72ff831..9a3c4230 100644 --- a/example/src/Edges/CustomEdge.tsx +++ b/example/src/Edges/CustomEdge.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer'; +import { EdgeProps, getBezierPath } from 'react-flow-renderer'; const CustomEdge: FC = ({ id, @@ -10,15 +10,12 @@ const CustomEdge: FC = ({ sourcePosition, targetPosition, data, - arrowHeadType, - markerEndId, }) => { const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }); - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); return ( <> - + {data.text} diff --git a/example/src/Edges/CustomEdge2.tsx b/example/src/Edges/CustomEdge2.tsx index 361b7f92..63b010a9 100644 --- a/example/src/Edges/CustomEdge2.tsx +++ b/example/src/Edges/CustomEdge2.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer'; +import { EdgeProps, getBezierPath, EdgeText, getEdgeCenter } from 'react-flow-renderer'; const CustomEdge: FC = ({ id, @@ -10,11 +10,8 @@ const CustomEdge: FC = ({ sourcePosition, targetPosition, data, - arrowHeadType, - markerEndId, }) => { const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }); - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); const [centerX, centerY] = getEdgeCenter({ sourceX, sourceY, @@ -24,7 +21,7 @@ const CustomEdge: FC = ({ return ( <> - + ), labelStyle: { fill: 'red', fontWeight: 700 }, - arrowHeadType: ArrowHeadType.Arrow, + style: { stroke: '#ffcc00' }, + markerEnd: { + type: ArrowHeadType.ArrowClosed, + }, + markerStart: { + type: ArrowHeadType.Arrow, + color: '#FFCC00', + }, }, { id: 'e5-7', @@ -64,7 +71,10 @@ const initialElements: Elements = [ labelBgPadding: [8, 4], labelBgBorderRadius: 4, labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 }, - arrowHeadType: ArrowHeadType.ArrowClosed, + markerEnd: { + type: ArrowHeadType.ArrowClosed, + color: '#FFCC00', + }, }, { id: 'e5-8', @@ -72,7 +82,6 @@ const initialElements: Elements = [ target: '8', type: 'custom', data: { text: 'custom edge' }, - arrowHeadType: ArrowHeadType.ArrowClosed, }, { id: 'e5-9', diff --git a/example/src/FloatingEdges/FloatingEdge.tsx b/example/src/FloatingEdges/FloatingEdge.tsx index 60ee4b93..b03241d1 100644 --- a/example/src/FloatingEdges/FloatingEdge.tsx +++ b/example/src/FloatingEdges/FloatingEdge.tsx @@ -1,11 +1,10 @@ import { FC, useMemo, CSSProperties } from 'react'; -import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer'; +import { EdgeProps, useStoreState, getBezierPath } from 'react-flow-renderer'; import { getEdgeParams } from './utils'; -const FloatingEdge: FC = ({ id, source, target, arrowHeadType, markerEndId, style }) => { +const FloatingEdge: FC = ({ id, source, target, 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]); @@ -27,7 +26,7 @@ const FloatingEdge: FC = ({ id, source, target, arrowHeadType, marker return ( - + ); }; diff --git a/example/src/FloatingEdges/index.tsx b/example/src/FloatingEdges/index.tsx index 7bdfc7a2..f1902515 100644 --- a/example/src/FloatingEdges/index.tsx +++ b/example/src/FloatingEdges/index.tsx @@ -9,7 +9,6 @@ import ReactFlow, { Elements, Connection, Edge, - ArrowHeadType, } from 'react-flow-renderer'; import './style.css'; @@ -31,8 +30,7 @@ const NodeAsHandleFlow = () => { const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - const onConnect = (params: Connection | Edge) => - setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els)); + const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'floating' }, els)); return (
diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx index ee13f916..17e0c9b5 100644 --- a/example/src/Overview/index.tsx +++ b/example/src/Overview/index.tsx @@ -13,7 +13,6 @@ import ReactFlow, { OnLoadParams, FlowTransform, SnapGrid, - ArrowHeadType, Connection, Edge, } from 'react-flow-renderer'; @@ -125,7 +124,7 @@ const initialElements: Elements = [ { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' }, { id: 'e1-3', source: '1', target: '3' }, { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' }, - { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' }, + { id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' }, { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' }, { id: 'e5-7', diff --git a/example/src/Undirectional/index.tsx b/example/src/Undirectional/index.tsx index 9f51296a..7687f4b0 100644 --- a/example/src/Undirectional/index.tsx +++ b/example/src/Undirectional/index.tsx @@ -12,7 +12,6 @@ import ReactFlow, { ConnectionLineType, ConnectionMode, updateEdge, - ArrowHeadType, } from 'react-flow-renderer'; import CustomNode from './CustomNode'; @@ -69,7 +68,6 @@ const initialElements: Elements = [ sourceHandle: 'left', targetHandle: 'bottom', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-1b', @@ -78,7 +76,6 @@ const initialElements: Elements = [ sourceHandle: 'top', targetHandle: 'right', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-2a', @@ -87,7 +84,6 @@ const initialElements: Elements = [ sourceHandle: 'top', targetHandle: 'left', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-2b', @@ -96,7 +92,6 @@ const initialElements: Elements = [ sourceHandle: 'right', targetHandle: 'bottom', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-3a', @@ -105,7 +100,6 @@ const initialElements: Elements = [ sourceHandle: 'right', targetHandle: 'top', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-3b', @@ -114,7 +108,6 @@ const initialElements: Elements = [ sourceHandle: 'bottom', targetHandle: 'left', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-4a', @@ -123,7 +116,6 @@ const initialElements: Elements = [ sourceHandle: 'bottom', targetHandle: 'right', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-4b', @@ -132,7 +124,6 @@ const initialElements: Elements = [ sourceHandle: 'left', targetHandle: 'top', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-10', @@ -141,7 +132,6 @@ const initialElements: Elements = [ sourceHandle: 'top', targetHandle: 'bottom', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-20', @@ -150,7 +140,6 @@ const initialElements: Elements = [ sourceHandle: 'right', targetHandle: 'left', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-30', @@ -159,7 +148,6 @@ const initialElements: Elements = [ sourceHandle: 'bottom', targetHandle: 'top', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, { id: 'e0-40', @@ -168,7 +156,6 @@ const initialElements: Elements = [ sourceHandle: 'left', targetHandle: 'right', type: 'default', - arrowHeadType: ArrowHeadType.Arrow, }, ]; diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index b4c94197..2313767f 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -2,7 +2,7 @@ import React, { memo } from 'react'; import EdgeText from './EdgeText'; -import { getMarkerEnd, getCenter } from './utils'; +import { getCenter } from './utils'; import { EdgeProps, Position } from '../../types'; interface GetBezierPathParams { @@ -60,8 +60,8 @@ export default memo( labelBgPadding, labelBgBorderRadius, style, - arrowHeadType, - markerEndId, + markerEnd, + markerStart, }: EdgeProps) => { const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }); const path = getBezierPath({ @@ -86,11 +86,15 @@ export default memo( /> ) : null; - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); - return ( <> - + {text} ); diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx index 0c42410a..3bb087dd 100644 --- a/src/components/Edges/SmoothStepEdge.tsx +++ b/src/components/Edges/SmoothStepEdge.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react'; import EdgeText from './EdgeText'; -import { getMarkerEnd, getCenter } from './utils'; +import { getCenter } from './utils'; import { EdgeSmoothStepProps, Position } from '../../types'; // These are some helper methods for drawing the round corners @@ -73,8 +73,8 @@ export function getSmoothStepPath({ sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize); secondCornerPath = sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize); - } else if (sourcePosition === Position.Right && targetPosition === Position.Left){ - // and sourceX > targetX + } else if (sourcePosition === Position.Right && targetPosition === Position.Left) { + // and sourceX > targetX firstCornerPath = sourceY <= targetY ? leftTopCorner(cX, sourceY, cornerSize) : leftBottomCorner(cX, sourceY, cornerSize); secondCornerPath = @@ -126,8 +126,8 @@ export default memo( style, sourcePosition = Position.Bottom, targetPosition = Position.Top, - arrowHeadType, - markerEndId, + markerEnd, + markerStart, borderRadius = 5, }: EdgeSmoothStepProps) => { const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }); @@ -142,8 +142,6 @@ export default memo( borderRadius, }); - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); - const text = label ? ( - + {text} ); diff --git a/src/components/Edges/StraightEdge.tsx b/src/components/Edges/StraightEdge.tsx index 1bd3dedf..b7f0fac1 100644 --- a/src/components/Edges/StraightEdge.tsx +++ b/src/components/Edges/StraightEdge.tsx @@ -1,7 +1,6 @@ import React, { memo } from 'react'; import EdgeText from './EdgeText'; -import { getMarkerEnd } from './utils'; import { EdgeProps } from '../../types'; export default memo( @@ -17,15 +16,14 @@ export default memo( labelBgPadding, labelBgBorderRadius, style, - arrowHeadType, - markerEndId, + markerEnd, + markerStart, }: EdgeProps) => { const yOffset = Math.abs(targetY - sourceY) / 2; const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset; const xOffset = Math.abs(targetX - sourceX) / 2; const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset; - const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); const text = label ? ( {text} diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 60384e74..4e191cf7 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -5,6 +5,7 @@ import { useStoreActions, useStoreState } from '../../store/hooks'; import { Edge, EdgeProps, WrapEdgeProps } from '../../types'; import { onMouseDown } from '../../components/Handle/handler'; import { EdgeAnchor } from './EdgeAnchor'; +import { getMarkerId } from '../../utils/graph'; export default (EdgeComponent: ComponentType) => { const EdgeWrapper = ({ @@ -23,7 +24,6 @@ export default (EdgeComponent: ComponentType) => { labelBgPadding, labelBgBorderRadius, style, - arrowHeadType, source, target, sourceX, @@ -33,7 +33,6 @@ export default (EdgeComponent: ComponentType) => { sourcePosition, targetPosition, elementsSelectable, - markerEndId, isHidden, sourceHandleId, targetHandleId, @@ -46,6 +45,8 @@ export default (EdgeComponent: ComponentType) => { edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, + markerEnd, + markerStart, }: WrapEdgeProps): JSX.Element | null => { const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements); const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId); @@ -160,7 +161,18 @@ export default (EdgeComponent: ComponentType) => { _onEdgeUpdate ); }, - [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement, onConnectEdge] + [ + id, + source, + target, + type, + sourceHandleId, + targetHandleId, + setConnectionNodeId, + setPosition, + edgeElement, + onConnectEdge, + ] ); const onEdgeUpdaterSourceMouseDown = useCallback( @@ -179,6 +191,8 @@ export default (EdgeComponent: ComponentType) => { const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]); const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]); + const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]); + const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]); if (isHidden) { return null; @@ -208,16 +222,16 @@ export default (EdgeComponent: ComponentType) => { labelBgBorderRadius={labelBgBorderRadius} data={data} style={style} - arrowHeadType={arrowHeadType} sourceX={sourceX} sourceY={sourceY} targetX={targetX} targetY={targetY} sourcePosition={sourcePosition} targetPosition={targetPosition} - markerEndId={markerEndId} sourceHandleId={sourceHandleId} targetHandleId={targetHandleId} + markerStart={markerStartUrl} + markerEnd={markerEndUrl} /> {handleEdgeUpdate && ( ( - - {children} - -); - -interface MarkerDefinitionsProps { +interface SymbolProps { color: string; } -const MarkerDefinitions = ({ color }: MarkerDefinitionsProps) => { +interface EdgeMarkerExtended extends EdgeMarker { + id: string; +} + +const ArrowSymbol = ({ color }: SymbolProps) => { + return ( + + ); +}; + +const ArrowClosedSymbol = ({ color }: SymbolProps) => { + return ( + + ); +}; + +const markerSymbols = { + [ArrowHeadType.Arrow]: ArrowSymbol, + [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol, +}; + +const Marker = ({ id, type, color }: MarkerProps) => { + const Symbol = markerSymbols[type]; + + return ( + + + + ); +}; + +const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => { + const edges = useStoreState((state) => state.edges); + const markers = useMemo(() => { + const ids: string[] = []; + + return edges.reduce((markers, edge) => { + [edge.markerStart, edge.markerEnd].forEach((marker) => { + if (marker && typeof marker === 'object') { + const markerId = getMarkerId(marker); + if (!ids.includes(markerId)) { + markers.push({ id: markerId, ...marker }); + ids.push(markerId); + } + } + }); + return markers.sort((a, b) => a.id.localeCompare(b.id)); + }, []); + }, [edges]); + return ( - - - - - - + {markers.map((marker: EdgeMarkerExtended) => ( + + ))} ); }; diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 1fd7f766..eaea06ad 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -26,8 +26,7 @@ interface EdgeRendererProps { connectionMode?: ConnectionMode; onElementClick?: (event: React.MouseEvent, element: Node | Edge) => void; onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void; - arrowHeadColor: string; - markerEndId?: string; + defaultMarkerColor: string; onlyRenderVisibleElements: boolean; onEdgeUpdate?: OnEdgeUpdateFunc; onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void; @@ -155,7 +154,8 @@ const Edge = ({ labelBgPadding={edge.labelBgPadding} labelBgBorderRadius={edge.labelBgBorderRadius} style={edge.style} - arrowHeadType={edge.arrowHeadType} + markerEnd={edge.markerEnd} + markerStart={edge.markerStart} source={edge.source} target={edge.target} sourceHandleId={sourceHandleId} @@ -167,7 +167,6 @@ const Edge = ({ sourcePosition={sourcePosition} targetPosition={targetPosition} elementsSelectable={elementsSelectable} - markerEndId={props.markerEndId} isHidden={edge.isHidden} onConnectEdge={onConnectEdge} handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'} @@ -203,7 +202,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { const { connectionLineType, - arrowHeadColor, + defaultMarkerColor, connectionLineStyle, connectionLineComponent, onlyRenderVisibleElements, @@ -213,7 +212,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { return ( - + {edges.map((edge: Edge) => ( { children: ReactNode; } diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index e002f366..51663eb5 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -23,7 +23,7 @@ export interface GraphViewProps extends Omit, 'on translateExtent?: TranslateExtent; preventScrolling?: boolean; nodeExtent?: NodeExtent; - arrowHeadColor?: string; - markerEndId?: string; + defaultMarkerColor?: string; zoomOnScroll?: boolean; zoomOnPinch?: boolean; panOnScroll?: boolean; @@ -184,8 +183,7 @@ const ReactFlow = forwardRef( translateExtent, preventScrolling = true, nodeExtent, - arrowHeadColor = '#b1b1b7', - markerEndId, + defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, @@ -262,8 +260,7 @@ const ReactFlow = forwardRef( translateExtent={translateExtent} preventScrolling={preventScrolling} nodeExtent={nodeExtent} - arrowHeadColor={arrowHeadColor} - markerEndId={markerEndId} + defaultMarkerColor={defaultMarkerColor} zoomOnScroll={zoomOnScroll} zoomOnPinch={zoomOnPinch} zoomOnDoubleClick={zoomOnDoubleClick} diff --git a/src/types/index.ts b/src/types/index.ts index 754e10e2..97938453 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -57,6 +57,13 @@ export enum ArrowHeadType { ArrowClosed = 'arrowclosed', } +export interface EdgeMarker { + type: ArrowHeadType; + color?: string; +} + +export type EdgeMarkerType = string | EdgeMarker; + export interface Edge { id: ElementId; type?: string; @@ -72,10 +79,11 @@ export interface Edge { labelBgBorderRadius?: number; style?: CSSProperties; animated?: boolean; - arrowHeadType?: ArrowHeadType; isHidden?: boolean; data?: T; className?: string; + markerStart?: EdgeMarkerType; + markerEnd?: EdgeMarkerType; } export enum BackgroundVariant { @@ -111,7 +119,6 @@ export interface WrapEdgeProps { labelBgPadding?: [number, number]; labelBgBorderRadius?: number; style?: CSSProperties; - arrowHeadType?: ArrowHeadType; source: ElementId; target: ElementId; sourceHandleId: ElementId | null; @@ -123,7 +130,6 @@ export interface WrapEdgeProps { sourcePosition: Position; targetPosition: Position; elementsSelectable?: boolean; - markerEndId?: string; isHidden?: boolean; handleEdgeUpdate: boolean; onConnectEdge: OnConnectFunc; @@ -134,6 +140,8 @@ export interface WrapEdgeProps { edgeUpdaterRadius?: number; onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + markerStart?: EdgeMarkerType; + markerEnd?: EdgeMarkerType; } export interface EdgeProps { @@ -155,11 +163,11 @@ export interface EdgeProps { labelBgPadding?: [number, number]; labelBgBorderRadius?: number; style?: CSSProperties; - arrowHeadType?: ArrowHeadType; - markerEndId?: string; data?: T; sourceHandleId?: ElementId | null; targetHandleId?: ElementId | null; + markerStart?: string; + markerEnd?: string; } export interface EdgeSmoothStepProps extends EdgeProps { borderRadius?: number; diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 73b6c68b..2c6f4309 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -15,6 +15,7 @@ import { FlowExportObject, ReactFlowState, NodeExtent, + EdgeMarkerType, } from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge => @@ -57,6 +58,21 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements): const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId => `reactflow__edge-${source}${sourceHandle}-${target}${targetHandle}`; +export const getMarkerId = (marker: EdgeMarkerType | undefined): string => { + if (typeof marker === 'undefined') { + return ''; + } + + if (typeof marker === 'string') { + return marker; + } + + return Object.keys(marker) + .sort() + .map((key: string) => `${key}=${(marker as any)[key]}`) + .join('&'); +}; + const connectionExists = (edge: Edge, elements: Elements) => { return elements.some( (el) => From 1b73c8fff5857523d8940a3c36c87172762116d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Fri, 15 Oct 2021 11:51:54 +0200 Subject: [PATCH 16/18] feat(markers): add more properties for custom markers --- example/src/Edges/index.tsx | 8 ++- .../EdgeRenderer/MarkerDefinitions.tsx | 52 ++++++++++--------- src/types/index.ts | 4 ++ 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/example/src/Edges/index.tsx b/example/src/Edges/index.tsx index 9676da7e..c46cca68 100644 --- a/example/src/Edges/index.tsx +++ b/example/src/Edges/index.tsx @@ -56,7 +56,12 @@ const initialElements: Elements = [ labelStyle: { fill: 'red', fontWeight: 700 }, style: { stroke: '#ffcc00' }, markerEnd: { - type: ArrowHeadType.ArrowClosed, + type: ArrowHeadType.Arrow, + color: '#FFCC00', + units: 'userSpaceOnUse', + width: 20, + height: 20, + strokeWidth: 2, }, markerStart: { type: ArrowHeadType.Arrow, @@ -73,7 +78,6 @@ const initialElements: Elements = [ labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 }, markerEnd: { type: ArrowHeadType.ArrowClosed, - color: '#FFCC00', }, }, { diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx index f4dc34a6..9645ea0e 100644 --- a/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -2,43 +2,35 @@ import React, { useMemo } from 'react'; import { useStoreState } from '../../store/hooks'; import { EdgeMarker, ArrowHeadType } from '../../types'; import { getMarkerId } from '../../utils/graph'; -interface MarkerProps { +interface MarkerProps extends EdgeMarker { id: string; - type: ArrowHeadType; - color: string; } interface MarkerDefinitionsProps { defaultColor: string; } -interface SymbolProps { - color: string; -} +type SymbolProps = Omit; -interface EdgeMarkerExtended extends EdgeMarker { - id: string; -} - -const ArrowSymbol = ({ color }: SymbolProps) => { +const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { return ( ); }; -const ArrowClosedSymbol = ({ color }: SymbolProps) => { +const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { return ( @@ -50,21 +42,22 @@ const markerSymbols = { [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol, }; -const Marker = ({ id, type, color }: MarkerProps) => { +const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeWidth', strokeWidth }: MarkerProps) => { const Symbol = markerSymbols[type]; return ( - + ); }; @@ -74,24 +67,33 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => { const markers = useMemo(() => { const ids: string[] = []; - return edges.reduce((markers, edge) => { + return edges.reduce((markers, edge) => { [edge.markerStart, edge.markerEnd].forEach((marker) => { if (marker && typeof marker === 'object') { const markerId = getMarkerId(marker); if (!ids.includes(markerId)) { - markers.push({ id: markerId, ...marker }); + markers.push({ id: markerId, color: marker.color || defaultColor, ...marker }); ids.push(markerId); } } }); return markers.sort((a, b) => a.id.localeCompare(b.id)); }, []); - }, [edges]); + }, [edges, defaultColor]); return ( - {markers.map((marker: EdgeMarkerExtended) => ( - + {markers.map((marker: MarkerProps) => ( + ))} ); diff --git a/src/types/index.ts b/src/types/index.ts index 97938453..2a660572 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -60,6 +60,10 @@ export enum ArrowHeadType { export interface EdgeMarker { type: ArrowHeadType; color?: string; + width?: number; + height?: number; + units?: 'userSpaceOnUse' | 'strokeWidth'; + strokeWidth?: number; } export type EdgeMarkerType = string | EdgeMarker; From b08809d8108d34ed214d788c61dfce7550ab7c50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Fri, 15 Oct 2021 13:07:02 +0200 Subject: [PATCH 17/18] feat(markers): add option to control orientation of markers --- .release-it.json | 2 +- example/src/Edges/index.tsx | 58 ++++++++++--------- package-lock.json | 4 +- package.json | 4 +- .../EdgeRenderer/MarkerDefinitions.tsx | 14 ++++- src/types/index.ts | 3 +- 6 files changed, 50 insertions(+), 35 deletions(-) diff --git a/.release-it.json b/.release-it.json index 93f9ec7b..2521416c 100644 --- a/.release-it.json +++ b/.release-it.json @@ -7,6 +7,6 @@ }, "hooks": { "after:bump": "npm run build", - "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}." + "after:release": "echo Successfully released ${name} v${version}." } } diff --git a/example/src/Edges/index.tsx b/example/src/Edges/index.tsx index c46cca68..1f04b388 100644 --- a/example/src/Edges/index.tsx +++ b/example/src/Edges/index.tsx @@ -41,33 +41,6 @@ const initialElements: Elements = [ { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' }, { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } }, { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } }, - { - id: 'e5-6', - source: '5', - target: '6', - label: ( - <> - i am using - - {''} - - - ), - labelStyle: { fill: 'red', fontWeight: 700 }, - style: { stroke: '#ffcc00' }, - markerEnd: { - type: ArrowHeadType.Arrow, - color: '#FFCC00', - units: 'userSpaceOnUse', - width: 20, - height: 20, - strokeWidth: 2, - }, - markerStart: { - type: ArrowHeadType.Arrow, - color: '#FFCC00', - }, - }, { id: 'e5-7', source: '5', @@ -94,6 +67,37 @@ const initialElements: Elements = [ type: 'custom2', data: { text: 'custom edge 2' }, }, + { + id: 'e5-6', + source: '5', + target: '6', + label: ( + <> + i am using + + {''} + + + ), + labelStyle: { fill: 'red', fontWeight: 700 }, + style: { stroke: '#ffcc00' }, + markerEnd: { + type: ArrowHeadType.Arrow, + color: '#FFCC00', + units: 'userSpaceOnUse', + width: 20, + height: 20, + strokeWidth: 2, + }, + markerStart: { + type: ArrowHeadType.ArrowClosed, + color: '#FFCC00', + orient: 'auto-start-reverse', + units: 'userSpaceOnUse', + width: 20, + height: 20, + }, + }, ]; const edgeTypes: EdgeTypesType = { diff --git a/package-lock.json b/package-lock.json index dee85300..97f528ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "9.6.9", + "version": "10.0.0-next.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "9.6.9", + "version": "10.0.0-next.1", "license": "MIT", "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/package.json b/package.json index d4f573b4..f50814a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "9.6.9", + "version": "10.0.0-next.1", "engines": { "node": ">=12" }, @@ -28,7 +28,7 @@ "cy:open": "cypress open", "release": "npm run test && release-it", "release:notest": "release-it", - "release:next": "release-it --preRelease=next" + "release:next": "release-it --preRelease=next --no-git" }, "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx index 9645ea0e..222435f4 100644 --- a/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -42,7 +42,16 @@ const markerSymbols = { [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol, }; -const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeWidth', strokeWidth }: MarkerProps) => { +const Marker = ({ + id, + type, + color, + width = 12.5, + height = 12.5, + units = 'strokeWidth', + strokeWidth, + orient = 'auto', +}: MarkerProps) => { const Symbol = markerSymbols[type]; return ( @@ -53,7 +62,7 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeW markerWidth={`${width}`} markerHeight={`${height}`} viewBox="-10 -10 20 20" - orient="auto" + orient={orient} refX="0" refY="0" > @@ -93,6 +102,7 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => { height={marker.height} units={marker.units} strokeWidth={marker.strokeWidth} + orient={marker.orient} /> ))} diff --git a/src/types/index.ts b/src/types/index.ts index 2a660572..a03f847e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -62,7 +62,8 @@ export interface EdgeMarker { color?: string; width?: number; height?: number; - units?: 'userSpaceOnUse' | 'strokeWidth'; + units?: string; + orient?: string; strokeWidth?: number; } From dc5172e19e9e7e06a479ee46a7e0bf7cd5f152fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Fri, 15 Oct 2021 13:43:19 +0200 Subject: [PATCH 18/18] feat(markers): bump next version --- 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 97f528ec..0b755877 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "license": "MIT", "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/package.json b/package.json index f50814a8..0a50f64e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "engines": { "node": ">=12" },