mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-23 13:46:09 +03:00
Code Issues Projects Releases Wiki Activity

Adds two helpers for style formating and updates onCanvasKeyPress method.

Browse Source 
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).
This commit is contained in:
Nelson Campos 2018-04-06 11:52:10 +01:00
parent 71fd747051
commit 6e4012976b
6 changed files with 65 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/drawer.js
View File

@ -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);

77
src/navigator.js
View File

@ -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 ));

8
src/openseadragon.js
View File

@ -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',

4
src/tiledimage.js
View File

@ -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({});
}
}

32
src/viewer.js
View File

@ -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();
}

1
src/viewport.js
View File

@ -886,6 +886,7 @@ $.Viewport.prototype = {
this.viewer.world.getHomeBounds(),
this.viewer.world.getContentFactor());
this.viewer.forceRedraw();
/**
* Raised when rotation has been changed.
*