tools/cc-frame-viewer/src/lthi_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('ui.list_view');
   9 base.require('quad_view_viewport');
  10 base.require('tree_quad_view');
  11 base.require('layer_tree_impl_view');
  12 base.requireStylesheet('lthi_view');
  13
  14 base.exportTo('ccfv', function() {
  15
  16   var TreeQuadView = ccfv.TreeQuadView;
  17
  18   var LTHIView = ui.define('x-lthi-view');
  19
  20   LTHIView.prototype = {
  21     __proto__: HTMLUnknownElement.prototype,
  22
  23     decorate: function() {
  24       this.lthi_ = undefined;
  25       this.quadViews_ = document.createElement('x-quad-views');
  26
  27       this.viewport_ = undefined;
  28
  29       var optionsEl = document.createElement('x-lthi-view-options');
  30
  31       this.colorMapSelector_ = document.createElement('select');
  32       this.colorMapSelector_.addEventListener(
  33         'change', this.onColorMapChanged_.bind(this));
  34       ccfv.ALL_TILE_COLOR_MAPS.forEach(function(colorMap) {
  35         var mapOption = document.createElement('option');
  36         mapOption.textContent = colorMap.title;
  37         mapOption.colorMap = colorMap;
  38         this.colorMapSelector_.appendChild(mapOption);
  39       }.bind(this));
  40       optionsEl.appendChild(ui.createSpan('Color map:'));
  41       optionsEl.appendChild(this.colorMapSelector_);
  42
  43       this.scaleSelector_ = document.createElement('select');
  44       this.scaleSelector_.addEventListener(
  45         'change', this.onScaleChanged_.bind(this));
  46       [1/32., 1/16., 1/8., 1/4, 1/2, 1].forEach(function(scale) {
  47         var mapOption = document.createElement('option');
  48         mapOption.textContent = Math.floor(scale * 100) + '%';
  49         mapOption.scale = scale;
  50         this.scaleSelector_.appendChild(mapOption);
  51       }.bind(this));
  52       this.scaleSelector_.selectedIndex = 3;
  53       optionsEl.appendChild(ui.createSpan('Scale:'));
  54       optionsEl.appendChild(this.scaleSelector_);
  55
  56       this.treePerContentScale_ = document.createElement('input');
  57       this.treePerContentScale_.type = 'checkbox';
  58       this.treePerContentScale_.textContent = 'bar';
  59       this.treePerContentScale_.addEventListener(
  60           'change', this.onTreePerContentScaleChanged_.bind(this));
  61       optionsEl.appendChild(
  62           ui.createLabel('Split apart scale:', this.treePerContentScale_));
  63
  64       this.headerTextEl_ = document.createElement('span');
  65       optionsEl.appendChild(ui.createSpan('Details:'));
  66       optionsEl.appendChild(this.headerTextEl_);
  67
  68       this.inactiveTileView_ = new InactiveTileView();
  69
  70       this.onSelectionChanged_ = this.onSelectionChanged_.bind(this);
  71
  72       this.inactiveTileView_.addEventListener('selection-changed',
  73                                               this.onSelectionChanged_);
  74
  75       this.activeLayerTreeImplView_ = new ccfv.LayerTreeImplView();
  76       this.activeLayerTreeImplView_.header = 'Active layers';
  77
  78       this.appendChild(optionsEl);
  79       this.appendChild(this.quadViews_);
  80       this.appendChild(this.inactiveTileView_);
  81       this.appendChild(this.activeLayerTreeImplView_);
  82     },
  83
  84     get lthi() {
  85       return this.lthi_;
  86     },
  87
  88     set lthi(lthi) {
  89       this.lthi_ = lthi;
  90       this.updateChildren_();
  91     },
  92
  93     onColorMapChanged_: function() {
  94       for (var i = 0; i < this.quadViews_.children.length; i++) {
  95         this.quadViews_.children[i].colorMap =
  96           this.colorMapSelector_.selectedOptions[0].colorMap;
  97       }
  98     },
  99
 100     onScaleChanged_: function() {
 101       if (this.viewport_.scale)
 102         this.viewport_.scale = this.scaleSelector_.selectedOptions[0].scale;
 103     },
 104
 105     onTreePerContentScaleChanged_: function() {
 106       this.updateChildren_();
 107     },
 108
 109     updateChildren_: function() {
 110       var lthi = this.lthi_;
 111       if (!lthi) {
 112         for (var i = 0; i < this.quadViews_.children.length; i++) {
 113           this.quadViews_.children[i].tree = undefined;
 114           this.quadViews_.children[i].removeEventListener('selection-changed',
 115                                                       this.onSelectionChanged_);
 116         }
 117         this.quadViews_.textContent = '';
 118         this.viewport_ = undefined;
 119         this.activeLayerTreeImplView_.layerTreeImpl = undefined;
 120         return;
 121       }
 122
 123       this.quadViews_.textContent = '';
 124
 125       var bbox = lthi.history.allTilesBBox;
 126       if (bbox.isEmpty)
 127         return;
 128
 129       this.viewport_ = new ccfv.QuadViewViewport(
 130         bbox);
 131       this.viewport_.scale = this.scaleSelector_.selectedOptions[0].scale;
 132
 133
 134       // Make the trees.
 135       var quadViews;
 136       function makeForTree(tree, treePrefix) {
 137         var tilesByContentsScale = {};
 138         tree.tiles.forEach(function(tile) {
 139           var cs = tile.history.contentsScale;
 140           if (tilesByContentsScale[cs] === undefined)
 141             tilesByContentsScale[cs] = [];
 142           tilesByContentsScale[cs].push(tile);
 143         }, this);
 144         base.dictionaryKeys(tilesByContentsScale).forEach(function(cs) {
 145           var qv = new TreeQuadView();
 146           var csRounded = Math.floor(cs * 10) / 10;
 147           qv.headerPrefix = treePrefix + ' @ cs=' + csRounded;
 148           qv.which_tree = tree.which_tree;
 149           qv.tiles = tilesByContentsScale[cs];
 150           quadViews.push(qv);
 151         }, this);
 152       }
 153
 154       if (this.treePerContentScale_.checked) {
 155
 156         quadViews = [];
 157         makeForTree(lthi.activeTree, 'Active Tree Tiles');
 158         makeForTree(lthi.pendingTree, 'Pending Tree Tiles');
 159       } else {
 160         var aQuadView = new TreeQuadView();
 161         aQuadView.headerPrefix = 'Active Tree Tiles';
 162         aQuadView.which_tree = lthi.activeTree.which_tree;
 163         aQuadView.tiles = lthi.activeTree.tiles;
 164
 165         var pQuadView = new TreeQuadView();
 166         pQuadView.headerPrefix = 'Pending Tree Tiles';
 167         pQuadView.which_tree = lthi.pendingTree.which_tree;
 168         pQuadView.tiles = lthi.pendingTree.tiles;
 169
 170         quadViews = [aQuadView, pQuadView];
 171       }
 172
 173       quadViews.forEach(function(qv) {
 174         qv.viewport = this.viewport_;
 175         qv.addEventListener('selection-changed',
 176                               this.onSelectionChanged_);
 177         this.quadViews_.appendChild(qv);
 178         qv.deviceViewportSizeForFrame = lthi.deviceViewportSize;
 179         qv.headerText =
 180           qv.headerPrefix + ': ' + qv.tiles.length + ' tiles';
 181         qv.colorMap = this.colorMapSelector_.selectedOptions[0].colorMap;
 182       }, this);
 183
 184
 185
 186       this.headerTextEl_.textContent = lthi.inactiveTiles.length +
 187         ' inactive tiles';
 188       this.inactiveTileView_.tiles = lthi.inactiveTiles;
 189
 190
 191       this.activeLayerTreeImplView_.layerTreeImpl = this.lthi_.activeTree;
 192     },
 193
 194     onSelectionChanged_: function(e) {
 195       var e2 = new base.Event('selection-changed');
 196       e2.selection = e.selection;
 197       this.dispatchEvent(e2);
 198       return true;
 199     }
 200   };
 201
 202   function InactiveTileViewSelection(view, tiles) {
 203     this.view = view;
 204     this.tiles = tiles;
 205   }
 206
 207   InactiveTileViewSelection.prototype = {
 208     activate: function() {
 209       this.tiles.forEach(function(tile) {
 210         tile.selected = true;
 211       });
 212       this.quad_view.viewport.didTileSelectednessChange();
 213       try {
 214         this.view.ignoreChangeEvents_ = true;
 215         this.view.selectedTile = this.tiles[0];
 216       } finally {
 217         this.view.ignoreChangeEvents_ = false;
 218       }
 219     },
 220
 221     deactivate: function() {
 222       this.tiles.forEach(function(tile) {
 223         tile.selected = false;
 224       });
 225       this.quad_view.viewport.didTileSelectednessChange();
 226       try {
 227         this.view.ignoreChangeEvents_ = true;
 228         this.view.selectedElement = undefined;
 229       } finally {
 230         this.view.ignoreChangeEvents_ = false;
 231       }
 232     }
 233   }
 234
 235   var InactiveTileView = ui.define('x-inactive-tile-view');
 236
 237   InactiveTileView.prototype = {
 238     __proto__: HTMLUnknownElement.prototype,
 239
 240     decorate: function() {
 241       this.viewport_ = undefined;
 242       this.tiles_ = undefined;
 243       this.header_ = document.createElement('div');
 244       this.tileList_ = new ui.ListView();
 245       this.ignoreChangeEvents_ = false;
 246       this.tileList_.addEventListener(
 247         'selection-changed',
 248         this.onSelectionChanged_.bind(this));
 249       this.appendChild(this.header_);
 250       this.appendChild(this.tileList_);
 251     },
 252
 253     set viewport(viewport) {
 254       this.viewport_ = viewport;
 255       this.updateChildren_();
 256     },
 257
 258     get viewport() {
 259       return this.viewport_;
 260     },
 261
 262     set tiles(tiles) {
 263       this.tiles_ = tiles;
 264       this.updateChildren_();
 265     },
 266
 267     get tiles() {
 268       return this.tiles_;
 269     },
 270
 271     set selectedTile(tile) {
 272       for (var i = 0; i < this.tileList.children.length; i++) {
 273         if(this.tileList.children[i].tile == tile) {
 274           this.tileList.children[i].selected = true;
 275           return;
 276         }
 277       }
 278       throw new Error('Tile not found');
 279     },
 280
 281     updateChildren_: function() {
 282       this.header_.textContent = '';
 283       this.tileList_.textContent = '';
 284       if (!this.tiles_)
 285         return;
 286       this.header_.textContent = this.tiles_.length + ' inactive tiles';
 287       this.tileList_.textContent = '';
 288       this.tiles_.forEach(function(tile) {
 289         var tileEl = document.createElement('div');
 290         tileEl.tile = tile;
 291         tileEl.textContent = tile.id;
 292         tileEl.className = 'tile';
 293         this.tileList_.appendChild(tileEl);
 294       }.bind(this));
 295     },
 296
 297     onSelectionChanged_: function() {
 298       if (this.ignoreChangeEvents_)
 299         return;
 300       var tiles = [];
 301       if (this.tileList_.selectedElement)
 302         tiles.push(this.tileList_.selectedElement.tile);
 303       var selection = new InactiveTileViewSelection(this, tiles);
 304       var e = new base.Event('inactive-tile-selection-changed', true);
 305       e.selection = selection;
 306       this.dispatchEvent(e);
 307     }
 308   }
 309
 310   return {
 311     LTHIView: LTHIView,
 312     InactiveTileView: InactiveTileView,
 313   }
 314 });
 315