Fill out more of the live line system.

Nibriboard/Client/Messages/LineCompleteMessage.cs

@@ -0,0 +1,23 @@
+using System;
+namespace Nibriboard.Client.Messages
+{
+	public class LineCompleteMessage : Message
+	{
+		/// <summary>
+		/// The id of the line to complete
+		/// </summary>
+		public Guid LineId;
+		/// <summary>
+		/// The colour of the line. May be any valid colour accepted by the HTML5 Canvas API.
+		/// </summary>
+		public string LineColour;
+		/// <summary>
+		/// The width of the line, in pixels.
+		/// </summary>
+		public int LineWidth;
+
+		public LineCompleteMessage()
+		{
+		}
+	}
+}

Nibriboard/ClientFiles/BoardWindow.js

@@ -10,6 +10,7 @@ import RippleLink from './RippleLink';
 import ViewportSyncer from './ViewportSyncer';
 import OtherClient from './OtherClient';
 import { get } from './Utilities';
+import Keyboard from './Utilities/Keyboard';
 
 class BoardWindow extends EventEmitter
 {
@@ -63,6 +64,8 @@ class BoardWindow extends EventEmitter
 		// Create a map to store information about other clients in
 		this.otherClients = new Map();
 		
+		this.keyboard = new Keyboard();
+		
 		// --~~~--
 		
 		// Setup the favicon thingy
@@ -222,6 +225,10 @@ class BoardWindow extends EventEmitter
 	 * dragging and zooming of the whiteboard.
 	 */
 	handleCanvasMovement(event) {
+		// Don't bother processing it if it's a mouse / touch interaction and
+		// the control key isn't pressed
+		if([ "mouse", "touch" ].contains(event.type) && !this.DownKeys.contains(17))
+			return;
 		// Store the viewport information for later
 		this.viewportState = event;
 		

Nibriboard/ClientFiles/Pencil.js

@@ -14,9 +14,16 @@ class Pencil
 	 */
 	constructor(inRippleLink, inBoardWindow)
 	{
+		this.boardWindow = inBoardWindow;
+		
 		// The time, in milliseconds, between pushes of the line to the server.
 		this.pushDelay = 200;
 		
+		// The current line width
+		this.currentLineWidth = 3;
+		// The current line colour
+		this.currentColour = "black";
+		
 		/**
 		 * The ripple link connection to the server.
 		 * @type {RippleLink}
@@ -44,12 +51,12 @@ class Pencil
 		document.addEventListener("mouseUp", this.handleMouseUp.bind(this));
 	}
 	
-	handleMouseDown(event) {
-		
-	}
-	
 	handleMouseMove(event) {
-		var nextPoint = new Vector(event.clientX, event.clientY);
+		// todo add zoom support here
+		var nextPoint = new Vector(
+			event.clientX + this.boardWindow.viewport.x,
+			event.clientY + this.boardWindow.viewport.y
+		);
 		this.unsentSegments.push(nextPoint);
 		this.currentLineSegments.push(nextPoint);
 		
@@ -59,7 +66,7 @@ class Pencil
 	
 	handleMouseUp(event) {
 		sendUnsent();
-		// Reset the currently line segments
+		// Reset the current line segments
 		this.currentLineSegments = [];
 		// Regenerate the line id
 		this.currentLineId = cuid();
@@ -81,6 +88,21 @@ class Pencil
 	}
 	
 	render(canvas, context) {
+		if(this.currentLineSegments.length == 0)
+			return;
 		
+		context.save();
+		
+		context.beginPath();
+		context.lineTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y);
+		for(let point of this.currentLineSegments) {
+			context.lineTo(point.x, point.y);
+		}
+		context.lineWidth = this.currentColour;
+		context.strokeStyle = this.currentColour;
+		
+		context.restore();
 	}
 }
+
+export default Pencil;

Nibriboard/ClientFiles/Utilities/Keyboard.js

@@ -7,19 +7,33 @@ class Keyboard
 {
 	constructor()
 	{
+		/**
+		 * The keyCodes of the keyboard keys that are currently pressed down.
+		 * @type {[number]}
+		 */
 		this.DownKeys = [];
 		
 		document.addEventListener("keydown", this.handleKeyDown.bind(this));
 		document.addEventListener("keyup", this.handleKeyUp.bind(this));
 	}
 	
+	/**
+	 * Handles keydown events.
+	 * @param  {KeyboardEvent} event The keyboard event to handle.
+	 */
 	handleKeyDown(event) {
 		if(!this.DownKeys.contains(event.keyCode))
 			this.DownKeys.push(event.keyCode);
 	}
 	
+	/**
+	 * Handles keyup events.
+	 * @param  {KeyboardEvent} event The keyboard event to handle.
+	 */
 	handleKeyUp(event) {
 		if(this.DownKeys.indexOf(event.keyCode) !== -1)
 			this.DownKeys.splice(this.DownKeys.indexOf(event.keyCode), 1);
 	}
 }
+
+export default Keyboard;

Nibriboard/Nibriboard.csproj

@@ -97,6 +97,7 @@
     <Compile Include="Client\ChunkCache.cs" />
     <Compile Include="Client\Messages\LinePartMessage.cs" />
     <Compile Include="Client\LineIncubator.cs" />
+    <Compile Include="Client\Messages\LineCompleteMessage.cs" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="ClientFiles\index.html" />