feat: Add custom buttons for layer pagination

performant-software · Jul 30, 2021 · 61e266e · 61e266e
1 parent 101f731
commit 61e266e
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 4 deletions.
diff --git a/client/public/images/down_grouphover.png b/client/public/images/down_grouphover.png
diff --git a/client/public/images/down_hover.png b/client/public/images/down_hover.png
diff --git a/client/public/images/down_pressed.png b/client/public/images/down_pressed.png
diff --git a/client/public/images/down_rest.png b/client/public/images/down_rest.png
diff --git a/client/public/images/up_grouphover.png b/client/public/images/up_grouphover.png
diff --git a/client/public/images/up_hover.png b/client/public/images/up_hover.png
diff --git a/client/public/images/up_pressed.png b/client/public/images/up_pressed.png
diff --git a/client/public/images/up_rest.png b/client/public/images/up_rest.png
diff --git a/client/src/CanvasResource.js b/client/src/CanvasResource.js
@@ -79,6 +79,8 @@ class CanvasResource extends Component {
     super(props);
     this.osdId =`openseadragon-${this.props.document_id}-${Date.now()}`;
     this.osdViewer = null;
+    this.upButton = null;
+    this.downButton = null;
     this.highlight_map = {};
     this.viewportUpdatedYet = false;
     this.currentMode = 'pan';
@@ -89,7 +91,7 @@ class CanvasResource extends Component {
     };
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (prevProps.content && this.props.content 
         && !deepEqual(prevProps.content.tileSources, this.props.content.tileSources)) {
       this.openTileSources(this.props.content.tileSources);
@@ -98,6 +100,23 @@ class CanvasResource extends Component {
     if (prevProps.pageToChange[this.getInstanceKey()] !== this.props.pageToChange[this.getInstanceKey()]) {
       this.osdViewer.goToPage(this.props.pageToChange[this.getInstanceKey()] || 0);
     }
+    if (prevState.currentPage !== this.state.currentPage) {
+      if (this.upButton && this.state.currentPage <= 0) {
+        this.upButton.disable();
+      } else {
+        this.upButton.enable();
+      }
+      if (this.downButton && !(
+          this.props.content
+          && this.props.content.tileSources
+          && this.state
+          && this.state.currentPage !== (this.props.content.tileSources.length-1)
+        )) {
+        this.downButton.disable();
+      } else {
+        this.downButton.enable();
+      }
+    }
     if (this.props.highlightsHidden[this.getInstanceKey()] !== prevProps.highlightsHidden[this.getInstanceKey()]
       && !this.props.highlightsHidden[this.getInstanceKey()]) {
       this.osdViewer.raiseEvent( 'update-viewport', {} );
@@ -114,7 +133,7 @@ class CanvasResource extends Component {
 
     const viewer = this.osdViewer = OpenSeadragon({
       id: this.osdId,
-      prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+      prefixUrl: '/images/',
       showNavigationControl: false,
       tileSources: [],
       minZoomImageRatio: minZoomImageRatio,
@@ -123,9 +142,46 @@ class CanvasResource extends Component {
       gestureSettingsMouse: { clickToZoom: false },
       showNavigator: true,
       sequenceMode: true,
+      showSequenceControl: false,
       preserveViewport: true,
     });
-
+    const btns = [];
+    const upButton = this.upButton = new OpenSeadragon.Button({
+      tooltip: "Previous layer",
+      srcRest: "/images/up_rest.png",
+      srcGroup: "/images/up_grouphover.png",
+      srcHover: "/images/up_hover.png",
+      srcDown: "/images/up_pressed.png",
+      onRelease: (e) => {
+        viewer.goToPage(this.state.currentPage - 1);
+        if (this.state && this.state.currentPage <= 0) {
+          e.eventSource.disable();
+        }
+      },
+    });
+    const downButton = this.downButton = new OpenSeadragon.Button({
+      tooltip: "Next layer",
+      srcRest: "/images/down_rest.png",
+      srcGroup: "/images/down_grouphover.png",
+      srcHover: "/images/down_hover.png",
+      srcDown: "/images/down_pressed.png",
+      onRelease: (e) => {
+        viewer.goToPage(this.state.currentPage + 1);
+        if (!(content && content.tileSources && this.state && this.state.currentPage !== content.tileSources.length-1)) {
+          e.eventSource.disable();
+        }
+      },
+    });
+    upButton.disable();
+    if (!(content && content.tileSources && this.state && this.state.currentPage !== content.tileSources.length-1)) {
+      downButton.disable();
+    }
+    btns.push(upButton, downButton);
+    const URButtonGroup = new OpenSeadragon.ButtonGroup({ buttons: btns });
+    viewer.addControl(URButtonGroup.element, {
+      anchor: OpenSeadragon.ControlAnchor.TOP_LEFT
+    });
+
     const overlay = this.overlay = viewer.fabricjsOverlay({scale: fabricViewportScale});
 
     let tileSources = (content && content.tileSources) ? content.tileSources : [];
@@ -1169,7 +1225,7 @@ class CanvasResource extends Component {
                       tooltip="Edit layer name"
                       type="button"
                       onClick={this.editLayerNameClick.bind(this)}
-                      style={{ width: '16px', height: 'auto', paddingLeft: '3px' }}
+                      style={{ width: '16px', height: 'auto', paddingLeft: '2px' }}
                       iconStyle={smallIconStyle}
                       tooltipStyles={tooltipStyle}
                     >