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");
|
||||
}).bind(this));
|
||||
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));
|
||||
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));
|
||||
this.keyboard.on("keyup-c", (function(event) {
|
||||
this.chunkCache.showRenderedChunks = !this.chunkCache.showRenderedChunks;
|
||||
|
|
|
@ -7,6 +7,8 @@ class BrushIndicator
|
|||
this.canvas = canvas;
|
||||
this.context = canvas.getContext("2d");
|
||||
|
||||
this.canvas.height = this.canvas.width = 48;
|
||||
|
||||
this.width = 10;
|
||||
this.colour = "red";
|
||||
}
|
||||
|
@ -19,11 +21,10 @@ class BrushIndicator
|
|||
);
|
||||
|
||||
this.context.beginPath();
|
||||
this.context.arc(
|
||||
this.context.ellipse(
|
||||
this.canvas.width / 2, this.canvas.height / 2,
|
||||
this.width / 2,
|
||||
0, Math.PI * 2,
|
||||
false
|
||||
this.width / 3, this.width / 3,
|
||||
0, 0, Math.PI * 2, false
|
||||
);
|
||||
this.context.fillStyle = this.colour;
|
||||
this.context.fill();
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
window.EventEmitter = require("event-emitter-es6");
|
||||
|
||||
import BrushIndicator from './BrushIndicator.js';
|
||||
|
||||
class Interface extends EventEmitter
|
||||
{
|
||||
constructor(inBoardWindow, inSidebar, inDebugDisplay)
|
||||
|
|
|
@ -74,22 +74,15 @@ hr
|
|||
|
||||
.brush-settings
|
||||
{
|
||||
display: flex; flex-direction: column;
|
||||
display: flex; flex-direction: row;
|
||||
min-height: 5em;
|
||||
}
|
||||
|
||||
.brush-preview-display
|
||||
.brush-indicator { flex: 0; }
|
||||
.brush-width-controls
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.brush-indicator
|
||||
{
|
||||
position: relative;
|
||||
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
|
||||
margin: 1em 0 0 0;
|
||||
border-radius: 50%;
|
||||
flex: 3;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.tool-selector
|
||||
|
|
|
@ -70,7 +70,7 @@ class Pencil
|
|||
}).bind(this))
|
||||
|
||||
// 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
|
||||
inInterface.on("brushwidthchange", (function(event) {
|
||||
this.currentLineWidth = event.newWidth;
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 62f67e924c652d84956ed2bbf87588fd5ae963a9
|
||||
Subproject commit 1e7878c76032ab87bbf2829c8be2f43ff85f5660
|
Loading…
Reference in a new issue