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

refactor(background): export background as component closes #235

Browse Source
This commit is contained in:
moklick
2020-05-25 15:53:56 +02:00
parent 10cd70c6ee
commit 7324c79fd0
24 changed files with 229 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Basic/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, isNode } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -47,10 +47,10 @@ const BasicFlow = () => {
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
className="react-flow-basic-example"
>
<Background variant="lines" />
<button
onClick={updatePos}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
example/src/CustomNode/index.js
-2
View File
@@ -64,8 +64,6 @@ const CustomNodeFlow = () => {
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
backgroundColor="#888"
backgroundGap={16}
snapToGrid={true}
snapGrid={[16, 16]}
>
example/src/Edges/index.js
+2 -1
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
import CustomEdge from './CustomEdge';
@@ -50,6 +50,7 @@ const EdgesFlow = () => {
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
example/src/Empty/index.js
+12 -12
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -29,18 +29,18 @@ const EmptyFlow = () => {
onElementsRemove={onElementsRemove}
onConnect={p => onConnect(p)}
onNodeDragStop={onNodeDragStop}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
>
<MiniMap />
<Controls />
<button
type="button"
onClick={addRandomNode}
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
add node
</button>
<MiniMap />
<Controls />
<Background variant="lines" />
<button
type="button"
onClick={addRandomNode}
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
add node
</button>
</ReactFlow>
);
}
example/src/Inactive/index.js
+1 -2
View File
@@ -20,12 +20,11 @@ const InactiveFlow = () => {
return (
<ReactFlow
elements={initialElements}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
isInteractive={isInteractive}
>
<MiniMap />
<Controls />
<div
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
example/src/Overview/index.js
+7 -4
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStart = node => console.log('drag start', node);
const onNodeDragStop = node => console.log('drag stop', node);
@@ -59,8 +59,6 @@ const OverviewFlow = () => {
onLoad={onLoad}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
backgroundColor="#888"
backgroundGap={16}
snapToGrid={true}
snapGrid={[16, 16]}
>
@@ -74,11 +72,16 @@ const OverviewFlow = () => {
}}
/>
<Controls />
<Background
color="#888"
gap={16}
/>
<button
type="button"
onClick={addRandomNode}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
className="richexample__add"
className="overview-example__add"
>
add node
</button>
example/src/Stress/index.js
+5 -5
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
import { getElements } from './utils';
const onLoad = graph => {
@@ -40,17 +40,17 @@ const StressGraph = () => {
onLoad={onLoad}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
style={{ width: '100%', height: '100%' }}
backgroundType="lines"
>
<MiniMap />
<Controls />
<Background />
<button
onClick={updatePos}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
>
change pos
</button>
<MiniMap />
<Controls />
</ReactFlow>
);
}
example/src/index.css
+24 -12
View File
@@ -5,11 +5,14 @@ body {
color: #111;
}
html, body {
html,
body {
margin: 0;
}
html, body, #root {
html,
body,
#root {
height: 100%;
}
@@ -32,7 +35,10 @@ header {
line-height: 1;
}
header a, header a:focus, header a:active, header a:visited {
header a,
header a:focus,
header a:active,
header a:visited {
color: #111;
}
@@ -58,7 +64,7 @@ nav {
z-index: 10;
left: 0;
padding: 3%;
background: rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.9);
}
nav.is-open {
@@ -77,7 +83,10 @@ nav a {
margin-bottom: 5px;
}
nav a, nav a:focus, nav a:active, nav a:visited {
nav a,
nav a:focus,
nav a:active,
nav a:visited {
color: #fff;
}
@@ -93,8 +102,8 @@ nav a.active:before {
height: 6px;
background: white;
opacity: 0.5;
left:0;
top:50%;
left: 0;
top: 50%;
transform: translateY(-50%);
}
@@ -107,7 +116,10 @@ nav a.active:before {
font-size: 12px;
}
.sourcedisplay, .sourcedisplay:focus, .sourcedisplay:active, .sourcedisplay:visited {
.sourcedisplay,
.sourcedisplay:focus,
.sourcedisplay:active,
.sourcedisplay:visited {
color: #777;
}
@@ -115,12 +127,12 @@ nav a.active:before {
color: #111;
}
.richexample__add {
.overview-example__add {
display: none;
}
.react-flow__node a {
font-weight :700;
font-weight: 700;
color: #111;
}
@@ -146,7 +158,7 @@ nav a.active:before {
display: none;
}
.richexample__add {
.overview-example__add {
display: block;
}
}
}