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

feat(controls): add showZoom, showFitView, showInteractive options #211

Browse Source
This commit is contained in:
moklick
2020-05-11 19:08:07 +02:00
parent 55b684e4ad
commit 6ea206e3be
2 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -1
View File
@@ -254,7 +254,7 @@ const GraphWithMiniMap = () => (
### Controls ### Controls
The control panel contains a zoom-in, zoom-out and a fit-view button. You can use it by passing it as a children to your React Flow component: The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the React Flow component:
```javascript ```javascript
import ReactFlow, { Controls } from 'react-flow-renderer'; import ReactFlow, { Controls } from 'react-flow-renderer';
@@ -272,6 +272,9 @@ const GraphWithControls = () => (
- `style`: css properties - `style`: css properties
- `className`: class name - `className`: class name
- `showZoom`: boolean - default: true
- `showFitView`: boolean - default: true
- `showInteractive`: boolean - default: true
## Examples ## Examples
src/plugins/Controls/index.tsx
+30 -27
View File
@@ -17,12 +17,16 @@ const baseStyle: CSSProperties = {
left: 10, left: 10,
}; };
interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {} interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
showZoom?: boolean;
showFitView?: boolean;
showInteractive?: boolean;
}
export default ({ style, className }: ControlProps) => { export default ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
const mapClasses: string = classnames('react-flow__controls', className); const mapClasses: string = classnames('react-flow__controls', className);
const setInteractive = useStoreActions(actions => actions.setInteractive); const setInteractive = useStoreActions((actions) => actions.setInteractive);
const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive })); const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
return ( return (
@@ -33,30 +37,29 @@ export default ({ style, className }: ControlProps) => {
...style, ...style,
}} }}
> >
<div {showZoom && (
className="react-flow__controls-button react-flow__controls-zoomin" <>
onClick={zoomIn} <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn}>
> <PlusIcon />
<PlusIcon /> </div>
</div> <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={zoomOut}>
<div <MinusIcon />
className="react-flow__controls-button react-flow__controls-zoomout" </div>
onClick={zoomOut} </>
> )}
<MinusIcon /> {showFitView && (
</div> <div className="react-flow__controls-button react-flow__controls-fitview" onClick={() => fitView()}>
<div <FitviewIcon />
className="react-flow__controls-button react-flow__controls-fitview" </div>
onClick={() => fitView()} )}
> {showInteractive && (
<FitviewIcon /> <div
</div> className="react-flow__controls-button react-flow__controls-interactive"
<div onClick={() => setInteractive(!isInteractive)}
className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`} >
onClick={() => setInteractive(!isInteractive)} {isInteractive ? <UnlockIcon /> : <LockIcon />}
> </div>
{ isInteractive ? <UnlockIcon /> : <LockIcon /> } )}
</div>
</div> </div>
); );
}; };