sbrl-github
/
Nibriboard
mirror of https://github.com/sbrl/Nibriboard.git
1
0
Fork 0
Code

[client] Finish refacotring the brush indicator with weird ellipse stuff :P

This commit is contained in:
Starbeamrainbowlabs 2017-10-29 11:29:40 +00:00
parent 1498626823
commit 11c201e882
6 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Nibriboard/ClientFiles/BoardWindow.js
View File

@ -103,10 +103,10 @@ class BoardWindow extends EventEmitter
this.interface.seekColour("forwards"); this.interface.seekColour("forwards");
}).bind(this)); }).bind(this));
this.keyboard.on("keyup-up", (function(event) { this.keyboard.on("keyup-up", (function(event) {
this.interface.updateBrushWidth(this.interface.currentBrushWidth + 2, true); this.interface.updateBrushWidth(this.interface.brushIndicator.width + 2, true);
}).bind(this)); }).bind(this));
this.keyboard.on("keyup-down", (function(event) { this.keyboard.on("keyup-down", (function(event) {
this.interface.updateBrushWidth(this.interface.currentBrushWidth - 2, true); this.interface.updateBrushWidth(this.interface.brushIndicator.width - 2, true);
}).bind(this)); }).bind(this));
this.keyboard.on("keyup-c", (function(event) { this.keyboard.on("keyup-c", (function(event) {
this.chunkCache.showRenderedChunks = !this.chunkCache.showRenderedChunks; this.chunkCache.showRenderedChunks = !this.chunkCache.showRenderedChunks;

9
Nibriboard/ClientFiles/BrushIndicator.js
View File

@ -7,6 +7,8 @@ class BrushIndicator
this.canvas = canvas; this.canvas = canvas;
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
this.canvas.height = this.canvas.width = 48;
this.width = 10; this.width = 10;
this.colour = "red"; this.colour = "red";
} }
@ -19,11 +21,10 @@ class BrushIndicator
); );
this.context.beginPath(); this.context.beginPath();
this.context.arc( this.context.ellipse(
this.canvas.width / 2, this.canvas.height / 2, this.canvas.width / 2, this.canvas.height / 2,
this.width / 2, this.width / 3, this.width / 3,
0, Math.PI * 2, 0, 0, Math.PI * 2, false
false
); );
this.context.fillStyle = this.colour; this.context.fillStyle = this.colour;
this.context.fill(); this.context.fill();

2
Nibriboard/ClientFiles/Interface.js
View File

@ -2,6 +2,8 @@
window.EventEmitter = require("event-emitter-es6"); window.EventEmitter = require("event-emitter-es6");
import BrushIndicator from './BrushIndicator.js';
class Interface extends EventEmitter class Interface extends EventEmitter
{ {
constructor(inBoardWindow, inSidebar, inDebugDisplay) constructor(inBoardWindow, inSidebar, inDebugDisplay)

19
Nibriboard/ClientFiles/Nibri.css
View File

@ -74,22 +74,15 @@ hr
.brush-settings .brush-settings
{ {
display: flex; flex-direction: column; display: flex; flex-direction: row;
min-height: 5em; min-height: 5em;
} }
.brush-preview-display .brush-indicator { flex: 0; }
{ .brush-width-controls
flex: 1; {
} flex: 3;
margin-top: 2em;
.brush-indicator
{
position: relative;
top: 50%; left: 50%; transform: translate(-50%, -50%);
margin: 1em 0 0 0;
border-radius: 50%;
} }
.tool-selector .tool-selector

2
Nibriboard/ClientFiles/Pencil.js
View File

@ -70,7 +70,7 @@ class Pencil
}).bind(this)) }).bind(this))
// Look up the initial line with in the interface // Look up the initial line with in the interface
this.currentLineWidth = inInterface.currentBrushWidth; this.currentLineWidth = inInterface.brushIndicator.width;
// Listen for future updates fromt he interface // Listen for future updates fromt he interface
inInterface.on("brushwidthchange", (function(event) { inInterface.on("brushwidthchange", (function(event) {
this.currentLineWidth = event.newWidth; this.currentLineWidth = event.newWidth;

2
Nibriboard/lib/GlidingSquirrel

@ -1 +1 @@
Subproject commit 62f67e924c652d84956ed2bbf87588fd5ae963a9 Subproject commit 1e7878c76032ab87bbf2829c8be2f43ff85f5660