sbrl-github
/
Nibriboard
mirror of https://github.com/sbrl/Nibriboard.git
1
0
Fork 0
Code

Change the cursor depending on the tool selected

This commit is contained in:
Starbeamrainbowlabs 2017-06-26 17:18:37 +01:00
parent 247d3f3cc6
commit 441cb5a283
4 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Nibriboard/ClientFiles/BoardWindow.js
View File

@ -90,6 +90,10 @@ class BoardWindow extends EventEmitter
document.getElementById("sidebar"),
document.getElementById("debuginfo")
);
this.interface.on("toolchange", (function({oldTool, newTool}) {
this.canvas.classList.remove(oldTool);
this.canvas.classList.add(newTool);
}).bind(this));
// Create a map to store information about other clients in
this.otherClients = new Map();

8
Nibriboard/ClientFiles/Interface.js
View File

@ -34,6 +34,11 @@ class Interface extends EventEmitter
toolSelectors[i].addEventListener("mouseup", this.handleSelectTool.bind(this));
toolSelectors[i].addEventListener("touchend", this.handleSelectTool.bind(this));
}
this.emit("toolchange", {
oldTool: this.currentToolElement.dataset.toolName,
newTool: this.currentToolElement.dataset.toolName
});
}
/**
@ -67,12 +72,13 @@ class Interface extends EventEmitter
*/
handleSelectTool(event)
{
let oldTool = this.currentToolElement.dataset.toolName;
delete this.currentToolElement.dataset.selected;
this.currentToolElement = event.target;
this.currentToolElement.dataset.selected = "yes";
this.currentTool = this.currentToolElement.dataset.toolName;
console.info("Selected tool", this.currentTool);
this.emit("toolchange", { newTool: this.currentTool });
this.emit("toolchange", { oldTool, newTool: this.currentTool });
}
/**

5
Nibriboard/ClientFiles/Nibri.css
View File

@ -20,6 +20,11 @@ hr
cursor: crosshair;
}
#canvas-main.brush { cursor: crosshair; }
#canvas-main.pan { cursor: -webkit-grab; cursor: grab; }
#canvas-main.pan:active { cursor: -webkit-grabbing; cursor: grabbing; }
#canvas-main.pointer { cursor: default; } /* future: show a laser-pointer-style cursor here */
#sidebar
{
position: absolute;

4
Nibriboard/ClientFiles/index.html
View File

@ -23,7 +23,7 @@
<section class="tools">
<span class="tool-selector" data-tool-name="brush" title="Draw lines with a brush." data-selected>&#x1f58c;</span>
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane.">&harr;</span>
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane.">&#x1f591;</span>
<span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them.">&#x2739;</span>
</section>
@ -48,7 +48,7 @@
<br />
<label>Frame spacing:</label> <output id="debug-framespacing" class="debug-value">?</output>
<br />
<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</small>
<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</em></small>
</aside>
<canvas id="canvas-main"></canvas>