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

Create brush indicator

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-04-28 12:42:34 +01:00
parent 903fe26af9
commit ce7c4b22c4
4 changed files with 93 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
Nibriboard/ClientFiles/Interface.js
View file

@ -10,13 +10,23 @@ class Interface extends EventEmitter
this.sidebar = inSidebar;
this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[data-selected]");
this.currentTool = "brush";
this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
this.setupToolSelectors();
this.setupColourSelectors();
this.setupBrushWidthControls();
this.updateBrushIndicator();
}
/**
* Sets up the event listeners on the tool selectors.
*/
setupToolSelectors()
{
this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[data-selected]");
this.currentTool = "brush";
var toolSelectors = this.sidebar.querySelectorAll(".tools .tool-selector");
for(let i = 0; i < toolSelectors.length; i++)
{
@ -25,6 +35,32 @@ class Interface extends EventEmitter
}
}
/**
* Sets up the event listeners on the colour selectors.
*/
setupColourSelectors()
{
this.currentColourElement = this.sidebar.querySelector(".palette .palette-colour[data-selected]");
this.currentColour = this.currentColourElement.style.backgroundColor;
var colours = this.sidebar.querySelectorAll(".palette .palette-colour");
for (let i = 0; i < colours.length; i++) {
colours[i].addEventListener("mouseup", this.handleSelectColour.bind(this));
colours[i].addEventListener("touchend", this.handleSelectColour.bind(this));
}
}
/**
* Sets up the brush width controls
*/
setupBrushWidthControls()
{
this.brushWidthElement = this.sidebar.querySelector(".brush-width-controls");
this.currentBrushWidth = parseInt(this.brushWidthElement.value);
this.brushWidthElement.addEventListener("input", this.handleBrushWidthChange.bind(this));
}
/**
* Handles tool changes requested by the user.
*/
@ -38,6 +74,43 @@ class Interface extends EventEmitter
this.emit("toolchange", { newTool: this.currentTool });
}
/**
* Handles colour selection changes requested by the user.
*/
handleSelectColour(event)
{
delete this.currentColourElement.datasest.selected;
this.currentColourElement = event.target;
this.currentColourElement.dataset.selected = "yes";
this.currentColour = this.currentColourElement.style.backgroundColor;
this.updateBrushIndicator();
console.info("Selected colour", this.currentColour);
this.emit("colourchange", { newColour: this.currentColour });
}
/**
* Handles brush widdth changes requested by the user
*/
handleBrushWidthChange(event)
{
this.currentBrushWidth = parseInt(event.target.value);
this.updateBrushIndicator();
this.emit("brushwidthchange", { newWidth: this.currentLineWidth });
}
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;
}
/**
* Sets the displayed connection status.
* @param {bool} newStatus The new connection status to display. true = connected - false = disconnected.

10
Nibriboard/ClientFiles/Nibri.css
View file

@ -58,6 +58,11 @@ body
border-top: 0.2em solid rgba(255, 255, 255, 0.3);
}
.brush-indicator
{
border-radius: 50%;
}
.tool-selector
{
display: inline-block;
@ -81,6 +86,11 @@ body
cursor: pointer;
}
.palette-colour[data-selected]
{
border: 0.2em dashed hsl(219, 87%, 54%);
}
.fps
{
top: 0.2em !important; right: 0.2em !important;

5
Nibriboard/ClientFiles/Pencil.js
View file

@ -47,8 +47,13 @@ class Pencil
// The time of the last push of the line to the server.
this.lastServerPush = 0;
// Event Listeners
canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
this.boardWindow.interface.on("colourchange", (function(event) {
this.currentColour = event.newColour;
}).bind(this))
}
handleMouseMove(event) {

6
Nibriboard/ClientFiles/index.html
View file

@ -15,9 +15,9 @@
<hr />
<section class="brush-settings">
<div class="current-brush"></div>
<div class="brush-indicator"></div>
<input type="range" min="1" max="30" step="1" id="brush-width" />
<input type="range" min="1" max="30" step="0.1" class="brush-width-controls" />
</section>
<section class="tools">
@ -33,7 +33,7 @@
<span class="palette-colour" style="background-color: white;"></span>
<span class="palette-colour" style="background-color: black;"></span>
<span class="palette-colour" style="background-color: red;"></span>
<span class="palette-colour" style="background-color: orange;"></span>
<span class="palette-colour" style="background-color: orange;" data-selected></span>
<span class="palette-colour" style="background-color: darkgreen;"></span>
<span class="palette-colour" style="background-color: blue;"></span>
<span class="palette-colour" style="background-color: purple;"></span>