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:
parent
74a0010e59
commit
653df90674
4 changed files with 33 additions and 5 deletions
|
@ -69,7 +69,11 @@ class BoardWindow extends EventEmitter
|
|||
return canvas.height * 1/this.zoomLevel
|
||||
},
|
||||
// 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
|
||||
|
@ -82,7 +86,10 @@ class BoardWindow extends EventEmitter
|
|||
this.context = canvas.getContext("2d");
|
||||
|
||||
// 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
|
||||
this.otherClients = new Map();
|
||||
|
@ -210,7 +217,7 @@ class BoardWindow extends EventEmitter
|
|||
*/
|
||||
update()
|
||||
{
|
||||
|
||||
this.interface.updateDebugInfo(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -4,11 +4,12 @@ window.EventEmitter = require("event-emitter-es6");
|
|||
|
||||
class Interface extends EventEmitter
|
||||
{
|
||||
constructor(inSidebar)
|
||||
constructor(inSidebar, inDebugDisplay)
|
||||
{
|
||||
super();
|
||||
|
||||
this.sidebar = inSidebar;
|
||||
this.debugDisplay = inDebugDisplay;
|
||||
|
||||
this.brushIndicator = this.sidebar.querySelector(".brush-indicator");
|
||||
|
||||
|
@ -190,7 +191,10 @@ class Interface extends EventEmitter
|
|||
this.sidebar.querySelector(".name").innerHTML = newName;
|
||||
}
|
||||
|
||||
|
||||
updateDebugInfo(boardWindow)
|
||||
{
|
||||
this.debugDisplay.querySelector("#debug-viewport").value = boardWindow.viewport;
|
||||
}
|
||||
}
|
||||
|
||||
export default Interface;
|
||||
|
|
|
@ -114,6 +114,19 @@ hr
|
|||
border: 0.2em dashed hsl(219, 87%, 54%);
|
||||
}
|
||||
|
||||
|
||||
/**************************************/
|
||||
|
||||
#debuginfo
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
padding: 0.5em;
|
||||
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
|
||||
.fps
|
||||
{
|
||||
top: 0.2em !important; right: 0.2em !important;
|
||||
|
|
|
@ -41,6 +41,10 @@
|
|||
<span class="palette-colour" style="background-color: pink;"></span>
|
||||
<span class="palette-colour" style="background-color: saddlebrown;"></span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<aside id="debuginfo">
|
||||
<label>Viewport:</label> <output id="debug-viewport">?</output>
|
||||
|
||||
</aside>
|
||||
|
||||
|
|
Loading…
Reference in a new issue