diff --git a/example/package.json b/example/package.json index da6cd466..3cfbcea4 100644 --- a/example/package.json +++ b/example/package.json @@ -1,5 +1,5 @@ { - "name": "react-flow-examples", + "name": "react-flow-tests", "version": "0.1.0", "private": true, "dependencies": { diff --git a/example/public/favicon.ico b/example/public/favicon.ico index c2c86b85..731acd59 100644 Binary files a/example/public/favicon.ico and b/example/public/favicon.ico differ diff --git a/example/public/index.html b/example/public/index.html index 6e06a78f..f49c16b5 100644 --- a/example/public/index.html +++ b/example/public/index.html @@ -4,12 +4,10 @@ - - - React Flow Examples + + React Flow - Test Flows -
diff --git a/example/public/logo192.png b/example/public/logo192.png deleted file mode 100644 index fa313abf..00000000 Binary files a/example/public/logo192.png and /dev/null differ diff --git a/example/public/logo512.png b/example/public/logo512.png deleted file mode 100644 index bd5d4b5e..00000000 Binary files a/example/public/logo512.png and /dev/null differ diff --git a/example/public/manifest.json b/example/public/manifest.json deleted file mode 100644 index 080d6c77..00000000 --- a/example/public/manifest.json +++ /dev/null @@ -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" -} diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js deleted file mode 100644 index 3b9ce9fb..00000000 --- a/example/src/Horizontal/index.js +++ /dev/null @@ -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 ( - - - - ); -}; - -export default HorizontalFlow; diff --git a/example/src/index.css b/example/src/index.css index 8ad19a95..76f50147 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -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; } diff --git a/example/src/index.js b/example/src/index.js index 639183b4..3f15d9a8 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -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 ( - - {''} - - ); -}); - const Header = () => { const [menuOpen, setMenuOpen] = useState(); return (
- React Flow + React Flow Dev