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] Start refactoring the brush width indicator, but it doesn't work yet

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
Nibriboard/ClientFiles/BrushIndicator.js Normal file
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;

36
Nibriboard/ClientFiles/Interface.js
View file

@ -12,13 +12,15 @@ class Interface extends EventEmitter
this.sidebar = inSidebar;
this.debugDisplay = inDebugDisplay;
this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
this.brushIndicator = new BrushIndicator(
this.sidebar.querySelector(".brush-indicator")
);
this.setupToolSelectors();
this.setupColourSelectors();
this.setupBrushWidthControls();
this.updateBrushIndicator();
this.brushIndicator.render();
}
/**
@ -68,7 +70,7 @@ class Interface extends EventEmitter
setupBrushWidthControls()
{
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));
}
@ -105,12 +107,13 @@ class Interface extends EventEmitter
delete this.currentColourElement.dataset.selected;
this.currentColourElement = paletteElement;
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.currentColour);
this.emit("colourchange", { newColour: this.currentColour });
console.info("Selected colour", this.brushIndicator.colour);
this.emit("colourchange", {
newColour: this.brushIndicator.colour
});
}
seekColour(direction = "forwards")
@ -146,23 +149,14 @@ class Interface extends EventEmitter
if(newWidth < 1) newWidth = 1;
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)
this.brushWidthElement.value = newWidth; // Update the interface
// Update the brush indicator
this.updateBrushIndicator();
this.brushIndicator.render();
// Emit the brush width change event
this.emit("brushwidthchange", { newWidth: this.currentBrushWidth });
}
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;
this.emit("brushwidthchange", { newWidth: this.brushIndicator.width });
}
/**

4
Nibriboard/ClientFiles/index.html
View file

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