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