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

refactor(examples): switch examples from cra to nextjs

Browse Source
This commit is contained in:
Christopher Möller
2022-07-19 17:23:26 +02:00
parent 62c417263c
commit be4dd6f1fa
86 changed files with 755 additions and 45859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
examples/demo/.gitignore vendored
View File

@@ -1,25 +0,0 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/src_oldapi

23
examples/demo/README.md
View File

@@ -1,23 +0,0 @@
# React Flow Examples
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Installation
```sh
npm install
```
## Start
Starts a dev server at http://localhost:3000
```sh
npm start
```
## Build
```sh
npm run build
```

39417
examples/demo/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

42
examples/demo/package.json
View File

@@ -1,42 +0,0 @@
{
"name": "react-flow-examples",
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-flow/core": "11.0.0",
"dagre": "^0.8.5",
"localforage": "^1.10.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34",
"@types/react-dom": "^18.0.6",
"@types/react-router-dom": "^5.3.3"
}
}

1
examples/demo/public/_redirects
View File

@@ -1 +0,0 @@
/* /index.html 200

12
examples/demo/public/index.html
View File

@@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React Flow Examples</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

3
examples/demo/public/robots.txt
View File

@@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

25
examples/demo/src/DragNDrop/Sidebar.tsx
View File

@@ -1,25 +0,0 @@
import React, { DragEvent } from 'react';
const onDragStart = (event: DragEvent, nodeType: string) => {
event.dataTransfer.setData('application/reactflow', nodeType);
event.dataTransfer.effectAllowed = 'move';
};
const Sidebar = () => {
return (
<aside>
<div className="description">You can drag these nodes to the pane on the left.</div>
<div className="react-flow__node-input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
Input Node
</div>
<div className="react-flow__node-default" onDragStart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
Default Node
</div>
<div className="react-flow__node-output" onDragStart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
Output Node
</div>
</aside>
);
};
export default Sidebar;

13
examples/demo/src/MultiFlows/multiflows.css
View File

@@ -1,13 +0,0 @@
.react-flow__example-multiflows {
display: flex;
height: 100%;
}
.react-flow__example-multiflows .react-flow {
width: 100%;
height: 100%;
}
.react-flow__example-multiflows .react-flow:first-child {
border-right: 2px solid #333;
}

31
examples/demo/src/Validation/validation.css
View File

@@ -1,31 +0,0 @@
.validationflow .react-flow__node {
width: 150px;
border-radius: 5px;
padding: 10px;
color: #555;
border: 1px solid #ddd;
text-align: center;
font-size: 12px;
}
.validationflow .react-flow__node-customnode {
background: #e6e6e9;
border: 1px solid #ddd;
}
.react-flow__node-custominput .react-flow__handle {
background: #e6e6e9;
}
.validationflow .react-flow__node-custominput {
background: #fff;
}
.validationflow .react-flow__handle-connecting {
background: #ff6060;
}
.validationflow .react-flow__handle-valid {
background: #55dd99;
}

82
examples/demo/src/index.css
View File

@@ -1,82 +0,0 @@
body {
font-family: sans-serif;
color: #111;
}
html,
body,
#root {
margin: 0;
height: 100%;
}
#root {
display: flex;
flex-direction: column;
}
header {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
font-weight: 700;
align-items: center;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
header a,
header a:focus,
header a:active,
header a:visited {
color: #111;
}
header a:hover {
color: #333;
}
header select {
margin-left: 1em;
}
.overview-example__add {
display: none;
}
.react-flow__node a {
font-weight: 700;
color: #111;
}
.react-flow__node.dark-node {
background: #0041d0;
color: #f8f8f8;
}
.react-flow__node.dark {
background: #557;
color: #f8f8f8;
}
.react-flow__node-selectorNode {
font-size: 12px;
background: #f0f2f3;
border: 1px solid 555;
border-radius: 5px;
text-align: center;
}
.react-flow__node-selectorNode .react-flow__handle {
border-color: #f0f2f3;
}
@media screen and (min-width: 768px) {
.overview-example__add {
display: block;
}
}

203
examples/demo/src/index.tsx
View File

@@ -1,203 +0,0 @@
import { ChangeEvent } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Basic from './Basic';
import ControlledUncontrolled from './ControlledUncontrolled';
import CustomConnectionLine from './CustomConnectionLine';
import CustomNode from './CustomNode';
import DefaultNodes from './DefaultNodes';
import DragHandle from './DragHandle';
import DragNDrop from './DragNDrop';
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 UseReactFlow from './UseReactFlow';
import Validation from './Validation';
import UseKeyPress from './UseKeyPress';
const routes = [
{
path: '/',
component: Overview,
},
{
path: '/basic',
component: Basic,
},
{
path: '/default-nodes',
component: DefaultNodes,
},
{
path: '/custom-connectionline',
component: CustomConnectionLine,
},
{
path: '/custom-node',
component: CustomNode,
},
{
path: '/draghandle',
component: DragHandle,
},
{
path: '/dragndrop',
component: DragNDrop,
},
{
path: '/edges',
component: Edges,
},
{
path: '/edge-types',
component: EdgeTypes,
},
{
path: '/empty',
component: Empty,
},
{
path: '/floating-edges',
component: FloatingEdges,
},
{
path: '/hidden',
component: Hidden,
},
{
path: '/interaction',
component: Interaction,
},
{
path: '/layouting',
component: Layouting,
},
{
path: '/multiflows',
component: MultiFlows,
},
{
path: '/nested-nodes',
component: NestedNodes,
},
{
path: '/nodetype-change',
component: NodeTypeChange,
},
{
path: '/nodetypesobject-change',
component: NodeTypesObjectChange,
},
{
path: '/provider',
component: Provider,
},
{
path: '/save-restore',
component: SaveRestore,
},
{
path: '/stress',
component: Stress,
},
{
path: '/subflow',
component: Subflow,
},
{
path: '/switch',
component: SwitchFlow,
},
{
path: '/touch-device',
component: TouchDevice,
},
{
path: '/undirectional',
component: Undirectional,
},
{
path: '/updatable-edge',
component: UpdatableEdge,
},
{
path: '/update-node',
component: UpdateNode,
},
{
path: '/usereactflow',
component: UseReactFlow,
},
{
path: '/useupdatenodeinternals',
component: UseUpdateNodeInternals,
},
{
path: '/validation',
component: Validation,
},
{
path: '/controlled-uncontrolled',
component: ControlledUncontrolled,
},
{
path: '/use-key-press',
component: UseKeyPress,
},
];
const Header = () => {
const navigate = useNavigate();
const location = useLocation();
const onChange = (event: ChangeEvent<HTMLSelectElement>) => navigate(event.target.value);
return (
<header>
<a className="logo" href="https://github.com/wbkd/react-flow">
React Flow Dev
</a>
<select defaultValue={location.pathname} onChange={onChange}>
{routes.map((route) => (
<option value={route.path} key={route.path}>
{route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
</option>
))}
</select>
</header>
);
};
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<BrowserRouter>
<Header />
<Routes>
{routes.map((route) => (
<Route path={route.path} key={route.path} element={<route.component />} />
))}
</Routes>
</BrowserRouter>
);

1
examples/demo/src/react-app-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="react-scripts" />

5
examples/nextjs/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

4
examples/nextjs/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "nextjs",
"name": "react-flow-examples",
"version": "0.1.0",
"private": true,
"scripts": {
@@ -11,11 +11,13 @@
"dependencies": {
"@preconstruct/next": "^4.0.0",
"@react-flow/core": "11.0.0",
"dagre": "^0.8.5",
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/dagre": "^0.7.47",
"eslint": "8.19.0",
"eslint-config-next": "12.2.2"
}

2
examples/demo/src/ControlledUncontrolled/index.tsx → examples/nextjs/pages/ControlledUncontrolled/index.tsx
View File

@@ -1,3 +1,5 @@
import React from 'react';
import ReactFlow, {
useReactFlow,
Background,

0
examples/demo/src/CustomConnectionLine/ConnectionLine.tsx → examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
View File

2
examples/demo/src/CustomConnectionLine/index.tsx → examples/nextjs/pages/CustomConnectionLine/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import ReactFlow, {
Node,
addEdge,

0
examples/demo/src/CustomNode/ColorSelectorNode.tsx → examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
View File

2
examples/demo/src/CustomNode/index.tsx → examples/nextjs/pages/CustomNode/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect, MouseEvent } from 'react';
import React, { useState, useEffect, MouseEvent } from 'react';
import { ChangeEvent } from 'react';
import ReactFlow, {

2
examples/demo/src/DefaultNodes/index.tsx → examples/nextjs/pages/DefaultNodes/index.tsx
View File

@@ -1,3 +1,5 @@
import React from 'react';
import ReactFlow, {
useReactFlow,
Background,

2
examples/demo/src/DragHandle/DragHandleNode.tsx → examples/nextjs/pages/DragHandle/DragHandleNode.tsx
View File

@@ -1,4 +1,4 @@
import { memo, FC } from 'react';
import React, { memo, FC } from 'react';
import {
Handle,

2
examples/demo/src/DragHandle/index.tsx → examples/nextjs/pages/DragHandle/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import React, { MouseEvent } from 'react';
import ReactFlow, {
Node,
Edge,

40
examples/nextjs/pages/DragNDrop/Sidebar.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React, { DragEvent } from 'react';
import styles from './dnd.module.css';
const onDragStart = (event: DragEvent, nodeType: string) => {
event.dataTransfer.setData('application/reactflow', nodeType);
event.dataTransfer.effectAllowed = 'move';
};
const Sidebar = () => {
return (
<aside className={styles.aside}>
<div className={styles.description}>
You can drag these nodes to the pane on the left.
</div>
<div
className='react-flow__node-input'
onDragStart={(event: DragEvent) => onDragStart(event, 'input')}
draggable
>
Input Node
</div>
<div
className='react-flow__node-default'
onDragStart={(event: DragEvent) => onDragStart(event, 'default')}
draggable
>
Default Node
</div>
<div
className='react-flow__node-output'
onDragStart={(event: DragEvent) => onDragStart(event, 'output')}
draggable
>
Output Node
</div>
</aside>
);
};
export default Sidebar;

18
examples/demo/src/DragNDrop/dnd.css → examples/nextjs/pages/DragNDrop/dnd.module.css
View File

@@ -4,34 +4,34 @@
height: 100%;
}
.dndflow aside {
.aside {
border-right: 1px solid #eee;
padding: 15px 10px;
font-size: 12px;
background: #fcfcfc;
}
.dndflow aside > * {
.aside > * {
margin-bottom: 10px;
cursor: grab;
}
.dndflow aside .description {
.description {
margin-bottom: 10px;
}
.dndflow .reactflow-wrapper {
.wrapper {
flex-grow: 1;
height: 100%;
}
@media screen and (min-width: 768px) {
.dndflow {
flex-direction: row;
}
.dndflow aside {
.aside {
width: 20%;
max-width: 180px;
}
.dndflow {
flex-direction: row;
}
}

8
examples/demo/src/DragNDrop/index.tsx → examples/nextjs/pages/DragNDrop/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, DragEvent } from 'react';
import React, { useState, DragEvent } from 'react';
import ReactFlow, {
ReactFlowProvider,
addEdge,
@@ -13,7 +13,7 @@ import ReactFlow, {
import Sidebar from './Sidebar';
import './dnd.css';
import styles from './dnd.module.css';
const initialNodes: Node[] = [
{
@@ -63,9 +63,9 @@ const DnDFlow = () => {
};
return (
<div className='dndflow'>
<div className={styles.dndflow}>
<ReactFlowProvider>
<div className='reactflow-wrapper'>
<div className={styles.wrapper}>
<ReactFlow
nodes={nodes}
edges={edges}

1
examples/demo/src/EdgeTypes/index.tsx → examples/nextjs/pages/EdgeTypes/index.tsx
View File

@@ -1,6 +1,7 @@
/**
* Example for checking the different edge types and source and target positions
*/
import React from 'react';
import ReactFlow, {
addEdge,

0
examples/demo/src/EdgeTypes/utils.ts → examples/nextjs/pages/EdgeTypes/utils.ts
View File

2
examples/demo/src/Edges/CustomEdge.tsx → examples/nextjs/pages/Edges/CustomEdge.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from 'react';
import React, { FC } from 'react';
import { EdgeProps, getBezierPath } from '@react-flow/core';
const CustomEdge: FC<EdgeProps> = ({

2
examples/demo/src/Edges/CustomEdge2.tsx → examples/nextjs/pages/Edges/CustomEdge2.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from 'react';
import React, { FC } from 'react';
import {
EdgeProps,
getBezierPath,

2
examples/demo/src/Edges/index.tsx → examples/nextjs/pages/Edges/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import React, { MouseEvent } from 'react';
import ReactFlow, {
addEdge,
Background,

2
examples/demo/src/Empty/index.tsx → examples/nextjs/pages/Empty/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent, CSSProperties } from 'react';
import React, { MouseEvent, CSSProperties } from 'react';
import ReactFlow, {
addEdge,

2
examples/demo/src/FloatingEdges/FloatingConnectionLine.tsx → examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from 'react';
import React, { FC } from 'react';
import {
getBezierPath,
ConnectionLineComponentProps,

2
examples/demo/src/FloatingEdges/FloatingEdge.tsx → examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx
View File

@@ -1,4 +1,4 @@
import { FC, useMemo, CSSProperties } from 'react';
import React, { FC, useMemo, CSSProperties } from 'react';
import {
EdgeProps,
useStore,

12
examples/demo/src/FloatingEdges/index.tsx → examples/nextjs/pages/FloatingEdges/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import ReactFlow, {
addEdge,
@@ -10,17 +10,17 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import './style.css';
import styles from './style.module.css';
import FloatingEdge from './FloatingEdge';
import FloatingConnectionLine from './FloatingConnectionLine';
import FloatingEdge from './FloatingEdge';
import { createElements } from './utils';
const onInit = (reactFlowInstance: ReactFlowInstance) =>
reactFlowInstance.fitView();
const { nodes: initialNodes, edges: initialEdges } = createElements();
const { nodes: initialNodes, edges: initialEdges } =
typeof window !== 'undefined' ? createElements() : { nodes: [], edges: [] };
const edgeTypes: EdgeTypes = {
floating: FloatingEdge,
};
@@ -34,7 +34,7 @@ const FloatingEdges = () => {
}, []);
return (
<div className='floatingedges'>
<div className={styles.floatingedges}>
<ReactFlow
nodes={nodes}
edges={edges}

2
examples/demo/src/FloatingEdges/style.css → examples/nextjs/pages/FloatingEdges/style.module.css
View File

@@ -4,6 +4,6 @@
height: 100%;
}
.floatingedges .react-flow__handle {
.floatingedges :global .react-flow__handle {
opacity: 0;
}

2
examples/demo/src/FloatingEdges/utils.ts → examples/nextjs/pages/FloatingEdges/utils.ts
View File

@@ -1,4 +1,4 @@
import { Position, XYPosition, Node, Edge } from '@react-flow/core';
import React, { Position, XYPosition, Node, Edge } from '@react-flow/core';
// this helper function returns the intersection point
// of the line between the center of the intersectionNode and the target node

3
examples/demo/src/Hidden/index.tsx → examples/nextjs/pages/Hidden/index.tsx
View File

@@ -1,6 +1,5 @@
import { useState, useCallback } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { useEffect } from 'react';
import ReactFlow, {
addEdge,
MiniMap,

6
examples/demo/src/Interaction/index.tsx → examples/nextjs/pages/Interaction/index.tsx
View File

@@ -1,4 +1,8 @@
import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
import React, {
useState,
MouseEvent as ReactMouseEvent,
WheelEvent,
} from 'react';
import ReactFlow, {
addEdge,
MiniMap,

8
examples/demo/src/Layouting/index.tsx → examples/nextjs/pages/Layouting/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import ReactFlow, {
ReactFlowProvider,
addEdge,
@@ -15,7 +15,7 @@ import dagre from 'dagre';
import initialItems from './initial-elements';
import './layouting.css';
import styles from './layouting.module.css';
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
@@ -86,7 +86,7 @@ const LayoutFlow = () => {
};
return (
<div className='layoutflow'>
<div className={styles.layoutflow}>
<ReactFlowProvider>
<ReactFlow
nodes={nodes}
@@ -99,7 +99,7 @@ const LayoutFlow = () => {
>
<Controls />
</ReactFlow>
<div className='controls'>
<div className={styles.controls}>
<button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
vertical layout
</button>

0
examples/demo/src/Layouting/initial-elements.ts → examples/nextjs/pages/Layouting/initial-elements.ts
View File

2
examples/demo/src/Layouting/layouting.css → examples/nextjs/pages/Layouting/layouting.module.css
View File

@@ -3,7 +3,7 @@
position: relative;
}
.layoutflow .controls {
.controls {
position: absolute;
right: 10px;
top: 10px;

6
examples/demo/src/MultiFlows/index.tsx → examples/nextjs/pages/MultiFlows/index.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from 'react';
import React, { FC } from 'react';
import ReactFlow, {
addEdge,
@@ -12,7 +12,7 @@ import ReactFlow, {
MarkerType,
} from '@react-flow/core';
import './multiflows.css';
import styles from './multiflows.module.css';
const initialNodes: Node[] = [
{
@@ -77,7 +77,7 @@ const Flow: FC<{ id: string }> = ({ id }) => {
};
const MultiFlows: FC = () => (
<div className='react-flow__example-multiflows'>
<div className={styles.multiflows}>
<Flow id='flow-a' />
<Flow id='flow-b' />
</div>

13
examples/nextjs/pages/MultiFlows/multiflows.module.css Normal file
View File

@@ -0,0 +1,13 @@
.multiflows {
display: flex;
height: 100%;
}
.multiflows :global .react-flow {
width: 100%;
height: 100%;
}
.multiflows :global .react-flow:first-child {
border-right: 2px solid #333;
}

2
examples/demo/src/NestedNodes/index.tsx → examples/nextjs/pages/NestedNodes/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, MouseEvent, useCallback } from 'react';
import React, { useState, MouseEvent, useCallback } from 'react';
import ReactFlow, {
addEdge,

2
examples/demo/src/NodeTypeChange/index.tsx → examples/nextjs/pages/NodeTypeChange/index.tsx
View File

@@ -1,4 +1,4 @@
import { CSSProperties } from 'react';
import React, { CSSProperties } from 'react';
import ReactFlow, {
addEdge,

2
examples/demo/src/NodeTypesObjectChange/index.tsx → examples/nextjs/pages/NodeTypesObjectChange/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, CSSProperties, FC } from 'react';
import React, { useState, CSSProperties, FC } from 'react';
import ReactFlow, {
addEdge,

3
examples/demo/src/Overview/index.tsx → examples/nextjs/pages/Overview/index.tsx
View File

@@ -1,8 +1,9 @@
import {
import React, {
MouseEvent as ReactMouseEvent,
CSSProperties,
useCallback,
} from 'react';
import ReactFlow, {
addEdge,
MiniMap,

15
examples/demo/src/Provider/Sidebar.tsx → examples/nextjs/pages/Provider/Sidebar.tsx
View File

@@ -1,5 +1,8 @@
import React from 'react';
import { useStore, useStoreApi } from '@react-flow/core';
import styles from './provider.module.css';
const Sidebar = () => {
const store = useStoreApi();
const nodeInternals = useStore((store) => store.nodeInternals);
@@ -11,17 +14,17 @@ const Sidebar = () => {
};
return (
<aside>
<div className='description'>
<aside className={styles.aside}>
<div className={styles.description}>
This is an example of how you can access the internal state outside of
the ReactFlow component.
</div>
<div className='title'>Zoom & pan transform</div>
<div className='transform'>
<div className={styles.title}>Zoom & pan transform</div>
<div className={styles.transform}>
[{transform[0].toFixed(2)}, {transform[1].toFixed(2)},{' '}
{transform[2].toFixed(2)}]
</div>
<div className='title'>Nodes</div>
<div className={styles.title}>Nodes</div>
{Array.from(nodeInternals).map(([, node]) => (
<div key={node.id}>
Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
@@ -29,7 +32,7 @@ const Sidebar = () => {
</div>
))}
<div className='selectall'>
<div className={styles.selectall}>
<button onClick={selectAll}>select all nodes</button>
</div>
</aside>

8
examples/demo/src/Provider/index.tsx → examples/nextjs/pages/Provider/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import React, { MouseEvent } from 'react';
import ReactFlow, {
ReactFlowProvider,
addEdge,
@@ -14,7 +14,7 @@ import ReactFlow, {
import Sidebar from './Sidebar';
import './provider.css';
import styles from './provider.module.css';
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onInit = (reactFlowInstance: ReactFlowInstance) =>
@@ -44,10 +44,10 @@ const ProviderFlow = () => {
setEdges((els) => addEdge(params, els));
return (
<div className='providerflow'>
<div className={styles.providerflow}>
<ReactFlowProvider>
<Sidebar />
<div className='reactflow-wrapper'>
<div className={styles.wrapper}>
<ReactFlow
nodes={nodes}
edges={edges}

16
examples/demo/src/Provider/provider.css → examples/nextjs/pages/Provider/provider.module.css
View File

@@ -4,32 +4,32 @@
height: 100%;
}
.providerflow aside {
.aside {
border-right: 1px solid #eee;
padding: 15px 10px;
font-size: 12px;
background: #fcfcfc;
}
.providerflow aside .description {
.description {
margin-bottom: 10px;
}
.providerflow aside .title {
.title {
font-weight: 700;
margin-bottom: 5px;
}
.providerflow aside .transform {
.transform {
margin-bottom: 20px;
}
.providerflow .reactflow-wrapper {
.wrapper {
flex-grow: 1;
height: 100%;
}
.providerflow .selectall {
.selectall {
margin-top: 10px;
}
@@ -38,8 +38,8 @@
flex-direction: row;
}
.providerflow aside {
.aside {
width: 20%;
max-width: 250px;
}
}
}

16
examples/demo/src/SaveRestore/Controls.tsx → examples/nextjs/pages/SaveRestore/Controls.tsx
View File

@@ -7,6 +7,8 @@ import {
} from '@react-flow/core';
import localforage from 'localforage';
import styles from './save.module.css';
localforage.config({
name: 'react-flow',
storeName: 'flows',
@@ -60,10 +62,16 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
}, [setNodes]);
return (
<div className='save__controls'>
<button onClick={onSave}>save</button>
<button onClick={onRestore}>restore</button>
<button onClick={onAdd}>add node</button>
<div className={styles.controls}>
<button className={styles.button} onClick={onSave}>
save
</button>
<button className={styles.button} onClick={onRestore}>
restore
</button>
<button className={styles.button} onClick={onAdd}>
add node
</button>
</div>
);
};

4
examples/demo/src/SaveRestore/index.tsx → examples/nextjs/pages/SaveRestore/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import ReactFlow, {
ReactFlowProvider,
Node,
@@ -11,8 +11,6 @@ import ReactFlow, {
import Controls from './Controls';
import './save.css';
const initialNodes: Node[] = [
{ id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },

4
examples/demo/src/SaveRestore/save.css → examples/nextjs/pages/SaveRestore/save.module.css
View File

@@ -1,4 +1,4 @@
.save__controls {
.controls {
position: absolute;
right: 10px;
top: 10px;
@@ -6,6 +6,6 @@
font-size: 12px;
}
.save__controls button {
.button {
margin-left: 5px;
}

2
examples/demo/src/Stress/index.tsx → examples/nextjs/pages/Stress/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, CSSProperties, useCallback } from 'react';
import React, { useState, CSSProperties, useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,

0
examples/demo/src/Stress/utils.ts → examples/nextjs/pages/Stress/utils.ts
View File

2
examples/demo/src/Subflow/DebugNode.tsx → examples/nextjs/pages/Subflow/DebugNode.tsx
View File

@@ -1,4 +1,4 @@
import { memo, FC, CSSProperties } from 'react';
import React, { memo, FC, CSSProperties } from 'react';
import { Handle, NodeProps, Position } from '@react-flow/core';

2
examples/demo/src/Subflow/index.tsx → examples/nextjs/pages/Subflow/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, MouseEvent, useCallback } from 'react';
import React, { useState, MouseEvent, useCallback } from 'react';
import ReactFlow, {
addEdge,

2
examples/demo/src/Switch/index.tsx → examples/nextjs/pages/Switch/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import React, { MouseEvent } from 'react';
import ReactFlow, {
addEdge,
Node,

6
examples/demo/src/TouchDevice/index.tsx → examples/nextjs/pages/TouchDevice/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import ReactFlow, {
Node,
Edge,
@@ -9,7 +9,7 @@ import ReactFlow, {
addEdge,
} from '@react-flow/core';
import './touch-device.css';
import styles from './touch-device.module.css';
const initialNodes: Node[] = [
{
@@ -59,7 +59,7 @@ const TouchDeviceFlow = () => {
onConnectStop={onConnectStop}
onClickConnectStart={onClickConnectStart}
onClickConnectStop={onClickConnectStop}
className='touchdevice-flow'
className={styles.flow}
/>
);
};

4
examples/demo/src/TouchDevice/touch-device.css → examples/nextjs/pages/TouchDevice/touch-device.module.css
View File

@@ -1,11 +1,11 @@
.touchdevice-flow .react-flow__handle {
.flow :global .react-flow__handle {
width: 20px;
height: 20px;
border-radius: 3px;
background-color: #9f7aea;
}
.touchdevice-flow .react-flow__handle.connecting {
.flow :global .react-flow__handle.connecting {
animation: bounce 1600ms infinite ease-out;
}

0
examples/demo/src/Undirectional/CustomNode.tsx → examples/nextjs/pages/Undirectional/CustomNode.tsx
View File

0
examples/demo/src/Undirectional/index.tsx → examples/nextjs/pages/Undirectional/index.tsx
View File

0
examples/demo/src/UpdatableEdge/index.tsx → examples/nextjs/pages/UpdatableEdge/index.tsx
View File

8
examples/demo/src/UpdateNode/index.tsx → examples/nextjs/pages/UpdateNode/index.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import ReactFlow, {
Node,
Edge,
@@ -6,7 +6,7 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
import './updatenode.css';
import styles from './updatenode.module.css';
const initialNodes: Node[] = [
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
@@ -75,14 +75,14 @@ const UpdateNode = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
>
<div className='updatenode__controls'>
<div className={styles.controls}>
<label>label:</label>
<input
value={nodeName}
onChange={(evt) => setNodeName(evt.target.value)}
/>
<label className='updatenode__bglabel'>background:</label>
<label className={styles.bgLabel}>background:</label>
<input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
<div className='updatenode__checkboxwrapper'>

8
examples/demo/src/UpdateNode/updatenode.css → examples/nextjs/pages/UpdateNode/updatenode.module.css
View File

@@ -1,4 +1,4 @@
.updatenode__controls {
.controls {
position: absolute;
right: 10px;
top: 10px;
@@ -6,15 +6,15 @@
font-size: 12px;
}
.updatenode__controls label {
.controlsLabel {
display: block;
}
.updatenode__bglabel {
.bgLabel {
margin-top: 10px;
}
.updatenode__checkboxwrapper {
.checkboxWrapper {
margin-top: 10px;
display: flex;
align-items: center;

1
examples/demo/src/UseKeyPress/index.tsx → examples/nextjs/pages/UseKeyPress/index.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { useKeyPress } from '@react-flow/core';
const UseKeyPressComponent = () => {

2
examples/demo/src/UseReactFlow/index.tsx → examples/nextjs/pages/UseReactFlow/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, MouseEvent, useEffect } from 'react';
import React, { useCallback, MouseEvent, useEffect } from 'react';
import ReactFlow, {
Node,

0
examples/demo/src/UseUpdateNodeInternals/CustomNode.tsx → examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx
View File

2
examples/demo/src/UseUpdateNodeInternals/index.tsx → examples/nextjs/pages/UseUpdateNodeInternals/index.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, CSSProperties, MouseEvent } from 'react';
import React, { useCallback, CSSProperties, MouseEvent } from 'react';
import ReactFlow, {
NodeTypes,

6
examples/demo/src/Validation/index.tsx → examples/nextjs/pages/Validation/index.tsx
View File

@@ -1,4 +1,4 @@
import { FC, useCallback, useState } from 'react';
import React, { FC, useCallback, useState } from 'react';
import ReactFlow, {
addEdge,
Handle,
@@ -13,7 +13,7 @@ import ReactFlow, {
OnConnectStartParams,
} from '@react-flow/core';
import './validation.css';
import styles from './validation.module.css';
const initialNodes: Node[] = [
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
@@ -93,7 +93,7 @@ const ValidationFlow = () => {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
selectNodesOnDrag={false}
className='validationflow'
className={styles.validationflow}
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}

33
examples/nextjs/pages/Validation/validation.module.css Normal file
View File

@@ -0,0 +1,33 @@
.validationflow {
}
.validationflow :global .react-flow__node {
width: 150px;
border-radius: 5px;
padding: 10px;
color: #555;
border: 1px solid #ddd;
text-align: center;
font-size: 12px;
}
.validationflow :global .react-flow__node-customnode {
background: #e6e6e9;
border: 1px solid #ddd;
}
.validationflow :global .react-flow__node-custominput .react-flow__handle {
background: #e6e6e9;
}
.validationflow :global .react-flow__node-custominput {
background: #fff;
}
.validationflow :global .react-flow__handle-connecting {
background: #ff6060;
}
.validationflow :global .react-flow__handle-valid {
background: #55dd99;
}

7
examples/nextjs/pages/_app.js
View File

@@ -1,7 +0,0 @@
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp

66
examples/nextjs/pages/_app.tsx Executable file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import { useRouter } from 'next/router';
import '../styles/globals.css';
const routes = [
'/',
'/ControlledUncontrolled',
'/CustomConnectionLine',
'/CustomNode',
'/DefaultNodes',
'/DragHandle',
'/DragNDrop',
'/EdgeTypes',
'/Edges',
'/Empty',
'/FloatingEdges',
'/Hidden',
'/Interaction',
'/Layouting',
'/MultiFlows',
'/NestedNodes',
'/NodeTypeChange',
'/NodeTypesObjectChange',
'/Overview',
'/Provider',
'/SaveRestore',
'/Stress',
'/Subflow',
'/Switch',
'/TouchDevice',
'/Undirectional',
'/UpdatableEdge',
'/UpdateNode',
'/UseKeyPress',
'/UseReactFlow',
'/UseUpdateNodeInternals',
'/Validation',
];
function MyApp({ Component, pageProps }) {
const router = useRouter();
const onRouteChange = (evt) => {
router.push(evt.target.value);
};
return (
<>
<header>
<a className='logo' href='https://github.com/wbkd/react-flow'>
React Flow Dev
</a>
<select defaultValue={router.pathname} onChange={onRouteChange}>
{routes.map((route) => (
<option value={route} key={route}>
{route === '/' ? 'Basic' : route.substring(1, route.length)}
</option>
))}
</select>
</header>
<Component {...pageProps} />
</>
);
}
export default MyApp;

9
examples/nextjs/pages/index.js
View File

@@ -1,9 +0,0 @@
import ReactFlow from '@react-flow/core';
export default function Home() {
return (
<div style={{ height: '100vh' }}>
<ReactFlow defaultNodes={[]} defaultEdges={[]} />
</div>
);
}

2
examples/demo/src/Basic/index.tsx → examples/nextjs/pages/index.tsx Normal file → Executable file
View File

@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import React, { MouseEvent } from 'react';
import ReactFlow, {
ReactFlowProvider,

BIN
examples/nextjs/public/favicon.ico Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 34 KiB

4
examples/nextjs/public/vercel.svg
View File

@@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

82
examples/nextjs/styles/globals.css
View File

@@ -1,16 +1,82 @@
html,
body {
padding: 0;
font-family: sans-serif;
color: #111;
}
html,
body,
#__next {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
height: 100%;
}
a {
color: inherit;
#__next {
display: flex;
flex-direction: column;
}
header {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
font-weight: 700;
align-items: center;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
* {
box-sizing: border-box;
header a,
header a:focus,
header a:active,
header a:visited {
color: #111;
}
header a:hover {
color: #333;
}
header select {
margin-left: 1em;
}
.overview-example__add {
display: none;
}
.react-flow__node a {
font-weight: 700;
color: #111;
}
.react-flow__node.dark-node {
background: #0041d0;
color: #f8f8f8;
}
.react-flow__node.dark {
background: #557;
color: #f8f8f8;
}
.react-flow__node-selectorNode {
font-size: 12px;
background: #f0f2f3;
border: 1px solid 555;
border-radius: 5px;
text-align: center;
}
.react-flow__node-selectorNode .react-flow__handle {
border-color: #f0f2f3;
}
@media screen and (min-width: 768px) {
.overview-example__add {
display: block;
}
}

28
examples/demo/tsconfig.json → examples/nextjs/tsconfig.json
View File

@@ -1,21 +1,29 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "preserve"
},
"include": ["src"],
"exclude": ["src_oldapi"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}