diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js index 23a2174e..77bf4d2e 100644 --- a/example/src/Validation/index.js +++ b/example/src/Validation/index.js @@ -6,9 +6,9 @@ import './validation.css'; const initialElements = [ { id: '0', type: 'custominput', position: { x: 0, y: 150 } }, - { id: 'A', data: { label : 'A' }, position: { x: 250, y: 0 }, targetPosition: 'left', sourcePosition: 'right' }, - { id: 'B', data: { label : 'B' }, position: { x: 250, y: 150 }, targetPosition: 'left', sourcePosition: 'right' }, - { id: 'C', data: { label : 'C' }, position: { x: 250, y:300 }, targetPosition: 'left', sourcePosition: 'right' }, + { id: 'A', type: 'customnode', position: { x: 250, y: 0 } }, + { id: 'B', type: 'customnode', position: { x: 250, y: 150 } }, + { id: 'C', type: 'customnode', position: { x: 250, y:300 } }, ]; const CustomInput = () => ( @@ -17,12 +17,27 @@ const CustomInput = () => ( connection.target === 'B'} /> ); +const CustomNode = ({ id }) => ( + <> + id === 'B'} + /> +
{id}
+ id === 'B'} + /> + +); + const HorizontalFlow = () => { const [elements, setElements] = useState(initialElements); const onConnect = (params) => setElements(els => addEdge(params, els)); @@ -35,7 +50,8 @@ const HorizontalFlow = () => { onLoad={reactflowInstance => reactflowInstance.fitView()} className="validationflow" nodeTypes={{ - custominput: CustomInput + custominput: CustomInput, + customnode: CustomNode }} /> ); diff --git a/example/src/Validation/validation.css b/example/src/Validation/validation.css index 0b7acd76..0935272f 100644 --- a/example/src/Validation/validation.css +++ b/example/src/Validation/validation.css @@ -1,19 +1,27 @@ .validationflow .react-flow__node { - background: #e6e6e9; - border: 1px solid #ddd; -} - -.validationflow .react-flow__node-custominput { width: 150px; border-radius: 5px; padding: 10px; - background: #fff; color: #555; border: 1px solid #ddd; text-align: center; font-size: 12px; } +.validationflow .react-flow__node-customnode { + background: #e6e6e9; + border: 1px solid #ddd; +} + +.react-flow__node-custominput .react-flow__handle { + background: #e6e6e9; +} + +.validationflow .react-flow__node-custominput { + background: #fff; + +} + .validationflow .connecting { background: #ff6060; }