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

add multiple backs sample

Browse Source
This commit is contained in:
Artyom Sovetnikov
2023-03-21 02:40:47 +03:00
parent dedf0046b5
commit a863e5b94d
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/src/examples/Backgrounds/index.tsx
+7 -5
View File
@@ -19,13 +19,13 @@ const initialNodes: Node[] = [
}, },
]; ];
const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => { const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) => {
const [nodes, , onNodesChange] = useNodesState(initialNodes); const [nodes, , onNodesChange] = useNodesState(initialNodes);
return ( return (
<ReactFlowProvider> <ReactFlowProvider>
<ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}> <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
<Background {...bgProps} /> {bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
</ReactFlow> </ReactFlow>
</ReactFlowProvider> </ReactFlowProvider>
); );
@@ -33,9 +33,11 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) =>
const Backgrounds: FC = () => ( const Backgrounds: FC = () => (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} /> <Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
<Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} /> <Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
<Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} /> <Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
<Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
{ variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
</div> </div>
); );