| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 'use strict'; | |
| 6 | |
| 7 /** | |
| 8 * Viewport class controls the way the image is displayed (scale, offset etc). | |
| 9 * @constructor | |
| 10 */ | |
| 11 function Viewport() { | |
| 12 this.imageBounds_ = new Rect(); | |
| 13 this.screenBounds_ = new Rect(); | |
| 14 | |
| 15 this.scale_ = 1; | |
| 16 this.offsetX_ = 0; | |
| 17 this.offsetY_ = 0; | |
| 18 | |
| 19 this.generation_ = 0; | |
| 20 | |
| 21 this.scaleControl_ = null; | |
| 22 this.repaintCallbacks_ = []; | |
| 23 this.update(); | |
| 24 } | |
| 25 | |
| 26 /* | |
| 27 * Viewport modification. | |
| 28 */ | |
| 29 | |
| 30 /** | |
| 31 * @param {Object} scaleControl The UI object responsible for scaling. | |
| 32 */ | |
| 33 Viewport.prototype.setScaleControl = function(scaleControl) { | |
| 34 this.scaleControl_ = scaleControl; | |
| 35 }; | |
| 36 | |
| 37 /** | |
| 38 * @param {number} width Image width. | |
| 39 * @param {number} height Image height. | |
| 40 */ | |
| 41 Viewport.prototype.setImageSize = function(width, height) { | |
| 42 this.imageBounds_ = new Rect(width, height); | |
| 43 if (this.scaleControl_) this.scaleControl_.displayImageSize(width, height); | |
| 44 this.invalidateCaches(); | |
| 45 }; | |
| 46 | |
| 47 /** | |
| 48 * @param {number} width Screen width. | |
| 49 * @param {number} height Screen height. | |
| 50 */ | |
| 51 Viewport.prototype.setScreenSize = function(width, height) { | |
| 52 this.screenBounds_ = new Rect(width, height); | |
| 53 if (this.scaleControl_) | |
| 54 this.scaleControl_.setMinScale(this.getFittingScale()); | |
| 55 this.invalidateCaches(); | |
| 56 }; | |
| 57 | |
| 58 /** | |
| 59 * Set the size by an HTML element. | |
| 60 * | |
| 61 * @param {HTMLElement} frame The element acting as the "screen". | |
| 62 */ | |
| 63 Viewport.prototype.sizeByFrame = function(frame) { | |
| 64 this.setScreenSize(frame.clientWidth, frame.clientHeight); | |
| 65 }; | |
| 66 | |
| 67 /** | |
| 68 * Set the size and scale to fit an HTML element. | |
| 69 * | |
| 70 * @param {HTMLElement} frame The element acting as the "screen". | |
| 71 */ | |
| 72 Viewport.prototype.sizeByFrameAndFit = function(frame) { | |
| 73 var wasFitting = this.getScale() == this.getFittingScale(); | |
| 74 this.sizeByFrame(frame); | |
| 75 var minScale = this.getFittingScale(); | |
| 76 if (wasFitting || (this.getScale() < minScale)) { | |
| 77 this.setScale(minScale, true); | |
| 78 } | |
| 79 }; | |
| 80 | |
| 81 /** | |
| 82 * @return {number} Scale. | |
| 83 */ | |
| 84 Viewport.prototype.getScale = function() { return this.scale_ }; | |
| 85 | |
| 86 /** | |
| 87 * @param {number} scale The new scale. | |
| 88 * @param {boolean} notify True if the change should be reflected in the UI. | |
| 89 */ | |
| 90 Viewport.prototype.setScale = function(scale, notify) { | |
| 91 if (this.scale_ == scale) return; | |
| 92 this.scale_ = scale; | |
| 93 if (notify && this.scaleControl_) this.scaleControl_.displayScale(scale); | |
| 94 this.invalidateCaches(); | |
| 95 }; | |
| 96 | |
| 97 /** | |
| 98 * @return {number} Best scale to fit the current image into the current screen. | |
| 99 */ | |
| 100 Viewport.prototype.getFittingScale = function() { | |
| 101 var scaleX = this.screenBounds_.width / this.imageBounds_.width; | |
| 102 var scaleY = this.screenBounds_.height / this.imageBounds_.height; | |
| 103 // Scales > (1 / this.getDevicePixelRatio()) do not look good. Also they are | |
| 104 // not really useful as we do not have any pixel-level operations. | |
| 105 return Math.min(1 / Viewport.getDevicePixelRatio(), scaleX, scaleY); | |
| 106 }; | |
| 107 | |
| 108 /** | |
| 109 * Set the scale to fit the image into the screen. | |
| 110 */ | |
| 111 Viewport.prototype.fitImage = function() { | |
| 112 var scale = this.getFittingScale(); | |
| 113 if (this.scaleControl_) this.scaleControl_.setMinScale(scale); | |
| 114 this.setScale(scale, true); | |
| 115 }; | |
| 116 | |
| 117 /** | |
| 118 * @return {number} X-offset of the viewport. | |
| 119 */ | |
| 120 Viewport.prototype.getOffsetX = function() { return this.offsetX_ }; | |
| 121 | |
| 122 /** | |
| 123 * @return {number} Y-offset of the viewport. | |
| 124 */ | |
| 125 Viewport.prototype.getOffsetY = function() { return this.offsetY_ }; | |
| 126 | |
| 127 /** | |
| 128 * Set the image offset in the viewport. | |
| 129 * @param {number} x X-offset. | |
| 130 * @param {number} y Y-offset. | |
| 131 * @param {boolean} ignoreClipping True if no clipping should be applied. | |
| 132 */ | |
| 133 Viewport.prototype.setOffset = function(x, y, ignoreClipping) { | |
| 134 if (!ignoreClipping) { | |
| 135 x = this.clampOffsetX_(x); | |
| 136 y = this.clampOffsetY_(y); | |
| 137 } | |
| 138 if (this.offsetX_ == x && this.offsetY_ == y) return; | |
| 139 this.offsetX_ = x; | |
| 140 this.offsetY_ = y; | |
| 141 this.invalidateCaches(); | |
| 142 }; | |
| 143 | |
| 144 /** | |
| 145 * Return a closure that can be called to pan the image. | |
| 146 * Useful for implementing non-trivial variants of panning (overview etc). | |
| 147 * @param {number} originalX The x coordinate on the screen canvas that | |
| 148 * corresponds to zero change to offsetX. | |
| 149 * @param {number} originalY The y coordinate on the screen canvas that | |
| 150 * corresponds to zero change to offsetY. | |
| 151 * @param {function():number} scaleFunc returns the image to screen scale. | |
| 152 * @param {function(number,number):boolean} hitFunc returns true if (x,y) is | |
| 153 * in the valid region. | |
| 154 * @return {function} The closure to pan the image. | |
| 155 */ | |
| 156 Viewport.prototype.createOffsetSetter = function( | |
| 157 originalX, originalY, scaleFunc, hitFunc) { | |
| 158 var originalOffsetX = this.offsetX_; | |
| 159 var originalOffsetY = this.offsetY_; | |
| 160 if (!hitFunc) hitFunc = function() { return true }; | |
| 161 if (!scaleFunc) scaleFunc = this.getScale.bind(this); | |
| 162 | |
| 163 var self = this; | |
| 164 return function(x, y) { | |
| 165 if (hitFunc(x, y)) { | |
| 166 var scale = scaleFunc(); | |
| 167 self.setOffset( | |
| 168 originalOffsetX + (x - originalX) / scale, | |
| 169 originalOffsetY + (y - originalY) / scale); | |
| 170 self.repaint(); | |
| 171 } | |
| 172 }; | |
| 173 }; | |
| 174 | |
| 175 /* | |
| 176 * Access to the current viewport state. | |
| 177 */ | |
| 178 | |
| 179 /** | |
| 180 * @return {Rect} The image bounds in image coordinates. | |
| 181 */ | |
| 182 Viewport.prototype.getImageBounds = function() { return this.imageBounds_ }; | |
| 183 | |
| 184 /** | |
| 185 * @return {Rect} The screen bounds in screen coordinates. | |
| 186 */ | |
| 187 Viewport.prototype.getScreenBounds = function() { return this.screenBounds_ }; | |
| 188 | |
| 189 /** | |
| 190 * @return {Rect} The visible part of the image, in image coordinates. | |
| 191 */ | |
| 192 Viewport.prototype.getImageClipped = function() { return this.imageClipped_ }; | |
| 193 | |
| 194 /** | |
| 195 * @return {Rect} The visible part of the image, in screen coordinates. | |
| 196 */ | |
| 197 Viewport.prototype.getScreenClipped = function() { return this.screenClipped_ }; | |
| 198 | |
| 199 /** | |
| 200 * A counter that is incremented with each viewport state change. | |
| 201 * Clients that cache anything that depends on the viewport state should keep | |
| 202 * track of this counter. | |
| 203 * @return {number} counter. | |
| 204 */ | |
| 205 Viewport.prototype.getCacheGeneration = function() { return this.generation_ }; | |
| 206 | |
| 207 /** | |
| 208 * Called on event view port state change (even if repaint has not been called). | |
| 209 */ | |
| 210 Viewport.prototype.invalidateCaches = function() { this.generation_++ }; | |
| 211 | |
| 212 /** | |
| 213 * @return {Rect} The image bounds in screen coordinates. | |
| 214 */ | |
| 215 Viewport.prototype.getImageBoundsOnScreen = function() { | |
| 216 return this.imageOnScreen_; | |
| 217 }; | |
| 218 | |
| 219 /* | |
| 220 * Conversion between the screen and image coordinate spaces. | |
| 221 */ | |
| 222 | |
| 223 /** | |
| 224 * @param {number} size Size in screen coordinates. | |
| 225 * @return {number} Size in image coordinates. | |
| 226 */ | |
| 227 Viewport.prototype.screenToImageSize = function(size) { | |
| 228 return size / this.getScale(); | |
| 229 }; | |
| 230 | |
| 231 /** | |
| 232 * @param {number} x X in screen coordinates. | |
| 233 * @return {number} X in image coordinates. | |
| 234 */ | |
| 235 Viewport.prototype.screenToImageX = function(x) { | |
| 236 return Math.round((x - this.imageOnScreen_.left) / this.getScale()); | |
| 237 }; | |
| 238 | |
| 239 /** | |
| 240 * @param {number} y Y in screen coordinates. | |
| 241 * @return {number} Y in image coordinates. | |
| 242 */ | |
| 243 Viewport.prototype.screenToImageY = function(y) { | |
| 244 return Math.round((y - this.imageOnScreen_.top) / this.getScale()); | |
| 245 }; | |
| 246 | |
| 247 /** | |
| 248 * @param {Rect} rect Rectangle in screen coordinates. | |
| 249 * @return {Rect} Rectangle in image coordinates. | |
| 250 */ | |
| 251 Viewport.prototype.screenToImageRect = function(rect) { | |
| 252 return new Rect( | |
| 253 this.screenToImageX(rect.left), | |
| 254 this.screenToImageY(rect.top), | |
| 255 this.screenToImageSize(rect.width), | |
| 256 this.screenToImageSize(rect.height)); | |
| 257 }; | |
| 258 | |
| 259 /** | |
| 260 * @param {number} size Size in image coordinates. | |
| 261 * @return {number} Size in screen coordinates. | |
| 262 */ | |
| 263 Viewport.prototype.imageToScreenSize = function(size) { | |
| 264 return size * this.getScale(); | |
| 265 }; | |
| 266 | |
| 267 /** | |
| 268 * @param {number} x X in image coordinates. | |
| 269 * @return {number} X in screen coordinates. | |
| 270 */ | |
| 271 Viewport.prototype.imageToScreenX = function(x) { | |
| 272 return Math.round(this.imageOnScreen_.left + x * this.getScale()); | |
| 273 }; | |
| 274 | |
| 275 /** | |
| 276 * @param {number} y Y in image coordinates. | |
| 277 * @return {number} Y in screen coordinates. | |
| 278 */ | |
| 279 Viewport.prototype.imageToScreenY = function(y) { | |
| 280 return Math.round(this.imageOnScreen_.top + y * this.getScale()); | |
| 281 }; | |
| 282 | |
| 283 /** | |
| 284 * @param {Rect} rect Rectangle in image coordinates. | |
| 285 * @return {Rect} Rectangle in screen coordinates. | |
| 286 */ | |
| 287 Viewport.prototype.imageToScreenRect = function(rect) { | |
| 288 return new Rect( | |
| 289 this.imageToScreenX(rect.left), | |
| 290 this.imageToScreenY(rect.top), | |
| 291 Math.round(this.imageToScreenSize(rect.width)), | |
| 292 Math.round(this.imageToScreenSize(rect.height))); | |
| 293 }; | |
| 294 | |
| 295 /** | |
| 296 * @return {number} The number of physical pixels in one CSS pixel. | |
| 297 */ | |
| 298 Viewport.getDevicePixelRatio = function() { return window.devicePixelRatio }; | |
| 299 | |
| 300 /** | |
| 301 * Convert a rectangle from screen coordinates to 'device' coordinates. | |
| 302 * | |
| 303 * This conversion enlarges the original rectangle devicePixelRatio times | |
| 304 * with the screen center as a fixed point. | |
| 305 * | |
| 306 * @param {Rect} rect Rectangle in screen coordinates. | |
| 307 * @return {Rect} Rectangle in device coordinates. | |
| 308 */ | |
| 309 Viewport.prototype.screenToDeviceRect = function(rect) { | |
| 310 var ratio = Viewport.getDevicePixelRatio(); | |
| 311 var screenCenterX = Math.round( | |
| 312 this.screenBounds_.left + this.screenBounds_.width / 2); | |
| 313 var screenCenterY = Math.round( | |
| 314 this.screenBounds_.top + this.screenBounds_.height / 2); | |
| 315 return new Rect(screenCenterX + (rect.left - screenCenterX) * ratio, | |
| 316 screenCenterY + (rect.top - screenCenterY) * ratio, | |
| 317 rect.width * ratio, | |
| 318 rect.height * ratio); | |
| 319 }; | |
| 320 | |
| 321 /** | |
| 322 * @return {Rect} The visible part of the image, in device coordinates. | |
| 323 */ | |
| 324 Viewport.prototype.getDeviceClipped = function() { | |
| 325 return this.screenToDeviceRect(this.getScreenClipped()); | |
| 326 }; | |
| 327 | |
| 328 /** | |
| 329 * @return {boolean} True if some part of the image is clipped by the screen. | |
| 330 */ | |
| 331 Viewport.prototype.isClipped = function() { | |
| 332 return this.getMarginX_() < 0 || this.getMarginY_() < 0; | |
| 333 }; | |
| 334 | |
| 335 /** | |
| 336 * @return {number} Horizontal margin. | |
| 337 * Negative if the image is clipped horizontally. | |
| 338 * @private | |
| 339 */ | |
| 340 Viewport.prototype.getMarginX_ = function() { | |
| 341 return Math.round( | |
| 342 (this.screenBounds_.width - this.imageBounds_.width * this.scale_) / 2); | |
| 343 }; | |
| 344 | |
| 345 /** | |
| 346 * @return {number} Vertical margin. | |
| 347 * Negative if the image is clipped vertically. | |
| 348 * @private | |
| 349 */ | |
| 350 Viewport.prototype.getMarginY_ = function() { | |
| 351 return Math.round( | |
| 352 (this.screenBounds_.height - this.imageBounds_.height * this.scale_) / 2); | |
| 353 }; | |
| 354 | |
| 355 /** | |
| 356 * @param {number} x X-offset. | |
| 357 * @return {number} X-offset clamped to the valid range. | |
| 358 * @private | |
| 359 */ | |
| 360 Viewport.prototype.clampOffsetX_ = function(x) { | |
| 361 var limit = Math.round(Math.max(0, -this.getMarginX_() / this.getScale())); | |
| 362 return ImageUtil.clamp(-limit, x, limit); | |
| 363 }; | |
| 364 | |
| 365 /** | |
| 366 * @param {number} y Y-offset. | |
| 367 * @return {number} Y-offset clamped to the valid range. | |
| 368 * @private | |
| 369 */ | |
| 370 Viewport.prototype.clampOffsetY_ = function(y) { | |
| 371 var limit = Math.round(Math.max(0, -this.getMarginY_() / this.getScale())); | |
| 372 return ImageUtil.clamp(-limit, y, limit); | |
| 373 }; | |
| 374 | |
| 375 /** | |
| 376 * Recalculate the viewport parameters. | |
| 377 */ | |
| 378 Viewport.prototype.update = function() { | |
| 379 var scale = this.getScale(); | |
| 380 | |
| 381 // Image bounds in screen coordinates. | |
| 382 this.imageOnScreen_ = new Rect( | |
| 383 this.getMarginX_(), | |
| 384 this.getMarginY_(), | |
| 385 Math.round(this.imageBounds_.width * scale), | |
| 386 Math.round(this.imageBounds_.height * scale)); | |
| 387 | |
| 388 // A visible part of the image in image coordinates. | |
| 389 this.imageClipped_ = new Rect(this.imageBounds_); | |
| 390 | |
| 391 // A visible part of the image in screen coordinates. | |
| 392 this.screenClipped_ = new Rect(this.screenBounds_); | |
| 393 | |
| 394 // Adjust for the offset. | |
| 395 if (this.imageOnScreen_.left < 0) { | |
| 396 this.imageOnScreen_.left += | |
| 397 Math.round(this.clampOffsetX_(this.offsetX_) * scale); | |
| 398 this.imageClipped_.left = Math.round(-this.imageOnScreen_.left / scale); | |
| 399 this.imageClipped_.width = Math.round(this.screenBounds_.width / scale); | |
| 400 } else { | |
| 401 this.screenClipped_.left = this.imageOnScreen_.left; | |
| 402 this.screenClipped_.width = this.imageOnScreen_.width; | |
| 403 } | |
| 404 | |
| 405 if (this.imageOnScreen_.top < 0) { | |
| 406 this.imageOnScreen_.top += | |
| 407 Math.round(this.clampOffsetY_(this.offsetY_) * scale); | |
| 408 this.imageClipped_.top = Math.round(-this.imageOnScreen_.top / scale); | |
| 409 this.imageClipped_.height = Math.round(this.screenBounds_.height / scale); | |
| 410 } else { | |
| 411 this.screenClipped_.top = this.imageOnScreen_.top; | |
| 412 this.screenClipped_.height = this.imageOnScreen_.height; | |
| 413 } | |
| 414 }; | |
| 415 | |
| 416 /** | |
| 417 * @param {function} callback Repaint callback. | |
| 418 */ | |
| 419 Viewport.prototype.addRepaintCallback = function(callback) { | |
| 420 this.repaintCallbacks_.push(callback); | |
| 421 }; | |
| 422 | |
| 423 /** | |
| 424 * Repaint all clients. | |
| 425 */ | |
| 426 Viewport.prototype.repaint = function() { | |
| 427 this.update(); | |
| 428 for (var i = 0; i != this.repaintCallbacks_.length; i++) | |
| 429 this.repaintCallbacks_[i](); | |
| 430 }; | |
| OLD | NEW |