2017-03-28 19:25:54 +00:00
|
|
|
"use strict";
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
import Vector from './Utilities/Vector';
|
|
|
|
|
2017-04-15 15:20:30 +00:00
|
|
|
import Mouse from './Utilities/Mouse';
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
var cuid = require("cuid");
|
2017-03-28 19:25:54 +00:00
|
|
|
|
|
|
|
class Pencil
|
|
|
|
{
|
|
|
|
/**
|
|
|
|
* Creates a new Pencil class instance.
|
|
|
|
* @param {RippleLink} inRippleLink The connection to the nibri server.
|
|
|
|
* @return {Pencil} A new Pencil class instance.
|
|
|
|
*/
|
2017-07-01 12:29:45 +00:00
|
|
|
constructor(inRippleLink, inBoardWindow, inCanvas)
|
2017-03-28 19:25:54 +00:00
|
|
|
{
|
2017-04-15 12:13:07 +00:00
|
|
|
this.boardWindow = inBoardWindow;
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
// The time, in milliseconds, between pushes of the line to the server.
|
|
|
|
this.pushDelay = 200;
|
|
|
|
|
2017-04-15 12:13:07 +00:00
|
|
|
// The current line width
|
|
|
|
this.currentLineWidth = 3;
|
|
|
|
// The current line colour
|
|
|
|
this.currentColour = "black";
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
/**
|
|
|
|
* The ripple link connection to the server.
|
|
|
|
* @type {RippleLink}
|
|
|
|
*/
|
2017-03-28 19:25:54 +00:00
|
|
|
this.rippleLink = inRippleLink;
|
|
|
|
/**
|
|
|
|
* The mouse information.
|
|
|
|
* @type {Mouse}
|
|
|
|
*/
|
|
|
|
this.mouse = new Mouse();
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
// 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 = [];
|
2017-03-28 19:59:06 +00:00
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
// The time of the last push of the line to the server.
|
|
|
|
this.lastServerPush = 0;
|
2017-03-28 19:59:06 +00:00
|
|
|
|
2017-07-01 12:29:45 +00:00
|
|
|
this.canvas = inCanvas;
|
|
|
|
|
2017-04-28 11:42:34 +00:00
|
|
|
// Event Listeners
|
2017-07-01 12:29:45 +00:00
|
|
|
document.addEventListener("mousedown", this.handleMouseDown.bind(this));
|
|
|
|
document.addEventListener("mousemove", this.handleMouseMove.bind(this));
|
|
|
|
document.addEventListener("mouseup", this.handleMouseUp.bind(this));
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-06-12 17:15:49 +00:00
|
|
|
this.setupInterfaceBindings(this.boardWindow.interface);
|
|
|
|
|
2017-07-01 12:29:45 +00:00
|
|
|
// Whether the pencil is on the board at the moment.
|
|
|
|
this.pencilDown = false;
|
2017-06-12 17:15:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setupInterfaceBindings(inInterface)
|
|
|
|
{
|
|
|
|
// Snag the initial colour from the interface
|
|
|
|
this.currentColour = inInterface.currentColour;
|
|
|
|
// Listen for future colour updates
|
|
|
|
inInterface.on("colourchange", (function(event) {
|
2017-04-28 11:42:34 +00:00
|
|
|
this.currentColour = event.newColour;
|
|
|
|
}).bind(this))
|
2017-06-12 17:15:49 +00:00
|
|
|
|
|
|
|
// Look up the initial line with in the interface
|
2017-10-29 11:29:40 +00:00
|
|
|
this.currentLineWidth = inInterface.brushIndicator.width;
|
2017-06-12 17:15:49 +00:00
|
|
|
// Listen for future updates fromt he interface
|
|
|
|
inInterface.on("brushwidthchange", (function(event) {
|
|
|
|
this.currentLineWidth = event.newWidth;
|
|
|
|
}).bind(this))
|
2017-04-14 19:22:01 +00:00
|
|
|
}
|
|
|
|
|
2017-07-01 12:29:45 +00:00
|
|
|
handleMouseDown(event) {
|
|
|
|
if(event.target != this.canvas)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.pencilDown = true;
|
|
|
|
|
2017-07-01 21:20:48 +00:00
|
|
|
console.log(`Starting line with id ${this.currentLineId}.`);
|
|
|
|
|
2017-07-01 12:29:45 +00:00
|
|
|
this.rippleLink.send({
|
|
|
|
Event: "LineStart",
|
|
|
|
LineId: this.currentLineId,
|
|
|
|
LineColour: this.currentColour,
|
|
|
|
LineWidth: this.currentLineWidth
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-03-28 19:25:54 +00:00
|
|
|
handleMouseMove(event) {
|
2017-07-01 12:29:45 +00:00
|
|
|
// Don't handle mouse movements on anything other than the canvas itself
|
|
|
|
if(event.target != this.canvas)
|
|
|
|
return;
|
|
|
|
|
2017-06-26 15:57:26 +00:00
|
|
|
// Don't do anything at all if the brush tool isn't selected
|
|
|
|
if(this.boardWindow.interface.currentTool !== "brush")
|
|
|
|
return;
|
2017-04-16 15:25:32 +00:00
|
|
|
|
|
|
|
// Don't draw anything if the left mouse button isn't down
|
2017-07-01 12:29:45 +00:00
|
|
|
if(!this.mouse.leftDown || !this.pencilDown)
|
2017-04-16 15:25:32 +00:00
|
|
|
return;
|
2017-04-24 20:49:07 +00:00
|
|
|
// Oh and don't bother drawing anything if the control key is held down
|
|
|
|
// either - that indicates that we're in panning mode
|
|
|
|
// todo Create a tools systme where you can select a panning tool
|
|
|
|
// too / instead...?
|
|
|
|
if(this.boardWindow.keyboard.DownKeys.includes(17))
|
|
|
|
return;
|
2017-04-16 15:25:32 +00:00
|
|
|
|
2017-04-28 17:13:41 +00:00
|
|
|
// The server only supports ints atm, so we have to round here :-(
|
2017-04-15 12:13:07 +00:00
|
|
|
var nextPoint = new Vector(
|
2017-06-12 18:13:22 +00:00
|
|
|
Math.floor((event.clientX / this.boardWindow.viewport.zoomLevel) + this.boardWindow.viewport.x),
|
|
|
|
Math.floor((event.clientY / this.boardWindow.viewport.zoomLevel) + this.boardWindow.viewport.y)
|
2017-04-15 12:13:07 +00:00
|
|
|
);
|
2017-04-14 19:22:01 +00:00
|
|
|
this.unsentSegments.push(nextPoint);
|
|
|
|
this.currentLineSegments.push(nextPoint);
|
|
|
|
|
2017-04-23 17:16:18 +00:00
|
|
|
var timeSinceLastPush = new Date() - this.lastServerPush;
|
|
|
|
if(timeSinceLastPush > this.pushDelay)
|
2017-04-16 15:51:52 +00:00
|
|
|
this.sendUnsent();
|
2017-04-14 19:22:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
handleMouseUp(event) {
|
2017-06-26 15:57:26 +00:00
|
|
|
// Don't do anything at all if the brush tool isn't selected
|
|
|
|
if(this.boardWindow.interface.currentTool !== "brush")
|
|
|
|
return;
|
2017-04-24 20:49:07 +00:00
|
|
|
// Ignore it if the ctrl key is held down - see above
|
|
|
|
if(this.boardWindow.keyboard.DownKeys.includes(17))
|
|
|
|
return;
|
|
|
|
|
2017-04-16 15:51:52 +00:00
|
|
|
this.sendUnsent();
|
2017-04-15 15:20:30 +00:00
|
|
|
// Tell the server that the line is complete
|
|
|
|
this.rippleLink.send({
|
|
|
|
Event: "LineComplete",
|
2017-07-01 12:29:45 +00:00
|
|
|
LineId: this.currentLineId
|
2017-04-15 15:20:30 +00:00
|
|
|
});
|
2017-07-01 12:29:45 +00:00
|
|
|
|
|
|
|
this.pencilDown = false;
|
|
|
|
|
2017-04-15 12:13:07 +00:00
|
|
|
// Reset the current line segments
|
2017-04-14 19:22:01 +00:00
|
|
|
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() {
|
2017-04-23 17:16:18 +00:00
|
|
|
// Don't bother if there aren't any segments to push
|
|
|
|
if(this.unsentSegments.length == 0)
|
|
|
|
return;
|
|
|
|
|
2017-04-14 19:22:01 +00:00
|
|
|
// 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 = [];
|
2017-04-23 17:16:18 +00:00
|
|
|
// Update the time we last pushed to the server
|
|
|
|
this.lastServerPush = +new Date();
|
2017-04-14 19:22:01 +00:00
|
|
|
}
|
|
|
|
|
2017-04-15 15:20:30 +00:00
|
|
|
/**
|
|
|
|
* Renders the line that is currently being drawn to the screen.
|
|
|
|
* @param {HTMLCanvasElement} canvas The canvas to draw to.
|
|
|
|
* @param {CanvasRenderingContext2D} context The rendering context to use to draw to the canvas.
|
|
|
|
*/
|
2017-06-12 19:46:50 +00:00
|
|
|
render(canvas, context) {
|
2017-04-15 12:13:07 +00:00
|
|
|
if(this.currentLineSegments.length == 0)
|
|
|
|
return;
|
|
|
|
|
|
|
|
context.save();
|
2017-03-28 19:25:54 +00:00
|
|
|
|
2017-04-15 12:13:07 +00:00
|
|
|
context.beginPath();
|
2017-06-12 18:53:05 +00:00
|
|
|
context.moveTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y);
|
|
|
|
for(let i = 1; i < this.currentLineSegments.length; i++) {
|
|
|
|
context.lineTo(this.currentLineSegments[i].x, this.currentLineSegments[i].y);
|
2017-04-15 12:13:07 +00:00
|
|
|
}
|
2017-06-12 18:53:05 +00:00
|
|
|
|
|
|
|
context.lineWidth = this.currentLineWidth;
|
2017-04-15 12:13:07 +00:00
|
|
|
context.strokeStyle = this.currentColour;
|
2017-06-12 18:53:05 +00:00
|
|
|
context.lineCap = "round";
|
|
|
|
context.lineJoin = "round";
|
|
|
|
context.stroke();
|
2017-04-15 12:13:07 +00:00
|
|
|
|
|
|
|
context.restore();
|
2017-03-28 19:25:54 +00:00
|
|
|
}
|
|
|
|
}
|
2017-04-15 12:13:07 +00:00
|
|
|
|
|
|
|
export default Pencil;
|