refactor(examples): add change pos button to stress example
This commit is contained in:
@@ -31,13 +31,13 @@ const BasicFlow = () => {
|
|||||||
x: Math.random() * 400,
|
x: Math.random() * 400,
|
||||||
y: Math.random() * 400
|
y: Math.random() * 400
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return el;
|
return el;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
import ReactFlow, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
|
import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls } from 'react-flow-renderer';
|
||||||
import { getElements } from './utils';
|
import { getElements } from './utils';
|
||||||
|
|
||||||
const onLoad = graph => {
|
const onLoad = graph => {
|
||||||
@@ -16,6 +16,24 @@ const StressGraph = () => {
|
|||||||
setElements(els => removeElements(elementsToRemove, els));
|
setElements(els => removeElements(elementsToRemove, els));
|
||||||
const onConnect = (params) => setElements(els => addEdge(params, els));
|
const onConnect = (params) => setElements(els => addEdge(params, els));
|
||||||
|
|
||||||
|
const updatePos = () => {
|
||||||
|
setElements(elms => {
|
||||||
|
return elms.map(el => {
|
||||||
|
if (isNode(el)) {
|
||||||
|
return {
|
||||||
|
...el,
|
||||||
|
position: {
|
||||||
|
x: Math.random() * window.innerWidth,
|
||||||
|
y: Math.random() * window.innerHeight
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return el;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
elements={elements}
|
elements={elements}
|
||||||
@@ -25,7 +43,14 @@ const StressGraph = () => {
|
|||||||
style={{ width: '100%', height: '100%' }}
|
style={{ width: '100%', height: '100%' }}
|
||||||
backgroundType="lines"
|
backgroundType="lines"
|
||||||
>
|
>
|
||||||
|
<button
|
||||||
|
onClick={updatePos}
|
||||||
|
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
|
||||||
|
>
|
||||||
|
change pos
|
||||||
|
</button>
|
||||||
<MiniMap />
|
<MiniMap />
|
||||||
|
<Controls />
|
||||||
</ReactFlow>
|
</ReactFlow>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user