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

[client] Start refactoring the brush width indicator, but it doesn't work yet

This commit is contained in:
Starbeamrainbowlabs 2017-10-26 15:31:43 +01:00
parent 1eef7c8d11
commit 1498626823
3 changed files with 49 additions and 24 deletions

View file

@ -0,0 +1,33 @@
"use strict";
class BrushIndicator
{
constructor(canvas)
{
this.canvas = canvas;
this.context = canvas.getContext("2d");
this.width = 10;
this.colour = "red";
}
render()
{
this.context.clearRect(
0, 0,
this.canvas.width, this.canvas.height
);
this.context.beginPath();
this.context.arc(
this.canvas.width / 2, this.canvas.height / 2,
this.width / 2,
0, Math.PI * 2,
false
);
this.context.fillStyle = this.colour;
this.context.fill();
}
}
export default BrushIndicator;

View file

@ -12,13 +12,15 @@ class Interface extends EventEmitter
this.sidebar = inSidebar; this.sidebar = inSidebar;
this.debugDisplay = inDebugDisplay; this.debugDisplay = inDebugDisplay;
this.brushIndicator = this.sidebar.querySelector(".brush-indicator"); this.brushIndicator = new BrushIndicator(
this.sidebar.querySelector(".brush-indicator")
);
this.setupToolSelectors(); this.setupToolSelectors();
this.setupColourSelectors(); this.setupColourSelectors();
this.setupBrushWidthControls(); this.setupBrushWidthControls();
this.updateBrushIndicator(); this.brushIndicator.render();
} }
/** /**
@ -68,7 +70,7 @@ class Interface extends EventEmitter
setupBrushWidthControls() setupBrushWidthControls()
{ {
this.brushWidthElement = this.sidebar.querySelector(".brush-width-controls"); this.brushWidthElement = this.sidebar.querySelector(".brush-width-controls");
this.currentBrushWidth = parseInt(this.brushWidthElement.value); this.brushIndicator.width = parseInt(this.brushWidthElement.value);
this.brushWidthElement.addEventListener("input", this.handleBrushWidthChange.bind(this)); this.brushWidthElement.addEventListener("input", this.handleBrushWidthChange.bind(this));
} }
@ -105,12 +107,13 @@ class Interface extends EventEmitter
delete this.currentColourElement.dataset.selected; delete this.currentColourElement.dataset.selected;
this.currentColourElement = paletteElement; this.currentColourElement = paletteElement;
this.currentColourElement.dataset.selected = "yes"; this.currentColourElement.dataset.selected = "yes";
this.currentColour = this.currentColourElement.style.backgroundColor; this.brushIndicator.colour = this.currentColourElement.style.backgroundColor;
this.brushIndicator.render();
this.updateBrushIndicator(); console.info("Selected colour", this.brushIndicator.colour);
this.emit("colourchange", {
console.info("Selected colour", this.currentColour); newColour: this.brushIndicator.colour
this.emit("colourchange", { newColour: this.currentColour }); });
} }
seekColour(direction = "forwards") seekColour(direction = "forwards")
@ -146,23 +149,14 @@ class Interface extends EventEmitter
if(newWidth < 1) newWidth = 1; if(newWidth < 1) newWidth = 1;
if(newWidth > parseInt(this.brushWidthElement.max)) newWidth = parseInt(this.brushWidthElement.max); if(newWidth > parseInt(this.brushWidthElement.max)) newWidth = parseInt(this.brushWidthElement.max);
this.currentBrushWidth = newWidth; // Store the new value this.brushIndicator.width = newWidth; // Store the new value
if(updateInterface) if(updateInterface)
this.brushWidthElement.value = newWidth; // Update the interface this.brushWidthElement.value = newWidth; // Update the interface
// Update the brush indicator this.brushIndicator.render();
this.updateBrushIndicator();
// Emit the brush width change event // Emit the brush width change event
this.emit("brushwidthchange", { newWidth: this.currentBrushWidth }); this.emit("brushwidthchange", { newWidth: this.brushIndicator.width });
}
updateBrushIndicator()
{
// The brush indicator is zoom-agnostic (for the moment, at least)
this.brushIndicator.style.width = `${this.currentBrushWidth}px`;
this.brushIndicator.style.height = this.brushIndicator.style.width;
this.brushIndicator.style.backgroundColor = this.currentColour;
} }
/** /**

View file

@ -15,9 +15,7 @@
<hr /> <hr />
<section class="brush-settings"> <section class="brush-settings">
<div class="brush-preview-display"> <canvas class="brush-indicator"></canvas>
<div class="brush-indicator"></div>
</div>
<input type="range" min="1" max="30" step="0.1" class="brush-width-controls" /> <input type="range" min="1" max="30" step="0.1" class="brush-width-controls" />
</section> </section>