mirror of
https://github.com/sbrl/Nibriboard.git
synced 2018-01-10 21:33:49 +00:00
[client] Finish refacotring the brush indicator with weird ellipse stuff :P
This commit is contained in:
parent
1498626823
commit
11c201e882
6 changed files with 17 additions and 21 deletions
|
@ -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;
|
||||||
|
|
|
@ -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,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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 62f67e924c652d84956ed2bbf87588fd5ae963a9
|
Subproject commit 1e7878c76032ab87bbf2829c8be2f43ff85f5660
|
Loading…
Reference in a new issue