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
src/plugins/Controls/index.tsx
+30 -27
View File
@@ -17,12 +17,16 @@ const baseStyle: CSSProperties = {
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 setInteractive = useStoreActions(actions => actions.setInteractive);
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
return (
@@ -33,30 +37,29 @@ export default ({ style, className }: ControlProps) => {
...style,
}}
>
<div
className="react-flow__controls-button react-flow__controls-zoomin"
onClick={zoomIn}
>
<PlusIcon />
</div>
<div
className="react-flow__controls-button react-flow__controls-zoomout"
onClick={zoomOut}
>
<MinusIcon />
</div>
<div
className="react-flow__controls-button react-flow__controls-fitview"
onClick={() => fitView()}
>
<FitviewIcon />
</div>
<div
className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
onClick={() => setInteractive(!isInteractive)}
>
{ isInteractive ? <UnlockIcon /> : <LockIcon /> }
</div>
{showZoom && (
<>
<div className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn}>
<PlusIcon />
</div>
<div className="react-flow__controls-button react-flow__controls-zoomout" onClick={zoomOut}>
<MinusIcon />
</div>
</>
)}
{showFitView && (
<div className="react-flow__controls-button react-flow__controls-fitview" onClick={() => fitView()}>
<FitviewIcon />
</div>
)}
{showInteractive && (
<div
className="react-flow__controls-button react-flow__controls-interactive"
onClick={() => setInteractive(!isInteractive)}
>
{isInteractive ? <UnlockIcon /> : <LockIcon />}
</div>
)}
</div>
);
};