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:
parent
c49f2b2278
commit
edb50e2619
3 changed files with 45 additions and 19 deletions
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue