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

Create simple debug panel

This commit is contained in:
Starbeamrainbowlabs 2017-06-15 13:12:30 +01:00
parent 74a0010e59
commit 653df90674
4 changed files with 33 additions and 5 deletions

View file

@ -69,7 +69,11 @@ class BoardWindow extends EventEmitter
return canvas.height * 1/this.zoomLevel return canvas.height * 1/this.zoomLevel
}, },
// The zoom level of the viewport. 1 = normal. // The zoom level of the viewport. 1 = normal.
zoomLevel: 1 zoomLevel: 1,
toString() {
return `${+this.width.toFixed(2)}x${+this.height.toFixed(2)} @ (${+this.x.toFixed(2)}, ${+this.y.toFixed(2)}) @ ${+this.zoomLevel.toFixed(2)}`
}
}; };
// The current grid size // The current grid size
@ -82,7 +86,10 @@ class BoardWindow extends EventEmitter
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
// Grab a reference to the sidebar and wrap it in an Interface class instance // Grab a reference to the sidebar and wrap it in an Interface class instance
this.interface = new Interface(document.getElementById("sidebar")); this.interface = new Interface(
document.getElementById("sidebar"),
document.getElementById("debuginfo")
);
// 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();
@ -210,7 +217,7 @@ class BoardWindow extends EventEmitter
*/ */
update() update()
{ {
this.interface.updateDebugInfo(this);
} }
/** /**

View file

@ -4,11 +4,12 @@ window.EventEmitter = require("event-emitter-es6");
class Interface extends EventEmitter class Interface extends EventEmitter
{ {
constructor(inSidebar) constructor(inSidebar, inDebugDisplay)
{ {
super(); super();
this.sidebar = inSidebar; this.sidebar = inSidebar;
this.debugDisplay = inDebugDisplay;
this.brushIndicator = this.sidebar.querySelector(".brush-indicator"); this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
@ -190,7 +191,10 @@ class Interface extends EventEmitter
this.sidebar.querySelector(".name").innerHTML = newName; this.sidebar.querySelector(".name").innerHTML = newName;
} }
updateDebugInfo(boardWindow)
{
this.debugDisplay.querySelector("#debug-viewport").value = boardWindow.viewport;
}
} }
export default Interface; export default Interface;

View file

@ -114,6 +114,19 @@ hr
border: 0.2em dashed hsl(219, 87%, 54%); border: 0.2em dashed hsl(219, 87%, 54%);
} }
/**************************************/
#debuginfo
{
position: absolute;
bottom: 0; right: 0;
padding: 0.5em;
z-index: 5000;
}
.fps .fps
{ {
top: 0.2em !important; right: 0.2em !important; top: 0.2em !important; right: 0.2em !important;

View file

@ -41,6 +41,10 @@
<span class="palette-colour" style="background-color: pink;"></span> <span class="palette-colour" style="background-color: pink;"></span>
<span class="palette-colour" style="background-color: saddlebrown;"></span> <span class="palette-colour" style="background-color: saddlebrown;"></span>
</div> </div>
</aside>
<aside id="debuginfo">
<label>Viewport:</label> <output id="debug-viewport">?</output>
</aside> </aside>