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

Merge pull request #239 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-05-19 18:49:56 +02:00
committed by GitHub
parent 3451836e57 c198d69eec
commit 2f283e0c6d
13 changed files with 199 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -5,4 +5,5 @@ examples/build
cypress/videos
cypress/screenshots
dist
.env
.env
stats.html
README.md
+18 -4
View File
@@ -7,7 +7,7 @@ React Flow is a library for building node-based graphs. You can easily implement
- [Key Features](#key-features)
- [Installation](#installation)
- [Usage](#usage)
- [ReactFlow Component Props](#reactflow-component-props)
- [ReactFlow Component Prop Types](#reactflow-component-prop-types)
- [Styling](#styling)
- [Nodes](#nodes)
- [Options](#options-1)
@@ -62,7 +62,7 @@ const BasicFlow = () => (
);
```
## ReactFlow Component Props
## ReactFlow Component Prop Types
- `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
- `onElementClick`: element click handler
@@ -249,20 +249,34 @@ import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-r
#### isEdge
`isEdge = (element: Node | Edge): boolean`
Returns true if element is an edge
`isEdge = (element: Node | Edge): element is Edge`
#### isNode
`isNode = (element: Node | Edge): boolean`
Returns true if element is a node
`isNode = (element: Node | Edge): element is Node`
#### removeElements
Returns elements without the elements from `elementsToRemove`
`removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
#### addEdge
Returns elements array with added edge
`addEdge = (edgeParams: Edge, elements: Elements): Elements`
#### project
Transforms pixel coordinates to the internal React Flow coordinate system
`project = (position: XYPosition): XYPosition`
You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
## Plugins
cypress/integration/flow/basic.spec.js
+1
View File
@@ -3,6 +3,7 @@ describe('Basic Graph Rendering', () => {
cy.visit('/basic');
cy.get('.react-flow__renderer');
cy.get('.react-flow-basic-example'); // check if className prop works
cy.get('.react-flow__node').should('have.length', 4);
cy.get('.react-flow__edge').should('have.length', 2);
cy.get('.react-flow__node').children('div').children('.react-flow__handle');
example/package-lock.json
Generated
+2 -2
View File
@@ -10701,13 +10701,13 @@
"react-flow-renderer": {
"version": "file:..",
"requires": {
"@welldone-software/why-did-you-render": "^4.2.0",
"@welldone-software/why-did-you-render": "^4.2.1",
"classnames": "^2.2.6",
"d3-selection": "^1.4.1",
"d3-zoom": "^1.8.3",
"easy-peasy": "^3.3.0",
"fast-deep-equal": "^3.1.1",
"react-draggable": "^4.3.1",
"react-draggable": "^4.4.2",
"resize-observer": "^1.0.0"
},
"dependencies": {
example/src/Basic/index.js
+1
View File
@@ -49,6 +49,7 @@ const BasicFlow = () => {
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
className="react-flow-basic-example"
>
<button
onClick={updatePos}
example/src/Edges/index.js
+1 -1
View File
@@ -18,7 +18,7 @@ const initialElements = [
{ id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
{ id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
{ id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge' },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ 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' } },
package-lock.json
Generated
+135 -101
View File
@@ -2821,12 +2821,12 @@
"dev": true
},
"@octokit/plugin-rest-endpoint-methods": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.8.0.tgz",
"integrity": "sha512-LUkTgZ53adPFC/Hw6mxvAtShUtGy3zbpcfCAJMWAN7SvsStV4p6TK7TocSv0Aak4TNmDLhbShTagGhpgz9mhYw==",
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.11.0.tgz",
"integrity": "sha512-D31cBYhlOt6Om2xNkCNZUjyWdaDKUfa4HwpLwL8Dnu8aDuVuuOPLUhFMUDE0GvfqlNQFrNtU7n5HaZm+KmRdsw==",
"dev": true,
"requires": {
"@octokit/types": "^2.12.1",
"@octokit/types": "^2.16.0",
"deprecation": "^2.3.1"
}
},
@@ -2875,33 +2875,35 @@
}
},
"@octokit/rest": {
"version": "17.6.0",
"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.6.0.tgz",
"integrity": "sha512-knh+4hPBA26AMXflFRupTPT3u9NcQmQzeBJl4Gcuf14Gn7dUh6Loc1ICWF0Pz18A6ElFZQt+wB9tFINSruIa+g==",
"version": "17.9.0",
"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.9.0.tgz",
"integrity": "sha512-Ff2jwS2OizWVaiCozOJevQ97V+mKjlQAt//lU6a/lhWDfHsZLXm/k1RsyTKVbyuiriDi7pg899wCU59nYfKnmQ==",
"dev": true,
"requires": {
"@octokit/core": "^2.4.3",
"@octokit/plugin-paginate-rest": "^2.2.0",
"@octokit/plugin-request-log": "^1.0.0",
"@octokit/plugin-rest-endpoint-methods": "3.8.0"
"@octokit/plugin-rest-endpoint-methods": "3.11.0"
}
},
"@octokit/types": {
"version": "2.15.0",
"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.15.0.tgz",
"integrity": "sha512-0mnpenB8rLhBVu8VUklp38gWi+EatjvcEcLWcdProMKauSaQWWepOAybZ714sOGsEyhXPlIcHICggn8HUsCXVw==",
"version": "2.16.2",
"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
"dev": true,
"requires": {
"@types/node": ">= 8"
}
},
"@rollup/pluginutils": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.8.tgz",
"integrity": "sha512-rYGeAc4sxcZ+kPG/Tw4/fwJODC3IXHYDH4qusdN/b6aLw5LPUbzpecYbEJh4sVQGPFJxd2dBU4kc1H3oy9/bnw==",
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
"integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
"dev": true,
"requires": {
"estree-walker": "^1.0.1"
"@types/estree": "0.0.39",
"estree-walker": "^1.0.1",
"picomatch": "^2.2.2"
},
"dependencies": {
"estree-walker": {
@@ -3841,9 +3843,9 @@
"dev": true
},
"@welldone-software/why-did-you-render": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.2.0.tgz",
"integrity": "sha512-vTy5wmcSvaYSellZX6mZeJHgpntKS/9ZBUxvbswoa5NMoL62F3I8di6CfojFUx42N4n0NapCARJhcMAvupI4IQ==",
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.2.1.tgz",
"integrity": "sha512-Q1jH++Sx0F09bU2eTEzAPuBxPiv/uxzgFfWMX1G8LqT4xzdGOrr287DD3lsfPpGLDLx9sqL8jMc0RoxorRewUg==",
"requires": {
"lodash": "^4"
}
@@ -4030,25 +4032,75 @@
"dev": true
},
"autoprefixer": {
"version": "9.7.6",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
"integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
"version": "9.8.0",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
"integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
"dev": true,
"requires": {
"browserslist": "^4.11.1",
"caniuse-lite": "^1.0.30001039",
"browserslist": "^4.12.0",
"caniuse-lite": "^1.0.30001061",
"chalk": "^2.4.2",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^7.0.27",
"postcss-value-parser": "^4.0.3"
"postcss": "^7.0.30",
"postcss-value-parser": "^4.1.0"
},
"dependencies": {
"browserslist": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
"integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001043",
"electron-to-chromium": "^1.3.413",
"node-releases": "^1.1.53",
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001043",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz",
"integrity": "sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==",
"version": "1.0.30001061",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz",
"integrity": "sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.441",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.441.tgz",
"integrity": "sha512-leBfJwLuyGs1jEei2QioI+PjVMavmUIvPYidE8dCCYWLAq0uefhN3NYgDNb8WxD3uiUNnJ3ScMXg0upSlwySzQ==",
"dev": true
},
"postcss": {
"version": "7.0.30",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
"integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
@@ -4728,9 +4780,9 @@
"dev": true
},
"cacheable-lookup": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.3.0.tgz",
"integrity": "sha512-PTUoCeIjj2awloqyVRUL33SjquU1Qv5xuDalYY8WAzd9NnUMUivZnGsOzVsMfg2YuMsWXaXkd/hjnsVoWc/3YA==",
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.3.tgz",
"integrity": "sha512-W+JBqF9SWe18A72XFzN/V/CULFzPm7sBXzzR6ekkE+3tLG72wFZrBiBZhrZuDoYexop4PHJVdFAKb/Nj9+tm9w==",
"dev": true
},
"cacheable-request": {
@@ -5709,18 +5761,18 @@
"dev": true
},
"decompress-response": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-5.0.0.tgz",
"integrity": "sha512-TLZWWybuxWgoW7Lykv+gq9xvzOsUjQ9tF09Tj6NSTYGMTCHNXzrPnD6Hi+TgZq19PyTAGH4Ll/NIM/eTGglnMw==",
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
"dev": true,
"requires": {
"mimic-response": "^2.0.0"
"mimic-response": "^3.1.0"
},
"dependencies": {
"mimic-response": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
"dev": true
}
}
@@ -6269,9 +6321,9 @@
"dev": true
},
"fastq": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
"integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
"integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
"dev": true,
"requires": {
"reusify": "^1.0.4"
@@ -6570,20 +6622,20 @@
}
},
"got": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/got/-/got-11.1.0.tgz",
"integrity": "sha512-9lZDzFe43s6HH60tSurUk04kEtssfLiIfMiY5lSE0+vVaDCmT7+0xYzzlHY5VArSiz41mQQC38LefW2KoE9erw==",
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/got/-/got-11.1.4.tgz",
"integrity": "sha512-z94KIXHhFSpJONuY6C6w1wC+igE7P1d0b5h3H2CvrOXn0/tum/OgFblIGUAxI5PBXukGLvKb9MJXVHW8vsYaBA==",
"dev": true,
"requires": {
"@sindresorhus/is": "^2.1.0",
"@szmarczak/http-timer": "^4.0.0",
"@sindresorhus/is": "^2.1.1",
"@szmarczak/http-timer": "^4.0.5",
"@types/cacheable-request": "^6.0.1",
"@types/responselike": "^1.0.0",
"cacheable-lookup": "^4.1.1",
"cacheable-lookup": "^5.0.3",
"cacheable-request": "^7.0.1",
"decompress-response": "^5.0.0",
"get-stream": "^5.0.0",
"http2-wrapper": "^1.0.0-beta.4.4",
"decompress-response": "^6.0.0",
"get-stream": "^5.1.0",
"http2-wrapper": "^1.0.0-beta.4.5",
"lowercase-keys": "^2.0.0",
"p-cancelable": "^2.0.0",
"responselike": "^2.0.0"
@@ -9526,9 +9578,9 @@
}
},
"react-draggable": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
"integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.2.tgz",
"integrity": "sha512-zLQs4R4bnBCGnCVTZiD8hPsHtkiJxgMpGDlRESM+EHQo8ysXhKJ2GKdJ8UxxLJdRVceX1j19jy+hQS2wHislPQ==",
"requires": {
"classnames": "^2.2.5",
"prop-types": "^15.6.0"
@@ -9663,25 +9715,25 @@
}
},
"release-it": {
"version": "13.5.8",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-13.5.8.tgz",
"integrity": "sha512-5CNuQgkXWcskAediHpnVaU2sOT+27tOeLz8+SXsPHFrdkaCfRKVL1Isekp4AylWmN3sbx2K+cI7Dg6RwtLSYYg==",
"version": "13.6.1",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-13.6.1.tgz",
"integrity": "sha512-y7RfD4+O+I3WwWkULH5Y4kqcBr1bzQ8dNYnG8/7LVycWBajkFSDbKdCper9VGZulpFcXiSFfhenXrnGrDlHMnA==",
"dev": true,
"requires": {
"@iarna/toml": "2.2.5",
"@octokit/rest": "17.6.0",
"@octokit/rest": "17.9.0",
"async-retry": "1.3.1",
"chalk": "4.0.0",
"cosmiconfig": "6.0.0",
"debug": "4.1.1",
"deprecated-obj": "1.0.1",
"detect-repo-changelog": "1.0.1",
"execa": "4.0.0",
"execa": "4.0.1",
"find-up": "4.1.0",
"form-data": "3.0.0",
"git-url-parse": "11.1.2",
"globby": "11.0.0",
"got": "11.1.0",
"got": "11.1.4",
"import-cwd": "3.0.0",
"inquirer": "7.1.0",
"is-ci": "2.0.0",
@@ -9697,19 +9749,10 @@
"url-join": "4.0.1",
"uuid": "8.0.0",
"window-size": "1.1.1",
"yaml": "1.9.2",
"yaml": "1.10.0",
"yargs-parser": "18.1.3"
},
"dependencies": {
"@babel/runtime": {
"version": "7.9.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
"integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
@@ -9770,9 +9813,9 @@
}
},
"execa": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz",
"integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.1.tgz",
"integrity": "sha512-SCjM/zlBdOK8Q5TIjOn6iEHZaPHFsMoTxXQ2nvUvtPnuohz3H2dIozSg+etNR98dGoYUp2ENSKLL/XaMmbxVgw==",
"dev": true,
"requires": {
"cross-spawn": "^7.0.0",
@@ -9867,12 +9910,6 @@
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true
},
"regenerator-runtime": {
"version": "0.13.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
"integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
"dev": true
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -9925,13 +9962,10 @@
}
},
"yaml": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
"integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.2"
}
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
"dev": true
}
}
},
@@ -10105,9 +10139,9 @@
}
},
"rollup": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.9.1.tgz",
"integrity": "sha512-kEZn76R0j+WD4AActu5Np4RShNlewTtJhdUaWNtHwHnAA8AOapyXgH6O7NL2RkcQLHnl49oz1xW1VrDcu5yP+Q==",
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.2.tgz",
"integrity": "sha512-tivFM8UXBlYOUqpBYD3pRktYpZvK/eiCQ190eYlrAyrpE/lzkyG2gbawroNdbwmzyUc7Y4eT297xfzv0BDh9qw==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@@ -10398,16 +10432,16 @@
}
},
"rollup-plugin-typescript2": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.0.tgz",
"integrity": "sha512-SRKG/Canve3cxBsqhY1apIBznqnX9X/WU3Lrq3XSwmTmFqccj3+//logLXFEmp+PYFNllSVng+f4zjqRTPKNkA==",
"version": "0.27.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.1.tgz",
"integrity": "sha512-RJl77Bbj1EunAQDC3dK/O2HWuSUX3oJbRGzyLoS5o9W4Hs1Nix3Gavqj1Lzs5Y6Ff4H2xXfmZ1WWUQCYocSbzQ==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^3.0.8",
"find-cache-dir": "^3.3.1",
"fs-extra": "8.1.0",
"resolve": "1.15.1",
"tslib": "1.11.1"
"tslib": "1.11.2"
},
"dependencies": {
"find-cache-dir": {
@@ -10422,9 +10456,9 @@
}
},
"make-dir": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
"integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
"dev": true,
"requires": {
"semver": "^6.0.0"
@@ -10446,9 +10480,9 @@
"dev": true
},
"tslib": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
"integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==",
"version": "1.11.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.2.tgz",
"integrity": "sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==",
"dev": true
}
}
@@ -11110,9 +11144,9 @@
}
},
"typescript": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
"version": "3.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
"integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
"dev": true
},
"uglify-js": {
package.json
+7 -7
View File
@@ -23,13 +23,13 @@
"release": "release-it"
},
"dependencies": {
"@welldone-software/why-did-you-render": "^4.2.0",
"@welldone-software/why-did-you-render": "^4.2.1",
"classnames": "^2.2.6",
"d3-selection": "^1.4.1",
"d3-zoom": "^1.8.3",
"easy-peasy": "^3.3.0",
"fast-deep-equal": "^3.1.1",
"react-draggable": "^4.3.1",
"react-draggable": "^4.4.2",
"resize-observer": "^1.0.0"
},
"devDependencies": {
@@ -41,7 +41,7 @@
"@types/d3": "^5.7.2",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.7.6",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"cypress": "^4.5.0",
@@ -49,8 +49,8 @@
"prettier": "2.0.5",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"release-it": "^13.5.8",
"rollup": "^2.9.1",
"release-it": "^13.6.1",
"rollup": "^2.10.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-commonjs": "^10.1.0",
@@ -61,10 +61,10 @@
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript2": "^0.27.0",
"rollup-plugin-typescript2": "^0.27.1",
"rollup-plugin-uglify": "^6.0.4",
"start-server-and-test": "^1.11.0",
"typescript": "^3.8.3"
"typescript": "^3.9.2"
},
"peerDependencies": {
"react": "^16.13.1"
src/container/GraphView/index.tsx
+2 -1
View File
@@ -12,7 +12,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
import useElementUpdater from '../../hooks/useElementUpdater';
import { getDimensions } from '../../utils';
import { fitView, zoomIn, zoomOut } from '../../utils/graph';
import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
export interface GraphViewProps {
@@ -115,6 +115,7 @@ const GraphView = memo(
fitView,
zoomIn,
zoomOut,
project,
});
}
}, [state.d3Initialised]);
src/container/ReactFlow/index.tsx
+4 -1
View File
@@ -1,4 +1,5 @@
import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
import cx from 'classnames';
import { StoreProvider } from 'easy-peasy';
const nodeEnv: string = process.env.NODE_ENV as string;
@@ -50,6 +51,7 @@ const ReactFlow = ({
style,
onElementClick,
elements = [],
className,
children,
nodeTypes,
edgeTypes,
@@ -75,7 +77,7 @@ const ReactFlow = ({
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
return (
<div style={style} className="react-flow">
<div style={style} className={cx('react-flow', className)}>
<StoreProvider store={store}>
<GraphView
onLoad={onLoad}
@@ -137,6 +139,7 @@ ReactFlow.defaultProps = {
snapGrid: [16, 16],
onlyRenderVisibleNodes: true,
isInteractive: true,
className: '',
};
export default ReactFlow;
src/hooks/useElementUpdater.ts
+5 -5
View File
@@ -18,10 +18,10 @@ const useElementUpdater = (elements: Elements): void => {
const setEdges = useStoreActions((a) => a.setEdges);
useEffect(() => {
const nodes = elements.filter(isNode) as Node[];
const edges = elements.filter(isEdge).map((e) => parseElement(e)) as Edge[];
const nodes: Node[] = elements.filter(isNode);
const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
const nextNodes = nodes.map((propNode) => {
const nextNodes: Node[] = nodes.map((propNode) => {
const existingNode = state.nodes.find((n) => n.id === propNode.id);
if (existingNode) {
@@ -56,8 +56,8 @@ const useElementUpdater = (elements: Elements): void => {
};
}
return parseElement(propNode);
}) as Node[];
return parseElement(propNode) as Node;
});
const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
const edgesChanged: boolean = !isEqual(state.edges, edges);
src/types/index.ts
+2
View File
@@ -133,11 +133,13 @@ export type FitViewParams = {
padding: number;
};
export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
export type ProjectFunc = (position: XYPosition) => XYPosition;
type OnLoadParams = {
zoomIn: () => void;
zoomOut: () => void;
fitView: FitViewFunc;
project: ProjectFunc;
};
export type OnLoadFunc = (params: OnLoadParams) => void;
src/utils/graph.ts
+19 -14
View File
@@ -3,11 +3,11 @@ import { zoomIdentity } from 'd3-zoom';
import store from '../store';
import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
export const isEdge = (element: Node | Edge): boolean =>
element.hasOwnProperty('source') && element.hasOwnProperty('target');
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
'id' in element && 'source' in element && 'target' in element;
export const isNode = (element: Node | Edge): boolean =>
!element.hasOwnProperty('source') && !element.hasOwnProperty('target');
export const isNode = (element: Node | Connection | Edge): element is Node =>
'id' in element && !('source' in element) && !('target' in element);
export const getOutgoers = (node: Node, elements: Elements): Elements => {
if (!isNode(node)) {
@@ -38,9 +38,8 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elem
throw new Error('Can not create edge. An edge needs a source and a target');
}
if (edgeParams.hasOwnProperty('id')) {
const edge = { ...edgeParams } as Edge;
return elements.concat(edge);
if (isEdge(edgeParams)) {
return elements.concat({ ...edgeParams });
}
const edge = {
@@ -75,6 +74,12 @@ export const pointToRendererPoint = (
return position;
};
export const project = (position: XYPosition): XYPosition => {
const { transform, snapToGrid, snapGrid } = store.getState();
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
};
export const parseElement = (element: Node | Edge): Node | Edge => {
if (!element.id) {
throw new Error('All elements (nodes and edges) need to have an id.');
@@ -83,24 +88,24 @@ export const parseElement = (element: Node | Edge): Node | Edge => {
if (isEdge(element)) {
return {
...element,
source: element.source.toString(),
target: element.target.toString(),
id: element.id.toString(),
type: element.type || 'default',
};
}
const nodeElement = element as Node;
return {
...nodeElement,
id: nodeElement.id.toString(),
type: nodeElement.type || 'default',
...element,
id: element.id.toString(),
type: element.type || 'default',
__rg: {
position: nodeElement.position,
position: element.position,
width: null,
height: null,
handleBounds: {},
},
};
} as Node;
};
const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({