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

chore(examples): update imports

Browse Source
This commit is contained in:
moklick
2022-08-29 10:57:44 +02:00
parent 408590a657
commit dc7fb04ba0
35 changed files with 137 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -4,7 +4,7 @@
<div align="center">
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads)
![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
@@ -36,7 +36,7 @@ You can find more information in our [React Flow Pro FAQs](https://pro.reactflow
The easiest way to get the latest version of React Flow is to install it via npm:
```bash
npm install react-flow-renderer
npm install reactflow
```
## Quick Start
@@ -44,7 +44,7 @@ npm install react-flow-renderer
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
```jsx
import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { MiniMap, Controls } from 'reactflow';
function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
return (

3
examples/nextjs/pages/Backgrounds/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { FC } from 'react';
import {
ReactFlow,
import ReactFlow, {
Node,
ReactFlowProvider,
useNodesState,

5
examples/nextjs/pages/ControlledUncontrolled/index.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import {
ReactFlow,
import ReactFlow, {
useReactFlow,
Node,
Edge,
@@ -9,7 +8,7 @@ import {
useEdgesState,
Background,
BackgroundVariant,
} from '@react-flow/bunde';
} from 'reactflow';
const defaultNodes: Node[] = [
{

3
examples/nextjs/pages/CustomConnectionLine/index.tsx
View File

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

3
examples/nextjs/pages/CustomNode/index.tsx
View File

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

2
examples/nextjs/pages/DefaultNodes/index.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { ReactFlow, useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
const defaultNodes: Node[] = [
{

8
examples/nextjs/pages/DragHandle/index.tsx
View File

@@ -1,11 +1,5 @@
import React, { MouseEvent } from 'react';
import {
ReactFlow,
Node,
Edge,
useNodesState,
useEdgesState,
} from '@react-flow/core';
import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
import DragHandleNode from './DragHandleNode';

3
examples/nextjs/pages/DragNDrop/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState, DragEvent } from 'react';
import {
ReactFlow,
import ReactFlow, {
ReactFlowProvider,
addEdge,
ReactFlowInstance,

3
examples/nextjs/pages/EdgeTypes/index.tsx
View File

@@ -3,8 +3,7 @@
*/
import React, { useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
Background,
Controls,
MiniMap,

3
examples/nextjs/pages/Edges/index.tsx
View File

@@ -1,8 +1,7 @@
import React, { MouseEvent, useCallback } from 'react';
import {
import ReactFlow, {
Controls,
Background,
ReactFlow,
MiniMap,
addEdge,
Connection,

3
examples/nextjs/pages/Empty/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { MouseEvent, CSSProperties, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
Background,
BackgroundVariant,
Controls,

3
examples/nextjs/pages/FloatingEdges/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
Background,
addEdge,
ReactFlowInstance,

2
examples/nextjs/pages/Hidden/index.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useCallback } from 'react';
import { ReactFlow, addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
const initialNodes: Node[] = [
{

3
examples/nextjs/pages/Interaction/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
import {
ReactFlow,
import ReactFlow, {
addEdge,
Node,
Connection,

3
examples/nextjs/pages/Layouting/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback } from 'react';
import {
import ReactFlow, {
Controls,
ReactFlow,
ReactFlowProvider,
addEdge,
Connection,

3
examples/nextjs/pages/MultiFlows/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { FC } from 'react';
import {
ReactFlow,
import ReactFlow, {
Background,
addEdge,
Node,

3
examples/nextjs/pages/NestedNodes/index.tsx
View File

@@ -1,9 +1,8 @@
import React, { useState, MouseEvent, useCallback } from 'react';
import {
import ReactFlow, {
Controls,
MiniMap,
Background,
ReactFlow,
addEdge,
useNodesState,
useEdgesState,

2
examples/nextjs/pages/NodeTypeChange/index.tsx
View File

@@ -1,6 +1,6 @@
import React, { CSSProperties, useCallback } from 'react';
import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
const initialNodes: Node[] = [
{

4
examples/nextjs/pages/NodeTypesObjectChange/index.tsx
View File

@@ -1,7 +1,5 @@
import React, { useState, CSSProperties, FC, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
addEdge,
Node,
Position,

4
examples/nextjs/pages/Overview/index.tsx
View File

@@ -1,7 +1,5 @@
import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
addEdge,
Node,
Viewport,

3
examples/nextjs/pages/Provider/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { MouseEvent, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
Controls,
ReactFlowProvider,
addEdge,

2
examples/nextjs/pages/SaveRestore/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { ReactFlow, ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
import Controls from './Controls';
const initialNodes: Node[] = [

3
examples/nextjs/pages/Stress/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState, CSSProperties, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
ReactFlowInstance,
Edge,
Node,

3
examples/nextjs/pages/Subflow/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState, MouseEvent, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
addEdge,
Node,
Edge,

2
examples/nextjs/pages/Switch/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { MouseEvent, useCallback } from 'react';
import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

2
examples/nextjs/pages/TouchDevice/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
import styles from './touch-device.module.css';

5
examples/nextjs/pages/Undirectional/index.tsx
View File

@@ -1,7 +1,5 @@
import React, { MouseEvent, useCallback } from 'react';
import {
ReactFlow,
import ReactFlow, {
useReactFlow,
NodeTypes,
addEdge,
@@ -15,6 +13,7 @@ import {
useNodesState,
useEdgesState,
} from 'reactflow';
import CustomNode from './CustomNode';
const initialNodes: Node[] = [

3
examples/nextjs/pages/UpdatableEdge/index.tsx
View File

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

2
examples/nextjs/pages/UpdateNode/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from 'reactflow';
import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
import styles from './updatenode.module.css';

3
examples/nextjs/pages/UseReactFlow/index.tsx
View File

@@ -1,8 +1,7 @@
import React, { useCallback, MouseEvent, useEffect } from 'react';
import {
import ReactFlow, {
Background,
MiniMap,
ReactFlow,
Node,
addEdge,
useReactFlow,

3
examples/nextjs/pages/UseUpdateNodeInternals/index.tsx
View File

@@ -1,6 +1,5 @@
import { useCallback, MouseEvent } from 'react';
import {
ReactFlow,
import ReactFlow, {
NodeTypes,
addEdge,
useReactFlow,

3
examples/nextjs/pages/Validation/index.tsx
View File

@@ -1,6 +1,5 @@
import React, { FC, useCallback, useState } from 'react';
import {
ReactFlow,
import ReactFlow, {
addEdge,
Handle,
Connection,

4
examples/nextjs/pages/index.tsx
View File

@@ -1,8 +1,6 @@
import React, { MouseEvent } from 'react';
import {
import ReactFlow, {
MiniMap,
ReactFlow,
Background,
BackgroundVariant,
Controls,

104
packages/reactflow/README.md
View File

@@ -1,16 +1,104 @@
# reactflow
![readme-header-dark](https://user-images.githubusercontent.com/3797215/156384064-08a889d6-73c0-4cbf-8ff3-28dc601d1f5f.svg#gh-dark-mode-only)
![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only)
Bundles:
<div align="center">
* @react-flow/core
* @react-flow/background
* @react-flow/controls
* @react-flow/minimap
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads)
![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
A highly customizable React component for building interactive graphs and node-based editors.
## Installation
[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
```sh
</div>
---
## Key Features
- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges
- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed
- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions)
- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls)
- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
## Commercial Usage / Attribution
React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq).
## Installation
The easiest way to get the latest version of React Flow is to install it via npm:
```bash
npm install reactflow
```
## Quick Start
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
```jsx
import ReactFlow, { MiniMap, Controls } from 'reactflow';
function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
</ReactFlow>
);
}
```
## Development
Before you can start developing please make sure that you have yarn classic installed (`npm i -g yarn`). Then install the dependencies using yarn: `yarn`.
For local development, you can use `yarn dev`. This will run preconstruct and build all the packages.
## Testing
Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do:
```sh
npm run test
```
## Maintainers
React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs).
## Community Packages
- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
## Credits
React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
- [zustand](https://github.com/pmndrs/zustand) - internal state management
## License
React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE).

4
packages/reactflow/src/index.ts
View File

@@ -2,3 +2,7 @@ export * from '@react-flow/core';
export * from '@react-flow/minimap';
export * from '@react-flow/controls';
export * from '@react-flow/background';
import { ReactFlow } from '@react-flow/core';
export default ReactFlow;