109 lines
2.7 KiB
JavaScript
109 lines
2.7 KiB
JavaScript
"use strict";
|
|
|
|
import Mouse from './Utilities/Mouse';
|
|
import Vector from './Utilities/Vector';
|
|
|
|
var cuid = require("cuid");
|
|
|
|
class Pencil
|
|
{
|
|
/**
|
|
* Creates a new Pencil class instance.
|
|
* @param {RippleLink} inRippleLink The connection to the nibri server.
|
|
* @return {Pencil} A new Pencil class instance.
|
|
*/
|
|
constructor(inRippleLink, inBoardWindow)
|
|
{
|
|
this.boardWindow = inBoardWindow;
|
|
|
|
// The time, in milliseconds, between pushes of the line to the server.
|
|
this.pushDelay = 200;
|
|
|
|
// The current line width
|
|
this.currentLineWidth = 3;
|
|
// The current line colour
|
|
this.currentColour = "black";
|
|
|
|
/**
|
|
* The ripple link connection to the server.
|
|
* @type {RippleLink}
|
|
*/
|
|
this.rippleLink = inRippleLink;
|
|
/**
|
|
* The mouse information.
|
|
* @type {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("mouseUp", this.handleMouseUp.bind(this));
|
|
}
|
|
|
|
handleMouseMove(event) {
|
|
// todo add zoom support here
|
|
var nextPoint = new Vector(
|
|
event.clientX + this.boardWindow.viewport.x,
|
|
event.clientY + this.boardWindow.viewport.y
|
|
);
|
|
this.unsentSegments.push(nextPoint);
|
|
this.currentLineSegments.push(nextPoint);
|
|
|
|
if(new Date() - this.lastServerPush > this.pushDelay)
|
|
sendUnsent();
|
|
}
|
|
|
|
handleMouseUp(event) {
|
|
sendUnsent();
|
|
// Reset the current 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) {
|
|
if(this.currentLineSegments.length == 0)
|
|
return;
|
|
|
|
context.save();
|
|
|
|
context.beginPath();
|
|
context.lineTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y);
|
|
for(let point of this.currentLineSegments) {
|
|
context.lineTo(point.x, point.y);
|
|
}
|
|
context.lineWidth = this.currentColour;
|
|
context.strokeStyle = this.currentColour;
|
|
|
|
context.restore();
|
|
}
|
|
}
|
|
|
|
export default Pencil;
|