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

Merge pull request #209 from wbkd/develop

Browse Source 
refactor(examples): rename Graph to ReactFlow
This commit is contained in:
Moritz
2020-05-11 15:15:29 +02:00
committed by GitHub
parent 6f2e317bb8 48b2840700
commit c5626c3503
13 changed files with 39 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -93,7 +93,7 @@ You can create your own CSS rules or pass style properties to the components.
#### Using classnames
Since we are using DOM nodes for rendering the chart you can simply overwrite the styles with your own CSS rules.
Since we are using DOM nodes for rendering the graph you can simply overwrite the styles with your own CSS rules.
The React Flow wrapper has the className `react-flow`. So if you want to change the graph background for example you can do:
```css
example/package-lock.json
Generated
+11 -18
View File
@@ -1,5 +1,5 @@
{
"name": "example",
"name": "react-flow-examples",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
@@ -1767,6 +1767,14 @@
"@xtuc/long": "4.2.2"
}
},
"@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==",
"requires": {
"lodash": "^4"
}
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -10693,16 +10701,14 @@
"react-flow-renderer": {
"version": "file:..",
"requires": {
"@svgr/rollup": "^5.3.0",
"@welldone-software/why-did-you-render": "^4.1.3",
"@welldone-software/why-did-you-render": "^4.2.0",
"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",
"resize-observer": "^1.0.0",
"scheduler": "^0.19.1"
"resize-observer": "^1.0.0"
},
"dependencies": {
"@babel/code-frame": {
@@ -14166,14 +14172,6 @@
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
},
"@welldone-software/why-did-you-render": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.1.3.tgz",
"integrity": "sha512-xUlrJfG6zyqAqJ9M3uI/Wa88EF99fgeT3tb7VhztnVxWG/k6nn1kRuddlCIZSqrvDTen52seLLvLaqw/VEbWag==",
"requires": {
"lodash": "^4"
}
},
"ajv": {
"version": "6.10.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
@@ -18101,11 +18099,6 @@
"p-locate": "^4.1.0"
}
},
"lodash": {
"version": "4.17.14",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
"integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
},
"lodash.camelcase": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
example/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "example",
"name": "react-flow-examples",
"version": "0.1.0",
"private": true,
"dependencies": {
example/src/Basic/index.js
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Graph, { removeElements, addEdge } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -22,7 +22,7 @@ const BasicGraph = () => {
const onConnect = (params) => setElements(els => addEdge(params, els));
return (
<Graph
<ReactFlow
elements={elements}
onLoad={onLoad}
onElementClick={onElementClick}
example/src/CustomNode/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ColorSelectorNode from './ColorSelectorNode';
@@ -53,7 +53,7 @@ const CustomNodeGraph = () => {
const onConnect = (params) => setElements(els => addEdge(params, els));
return (
<Graph
<ReactFlow
elements={elements}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
@@ -79,7 +79,7 @@ const CustomNodeGraph = () => {
}}
/>
<Controls />
</Graph>
</ReactFlow>
);
}
example/src/Edges/index.js
+2 -3
View File
@@ -16,14 +16,13 @@ const initialElements = [
{ id: '5', data: { label: 'Node 5' }, position: { x: 450, y: 400 } },
{ id: '6', type: 'output', data: { label: 'Output Node 5' }, position: { x: 250, y: 550 } },
{ id: '7', type: 'output', data: { label: 'Output Node 6' }, position: { x: 550, y: 550 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge', labelBgStyle: { fillOpacity: 0.75 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier 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-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{ id: 'e5-6', source: '5', target: '6', label: 'styled label', labelStyle: { fill: 'red', fontWeight: 700 } },
{ id: 'e5-7', source: '5', target: '7', label: 'label with styled bg', labelBgStyle: { fill: '#eee', fillOpacity: 0.7 } },
]
];
const EdgesFlow = () => {
const [elements, setElements] = useState(initialElements);
example/src/Empty/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -22,7 +22,7 @@ const EmptyGraph = () => {
};
return (
<Graph
<ReactFlow
elements={elements}
onLoad={onLoad}
onElementClick={onElementClick}
@@ -41,7 +41,7 @@ const EmptyGraph = () => {
>
add node
</button>
</Graph>
</ReactFlow>
);
}
example/src/Inactive/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Graph, { MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -18,7 +18,7 @@ const EmptyGraph = () => {
};
return (
<Graph
<ReactFlow
elements={initialElements}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
@@ -39,7 +39,7 @@ const EmptyGraph = () => {
/>
</label>
</div>
</Graph>
</ReactFlow>
);
}
example/src/Rich/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
@@ -41,7 +41,7 @@ const RichGraph = () => {
const onConnect = (params) => setElements(els => addEdge(params, els));
return (
<Graph
<ReactFlow
elements={elements}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
@@ -73,7 +73,7 @@ const RichGraph = () => {
>
add node
</button>
</Graph>
</ReactFlow>
);
}
example/src/Stress/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Graph, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
import { getElements } from './utils';
const onLoad = graph => {
@@ -17,7 +17,7 @@ const StressGraph = () => {
const onConnect = (params) => setElements(els => addEdge(params, els));
return (
<Graph
<ReactFlow
elements={elements}
onLoad={onLoad}
onElementsRemove={onElementsRemove}
@@ -26,7 +26,7 @@ const StressGraph = () => {
backgroundType="lines"
>
<MiniMap />
</Graph>
</ReactFlow>
);
}
example/src/index.js
+5 -5
View File
@@ -20,7 +20,11 @@ const routes = [{
path: '/basic',
component: Basic,
label: 'Basic'
},{
}, {
path: '/edges',
component: Edges,
label: 'Edges'
}, {
path: '/custom-node',
component: CustomNode,
label: 'CustomNode'
@@ -28,10 +32,6 @@ const routes = [{
path: '/stress',
component: Stress,
label: 'Stress'
}, {
path: '/edges',
component: Edges,
label: 'Edges'
}, {
path: '/empty',
component: Empty
package-lock.json
Generated
-107
View File
@@ -2696,57 +2696,6 @@
"integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
"dev": true
},
"@hapi/joi": {
"version": "17.1.1",
"resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz",
"integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==",
"dev": true,
"requires": {
"@hapi/address": "^4.0.1",
"@hapi/formula": "^2.0.0",
"@hapi/hoek": "^9.0.0",
"@hapi/pinpoint": "^2.0.0",
"@hapi/topo": "^5.0.0"
},
"dependencies": {
"@hapi/address": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.0.1.tgz",
"integrity": "sha512-0oEP5UiyV4f3d6cBL8F3Z5S7iWSX39Knnl0lY8i+6gfmmIBj44JCBNtcMgwyS+5v7j3VYavNay0NFHDS+UGQcw==",
"dev": true,
"requires": {
"@hapi/hoek": "^9.0.0"
}
},
"@hapi/formula": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz",
"integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==",
"dev": true
},
"@hapi/hoek": {
"version": "9.0.4",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.0.4.tgz",
"integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==",
"dev": true
},
"@hapi/pinpoint": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz",
"integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==",
"dev": true
},
"@hapi/topo": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz",
"integrity": "sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==",
"dev": true,
"requires": {
"@hapi/hoek": "^9.0.0"
}
}
}
},
"@hapi/pinpoint": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-1.0.2.tgz",
@@ -4115,15 +4064,6 @@
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"dev": true,
"requires": {
"follow-redirects": "1.5.10"
}
},
"babel-loader": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@@ -6448,32 +6388,6 @@
}
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"dev": true,
"requires": {
"debug": "=3.1.0"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
}
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -11490,27 +11404,6 @@
"extsprintf": "^1.2.0"
}
},
"wait-on": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/wait-on/-/wait-on-5.0.0.tgz",
"integrity": "sha512-6v9lttmGGRT7Lr16E/0rISTBIV1DN72n9+77Bpt1iBfzmhBI+75RDlacFe0Q+JizkmwWXmgHUcFG5cgx3Bwqzw==",
"dev": true,
"requires": {
"@hapi/joi": "^17.1.1",
"axios": "^0.19.2",
"lodash": "^4.17.15",
"minimist": "^1.2.5",
"rxjs": "^6.5.5"
},
"dependencies": {
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
}
}
},
"wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
package.json
+2 -4
View File
@@ -51,8 +51,7 @@
"rollup-plugin-typescript2": "^0.27.0",
"rollup-plugin-uglify": "^6.0.4",
"start-server-and-test": "^1.11.0",
"typescript": "^3.8.3",
"wait-on": "^5.0.0"
"typescript": "^3.8.3"
},
"peerDependencies": {
"react": "^16.13.1"
@@ -60,8 +59,7 @@
"scripts": {
"build": "rollup -c --environment NODE_ENV:production",
"start": "rollup -w -c",
"waiton:dist": "wait-on dist/ReactFlow.js",
"dev": "npm start & npm run waiton:dist && cd example && npm start",
"dev": "npm run build && npm start & cd example && npm start",
"dev:wait": "start-server-and-test dev http-get://localhost:3000",
"build:example": "npm install && npm run build && cd example && npm install && npm run build",
"cy:run": "cypress run",