From 61e266e43154c153e3385624c063e4b64a53576c Mon Sep 17 00:00:00 2001 From: Ben Silverman Date: Fri, 30 Jul 2021 15:59:07 -0400 Subject: [PATCH] feat: Add custom buttons for layer pagination --- client/public/images/down_grouphover.png | Bin 0 -> 2853 bytes client/public/images/down_hover.png | Bin 0 -> 3046 bytes client/public/images/down_pressed.png | Bin 0 -> 3103 bytes client/public/images/down_rest.png | Bin 0 -> 2685 bytes client/public/images/up_grouphover.png | Bin 0 -> 2600 bytes client/public/images/up_hover.png | Bin 0 -> 3061 bytes client/public/images/up_pressed.png | Bin 0 -> 3090 bytes client/public/images/up_rest.png | Bin 0 -> 2700 bytes client/src/CanvasResource.js | 64 +++++++++++++++++++++-- 9 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 client/public/images/down_grouphover.png create mode 100644 client/public/images/down_hover.png create mode 100644 client/public/images/down_pressed.png create mode 100644 client/public/images/down_rest.png create mode 100644 client/public/images/up_grouphover.png create mode 100644 client/public/images/up_hover.png create mode 100644 client/public/images/up_pressed.png create mode 100644 client/public/images/up_rest.png diff --git a/client/public/images/down_grouphover.png b/client/public/images/down_grouphover.png new file mode 100644 index 0000000000000000000000000000000000000000..f6b7b758959d749597656880ac0c1d37b2903758 GIT binary patch literal 2853 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 Yh}@;38zn}92Y->q2B!K{U8igR29Q9(4gdfE literal 0 HcmV?d00001 diff --git a/client/public/images/down_hover.png b/client/public/images/down_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..d91728a56a7cb64eaefc30b248c80d5a946b2165 GIT binary patch literal 3046 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 UrQV|kba3x7H8w}r8M?;*1?>)yB>(^b literal 0 HcmV?d00001 diff --git a/client/public/images/up_hover.png b/client/public/images/up_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..6140d9146960c80c5fe6df7a4cc20621da690392 GIT binary patch literal 3061 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

NS{r3d;ULy*LJ|k1UP|GX zxVcL7FJolCmlmFO6#G5(VxXc6y(UM!&vRJP0FIG60#l@skN;CEfFF5V{`3lag$o^4 zKpHa38&d=hi?Ss@1pSEda(58E?3YEQyEVYO9CE}caVy_vnL|y5B<(5qQRS&oHokjt zarf!rUQKE3gd{;H*p)~7k|vS(gna@Pfqc=oA5{s<^6%kah>ryCK}6`I+I>4q!d@v* z4{mRUO^4N0WMpL6xmPaklJ5GIY^&y8k!UC;G;5Rm%(t&$g+_tyY z-G?D(z+fpV6{xWdO@E_kT+I_M>BO3iF^mSQu)_KC3H&2nU4GH)ucnq3uQgQC-g^VJO`n{bOWZ%tVm_y)JL74pQf`f=3Ptu5=Fsp8_V zhKVvmEKIcuDiXa+H2Yz$b>;Ofq{kZ3e}tsRfWb+ThDciL;3e^zQ1B;6T8;kL-e_=QxTV8K1csZ;X%f>{?o18 zZ4CDKXTQS|S$C#^J2zZJq_c#dZ-O?qv588XeG|xBS@GHJlc{;E{{2X}dLtL1qxU(D z){?Mxm_HNl#GjNjUUlIqQcyxJE(ZQes#w6Ec^GQh%s#O7{zuK=B=%?v-ZWEv_gM}y ze~m&xR}m!Y%dt(ITocv6_}1Cnw|^C616om zEP;4Dr@}+cqn)~DMK2*WIh%69P#di9T2;;JGOQ*mVYp67LQ3%-T*a?RJ#yQ|;jN>S zT{GfnsG$;FIm)WK<%`q+?cl3eTVCtCfhUh)jD#+E`AZxCyQfua*sA4r6r1T-_$V1E z`=%_hu(!F|#J(!6skNnbZ)LS>-YZALF)ljp$MsYk<_{_F273o87Y~1A=F3eU`P$HP zLIz=oPi(=#!My9&W5M+qcn;VlD=T%Q!=uad7jhLCzQtKWy599=w6zOWO`!oQm+snB zeC#s$2+B+QJVu0-I8S@#U_Z^hTR^FLVIh#24U>0MyM%2_`|$Fa#JL)Ik^InaXDto4 sE|~R=ZLnOaC6|~!{Mm8z@zf87>kd5@4ikzef9-(LMKir>9hbQO0EFUaQUCw| literal 0 HcmV?d00001 diff --git a/client/public/images/up_rest.png b/client/public/images/up_rest.png new file mode 100644 index 0000000000000000000000000000000000000000..b657db1f5e3b52edd18cbab6eca2885bc1a4c9b1 GIT binary patch literal 2700 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 O+nE~vX+Y6)kNyuUtgznz literal 0 HcmV?d00001 diff --git a/client/src/CanvasResource.js b/client/src/CanvasResource.js index 70b529e4..6089fd54 100644 --- 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} >