| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 'use strict'; | 5 'use strict'; |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * Viewport class controls the way the image is displayed (scale, offset etc). | 8 * Viewport class controls the way the image is displayed (scale, offset etc). |
| 9 * @constructor | 9 * @constructor |
| 10 */ | 10 */ |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 55 /** | 55 /** |
| 56 * Zoom ratio specified by user operations. | 56 * Zoom ratio specified by user operations. |
| 57 * @type {number} | 57 * @type {number} |
| 58 * @private | 58 * @private |
| 59 */ | 59 */ |
| 60 this.zoom_ = 1; | 60 this.zoom_ = 1; |
| 61 | 61 |
| 62 /** | 62 /** |
| 63 * Offset specified by user operations. | 63 * Offset specified by user operations. |
| 64 * @type {number} | 64 * @type {number} |
| 65 * @private |
| 65 */ | 66 */ |
| 66 this.offsetX_ = 0; | 67 this.offsetX_ = 0; |
| 67 | 68 |
| 68 /** | 69 /** |
| 69 * Offset specified by user operations. | 70 * Offset specified by user operations. |
| 70 * @type {number} | 71 * @type {number} |
| 72 * @private |
| 71 */ | 73 */ |
| 72 this.offsetY_ = 0; | 74 this.offsetY_ = 0; |
| 73 | 75 |
| 74 /** | 76 /** |
| 75 * Integer Rotation value. | 77 * Integer Rotation value. |
| 76 * The rotation angle is this.rotation_ * 90. | 78 * The rotation angle is this.rotation_ * 90. |
| 77 * @type {number} | 79 * @type {number} |
| 80 * @private |
| 78 */ | 81 */ |
| 79 this.rotation_ = 0; | 82 this.rotation_ = 0; |
| 80 | 83 |
| 81 /** | 84 /** |
| 82 * Generation of the screen size image cache. | 85 * Generation of the screen size image cache. |
| 83 * This is incremented every time when the size of image cache is changed. | 86 * This is incremented every time when the size of image cache is changed. |
| 84 * @type {number} | 87 * @type {number} |
| 85 * @private | 88 * @private |
| 86 */ | 89 */ |
| 87 this.generation_ = 0; | 90 this.generation_ = 0; |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 188 return this.rotation_; | 191 return this.rotation_; |
| 189 }; | 192 }; |
| 190 | 193 |
| 191 /** | 194 /** |
| 192 * Obtains the scale for the specified image size. | 195 * Obtains the scale for the specified image size. |
| 193 * | 196 * |
| 194 * @param {number} width Width of the full resolution image. | 197 * @param {number} width Width of the full resolution image. |
| 195 * @param {number} height Height of the full resolution image. | 198 * @param {number} height Height of the full resolution image. |
| 196 * @return {number} The ratio of the full resotion image size and the calculated | 199 * @return {number} The ratio of the full resotion image size and the calculated |
| 197 * displayed image size. | 200 * displayed image size. |
| 201 * @private |
| 198 */ | 202 */ |
| 199 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { | 203 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { |
| 200 var scaleX = this.screenBounds_.width / width; | 204 var scaleX = this.screenBounds_.width / width; |
| 201 var scaleY = this.screenBounds_.height / height; | 205 var scaleY = this.screenBounds_.height / height; |
| 202 // Scales > (1 / devicePixelRatio) do not look good. Also they are | 206 // Scales > (1 / devicePixelRatio) do not look good. Also they are |
| 203 // not really useful as we do not have any pixel-level operations. | 207 // not really useful as we do not have any pixel-level operations. |
| 204 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); | 208 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); |
| 205 }; | 209 }; |
| 206 | 210 |
| 207 /** | 211 /** |
| (...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 345 */ | 349 */ |
| 346 Viewport.prototype.imageToScreenRect = function(rect) { | 350 Viewport.prototype.imageToScreenRect = function(rect) { |
| 347 return new Rect( | 351 return new Rect( |
| 348 this.imageToScreenX(rect.left), | 352 this.imageToScreenX(rect.left), |
| 349 this.imageToScreenY(rect.top), | 353 this.imageToScreenY(rect.top), |
| 350 Math.round(this.imageToScreenSize(rect.width)), | 354 Math.round(this.imageToScreenSize(rect.width)), |
| 351 Math.round(this.imageToScreenSize(rect.height))); | 355 Math.round(this.imageToScreenSize(rect.height))); |
| 352 }; | 356 }; |
| 353 | 357 |
| 354 /** | 358 /** |
| 359 * @param {number} width Width of the rectangle. |
| 360 * @param {number} height Height of the rectangle. |
| 361 * @param {number} offsetX X-offset of center position of the rectangle. |
| 362 * @param {number} offsetY Y-offset of center position of the rectangle. |
| 363 * @return {Rect} Rectangle with given geometry. |
| 355 * @private | 364 * @private |
| 356 */ | 365 */ |
| 357 Viewport.prototype.getCenteredRect_ = function( | 366 Viewport.prototype.getCenteredRect_ = function( |
| 358 width, height, offsetX, offsetY) { | 367 width, height, offsetX, offsetY) { |
| 359 return new Rect( | 368 return new Rect( |
| 360 ~~((this.screenBounds_.width - width) / 2) + offsetX, | 369 ~~((this.screenBounds_.width - width) / 2) + offsetX, |
| 361 ~~((this.screenBounds_.height - height) / 2) + offsetY, | 370 ~~((this.screenBounds_.height - height) / 2) + offsetY, |
| 362 width, | 371 width, |
| 363 height); | 372 height); |
| 364 }; | 373 }; |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 453 Viewport.prototype.getTransformation = function() { | 462 Viewport.prototype.getTransformation = function() { |
| 454 var rotationScaleAdjustment; | 463 var rotationScaleAdjustment; |
| 455 if (this.rotation_ % 2) { | 464 if (this.rotation_ % 2) { |
| 456 rotationScaleAdjustment = this.getFittingScaleForImageSize_( | 465 rotationScaleAdjustment = this.getFittingScaleForImageSize_( |
| 457 this.imageBounds_.height, this.imageBounds_.width) / this.scale_; | 466 this.imageBounds_.height, this.imageBounds_.width) / this.scale_; |
| 458 } else { | 467 } else { |
| 459 rotationScaleAdjustment = 1; | 468 rotationScaleAdjustment = 1; |
| 460 } | 469 } |
| 461 return [ | 470 return [ |
| 462 'translate(' + this.offsetX_ + 'px, ' + this.offsetY_ + 'px) ', | 471 'translate(' + this.offsetX_ + 'px, ' + this.offsetY_ + 'px) ', |
| 463 'rotate(' + (this.rotation_ * 90) + 'deg)', | 472 'rotate(' + (this.rotation_ * 90) + 'deg)', |
| 464 'scale(' + (this.zoom_ * rotationScaleAdjustment) + ')' | 473 'scale(' + (this.zoom_ * rotationScaleAdjustment) + ')' |
| 465 ].join(' '); | 474 ].join(' '); |
| 466 }; | 475 }; |
| 467 | 476 |
| 468 /** | 477 /** |
| 469 * Obtains shift CSS transformation for the screen image. | 478 * Obtains shift CSS transformation for the screen image. |
| 470 * @param {number} dx Amount of shift. | 479 * @param {number} dx Amount of shift. |
| 471 * @return {string} Transformation description. | 480 * @return {string} Transformation description. |
| 472 */ | 481 */ |
| 473 Viewport.prototype.getShiftTransformation = function(dx) { | 482 Viewport.prototype.getShiftTransformation = function(dx) { |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 540 var screenWidth = this.screenBounds_.width; | 549 var screenWidth = this.screenBounds_.width; |
| 541 var screenHeight = this.screenBounds_.height; | 550 var screenHeight = this.screenBounds_.height; |
| 542 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; | 551 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; |
| 543 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; | 552 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; |
| 544 return [ | 553 return [ |
| 545 'translate(' + dx + 'px,' + dy + 'px)', | 554 'translate(' + dx + 'px,' + dy + 'px)', |
| 546 'scale(' + scaleX + ',' + scaleY + ')', | 555 'scale(' + scaleX + ',' + scaleY + ')', |
| 547 this.getTransformation() | 556 this.getTransformation() |
| 548 ].join(' '); | 557 ].join(' '); |
| 549 }; | 558 }; |
| OLD | NEW |