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

Merge pull request #554 from wbkd/site

Browse Source 
✨ New website ✨
This commit is contained in:
Moritz
2020-10-06 15:18:05 +02:00
committed by GitHub
parent 6dcd95853b 6af7d38da4
commit 033c9bcfe3
148 changed files with 30459 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "react-flow-examples",
"name": "react-flow-tests",
"version": "0.1.0",
"private": true,
"dependencies": {

BIN
example/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

6
example/public/index.html
View File

@@ -4,12 +4,10 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#222222" />
<meta name="description" content="react flow examples" />
<title>React Flow Examples</title>
<meta name="description" content="React Flow test flows" />
<title>React Flow - Test Flows</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

BIN
example/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.4 KiB

BIN
example/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

25
example/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

90
example/src/Horizontal/index.js
View File

@@ -1,90 +0,0 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onNodeMouseEnter = (event, node) => console.log('mouse enter:', node);
const onNodeMouseMove = (event, node) => console.log('mouse move:', node);
const onNodeMouseLeave = (event, node) => console.log('mouse leave:', node);
const onNodeContextMenu = (event, node) => {
event.preventDefault();
console.log('context menu:', node);
};
const initialElements = [
{
id: '1',
sourcePosition: 'right',
type: 'input',
className: 'dark-node',
data: { label: 'Input' },
position: { x: 0, y: 80 },
},
{ id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
{ id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
{ id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
{ id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
{
id: '7',
type: 'output',
sourcePosition: 'right',
targetPosition: 'left',
data: { label: 'Node 7' },
position: { x: 750, y: 50 },
},
{
id: '8',
type: 'output',
sourcePosition: 'right',
targetPosition: 'left',
data: { label: 'Node 8' },
position: { x: 750, y: 300 },
},
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
{ id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true },
{ id: 'e1-4', source: '2', type: 'smoothstep', target: '4', label: 'edge label' },
{ id: 'e3-5', source: '3', type: 'smoothstep', target: '5', animated: true },
{ id: 'e3-6', source: '3', type: 'smoothstep', target: '6', animated: true },
{ id: 'e5-7', source: '5', type: 'smoothstep', target: '7', animated: true },
{ id: 'e6-8', source: '6', type: 'smoothstep', target: '8', animated: true },
];
const HorizontalFlow = () => {
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
const changeClassName = () => {
setElements((elms) =>
elms.map((el) => {
if (el.type === 'input') {
el.className = el.className ? '' : 'dark-node';
}
return { ...el };
})
);
};
return (
<ReactFlow
elements={elements}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onLoad={onLoad}
selectNodesOnDrag={false}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
>
<button onClick={changeClassName} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
change class name
</button>
</ReactFlow>
);
};
export default HorizontalFlow;

4
example/src/index.css
View File

@@ -1,7 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-family: sans-serif;
color: #111;
}

22
example/src/index.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, NavLink, withRouter } from 'react-router-dom';
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
import Overview from './Overview';
import Basic from './Basic';
@@ -10,7 +10,6 @@ import Interaction from './Interaction';
import Empty from './Empty';
import Edges from './Edges';
import Validation from './Validation';
import Horizontal from './Horizontal';
import Provider from './Provider';
import Hidden from './Hidden';
import EdgeTypes from './EdgeTypes';
@@ -35,11 +34,6 @@ const routes = [
component: CustomNode,
label: 'CustomNode',
},
{
path: '/horizontal',
component: Horizontal,
label: 'Horizontal',
},
{
path: '/validation',
component: Validation,
@@ -88,24 +82,13 @@ const routes = [
const navLinks = routes.filter((route) => route.label);
const SourceDisplay = withRouter(({ location }) => {
const route = routes.find((route) => route.path === location.pathname);
const sourceLink = `https://github.com/wbkd/react-flow/tree/main/example/src/${route.label}/index.js`;
return (
<a className="sourcedisplay" href={sourceLink}>
{'<Source />'}
</a>
);
});
const Header = () => {
const [menuOpen, setMenuOpen] = useState();
return (
<header>
<a className="logo" href="https://github.com/wbkd/react-flow">
React Flow
React Flow Dev
</a>
<nav className={menuOpen ? 'is-open' : ''}>
{navLinks.map((route) => (
@@ -124,7 +107,6 @@ const Header = () => {
ReactDOM.render(
<Router forceRefresh={true}>
<Header />
<SourceDisplay />
<Switch>
{routes.map((route) => (
<Route exact path={route.path} render={() => <route.component />} key={route.path} />