feat(interactive-minimap): add zoom and pan

This commit is contained in:
moklick
2022-10-31 17:55:32 +01:00
parent 8323ee0c91
commit 322ea0ebed
3 changed files with 86 additions and 14 deletions
@@ -19,25 +19,25 @@ const initialNodes: Node[] = [
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
position: { x: 0, y: 0 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
position: { x: 0, y: 200 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
position: { x: 200, y: 200 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
position: { x: 200, y: 400 },
className: 'light',
},
];
@@ -88,9 +88,9 @@ const BasicFlow = () => {
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
fitView
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
fitView
>
<Background variant={BackgroundVariant.Dots} />
<MiniMap />