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

[client] Start adding line simplification support, but we're going to have to update the msbuild config I think.

This commit is contained in:
Starbeamrainbowlabs 2017-11-08 23:09:28 +00:00
parent b135dee0c2
commit d0b0b7c775
3 changed files with 38 additions and 5 deletions

View file

@ -5,6 +5,7 @@ import Vector from './Utilities/Vector';
import Mouse from './Utilities/Mouse'; import Mouse from './Utilities/Mouse';
var cuid = require("cuid"); var cuid = require("cuid");
var simplify_line = require("visvalingam-simplifier").simplify_line;
class Pencil class Pencil
{ {
@ -40,6 +41,9 @@ class Pencil
this.currentLineId = cuid(); this.currentLineId = cuid();
/** Holds the (unsimplified) line segments before the pencil is lifted. */ /** Holds the (unsimplified) line segments before the pencil is lifted. */
this.currentLineSegments = []; this.currentLineSegments = [];
/** Holds the (simplified) line segment befoer the pencil is lifted. */
this.currentSimplifiedLineSegments = [];
// The segments of the (unsimplified) line that haven't yet been sent // The segments of the (unsimplified) line that haven't yet been sent
// to the server. // to the server.
this.unsentSegments = []; this.unsentSegments = [];
@ -120,6 +124,8 @@ class Pencil
this.unsentSegments.push(nextPoint); this.unsentSegments.push(nextPoint);
this.currentLineSegments.push(nextPoint); this.currentLineSegments.push(nextPoint);
this.recalculateSimplifiedLine();
var timeSinceLastPush = new Date() - this.lastServerPush; var timeSinceLastPush = new Date() - this.lastServerPush;
if(timeSinceLastPush > this.pushDelay) if(timeSinceLastPush > this.pushDelay)
this.sendUnsent(); this.sendUnsent();
@ -144,6 +150,7 @@ class Pencil
// Reset the current line segments // Reset the current line segments
this.currentLineSegments = []; this.currentLineSegments = [];
this.currentSimplifiedLineSegments = [];
// Regenerate the line id // Regenerate the line id
this.currentLineId = cuid(); this.currentLineId = cuid();
} }
@ -169,21 +176,29 @@ class Pencil
this.lastServerPush = +new Date(); this.lastServerPush = +new Date();
} }
/**
* Recalculates the simplified line points array.
*/
recalculateSimplifiedLine()
{
this.currentSimplifiedLineSegments = simplify_line(this.currentLineSegments);
}
/** /**
* Renders the line that is currently being drawn to the screen. * Renders the line that is currently being drawn to the screen.
* @param {HTMLCanvasElement} canvas The canvas to draw to. * @param {HTMLCanvasElement} canvas The canvas to draw to.
* @param {CanvasRenderingContext2D} context The rendering context to use to draw to the canvas. * @param {CanvasRenderingContext2D} context The rendering context to use to draw to the canvas.
*/ */
render(canvas, context) { render(canvas, context) {
if(this.currentLineSegments.length == 0) if(this.currentSimplifiedLineSegments.length == 0)
return; return;
context.save(); context.save();
context.beginPath(); context.beginPath();
context.moveTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y); context.moveTo(this.currentSimplifiedLineSegments[0].x, this.currentSimplifiedLineSegments[0].y);
for(let i = 1; i < this.currentLineSegments.length; i++) { for(let i = 1; i < this.currentSimplifiedLineSegments.length; i++) {
context.lineTo(this.currentLineSegments[i].x, this.currentLineSegments[i].y); context.lineTo(this.currentSimplifiedLineSegments[i].x, this.currentSimplifiedLineSegments[i].y);
} }
context.lineWidth = this.currentLineWidth; context.lineWidth = this.currentLineWidth;

View file

@ -83,6 +83,11 @@
"resolved": "https://registry.npmjs.org/dprop/-/dprop-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dprop/-/dprop-1.0.0.tgz",
"integrity": "sha1-X0WmCmD6OsHQ9otrQ1gx8v9mVGg=" "integrity": "sha1-X0WmCmD6OsHQ9otrQ1gx8v9mVGg="
}, },
"es6-event-emitter": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/es6-event-emitter/-/es6-event-emitter-1.10.2.tgz",
"integrity": "sha1-j3a4tlj4HnJcIFDPGQleBUinSyk="
},
"esprima": { "esprima": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
@ -146,6 +151,9 @@
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz", "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
"integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo=" "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
}, },
"keycodes": {
"version": "github:sbrl/keycodes#2effbae493dc5aa4028fd8d04738c54345f60ffc"
},
"mouse-event-offset": { "mouse-event-offset": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/mouse-event-offset/-/mouse-event-offset-3.0.2.tgz", "resolved": "https://registry.npmjs.org/mouse-event-offset/-/mouse-event-offset-3.0.2.tgz",
@ -355,6 +363,15 @@
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true "dev": true
}, },
"visvalingam-simplifier": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/visvalingam-simplifier/-/visvalingam-simplifier-0.1.3.tgz",
"integrity": "sha512-OB9e+m6RB+W7Gjdp3AoOP7QNuc1tgCMvaHaM4RXAsLuFCd6uPTSTWOb9hlMmIZxzC3ic0YyeV1cmnyfEX+s8UA==",
"requires": {
"es6-event-emitter": "1.10.2",
"keycodes": "github:sbrl/keycodes#2effbae493dc5aa4028fd8d04738c54345f60ffc"
}
},
"xtend": { "xtend": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",

View file

@ -10,8 +10,9 @@
"event-emitter-es6": "^1.1.5", "event-emitter-es6": "^1.1.5",
"favicon-notification": "^0.1.4", "favicon-notification": "^0.1.4",
"fps-indicator": "^1.0.2", "fps-indicator": "^1.0.2",
"keycode": "^2.1.8",
"pan-zoom": "^2.0.0", "pan-zoom": "^2.0.0",
"keycode": "^2.1.8" "visvalingam-simplifier": "^0.1.3"
}, },
"devDependencies": { "devDependencies": {
"acorn": "^4.0.11", "acorn": "^4.0.11",