2017-04-25 18:34:03 +00:00
|
|
|
"use strict";
|
|
|
|
|
2017-11-09 21:35:56 +00:00
|
|
|
import EventEmitter from "event-emitter-es6";
|
2017-04-25 18:34:03 +00:00
|
|
|
|
2017-10-29 11:29:40 +00:00
|
|
|
import BrushIndicator from './BrushIndicator.js';
|
|
|
|
|
2017-04-27 17:36:45 +00:00
|
|
|
class Interface extends EventEmitter
|
2017-04-25 18:34:03 +00:00
|
|
|
{
|
2017-06-26 17:04:42 +00:00
|
|
|
constructor(inBoardWindow, inSidebar, inDebugDisplay)
|
2017-04-25 18:34:03 +00:00
|
|
|
{
|
|
|
|
super();
|
|
|
|
|
2017-06-26 17:04:42 +00:00
|
|
|
this.boardWindow = inBoardWindow;
|
2017-04-25 18:34:03 +00:00
|
|
|
this.sidebar = inSidebar;
|
2017-06-15 12:12:30 +00:00
|
|
|
this.debugDisplay = inDebugDisplay;
|
2017-04-25 18:34:03 +00:00
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator = new BrushIndicator(
|
|
|
|
this.sidebar.querySelector(".brush-indicator")
|
|
|
|
);
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-04-27 20:53:07 +00:00
|
|
|
this.setupToolSelectors();
|
2017-04-28 11:42:34 +00:00
|
|
|
this.setupColourSelectors();
|
|
|
|
this.setupBrushWidthControls();
|
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator.render();
|
2017-04-25 18:34:03 +00:00
|
|
|
}
|
|
|
|
|
2017-04-28 11:42:34 +00:00
|
|
|
/**
|
|
|
|
* Sets up the event listeners on the tool selectors.
|
|
|
|
*/
|
2017-04-25 18:34:03 +00:00
|
|
|
setupToolSelectors()
|
|
|
|
{
|
2017-04-28 11:42:34 +00:00
|
|
|
this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[data-selected]");
|
2017-12-22 15:11:02 +00:00
|
|
|
this.lastTool = this.currentTool = "brush";
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-04-25 18:34:03 +00:00
|
|
|
var toolSelectors = this.sidebar.querySelectorAll(".tools .tool-selector");
|
|
|
|
for(let i = 0; i < toolSelectors.length; i++)
|
|
|
|
{
|
|
|
|
toolSelectors[i].addEventListener("mouseup", this.handleSelectTool.bind(this));
|
|
|
|
toolSelectors[i].addEventListener("touchend", this.handleSelectTool.bind(this));
|
2017-06-26 17:04:42 +00:00
|
|
|
this.boardWindow.keyboard.on(`keyup-${i + 1}`, (function(toolId, event) {
|
|
|
|
this.handleSelectTool({
|
2017-10-06 14:26:02 +00:00
|
|
|
currentTarget: this.sidebar.querySelector(`.tools .tool-selector:nth-child(${toolId})`)
|
2017-06-26 17:04:42 +00:00
|
|
|
});
|
|
|
|
}).bind(this, i + 1));
|
2017-04-25 18:34:03 +00:00
|
|
|
}
|
2017-06-26 16:18:37 +00:00
|
|
|
|
2017-12-08 16:16:06 +00:00
|
|
|
this.boardWindow.keyboard.on(`keydown-ctrl`, (function(event) {
|
|
|
|
this.setTool("pan");
|
|
|
|
}).bind(this));
|
|
|
|
this.boardWindow.keyboard.on(`keyup-ctrl`, (function(event) {
|
2017-12-22 15:11:02 +00:00
|
|
|
this.revertTool();
|
2017-12-08 16:16:06 +00:00
|
|
|
}).bind(this));
|
|
|
|
|
2017-06-26 16:18:37 +00:00
|
|
|
this.emit("toolchange", {
|
|
|
|
oldTool: this.currentToolElement.dataset.toolName,
|
|
|
|
newTool: this.currentToolElement.dataset.toolName
|
|
|
|
});
|
2017-04-25 18:34:03 +00:00
|
|
|
}
|
|
|
|
|
2017-04-28 11:42:34 +00:00
|
|
|
/**
|
|
|
|
* Sets up the event listeners on the colour selectors.
|
|
|
|
*/
|
|
|
|
setupColourSelectors()
|
|
|
|
{
|
|
|
|
this.currentColourElement = this.sidebar.querySelector(".palette .palette-colour[data-selected]");
|
2017-06-12 17:15:49 +00:00
|
|
|
this.switchColourTo(this.currentColourElement);
|
2017-04-28 11:42:34 +00:00
|
|
|
|
|
|
|
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");
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator.width = parseInt(this.brushWidthElement.value);
|
2017-04-28 11:42:34 +00:00
|
|
|
|
|
|
|
this.brushWidthElement.addEventListener("input", this.handleBrushWidthChange.bind(this));
|
|
|
|
}
|
|
|
|
|
2017-12-08 16:16:06 +00:00
|
|
|
/**
|
|
|
|
* Sets the currently active tool.
|
|
|
|
* @param {string} newToolName The name of the tool to set to be the currently active one.
|
|
|
|
*/
|
|
|
|
setTool(newToolName)
|
|
|
|
{
|
|
|
|
this.handleSelectTool({
|
|
|
|
currentTarget: this.sidebar.querySelector(`.tools .tool-selector[data-tool-name=${newToolName}]`)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-12-22 15:11:02 +00:00
|
|
|
/**
|
|
|
|
* Reverts the currently selected tool back to the last one selected.
|
|
|
|
*/
|
|
|
|
revertTool()
|
|
|
|
{
|
|
|
|
this.setTool(this.lastTool);
|
|
|
|
}
|
|
|
|
|
2017-04-25 18:34:03 +00:00
|
|
|
/**
|
|
|
|
* Handles tool changes requested by the user.
|
|
|
|
*/
|
|
|
|
handleSelectTool(event)
|
|
|
|
{
|
2017-12-22 15:11:02 +00:00
|
|
|
this.lastTool = this.currentTool;
|
|
|
|
|
2017-04-25 18:34:03 +00:00
|
|
|
delete this.currentToolElement.dataset.selected;
|
2017-10-06 14:26:02 +00:00
|
|
|
this.currentToolElement = event.currentTarget;
|
2017-04-25 18:34:03 +00:00
|
|
|
this.currentToolElement.dataset.selected = "yes";
|
|
|
|
this.currentTool = this.currentToolElement.dataset.toolName;
|
2017-04-27 20:53:07 +00:00
|
|
|
console.info("Selected tool", this.currentTool);
|
2017-12-22 15:11:02 +00:00
|
|
|
this.emit("toolchange", { oldTool: this.lastTool, newTool: this.currentTool });
|
2017-04-25 18:34:03 +00:00
|
|
|
}
|
|
|
|
|
2017-04-28 11:42:34 +00:00
|
|
|
/**
|
|
|
|
* Handles colour selection changes requested by the user.
|
|
|
|
*/
|
|
|
|
handleSelectColour(event)
|
|
|
|
{
|
2017-04-28 17:13:41 +00:00
|
|
|
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;
|
2017-04-28 11:42:34 +00:00
|
|
|
this.currentColourElement.dataset.selected = "yes";
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator.colour = this.currentColourElement.style.backgroundColor;
|
|
|
|
this.brushIndicator.render();
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
console.info("Selected colour", this.brushIndicator.colour);
|
|
|
|
this.emit("colourchange", {
|
|
|
|
newColour: this.brushIndicator.colour
|
|
|
|
});
|
2017-04-28 11:42:34 +00:00
|
|
|
}
|
|
|
|
|
2017-04-28 17:13:41 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2017-04-28 11:42:34 +00:00
|
|
|
/**
|
|
|
|
* Handles brush widdth changes requested by the user
|
|
|
|
*/
|
|
|
|
handleBrushWidthChange(event)
|
|
|
|
{
|
2017-04-28 17:13:41 +00:00
|
|
|
// 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);
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator.width = newWidth; // Store the new value
|
2017-04-28 17:13:41 +00:00
|
|
|
if(updateInterface)
|
|
|
|
this.brushWidthElement.value = newWidth; // Update the interface
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
this.brushIndicator.render();
|
2017-04-28 11:42:34 +00:00
|
|
|
|
2017-10-26 14:31:43 +00:00
|
|
|
// Emit the brush width change event
|
|
|
|
this.emit("brushwidthchange", { newWidth: this.brushIndicator.width });
|
2017-04-28 11:42:34 +00:00
|
|
|
}
|
|
|
|
|
2017-04-25 18:34:03 +00:00
|
|
|
/**
|
|
|
|
* Sets the displayed connection status.
|
|
|
|
* @param {bool} newStatus The new connection status to display. true = connected - false = disconnected.
|
|
|
|
*/
|
|
|
|
setConnectedStatus(newStatus)
|
|
|
|
{
|
|
|
|
if(newStatus)
|
|
|
|
this.sidebar.querySelector(".connection-indicator").dataset.connected = "yes";
|
|
|
|
else
|
|
|
|
delete this.sidebar.querySelector(".connection-indicator").dataset.connected;
|
|
|
|
}
|
|
|
|
|
2017-04-27 17:36:45 +00:00
|
|
|
/**
|
|
|
|
* Fetches our colour from the ui.
|
|
|
|
*/
|
|
|
|
get OurColour()
|
|
|
|
{
|
|
|
|
return this.sidebar.querySelector(".name").style.borderTopColor;
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* Sets the colour displayed just above the name
|
|
|
|
* @param {HTMLColour} newColour The new colour to display jsut above the
|
|
|
|
* name in the sidebar.
|
|
|
|
*/
|
|
|
|
set OurColour(newColour)
|
|
|
|
{
|
|
|
|
this.sidebar.querySelector(".name").style.borderTopColor = newColour;
|
|
|
|
}
|
|
|
|
|
2017-04-25 18:34:03 +00:00
|
|
|
/**
|
|
|
|
* Updates the username displayed.
|
|
|
|
* @param {string} newName The new name to display inthe sidebar.
|
|
|
|
*/
|
|
|
|
updateDisplayedName(newName)
|
|
|
|
{
|
|
|
|
this.sidebar.querySelector(".name").innerHTML = newName;
|
|
|
|
}
|
|
|
|
|
2017-06-26 17:04:42 +00:00
|
|
|
updateDebugInfo(dt)
|
2017-06-15 12:12:30 +00:00
|
|
|
{
|
2017-06-26 17:04:42 +00:00
|
|
|
this.debugDisplay.querySelector("#debug-viewport").value = this.boardWindow.viewport;
|
2017-12-15 15:45:49 +00:00
|
|
|
if(typeof this.boardWindow.cursorSyncer != "undefined")
|
|
|
|
this.debugDisplay.querySelector("#debug-cursor").value = `${this.boardWindow.cursorSyncer.cursorPosition} -> ${this.boardWindow.cursorSyncer.absCursorPosition}`;
|
|
|
|
this.debugDisplay.querySelector("#debug-framespacing").value = `${dt}ms`;
|
2017-06-15 12:12:30 +00:00
|
|
|
}
|
2017-04-25 18:34:03 +00:00
|
|
|
}
|
|
|
|
|
2017-04-27 17:36:45 +00:00
|
|
|
export default Interface;
|