alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Unreal Engine style bezier edge

Browse Source
This commit is contained in:
Joey Ballentine
2022-03-12 14:33:41 -05:00
parent 64a3c2d48a
commit 726bc2e0b3
8 changed files with 260 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CONTRIBUTING.md
View File

@@ -27,5 +27,5 @@ Please use a meaningful commit message and add a little description of your chan
1. Install dependencies `npm install` and example dependencies `cd example && npm install`
2. Run library start task `npm start` and example start task `cd example && npm start`
3. No you can test your changes with the exisiting examples. Feel free to add a new one if it's needed for your changes
3. Now you can test your changes with the existing examples. Feel free to add a new one if it's needed for your changes
4. Run tests `npm test` and add new ones if you are introducing a new feature

476
example/package-lock.json generated
View File

@@ -27,7 +27,7 @@
},
"..": {
"name": "react-flow-renderer",
"version": "10.0.0-next.38",
"version": "10.0.0-next.51",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.16.7",
@@ -43,7 +43,6 @@
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
@@ -63,7 +62,6 @@
"react-dom": "^17.0.2",
"release-it": "^14.12.4",
"rollup": "^2.66.1",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0",
@@ -1982,20 +1980,6 @@
"@octokit/openapi-types": "^11.2.0"
}
},
"../node_modules/@rollup/plugin-alias": {
"version": "3.1.9",
"dev": true,
"license": "MIT",
"dependencies": {
"slash": "^3.0.0"
},
"engines": {
"node": ">=8.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0"
}
},
"../node_modules/@rollup/plugin-babel": {
"version": "5.3.0",
"dev": true,
@@ -4616,18 +4600,6 @@
"pend": "~1.2.0"
}
},
"../node_modules/figures": {
"version": "1.7.0",
"dev": true,
"license": "MIT",
"dependencies": {
"escape-string-regexp": "^1.0.5",
"object-assign": "^4.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/fill-range": {
"version": "7.0.1",
"dev": true,
@@ -4966,17 +4938,6 @@
"dev": true,
"license": "ISC"
},
"../node_modules/gzip-size": {
"version": "3.0.0",
"dev": true,
"license": "MIT",
"dependencies": {
"duplexer": "^0.1.1"
},
"engines": {
"node": ">=0.12.0"
}
},
"../node_modules/has": {
"version": "1.0.3",
"dev": true,
@@ -4988,25 +4949,6 @@
"node": ">= 0.4.0"
}
},
"../node_modules/has-ansi": {
"version": "2.0.0",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/has-ansi/node_modules/ansi-regex": {
"version": "2.1.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/has-flag": {
"version": "3.0.0",
"dev": true,
@@ -6051,81 +5993,6 @@
"version": "0.1.0",
"dev": true
},
"../node_modules/maxmin": {
"version": "2.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"chalk": "^1.0.0",
"figures": "^1.0.1",
"gzip-size": "^3.0.0",
"pretty-bytes": "^3.0.0"
},
"engines": {
"node": ">=0.12"
}
},
"../node_modules/maxmin/node_modules/ansi-regex": {
"version": "2.1.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/maxmin/node_modules/ansi-styles": {
"version": "2.2.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/maxmin/node_modules/chalk": {
"version": "1.1.3",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/maxmin/node_modules/pretty-bytes": {
"version": "3.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"number-is-nan": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/maxmin/node_modules/strip-ansi": {
"version": "3.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/maxmin/node_modules/supports-color": {
"version": "2.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.0"
}
},
"../node_modules/mdn-data": {
"version": "2.0.14",
"dev": true,
@@ -6331,14 +6198,6 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"../node_modules/number-is-nan": {
"version": "1.0.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/object-assign": {
"version": "4.1.1",
"license": "MIT",
@@ -8312,65 +8171,6 @@
"fsevents": "~2.3.2"
}
},
"../node_modules/rollup-plugin-bundle-size": {
"version": "1.0.3",
"dev": true,
"license": "MIT",
"dependencies": {
"chalk": "^1.1.3",
"maxmin": "^2.1.0"
}
},
"../node_modules/rollup-plugin-bundle-size/node_modules/ansi-regex": {
"version": "2.1.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/rollup-plugin-bundle-size/node_modules/ansi-styles": {
"version": "2.2.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/rollup-plugin-bundle-size/node_modules/chalk": {
"version": "1.1.3",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/rollup-plugin-bundle-size/node_modules/strip-ansi": {
"version": "3.0.1",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"../node_modules/rollup-plugin-bundle-size/node_modules/supports-color": {
"version": "2.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.0"
}
},
"../node_modules/rollup-plugin-livereload": {
"version": "2.0.5",
"dev": true,
@@ -28148,12 +27948,14 @@
"acorn-import-assertions": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
"requires": {}
},
"acorn-jsx": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"requires": {}
},
"acorn-node": {
"version": "1.8.2",
@@ -28248,7 +28050,8 @@
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {}
},
"ansi-escapes": {
"version": "4.3.2",
@@ -28541,7 +28344,8 @@
"babel-plugin-named-asset-import": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
"integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
"integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
"requires": {}
},
"babel-plugin-polyfill-corejs2": {
"version": "0.3.1",
@@ -29235,7 +29039,8 @@
"css-prefers-color-scheme": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
"integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
"integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
"requires": {}
},
"css-select": {
"version": "2.1.0",
@@ -29323,7 +29128,8 @@
"cssnano-utils": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.2.tgz",
"integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ=="
"integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==",
"requires": {}
},
"csso": {
"version": "4.2.0",
@@ -30175,7 +29981,8 @@
"eslint-plugin-react-hooks": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
"integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA=="
"integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
"requires": {}
},
"eslint-plugin-testing-library": {
"version": "5.0.5",
@@ -31081,7 +30888,8 @@
"icss-utils": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
"requires": {}
},
"idb": {
"version": "6.1.5",
@@ -32077,7 +31885,8 @@
"jest-pnp-resolver": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
"requires": {}
},
"jest-regex-util": {
"version": "27.5.1",
@@ -33575,7 +33384,8 @@
"postcss-browser-comments": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
"integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
"integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
"requires": {}
},
"postcss-calc": {
"version": "8.2.4",
@@ -33640,7 +33450,8 @@
"postcss-custom-media": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
"integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g=="
"integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
"requires": {}
},
"postcss-custom-properties": {
"version": "12.1.4",
@@ -33669,22 +33480,26 @@
"postcss-discard-comments": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.3.tgz",
"integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q=="
"integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==",
"requires": {}
},
"postcss-discard-duplicates": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.3.tgz",
"integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw=="
"integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==",
"requires": {}
},
"postcss-discard-empty": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.3.tgz",
"integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA=="
"integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==",
"requires": {}
},
"postcss-discard-overridden": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz",
"integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg=="
"integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==",
"requires": {}
},
"postcss-double-position-gradients": {
"version": "3.0.5",
@@ -33705,7 +33520,8 @@
"postcss-flexbugs-fixes": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
"integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
"integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
"requires": {}
},
"postcss-focus-visible": {
"version": "6.0.4",
@@ -33726,12 +33542,14 @@
"postcss-font-variant": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
"integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
"integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
"requires": {}
},
"postcss-gap-properties": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
"integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ=="
"integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
"requires": {}
},
"postcss-image-set-function": {
"version": "4.0.6",
@@ -33744,7 +33562,8 @@
"postcss-initial": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
"integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
"integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
"requires": {}
},
"postcss-js": {
"version": "4.0.0",
@@ -33784,12 +33603,14 @@
"postcss-logical": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
"integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
"integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
"requires": {}
},
"postcss-media-minmax": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
"integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
"integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
"requires": {}
},
"postcss-merge-longhand": {
"version": "5.0.6",
@@ -33850,7 +33671,8 @@
"postcss-modules-extract-imports": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
"requires": {}
},
"postcss-modules-local-by-default": {
"version": "4.0.0",
@@ -33907,7 +33729,8 @@
"postcss-normalize-charset": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz",
"integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA=="
"integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==",
"requires": {}
},
"postcss-normalize-display-values": {
"version": "5.0.3",
@@ -33992,12 +33815,14 @@
"postcss-overflow-shorthand": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
"integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg=="
"integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
"requires": {}
},
"postcss-page-break": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
"integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
"integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
"requires": {}
},
"postcss-place": {
"version": "7.0.4",
@@ -34080,7 +33905,8 @@
"postcss-replace-overflow-wrap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
"integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
"integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
"requires": {}
},
"postcss-selector-not": {
"version": "5.0.0",
@@ -34505,7 +34331,6 @@
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@babel/runtime": "^7.16.7",
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
@@ -34529,7 +34354,6 @@
"react-draggable": "^4.4.4",
"release-it": "^14.12.4",
"rollup": "^2.66.1",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0",
@@ -35674,7 +35498,8 @@
},
"@octokit/plugin-request-log": {
"version": "1.0.4",
"dev": true
"dev": true,
"requires": {}
},
"@octokit/plugin-rest-endpoint-methods": {
"version": "5.13.0",
@@ -35722,13 +35547,6 @@
"@octokit/openapi-types": "^11.2.0"
}
},
"@rollup/plugin-alias": {
"version": "3.1.9",
"dev": true,
"requires": {
"slash": "^3.0.0"
}
},
"@rollup/plugin-babel": {
"version": "5.3.0",
"dev": true,
@@ -35806,35 +35624,43 @@
},
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-attribute": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-dynamic-title": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-em-dimensions": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-react-native-svg": {
"version": "6.0.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-svg-component": {
"version": "6.2.0",
"dev": true
"dev": true,
"requires": {}
},
"@svgr/babel-preset": {
"version": "6.2.0",
@@ -36930,7 +36756,8 @@
},
"cssnano-utils": {
"version": "2.0.1",
"dev": true
"dev": true,
"requires": {}
},
"csso": {
"version": "4.2.0",
@@ -37402,14 +37229,6 @@
"pend": "~1.2.0"
}
},
"figures": {
"version": "1.7.0",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.5",
"object-assign": "^4.1.0"
}
},
"fill-range": {
"version": "7.0.1",
"dev": true,
@@ -37613,13 +37432,6 @@
"version": "4.2.6",
"dev": true
},
"gzip-size": {
"version": "3.0.0",
"dev": true,
"requires": {
"duplexer": "^0.1.1"
}
},
"has": {
"version": "1.0.3",
"dev": true,
@@ -37627,19 +37439,6 @@
"function-bind": "^1.1.1"
}
},
"has-ansi": {
"version": "2.0.0",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"dev": true
}
}
},
"has-flag": {
"version": "3.0.0",
"dev": true
@@ -37690,7 +37489,8 @@
},
"icss-utils": {
"version": "5.1.0",
"dev": true
"dev": true,
"requires": {}
},
"ieee754": {
"version": "1.2.1",
@@ -38285,55 +38085,6 @@
"version": "0.1.0",
"dev": true
},
"maxmin": {
"version": "2.1.0",
"dev": true,
"requires": {
"chalk": "^1.0.0",
"figures": "^1.0.1",
"gzip-size": "^3.0.0",
"pretty-bytes": "^3.0.0"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"dev": true
},
"ansi-styles": {
"version": "2.2.1",
"dev": true
},
"chalk": {
"version": "1.1.3",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
}
},
"pretty-bytes": {
"version": "3.0.1",
"dev": true,
"requires": {
"number-is-nan": "^1.0.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"dev": true
}
}
},
"mdn-data": {
"version": "2.0.14",
"dev": true
@@ -38450,10 +38201,6 @@
"boolbase": "^1.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
"dev": true
},
"object-assign": {
"version": "4.1.1"
},
@@ -38974,19 +38721,23 @@
},
"postcss-discard-comments": {
"version": "5.0.1",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-duplicates": {
"version": "5.0.1",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-empty": {
"version": "5.0.1",
"dev": true
"dev": true,
"requires": {}
},
"postcss-discard-overridden": {
"version": "5.0.1",
"dev": true
"dev": true,
"requires": {}
},
"postcss-load-config": {
"version": "3.1.0",
@@ -39068,7 +38819,8 @@
},
"postcss-modules-extract-imports": {
"version": "3.0.0",
"dev": true
"dev": true,
"requires": {}
},
"postcss-modules-local-by-default": {
"version": "4.0.0",
@@ -39102,7 +38854,8 @@
},
"postcss-normalize-charset": {
"version": "5.0.1",
"dev": true
"dev": true,
"requires": {}
},
"postcss-normalize-display-values": {
"version": "5.0.1",
@@ -39637,46 +39390,6 @@
"fsevents": "~2.3.2"
}
},
"rollup-plugin-bundle-size": {
"version": "1.0.3",
"dev": true,
"requires": {
"chalk": "^1.1.3",
"maxmin": "^2.1.0"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"dev": true
},
"ansi-styles": {
"version": "2.2.1",
"dev": true
},
"chalk": {
"version": "1.1.3",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"dev": true
}
}
},
"rollup-plugin-livereload": {
"version": "2.0.5",
"dev": true,
@@ -40499,7 +40212,8 @@
},
"ws": {
"version": "7.5.0",
"dev": true
"dev": true,
"requires": {}
},
"xdg-basedir": {
"version": "4.0.0",
@@ -40553,7 +40267,8 @@
"dev": true
},
"zustand": {
"version": "3.6.9"
"version": "3.6.9",
"requires": {}
}
}
},
@@ -41439,7 +41154,8 @@
"style-loader": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
"requires": {}
},
"stylehacks": {
"version": "5.0.3",
@@ -42186,7 +41902,8 @@
"ws": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
"integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg=="
"integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
"requires": {}
}
}
},
@@ -42612,7 +42329,8 @@
"ws": {
"version": "7.5.7",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
"integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A=="
"integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
"requires": {}
},
"xml-name-validator": {
"version": "3.0.0",

46
example/src/index.tsx
View File

@@ -1,40 +1,40 @@
import { ChangeEvent } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
import Overview from './Overview';
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Basic from './Basic';
import UpdateNode from './UpdateNode';
import Stress from './Stress';
import CustomNode from './CustomNode';
import FloatingEdges from './FloatingEdges';
import Layouting from './Layouting';
import NestedNodes from './NestedNodes';
import Hidden from './Hidden';
import UpdatableEdge from './UpdatableEdge';
import TouchDevice from './TouchDevice';
import Subflow from './Subflow';
import Interaction from './Interaction';
import Empty from './Empty';
import DragHandle from './DragHandle';
import Undirectional from './Undirectional';
import Provider from './Provider';
import ControlledUncontrolled from './ControlledUncontrolled';
import CustomConnectionLine from './CustomConnectionLine';
import UseZoomPanHelper from './UseZoomPanHelper';
import CustomNode from './CustomNode';
import DefaultNodes from './DefaultNodes';
import DragHandle from './DragHandle';
import DragNDrop from './DragNDrop';
import UseUpdateNodeInternals from './UseUpdateNodeInternals';
import Edges from './Edges';
import EdgeTypes from './EdgeTypes';
import Empty from './Empty';
import FloatingEdges from './FloatingEdges';
import Hidden from './Hidden';
import './index.css';
import Interaction from './Interaction';
import Layouting from './Layouting';
import MultiFlows from './MultiFlows';
import NestedNodes from './NestedNodes';
import NodeTypeChange from './NodeTypeChange';
import NodeTypesObjectChange from './NodeTypesObjectChange';
import Overview from './Overview';
import Provider from './Provider';
import SaveRestore from './SaveRestore';
import Stress from './Stress';
import Subflow from './Subflow';
import SwitchFlow from './Switch';
import TouchDevice from './TouchDevice';
import Undirectional from './Undirectional';
import UpdatableEdge from './UpdatableEdge';
import UpdateNode from './UpdateNode';
import UseUpdateNodeInternals from './UseUpdateNodeInternals';
import UseZoomPanHelper from './UseZoomPanHelper';
import Validation from './Validation';
import DefaultNodes from './DefaultNodes';
import ControlledUncontrolled from './ControlledUncontrolled';
import './index.css';
const routes = [
{

105
src/components/Edges/QuarticBezierEdge.tsx Normal file
View File

@@ -0,0 +1,105 @@
import React, { memo } from 'react';
import { EdgeProps, Position } from '../../types';
import EdgeText from './EdgeText';
import { getCenter } from './utils';
interface GetBezierPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
curvature?: number;
}
export function getQuarticBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
curvature = 0.5
}: GetBezierPathParams): string {
const leftAndRight = [Position.Left, Position.Right];
// Distance between the source and target
const distanceX = sourceX - targetX;
// A scalar value to fix the curve size getting larger
const scalar = Math.min(curvature, Math.max(0, distanceX / 10000));
const cX = sourceX + Math.abs(targetX - sourceX) * (curvature - scalar);
const cY = targetX - Math.abs(targetX - sourceX) * (curvature - scalar);
let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
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} Q${sourceX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(sourcePosition)) {
path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
}
return path;
}
export default memo(
({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
curvature,
}: EdgeProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
const path = getQuarticBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
curvature,
});
const text = label ? (
<EdgeText
x={centerX}
y={centerY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
/>
) : null;
return (
<>
<path
style={style}
d={path}
className="react-flow__edge-path"
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
</>
);
}
);

