From 440e2b18bc9b7b55261fe48f3ef507a67480d400 Mon Sep 17 00:00:00 2001 From: Chris Beer <cabeer@stanford.edu> Date: Fri, 19 Apr 2019 14:36:08 -0700 Subject: [PATCH] Prevent OSD from performing click-to-zoom when the window just received focus --- src/components/OpenSeadragonViewer.js | 32 ++++++++++++++++++--------- src/containers/OpenSeadragonViewer.js | 1 + 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js index 17f758209..54761c512 100644 --- a/src/components/OpenSeadragonViewer.js +++ b/src/components/OpenSeadragonViewer.js @@ -34,14 +34,6 @@ export class OpenSeadragonViewer extends Component { }); } - /** - * - * @param e - */ - static onCanvasClick(e) { - e.preventDefaultAction = true; - } - /** * @param {Object} props */ @@ -56,7 +48,9 @@ export class OpenSeadragonViewer extends Component { this.onUpdateViewport = this.onUpdateViewport.bind(this); this.onViewportChange = this.onViewportChange.bind(this); this.zoomToWorld = this.zoomToWorld.bind(this); + this.onCanvasClick = this.onCanvasClick.bind(this); this.osdUpdating = false; + this.justReceivedFocus = false; } /** @@ -88,7 +82,7 @@ export class OpenSeadragonViewer extends Component { this.viewer.addHandler('animation-finish', () => { this.osdUpdating = false; }); - this.viewer.addHandler('canvas-click', OpenSeadragonViewer.onCanvasClick); + this.viewer.addHandler('canvas-click', this.onCanvasClick); if (viewer) { this.viewer.viewport.panTo(viewer, true); this.viewer.viewport.zoomTo(viewer.zoom, viewer, true); @@ -104,7 +98,7 @@ export class OpenSeadragonViewer extends Component { */ componentDidUpdate(prevProps) { const { - viewer, highlightedAnnotations, selectedAnnotations, + focused, viewer, highlightedAnnotations, selectedAnnotations, } = this.props; const highlightsUpdated = !OpenSeadragonViewer.annotationsMatch( highlightedAnnotations, prevProps.highlightedAnnotations, @@ -125,6 +119,11 @@ export class OpenSeadragonViewer extends Component { this.viewer.forceRedraw(); } + if (focused && prevProps.focused !== focused) { + this.justReceivedFocus = true; + setTimeout(() => { this.justReceivedFocus = false; }, 50); + } + if (!this.tileSourcesMatch(prevProps.tileSources)) { this.viewer.close(); this.addAllTileSources(); @@ -155,6 +154,16 @@ export class OpenSeadragonViewer extends Component { this.updateCanvas(); } + /** + * Prevent OSD from performing click-to-zoom when the window just received focus + * + * @param e + */ + onCanvasClick(e) { + e.preventDefaultAction = this.justReceivedFocus; + this.justReceivedFocus = false; + } + /** * Forward OSD state to redux */ @@ -293,17 +302,18 @@ export class OpenSeadragonViewer extends Component { OpenSeadragonViewer.defaultProps = { children: null, + focused: false, highlightedAnnotations: [], label: null, selectedAnnotations: [], tileSources: [], viewer: null, - }; OpenSeadragonViewer.propTypes = { canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired, children: PropTypes.node, + focused: PropTypes.bool, highlightedAnnotations: PropTypes.arrayOf(PropTypes.object), label: PropTypes.string, selectedAnnotations: PropTypes.arrayOf(PropTypes.object), diff --git a/src/containers/OpenSeadragonViewer.js b/src/containers/OpenSeadragonViewer.js index ea42bd87b..a86ba6770 100644 --- a/src/containers/OpenSeadragonViewer.js +++ b/src/containers/OpenSeadragonViewer.js @@ -20,6 +20,7 @@ import { */ const mapStateToProps = (state, { windowId }) => ({ canvasWorld: new CanvasWorld(getSelectedCanvases(state, { windowId })), + focused: state.workspace.focusedWindowId === windowId, highlightedAnnotations: getHighlightedAnnotationsOnCanvases(state, { windowId }), label: getCanvasLabel(state, { windowId }), selectedAnnotations: getSelectedAnnotationsOnCanvases(state, { windowId }), -- GitLab