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

Change the cursor depending on the tool selected

Browse source
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("sidebar"),
document.getElementById("debuginfo") 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 // Create a map to store information about other clients in
this.otherClients = new Map(); 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("mouseup", this.handleSelectTool.bind(this));
toolSelectors[i].addEventListener("touchend", 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) handleSelectTool(event)
{ {
let oldTool = this.currentToolElement.dataset.toolName;
delete this.currentToolElement.dataset.selected; delete this.currentToolElement.dataset.selected;
this.currentToolElement = event.target; this.currentToolElement = event.target;
this.currentToolElement.dataset.selected = "yes"; this.currentToolElement.dataset.selected = "yes";
this.currentTool = this.currentToolElement.dataset.toolName; this.currentTool = this.currentToolElement.dataset.toolName;
console.info("Selected tool", this.currentTool); 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; 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 #sidebar
{ {
position: absolute; position: absolute;

4
Nibriboard/ClientFiles/index.html
View file

@ -23,7 +23,7 @@
<section class="tools"> <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="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> <span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them.">&#x2739;</span>
</section> </section>
@ -48,7 +48,7 @@
<br /> <br />
<label>Frame spacing:</label> <output id="debug-framespacing" class="debug-value">?</output> <label>Frame spacing:</label> <output id="debug-framespacing" class="debug-value">?</output>
<br /> <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> </aside>
<canvas id="canvas-main"></canvas> <canvas id="canvas-main"></canvas>