3
src/components/Edges/index.ts
View File

@@ -1,4 +1,5 @@
export { default as BezierEdge } from './BezierEdge';
export { default as StepEdge } from './StepEdge';
export { default as QuarticBezierEdge } from './QuarticBezierEdge';
export { default as SmoothStepEdge } from './SmoothStepEdge';
export { default as StepEdge } from './StepEdge';
export { default as StraightEdge } from './StraightEdge';

19
src/container/EdgeRenderer/utils.ts
View File

@@ -1,20 +1,18 @@
import { ComponentType } from 'react';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
import wrapEdge from '../../components/Edges/wrapEdge';
import { rectToBox } from '../../utils';
import {
EdgeTypes,
EdgeProps,
EdgeTypes,
HandleElement,
Position,
XYPosition,
Transform,
Rect,
NodeInternals,
NodeHandleBounds,
NodeInternals,
Position,
Rect,
Transform,
XYPosition,
} from '../../types';
import { rectToBox } from '../../utils';
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes;
@@ -24,6 +22,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
quartic: wrapEdge((edgeTypes.quartic || QuarticBezierEdge) as ComponentType<EdgeProps>),
};
const wrappedTypes = {} as EdgeTypes;

40
src/container/ReactFlow/index.tsx
View File

@@ -1,31 +1,28 @@
import React, { forwardRef } from 'react';
import cc from 'classcat';
import GraphView from '../GraphView';
import StoreUpdater from '../../components/StoreUpdater';
import React, { forwardRef } from 'react';
import Attribution from '../../components/Attribution';
import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import { createNodeTypes } from '../NodeRenderer/utils';
import SelectionListener from '../../components/SelectionListener';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
import Attribution from '../../components/Attribution';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import Wrapper from './Wrapper';
import injectStyle, { useNodeOrEdgeTypes } from './utils';
import {
ConnectionMode,
ConnectionLineType,
PanOnScrollMode,
ReactFlowProps,
ReactFlowRefType,
NodeTypes,
EdgeTypes,
} from '../../types';
import StoreUpdater from '../../components/StoreUpdater';
import css from '../../style.css';
import theme from '../../theme-default.css';
import {
ConnectionLineType, ConnectionMode, EdgeTypes, NodeTypes, PanOnScrollMode,
ReactFlowProps,
ReactFlowRefType
} from '../../types';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import GraphView from '../GraphView';
import { createNodeTypes } from '../NodeRenderer/utils';
import injectStyle, { useNodeOrEdgeTypes } from './utils';
import Wrapper from './Wrapper';
if (__INJECT_STYLES__) {
injectStyle(css as unknown as string);
@@ -43,6 +40,7 @@ const defaultEdgeTypes = {
straight: StraightEdge,
step: StepEdge,
smoothstep: SmoothStepEdge,
quartic: QuarticBezierEdge,
};
const initSnapGrid: [number, number] = [15, 15];

7
src/types/edges.ts
View File

@@ -1,9 +1,9 @@
import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
import { Position } from './utils';
import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import { Connection } from './general';
import { HandleElement } from './handles';
import { Node } from './nodes';
import { Position } from './utils';
// interface for the user edge items
export interface Edge<T = any> {
@@ -62,6 +62,7 @@ export interface EdgeProps<T = any> {
targetHandleId?: string | null;
markerStart?: string;
markerEnd?: string;
curvature?: number;
}
export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;