From 6e4012976b967c1ee830a00d9f1d1dd2f3369c12 Mon Sep 17 00:00:00 2001 From: Nelson Campos Date: Fri, 6 Apr 2018 11:52:10 +0100 Subject: [PATCH] Adds two helpers for style formating and updates onCanvasKeyPress method. There were created a new helper method "setDisplayTransform" to change navigator styling. Also, a new general function "setElementTransform" was created to help on element styling. For this commit, I also made some changes on viewer onCanvasKeyPress method: - r is rotating the image clockwise; - R is rotating the image counter clockwise; - Freed "F" keycode to other purposes (like filters or others). --- src/drawer.js | 12 +++---- src/navigator.js | 77 ++++++++++++++++++-------------------------- src/openseadragon.js | 8 ++--- src/tiledimage.js | 6 ++-- src/viewer.js | 32 ++++++++++-------- src/viewport.js | 1 + 6 files changed, 65 insertions(+), 71 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 9aa7ef44..894b59a9 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -501,8 +501,8 @@ $.Drawer.prototype = { if ( this.viewport.degrees !== 0 ) { this._offsetForRotation({degrees: this.viewport.degrees}); } else{ - if(this.viewer.flipped) { - this._flip({}); + if(this.viewer.doFlip) { + this._flip(); } } if (tiledImage.getRotation(true) % 360 !== 0) { @@ -624,11 +624,10 @@ $.Drawer.prototype = { context.save(); context.translate(point.x, point.y); - if(this.viewer.flipped){ + if(this.viewer.doFlip){ context.rotate(Math.PI / 180 * -options.degrees); context.scale(-1, 1); - } - else{ + } else{ context.rotate(Math.PI / 180 * options.degrees); } context.translate(-point.x, -point.y); @@ -636,11 +635,12 @@ $.Drawer.prototype = { // private _flip: function(options) { + options = options || {}; var point = options.point ? options.point.times($.pixelDensityRatio) : this.getCanvasCenter(); var context = this._getContext(options.useSketch); - context.save(); + // context.save(); context.translate(point.x, 0); context.scale(-1, 1); diff --git a/src/navigator.js b/src/navigator.js index 7ee60297..5556c5e0 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -277,47 +277,28 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* /* Flip navigator element */ toogleFlip: function() { - this.flipped = !this.flipped; - if (this.viewer.flipped){ - this.displayRegion.style.webkitTransform = "scale(-1,1)"; - this.displayRegion.style.mozTransform = "scale(-1,1)"; - this.displayRegion.style.msTransform = "scale(-1,1)"; - this.displayRegion.style.oTransform = "scale(-1,1)"; - this.displayRegion.style.transform = "scale(-1,1)"; + this.doFlip = !this.doFlip; - this.canvas.style.webkitTransform = "scale(-1,1)"; - this.canvas.style.mozTransform = "scale(-1,1)"; - this.canvas.style.msTransform = "scale(-1,1)"; - this.canvas.style.oTransform = "scale(-1,1)"; - this.canvas.style.transform = "scale(-1,1)"; - - this.element.style.webkitTransform = "scale(-1,1)"; - this.element.style.mozTransform = "scale(-1,1)"; - this.element.style.msTransform = "scale(-1,1)"; - this.element.style.oTransform = "scale(-1,1)"; - this.element.style.transform = "scale(-1,1)"; - } else{ - this.displayRegion.style.webkitTransform = "scale(1,1)"; - this.displayRegion.style.mozTransform = "scale(1,1)"; - this.displayRegion.style.msTransform = "scale(1,1)"; - this.displayRegion.style.oTransform = "scale(1,1)"; - this.displayRegion.style.transform = "scale(1,1)"; - - this.canvas.style.webkitTransform = "scale(1,1)"; - this.canvas.style.mozTransform = "scale(1,1)"; - this.canvas.style.msTransform = "scale(1,1)"; - this.canvas.style.oTransform = "scale(1,1)"; - this.canvas.style.transform = "scale(1,1)"; - - this.element.style.webkitTransform = "scale(1,1)"; - this.element.style.mozTransform = "scale(1,1)"; - this.element.style.msTransform = "scale(1,1)"; - this.element.style.oTransform = "scale(1,1)"; - this.element.style.transform = "scale(1,1)"; - } + this.setDisplayTransform(this.viewer.doFlip ? "scale(-1,1)" : "scale(1,1)"); this.viewport.viewer.forceRedraw(); }, + setDisplayTransform: function(rule) { + this.displayRegion.style.webkitTransform = rule; + this.displayRegion.style.mozTransform = rule; + this.displayRegion.style.msTransform = rule; + this.displayRegion.style.oTransform = rule; + this.displayRegion.style.transform = rule; + + this.canvas.style.webkitTransform = rule; + this.canvas.style.mozTransform = rule; + this.canvas.style.msTransform = rule; + this.canvas.style.oTransform = rule; + this.canvas.style.transform = rule; + + setElementTransform(this.element, rule); + }, + /** * Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs. * @function @@ -445,6 +426,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* } }); + /** * @private * @inner @@ -452,7 +434,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* */ function onCanvasClick( event ) { if ( event.quick && this.viewer.viewport ) { - if(this.viewer.flipped){ + if(this.viewer.doFlip){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position)); @@ -474,7 +456,7 @@ function onCanvasDrag( event ) { event.delta.y = 0; } - if(this.viewer.flipped){ + if(this.viewer.doFlip){ event.delta.x = -event.delta.x; } @@ -541,12 +523,17 @@ function onCanvasScroll( event ) { * @param {Object} element * @param {Number} degrees */ -function _setTransformRotate (element, degrees) { - element.style.webkitTransform = "rotate(" + degrees + "deg)"; - element.style.mozTransform = "rotate(" + degrees + "deg)"; - element.style.msTransform = "rotate(" + degrees + "deg)"; - element.style.oTransform = "rotate(" + degrees + "deg)"; - element.style.transform = "rotate(" + degrees + "deg)"; +function _setTransformRotate( element, degrees ) { + setElementTransform(element, "rotate(" + degrees + "deg)"); } +function setElementTransform( element, rule ) { + element.style.webkitTransform = rule; + element.style.mozTransform = rule; + element.style.msTransform = rule; + element.style.oTransform = rule; + element.style.transform = rule; +} + + }( OpenSeadragon )); diff --git a/src/openseadragon.js b/src/openseadragon.js index 8963e77f..a180e522 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -1130,13 +1130,13 @@ function OpenSeadragon( options ){ showHomeControl: true, //HOME showFullPageControl: true, //FULL showRotationControl: false, //ROTATION - showFlipControl: false, //FLIP + showFlipControl: true, //FLIP controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY //VIEWPORT NAVIGATOR SETTINGS - showNavigator: false, + showNavigator: true, navigatorId: null, navigatorPosition: null, navigatorSizeRatio: 0.2, @@ -1153,7 +1153,7 @@ function OpenSeadragon( options ){ degrees: 0, // INITIAL FLIP STATE - flipped: false, + doFlip: false, // APPEARANCE opacity: 1, @@ -1223,7 +1223,7 @@ function OpenSeadragon( options ){ HOVER: 'rotateright_hover.png', DOWN: 'rotateright_pressed.png' }, - flip: { // Flip icon by Yaroslav Samoylov from the Noun Project + flip: { // Flip icon designed by Yaroslav Samoylov from the Noun Project and modified by Nelson Campos ncampos@criteriamarathon.com, https://thenounproject.com/term/flip/136289/ REST: 'flip_rest.png', GROUP: 'flip_grouphover.png', HOVER: 'flip_hover.png', diff --git a/src/tiledimage.js b/src/tiledimage.js index 1523e5a7..5c35de31 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -844,7 +844,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return; } if (immediately) { - this._degreesSpring.resetTo(degrees); + this._degreesSpring.resetTo(degrees); } else { this._degreesSpring.springTo(degrees); } @@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) { useSketch: useSketch }); } else { - if(tiledImage._drawer.viewer.flipped) { + if(tiledImage._drawer.viewer.doFlip) { tiledImage._drawer._flip({}); } } @@ -1974,7 +1974,7 @@ function drawTiles( tiledImage, lastDrawn ) { if (tiledImage.viewport.degrees !== 0) { tiledImage._drawer._restoreRotationChanges(useSketch); } else{ - if(tiledImage._drawer.viewer.flipped) { + if(tiledImage._drawer.viewer.doFlip) { tiledImage._drawer._flip({}); } } diff --git a/src/viewer.js b/src/viewer.js index 792ebb73..e597041c 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1252,7 +1252,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Boolean} [options.preload=false] Default switch for loading hidden images (true loads, false blocks) * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. - * @param {Boolean} [options.flipped=false] Initial flip/mirror state + * @param {Boolean} [options.doFlip=false] Initial flip/mirror state * @param {String} [options.compositeOperation] How the image is composited onto other images. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. @@ -1415,7 +1415,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, opacity: queueItem.options.opacity, preload: queueItem.options.preload, degrees: queueItem.options.degrees, - flipped: queueItem.options.flipped, + doFlip: queueItem.options.doFlip, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime, @@ -2621,18 +2621,24 @@ function onCanvasKeyPress( event ) { this.viewport.applyConstraints(); } return false; - case 114: //r - case 82: //R - if(this.flipped){ + case 114: //r - 90 degrees clockwise rotation + if(this.doFlip){ this.viewport.setRotation(this.viewport.degrees - 90); } else{ this.viewport.setRotation(this.viewport.degrees + 90); } this.viewport.applyConstraints(); return false; - case 70: //F + case 82: //R - 90 degrees counter clockwise rotation + if(this.doFlip){ + this.viewport.setRotation(this.viewport.degrees + 90); + } else{ + this.viewport.setRotation(this.viewport.degrees - 90); + } + this.viewport.applyConstraints(); + return false; case 102: //f - this.flipped = !this.flipped; + this.doFlip = !this.doFlip; if(this.navigator){ this.navigator.toogleFlip(); } @@ -2657,7 +2663,7 @@ function onCanvasClick( event ) { if ( !haveKeyboardFocus ) { this.canvas.focus(); } - if(this.flipped){ + if(this.doFlip){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -2779,7 +2785,7 @@ function onCanvasDrag( event ) { if( !this.panVertical ){ event.delta.y = 0; } - if(this.flipped){ + if(this.doFlip){ event.delta.x = -event.delta.x; } @@ -3107,7 +3113,7 @@ function onCanvasScroll( event ) { if (deltaScrollTime > this.minScrollDeltaTime) { this._lastScrollTime = thisScrollTime; - if(this.flipped){ + if(this.doFlip){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -3476,7 +3482,7 @@ function onFullScreen() { function onRotateLeft() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.flipped ){ + if ( this.doFlip ){ if (currRotation === 270) { currRotation = 0; } @@ -3501,7 +3507,7 @@ function onRotateLeft() { function onRotateRight() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.flipped ){ + if ( this.doFlip ){ if (currRotation === 0) { currRotation = 270; } @@ -3524,7 +3530,7 @@ function onRotateRight() { * Note: The current rotation feature is limited to 90 degree turns. */ function onFlip() { - this.flipped = !this.flipped; + this.doFlip = !this.doFlip; if(this.navigator){ this.navigator.toogleFlip(); } diff --git a/src/viewport.js b/src/viewport.js index e44f46bb..9d357910 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -886,6 +886,7 @@ $.Viewport.prototype = { this.viewer.world.getHomeBounds(), this.viewer.world.getContentFactor()); this.viewer.forceRedraw(); + /** * Raised when rotation has been changed. *