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:
parent
1eef7c8d11
commit
1498626823
3 changed files with 49 additions and 24 deletions
33
Nibriboard/ClientFiles/BrushIndicator.js
Normal file
33
Nibriboard/ClientFiles/BrushIndicator.js
Normal 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;
|
|
@ -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 });
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue