Index: experimental/webgtt/javascript/canvas.js |
diff --git a/experimental/webgtt/javascript/canvas.js b/experimental/webgtt/javascript/canvas.js |
deleted file mode 100644 |
index a3f76ce6746dcbe9c40a873161cae7cd186874eb..0000000000000000000000000000000000000000 |
--- a/experimental/webgtt/javascript/canvas.js |
+++ /dev/null |
@@ -1,203 +0,0 @@ |
-// Copyright (c) 2011 The Native Client Authors. All rights reserved. |
-// Use of this source code is governed by a BSD-style license that can be found |
-// in the LICENSE file. |
- |
-/** |
- * @fileoverview This file contains the JavaScript required for the WebGTT |
- * application, specifically, the implementation of the Canvas class. This |
- * implementation provides functions for manipulating a canvas, and |
- * adding/managing event handlers for a canvas. |
- * |
- * @author ragad@google.com (Raga Gopalakrishnan) |
- */ |
- |
-/** |
- * This constant holds the thickness of the canvas border. |
- * @type {number} |
- * @const |
- */ |
-var BORDER_THICKNESS = 5; |
- |
-/** |
- * This class is used to represent a canvas. |
- * |
- * @param drawingCanvas Handle to the DOM object representing the canvas. |
- * @param {Graph} graph1 Reference to the graph associated with the canvas. |
- * @constructor |
- */ |
-Canvas = function (drawingCanvas, graph1) { |
- this.drawingCanvas = drawingCanvas; |
- this.graph1 = graph1; |
- |
- /** |
- * This variable is the handle to the drawing surface of the canvas. |
- */ |
- this.drawingContext = this.drawingCanvas.getContext('2d'); |
- |
- /** |
- * This boolean variable indicates whether the canvas/graph is editable or |
- * not. |
- */ |
- this.editMode = true; |
- |
- this.redrawCanvas(); |
-}; |
- |
-/** |
- * This function (re)draws the canvas. |
- */ |
-Canvas.prototype.redrawCanvas = function () { |
- // The easiest way to reset the canvas is to set one of its properties. |
- this.drawingCanvas.width = this.drawingCanvas.width; |
- |
- this.drawingContext.lineWidth = BORDER_THICKNESS; |
- this.drawingContext.strokeRect(0, 0, this.drawingCanvas.width, |
- this.drawingCanvas.height); |
- this.graph1.draw(this.drawingContext); |
-}; |
- |
-/** |
- * This function sets the value of Canvas.editMode. |
- * |
- * @param {boolean} editMode The value to be assigned to Canvas.editMode. |
- */ |
-Canvas.prototype.setEditMode = function (editMode) { |
- this.editMode = editMode; |
-}; |
- |
-/** |
- * This function handles the click event on the canvas. |
- * |
- * When the user clicks on the canvas, there are several possibilities to be |
- * handled. If the user clicked sufficiently far away from any existing vertex, |
- * then a new vertex should be created there. If the user clicked too close to |
- * an existing vertex, that vertex should be selected/deselected. If at this |
- * point, two vertices are selected, and an edge doesn't exist between them, a |
- * new edge should be created. If an edge does exist, then that edge should be |
- * selected/deselected. Finally, the control panel (the coloring button) should |
- * be enabled only if there is at least one vertex on the canvas. |
- * |
- * @param {object} clickEvent The Event object containing information about the |
- * click event. |
- */ |
-Canvas.prototype.handleCanvasClick = function (clickEvent) { |
- if (this.editMode) { |
- // The origin of the coordinate system is at the top left. The x-coordinate |
- // increases while moving horizontally right, and the y-coordinate increases |
- // while moving vertically down. |
- var x; |
- var y; |
- if (clickEvent.pageX || clickEvent.pageY) { |
- // pageX and pageY give the coordinates relative to the document |
- x = clickEvent.pageX; |
- y = clickEvent.pageY; |
- } else { |
- // Our old friend, Internet Explorer does not support pageX and pageY |
- // properties, so we calculate it manually |
- x = clickEvent.clientX + document.body.scrollLeft + |
- document.documentElement.scrollLeft; |
- y = clickEvent.clientY + document.body.scrollTop + |
- document.documentElement.scrollTop; |
- } |
- x -= this.drawingCanvas.offsetLeft; |
- y -= this.drawingCanvas.offsetTop; |
- |
- var shouldRedraw = false; |
- |
- var closestVertex = this.graph1.getNearestVertex(x,y); |
- var closestDistance = undefined; |
- if (closestVertex != undefined) { |
- closestDistance = Math.sqrt(Math.pow(x-closestVertex.x,2) + |
- Math.pow(y-closestVertex.y,2)); |
- } |
- |
- if (closestVertex == undefined || closestDistance > VERTEX_SIZE * 4) { |
- this.graph1.addVertex(new Vertex(x, y)); |
- shouldRedraw = true; |
- } else if (closestDistance < VERTEX_SIZE+3) { |
- closestVertex.setSelected(!closestVertex.isSelected); |
- shouldRedraw = true; |
- if (closestVertex.isSelected) { |
- // Check if another vertex is selected. |
- for (var i = 0 ; i < this.graph1.listOfVertices.length ; i++) { |
- if (this.graph1.listOfVertices[i] != closestVertex && |
- this.graph1.listOfVertices[i].isSelected) { |
- var tempEdge = this.graph1.getEdge(this.graph1.listOfVertices[i], |
- closestVertex); |
- if (tempEdge != undefined) { |
- tempEdge.setSelected(!tempEdge.isSelected); |
- } else { |
- this.graph1.addEdge(new Edge(this.graph1.listOfVertices[i], |
- closestVertex)); |
- } |
- this.graph1.listOfVertices[i].setSelected(false); |
- closestVertex.setSelected(false); |
- break; |
- } |
- } |
- } |
- } |
- |
- if (shouldRedraw) { |
- this.redrawCanvas(); |
- } |
- |
- if ((this.graph1.listOfVertices.length > 0) && (naclModule1 != undefined)) { |
- coloringButton1.setDisabled(false); |
- } else { |
- coloringButton1.setDisabled(true); |
- } |
- } |
-}; |
- |
-/** |
- * This function handles the keydown event on the window. |
- * |
- * When the user presses any key on the keyboard, this function first checks if |
- * the key that was pressed was a 'Delete' key, and if the canvas/graph is |
- * editable. If both these conditions are satisfied, then the selected vertices |
- * and/or edges are deleted. Finally, the control panel (the coloring button) |
- * should be enabled only if there is at least one vertex on the canvas. |
- * |
- * @param {object} keydownEvent The Event object containing information about |
- * the keydown event. |
- */ |
-Canvas.prototype.handleCanvasKeydown = function (keydownEvent) { |
- if (keydownEvent.keyCode == 46 && this.editMode) { |
- var shouldredraw = false; |
- this.setEditMode(false); |
- |
- for (var i = 0 ; i < this.graph1.listOfVertices.length ; i++) { |
- if (this.graph1.listOfVertices[i].isSelected) { |
- this.graph1.deleteVertexByIndex(i); |
- // Deleting a vertex moves the next vertex in the array back by a |
- // position, so the counter has to be decremented to account for that. |
- i--; |
- shouldRedraw = true; |
- } |
- } |
- |
- for (var i = 0 ; i < this.graph1.listOfEdges.length ; i++) { |
- if (this.graph1.listOfEdges[i].isSelected) { |
- this.graph1.deleteEdgeByIndex(i); |
- // Deleting an edge moves the next edge in the array back by a position, |
- // so the counter has to be decremented to account for that. |
- i--; |
- shouldRedraw = true; |
- } |
- } |
- |
- this.setEditMode(true); |
- |
- if (shouldRedraw) { |
- this.redrawCanvas(); |
- if (this.graph1.listOfVertices.length > 0) { |
- coloringButton1.setDisabled(false); |
- } else { |
- coloringButton1.setDisabled(true); |
- } |
- } else { |
- alert("Nothing to delete!"); |
- } |
- } |
-}; |