diff --git a/macrovision.css b/macrovision.css
index 825c51fb..39f24e86 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -451,4 +451,19 @@ input[type=checkbox] {
input ~ label {
user-select: none;
+}
+
+body.toggle-height-bars .height-bar {
+ display: block;
+}
+
+.height-bar {
+ display: none;
+ min-width: 120vw;
+ min-height: 3px;
+ height: 3px;
+ position: absolute;
+ background: repeating-linear-gradient(90deg, #aaaaaaff, #aaaaaaff 20px, #aaaaaa00 20px, #aaaaaa00 40px);
+ top: calc(-100% + var(--extra));
+ left: calc(-120vw + 24px);
}
\ No newline at end of file
diff --git a/macrovision.html b/macrovision.html
index 19027dbb..383323b1 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -26,7 +26,7 @@
-
+
+
+
+
+
Auto-sizing mode
diff --git a/macrovision.js b/macrovision.js
index ec00ff91..709c2370 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -843,6 +843,7 @@ function displayEntity(entity, view, x, y) {
img.addEventListener("dragstart", e => {
e.preventDefault();
});
+
const nameTag = document.createElement("div");
nameTag.classList.add("entity-name");
nameTag.innerText = entity.name;
@@ -873,6 +874,11 @@ function displayEntity(entity, view, x, y) {
testClick(fakeEvent);
});
+ const heightBar = document.createElement("div");
+ heightBar.classList.add("height-bar");
+
+ box.appendChild(heightBar);
+
box.id = "entity-" + entityIndex;
box.dataset.key = entityIndex;
entity.view = view;
@@ -938,6 +944,10 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
});
+ document.querySelector("#options-world-show-height-bars").addEventListener("input", e => {
+ document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars");
+ });
+
document.querySelector("#options-order-forward").addEventListener("click", e => {
if (selected) {
entities[selected.dataset.key].priority += 1;