From 6224d6c7764fb3839536a0023b45216b7d3afd49 Mon Sep 17 00:00:00 2001 From: Darryl Amour Date: Mon, 3 Dec 2018 20:32:56 -0800 Subject: [PATCH] Working towards integrating Whiteboard into main application. Whiteboard can be tested by copying whiteboard.js and whiteboard.html into the client/dist folder. --- src/client/javascript/whiteboard.js | 244 ++++++++++++---------------- src/client/whiteboard.html | 80 ++++----- src/server/user/userController.js | 4 +- 3 files changed, 148 insertions(+), 180 deletions(-) diff --git a/src/client/javascript/whiteboard.js b/src/client/javascript/whiteboard.js index 2cf4768..9b7dcc7 100755 --- a/src/client/javascript/whiteboard.js +++ b/src/client/javascript/whiteboard.js @@ -1,138 +1,106 @@ -const Client = {}; -Client.socket = io.connect(); - -Client.askNewPlayer = function(){ - Client.socket.emit('isRoomAvailable'); -}(); - -// recived messages - -Client.socket.on('awaitRoom', function(data){ - console.log('player 1') -}) - -Client.socket.on('startRoom', function(data){ - Client.socket.roomId = data.roomId; - console.log("roomId set to ", data.roomId) - console.log('player 2') - Client.socket.emit('joiningRoom', data) -}) - -Client.socket.on('joiningRoom', function(data){ - console.log('player 2 is joining') - Client.socket.roomId = data.roomId; - console.log("roomId", data.roomId) -}) - -Client.socket.on('app',function(data){ - const objData = JSON.parse(data); - if (objData.newEvent.type = "draw") { - const {color, lineStyle, plots} = objData.newEvent.data; - console.log(color) - drawOnCanvas(color, lineStyle, plots); - } -}); - - - -(function() { - /* set up Canvas */ - - const canvas = document.getElementById('drawCanvas'); - const ctx = canvas.getContext('2d'); - let color = document.querySelector('#colorSwatch :checked').getAttribute('data-color'); - let lineStyle = document.querySelector('#lineStyle :checked').getAttribute('data-type'); - canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300); - canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300); - - ctx.strokeStyle = color; - ctx.lineWidth = lineStyle; - ctx.lineCap = ctx.lineJoin = 'round'; - - /* Mouse and touch events */ - - document.getElementById('colorSwatch').addEventListener('click', function() { - color = document.querySelector('#colorSwatch :checked').getAttribute('data-color'); - }, false); - - //let lineStyle = document.querySelector('#lineStyle :checked').getAttribute('data-type'); - - document.getElementById('lineStyle').addEventListener('click', function() { - lineStyle = document.querySelector('#lineStyle :checked').getAttribute('data-type'); - }, false); - - const isTouchSupported = 'ontouchstart' in window; - const isPointerSupported = navigator.pointerEnabled; - const isMSPointerSupported = navigator.msPointerEnabled; - - const downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown')); - const moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove')); - const upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup')); - - canvas.addEventListener(downEvent, startDraw, false); - canvas.addEventListener(moveEvent, draw, false); - canvas.addEventListener(upEvent, endDraw, false); - - /* Socket.io */ - - - - /* Draw on canvas */ - - function drawOnCanvas(color, lineStyle, plots) { - ctx.strokeStyle = color; - ctx.lineWidth = lineStyle; - ctx.beginPath(); - ctx.moveTo(plots[0].x, plots[0].y); - - for(var i=1; i { + ctx.strokeStyle = color; + ctx.lineWidth = lineStyle; + ctx.beginPath(); + ctx.moveTo(plots[0].x, plots[0].y); + + for(var i=1; i { + if(!message || message.plots.length < 1) return; + WhiteBoard.drawOnCanvas(message.color, message.plots); + }, + + draw: (e) => { + e.preventDefault(); // prevent continuous touch event process e.g. scrolling! + if(!isActive) return; + + var x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft); + var y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop); + + plots.push({x: (x << 0), y: (y << 0)}); // round numbers for touch screens + + WhiteBoard.drawOnCanvas(color, lineStyle, plots); + }, + + startDraw: (e) => { + e.preventDefault(); + isActive = true; + }, + + endDraw: (e) => { + e.preventDefault(); + isActive = false; + + Client.socket.emit('app', JSON.stringify( {newEvent: {type: "draw", data: {color: color, lineStyle: lineStyle, plots: plots}}} )); + + plots = []; + }, +}; + +Object.freeze(WhiteBoard); + +// *********************Events and Setup below ******************************* +const Client = {}; + +Client.socket = io.connect({ + autoConnect: false, + transports: ['websocket'], +}); + +Client.socket.on('app', (data) => { + const objData = JSON.parse(data); + if (objData.newEvent.type === 'draw') { + const {color, lineStyle, plots} = objData.newEvent.data; + console.log(`Whiteboard Color: ${color}`) + WhiteBoard.drawOnCanvas(color, lineStyle, plots); + } +}); + +// Need to determine how best to implement this function +// that is automatically executed. + + /* set up Canvas */ + const canvas = document.getElementById('drawCanvas'); + const ctx = canvas.getContext('2d'); + let color = document.querySelector('#colorSwatch :checked').getAttribute('data-color'); + let lineStyle = document.querySelector('#lineStyle :checked').getAttribute('data-type'); + canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300); + canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300); + + ctx.strokeStyle = color; + ctx.lineWidth = lineStyle; + ctx.lineCap = ctx.lineJoin = 'round'; + + /* Mouse and touch events */ + document.getElementById('colorSwatch').addEventListener('click', function() { + color = document.querySelector('#colorSwatch :checked').getAttribute('data-color'); + }, false); + + document.getElementById('lineStyle').addEventListener('click', function() { + lineStyle = document.querySelector('#lineStyle :checked').getAttribute('data-type'); + }, false); + + const isTouchSupported = 'ontouchstart' in window; + const isPointerSupported = navigator.pointerEnabled; + const isMSPointerSupported = navigator.msPointerEnabled; + + const downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown')); + const moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove')); + const upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup')); + + canvas.addEventListener(downEvent, WhiteBoard.startDraw, false); + canvas.addEventListener(moveEvent, WhiteBoard.draw, false); + canvas.addEventListener(upEvent, WhiteBoard.endDraw, false); + +// **************Events and setup above ********************************** + diff --git a/src/client/whiteboard.html b/src/client/whiteboard.html index cd370ff..2018f52 100644 --- a/src/client/whiteboard.html +++ b/src/client/whiteboard.html @@ -1,41 +1,41 @@ - - - - - - - Document - - - - - -
-
-

Whiteboard

-
-
- -
- Canvas is not supported on this browser! - -
- - - - - - -
- -
- - - - - -
-
- - + + + + + + + Document + + + + + +
+
+

Whiteboard

+
+
+ +
+ Canvas is not supported on this browser! + +
+ + + + + + +
+ +
+ + + + + +
+
+ + \ No newline at end of file diff --git a/src/server/user/userController.js b/src/server/user/userController.js index 474787c..7a1f8d6 100644 --- a/src/server/user/userController.js +++ b/src/server/user/userController.js @@ -101,8 +101,8 @@ const UserController = { if (connectionArray[i].username === message.target) { connectionArray[i].socket.emit(message.type, msgString); - Logger(`Emitting message to clientID: ${connectionArray[i].clientID}.`); - Logger(`Message (type / message): ${message.type} / ${msgString}`); + Logger.log(`Emitting message to clientID: ${connectionArray[i].clientID}.`); + Logger.log(`Message (type / message): ${message.type} / ${msgString}`); break; }