OLD | NEW |
| (Empty) |
1 // Copyright (c) 2011 The Native Client Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be found | |
3 // in the LICENSE file. | |
4 | |
5 /** | |
6 * @fileoverview This file contains the JavaScript required for the WebGTT | |
7 * application, specifically, the implementation of the Edge class. This | |
8 * implementation provides functions for creating, selecting, coloring, and | |
9 * drawing an edge. | |
10 * | |
11 * @author ragad@google.com (Raga Gopalakrishnan) | |
12 */ | |
13 | |
14 /** | |
15 * This constant holds the size used to draw an edge. | |
16 * @type {number} | |
17 * @const | |
18 */ | |
19 var EDGE_SIZE = 4; | |
20 | |
21 /** | |
22 * This class is used to represent an edge of the graph. | |
23 * | |
24 * @param {object} start Reference to the object representing the start vertex. | |
25 * @param {object} end Reference to the object representing the end vertex. | |
26 * @constructor | |
27 */ | |
28 Edge = function (start, end) { | |
29 this.start = start; | |
30 this.end = end; | |
31 | |
32 /** | |
33 * This boolean variable indicates whether the edge is selected or not. | |
34 */ | |
35 this.isSelected = false; | |
36 | |
37 /** | |
38 * This variable stores the color used while drawing the edge on the canvas. | |
39 */ | |
40 this.color = 'black'; | |
41 }; | |
42 | |
43 /** | |
44 * This function sets the value of Edge.isSelected. | |
45 * | |
46 * @param {boolean} isSelected The value to be assigned to Edge.isSelected. | |
47 */ | |
48 Edge.prototype.setSelected = function (isSelected) { | |
49 this.isSelected = isSelected; | |
50 }; | |
51 | |
52 /** | |
53 * This function sets the value of Edge.color. | |
54 * | |
55 * @param {string} color The value to be assigned to Edge.color. | |
56 */ | |
57 Edge.prototype.setColor = function (color) { | |
58 this.color = color; | |
59 }; | |
60 | |
61 /** | |
62 * This function draws the edge on the canvas, with a specified color and | |
63 * line width. | |
64 * | |
65 * @param {object} drawingContext The handle to the drawing surface of the | |
66 * canvas. | |
67 * @param {string} color The color with which the edge is to be drawn. | |
68 * @param {number} lineWidth The width with which the edge is to be drawn. | |
69 */ | |
70 Edge.prototype.drawSpecific = function (drawingContext, color, lineWidth) { | |
71 drawingContext.strokeStyle = color; | |
72 drawingContext.lineWidth = lineWidth; | |
73 drawingContext.beginPath(); | |
74 drawingContext.moveTo(this.start.x, this.start.y); | |
75 drawingContext.lineTo(this.end.x, this.end.y); | |
76 drawingContext.closePath(); | |
77 drawingContext.stroke(); | |
78 }; | |
79 | |
80 /** | |
81 * This function draws the edge on the canvas. | |
82 * | |
83 * The edge is drawn as a line from (start.x,start.y) to (end.x,end.y) with | |
84 * size (thickness) specified by EDGE_SIZE. If isSelected is true, a thicker | |
85 * red line is also drawn, to indicate that the edge is selected. | |
86 * | |
87 * @param {object} drawingContext The handle to the drawing surface of the | |
88 * canvas. | |
89 */ | |
90 Edge.prototype.draw = function (drawingContext) { | |
91 this.drawSpecific(drawingContext, this.color, EDGE_SIZE); | |
92 if (this.isSelected) { | |
93 this.drawSpecific(drawingContext, 'red', 3*EDGE_SIZE/2); | |
94 } | |
95 }; | |
OLD | NEW |