From edb50e26190bf38f9117cc9c9bbe137e8a8f5448 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Sat, 1 Jul 2017 13:29:45 +0100 Subject: [PATCH] [client] Bugfix the latest live line refactor. Also send all the right events with the right attachments. --- Nibriboard/ClientFiles/BoardWindow.js | 14 ++++----- Nibriboard/ClientFiles/ClientManager.js | 12 +++++--- Nibriboard/ClientFiles/Pencil.js | 38 ++++++++++++++++++++----- 3 files changed, 45 insertions(+), 19 deletions(-) diff --git a/Nibriboard/ClientFiles/BoardWindow.js b/Nibriboard/ClientFiles/BoardWindow.js index 19567d6..a3567df 100644 --- a/Nibriboard/ClientFiles/BoardWindow.js +++ b/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 diff --git a/Nibriboard/ClientFiles/ClientManager.js b/Nibriboard/ClientFiles/ClientManager.js index 9d608bc..dfaad57 100644 --- a/Nibriboard/ClientFiles/ClientManager.js +++ b/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; diff --git a/Nibriboard/ClientFiles/Pencil.js b/Nibriboard/ClientFiles/Pencil.js index c672bb6..80fcbbe 100644 --- a/Nibriboard/ClientFiles/Pencil.js +++ b/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)); - canvas.addEventListener("mouseup", this.handleMouseUp.bind(this)); + document.addEventListener("mousedown", this.handleMouseDown.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, - LineWidth: this.currentLineWidth, - LineColour: this.currentColour + LineId: this.currentLineId }); + + this.pencilDown = false; + // Reset the current line segments this.currentLineSegments = []; // Regenerate the line id