Skip to content

Instantly share code, notes, and snippets.

@odoe

odoe/Recenter.tsx

Created May 3, 2016
Embed
What would you like to do?
import React = require('react');
import MapView = require('esri/views/MapView');
// Here is a case where maybe I want a
// specific type alias called Coordinates.
// I couldn't really use an interface for this.
type Coordinates = number[];
interface Props {
view: MapView;
initialCenter: Coordinates;
}
interface Center {
x: number;
y: number;
}
interface State extends Center {
interacting: boolean;
}
interface Style {
textShadow: string;
}
class Recenter extends React.Component<Props, State> {
state = { x: 0, y: 0, interacting: false };
constructor() {
super();
this.onCenterChange = this.onCenterChange.bind(this);
this.defaultCenter = this.defaultCenter.bind(this);
}
componentDidMount() {
this.props.view.watch('center', this.onCenterChange);
this.props.view.watch('interacting', this.onCenterChange);
}
onCenterChange() {
let {interacting, center} = this.props.view;
this.setState({
x: center.x,
y: center.y,
interacting
});
}
defaultCenter() {
this.props.view.center = this.props.initialCenter;
}
render() {
let style: Style = {
textShadow: this.state.interacting ? '-1px 0 red, 0 1px red, 1px 0 red, 0 -1px red' : ''
};
let { x, y } = this.state;
return (
<div className='recenter-tool' style={style} onClick={this.defaultCenter}>
<p>x: {Number(x).toFixed(3)}</p>
<p>y: {Number(y).toFixed(3)}</p>
</div>
);
}
}
export default Recenter;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment