mirror of
https://github.com/sbrl/Nibriboard.git
synced 2018-01-10 21:33:49 +00:00
Implement more of the pencil
This commit is contained in:
parent
be15bf85cb
commit
89b576260f
3 changed files with 93 additions and 3 deletions
30
Nibriboard/ClientFiles/.tern-project
Normal file
30
Nibriboard/ClientFiles/.tern-project
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"ecmaVersion": "7",
|
||||||
|
"libs": [
|
||||||
|
"browser"
|
||||||
|
],
|
||||||
|
"loadEagerly": [
|
||||||
|
"*.js",
|
||||||
|
"Utilities/*.js"
|
||||||
|
],
|
||||||
|
"dontLoad": [
|
||||||
|
"node_module/**",
|
||||||
|
"NibriClient.js"
|
||||||
|
],
|
||||||
|
"plugins": {
|
||||||
|
"doc_comment": true,
|
||||||
|
"node_resolve": {},
|
||||||
|
"modules": {
|
||||||
|
"dontLoad": "",
|
||||||
|
"load": "",
|
||||||
|
"modules": ""
|
||||||
|
},
|
||||||
|
"es_modules": {},
|
||||||
|
"requirejs": {
|
||||||
|
"baseURL": "",
|
||||||
|
"paths": "",
|
||||||
|
"override": ""
|
||||||
|
},
|
||||||
|
"commonjs": {}
|
||||||
|
}
|
||||||
|
}
|
|
@ -212,7 +212,10 @@ class BoardWindow extends EventEmitter
|
||||||
* dragging and zooming of the whiteboard.
|
* dragging and zooming of the whiteboard.
|
||||||
*/
|
*/
|
||||||
handleCanvasMovement(event) {
|
handleCanvasMovement(event) {
|
||||||
this.viewportState = event; // Store the viewport information for later
|
// Store the viewport information for later
|
||||||
|
this.viewportState = event;
|
||||||
|
// Re-emit the movement information for interested parties
|
||||||
|
this.emit("movement", event);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleHandshakeResponse(message) {
|
handleHandshakeResponse(message) {
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
import Mouse from './Mouse';
|
import Mouse from './Utilities/Mouse';
|
||||||
|
import Vector from './Utilities/Vector';
|
||||||
|
|
||||||
|
var cuid = require("cuid");
|
||||||
|
|
||||||
class Pencil
|
class Pencil
|
||||||
{
|
{
|
||||||
|
@ -9,8 +12,15 @@ class Pencil
|
||||||
* @param {RippleLink} inRippleLink The connection to the nibri server.
|
* @param {RippleLink} inRippleLink The connection to the nibri server.
|
||||||
* @return {Pencil} A new Pencil class instance.
|
* @return {Pencil} A new Pencil class instance.
|
||||||
*/
|
*/
|
||||||
constructor(inRippleLink)
|
constructor(inRippleLink, inBoardWindow)
|
||||||
{
|
{
|
||||||
|
// The time, in milliseconds, between pushes of the line to the server.
|
||||||
|
this.pushDelay = 200;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The ripple link connection to the server.
|
||||||
|
* @type {RippleLink}
|
||||||
|
*/
|
||||||
this.rippleLink = inRippleLink;
|
this.rippleLink = inRippleLink;
|
||||||
/**
|
/**
|
||||||
* The mouse information.
|
* The mouse information.
|
||||||
|
@ -18,12 +28,59 @@ class Pencil
|
||||||
*/
|
*/
|
||||||
this.mouse = new Mouse();
|
this.mouse = new Mouse();
|
||||||
|
|
||||||
|
// The id of the current line-in-progress.
|
||||||
|
this.currentLineId = cuid();
|
||||||
|
// Holds the (unsimplified) line segments before the pencil is lifted.
|
||||||
|
this.currentLineSegments = [];
|
||||||
|
// The segments of the (unsimplified) line that haven't yet been sent
|
||||||
|
// to the server.
|
||||||
|
this.unsentSegments = [];
|
||||||
|
|
||||||
|
// The time of the last push of the line to the server.
|
||||||
|
this.lastServerPush = 0;
|
||||||
|
|
||||||
|
document.addEventListener("mouseDown", this.handleMouseDown.bind(this));
|
||||||
document.addEventListener("mouseMove", this.handleMouseMove.bind(this));
|
document.addEventListener("mouseMove", this.handleMouseMove.bind(this));
|
||||||
|
document.addEventListener("mouseUp", this.handleMouseUp.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseDown(event) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMouseMove(event) {
|
handleMouseMove(event) {
|
||||||
|
var nextPoint = new Vector(event.clientX, event.clientY);
|
||||||
|
this.unsentSegments.push(nextPoint);
|
||||||
|
this.currentLineSegments.push(nextPoint);
|
||||||
|
|
||||||
|
if(new Date() - this.lastServerPush > this.pushDelay)
|
||||||
|
sendUnsent();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseUp(event) {
|
||||||
|
sendUnsent();
|
||||||
|
// Reset the currently line segments
|
||||||
|
this.currentLineSegments = [];
|
||||||
|
// Regenerate the line id
|
||||||
|
this.currentLineId = cuid();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send the unsent segments of the line to the server and reset the line
|
||||||
|
* unsent segments buffer.
|
||||||
|
*/
|
||||||
|
sendUnsent() {
|
||||||
|
// It's time for another push of the line to the server
|
||||||
|
this.rippleLink.send({
|
||||||
|
Event: "LinePart",
|
||||||
|
Points: this.unsentSegments,
|
||||||
|
LineId: this.currentLineId
|
||||||
|
});
|
||||||
|
// Reset the unsent segments buffer
|
||||||
|
this.unsentSegments = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
render(canvas, context) {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue