tools/cc-frame-viewer/src/quad_view.js

   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 base.require('ui');
   8 base.require('quad_view_viewport');
   9 base.requireStylesheet('quad_view');
  10
  11 base.exportTo('ccfv', function() {
  12
  13   function QuadViewSelection(quadView, quadIndices) {
  14     this.view = quadView;
  15     this.quadIndices = quadIndices;
  16   }
  17
  18   var QuadView = ui.define('x-quad-view');
  19
  20   QuadView.prototype = {
  21     __proto__: HTMLUnknownElement.prototype,
  22
  23     decorate: function() {
  24       this.title_ = '';
  25       this.quads_ = undefined;
  26       this.viewport_ = undefined;
  27       this.deviceViewportSizeForFrame_ = undefined;
  28       this.header_ = document.createElement('div');
  29       this.header_.className = 'header';
  30       this.canvas_ = document.createElement('canvas');
  31       this.appendChild(this.header_);
  32       this.appendChild(this.canvas_);
  33
  34       this.onViewportChanged_ = this.onViewportChanged_.bind(this);
  35       this.onMouseDown_ = this.onMouseDown_.bind(this);
  36       this.onMouseMove_ = this.onMouseMove_.bind(this);
  37       this.onMouseUp_ = this.onMouseUp_.bind(this);
  38       this.canvas_.addEventListener('mousedown', this.onMouseDown_);
  39
  40       this.canvas_.addEventListener('focus', this.redrawCanvas_.bind(this));
  41       this.canvas_.addEventListener('blur', this.redrawCanvas_.bind(this));
  42       this.canvas_.tabIndex = 0;
  43     },
  44
  45     get headerText() {
  46       return this.headerText_;
  47     },
  48
  49     set headerText(headerText) {
  50       this.headerText_ = headerText;
  51       this.updateChildren_();
  52     },
  53
  54     get viewport() {
  55       return this.viewport_;
  56     },
  57
  58     set viewport(viewport) {
  59       if (this.viewport_)
  60         this.viewport_.removeEventListener('change', this.onViewportChanged_);
  61       this.viewport_ = viewport;
  62       if (this.viewport_)
  63         this.viewport_.addEventListener('change', this.onViewportChanged_);
  64       this.updateChildren_();
  65     },
  66
  67     onViewportChanged_: function() {
  68       if (!this.hasRequiredProprties_)
  69         return;
  70       this.redrawCanvas_();
  71     },
  72
  73     get quads() {
  74       return this.quads_;
  75     },
  76
  77     set quads(quads) {
  78       this.quads_ = quads;
  79       this.updateChildren_();
  80     },
  81
  82     get deviceViewportSizeForFrame() {
  83       return this.deviceViewportSizeForFrame_;
  84     },
  85
  86     set deviceViewportSizeForFrame(size) {
  87       this.deviceViewportSizeForFrame_ = size;
  88       this.updateChildren_();
  89     },
  90
  91     get hasRequiredProprties_() {
  92       return this.quads_ &&
  93         this.viewport_;
  94     },
  95
  96     updateChildren_: function() {
  97       this.header_.textContent = this.headerText_;
  98       var canvas = this.canvas_;
  99       if (!this.hasRequiredProprties_) {
 100         canvas.width = 0;
 101         canvas.height = 0;
 102         return;
 103       }
 104
 105       this.redrawCanvas_();
 106     },
 107
 108     redrawCanvas_: function() {
 109       if (this.canvas_.width != this.viewport_.deviceWidth) {
 110         this.canvas_.width = this.viewport_.deviceWidth;
 111         this.canvas_.style.width = this.viewport_.layoutWidth + 'px';
 112       }
 113       if (this.canvas_.height != this.viewport_.deviceHeight) {
 114         this.canvas_.height = this.viewport_.deviceHeight;
 115         this.canvas_.style.height = this.viewport_.layoutHeight + 'px';
 116       }
 117
 118       var ctx = this.canvas_.getContext('2d');
 119       var vp = this.viewport_;
 120       ctx.fillStyle = 'rgb(255,255,255)';
 121       ctx.fillRect(
 122         0, 0,
 123         this.canvas_.width, this.canvas_.height);
 124
 125       ctx.save();
 126
 127       vp.applyTransformToContext(ctx);
 128       ctx.lineWidth = vp.getDeviceLineWidthAssumingTransformIsApplied(1.0);
 129
 130       var quads = this.quads_;
 131
 132       // Background colors.
 133       var lastBackgroundColor = 'rgb(255,255,0)';
 134       ctx.fillStyle = lastBackgroundColor;
 135       for (var i = 0; i < quads.length; i++) {
 136         var quad = quads[i];
 137         if (!quad.backgroundColor)
 138           continue;
 139         if (quad.backgroundColor != lastBackgroundColor) {
 140           lastBackgroundColor = quad.backgroundColor;
 141           ctx.fillStyle = lastBackgroundColor;
 142         }
 143         ctx.beginPath();
 144         ctx.moveTo(quad.p1.x, quad.p1.y);
 145         ctx.lineTo(quad.p2.x, quad.p2.y);
 146         ctx.lineTo(quad.p3.x, quad.p3.y);
 147         ctx.lineTo(quad.p4.x, quad.p4.y);
 148         ctx.closePath();
 149         ctx.fill();
 150       }
 151
 152       // Outlines.
 153       ctx.strokeStyle = 'rgb(128,128,128)';
 154       for (var i = 0; i < quads.length; i++) {
 155         var quad = quads[i];
 156         ctx.beginPath();
 157         ctx.moveTo(quad.p1.x, quad.p1.y);
 158         ctx.lineTo(quad.p2.x, quad.p2.y);
 159         ctx.lineTo(quad.p3.x, quad.p3.y);
 160         ctx.lineTo(quad.p4.x, quad.p4.y);
 161         ctx.closePath();
 162         ctx.stroke();
 163       }
 164
 165       // Selection outlines.
 166       ctx.lineWidth = vp.getDeviceLineWidthAssumingTransformIsApplied(8.0);
 167       var rules = window.getMatchedCSSRules(this.canvas_);
 168
 169       // TODO(nduca): Figure out how to get these from css.
 170       if (document.activeElement == this.canvas_)
 171         ctx.strokeStyle = 'rgb(187,226,54)';
 172       else
 173         ctx.strokeStyle = 'rgb(156,189,45)';
 174
 175       for (var i = 0; i < quads.length; i++) {
 176         var quad = quads[i];
 177         if (!quad.selected)
 178           continue;
 179         ctx.beginPath();
 180         ctx.moveTo(quad.p1.x, quad.p1.y);
 181         ctx.lineTo(quad.p2.x, quad.p2.y);
 182         ctx.lineTo(quad.p3.x, quad.p3.y);
 183         ctx.lineTo(quad.p4.x, quad.p4.y);
 184         ctx.closePath();
 185         ctx.stroke();
 186       }
 187
 188       if (this.deviceViewportSizeForFrame_) {
 189         ctx.lineWidth = vp.getDeviceLineWidthAssumingTransformIsApplied(2.0);
 190         ctx.strokeStyle = 'rgba(255,0,0,1)';
 191         ctx.strokeRect(0,
 192                        0,
 193                        this.deviceViewportSizeForFrame_.width,
 194                        this.deviceViewportSizeForFrame_.height);
 195       }
 196
 197       ctx.restore();
 198     },
 199
 200     createSelection_: function(quadIndices) {
 201       return new QuadViewSelection(this, quadIndices);
 202     },
 203     selectQuadsAtCanvasClientPoint: function(clientX, clientY) {
 204       var selection = this.createSelection_(
 205         this.findQuadsAtCanvasClientPoint(clientX, clientY));
 206       var e = new base.Event('selection-changed');
 207       e.selection = selection;
 208       this.dispatchEvent(e);
 209       this.viewport_.forceRedrawAll();
 210     },
 211
 212     findQuadsAtCanvasClientPoint: function(clientX, clientY) {
 213       var bounds = this.canvas_.getBoundingClientRect();
 214       var vecInLayout = vec2.createXY(clientX - bounds.left,
 215                                       clientY - bounds.top);
 216       var vecInWorldPixels =
 217         this.viewport_.layoutPixelsToWorldPixels2(vecInLayout);
 218       var pointInWorldPixels = vec2.asPoint(vecInWorldPixels);
 219
 220       var quads = this.quads_;
 221       var hitIndices = [];
 222       for (var i = 0; i < quads.length; i++) {
 223         var quad = quads[i];
 224         var hit = base.pointInQuad2Pt(pointInWorldPixels,
 225                                        quad);
 226         if (hit)
 227           hitIndices.push(i);
 228       }
 229       return hitIndices;
 230     },
 231
 232     onMouseDown_: function(e) {
 233       this.selectQuadsAtCanvasClientPoint(e.clientX, e.clientY);
 234       document.addEventListener('mousemove', this.onMouseMove_);
 235       document.addEventListener('mouseup', this.onMouseUp_);
 236       e.preventDefault();
 237       this.canvas_.focus();
 238       return true;
 239     },
 240
 241     onMouseMove_: function(e) {
 242       this.selectQuadsAtCanvasClientPoint(e.clientX, e.clientY);
 243     },
 244
 245     onMouseUp_: function(e) {
 246       this.selectQuadsAtCanvasClientPoint(e.clientX, e.clientY);
 247       document.removeEventListener('mousemove', this.onMouseMove_);
 248       document.removeEventListener('mouseup', this.onMouseUp_);
 249     }
 250
 251   };
 252
 253   return {
 254     QuadView: QuadView,
 255     QuadViewSelection: QuadViewSelection,
 256   }
 257 });
 258