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.displayGrid = this.displayGrid ? false : true;
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
});
}).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
this.viewportSyncer = new ViewportSyncer(this.rippleLink, this.cursorUpdateFrequency)

View file

@ -79,8 +79,18 @@ class Interface extends EventEmitter
*/
handleSelectColour(event)
{
delete this.currentColourElement.datasest.selected;
this.currentColourElement = event.target;
this.switchColourTo(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.currentColour = this.currentColourElement.style.backgroundColor;
@ -90,15 +100,46 @@ class Interface extends EventEmitter
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
*/
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();
// Emit the brush width change event
this.emit("brushwidthchange", { newWidth: this.currentLineWidth });
}

View file

@ -4,6 +4,13 @@ body
font-family: sans-serif;
}
hr
{
width: 80%; height: 0;
border: 0;
border-top: 0.1em solid hsl(237, 48%, 47%);
}
#canvas-main
{
position: absolute;
@ -58,8 +65,23 @@ body
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
{
position: relative;
top: 50%; left: 50%; transform: translate(-50%, -50%);
margin: 1em 0 0 0;
border-radius: 50%;
}
@ -82,6 +104,7 @@ body
{
float: left;
width: 50%; height: 3em;
box-sizing: border-box;
cursor: pointer;
}

View file

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

View file

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