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

docs(website): texts, docs, examples, favicon, cleanup

Browse Source
This commit is contained in:
moklick
2020-10-05 17:03:00 +02:00
parent 277e032770
commit aafae0ea70
41 changed files with 390 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/example-flows/CustomNode/ColorSelectorNode.js
+19 -4
View File
@@ -8,15 +8,30 @@ export default memo(({ data }) => {
<Handle
type="target"
position="left"
style={{ background: '#fff' }}
style={{ background: '#555' }}
onConnect={(params) => console.log('handle onConnect', params)}
/>
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
</div>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
<Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
<Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
<input
className="nodrag"
type="color"
onChange={data.onChange}
defaultValue={data.color}
/>
<Handle
type="source"
position="right"
id="a"
style={{ top: 10, background: '#555' }}
/>
<Handle
type="source"
position="right"
id="b"
style={{ bottom: 10, top: 'auto', background: '#555' }}
/>
</>
);
});
website/src/example-flows/CustomNode/index.js
+31 -23
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import ReactFlow, {
isEdge,
removeElements,
@@ -11,15 +12,17 @@ import ColorSelectorNode from './ColorSelectorNode';
import './index.css';
const onLoad = (reactFlowInstance) =>
const onLoad = (reactFlowInstance) => {
console.log('flow loaded:', reactFlowInstance);
setTimeout(() => reactFlowInstance.fitView(), 1);
};
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const initBgColor = '#f0e742';
const initBgColor = '#1A192B';
const connectionLineStyle = { stroke: '#fff' };
const snapGrid = [16, 16];
const snapGrid = [20, 20];
const nodeTypes = {
selectorNode: ColorSelectorNode,
};
@@ -32,7 +35,7 @@ const CustomNodeFlow = () => {
const onChange = (event) => {
setElements((els) =>
els.map((e) => {
if (isEdge(e) || e.id !== 'custom-2') {
if (isEdge(e) || e.id !== '2') {
return e;
}
@@ -53,52 +56,52 @@ const CustomNodeFlow = () => {
setElements([
{
id: 'custom-1',
id: '1',
type: 'input',
data: { label: 'An input node' },
position: { x: 0, y: 50 },
sourcePosition: 'right',
},
{
id: 'custom-2',
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
position: { x: 250, y: 50 },
position: { x: 300, y: 50 },
},
{
id: 'custom-3',
id: '3',
type: 'output',
data: { label: 'Output A' },
position: { x: 550, y: 25 },
position: { x: 650, y: 25 },
targetPosition: 'left',
},
{
id: 'custom-4',
id: '4',
type: 'output',
data: { label: 'Output B' },
position: { x: 550, y: 100 },
position: { x: 650, y: 100 },
targetPosition: 'left',
},
{
id: 'custom-e1-2',
source: 'custom-1',
target: 'custom-2',
id: 'e1-2',
source: '1',
target: '2',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'custom-e2a-3',
source: 'custom-2__a',
target: 'custom-3',
id: 'e2a-3',
source: '2__a',
target: '3',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'custom-e2b-4',
source: 'custom-2__b',
target: 'custom-4',
id: 'e2b-4',
source: '2__b',
target: '4',
animated: true,
style: { stroke: '#fff' },
},
@@ -125,12 +128,17 @@ const CustomNodeFlow = () => {
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
defaultZoom={1.5}
>
<MiniMap
nodeColor={(n) => {
if (n.type === 'input') return 'blue';
nodeStrokeColor={(n) => {
if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor;
if (n.type === 'output') return 'green';
if (n.type === 'output') return '#ff0072';
}}
nodeColor={(n) => {
if (n.type === 'selectorNode') return bgColor;
return '#fff';
}}
/>
<Controls />
website/src/example-flows/Interaction/index.js
+3
View File
@@ -39,6 +39,8 @@ const onElementClick = (event, element) => console.log('click', element);
const onPaneClick = (event) => console.log('onPaneClick', event);
const onPaneScroll = (event) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
const onLoad = (reactFlowInstance) =>
reactFlowInstance.fitView({ padding: 0.2 });
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
@@ -70,6 +72,7 @@ const InteractionFlow = () => {
onPaneClick={captureZoomClick ? onPaneClick : undefined}
onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
onLoad={onLoad}
>
<MiniMap />
<Controls />
website/src/example-flows/Overview/index.js
+33 -50
View File
@@ -33,7 +33,7 @@ const onMoveEnd = (transform) => console.log('zoom/move end', transform);
const initialElements = [
{
id: 'overview-1',
id: '1',
type: 'input',
data: {
label: (
@@ -45,7 +45,7 @@ const initialElements = [
position: { x: 250, y: 0 },
},
{
id: 'overview-2',
id: '2',
data: {
label: (
<>
@@ -56,7 +56,7 @@ const initialElements = [
position: { x: 100, y: 100 },
},
{
id: 'overview-3',
id: '3',
data: {
label: (
<>
@@ -73,36 +73,21 @@ const initialElements = [
},
},
{
id: 'overview-4',
id: '4',
position: { x: 250, y: 200 },
data: {
label: (
<>
You can find the docs on{' '}
<a
href="https://github.com/wbkd/react-flow"
target="_blank"
rel="noopener noreferrer"
>
Github
</a>
</>
),
label: 'Another default node',
},
},
{
id: 'overview-5',
id: '5',
data: {
label: (
<>
Or check out the other <strong>examples</strong>
</>
),
label: 'Node id: 5',
},
position: { x: 250, y: 325 },
},
{
id: 'overview-6',
id: '6',
type: 'output',
data: {
label: (
@@ -114,43 +99,38 @@ const initialElements = [
position: { x: 100, y: 480 },
},
{
id: 'overview-7',
id: '7',
type: 'output',
data: { label: 'Another output node' },
position: { x: 400, y: 450 },
},
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{
id: 'overview-e1-2',
source: 'overview-1',
target: 'overview-2',
label: 'this is an edge label',
},
{ id: 'overview-e1-3', source: 'overview-1', target: 'overview-3' },
{
id: 'overview-e3-4',
source: 'overview-3',
target: 'overview-4',
id: 'e3-4',
source: '3',
target: '4',
animated: true,
label: 'animated edge',
},
{
id: 'overview-e4-5',
source: 'overview-4',
target: 'overview-5',
id: 'e4-5',
source: '4',
target: '5',
arrowHeadType: 'arrowclosed',
label: 'edge with arrow head',
},
{
id: 'overview-e5-6',
source: 'overview-5',
target: 'overview-6',
id: 'e5-6',
source: '5',
target: '6',
type: 'smoothstep',
label: 'smooth step edge',
},
{
id: 'overview-e5-7',
source: 'overview-5',
target: 'overview-7',
id: 'e5-7',
source: '5',
target: '7',
type: 'step',
style: { stroke: '#f6ab6c' },
label: 'a step edge',
@@ -168,8 +148,6 @@ const OverviewFlow = () => {
setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
console.log('render overview');
return (
<ReactFlow
elements={elements}
@@ -188,17 +166,22 @@ const OverviewFlow = () => {
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
key="overview"
>
<MiniMap
nodeColor={(n) => {
nodeStrokeColor={(n) => {
if (n.style?.background) return n.style.background;
if (n.type === 'input') return '#9999ff';
if (n.type === 'output') return '#79c9b7';
if (n.type === 'default') return '#ff6060';
if (n.type === 'input') return '#0041d0';
if (n.type === 'output') return '#ff0072';
if (n.type === 'default') return '#1a192b';
return '#eee';
}}
nodeColor={(n) => {
if (n.style?.background) return n.style.background;
return '#fff';
}}
borderRadius={2}
/>
<Controls />
<Background color="#aaa" gap={16} />