1
0
Fork 0
mirror of https://github.com/sbrl/Nibriboard.git synced 2018-01-10 21:33:49 +00:00

[client] Tweak brush indicator, and add keyboard controls

This commit is contained in:
Starbeamrainbowlabs 2017-04-28 18:13:41 +01:00
parent ce7c4b22c4
commit d44012044b
5 changed files with 90 additions and 9 deletions

View file

@ -95,7 +95,19 @@ class BoardWindow extends EventEmitter
this.keyboard.on("keyup-g", (function(event) { this.keyboard.on("keyup-g", (function(event) {
this.displayGrid = this.displayGrid ? false : true; this.displayGrid = this.displayGrid ? false : true;
console.info(`[BoardWindow/KeyboardHandler] Grid display set to ${this.displayGrid ? "on" : "off"}`); console.info(`[BoardWindow/KeyboardHandler] Grid display set to ${this.displayGrid ? "on" : "off"}`);
}).bind(this)) }).bind(this));
this.keyboard.on("keyup-left", (function(event) {
this.interface.seekColour("backwards");
}).bind(this));
this.keyboard.on("keyup-right", (function(event) {
this.interface.seekColour("forwards");
}).bind(this));
this.keyboard.on("keyup-up", (function(event) {
this.interface.updateBrushWidth(this.interface.currentBrushWidth + 2, true);
}).bind(this));
this.keyboard.on("keyup-down", (function(event) {
this.interface.updateBrushWidth(this.interface.currentBrushWidth - 2, true);
}).bind(this));
// --~~~-- // --~~~--
@ -149,6 +161,9 @@ class BoardWindow extends EventEmitter
InitialAbsCursorPosition: this.cursorPosition InitialAbsCursorPosition: this.cursorPosition
}); });
}).bind(this)); }).bind(this));
this.rippleLink.on("disconnect", (function(event) {
this.interface.setConnectedStatus(false);
}).bind(this))
// Keep the server up to date on our viewport and cursor position // Keep the server up to date on our viewport and cursor position
this.viewportSyncer = new ViewportSyncer(this.rippleLink, this.cursorUpdateFrequency) this.viewportSyncer = new ViewportSyncer(this.rippleLink, this.cursorUpdateFrequency)

View file

@ -79,8 +79,18 @@ class Interface extends EventEmitter
*/ */
handleSelectColour(event) handleSelectColour(event)
{ {
delete this.currentColourElement.datasest.selected; this.switchColourTo(event.target);
this.currentColourElement = event.target; }
/**
* Switches the current colour out to be the colour held by the specified
* colour palette element.
* @param {HTMLElement} paletteElement The colour palette element to switch to.
*/
switchColourTo(paletteElement)
{
delete this.currentColourElement.dataset.selected;
this.currentColourElement = paletteElement;
this.currentColourElement.dataset.selected = "yes"; this.currentColourElement.dataset.selected = "yes";
this.currentColour = this.currentColourElement.style.backgroundColor; this.currentColour = this.currentColourElement.style.backgroundColor;
@ -90,15 +100,46 @@ class Interface extends EventEmitter
this.emit("colourchange", { newColour: this.currentColour }); this.emit("colourchange", { newColour: this.currentColour });
} }
seekColour(direction = "forwards")
{
var newPaletteElement = null;
if(direction == "forwards")
newPaletteElement = this.currentColourElement.nextElementSibling || this.currentColourElement.parentElement.firstElementChild;
else if(direction == "backwards")
newPaletteElement = this.currentColourElement.previousElementSibling || this.currentColourElement.parentElement.lastElementChild;
else
throw new Error(`Unknown direction ${direction} when switching colour!`);
this.switchColourTo(newPaletteElement);
}
/** /**
* Handles brush widdth changes requested by the user * Handles brush widdth changes requested by the user
*/ */
handleBrushWidthChange(event) handleBrushWidthChange(event)
{ {
this.currentBrushWidth = parseInt(event.target.value); // Update the brush width, but don't update the interface, since that's where we got the new value from :P
this.updateBrushWidth(parseInt(event.target.value, false));
}
/**
* Sets the brush width to the specified value, updating everyone else
* on the change.
* @param {number} newWidth The new width of the brush.
*/
updateBrushWidth(newWidth, updateInterface = true)
{
// Clamp the new width to make sure it's in-bounds
if(newWidth < 1) newWidth = 1;
if(newWidth > parseInt(this.brushWidthElement.max)) newWidth = parseInt(this.brushWidthElement.max);
this.currentBrushWidth = newWidth; // Store the new value
if(updateInterface)
this.brushWidthElement.value = newWidth; // Update the interface
// Update the brush indicator
this.updateBrushIndicator(); this.updateBrushIndicator();
// Emit the brush width change event
this.emit("brushwidthchange", { newWidth: this.currentLineWidth }); this.emit("brushwidthchange", { newWidth: this.currentLineWidth });
} }

View file

@ -4,6 +4,13 @@ body
font-family: sans-serif; font-family: sans-serif;
} }
hr
{
width: 80%; height: 0;
border: 0;
border-top: 0.1em solid hsl(237, 48%, 47%);
}
#canvas-main #canvas-main
{ {
position: absolute; position: absolute;
@ -58,8 +65,23 @@ body
border-top: 0.2em solid rgba(255, 255, 255, 0.3); border-top: 0.2em solid rgba(255, 255, 255, 0.3);
} }
.brush-settings
{
display: flex; flex-direction: column;
min-height: 5em;
}
.brush-preview-display
{
flex: 1;
}
.brush-indicator .brush-indicator
{ {
position: relative;
top: 50%; left: 50%; transform: translate(-50%, -50%);
margin: 1em 0 0 0;
border-radius: 50%; border-radius: 50%;
} }
@ -82,6 +104,7 @@ body
{ {
float: left; float: left;
width: 50%; height: 3em; width: 50%; height: 3em;
box-sizing: border-box;
cursor: pointer; cursor: pointer;
} }

View file

@ -69,9 +69,10 @@ class Pencil
if(this.boardWindow.keyboard.DownKeys.includes(17)) if(this.boardWindow.keyboard.DownKeys.includes(17))
return; return;
// The server only supports ints atm, so we have to round here :-(
var nextPoint = new Vector( var nextPoint = new Vector(
event.clientX + this.boardWindow.viewport.x, Math.floor(event.clientX + this.boardWindow.viewport.x),
event.clientY + this.boardWindow.viewport.y Math.floor(event.clientY + this.boardWindow.viewport.y)
); );
this.unsentSegments.push(nextPoint); this.unsentSegments.push(nextPoint);
this.currentLineSegments.push(nextPoint); this.currentLineSegments.push(nextPoint);

View file

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