diff --git a/__tests__/integration/mirador/plugins.html b/__tests__/integration/mirador/plugins.html index 2d88a9bdc1129eee3f728524479c7c2423de8419..d19bb7095af9a39367083da7f555e913b8c0ee13 100644 --- a/__tests__/integration/mirador/plugins.html +++ b/__tests__/integration/mirador/plugins.html @@ -34,27 +34,39 @@ class MiradorRuler extends React.Component { constructor(props) { super(props); + this._isMounted = false; this.state = { zooming: false, } this.zoomToColor = this.zoomToColor.bind(this); } componentDidMount() { + this._isMounted = true; + const that = this; this.props.pluginParent().viewer.addHandler('zoom', (e) => { - this.setState({ - zooming: true - }) + if (that._isMounted) { + that.setState({ + zooming: true + }) + } }) - const that = this; // Super hacky don't do this for real function resetStyle() { - that.setState({ - zooming: false - }) + if (that._isMounted) { + that.setState({ + zooming: false + }) + } setTimeout(resetStyle, 750) } resetStyle(); } + componentWillUnmount() { + this._isMounted = false; + if (this.props.pluginParent()) { + this.props.pluginParent().viewer.removeHandler('zoom'); + } + } zoomToColor(zooming) { if (zooming) { return 'red' @@ -62,13 +74,13 @@ return 'black' } render() { - return React.createElement('div', {className: 'mirador-ruler', style: {position: 'absolute', color: this.zoomToColor(this.state.zooming)}}, 'I am a ruler') + return React.createElement('div', {className: 'mirador-ruler', style: { position: 'absolute', bottom: 0, color: this.zoomToColor(this.state.zooming)}}, 'I am a ruler') } } const miradorRuler = { name: 'miradorRuler', component: MiradorRuler, - parent: 'WindowViewer', + parent: 'OpenSeadragonViewer', mapStateToProps: ({ manifests }, props) => { return { manifests // return the part of the state I need here.