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

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;

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.brushIndicator.colour);
-		
+		this.emit("colourchange", {
-		console.info("Selected colour", this.currentColour);
+			newColour: this.brushIndicator.colour
-		this.emit("colourchange", { newColour: this.currentColour });
+		});
 	}
 	
 	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.brushIndicator.render();
-		this.updateBrushIndicator();
+		
 		// 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;
 	}
 	
 	/**

Nibriboard/ClientFiles/index.html

@@ -15,9 +15,7 @@
 			<hr />
 			
 			<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" />
 			</section>