| 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 119 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 130 | 130 |
| 131 /** | 131 /** |
| 132 * Returns the value of zoom. | 132 * Returns the value of zoom. |
| 133 * @return {number} Zoom value. | 133 * @return {number} Zoom value. |
| 134 */ | 134 */ |
| 135 Viewport.prototype.getZoom = function() { | 135 Viewport.prototype.getZoom = function() { |
| 136 return this.zoom_; | 136 return this.zoom_; |
| 137 }; | 137 }; |
| 138 | 138 |
| 139 /** | 139 /** |
| 140 * Sets the nearset larger value of ZOOM_RATIOS. | 140 * Sets the nearest larger value of ZOOM_RATIOS. |
| 141 */ | 141 */ |
| 142 Viewport.prototype.zoomIn = function() { | 142 Viewport.prototype.zoomIn = function() { |
| 143 var zoom = Viewport.ZOOM_RATIOS[0]; | 143 var zoom = Viewport.ZOOM_RATIOS[0]; |
| 144 for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) { | 144 for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) { |
| 145 zoom = Viewport.ZOOM_RATIOS[i]; | 145 zoom = Viewport.ZOOM_RATIOS[i]; |
| 146 if (zoom > this.zoom_) | 146 if (zoom > this.zoom_) |
| 147 break; | 147 break; |
| 148 } | 148 } |
| 149 this.setZoom(zoom); | 149 this.setZoom(zoom); |
| 150 }; | 150 }; |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 186 */ | 186 */ |
| 187 Viewport.prototype.getRotation = function() { | 187 Viewport.prototype.getRotation = function() { |
| 188 return this.rotation_; | 188 return this.rotation_; |
| 189 }; | 189 }; |
| 190 | 190 |
| 191 /** | 191 /** |
| 192 * Obtains the scale for the specified image size. | 192 * Obtains the scale for the specified image size. |
| 193 * | 193 * |
| 194 * @param {number} width Width of the full resolution image. | 194 * @param {number} width Width of the full resolution image. |
| 195 * @param {number} height Height of the full resolution image. | 195 * @param {number} height Height of the full resolution image. |
| 196 * @return {number} The ratio of the fullresotion image size and the calculated | 196 * @return {number} The ratio of the full resotion image size and the calculated |
| 197 * displayed image size. | 197 * displayed image size. |
| 198 */ | 198 */ |
| 199 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { | 199 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { |
| 200 var scaleX = this.screenBounds_.width / width; | 200 var scaleX = this.screenBounds_.width / width; |
| 201 var scaleY = this.screenBounds_.height / height; | 201 var scaleY = this.screenBounds_.height / height; |
| 202 // Scales > (1 / devicePixelRatio) do not look good. Also they are | 202 // Scales > (1 / devicePixelRatio) do not look good. Also they are |
| 203 // not really useful as we do not have any pixel-level operations. | 203 // not really useful as we do not have any pixel-level operations. |
| 204 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); | 204 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); |
| 205 }; | 205 }; |
| 206 | 206 |
| (...skipping 203 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 410 ~~(this.imageBounds_.width * this.scale_), | 410 ~~(this.imageBounds_.width * this.scale_), |
| 411 ~~(this.imageBounds_.height * this.scale_), | 411 ~~(this.imageBounds_.height * this.scale_), |
| 412 0, | 412 0, |
| 413 0); | 413 0); |
| 414 if (!oldBounds || | 414 if (!oldBounds || |
| 415 this.imageElementBoundsOnScreen_.width != oldBounds.width || | 415 this.imageElementBoundsOnScreen_.width != oldBounds.width || |
| 416 this.imageElementBoundsOnScreen_.height != oldBounds.height) { | 416 this.imageElementBoundsOnScreen_.height != oldBounds.height) { |
| 417 this.generation_++; | 417 this.generation_++; |
| 418 } | 418 } |
| 419 | 419 |
| 420 // Image bounds on screen cliped with the screen bounds. | 420 // Image bounds on screen clipped with the screen bounds. |
| 421 var left = Math.max(this.imageBoundsOnScreen_.left, 0); | 421 var left = Math.max(this.imageBoundsOnScreen_.left, 0); |
| 422 var top = Math.max(this.imageBoundsOnScreen_.top, 0); | 422 var top = Math.max(this.imageBoundsOnScreen_.top, 0); |
| 423 var right = Math.min( | 423 var right = Math.min( |
| 424 this.imageBoundsOnScreen_.right, this.screenBounds_.width); | 424 this.imageBoundsOnScreen_.right, this.screenBounds_.width); |
| 425 var bottom = Math.min( | 425 var bottom = Math.min( |
| 426 this.imageBoundsOnScreen_.bottom, this.screenBounds_.height); | 426 this.imageBoundsOnScreen_.bottom, this.screenBounds_.height); |
| 427 this.imageBoundsOnScreenClipped_ = new Rect( | 427 this.imageBoundsOnScreenClipped_ = new Rect( |
| 428 left, top, right - left, bottom - top); | 428 left, top, right - left, bottom - top); |
| 429 }; | 429 }; |
| 430 | 430 |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 493 var degree = orientation ? '-90deg' : '90deg'; | 493 var degree = orientation ? '-90deg' : '90deg'; |
| 494 return [ | 494 return [ |
| 495 'scale(' + scaleRatio + ')', | 495 'scale(' + scaleRatio + ')', |
| 496 'rotate(' + degree + ')', | 496 'rotate(' + degree + ')', |
| 497 this.getTransformation() | 497 this.getTransformation() |
| 498 ].join(' '); | 498 ].join(' '); |
| 499 }; | 499 }; |
| 500 | 500 |
| 501 /** | 501 /** |
| 502 * Obtains CSS transformation that makes the cropped image fit the original | 502 * Obtains CSS transformation that makes the cropped image fit the original |
| 503 * image. The new cropped image that the transformaton is applied to fits to the | 503 * image. The new cropped image that the transformation is applied to fits to |
| 504 * the cropped rectangle in the original image. | 504 * the cropped rectangle in the original image. |
| 505 * | 505 * |
| 506 * @param {number} imageWidth Width of the original image. | 506 * @param {number} imageWidth Width of the original image. |
| 507 * @param {number} imageHeight Height of the origianl image. | 507 * @param {number} imageHeight Height of the original image. |
| 508 * @param {Rect} imageCropRect Crop rectangle in the image's coordinate system. | 508 * @param {Rect} imageCropRect Crop rectangle in the image's coordinate system. |
| 509 * @return {string} Transformation description. | 509 * @return {string} Transformation description. |
| 510 */ | 510 */ |
| 511 Viewport.prototype.getInverseTransformForCroppedImage = | 511 Viewport.prototype.getInverseTransformForCroppedImage = |
| 512 function(imageWidth, imageHeight, imageCropRect) { | 512 function(imageWidth, imageHeight, imageCropRect) { |
| 513 var wholeScale = this.getFittingScaleForImageSize_( | 513 var wholeScale = this.getFittingScaleForImageSize_( |
| 514 imageWidth, imageHeight); | 514 imageWidth, imageHeight); |
| 515 var croppedScale = this.getFittingScaleForImageSize_( | 515 var croppedScale = this.getFittingScaleForImageSize_( |
| 516 imageCropRect.width, imageCropRect.height); | 516 imageCropRect.width, imageCropRect.height); |
| 517 var dx = | 517 var dx = |
| 518 (imageCropRect.left + imageCropRect.width / 2 - imageWidth / 2) * | 518 (imageCropRect.left + imageCropRect.width / 2 - imageWidth / 2) * |
| 519 wholeScale; | 519 wholeScale; |
| 520 var dy = | 520 var dy = |
| 521 (imageCropRect.top + imageCropRect.height / 2 - imageHeight / 2) * | 521 (imageCropRect.top + imageCropRect.height / 2 - imageHeight / 2) * |
| 522 wholeScale; | 522 wholeScale; |
| 523 return [ | 523 return [ |
| 524 'translate(' + dx + 'px,' + dy + 'px)', | 524 'translate(' + dx + 'px,' + dy + 'px)', |
| 525 'scale(' + wholeScale / croppedScale + ')', | 525 'scale(' + wholeScale / croppedScale + ')', |
| 526 this.getTransformation() | 526 this.getTransformation() |
| 527 ].join(' '); | 527 ].join(' '); |
| 528 }; | 528 }; |
| 529 | 529 |
| 530 /** | 530 /** |
| 531 * Obtains CSS transformaton that makes the image fit to the screen rectangle. | 531 * Obtains CSS transformation that makes the image fit to the screen rectangle. |
| 532 * | 532 * |
| 533 * @param {Rect} screenRect Screen rectangle. | 533 * @param {Rect} screenRect Screen rectangle. |
| 534 * @return {string} Transformation description. | 534 * @return {string} Transformation description. |
| 535 */ | 535 */ |
| 536 Viewport.prototype.getScreenRectTransformForImage = function(screenRect) { | 536 Viewport.prototype.getScreenRectTransformForImage = function(screenRect) { |
| 537 var imageBounds = this.getImageElementBoundsOnScreen(); | 537 var imageBounds = this.getImageElementBoundsOnScreen(); |
| 538 var scaleX = screenRect.width / imageBounds.width; | 538 var scaleX = screenRect.width / imageBounds.width; |
| 539 var scaleY = screenRect.height / imageBounds.height; | 539 var scaleY = screenRect.height / imageBounds.height; |
| 540 var screenWidth = this.screenBounds_.width; | 540 var screenWidth = this.screenBounds_.width; |
| 541 var screenHeight = this.screenBounds_.height; | 541 var screenHeight = this.screenBounds_.height; |
| 542 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; | 542 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; |
| 543 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; | 543 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; |
| 544 return [ | 544 return [ |
| 545 'translate(' + dx + 'px,' + dy + 'px)', | 545 'translate(' + dx + 'px,' + dy + 'px)', |
| 546 'scale(' + scaleX + ',' + scaleY + ')', | 546 'scale(' + scaleX + ',' + scaleY + ')', |
| 547 this.getTransformation() | 547 this.getTransformation() |
| 548 ].join(' '); | 548 ].join(' '); |
| 549 }; | 549 }; |
| OLD | NEW |