Commit 877f4e1d authored by Nezael's avatar Nezael
Browse files

Connection to paperboard server

Everything is working all users in a same board can see what happens when someone is drawing.
parent 75d3e1ed
......@@ -7,7 +7,7 @@
/* Controllers */
root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state', '$paperboardFactory', '$languageFactory', '$utilsFactory', function ($scope, $stateParams, $http, $state, $paperboardFactory, $languageFactory, $utilsFactory) {
root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state', '$paperboardFactory', '$languageFactory', '$utilsFactory','$socketIOPaperboardFactory', function ($scope, $stateParams, $http, $state, $paperboardFactory, $languageFactory, $utilsFactory, $socketIOPaperboardFactory) {
let paperBoardCtrl = this;
let canvas = document.querySelector('#drawZone');
......@@ -25,6 +25,26 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
let erase = false;
$socketIOPaperboardFactory.initSocketIO();
$socketIOPaperboardFactory.joinPaperboard($stateParams.elementId);
$socketIOPaperboardFactory.onNewData(function(data)
{
switch(data.type)
{
case "pen":
case "erase":
paperBoardCtrl.lineDraw(ctx, data.x1, data.y1, data.x2, data.y2, data.color, data.width);
break;
case "circle":
paperBoardCtrl.drawCircle(ctx, data.x1, data.y1, data.x2, data.y2, data.color, data.width);
break;
case "square":
paperBoardCtrl.drawSquare(ctx, data.x1, data.y1, data.x2, data.y2, data.color, data.width);
break;
}
});
$socketIOPaperboardFactory.onDisconnection();
paperBoardCtrl.getPaperBoardDetails = function (paperBoardDetails) {
if (!paperBoardDetails) var paperBoardDetails = {"id": $stateParams.elementId};
......@@ -131,9 +151,8 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
}
$scope.leaveBoard = function(){
$socketIOPaperboardFactory.disconnect($stateParams.elementId);
alert("Vous venez de quitter l'atelier");
}
paperBoardCtrl.reset = function(){
......@@ -171,6 +190,7 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
{
console.log("après dessin X: " + mouseX + " : Y: " + mouseY);
paperBoardCtrl.lineDraw(ctx,mouseX,mouseY,e.clientX - rect.left, e.clientY - rect.top, style, lineWidth);
$socketIOPaperboardFactory.sendData($stateParams.elementId, {type: "pen", x1: mouseX, y1: mouseY, x2: e.clientX - rect.left, y2: e.clientY - rect.top, color: style, width: lineWidth});
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
......@@ -178,7 +198,8 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
if(erase)
{
paperBoardCtrl.lineDraw(ctx,mouseX,mouseY,e.clientX - rect.left, e.clientY - rect.top, "white", lineWidth);
paperBoardCtrl.lineDraw(ctx,mouseX,mouseY,e.clientX - rect.left, e.clientY - rect.top, "#FDFDFC", lineWidth);
$socketIOPaperboardFactory.sendData($stateParams.elementId, {type: "erase", x1: mouseX, y1: mouseY, x2: e.clientX - rect.left, y2: e.clientY - rect.top, color: "#FDFDFC", width: lineWidth});
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}
......@@ -190,10 +211,14 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
if(circle && isDrawing)
{
paperBoardCtrl.drawCircle(ctx, mouseX, mouseY, e.clientX - rect.left, e.clientY - rect.top, style, lineWidth);
$socketIOPaperboardFactory.sendData($stateParams.elementId, {type: "circle", x1: mouseX, y1: mouseY, x2: e.clientX - rect.left, y2: e.clientY - rect.top, color: style, width: lineWidth});
}
if(square && isDrawing)
{
paperBoardCtrl.drawSquare(ctx, mouseX, mouseY, e.clientX - rect.left, e.clientY - rect.top, style, lineWidth);
$socketIOPaperboardFactory.sendData($stateParams.elementId, {type: "square", x1: mouseX, y1: mouseY, x2: e.clientX - rect.left, y2: e.clientY - rect.top, color: style, width: lineWidth});
}
isDrawing = false;
......@@ -221,5 +246,4 @@ root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state',
style = "#FF0000";
document.querySelector('#personnalized-color').value = "#FF0000";
}
}]);
function $socketIOPaperboardFactory($rootScope, $rightFactory,) {
let returns = {};
const URL = "localhost:8090";
let socket = null;
// initialise socketIO.
returns.initSocketIO = function ()
{
socket = io(URL);
console.log("connected to socket server on localhost:8090");
socket.userID = $rightFactory.session.userId;
// debug
socket.onAny((event, ...args) => {
console.log(event, args);
});
socket.on("connect", () => {
socket.emit("userID", socket.userID);
});
}
returns.joinPaperboard = function (paperboardID) {
socket.emit("joinPaperboard", paperboardID);
}
returns.sendData = function (paperboardID, data){
socket.emit("data", {paperboardID, data});
}
returns.onNewData = function (handler){
socket.on("data", ({data}) => {
handler(data);
});
}
returns.disconnect = function (paperboardID){
socket.emit("disconnect", paperboardID)
}
returns.onDisconnection = function (){
socket.on("user disconnected", function(userID){
console.log("L'utilisateur : " + userID + " s'est déconnecté.");
});
}
return returns;
}
root.factory('$socketIOPaperboardFactory', ['$rootScope', '$rightFactory', $socketIOPaperboardFactory]);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment