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 /** | 5 /** |
6 * The overlay displaying the image. | 6 * The overlay displaying the image. |
7 * | 7 * |
8 * @param {!HTMLElement} container The container element. | 8 * @param {!HTMLElement} container The container element. |
9 * @param {!Viewport} viewport The viewport. | 9 * @param {!Viewport} viewport The viewport. |
10 * @param {!MetadataModel} metadataModel | 10 * @param {!MetadataModel} metadataModel |
(...skipping 20 matching lines...) Expand all Loading... | |
31 this.imageLoader_ = | 31 this.imageLoader_ = |
32 new ImageUtil.ImageLoader(this.document_, metadataModel); | 32 new ImageUtil.ImageLoader(this.document_, metadataModel); |
33 // We have a separate image loader for prefetch which does not get cancelled | 33 // We have a separate image loader for prefetch which does not get cancelled |
34 // when the selection changes. | 34 // when the selection changes. |
35 this.prefetchLoader_ = | 35 this.prefetchLoader_ = |
36 new ImageUtil.ImageLoader(this.document_, metadataModel); | 36 new ImageUtil.ImageLoader(this.document_, metadataModel); |
37 | 37 |
38 this.contentCallbacks_ = []; | 38 this.contentCallbacks_ = []; |
39 | 39 |
40 /** | 40 /** |
41 * The element displaying the current content. | 41 * The content image or canvas element. |
42 * @type {HTMLCanvasElement} | |
43 * @private | |
44 */ | |
45 this.screenImage_ = null; | |
46 | |
47 /** | |
48 * The content canvas element. | |
49 * @type {(HTMLCanvasElement|HTMLImageElement)} | 42 * @type {(HTMLCanvasElement|HTMLImageElement)} |
50 * @private | 43 * @private |
51 */ | 44 */ |
52 this.contentCanvas_ = null; | 45 this.contentImage_ = null; |
53 | 46 |
54 /** | 47 /** |
55 * True if the image is a preview (not full res). | 48 * True if the image is a preview (not full res). |
56 * @type {boolean} | 49 * @type {boolean} |
57 * @private | 50 * @private |
58 */ | 51 */ |
59 this.preview_ = false; | 52 this.preview_ = false; |
60 | 53 |
61 /** | 54 /** |
62 * Cached thumbnail image. | 55 * Cached thumbnail image. |
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
172 | 165 |
173 /** | 166 /** |
174 * @override | 167 * @override |
175 */ | 168 */ |
176 ImageView.prototype.getZIndex = function() { return -1; }; | 169 ImageView.prototype.getZIndex = function() { return -1; }; |
177 | 170 |
178 /** | 171 /** |
179 * @override | 172 * @override |
180 */ | 173 */ |
181 ImageView.prototype.draw = function() { | 174 ImageView.prototype.draw = function() { |
182 if (!this.contentCanvas_) // Do nothing if the image content is not set. | 175 if (!this.contentImage_) // Do nothing if the image content is not set. |
183 return; | 176 return; |
184 this.setTransform_( | 177 this.setTransform_( |
185 this.contentCanvas_, | 178 this.contentImage_, |
186 this.viewport_, | 179 this.viewport_, |
187 new ImageView.Effect.None(), | 180 new ImageView.Effect.None(), |
188 ImageView.Effect.DEFAULT_DURATION); | 181 0); |
189 if ((this.screenImage_ && this.setupDeviceBuffer(this.screenImage_)) || | |
190 this.displayedContentGeneration_ !== this.contentGeneration_) { | |
191 this.displayedContentGeneration_ = this.contentGeneration_; | |
192 ImageUtil.trace.resetTimer('paint'); | |
193 this.paintDeviceRect( | |
194 this.contentCanvas_, ImageRect.createFromImage(this.contentCanvas_)); | |
195 ImageUtil.trace.reportTimer('paint'); | |
196 } | |
197 }; | 182 }; |
198 | 183 |
199 /** | 184 /** |
200 * Applies the viewport change that does not affect the screen cache size (zoom | 185 * Applies the viewport change that does not affect the screen cache size (zoom |
201 * change or offset change) with animation. | 186 * change or offset change) with animation. |
202 */ | 187 */ |
203 ImageView.prototype.applyViewportChange = function() { | 188 ImageView.prototype.applyViewportChange = function() { |
204 var zooming = this.viewport_.getZoom() > 1; | 189 if (this.contentImage_) { |
205 if (this.contentCanvas_) { | |
206 // Show full resolution image only for zooming. | |
207 this.contentCanvas_.style.opacity = zooming ? '1' : '0'; | |
208 this.setTransform_( | 190 this.setTransform_( |
209 this.contentCanvas_, | 191 this.contentImage_, |
210 this.viewport_, | 192 this.viewport_, |
211 new ImageView.Effect.None(), | 193 new ImageView.Effect.None(), |
212 ImageView.Effect.DEFAULT_DURATION); | 194 ImageView.Effect.DEFAULT_DURATION); |
213 } | 195 } |
214 if (this.screenImage_) { | |
215 this.setTransform_( | |
216 this.screenImage_, | |
217 this.viewport_, | |
218 new ImageView.Effect.None(), | |
219 ImageView.Effect.DEFAULT_DURATION); | |
220 } | |
221 }; | 196 }; |
222 | 197 |
223 /** | 198 /** |
224 * @return {number} The cache generation. | 199 * @return {number} The cache generation. |
225 */ | 200 */ |
226 ImageView.prototype.getCacheGeneration = function() { | 201 ImageView.prototype.getCacheGeneration = function() { |
227 return this.contentGeneration_; | 202 return this.contentGeneration_; |
228 }; | 203 }; |
229 | 204 |
230 /** | 205 /** |
231 * Invalidates the caches to force redrawing the screen canvas. | 206 * Invalidates the caches to force redrawing the screen canvas. |
232 */ | 207 */ |
233 ImageView.prototype.invalidateCaches = function() { | 208 ImageView.prototype.invalidateCaches = function() { |
234 this.contentGeneration_++; | 209 this.contentGeneration_++; |
235 }; | 210 }; |
236 | 211 |
237 /** | 212 /** |
238 * @return {HTMLCanvasElement} The content canvas element. | 213 * @return {!HTMLCanvasElement|!HTMLImageElement} The content image(or canvas). |
239 */ | 214 */ |
240 ImageView.prototype.getCanvas = function() { return this.contentCanvas_; }; | 215 ImageView.prototype.getImage = function() { |
216 return assert(this.contentImage_); | |
217 }; | |
241 | 218 |
242 /** | 219 /** |
243 * @return {boolean} True if the a valid image is currently loaded. | 220 * @return {boolean} True if the a valid image is currently loaded. |
244 */ | 221 */ |
245 ImageView.prototype.hasValidImage = function() { | 222 ImageView.prototype.hasValidImage = function() { |
246 return !!(!this.preview_ && this.contentCanvas_ && this.contentCanvas_.width); | 223 return !!(!this.preview_ && this.contentImage_ && this.contentImage_.width); |
247 }; | 224 }; |
248 | 225 |
249 /** | 226 /** |
250 * @return {!HTMLCanvasElement} The cached thumbnail image. | 227 * @return {!HTMLCanvasElement} The cached thumbnail image. |
251 */ | 228 */ |
252 ImageView.prototype.getThumbnail = function() { | 229 ImageView.prototype.getThumbnail = function() { |
253 assert(this.thumbnailCanvas_); | 230 assert(this.thumbnailCanvas_); |
254 return this.thumbnailCanvas_; | 231 return this.thumbnailCanvas_; |
255 }; | 232 }; |
256 | 233 |
257 /** | 234 /** |
258 * @return {number} The content revision number. | 235 * @return {number} The content revision number. |
259 */ | 236 */ |
260 ImageView.prototype.getContentRevision = function() { | 237 ImageView.prototype.getContentRevision = function() { |
261 return this.contentRevision_; | 238 return this.contentRevision_; |
262 }; | 239 }; |
263 | 240 |
264 /** | 241 /** |
265 * Copies an image fragment from a full resolution canvas to a device resolution | 242 * Copies an image fragment to a content image. |
266 * canvas. | |
267 * | 243 * |
268 * @param {!HTMLCanvasElement} canvas Canvas containing whole image. The canvas | 244 * @param {!HTMLCanvasElement} canvas Canvas containing whole image. The canvas |
269 * may not be full resolution (scaled). | 245 * may not be full resolution (scaled). |
270 * @param {!ImageRect} imageRect Rectangle region of the canvas to be rendered. | 246 * @param {!ImageRect} imageRect Rectangle region of the canvas to be rendered. |
271 */ | 247 */ |
272 ImageView.prototype.paintDeviceRect = function(canvas, imageRect) { | 248 ImageView.prototype.paintDeviceRect = function(canvas, imageRect) { |
273 // Map the rectangle in full resolution image to the rectangle in the device | 249 // Map the rectangle in full resolution image to the rectangle in the device |
274 // canvas. | 250 // canvas. |
251 // TODO(ryoh): Shold we prepare a device-res canvas to show? | |
275 var deviceBounds = this.viewport_.getDeviceBounds(); | 252 var deviceBounds = this.viewport_.getDeviceBounds(); |
276 var scaleX = deviceBounds.width / canvas.width; | 253 var scaleX = deviceBounds.width / canvas.width; |
277 var scaleY = deviceBounds.height / canvas.height; | 254 var scaleY = deviceBounds.height / canvas.height; |
278 var deviceRect = new ImageRect( | 255 var deviceRect = new ImageRect( |
279 imageRect.left * scaleX, | 256 imageRect.left * scaleX, |
280 imageRect.top * scaleY, | 257 imageRect.top * scaleY, |
281 imageRect.width * scaleX, | 258 imageRect.width * scaleX, |
282 imageRect.height * scaleY); | 259 imageRect.height * scaleY); |
283 | 260 |
261 this.contentImage_ = ImageUtil.ensureCanvas(this.contentImage_); | |
284 ImageRect.drawImage( | 262 ImageRect.drawImage( |
285 this.screenImage_.getContext('2d'), canvas, deviceRect, imageRect); | 263 this.contentImage_.getContext('2d'), canvas, deviceRect, imageRect); |
286 }; | 264 }; |
287 | 265 |
288 /** | 266 /** |
289 * Creates an overlay canvas with properties similar to the screen canvas. | 267 * Creates an overlay canvas with properties similar to the screen canvas. |
290 * Useful for showing quick feedback when editing. | 268 * Useful for showing quick feedback when editing. |
291 * | 269 * |
292 * @return {!HTMLCanvasElement} Overlay canvas. | 270 * @return {!HTMLCanvasElement} Overlay canvas. |
293 */ | 271 */ |
294 ImageView.prototype.createOverlayCanvas = function() { | 272 ImageView.prototype.createOverlayCanvas = function() { |
295 var canvas = assertInstanceof(this.document_.createElement('canvas'), | 273 var canvas = assertInstanceof(this.document_.createElement('canvas'), |
(...skipping 19 matching lines...) Expand all Loading... | |
315 } | 293 } |
316 if (canvas.height !== deviceRect.height) { | 294 if (canvas.height !== deviceRect.height) { |
317 canvas.height = deviceRect.height; | 295 canvas.height = deviceRect.height; |
318 needRepaint = true; | 296 needRepaint = true; |
319 } | 297 } |
320 this.setTransform_(canvas, this.viewport_); | 298 this.setTransform_(canvas, this.viewport_); |
321 return needRepaint; | 299 return needRepaint; |
322 }; | 300 }; |
323 | 301 |
324 /** | 302 /** |
325 * Gets screen image data with specified size. | 303 * Gets screen image canvas with specified size. |
326 * @param {number} width | 304 * @param {number} width |
327 * @param {number} height | 305 * @param {number} height |
328 * @return {!ImageData} A new ImageData object. | 306 * @return {!HTMLCanvasElement} A scaled canvas. |
329 */ | 307 */ |
330 ImageView.prototype.getScreenImageDataWith = function(width, height) { | 308 ImageView.prototype.getImageCanvasWith = function(width, height) { |
331 // If specified size is same with current screen image size, just return it. | |
332 if (width === this.screenImage_.width && | |
333 height === this.screenImage_.height) { | |
334 return this.screenImage_.getContext('2d').getImageData( | |
335 0, 0, this.screenImage_.width, this.screenImage_.height); | |
336 } | |
337 | |
338 // Resize if these sizes are different. | 309 // Resize if these sizes are different. |
339 var resizeCanvas = document.createElement('canvas'); | 310 var resizeCanvas = assertInstanceof(document.createElement('canvas'), |
311 HTMLCanvasElement); | |
340 resizeCanvas.width = width; | 312 resizeCanvas.width = width; |
341 resizeCanvas.height = height; | 313 resizeCanvas.height = height; |
342 | 314 |
343 var context = resizeCanvas.getContext('2d'); | 315 var context = resizeCanvas.getContext('2d'); |
344 context.drawImage(this.screenImage_, | 316 context.drawImage(this.contentImage_, |
345 0, 0, this.screenImage_.width, this.screenImage_.height, | 317 0, 0, this.contentImage_.width, this.contentImage_.height, |
346 0, 0, resizeCanvas.width, resizeCanvas.height); | 318 0, 0, resizeCanvas.width, resizeCanvas.height); |
347 return context.getImageData(0, 0, resizeCanvas.width, resizeCanvas.height); | 319 return resizeCanvas; |
348 }; | 320 }; |
349 | 321 |
350 /** | 322 /** |
351 * @return {boolean} True if the image is currently being loaded. | 323 * @return {boolean} True if the image is currently being loaded. |
352 */ | 324 */ |
353 ImageView.prototype.isLoading = function() { | 325 ImageView.prototype.isLoading = function() { |
354 return this.imageLoader_.isBusy(); | 326 return this.imageLoader_.isBusy(); |
355 }; | 327 }; |
356 | 328 |
357 /** | 329 /** |
(...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
534 | 506 |
535 /** | 507 /** |
536 * Unloads content. | 508 * Unloads content. |
537 * @param {ImageRect=} opt_zoomToRect Target rectangle for zoom-out-effect. | 509 * @param {ImageRect=} opt_zoomToRect Target rectangle for zoom-out-effect. |
538 */ | 510 */ |
539 ImageView.prototype.unload = function(opt_zoomToRect) { | 511 ImageView.prototype.unload = function(opt_zoomToRect) { |
540 if (this.unloadTimer_) { | 512 if (this.unloadTimer_) { |
541 clearTimeout(this.unloadTimer_); | 513 clearTimeout(this.unloadTimer_); |
542 this.unloadTimer_ = null; | 514 this.unloadTimer_ = null; |
543 } | 515 } |
544 if (opt_zoomToRect && this.screenImage_) { | 516 if (opt_zoomToRect && this.contentImage_) { |
545 var effect = this.createZoomEffect(opt_zoomToRect); | 517 var effect = this.createZoomEffect(opt_zoomToRect); |
546 this.setTransform_(this.screenImage_, this.viewport_, effect); | 518 this.setTransform_(this.contentImage_, this.viewport_, effect); |
547 this.screenImage_.setAttribute('fade', true); | 519 this.contentImage_.setAttribute('fade', true); |
548 this.unloadTimer_ = setTimeout(function() { | 520 this.unloadTimer_ = setTimeout(function() { |
549 this.unloadTimer_ = null; | 521 this.unloadTimer_ = null; |
550 this.unload(null /* force unload */); | 522 this.unload(null /* force unload */); |
551 }.bind(this), effect.getSafeInterval()); | 523 }.bind(this), effect.getSafeInterval()); |
552 return; | 524 return; |
553 } | 525 } |
554 this.container_.textContent = ''; | 526 this.container_.textContent = ''; |
555 this.contentCanvas_ = null; | 527 this.contentImage_ = null; |
556 this.screenImage_ = null; | |
557 }; | 528 }; |
558 | 529 |
559 /** | 530 /** |
560 * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element. | 531 * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element. |
561 * @param {number=} opt_width Image width. | 532 * @param {number=} opt_width Image width. |
562 * @param {number=} opt_height Image height. | 533 * @param {number=} opt_height Image height. |
563 * @param {boolean=} opt_preview True if the image is a preview (not full res). | 534 * @param {boolean=} opt_preview True if the image is a preview (not full res). |
564 * @private | 535 * @private |
565 */ | 536 */ |
566 ImageView.prototype.replaceContent_ = function( | 537 ImageView.prototype.replaceContent_ = function( |
567 content, opt_width, opt_height, opt_preview) { | 538 content, opt_width, opt_height, opt_preview) { |
568 | 539 |
569 if (this.contentCanvas_ && this.contentCanvas_.parentNode === this.container_) | 540 if (this.contentImage_ && this.contentImage_.parentNode === this.container_) |
570 this.container_.removeChild(this.contentCanvas_); | 541 this.container_.removeChild(this.contentImage_); |
571 | 542 |
572 this.screenImage_ = assertInstanceof(this.document_.createElement('canvas'), | 543 this.contentImage_ = content; |
573 HTMLCanvasElement); | 544 this.container_.appendChild(content); |
574 this.screenImage_.className = 'image'; | 545 ImageUtil.setAttribute(this.contentImage_, 'fade', false); |
575 | |
576 this.contentCanvas_ = content; | |
577 this.invalidateCaches(); | 546 this.invalidateCaches(); |
578 this.viewport_.setImageSize( | 547 this.viewport_.setImageSize( |
579 opt_width || this.contentCanvas_.width, | 548 opt_width || this.contentImage_.width, |
580 opt_height || this.contentCanvas_.height); | 549 opt_height || this.contentImage_.height); |
581 this.draw(); | 550 this.draw(); |
582 | 551 |
583 this.container_.appendChild(this.screenImage_); | |
584 | |
585 this.preview_ = opt_preview || false; | 552 this.preview_ = opt_preview || false; |
586 // If this is not a thumbnail, cache the content and the screen-scale image. | 553 // If this is not a thumbnail, cache the content and the screen-scale image. |
587 if (this.hasValidImage()) { | 554 if (this.hasValidImage()) { |
588 // Insert the full resolution canvas into DOM so that it can be printed. | 555 // Insert the full resolution canvas into DOM so that it can be printed. |
589 this.container_.appendChild(this.contentCanvas_); | 556 this.contentImage_.classList.add('image'); |
590 this.contentCanvas_.classList.add('fullres'); | 557 this.setTransform_(this.contentImage_, this.viewport_, null, 0); |
591 this.setTransform_( | |
592 this.contentCanvas_, this.viewport_, null, 0); | |
593 | 558 |
594 this.contentItem_.contentImage = this.contentCanvas_; | 559 this.contentItem_.contentImage = this.contentImage_; |
595 this.contentItem_.screenImage = this.screenImage_; | |
596 | 560 |
597 // TODO(kaznacheev): It is better to pass screenImage_ as it is usually | 561 this.updateThumbnail_(this.contentImage_); |
598 // much smaller than contentCanvas_ and still contains the entire image. | |
599 // Once we implement zoom/pan we should pass contentCanvas_ instead. | |
600 this.updateThumbnail_(this.screenImage_); | |
601 | 562 |
602 this.contentRevision_++; | 563 this.contentRevision_++; |
603 for (var i = 0; i !== this.contentCallbacks_.length; i++) { | 564 for (var i = 0; i !== this.contentCallbacks_.length; i++) { |
604 try { | 565 try { |
605 this.contentCallbacks_[i](); | 566 this.contentCallbacks_[i](); |
606 } catch (e) { | 567 } catch (e) { |
607 console.error(e); | 568 console.error(e); |
608 } | 569 } |
609 } | 570 } |
610 } | 571 } |
611 }; | 572 }; |
612 | 573 |
613 /** | 574 /** |
614 * Adds a listener for content changes. | 575 * Adds a listener for content changes. |
615 * @param {function()} callback Callback. | 576 * @param {function()} callback Callback. |
616 */ | 577 */ |
617 ImageView.prototype.addContentCallback = function(callback) { | 578 ImageView.prototype.addContentCallback = function(callback) { |
618 this.contentCallbacks_.push(callback); | 579 this.contentCallbacks_.push(callback); |
619 }; | 580 }; |
620 | 581 |
621 /** | 582 /** |
622 * Updates the cached thumbnail image. | 583 * Updates the cached thumbnail image. |
623 * | 584 * |
624 * @param {!HTMLCanvasElement} canvas The source canvas. | 585 * @param {!HTMLCanvasElement|!HTMLImageElement} image The source image or |
586 * canvas. | |
hirono
2016/01/21 10:12:16
nit: Please fix the indent
ryoh
2016/01/22 01:15:54
Done.
| |
625 * @private | 587 * @private |
626 */ | 588 */ |
627 ImageView.prototype.updateThumbnail_ = function(canvas) { | 589 ImageView.prototype.updateThumbnail_ = function(image) { |
628 ImageUtil.trace.resetTimer('thumb'); | 590 ImageUtil.trace.resetTimer('thumb'); |
629 var pixelCount = 10000; | 591 var pixelCount = 10000; |
630 var downScale = | 592 var downScale = |
631 Math.max(1, Math.sqrt(canvas.width * canvas.height / pixelCount)); | 593 Math.max(1, Math.sqrt(image.width * image.height / pixelCount)); |
632 | 594 |
633 this.thumbnailCanvas_ = canvas.ownerDocument.createElement('canvas'); | 595 this.thumbnailCanvas_ = image.ownerDocument.createElement('canvas'); |
634 this.thumbnailCanvas_.width = Math.round(canvas.width / downScale); | 596 this.thumbnailCanvas_.width = Math.round(image.width / downScale); |
635 this.thumbnailCanvas_.height = Math.round(canvas.height / downScale); | 597 this.thumbnailCanvas_.height = Math.round(image.height / downScale); |
636 ImageRect.drawImage(this.thumbnailCanvas_.getContext('2d'), canvas); | 598 ImageRect.drawImage(this.thumbnailCanvas_.getContext('2d'), image); |
637 ImageUtil.trace.reportTimer('thumb'); | 599 ImageUtil.trace.reportTimer('thumb'); |
638 }; | 600 }; |
639 | 601 |
640 /** | 602 /** |
641 * Replaces the displayed image, possibly with slide-in animation. | 603 * Replaces the displayed image, possibly with slide-in animation. |
642 * | 604 * |
643 * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element. | 605 * @param {!(HTMLCanvasElement|HTMLImageElement)} newContentImage |
606 * The image element. | |
644 * @param {ImageView.Effect=} opt_effect Transition effect object. | 607 * @param {ImageView.Effect=} opt_effect Transition effect object. |
645 * @param {number=} opt_width Image width. | 608 * @param {number=} opt_width Image width. |
646 * @param {number=} opt_height Image height. | 609 * @param {number=} opt_height Image height. |
647 * @param {boolean=} opt_preview True if the image is a preview (not full res). | 610 * @param {boolean=} opt_preview True if the image is a preview (not full res). |
648 */ | 611 */ |
649 ImageView.prototype.replace = function( | 612 ImageView.prototype.replace = function( |
650 content, opt_effect, opt_width, opt_height, opt_preview) { | 613 newContentImage, opt_effect, opt_width, opt_height, opt_preview) { |
651 var oldScreenImage = this.screenImage_; | 614 var oldContentImage = this.contentImage_; |
652 var oldViewport = this.viewport_.clone(); | 615 var oldViewport = this.viewport_.clone(); |
653 this.replaceContent_(content, opt_width, opt_height, opt_preview); | 616 this.replaceContent_(newContentImage, opt_width, opt_height, opt_preview); |
654 if (!opt_effect) { | 617 if (!opt_effect) { |
655 if (oldScreenImage) | |
656 oldScreenImage.parentNode.removeChild(oldScreenImage); | |
657 return; | 618 return; |
658 } | 619 } |
659 | 620 |
660 assert(this.screenImage_); | 621 assert(this.contentImage_); |
661 var newScreenImage = this.screenImage_; | |
662 this.viewport_.resetView(); | 622 this.viewport_.resetView(); |
663 | 623 |
664 if (oldScreenImage) | 624 if (oldContentImage) |
665 ImageUtil.setAttribute(newScreenImage, 'fade', true); | 625 ImageUtil.setAttribute(newContentImage, 'fade', true); |
666 this.setTransform_( | 626 this.setTransform_( |
667 newScreenImage, this.viewport_, opt_effect, 0 /* instant */); | 627 newContentImage, this.viewport_, opt_effect, 0 /* instant */); |
668 this.setTransform_( | |
669 content, this.viewport_, opt_effect, 0 /* instant */); | |
670 | 628 |
671 // We need to call requestAnimationFrame twice here. The first call is for | 629 // We need to call requestAnimationFrame twice here. The first call is for |
672 // commiting the styles of beggining of transition that are assigned above. | 630 // commiting the styles of beggining of transition that are assigned above. |
673 // The second call is for assigning and commiting the styles of end of | 631 // The second call is for assigning and commiting the styles of end of |
674 // transition, which triggers transition animation. | 632 // transition, which triggers transition animation. |
675 requestAnimationFrame(function() { | 633 requestAnimationFrame(function() { |
676 requestAnimationFrame(function() { | 634 requestAnimationFrame(function() { |
677 this.setTransform_( | 635 this.setTransform_( |
678 newScreenImage, | 636 newContentImage, |
679 this.viewport_, | 637 this.viewport_, |
680 null, | 638 null, |
681 opt_effect ? opt_effect.getDuration() : undefined); | 639 opt_effect ? opt_effect.getDuration() : undefined); |
682 this.setTransform_( | 640 if (oldContentImage) { |
683 content, | 641 ImageUtil.setAttribute(newContentImage, 'fade', false); |
684 this.viewport_, | 642 ImageUtil.setAttribute(oldContentImage, 'fade', true); |
685 null, | |
686 opt_effect ? opt_effect.getDuration() : undefined); | |
687 if (oldScreenImage) { | |
688 ImageUtil.setAttribute(newScreenImage, 'fade', false); | |
689 ImageUtil.setAttribute(oldScreenImage, 'fade', true); | |
690 var reverse = opt_effect.getReverse(); | 643 var reverse = opt_effect.getReverse(); |
691 if (reverse) { | 644 if (reverse) { |
692 this.setTransform_(oldScreenImage, oldViewport, reverse); | 645 this.setTransform_(oldContentImage, oldViewport, reverse); |
693 setTimeout(function() { | 646 setTimeout(function() { |
694 if (oldScreenImage.parentNode) | 647 if (oldContentImage.parentNode) |
695 oldScreenImage.parentNode.removeChild(oldScreenImage); | 648 oldContentImage.parentNode.removeChild(oldContentImage); |
696 }, reverse.getSafeInterval()); | 649 }, reverse.getSafeInterval()); |
697 } else { | 650 } else { |
698 if (oldScreenImage.parentNode) | 651 if (oldContentImage.parentNode) |
699 oldScreenImage.parentNode.removeChild(oldScreenImage); | 652 oldContentImage.parentNode.removeChild(oldContentImage); |
700 } | 653 } |
701 } | 654 } |
702 }.bind(this)); | 655 }.bind(this)); |
703 }.bind(this)); | 656 }.bind(this)); |
704 }; | 657 }; |
705 | 658 |
706 /** | 659 /** |
707 * @param {!HTMLCanvasElement|!HTMLImageElement} element The element to | 660 * @param {!HTMLCanvasElement|!HTMLImageElement} element The element to |
708 * transform. | 661 * transform. |
709 * @param {!Viewport} viewport Viewport to be used for calculating | 662 * @param {!Viewport} viewport Viewport to be used for calculating |
(...skipping 29 matching lines...) Expand all Loading... | |
739 * the new image to visualize the operation. | 692 * the new image to visualize the operation. |
740 * | 693 * |
741 * @param {!HTMLCanvasElement} canvas New content canvas. | 694 * @param {!HTMLCanvasElement} canvas New content canvas. |
742 * @param {ImageRect} imageCropRect The crop rectangle in image coordinates. | 695 * @param {ImageRect} imageCropRect The crop rectangle in image coordinates. |
743 * Null for rotation operations. | 696 * Null for rotation operations. |
744 * @param {number} rotate90 Rotation angle in 90 degree increments. | 697 * @param {number} rotate90 Rotation angle in 90 degree increments. |
745 * @return {number} Animation duration. | 698 * @return {number} Animation duration. |
746 */ | 699 */ |
747 ImageView.prototype.replaceAndAnimate = function( | 700 ImageView.prototype.replaceAndAnimate = function( |
748 canvas, imageCropRect, rotate90) { | 701 canvas, imageCropRect, rotate90) { |
749 assert(this.screenImage_); | 702 assert(this.contentImage_); |
750 | 703 |
751 var oldImageBounds = { | 704 var oldImageBounds = { |
752 width: this.viewport_.getImageBounds().width, | 705 width: this.viewport_.getImageBounds().width, |
753 height: this.viewport_.getImageBounds().height | 706 height: this.viewport_.getImageBounds().height |
754 }; | 707 }; |
755 var oldScreenImage = this.screenImage_; | 708 var oldScreenImage = this.contentImage_; |
756 this.replaceContent_(canvas); | 709 this.replaceContent_(canvas); |
757 var newScreenImage = this.screenImage_; | 710 var newScreenImage = this.contentImage_; |
758 var effect = rotate90 ? | 711 var effect = rotate90 ? |
759 new ImageView.Effect.Rotate(rotate90 > 0) : | 712 new ImageView.Effect.Rotate(rotate90 > 0) : |
760 new ImageView.Effect.Zoom( | 713 new ImageView.Effect.Zoom( |
761 oldImageBounds.width, oldImageBounds.height, assert(imageCropRect)); | 714 oldImageBounds.width, oldImageBounds.height, assert(imageCropRect)); |
762 | 715 |
763 this.setTransform_(newScreenImage, this.viewport_, effect, 0 /* instant */); | 716 this.setTransform_(newScreenImage, this.viewport_, effect, 0 /* instant */); |
764 | 717 |
765 oldScreenImage.parentNode.appendChild(newScreenImage); | |
766 oldScreenImage.parentNode.removeChild(oldScreenImage); | |
767 | |
768 // Let the layout fire, then animate back to non-transformed state. | 718 // Let the layout fire, then animate back to non-transformed state. |
769 setTimeout( | 719 setTimeout( |
770 this.setTransform_.bind( | 720 this.setTransform_.bind( |
771 this, newScreenImage, this.viewport_, null, effect.getDuration()), | 721 this, newScreenImage, this.viewport_, null, effect.getDuration()), |
772 0); | 722 0); |
773 | 723 |
774 return effect.getSafeInterval(); | 724 return effect.getSafeInterval(); |
775 }; | 725 }; |
776 | 726 |
777 /** | 727 /** |
778 * Visualizes "undo crop". Shrink the current image to the given crop rectangle | 728 * Visualizes "undo crop". Shrink the current image to the given crop rectangle |
779 * while fading in the new image. | 729 * while fading in the new image. |
780 * | 730 * |
781 * @param {!HTMLCanvasElement} canvas New content canvas. | 731 * @param {!HTMLCanvasElement} canvas New content canvas. |
782 * @param {!ImageRect} imageCropRect The crop rectangle in image coordinates. | 732 * @param {!ImageRect} imageCropRect The crop rectangle in image coordinates. |
783 * @return {number} Animation duration. | 733 * @return {number} Animation duration. |
784 */ | 734 */ |
785 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) { | 735 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) { |
786 var oldScreenImage = this.screenImage_; | 736 var oldScreenImage = assert(this.contentImage_); |
737 oldScreenImage.style.zIndex = 1000; | |
787 this.replaceContent_(canvas); | 738 this.replaceContent_(canvas); |
788 var newScreenImage = this.screenImage_; | 739 this.container_.appendChild(oldScreenImage); |
740 var newScreenImage = this.contentImage_; | |
789 var setFade = ImageUtil.setAttribute.bind(null, assert(newScreenImage), | 741 var setFade = ImageUtil.setAttribute.bind(null, assert(newScreenImage), |
790 'fade'); | 742 'fade'); |
791 setFade(true); | 743 setFade(true); |
792 oldScreenImage.parentNode.insertBefore(newScreenImage, oldScreenImage); | |
793 var effect = new ImageView.Effect.Zoom( | 744 var effect = new ImageView.Effect.Zoom( |
794 this.viewport_.getImageBounds().width, | 745 this.viewport_.getImageBounds().width, |
795 this.viewport_.getImageBounds().height, | 746 this.viewport_.getImageBounds().height, |
796 imageCropRect); | 747 imageCropRect); |
748 // Animate to the transformed state. | |
749 setTimeout(function() { | |
750 this.setTransform_(oldScreenImage, this.viewport_, effect); | |
751 }.bind(this), 0); | |
797 | 752 |
798 // Animate to the transformed state. | |
799 this.setTransform_(oldScreenImage, this.viewport_, effect); | |
800 setTimeout(setFade.bind(null, false), 0); | 753 setTimeout(setFade.bind(null, false), 0); |
754 | |
801 setTimeout(function() { | 755 setTimeout(function() { |
802 if (oldScreenImage.parentNode) | 756 if (oldScreenImage.parentNode) |
803 oldScreenImage.parentNode.removeChild(oldScreenImage); | 757 oldScreenImage.parentNode.removeChild(oldScreenImage); |
804 }, effect.getSafeInterval()); | 758 }, effect.getSafeInterval()); |
805 | 759 |
806 return effect.getSafeInterval(); | 760 return effect.getSafeInterval(); |
807 }; | 761 }; |
808 | 762 |
809 /* Transition effects */ | 763 /* Transition effects */ |
810 | 764 |
811 /** | 765 /** |
812 * Base class for effects. | 766 * Base class for effects. |
813 * | 767 * |
(...skipping 201 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1015 | 969 |
1016 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype }; | 970 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype }; |
1017 | 971 |
1018 /** | 972 /** |
1019 * @override | 973 * @override |
1020 */ | 974 */ |
1021 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) { | 975 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) { |
1022 return viewport.getRotatingTransformation( | 976 return viewport.getRotatingTransformation( |
1023 element.width, element.height, this.orientation_ ? -1 : 1); | 977 element.width, element.height, this.orientation_ ? -1 : 1); |
1024 }; | 978 }; |
OLD | NEW |