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/bbox2.html"> | 7 <link rel="import" href="/tracing/base/math/bbox2.html"> |
8 <link rel="import" href="/tracing/base/math.html"> | 8 <link rel="import" href="/tracing/base/math/math.html"> |
9 <link rel="import" href="/tracing/base/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/raf.html"> | 11 <link rel="import" href="/tracing/base/raf.html"> |
11 <link rel="import" href="/tracing/base/rect.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 <style> |
19 * /deep/ quad-stack-view { | 19 * /deep/ quad-stack-view { |
20 display: block; | 20 display: block; |
21 float: left; | 21 float: left; |
(...skipping 222 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
244 transformed[1] = ((tmpVec4[1] / w) + 1) * viewport.height / 2; | 244 transformed[1] = ((tmpVec4[1] / w) + 1) * viewport.height / 2; |
245 transformed[2] = w; | 245 transformed[2] = w; |
246 } | 246 } |
247 | 247 |
248 function drawProjectedQuadBackgroundToContext( | 248 function drawProjectedQuadBackgroundToContext( |
249 quad, p1, p2, p3, p4, ctx, quadCanvas) { | 249 quad, p1, p2, p3, p4, ctx, quadCanvas) { |
250 if (quad.imageData) { | 250 if (quad.imageData) { |
251 quadCanvas.width = quad.imageData.width; | 251 quadCanvas.width = quad.imageData.width; |
252 quadCanvas.height = quad.imageData.height; | 252 quadCanvas.height = quad.imageData.height; |
253 quadCanvas.getContext('2d').putImageData(quad.imageData, 0, 0); | 253 quadCanvas.getContext('2d').putImageData(quad.imageData, 0, 0); |
254 var quadBBox = new tr.b.BBox2(); | 254 var quadBBox = new tr.b.math.BBox2(); |
255 quadBBox.addQuad(quad); | 255 quadBBox.addQuad(quad); |
256 var iw = quadCanvas.width; | 256 var iw = quadCanvas.width; |
257 var ih = quadCanvas.height; | 257 var ih = quadCanvas.height; |
258 drawTriangleSub( | 258 drawTriangleSub( |
259 ctx, quadCanvas, | 259 ctx, quadCanvas, |
260 p1, p2, p4, | 260 p1, p2, p4, |
261 [0, 0], [iw, 0], [0, ih]); | 261 [0, 0], [iw, 0], [0, ih]); |
262 drawTriangleSub( | 262 drawTriangleSub( |
263 ctx, quadCanvas, | 263 ctx, quadCanvas, |
264 p2, p3, p4, | 264 p2, p3, p4, |
(...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
393 'input', this.onStackingDistanceChange_.bind(this)); | 393 'input', this.onStackingDistanceChange_.bind(this)); |
394 | 394 |
395 this.trackMouse_(); | 395 this.trackMouse_(); |
396 | 396 |
397 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); | 397 this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); |
398 this.camera_.addEventListener('renderrequired', | 398 this.camera_.addEventListener('renderrequired', |
399 this.onRenderRequired_.bind(this)); | 399 this.onRenderRequired_.bind(this)); |
400 this.cameraWasReset_ = false; | 400 this.cameraWasReset_ = false; |
401 this.camera_.canvas = this.canvas_; | 401 this.camera_.canvas = this.canvas_; |
402 | 402 |
403 this.viewportRect_ = tr.b.Rect.fromXYWH(0, 0, 0, 0); | 403 this.viewportRect_ = tr.b.math.Rect.fromXYWH(0, 0, 0, 0); |
404 | 404 |
405 this.pixelRatio_ = window.devicePixelRatio || 1; | 405 this.pixelRatio_ = window.devicePixelRatio || 1; |
406 }, | 406 }, |
407 | 407 |
408 updateHeaderVisibility_: function() { | 408 updateHeaderVisibility_: function() { |
409 if (this.headerText) | 409 if (this.headerText) |
410 Polymer.dom(this).querySelector('#header').style.display = ''; | 410 Polymer.dom(this).querySelector('#header').style.display = ''; |
411 else | 411 else |
412 Polymer.dom(this).querySelector('#header').style.display = 'none'; | 412 Polymer.dom(this).querySelector('#header').style.display = 'none'; |
413 }, | 413 }, |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
453 this.camera_.deviceRect = rect; | 453 this.camera_.deviceRect = rect; |
454 this.chromeQuad_ = undefined; | 454 this.chromeQuad_ = undefined; |
455 }, | 455 }, |
456 | 456 |
457 resize: function() { | 457 resize: function() { |
458 if (!this.offsetParent) | 458 if (!this.offsetParent) |
459 return true; | 459 return true; |
460 | 460 |
461 var width = parseInt(window.getComputedStyle(this.offsetParent).width); | 461 var width = parseInt(window.getComputedStyle(this.offsetParent).width); |
462 var height = parseInt(window.getComputedStyle(this.offsetParent).height); | 462 var height = parseInt(window.getComputedStyle(this.offsetParent).height); |
463 var rect = tr.b.Rect.fromXYWH(0, 0, width, height); | 463 var rect = tr.b.math.Rect.fromXYWH(0, 0, width, height); |
464 | 464 |
465 if (rect.equalTo(this.viewportRect_)) | 465 if (rect.equalTo(this.viewportRect_)) |
466 return false; | 466 return false; |
467 | 467 |
468 this.viewportRect_ = rect; | 468 this.viewportRect_ = rect; |
469 this.style.width = width + 'px'; | 469 this.style.width = width + 'px'; |
470 this.style.height = height + 'px'; | 470 this.style.height = height + 'px'; |
471 this.canvas_.style.width = width + 'px'; | 471 this.canvas_.style.width = width + 'px'; |
472 this.canvas_.style.height = height + 'px'; | 472 this.canvas_.style.height = height + 'px'; |
473 this.canvas_.width = this.pixelRatio_ * width; | 473 this.canvas_.width = this.pixelRatio_ * width; |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
532 var s = (this.deviceRect_.width - leftWidth - rightWidth) / midWidth; | 532 var s = (this.deviceRect_.width - leftWidth - rightWidth) / midWidth; |
533 chromeCtx.scale(s, 1); | 533 chromeCtx.scale(s, 1); |
534 | 534 |
535 chromeCtx.drawImage(this.chromeImages_.mid, 0, 0); | 535 chromeCtx.drawImage(this.chromeImages_.mid, 0, 0); |
536 chromeCtx.restore(); | 536 chromeCtx.restore(); |
537 | 537 |
538 chromeCtx.drawImage( | 538 chromeCtx.drawImage( |
539 this.chromeImages_.right, leftWidth + s * midWidth, 0); | 539 this.chromeImages_.right, leftWidth + s * midWidth, 0); |
540 | 540 |
541 // Construct the quad. | 541 // Construct the quad. |
542 var chromeRect = tr.b.Rect.fromXYWH( | 542 var chromeRect = tr.b.math.Rect.fromXYWH( |
543 this.deviceRect_.x, | 543 this.deviceRect_.x, |
544 this.deviceRect_.y - offsetY, | 544 this.deviceRect_.y - offsetY, |
545 this.deviceRect_.width, | 545 this.deviceRect_.width, |
546 this.deviceRect_.height + offsetY); | 546 this.deviceRect_.height + offsetY); |
547 var chromeQuad = tr.b.Quad.fromRect(chromeRect); | 547 var chromeQuad = tr.b.math.Quad.fromRect(chromeRect); |
548 chromeQuad.stackingGroupId = this.maxStackingGroupId_ + 1; | 548 chromeQuad.stackingGroupId = this.maxStackingGroupId_ + 1; |
549 chromeQuad.imageData = chromeCtx.getImageData( | 549 chromeQuad.imageData = chromeCtx.getImageData( |
550 0, 0, chromeCanvas.width, chromeCanvas.height); | 550 0, 0, chromeCanvas.width, chromeCanvas.height); |
551 chromeQuad.shadowOffset = [0, 0]; | 551 chromeQuad.shadowOffset = [0, 0]; |
552 chromeQuad.shadowBlur = 5; | 552 chromeQuad.shadowBlur = 5; |
553 chromeQuad.borderWidth = 3; | 553 chromeQuad.borderWidth = 3; |
554 this.chromeQuad_ = chromeQuad; | 554 this.chromeQuad_ = chromeQuad; |
555 return this.chromeQuad_; | 555 return this.chromeQuad_; |
556 }, | 556 }, |
557 | 557 |
558 scheduleRender: function() { | 558 scheduleRender: function() { |
559 if (this.redrawScheduled_) | 559 if (this.redrawScheduled_) |
560 return false; | 560 return false; |
561 this.redrawScheduled_ = true; | 561 this.redrawScheduled_ = true; |
562 tr.b.requestAnimationFrame(this.render, this); | 562 tr.b.requestAnimationFrame(this.render, this); |
563 }, | 563 }, |
564 | 564 |
565 onRenderRequired_: function(e) { | 565 onRenderRequired_: function(e) { |
566 this.scheduleRender(); | 566 this.scheduleRender(); |
567 }, | 567 }, |
568 | 568 |
569 stackTransformAndProcessQuads_: function( | 569 stackTransformAndProcessQuads_: function( |
570 numPasses, handleQuadFunc, includeChromeQuad, opt_arg1, opt_arg2) { | 570 numPasses, handleQuadFunc, includeChromeQuad, opt_arg1, opt_arg2) { |
571 var mv = this.camera_.modelViewMatrix; | 571 var mv = this.camera_.modelViewMatrix; |
572 var p = this.camera_.projectionMatrix; | 572 var p = this.camera_.projectionMatrix; |
573 | 573 |
574 var viewport = tr.b.Rect.fromXYWH( | 574 var viewport = tr.b.math.Rect.fromXYWH( |
575 0, 0, this.canvas_.width, this.canvas_.height); | 575 0, 0, this.canvas_.width, this.canvas_.height); |
576 | 576 |
577 // Calculate the quad stacks. | 577 // Calculate the quad stacks. |
578 var quadStacks = []; | 578 var quadStacks = []; |
579 for (var i = 0; i < this.quads_.length; ++i) { | 579 for (var i = 0; i < this.quads_.length; ++i) { |
580 var quad = this.quads_[i]; | 580 var quad = this.quads_[i]; |
581 var stackingId = quad.stackingGroupId || 0; | 581 var stackingId = quad.stackingGroupId || 0; |
582 while (stackingId >= quadStacks.length) | 582 while (stackingId >= quadStacks.length) |
583 quadStacks.push([]); | 583 quadStacks.push([]); |
584 | 584 |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
664 return [ | 664 return [ |
665 this.pixelRatio_ * (e.clientX - this.canvas_.offsetLeft - br.left), | 665 this.pixelRatio_ * (e.clientX - this.canvas_.offsetLeft - br.left), |
666 this.pixelRatio_ * (e.clientY - this.canvas_.offsetTop - br.top) | 666 this.pixelRatio_ * (e.clientY - this.canvas_.offsetTop - br.top) |
667 ]; | 667 ]; |
668 }, | 668 }, |
669 | 669 |
670 onSelectionUpdate_: function(e) { | 670 onSelectionUpdate_: function(e) { |
671 var mousePos = this.extractRelativeMousePosition_(e); | 671 var mousePos = this.extractRelativeMousePosition_(e); |
672 var res = []; | 672 var res = []; |
673 function handleQuad(passNumber, quad, p1, p2, p3, p4) { | 673 function handleQuad(passNumber, quad, p1, p2, p3, p4) { |
674 if (tr.b.pointInImplicitQuad(mousePos, p1, p2, p3, p4)) | 674 if (tr.b.math.pointInImplicitQuad(mousePos, p1, p2, p3, p4)) |
675 res.push(quad); | 675 res.push(quad); |
676 } | 676 } |
677 this.stackTransformAndProcessQuads_(1, handleQuad, false); | 677 this.stackTransformAndProcessQuads_(1, handleQuad, false); |
678 var e = new tr.b.Event('selectionchange'); | 678 var e = new tr.b.Event('selectionchange'); |
679 e.quads = res; | 679 e.quads = res; |
680 this.dispatchEvent(e); | 680 this.dispatchEvent(e); |
681 } | 681 } |
682 }; | 682 }; |
683 | 683 |
684 return { | 684 return { |
685 QuadStackView, | 685 QuadStackView, |
686 }; | 686 }; |
687 }); | 687 }); |
688 </script> | 688 </script> |
OLD | NEW |