diff --git a/Nibriboard/ClientFiles/BrushIndicator.js b/Nibriboard/ClientFiles/BrushIndicator.js new file mode 100644 index 0000000..108add2 --- /dev/null +++ b/Nibriboard/ClientFiles/BrushIndicator.js @@ -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; diff --git a/Nibriboard/ClientFiles/Interface.js b/Nibriboard/ClientFiles/Interface.js index 261c021..6c68cef 100644 --- a/Nibriboard/ClientFiles/Interface.js +++ b/Nibriboard/ClientFiles/Interface.js @@ -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(); - // 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.render(); - this.brushIndicator.style.backgroundColor = this.currentColour; + // Emit the brush width change event + this.emit("brushwidthchange", { newWidth: this.brushIndicator.width }); } /** diff --git a/Nibriboard/ClientFiles/index.html b/Nibriboard/ClientFiles/index.html index 8201de6..79c1203 100644 --- a/Nibriboard/ClientFiles/index.html +++ b/Nibriboard/ClientFiles/index.html @@ -15,9 +15,7 @@