OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2013 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2013 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 <link rel="import" href="/tracing/base/math/bbox2.html"> | 7 <link rel="import" href="/tracing/base/math/bbox2.html"> |
8 <link rel="import" href="/tracing/base/math/math.html"> | 8 <link rel="import" href="/tracing/base/math/math.html"> |
9 <link rel="import" href="/tracing/base/math/quad.html"> | 9 <link rel="import" href="/tracing/base/math/quad.html"> |
10 <link rel="import" href="/tracing/base/math/rect.html"> | 10 <link rel="import" href="/tracing/base/math/rect.html"> |
11 <link rel="import" href="/tracing/base/raf.html"> | 11 <link rel="import" href="/tracing/base/raf.html"> |
12 <link rel="import" href="/tracing/base/settings.html"> | 12 <link rel="import" href="/tracing/base/settings.html"> |
13 <link rel="import" href="/tracing/ui/base/camera.html"> | 13 <link rel="import" href="/tracing/ui/base/camera.html"> |
14 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> | 14 <link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> |
15 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> | 15 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> |
16 <link rel="import" href="/tracing/ui/base/utils.html"> | 16 <link rel="import" href="/tracing/ui/base/utils.html"> |
17 | 17 |
18 <style> | 18 <template id="quad-stack-view-template"> |
19 * /deep/ quad-stack-view { | 19 <style> |
20 display: block; | 20 #chrome-left { |
21 float: left; | 21 background-image: url('../images/chrome-left.png'); |
22 height: 100%; | 22 display: none; |
23 overflow: hidden; | 23 } |
24 position: relative; /* For the absolute positioned mouse-mode-selector */ | 24 #chrome-mid { |
25 width: 100%; | 25 background-image: url('../images/chrome-mid.png'); |
26 } | 26 display: none; |
| 27 } |
| 28 #chrome-right { |
| 29 background-image: url('../images/chrome-right.png'); |
| 30 display: none; |
| 31 } |
| 32 </style> |
27 | 33 |
28 * /deep/ quad-stack-view > #header { | |
29 position: absolute; | |
30 font-size: 70%; | |
31 top: 10px; | |
32 left: 10px; | |
33 width: 800px; | |
34 } | |
35 * /deep/ quad-stack-view > #stacking-distance-slider { | |
36 position: absolute; | |
37 font-size: 70%; | |
38 top: 10px; | |
39 right: 10px; | |
40 } | |
41 | |
42 * /deep/ quad-stack-view > #chrome-left { | |
43 background-image: url('../images/chrome-left.png'); | |
44 display: none; | |
45 } | |
46 | |
47 * /deep/ quad-stack-view > #chrome-mid { | |
48 background-image: url('../images/chrome-mid.png'); | |
49 display: none; | |
50 } | |
51 | |
52 * /deep/ quad-stack-view > #chrome-right { | |
53 background-image: url('../images/chrome-right.png'); | |
54 display: none; | |
55 } | |
56 </style> | |
57 | |
58 <template id='quad-stack-view-template'> | |
59 <div id="header"></div> | 34 <div id="header"></div> |
60 <input id="stacking-distance-slider" type="range" min=1 max=400 step=1> | 35 <input id="stacking-distance-slider" type="range" min=1 max=400 step=1> |
61 </input> | 36 </input> |
62 <canvas id='canvas'></canvas> | 37 <canvas id="canvas"></canvas> |
63 <img id='chrome-left'/> | 38 <img id="chrome-left"/> |
64 <img id='chrome-mid'/> | 39 <img id="chrome-mid"/> |
65 <img id='chrome-right'/> | 40 <img id="chrome-right"/> |
66 </template> | 41 </template> |
67 | 42 |
68 <script> | 43 <script> |
69 'use strict'; | 44 'use strict'; |
70 | 45 |
71 /** | 46 /** |
72 * @fileoverview QuadStackView controls the content and viewing angle a | 47 * @fileoverview QuadStackView controls the content and viewing angle a |
73 * QuadStack. | 48 * QuadStack. |
74 */ | 49 */ |
75 tr.exportTo('tr.ui.b', function() { | 50 tr.exportTo('tr.ui.b', function() { |
(...skipping 293 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
369 /** | 344 /** |
370 * @constructor | 345 * @constructor |
371 */ | 346 */ |
372 const QuadStackView = tr.ui.b.define('quad-stack-view'); | 347 const QuadStackView = tr.ui.b.define('quad-stack-view'); |
373 | 348 |
374 QuadStackView.prototype = { | 349 QuadStackView.prototype = { |
375 __proto__: HTMLDivElement.prototype, | 350 __proto__: HTMLDivElement.prototype, |
376 | 351 |
377 decorate() { | 352 decorate() { |
378 this.className = 'quad-stack-view'; | 353 this.className = 'quad-stack-view'; |
| 354 this.style.display = 'block'; |
| 355 this.style.float = 'left'; |
| 356 this.style.height = '100%'; |
| 357 this.style.overflow = 'hidden'; |
| 358 this.style.position = 'relative'; |
| 359 this.style.width = '100%'; |
379 | 360 |
380 const node = tr.ui.b.instantiateTemplate('#quad-stack-view-template', | 361 const node = tr.ui.b.instantiateTemplate('#quad-stack-view-template', |
381 THIS_DOC); | 362 THIS_DOC); |
382 Polymer.dom(this).appendChild(node); | 363 Polymer.dom(this).appendChild(node); |
383 this.updateHeaderVisibility_(); | 364 this.updateHeaderVisibility_(); |
| 365 const header = Polymer.dom(this).querySelector('#header'); |
| 366 header.style.position = 'absolute'; |
| 367 header.style.fontSize = '70%'; |
| 368 header.style.top = '10px'; |
| 369 header.style.left = '10px'; |
| 370 header.style.width = '800px'; |
| 371 |
384 this.canvas_ = Polymer.dom(this).querySelector('#canvas'); | 372 this.canvas_ = Polymer.dom(this).querySelector('#canvas'); |
385 this.chromeImages_ = { | 373 this.chromeImages_ = { |
386 left: Polymer.dom(this).querySelector('#chrome-left'), | 374 left: Polymer.dom(this).querySelector('#chrome-left'), |
387 mid: Polymer.dom(this).querySelector('#chrome-mid'), | 375 mid: Polymer.dom(this).querySelector('#chrome-mid'), |
388 right: Polymer.dom(this).querySelector('#chrome-right') | 376 right: Polymer.dom(this).querySelector('#chrome-right') |
389 }; | 377 }; |
390 | 378 |
391 const stackingDistanceSlider = Polymer.dom(this).querySelector( | 379 const stackingDistanceSlider = Polymer.dom(this).querySelector( |
392 '#stacking-distance-slider'); | 380 '#stacking-distance-slider'); |
| 381 stackingDistanceSlider.style.position = 'absolute'; |
| 382 stackingDistanceSlider.style.fontSize = '70%'; |
| 383 stackingDistanceSlider.style.top = '10px'; |
| 384 stackingDistanceSlider.style.right = '10px'; |
393 stackingDistanceSlider.value = tr.b.Settings.get( | 385 stackingDistanceSlider.value = tr.b.Settings.get( |
394 'quadStackView.stackingDistance', 45); | 386 'quadStackView.stackingDistance', 45); |
395 stackingDistanceSlider.addEventListener( | 387 stackingDistanceSlider.addEventListener( |
396 'change', this.onStackingDistanceChange_.bind(this)); | 388 'change', this.onStackingDistanceChange_.bind(this)); |
397 stackingDistanceSlider.addEventListener( | 389 stackingDistanceSlider.addEventListener( |
398 'input', this.onStackingDistanceChange_.bind(this)); | 390 'input', this.onStackingDistanceChange_.bind(this)); |
399 | 391 |
| 392 const chromeLeft = Polymer.dom(this).querySelector('#chrome-left'); |
| 393 |
| 394 const chromeMid = Polymer.dom(this).querySelector('#chrome-mid'); |
| 395 |
| 396 const chromeRight = Polymer.dom(this).querySelector('#chrome-right'); |
| 397 |
400 this.trackMouse_(); | 398 this.trackMouse_(); |
401 | 399 |
402 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); | 400 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); |
403 this.camera_.addEventListener('renderrequired', | 401 this.camera_.addEventListener('renderrequired', |
404 this.onRenderRequired_.bind(this)); | 402 this.onRenderRequired_.bind(this)); |
405 this.cameraWasReset_ = false; | 403 this.cameraWasReset_ = false; |
406 this.camera_.canvas = this.canvas_; | 404 this.camera_.canvas = this.canvas_; |
407 | 405 |
408 this.viewportRect_ = tr.b.math.Rect.fromXYWH(0, 0, 0, 0); | 406 this.viewportRect_ = tr.b.math.Rect.fromXYWH(0, 0, 0, 0); |
409 | 407 |
(...skipping 273 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
683 e.quads = res; | 681 e.quads = res; |
684 this.dispatchEvent(e); | 682 this.dispatchEvent(e); |
685 } | 683 } |
686 }; | 684 }; |
687 | 685 |
688 return { | 686 return { |
689 QuadStackView, | 687 QuadStackView, |
690 }; | 688 }; |
691 }); | 689 }); |
692 </script> | 690 </script> |
OLD | NEW |