From 737797478c8768c0c910cb71d2ca6ef28ed46c2a Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 1 Feb 2019 11:55:27 -0800
Subject: [PATCH] Compare new state against actual props instead of previous
props
Comparing against previous props causes zooming and panning to noticably jitter; going straight to the source doesn't have this side-effect
---
__tests__/src/components/OpenSeadragonViewer.test.js | 8 +++++++-
src/components/OpenSeadragonViewer.js | 10 ++++++----
2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
index 78114e349..2e8c8347c 100644
--- a/__tests__/src/components/OpenSeadragonViewer.test.js
+++ b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -115,7 +115,13 @@ describe('OpenSeadragonViewer', () => {
const zoomTo = jest.fn();
wrapper.instance().viewer = {
- viewport: { panTo, zoomTo },
+ viewport: {
+ centerSpringX: { target: { value: 10 } },
+ centerSpringY: { target: { value: 10 } },
+ zoomSpring: { target: { value: 1 } },
+ panTo,
+ zoomTo,
+ },
};
wrapper.setProps({ window: { id: 'base', viewer: { x: 0.5, y: 0.5, zoom: 0.1 } } });
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index f3db606ef..d0a12b8d0 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -61,13 +61,15 @@ class OpenSeadragonViewer extends Component {
this.fitBounds(0, 0, tileSources[0].width, tileSources[0].height);
}
});
- } else if (window.viewer && prevProps.window.viewer) {
- if (window.viewer.x !== prevProps.window.viewer.x
- || window.viewer.y !== prevProps.window.viewer.y) {
+ } else if (window.viewer) {
+ const { viewport } = this.viewer;
+
+ if (window.viewer.x !== viewport.centerSpringX.target.value
+ || window.viewer.y !== viewport.centerSpringY.target.value) {
this.viewer.viewport.panTo(window.viewer, false);
}
- if (window.viewer.zoom !== prevProps.window.viewer.zoom) {
+ if (window.viewer.zoom !== viewport.zoomSpring.target.value) {
this.viewer.viewport.zoomTo(window.viewer.zoom, window.viewer, false);
}
}
--
GitLab