[client] Bugfix the latest live line refactor.

Also send all the right events with the right attachments.

Nibriboard/ClientFiles/BoardWindow.js

@@ -8,7 +8,7 @@ window.panzoom = require("pan-zoom");
 // Our files
 import RippleLink from './RippleLink';
 import CursorSyncer from './CursorSyncer';
-import OtherClient from './OtherClient';
+import ClientManager from './ClientManager';
 import Pencil from './Pencil';
 import { get, clamp } from './Utilities';
 import Keyboard from './Utilities/Keyboard';
@@ -85,9 +85,6 @@ class BoardWindow extends EventEmitter
 		this.canvas = canvas;
 		this.context = canvas.getContext("2d");
 		
-		// Create a map to store information about other clients in
-		this.otherClients = new Map();
-		
 		/**
 		 * The current state of the keyboard.
 		 * @type {Keyboard}
@@ -151,9 +148,6 @@ class BoardWindow extends EventEmitter
 		
 		// --~~~--
 		
-		// Setup a bunch of event listeners
-		// The ones that depend on the RippleLink will get setup later
-		
 		// Make the canvas track the window size
 		this.trackWindowSize();
 	}
@@ -256,7 +250,9 @@ class BoardWindow extends EventEmitter
 		if(typeof this.chunkCache != "undefined" && this.gridSize != -1)
 			this.chunkCache.renderVisible(this.viewport, canvas, context);
 		
-		this.renderOthers(canvas, context);
+		if(typeof this.otherClients != "undefined")
+			this.otherClients.render(canvas, context);
+		
 		// Render the currently active line
 		if(typeof this.pencil !== "undefined")
 			this.pencil.render(canvas, context);
@@ -361,6 +357,8 @@ class BoardWindow extends EventEmitter
 		this.pencil = new Pencil(this.rippleLink, this, this.canvas);
 		// The cache for the chunks
 		this.chunkCache = new ChunkCache(this);
+		// Create a new data structure to store client information in
+		this.otherClients = new ClientManager(this.rippleLink);
 		
 		// Land on a default plane
 		// future ask the user which plane they want to join

Nibriboard/ClientFiles/ClientManager.js

@@ -8,16 +8,18 @@ class ClientManager extends EventEmitter
 {
 	constructor(inRippleLink)
 	{
+		super();
+		
 		this.otherClients = new Map();
 		
 		// Handle other clients' state updates
-		this.rippleLink.on("ClientStates", this.handlePeerUpdates.bind(this));
+		inRippleLink.on("ClientStates", this.handlePeerUpdates.bind(this));
 		// Handle line start events from other clients
-		this.rippleLink.on("LineStartReflection", this.handleOtherLineStart.bind(this));
+		inRippleLink.on("LineStartReflection", this.handleOtherLineStart.bind(this));
 		// Handle line part events from other clients
-		this.rippleLink.on("LinePartReflection", this.handleOtherLinePart.bind(this));
+		inRippleLink.on("LinePartReflection", this.handleOtherLinePart.bind(this));
 		// Handle line complete events from other clients
-		this.rippleLink.on("LineCompleteReflection", this.handleOtherLineComplete.bind(this));
+		inRippleLink.on("LineCompleteReflection", this.handleOtherLineComplete.bind(this));
 	}
 	
 	render(canvas, context)
@@ -117,3 +119,5 @@ class ClientManager extends EventEmitter
 	}
 	
 }
+
+export default ClientManager;

Nibriboard/ClientFiles/Pencil.js

@@ -13,7 +13,7 @@ class Pencil
 	 * @param	{RippleLink}	inRippleLink	The connection to the nibri server.
 	 * @return	{Pencil}		A new Pencil class instance.
 	 */
-	constructor(inRippleLink, inBoardWindow, canvas)
+	constructor(inRippleLink, inBoardWindow, inCanvas)
 	{
 		this.boardWindow = inBoardWindow;
 		
@@ -47,12 +47,17 @@ class Pencil
 		// The time of the last push of the line to the server.
 		this.lastServerPush = 0;
 		
+		this.canvas = inCanvas;
+		
 		// Event Listeners
-		canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+		document.addEventListener("mousedown", this.handleMouseDown.bind(this));
-		canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
+		document.addEventListener("mousemove", this.handleMouseMove.bind(this));
+		document.addEventListener("mouseup", this.handleMouseUp.bind(this));
 		
 		this.setupInterfaceBindings(this.boardWindow.interface);
 		
+		// Whether the pencil is on the board at the moment.
+		this.pencilDown = false;
 	}
 	
 	setupInterfaceBindings(inInterface)
@@ -72,13 +77,31 @@ class Pencil
 		}).bind(this))
 	}
 	
+	handleMouseDown(event) {
+		if(event.target != this.canvas)
+			return;
+		
+		this.pencilDown = true;
+		
+		this.rippleLink.send({
+			Event: "LineStart",
+			LineId: this.currentLineId,
+			LineColour: this.currentColour,
+			LineWidth: this.currentLineWidth
+		});
+	}
+	
 	handleMouseMove(event) {
+		// Don't handle mouse movements on anything other than the canvas itself
+		if(event.target != this.canvas)
+			return;
+		
 		// Don't do anything at all if the brush tool isn't selected
 		if(this.boardWindow.interface.currentTool !== "brush")
 			return;
 		
 		// Don't draw anything if the left mouse button isn't down
-		if(!this.mouse.leftDown)
+		if(!this.mouse.leftDown || !this.pencilDown)
 			return;
 		// Oh and don't bother drawing anything if the control key is held down
 		// either - that indicates that we're in panning mode
@@ -112,10 +135,11 @@ class Pencil
 		// Tell the server that the line is complete
 		this.rippleLink.send({
 			Event: "LineComplete",
-			LineId: this.currentLineId,
+			LineId: this.currentLineId
-			LineWidth: this.currentLineWidth,
-			LineColour: this.currentColour
 		});
+		
+		this.pencilDown = false;
+		
 		// Reset the current line segments
 		this.currentLineSegments = [];
 		// Regenerate the line id