Add straight line tool

client-data/board.html

@@ -47,6 +47,7 @@
 <script type="text/javascript" src="tools/text/text.js"></script>
 <script type="text/javascript" src="tools/eraser/eraser.js"></script>
 <script type="text/javascript" src="tools/hand/hand.js"></script>
+<script type="text/javascript" src="tools/line/line.js"></script>
 <script type="text/javascript" src="/js/canvascolor/canvascolor.min.js"></script>
 </body>
 </html>

client-data/tools/line/line.js

@@ -0,0 +1,133 @@
+/**
+ *                        WHITEBOPHIR
+ *********************************************************
+ * @licstart  The following is the entire license notice for the 
+ *  JavaScript code in this page.
+ *
+ * Copyright (C) 2013  Ophir LOJKINE
+ *
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend
+ */
+ 
+(function(){ //Code isolation
+	//Indicates the id of the line the user is currently drawing or an empty string while the user is not drawing
+	var curLineId = "",
+		curUpdate = { //The data of the message that will be sent for every new point
+				'type' : 'update',
+				'id' : "",
+				'x2' : 0,
+				'y2' : 0
+		},
+		lastTime = performance.now(); //The time at which the last point was drawn
+
+	function startLine (x,y, evt) {
+
+		//Prevent the press from being interpreted by the browser
+		evt.preventDefault();
+
+		curLineId = Tools.generateUID("s"); //"s" for straight line
+
+		Tools.drawAndSend({
+			'type' : 'straight',
+			'id' : curLineId,
+			'color' : Tools.getColor(),
+			'size' : Tools.getSize(),
+      'x' : x,
+      'y' : y
+		});
+
+    curUpdate.id = curLineId;
+    updateLine(x,y, evt);
+	}
+
+	function continueLine (x,y, evt){
+		/*Wait 70ms before adding any point to the currently drawing line.
+		This allows the animation to be smother*/
+		if (curLineId !== "" &&
+			performance.now() - lastTime > 70) {
+			curUpdate['x2'] = x; curUpdate['y2'] = y;
+			Tools.drawAndSend(curUpdate);
+			lastTime = performance.now();
+		}
+		if (evt) evt.preventDefault();
+	}
+
+	function stopLine (x,y){
+		//Add a last point to the line
+		continueLine(x,y);
+		curLineId = "";
+	}
+
+	function draw(data) {
+		switch(data.type) {
+			case "straight":
+				createLine(data);
+				break;
+			case "update":
+				var line = svg.getElementById(data['id']);
+				if (!line) {
+					console.error("Pencil: Hmmm... I received a point of a line that has not been created (%s).", data['id']);
+					createLine({ //create a new line in order not to loose the points
+            "id": data['id'],
+            "x": data['x2'],
+            "y": data['y2']
+          });
+				}
+        updateLine(line, data);
+				break;
+			default:
+				console.error("Straight Line: Draw instruction with unknown type. ", data);
+				break;
+		}
+	}
+
+	var svg = Tools.svg;
+	function createLine(lineData) {
+		//Creates a new line on the canvas, or update a line that already exists with new information
+		var line = svg.getElementById(lineData.id) || Tools.createSVGElement("line");
+		line.id = lineData.id;
+    line.x1.baseVal.value = lineData['x'];
+    line.y1.baseVal.value = lineData['y'];
+    line.x2.baseVal.value = lineData['x2'] || lineData['x']; 
+    line.y2.baseVal.value = lineData['y2'] || lineData['y']; 
+		//If some data is not provided, choose default value. The line may be updated later
+		line.setAttribute("stroke", lineData.color || "black" );
+		line.setAttribute("stroke-width", lineData.size || 10 );
+		svg.appendChild(line);
+		return line;
+	}
+
+  function updateLine(line, data) {
+    line.x2.baseVal.value = data['x2']; 
+    line.y2.baseVal.value = data['y2']; 
+  }
+
+	Tools.add({ //The new tool
+	 	"name" : "Straight line",
+	 	"icon" : "fa-arrows-h",
+	 	"listeners" : {
+	 		"press" : startLine,
+	 		"move" : continueLine,
+      "release" : stopLine,
+	 	},
+	 	"draw" : draw,
+	 	"mouseCursor" : "crosshair",
+	 	"stylesheet" : "tools/line/line.css"
+	});
+
+})(); //End of code isolation

client-data/tools/text/text.js

@@ -28,7 +28,8 @@
 	var board = Tools.board, svg = Tools.svg;
 
 	var input = document.createElement("input");
-	input.id="textToolInput";
+	input.id = "textToolInput";
+	input.setAttribute("autocomplete", "off");
 	board.appendChild(input);
 
 	var curText = {

package.json

@@ -3,7 +3,7 @@
       "collaborative",
       "whiteboard"
    ],
-   "version": "1.0.0-7",
+   "version": "1.0.0-10",
    "dependencies": {
       "node-static": "0.7.x",
       "socket.io": "0.9.x"