1// Copyright (c) 2013 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 * @fileoverview RectView is used to visualize a rect. 9 */ 10 11base.exportTo('ui', function() { 12 // Area above the RectView used draw decorations. 13 var DECORATION_HEIGHT = 36; 14 15 /** 16 * @constructor 17 */ 18 var RectView = ui.define('rect-view'); 19 20 RectView.prototype = { 21 __proto__: HTMLUnknownElement.prototype, 22 23 decorate: function() { 24 this.viewport_ = undefined; 25 this.rect_ = undefined; 26 }, 27 28 set viewport(viewport) { 29 this.viewport_ = viewport; 30 this.updateContents_(); 31 }, 32 33 set rect(rect) { 34 this.rect_ = rect; 35 this.updateContents_(); 36 }, 37 38 updateContents_: function() { 39 if (this.viewport_ === undefined || this.rect_ === undefined) 40 return; 41 42 var devicePixelsPerLayoutPixel = 1 / this.viewport_.devicePixelRatio; 43 44 var topLeft = vec2.fromValues(this.rect_.x, this.rect_.y); 45 var botRight = vec2.fromValues( 46 topLeft[0] + this.rect_.width, 47 topLeft[1] + this.rect_.height); 48 vec2.transformMat2d(topLeft, topLeft, 49 this.viewport_.getWorldToDevicePixelsTransform()); 50 vec2.scale(topLeft, topLeft, devicePixelsPerLayoutPixel); 51 vec2.transformMat2d(botRight, botRight, 52 this.viewport_.getWorldToDevicePixelsTransform()); 53 vec2.scale(botRight, botRight, devicePixelsPerLayoutPixel); 54 this.style.width = botRight[0] - topLeft[0] + 'px'; 55 this.style.height = DECORATION_HEIGHT + botRight[1] - topLeft[1] + 'px'; 56 this.style.left = topLeft[0] + 'px'; 57 this.style.top = DECORATION_HEIGHT + topLeft[1] + 'px'; 58 this.style.backgroundSize = 'auto ' + DECORATION_HEIGHT + 'px'; 59 } 60 61 }; 62 63 return { 64 RectView: RectView 65 }; 66}); 67