diff --git a/client-data/board.html b/client-data/board.html index 1dba539..964ad37 100644 --- a/client-data/board.html +++ b/client-data/board.html @@ -47,6 +47,7 @@ + diff --git a/client-data/tools/line/line.js b/client-data/tools/line/line.js new file mode 100644 index 0000000..ff885fa --- /dev/null +++ b/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 diff --git a/client-data/tools/text/text.js b/client-data/tools/text/text.js index e304dcb..b12cc31 100644 --- a/client-data/tools/text/text.js +++ b/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 = { diff --git a/package.json b/package.json index 8c70440..255b3d2 100644 --- a/package.json +++ b/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"