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