| <!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="/core/tracks/annotation_view.html"> |
| |
| <script> |
| 'use strict'; |
| |
| tr.exportTo('tr.c.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.c.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.c.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> |
