1
0
Fork 0
mirror of https://github.com/sbrl/Nibriboard.git synced 2018-01-10 21:33:49 +00:00

[client] Bugfix the latest live line refactor.

Also send all the right events with the right attachments.
This commit is contained in:
Starbeamrainbowlabs 2017-07-01 13:29:45 +01:00
parent c49f2b2278
commit edb50e2619
3 changed files with 45 additions and 19 deletions

View file

@ -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

View file

@ -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;

View file

@ -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