mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-06-13 13:04:03 +00:00
entity debugger > css + infinite recursion fixes
This commit is contained in:
parent
49a9c595a5
commit
6177b3b58d
@ -25,11 +25,13 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.propertyTable {
|
||||
@include S(margin-top, 8px);
|
||||
}
|
||||
|
||||
.propertyTable,
|
||||
.entityComponents,
|
||||
.entityComponents .object > div {
|
||||
@include S(margin-top, 5px);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(column-gap, 10px);
|
||||
@ -37,13 +39,15 @@
|
||||
|
||||
.entityComponents {
|
||||
grid-column: 1 / 3;
|
||||
@include S(margin-top, 5px);
|
||||
|
||||
font-family: "Roboto Mono", "Fira Code", monospace;
|
||||
font-size: 90%;
|
||||
@include S(letter-spacing, -0.5px);
|
||||
|
||||
label,
|
||||
span {
|
||||
line-height: 140%;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:not(span) {
|
||||
opacity: 0.5;
|
||||
@ -52,7 +56,7 @@
|
||||
|
||||
.object {
|
||||
grid-column: 1 / 3;
|
||||
line-height: 140%;
|
||||
line-height: 1.5em;
|
||||
|
||||
> div {
|
||||
@include S(margin-left, 4px);
|
||||
|
@ -46,13 +46,12 @@ export class HUDEntityDebugger extends BaseHUDPart {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
|
||||
propertyToHTML(name, val, indent = 0) {
|
||||
propertyToHTML(name, val, indent = 0, recursion = []) {
|
||||
if (val !== null && typeof val === "object") {
|
||||
if (indent > 10) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// Array is displayed like object, with indexes
|
||||
recursion.push(val);
|
||||
|
||||
// Get type class name (like Array, Object, Vector...)
|
||||
const typeName = `(${val.constructor ? val.constructor.name : "unknown"})`;
|
||||
const colorStyle = `color: hsl(${30 * indent}, 100%, 80%)`;
|
||||
|
||||
@ -62,8 +61,20 @@ export class HUDEntityDebugger extends BaseHUDPart {
|
||||
|
||||
for (const property in val) {
|
||||
const isRoot = val[property] == this.root;
|
||||
const isRecursive = recursion.includes(val[property]);
|
||||
|
||||
html += this.propertyToHTML(property, isRoot ? "<root>" : val[property], indent + 1);
|
||||
let hiddenValue = isRoot ? "<root>" : null;
|
||||
if (isRecursive) {
|
||||
// Avoid recursion by not "expanding" object more than once
|
||||
hiddenValue = "<recursion>";
|
||||
}
|
||||
|
||||
html += this.propertyToHTML(
|
||||
property,
|
||||
hiddenValue ? hiddenValue : val[property],
|
||||
indent + 1,
|
||||
[...recursion] // still expand same value in other "branches"
|
||||
);
|
||||
}
|
||||
|
||||
html += "</div></details>";
|
||||
@ -91,6 +102,7 @@ export class HUDEntityDebugger extends BaseHUDPart {
|
||||
this.chunkPosElem.innerText = chunk.x + " / " + chunk.y;
|
||||
|
||||
const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
|
||||
|
||||
if (entity) {
|
||||
removeAllChildren(this.componentsElem);
|
||||
let html = "";
|
||||
@ -107,7 +119,8 @@ export class HUDEntityDebugger extends BaseHUDPart {
|
||||
html += "<summary>" + componentId + "</summary><div>";
|
||||
|
||||
for (const property in data) {
|
||||
html += this.propertyToHTML(property, data[property]);
|
||||
// Put entity into recursion list, so it won't get "expanded"
|
||||
html += this.propertyToHTML(property, data[property], 0, [entity]);
|
||||
}
|
||||
|
||||
html += "</div></details>";
|
||||
@ -119,5 +132,14 @@ export class HUDEntityDebugger extends BaseHUDPart {
|
||||
this.domAttach.update(this.visible);
|
||||
}
|
||||
|
||||
onMouseDown() {}
|
||||
onMouseDown() {
|
||||
// On click, update current entity
|
||||
|
||||
const mousePos = this.root.app.mousePosition;
|
||||
if (!mousePos) {
|
||||
return;
|
||||
}
|
||||
const worldPos = this.root.camera.screenToWorld(mousePos);
|
||||
const worldTile = worldPos.toTileSpace();
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user