1<!DOCTYPE html>
2<!--
3Copyright (c) 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/ui/annotations/annotation_view.html">
9
10<script>
11'use strict';
12
13tr.exportTo('tr.ui.annotations', function() {
14  /**
15   * A view of a comment box consisting of a textarea and a line to the
16   * actual location.
17   * @extends {AnnotationView}
18   * @constructor
19   */
20  function CommentBoxAnnotationView(viewport, annotation) {
21    this.viewport_ = viewport;
22    this.annotation_ = annotation;
23    this.textArea_ = undefined;
24
25    this.styleWidth = 250;
26    this.styleHeight = 50;
27    this.fontSize = 10;
28    this.rightOffset = 50;
29    this.topOffset = 25;
30  }
31
32  CommentBoxAnnotationView.prototype = {
33    __proto__: tr.ui.annotations.AnnotationView.prototype,
34
35    removeTextArea: function() {
36      this.textArea_.parentNode.removeChild(this.textArea_);
37    },
38
39    draw: function(ctx) {
40      var coords = this.annotation_.location.toViewCoordinates(this.viewport_);
41      if (coords.viewX < 0) {
42        if (this.textArea_)
43          this.textArea_.style.visibility = 'hidden';
44        return;
45      }
46
47      // Set up textarea element.
48      if (!this.textArea_) {
49        this.textArea_ = document.createElement('textarea');
50        this.textArea_.style.position = 'absolute';
51        this.textArea_.readOnly = true;
52        this.textArea_.value = this.annotation_.text;
53        // Set the z-index so that this is shown on top of canvas.
54        this.textArea_.style.zIndex = 1;
55        ctx.canvas.parentNode.appendChild(this.textArea_);
56      }
57
58      this.textArea_.style.width = this.styleWidth + 'px';
59      this.textArea_.style.height = this.styleHeight + 'px';
60      this.textArea_.style.fontSize = this.fontSize + 'px';
61      this.textArea_.style.visibility = 'visible';
62
63      // Update positions to latest coordinate.
64      this.textArea_.style.left =
65          coords.viewX + ctx.canvas.getBoundingClientRect().left +
66          this.rightOffset + 'px';
67      this.textArea_.style.top =
68          coords.viewY - ctx.canvas.getBoundingClientRect().top -
69          this.topOffset + 'px';
70
71      // Draw pointer line from offset to actual location.
72      ctx.strokeStyle = 'rgb(0, 0, 0)';
73      ctx.lineWidth = 2;
74      ctx.beginPath();
75      tr.ui.b.drawLine(ctx, coords.viewX,
76          coords.viewY - ctx.canvas.getBoundingClientRect().top,
77          coords.viewX + this.rightOffset,
78          coords.viewY - this.topOffset -
79            ctx.canvas.getBoundingClientRect().top);
80      ctx.stroke();
81    }
82  };
83
84  return {
85    CommentBoxAnnotationView: CommentBoxAnnotationView
86  };
87});
88</script>
89