63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import { fitView, zoomIn, zoomOut } from '../../utils/graph';
|
|
import { useStoreState, useStoreActions } from '../../store/hooks';
|
|
|
|
import PlusIcon from '../../../assets/icons/plus.svg';
|
|
import MinusIcon from '../../../assets/icons/minus.svg';
|
|
import FitviewIcon from '../../../assets/icons/fitview.svg';
|
|
import LockIcon from '../../../assets/icons/lock.svg';
|
|
import UnlockIcon from '../../../assets/icons/unlock.svg';
|
|
|
|
const baseStyle: CSSProperties = {
|
|
position: 'absolute',
|
|
zIndex: 5,
|
|
bottom: 10,
|
|
left: 10,
|
|
};
|
|
|
|
interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
|
|
export default ({ style, className }: ControlProps) => {
|
|
const mapClasses: string = classnames('react-flow__controls', className);
|
|
|
|
const setInteractive = useStoreActions(actions => actions.setInteractive);
|
|
const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
|
|
|
|
return (
|
|
<div
|
|
className={mapClasses}
|
|
style={{
|
|
...baseStyle,
|
|
...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>
|
|
</div>
|
|
);
|
|
};
|