From 45f1ac2b7d20a46bdb2404d072d74f92d6517feb Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Thu, 14 Nov 2024 14:45:51 -0800 Subject: [PATCH] Hook up a double-click handler for OSD to handle zooming --- src/components/OpenSeadragonViewer.js | 6 ++++++ src/config/settings.js | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js index 899163acd..26892f9d4 100644 --- a/src/components/OpenSeadragonViewer.js +++ b/src/components/OpenSeadragonViewer.js @@ -63,6 +63,12 @@ export class OpenSeadragonViewer extends Component { this.setState({ viewer }); + viewer.addHandler('canvas-double-click', ({ position, shift }) => { + const currentZoom = viewer.viewport.getZoom(); + const zoomRatio = (shift ? 1.0 / osdConfig.zoomPerDoubleClick : osdConfig.zoomPerDoubleClick); + viewer.viewport.zoomTo(currentZoom * zoomRatio, viewer.viewport.pointFromPixel(position), false); + }); + viewer.addHandler('canvas-drag', () => { this.setState({ grabbing: true }); }); diff --git a/src/config/settings.js b/src/config/settings.js index 488be21e6..cf8612fd5 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -524,7 +524,7 @@ export default { isWorkspaceAddVisible: false, // Catalog/Workspace add window feature visible by default exposeModeOn: false, // unused? height: 5000, // height of the elastic mode's virtual canvas - showZoomControls: false, // Configure if zoom controls should be displayed by default + showZoomControls: true, // Configure if zoom controls should be displayed by default type: 'mosaic', // Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used. viewportPosition: { // center coordinates for the elastic mode workspace x: 0, @@ -545,6 +545,8 @@ export default { preserveImageSizeOnResize: true, preserveViewport: true, showNavigationControl: false, + zoomPerClick: 1, // disable zoom-to-click + zoomPerDoubleClick: 2.0 }, export: { catalog: true,