| 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 17 matching lines...) Expand all Loading... |
| 28 * not zoom operated by users. | 28 * not zoom operated by users. |
| 29 * @type {number} | 29 * @type {number} |
| 30 * @private | 30 * @private |
| 31 */ | 31 */ |
| 32 this.scale_ = 1; | 32 this.scale_ = 1; |
| 33 this.offsetX_ = 0; | 33 this.offsetX_ = 0; |
| 34 this.offsetY_ = 0; | 34 this.offsetY_ = 0; |
| 35 | 35 |
| 36 this.generation_ = 0; | 36 this.generation_ = 0; |
| 37 | 37 |
| 38 this.repaintCallbacks_ = []; | |
| 39 this.update(); | 38 this.update(); |
| 40 } | 39 } |
| 41 | 40 |
| 42 /** | 41 /** |
| 43 * @param {number} width Image width. | 42 * @param {number} width Image width. |
| 44 * @param {number} height Image height. | 43 * @param {number} height Image height. |
| 45 */ | 44 */ |
| 46 Viewport.prototype.setImageSize = function(width, height) { | 45 Viewport.prototype.setImageSize = function(width, height) { |
| 47 this.imageBounds_ = new Rect(width, height); | 46 this.imageBounds_ = new Rect(width, height); |
| 48 this.invalidateCaches(); | 47 this.invalidateCaches(); |
| (...skipping 124 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 173 if (!hitFunc) hitFunc = function() { return true; }; | 172 if (!hitFunc) hitFunc = function() { return true; }; |
| 174 if (!scaleFunc) scaleFunc = this.getScale.bind(this); | 173 if (!scaleFunc) scaleFunc = this.getScale.bind(this); |
| 175 | 174 |
| 176 var self = this; | 175 var self = this; |
| 177 return function(x, y) { | 176 return function(x, y) { |
| 178 if (hitFunc(x, y)) { | 177 if (hitFunc(x, y)) { |
| 179 var scale = scaleFunc(); | 178 var scale = scaleFunc(); |
| 180 self.setOffset( | 179 self.setOffset( |
| 181 originalOffsetX + (x - originalX) / scale, | 180 originalOffsetX + (x - originalX) / scale, |
| 182 originalOffsetY + (y - originalY) / scale); | 181 originalOffsetY + (y - originalY) / scale); |
| 183 self.repaint(); | |
| 184 } | 182 } |
| 185 }; | 183 }; |
| 186 }; | 184 }; |
| 187 | 185 |
| 188 /* | |
| 189 * Access to the current viewport state. | |
| 190 */ | |
| 191 | |
| 192 /** | 186 /** |
| 193 * @return {Rect} The image bounds in image coordinates. | 187 * @return {Rect} The image bounds in image coordinates. |
| 194 */ | 188 */ |
| 195 Viewport.prototype.getImageBounds = function() { return this.imageBounds_; }; | 189 Viewport.prototype.getImageBounds = function() { return this.imageBounds_; }; |
| 196 | 190 |
| 197 /** | 191 /** |
| 198 * @return {Rect} The screen bounds in screen coordinates. | 192 * @return {Rect} The screen bounds in screen coordinates. |
| 199 */ | 193 */ |
| 200 Viewport.prototype.getScreenBounds = function() { return this.screenBounds_; }; | 194 Viewport.prototype.getScreenBounds = function() { return this.screenBounds_; }; |
| 201 | 195 |
| (...skipping 11 matching lines...) Expand all Loading... |
| 213 | 207 |
| 214 /** | 208 /** |
| 215 * A counter that is incremented with each viewport state change. | 209 * A counter that is incremented with each viewport state change. |
| 216 * Clients that cache anything that depends on the viewport state should keep | 210 * Clients that cache anything that depends on the viewport state should keep |
| 217 * track of this counter. | 211 * track of this counter. |
| 218 * @return {number} counter. | 212 * @return {number} counter. |
| 219 */ | 213 */ |
| 220 Viewport.prototype.getCacheGeneration = function() { return this.generation_; }; | 214 Viewport.prototype.getCacheGeneration = function() { return this.generation_; }; |
| 221 | 215 |
| 222 /** | 216 /** |
| 223 * Called on event view port state change (even if repaint has not been called). | 217 * Called on event view port state change. |
| 224 */ | 218 */ |
| 225 Viewport.prototype.invalidateCaches = function() { this.generation_++; }; | 219 Viewport.prototype.invalidateCaches = function() { this.generation_++; }; |
| 226 | 220 |
| 227 /** | 221 /** |
| 228 * @return {Rect} The image bounds in screen coordinates. | 222 * @return {Rect} The image bounds in screen coordinates. |
| 229 */ | 223 */ |
| 230 Viewport.prototype.getImageBoundsOnScreen = function() { | 224 Viewport.prototype.getImageBoundsOnScreen = function() { |
| 231 return this.imageOnScreen_; | 225 return this.imageOnScreen_; |
| 232 }; | 226 }; |
| 233 | 227 |
| 234 /* | |
| 235 * Conversion between the screen and image coordinate spaces. | |
| 236 */ | |
| 237 | |
| 238 /** | 228 /** |
| 239 * @param {number} size Size in screen coordinates. | 229 * @param {number} size Size in screen coordinates. |
| 240 * @return {number} Size in image coordinates. | 230 * @return {number} Size in image coordinates. |
| 241 */ | 231 */ |
| 242 Viewport.prototype.screenToImageSize = function(size) { | 232 Viewport.prototype.screenToImageSize = function(size) { |
| 243 return size / this.getScale(); | 233 return size / this.getScale(); |
| 244 }; | 234 }; |
| 245 | 235 |
| 246 /** | 236 /** |
| 247 * @param {number} x X in screen coordinates. | 237 * @param {number} x X in screen coordinates. |
| (...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 417 Math.round(this.clampOffsetY_(this.offsetY_) * scale); | 407 Math.round(this.clampOffsetY_(this.offsetY_) * scale); |
| 418 this.imageClipped_.top = Math.round(-this.imageOnScreen_.top / scale); | 408 this.imageClipped_.top = Math.round(-this.imageOnScreen_.top / scale); |
| 419 this.imageClipped_.height = Math.round(this.screenBounds_.height / scale); | 409 this.imageClipped_.height = Math.round(this.screenBounds_.height / scale); |
| 420 } else { | 410 } else { |
| 421 this.screenClipped_.top = this.imageOnScreen_.top; | 411 this.screenClipped_.top = this.imageOnScreen_.top; |
| 422 this.screenClipped_.height = this.imageOnScreen_.height; | 412 this.screenClipped_.height = this.imageOnScreen_.height; |
| 423 } | 413 } |
| 424 }; | 414 }; |
| 425 | 415 |
| 426 /** | 416 /** |
| 427 * @param {function} callback Repaint callback. | |
| 428 */ | |
| 429 Viewport.prototype.addRepaintCallback = function(callback) { | |
| 430 this.repaintCallbacks_.push(callback); | |
| 431 }; | |
| 432 | |
| 433 /** | |
| 434 * Repaint all clients. | |
| 435 */ | |
| 436 Viewport.prototype.repaint = function() { | |
| 437 this.update(); | |
| 438 for (var i = 0; i != this.repaintCallbacks_.length; i++) | |
| 439 this.repaintCallbacks_[i](); | |
| 440 }; | |
| 441 | |
| 442 /** | |
| 443 * Obtains CSS transformation for the screen image. | 417 * Obtains CSS transformation for the screen image. |
| 444 * @return {string} Transformation description. | 418 * @return {string} Transformation description. |
| 445 */ | 419 */ |
| 446 Viewport.prototype.getTransformation = function() { | 420 Viewport.prototype.getTransformation = function() { |
| 447 return 'scale(' + (1 / window.devicePixelRatio) + ')'; | 421 return 'scale(' + (1 / window.devicePixelRatio) + ')'; |
| 448 }; | 422 }; |
| 449 | 423 |
| 450 /** | 424 /** |
| 451 * Obtains shift CSS transformation for the screen image. | 425 * Obtains shift CSS transformation for the screen image. |
| 452 * @param {number} dx Amount of shift. | 426 * @param {number} dx Amount of shift. |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 523 var screenWidth = this.screenBounds_.width; | 497 var screenWidth = this.screenBounds_.width; |
| 524 var screenHeight = this.screenBounds_.height; | 498 var screenHeight = this.screenBounds_.height; |
| 525 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; | 499 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; |
| 526 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; | 500 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; |
| 527 return [ | 501 return [ |
| 528 'translate(' + dx + 'px,' + dy + 'px)', | 502 'translate(' + dx + 'px,' + dy + 'px)', |
| 529 'scale(' + scaleX + ',' + scaleY + ')', | 503 'scale(' + scaleX + ',' + scaleY + ')', |
| 530 this.getTransformation() | 504 this.getTransformation() |
| 531 ].join(' '); | 505 ].join(' '); |
| 532 }; | 506 }; |
| OLD | NEW |