mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 14:34:20 +00:00
Add straight line tool
This commit is contained in:
Ophir LOJKINE
parent
8573b58fa8
commit
fd9657304f
4 changed files with 137 additions and 2 deletions
|
|
@ -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>
|
||||
|
|
|
|||
133
client-data/tools/line/line.js
Normal file
133
client-data/tools/line/line.js
Normal file
|
|
@ -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
|
||||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue