import * as React from 'react';
import { Map } from 'mapbox-gl';
import { AnchorLimits } from './util/types';
import { withMap } from './context';
const containerStyle: React.CSSProperties = {
position: 'absolute',
zIndex: 10,
display: 'flex',
flexDirection: 'column',
boxShadow: '0px 1px 4px rgba(0, 0, 0, .3)',
border: '1px solid rgba(0, 0, 0, 0.1)'
};
const positions = {
'top-right': { top: 62, right: 10, bottom: 'auto', left: 'auto' },
'top-left': { top: 62, left: 10, bottom: 'auto', right: 'auto' },
'bottom-right': { bottom: 63, right: 10, top: 'auto', left: 'auto' },
'bottom-left': { bottom: 63, left: 10, top: 'auto', right: 'auto' }
};
const buttonStyle = {
backgroundColor: '#f9f9f9',
opacity: 0.95,
transition: 'background-color 0.16s ease-out',
cursor: 'pointer',
border: 0,
height: 26,
width: 26,
outline: 0,
padding: 3
};
const buttonStyleHovered = {
backgroundColor: '#fff',
opacity: 1
};
const buttonStyleCompass = {
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
borderTopLeftRadius: 2,
borderTopRightRadius: 2,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2
};
const Icon = () => (
);
const compassSpan = {
width: 20,
height: 20,
display: 'inline-block'
};
const [COMPASS] = [0];
const POSITIONS = Object.keys(positions);
export interface Props {
position?: AnchorLimits;
style?: React.CSSProperties;
className?: string;
tabIndex?: number;
map: Map;
}
export interface State {
hover?: number;
}
export class RotationControl extends React.Component {
public static defaultProps = {
position: POSITIONS[0]
};
public state = {
hover: undefined
};
public componentDidMount() {
this.props.map.on('rotate', this.onMapRotate);
}
public componentWillUnmount() {
this.props.map.off('rotate', this.onMapRotate);
}
public compassIcon: HTMLSpanElement | null = null;
private onMouseOut = () => {
if (!this.state.hover) {
this.setState({ hover: undefined });
}
};
private onMouseIn = () => {
if (COMPASS !== this.state.hover) {
this.setState({ hover: COMPASS });
}
};
private onClickCompass = () => {
this.props.map.resetNorth();
};
private onMapRotate = () => {
const { map } = this.props;
// tslint:disable-next-line:no-any
const rotate = `rotate(${(map as any).transform.angle *
(180 / Math.PI)}deg)`;
if (this.compassIcon) {
this.compassIcon.style.transform = rotate;
}
};
private assignRef = (icon: HTMLSpanElement | null) => {
this.compassIcon = icon;
};
public render() {
const { position, style, className, tabIndex } = this.props;
const { hover } = this.state;
const controlStyle = {
...buttonStyle,
...buttonStyleCompass,
...(hover === COMPASS ? buttonStyleHovered : {})
};
return (
);
}
}
export default withMap(RotationControl);