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

[client] Fix the grid drawing. Hooray\! :D :D :D

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-04-24 21:42:31 +01:00
parent fec2530576
commit bb084d70a4
1 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
Nibriboard/ClientFiles/BoardWindow.js
View file

@ -35,6 +35,8 @@ class BoardWindow extends EventEmitter
this.gridLineWidth = 2; this.gridLineWidth = 2;
this.gridLineColour = "rgba(22, 123, 228, 0.53)"; this.gridLineColour = "rgba(22, 123, 228, 0.53)";
this.primaryGridLineWidth = 4;
this.primaryGridLineColour = "rgba(31, 223, 4, 0.68)";
// --~~~-- // --~~~--
@ -56,6 +58,14 @@ class BoardWindow extends EventEmitter
x: 0, x: 0,
// The y coordinate of the viewport. // The y coordinate of the viewport.
y: 0, y: 0,
// The width of the viewport
get width() {
return canvas.width * 1/this.zoomLevel
},
// The height of the viewport
get height() {
return canvas.height * 1/this.zoomLevel
},
// The zoom level of the viewport. 1 = normal. // The zoom level of the viewport. 1 = normal.
zoomLevel: 1 zoomLevel: 1
}; };
@ -209,24 +219,39 @@ class BoardWindow extends EventEmitter
renderGrid(canvas, context) renderGrid(canvas, context)
{ {
context.save(); context.save();
context.translate(this.viewport.x, this.viewport.y);
context.scale(this.viewport.zoomLevel, this.viewport.zoomLevel); context.scale(this.viewport.zoomLevel, this.viewport.zoomLevel);
context.translate(-this.viewport.x, -this.viewport.y);
context.beginPath();
for(let ax = this.viewport.x + (this.viewport.x % this.gridSize); ax < this.viewport.x + canvas.width; ax += this.gridSize) for(let ax = (this.viewport.x + (this.gridSize - (this.viewport.x % this.gridSize))) - this.gridSize; ax < (this.viewport.x + this.viewport.width); ax += this.gridSize)
{ {
context.beginPath();
context.moveTo(ax - this.viewport.x, 0); context.moveTo(ax - this.viewport.x, 0);
context.lineTo(ax - this.viewport.x, canvas.height); context.lineTo(ax - this.viewport.x, this.viewport.height);
if(Math.round(ax) == 0) {
context.lineWidth = this.primaryGridLineWidth;
context.strokeStyle = this.primaryGridLineColour;
} else {
context.lineWidth = this.gridLineWidth;
context.strokeStyle = this.gridLineColour;
}
context.stroke();
} }
for(let ay = this.viewport.y + (this.viewport.y % this.gridSize); ay < this.viewport.y + canvas.height; ay += this.gridSize) for(let ay = (this.viewport.y + (this.gridSize - (this.viewport.y % this.gridSize))) - this.gridSize; ay < (this.viewport.y + this.viewport.height); ay += this.gridSize)
{ {
context.beginPath();
context.moveTo(0, ay - this.viewport.y); context.moveTo(0, ay - this.viewport.y);
context.lineTo(canvas.width, ay - this.viewport.y); context.lineTo(this.viewport.width, ay - this.viewport.y);
if(Math.round(ay) == 0) {
context.lineWidth = this.primaryGridLineWidth;
context.strokeStyle = this.primaryGridLineColour;
} else {
context.lineWidth = this.gridLineWidth;
context.strokeStyle = this.gridLineColour;
}
context.stroke();
} }
context.lineWidth = this.gridLineWidth;
context.strokeStyle = this.gridLineColour;
context.stroke();
context.restore(); context.restore();
} }
@ -289,9 +314,10 @@ class BoardWindow extends EventEmitter
// Store the viewport information for later // Store the viewport information for later
this.viewportState = event; this.viewportState = event;
this.viewport.x += event.dx; this.viewport.x += event.dx * 1/this.viewport.zoomLevel;
this.viewport.y += event.dy; this.viewport.y += event.dy * 1/this.viewport.zoomLevel;
this.viewport.zoomLevel += event.dz; this.viewport.zoomLevel += event.dz / 1000;
console.debug(`Viewport now at (${this.viewport.x}, ${this.viewport.y}) @ ${this.viewport.zoomLevel}x zoom`);
} }
/** /**