Mirrors/whitebophir
2
0
Fork 0
mirror of https://github.com/lovasoa/whitebophir synced 2024-11-10 06:24:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

End of the first tool (pencil). Now, let's debug all that...

Browse source
This commit is contained in:
Ophir LOJKINE 2013-10-05 01:45:23 +02:00
parent f83eeca13e
commit eaea72d442
1 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
client-data/tools/pencil.js
View file

@ -1,27 +1,55 @@
(function(){ //Code isolation
var pencil = {}; //The new tool that will be added with Tools.add
pencil.name = "Pencil";
//Indicates the id of the line the user is currently drawing or an empty string while the user is not drawing
var curLineId = "",
lastTime = performance.now(); //The time at which the last point was drawn
function startLine (x,y) {
curLineId = Tools.generateUID("l"); //"l" for line
var svg = Tools.svg;
Tools.drawAndSend({
'type' : 'line',
'id' : curLineId
});
//Immediatly add a point to the line
continueLine(x,y);
}
function continueLine (x,y){
/*Wait 50ms before adding any point to the currently drawing line.
This allows the animation to be smother*/
if (curLineId !== "" &&
performance.now() - lastTime > 50) {
Tools.drawAndSend({
'type' : 'point',
'line' : curLineId,
'x' : x,
'y' : y
});
lastTime = performance.now();
}
}
function stopLine (x,y){
//Add a last point to the line
continueLine(x,y);
curLineId = "";
}
var curLine = {},
lastTime = performance.now(),
drawing = false; //Indicates if a line is currently being draxn
function draw(data) {
switch(data.type) {
case "line":
curLine = createLine(data.id);
renderingLine = createLine(data.id);
break;
case "point":
var line = (data.line===curLine.id) ? curLine : svg.getElementById(data.line);
var line = (renderingLine.id == data.line) ? renderingLine : svg.getElementById(data.line);
if (!line) {
console.log("Pencil: Hmmm... I received a point of a line I don't know...");
}
addPoint(line, data.x, data.y);
break;
case "endline":
//TODO?
break;
default:
console.log("Pencil: Draw instruction with unknown type. ", data);
@ -29,41 +57,8 @@
}
}
function pressHandler (ev) {
drawing = true;
Tools.drawAndSend({
'type' : 'line',
'id' : Tools.generateUID("l"); //"l" for line
});
}
function moveHandler (ev){
if (curLine !== null &&
performance.now() - lastTime > 50) {
var x = ev.clientX + window.scrollX,
y = ev.clientY + window.scrollY;
socket.emit('broadcast', {
'type' : 'point',
'line' : curLine.id,
'x' : x,
'y' : y
});
addPoint(curLine, x,y);
lastTime = performance.now();
}
ev.preventDefault();
return false;
}
function releaseHandler (){
drawing = false;
}
svg.addEventListener("mouseup", releaseHandler);
svg.addEventListener("mouseleave", releaseHandler);
//svg.addEventListener("touchend", releaseHandler);
var svg = Tools.svg;
function addPoint (line, x,y) {
var point = svg.createSVGPoint();
point.x = x; point.y = y;
@ -77,4 +72,13 @@ svg.addEventListener("mouseleave", releaseHandler);
return line;
}
Tools.add({ //The new tool
"name" : "Pencil",
"listeners" : {
"press" : startLine,
"move" : continueLine,
"release" : stopLine,
},
"draw" : draw
});
})(); //End of code isolation