Home | History | Annotate | Download | only in ui 
      1 <!--
      2 Copyright 2014 The Chromium Authors. All rights reserved.
      3 Use of this source code is governed by a BSD-style license that can be
      4 found in the LICENSE file.
      5 -->
      6 
      7 <polymer-element name="ct-results-comparison-zoomer" attributes="expectedUrl actualUrl diffUrl position">
      8   <template>
      9     <style>
     10       :host {
     11         background-color: silver;
     12         border: 1px solid gray;
     13         box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
     14         display: flex;
     15         pointer-events: none;
     16         position: fixed;
     17         top: 0;
     18         width: 100%;
     19         z-index: 1;
     20       }
     21 
     22       :host > * {
     23         flex: 1;
     24       }
     25 
     26       .label {
     27         background-color: white;
     28         text-align: center;
     29       }
     30 
     31       .container {
     32         border: 1px solid gray;
     33         height: 400px;
     34         line-height: 0;
     35       }
     36 
     37       .container > img {
     38         display: none;
     39       }
     40     </style>
     41 
     42     <div>
     43       <div class="label">Expected</div>
     44       <div id="expectedZoomer" class="container">
     45         <img src="{{ expectedUrl }}">
     46         <canvas></canvas>
     47       </div>
     48     </div>
     49 
     50     <div>
     51       <div class="label">Actual</div>
     52       <div id="actualZoomer" class="container">
     53         <img src="{{ actualUrl }}">
     54         <canvas></canvas>
     55       </div>
     56     </div>
     57 
     58     <div>
     59       <div class="label">Diff</div>
     60       <div id="diffZoomer" class="container">
     61         <img src="{{ diffUrl }}">
     62         <canvas></canvas>
     63       </div>
     64     </div>
     65   </template>
     66   <script>
     67   (function() {
     68     var kResultWidth = 800;
     69     var kResultHeight = 600;
     70     var kZoomFactor = 6;
     71     var kZoomedResultWidth = kResultWidth * kZoomFactor;
     72     var kZoomedResultHeight = kResultHeight * kZoomFactor;
     73 
     74     Polymer({
     75       expectedUrl: '',
     76       actualUrl: '',
     77       diffUrl: '',
     78       position: null,
     79       _drawScheduled: false,
     80 
     81       positionChanged: function() {
     82         if (!this._drawScheduled) {
     83           this._drawScheduled = true;
     84           this.async(this._drawAll);
     85         }
     86       },
     87 
     88       _drawAll: function() {
     89         this._drawScheduled = false;
     90 
     91         if (!this.position)
     92           return;
     93 
     94         this._draw(this.$.expectedZoomer);
     95         this._draw(this.$.actualZoomer);
     96         this._draw(this.$.diffZoomer);
     97       },
     98 
     99       _draw: function(imageContainer) {
    100         var canvas = imageContainer.querySelector('canvas');
    101         canvas.width = imageContainer.clientWidth;
    102         canvas.height = imageContainer.clientHeight;
    103         this._drawCanvas(canvas.getContext('2d'), imageContainer);
    104       },
    105 
    106       _drawCanvas: function(context, imageContainer) {
    107         context.imageSmoothingEnabled = false;
    108         context.translate(imageContainer.clientWidth / 2, imageContainer.clientHeight / 2);
    109         context.translate(-this.position.x * kZoomedResultWidth, -this.position.y * kZoomedResultHeight);
    110         context.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHeight + 2);
    111         context.scale(kZoomFactor, kZoomFactor);
    112         context.drawImage(imageContainer.querySelector('img'), 0, 0);
    113       },
    114     });
    115   })();
    116   </script>
    117 </polymer-element>
    118