chemicalcrux
/
macrovision
1
0
Форкнуть 0
Код Задачи 5 Pull Request'ы 0 Релизы 10 Вики Активность
Просмотр исходного кода

Add an option to point out entities much larger than the viewport 

Very large entities are confusing to add - they appear for a brief moment
and then grow off the screen. This shows an arrow if an entity is at least
ten times taller than the viewport.
tags/v0.1.0
Fen Dweller 6 лет назад
Родитель
ccc8046feb
Сommit
928b4d3088
4 измененных файлов: 69 добавлений и 2 удалений
Единый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +25
    -0
      macrovision.css
  2. +6
    -2
      macrovision.html
  3. +25
    -0
      macrovision.js
  4. +13
    -0
      media/ui/arrow.svg

+ 25
- 0
macrovision.css Просмотреть файл

@@ -286,6 +286,31 @@ body #test-canvas {
transform: scale(2); transform: scale(2);
} }


.top-name {
display: none;
text-align: center;
position: fixed;
max-width: 150px;
height: 50px;
transform: translate(-50%, 20pt);
z-index: 1001;
}

body.toggle-top-name .top-name.top-name-needed {
display: block;
}

.top-name::after {
display: block;
background-image: url("./media/ui/arrow.svg");
width: 70px;
height: 70px;
background-size: 70px 70px;
background-repeat: no-repeat;
content: "";
transform: translate(0, -120%);
}

.bottom-name { .bottom-name {
display: none; display: none;
text-align: center; text-align: center;


+ 6
- 2
macrovision.html Просмотреть файл

@@ -27,7 +27,7 @@
<link rel="icon" href="https://crux.sexy/images/macrovision.ico"> <link rel="icon" href="https://crux.sexy/images/macrovision.ico">
</head> </head>


<body class="">
<body class="toggle-bottom-name toggle-top-name">
<div id="help"> <div id="help">
<h1>Discord</h1> <h1>Discord</h1>
<p> <p>
@@ -140,9 +140,13 @@
<label for="options-world-show-names">Names over entities</label> <label for="options-world-show-names">Names over entities</label>
</div> </div>
<div class="options-row"> <div class="options-row">
<input type="checkbox" id="options-world-show-bottom-names">
<input type="checkbox" id="options-world-show-bottom-names" checked="true">
<label for="options-world-show-bottom-names">Names at bottom</label> <label for="options-world-show-bottom-names">Names at bottom</label>
</div> </div>
<div class="options-row">
<input type="checkbox" id="options-world-show-top-names" checked="true">
<label for="options-world-show-top-names">Arrows for very large entities</label>
</div>
<div class="options-row"> <div class="options-row">
<input type="checkbox" id="options-world-show-height-bars"> <input type="checkbox" id="options-world-show-height-bars">
<label for="options-world-show-height-bars">Height bars</label> <label for="options-world-show-height-bars">Height bars</label>


+ 25
- 0
macrovision.js Просмотреть файл

@@ -132,6 +132,18 @@ function updateEntityElement(entity, element) {
bottomName.style.left = position.x + entityX + "px"; bottomName.style.left = position.x + entityX + "px";
bottomName.style.top = "95vh"; bottomName.style.top = "95vh";
bottomName.innerText = entity.name; bottomName.innerText = entity.name;

const topName = document.querySelector("#top-name-" + element.dataset.key);

topName.style.left = position.x + entityX + "px";
topName.style.top = "20vh";
topName.innerText = entity.name;

if (entity.views[view].height.toNumber("meters") / 10 > config.height.toNumber("meters")) {
topName.classList.add("top-name-needed");
} else {
topName.classList.remove("top-name-needed");
}
} }


function updateSizes(dirtyOnly = false) { function updateSizes(dirtyOnly = false) {
@@ -917,6 +929,15 @@ function displayEntity(entity, view, x, y, selectEntity=false) {
bottomName.addEventListener("click", () => select(box)); bottomName.addEventListener("click", () => select(box));


world.appendChild(bottomName); world.appendChild(bottomName);

const topName = document.createElement("div");
topName.classList.add("top-name");
topName.id = "top-name-" + entityIndex;
topName.innerText = entity.name;

topName.addEventListener("click", () => select(box));

world.appendChild(topName);
entityIndex += 1; entityIndex += 1;
if (config.autoFit) { if (config.autoFit) {
fitWorld(); fitWorld();
@@ -985,6 +1006,10 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name"); document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
}); });


document.querySelector("#options-world-show-top-names").addEventListener("input", e => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-top-name");
});

document.querySelector("#options-world-show-height-bars").addEventListener("input", e => { document.querySelector("#options-world-show-height-bars").addEventListener("input", e => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars"); document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars");
}); });


+ 13
- 0
media/ui/arrow.svg Просмотреть файл

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 122.31 196.32" style="enable-background:new 0 0 122.31 196.32;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#424242;stroke-width:10;stroke-miterlimit:10;}
.st1{fill:none;stroke:#7A7A7A;stroke-width:10;stroke-miterlimit:10;}
</style>
<g>
<line class="st0" x1="61.14" y1="196.32" x2="61.14" y2="7.07"/>
<polyline class="st1" points="118.77,64.7 61.14,7.07 3.54,64.68 "/>
</g>
</svg>

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить