chemicalcrux
/
macrovision
1
0
Forkuj 0
Kod Zgłoszenia 5 Oczekujące zmiany 0 Wydania 10 Wiki Aktywność
Przeglądaj źródła

Add zoom and entity scale buttons. Remove the old sliders

tags/v0.1.0
Fen Dweller 6 lat temu
rodzic
41f3e5882d
commit
027709292e
3 zmienionych plików z 140 dodań i 133 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +23
    -41
      macrovision.css
  2. +12
    -7
      macrovision.html
  3. +105
    -85
      macrovision.js

+ 23
- 41
macrovision.css Wyświetl plik

@@ -496,45 +496,6 @@ a {
text-align: center;
}

.floating-slider {
display: none;
position: absolute;
z-index: 1000;
width: 250px;
height: 50px;
transform: translate(-50%, 0) scale(1.5);;
}

body.toggle-scale-sliders .floating-slider {
display: block;
}

#slider-scale {
top: 5%;
left: 50%;
}

#slider-scale:before {
content: "World scale";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
font-size: 20px;
}

#slider-entity-scale {
top: 15%;
left: 50%;
}

#slider-entity-scale:before {
content: "Entity scale";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
font-size: 20px;
}

.no-transition {
transition: 0s !important;
}
@@ -700,22 +661,43 @@ i.far {

.scroll-button {
position: absolute;
height: 100%;
height: 25%;
width: 50px;
font-size: 40px;
background: #ffffff33;
border: 0px;
z-index: 1;
z-index: 1002;
}

.scroll-button:active {
background: #ffffff66;
}

#zoom-out {
left: 0%;
top: 0%;
}

#zoom-in {
right: 0%;
top: 0%;
}
#scroll-left {
left: 0%;
top: 25%;
}

#scroll-right {
right: 0%;
top: 25%;
}

#shrink {
left: 0%;
top: 50%;
}

#grow {
right: 0%;
top: 50%;
}

+ 12
- 7
macrovision.html Wyświetl plik

@@ -136,10 +136,6 @@
<input type="checkbox" id="options-world-show-entity-glow">
<label for="options-world-show-entity-glow">Glowing edges</label>
</div>
<div class="options-row">
<input type="checkbox" id="options-world-show-scale-sliders">
<label for="options-world-show-scale-sliders">Scale sliders</label>
</div>
<div class="options-row">
<input type="checkbox" id="options-world-show-bottom-cover">
<label for="options-world-show-bottom-cover">Opaque ground</label>
@@ -211,15 +207,24 @@
</span>
</div>
<div id="world">
<button class="scroll-button" id="zoom-in">
<i class="fas fa-search-plus"></i>
</button>
<button class="scroll-button" id="zoom-out">
<i class="fas fa-search-minus"></i>
</button>
<button class="scroll-button" id="scroll-left">
<i class="fas fa-arrow-left"></i>
</button>
<button class="scroll-button" id="scroll-right">
<i class="fas fa-arrow-right"></i>
</button>
<input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-scale"/>
<input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-entity-scale"/>
<button class="scroll-button" id="shrink">
<i class="fas fa-compress-arrows-alt"></i>
</button>
<button class="scroll-button" id="grow">
<i class="fas fa-expand-arrows-alt"></i>
</button>
<div id="entities">

</div>


+ 105
- 85
macrovision.js Wyświetl plik

@@ -25,6 +25,12 @@ let dragEntityScaleHandle = null;
let scrollDirection = 0;
let scrollHandle = null;

let zoomDirection = 0;
let zoomHandle = null;

let sizeDirection = 0;
let sizeHandle = null;

let worldSizeDirty = false;


@@ -1130,27 +1136,6 @@ window.onfocus = function () {
window.dispatchEvent(new Event("keydown"));
}

function doSliderScale() {
if (sliderScale == 1) {
clearInterval(dragScaleHandle);
}
setWorldHeight(config.height, math.multiply(config.height, (9 + sliderScale) / 10));
}

function doSliderEntityScale() {
if (sliderEntityScale == 1) {
clearInterval(dragEntityScaleHandle);
}
if (selected) {
const entity = entities[selected.dataset.key];
entity.scale *= (9 + sliderEntityScale) / 10;
entity.dirty = true;
updateSizes(true);
updateEntityOptions(entity, entity.view);
updateViewOptions(entity, entity.view);
}
}

// thanks to https://developers.google.com/web/fundamentals/native-hardware/fullscreen

function toggleFullScreen() {
@@ -1313,6 +1298,25 @@ function doScroll() {
scrollDirection *= 1.05;
}

function doZoom() {
const oldHeight = config.height;

setWorldHeight(oldHeight, math.multiply(oldHeight, 1 + zoomDirection / 10));
zoomDirection *= 1.05;
}

function doSize() {
if (selected) {
const entity = entities[selected.dataset.key];
const oldHeight = entity.views[entity.view].height;
entity.views[entity.view].height = math.multiply(oldHeight, 1 + sizeDirection/20);
entity.dirty = true;
updateSizes(true);
sizeDirection *= 1.05;
}
}


document.addEventListener("DOMContentLoaded", () => {
prepareMenu();
prepareEntities();
@@ -1367,10 +1371,6 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-entity-glow");
});

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

document.querySelector("#options-world-show-bottom-cover").addEventListener("input", e => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-cover");
});
@@ -1395,60 +1395,6 @@ document.addEventListener("DOMContentLoaded", () => {
updateSizes();
});

document.querySelector("#slider-scale").addEventListener("mousedown", e => {
clearInterval(dragScaleHandle);
dragScaleHandle = setInterval(doSliderScale, 50);
e.stopPropagation();
});

document.querySelector("#slider-scale").addEventListener("touchstart", e => {
clearInterval(dragScaleHandle);
dragScaleHandle = setInterval(doSliderScale, 50);
e.stopPropagation();
});

document.querySelector("#slider-scale").addEventListener("input", e => {
const val = Number(e.target.value);
if (val < 1) {
sliderScale = (val + 1) / 2;
} else {
sliderScale = val;
}
});

document.querySelector("#slider-scale").addEventListener("change", e => {
clearInterval(dragScaleHandle);
dragScaleHandle = null;
e.target.value = 1;
});

document.querySelector("#slider-entity-scale").addEventListener("mousedown", e => {
clearInterval(dragEntityScaleHandle);
dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
e.stopPropagation();
});

document.querySelector("#slider-entity-scale").addEventListener("touchstart", e => {
clearInterval(dragEntityScaleHandle);
dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
e.stopPropagation();
});

document.querySelector("#slider-entity-scale").addEventListener("input", e => {
const val = Number(e.target.value);
if (val < 1) {
sliderEntityScale = (val + 1) / 2;
} else {
sliderEntityScale = val;
}
});

document.querySelector("#slider-entity-scale").addEventListener("change", e => {
clearInterval(dragEntityScaleHandle);
dragEntityScaleHandle = null;
e.target.value = 1;
});

const sceneChoices = document.querySelector("#scene-choices");

Object.entries(scenes).forEach(([id, scene]) => {
@@ -1620,36 +1566,110 @@ document.addEventListener("DOMContentLoaded", () => {
arrangeEntities(order);
});

document.querySelector("#scroll-left").addEventListener("mousedown", () => {
// TODO: write some generic logic for this lol

document.querySelector("#scroll-left").addEventListener("mousedown", e => {
scrollDirection = -1;
scrollHandle = setInterval(doScroll, 1000/20);
e.stopPropagation();
});

document.querySelector("#scroll-right").addEventListener("mousedown", () => {
document.querySelector("#scroll-right").addEventListener("mousedown", e => {
scrollDirection = 1;
scrollHandle = setInterval(doScroll, 1000/20);
e.stopPropagation();
});

document.querySelector("#scroll-left").addEventListener("touchstart", () => {
document.querySelector("#scroll-left").addEventListener("touchstart", e => {
scrollDirection = -1;
scrollHandle = setInterval(doScroll, 1000/20);
e.stopPropagation();
});

document.querySelector("#scroll-right").addEventListener("touchstart", () => {
document.querySelector("#scroll-right").addEventListener("touchstart", e => {
scrollDirection = 1;
scrollHandle = setInterval(doScroll, 1000/20);
e.stopPropagation();
});

document.addEventListener("mouseup", () => {
document.addEventListener("mouseup", e => {
clearInterval(scrollHandle);
scrollHandle = null;
});

document.addEventListener("touchend", () => {
document.addEventListener("touchend", e => {
clearInterval(scrollHandle);
scrollHandle = null;
});

document.querySelector("#zoom-in").addEventListener("mousedown", e => {
zoomDirection = -1;
zoomHandle = setInterval(doZoom, 1000/20);
e.stopPropagation();
});

document.querySelector("#zoom-out").addEventListener("mousedown", e => {
zoomDirection = 1;
zoomHandle = setInterval(doZoom, 1000/20);
e.stopPropagation();
});

document.querySelector("#zoom-in").addEventListener("touchstart", e => {
zoomDirection = -1;
zoomHandle = setInterval(doZoom, 1000/20);
e.stopPropagation();
});

document.querySelector("#zoom-out").addEventListener("touchstart", e => {
zoomDirection = 1;
zoomHandle = setInterval(doZoom, 1000/20);
e.stopPropagation();
});

document.addEventListener("mouseup", e => {
clearInterval(zoomHandle);
zoomHandle = null;
});

document.addEventListener("touchend", e => {
clearInterval(zoomHandle);
zoomHandle = null;
});

document.querySelector("#shrink").addEventListener("mousedown", e => {
sizeDirection = -1;
sizeHandle = setInterval(doSize, 1000/20);
e.stopPropagation();
});

document.querySelector("#grow").addEventListener("mousedown", e => {
sizeDirection = 1;
sizeHandle = setInterval(doSize, 1000/20);
e.stopPropagation();
});

document.querySelector("#shrink").addEventListener("touchstart", e => {
sizeDirection = -1;
sizeHandle = setInterval(doSize, 1000/20);
e.stopPropagation();
});

document.querySelector("#grow").addEventListener("touchstart", e => {
sizeDirection = 1;
sizeHandle = setInterval(doSize, 1000/20);
e.stopPropagation();
});

document.addEventListener("mouseup", e => {
clearInterval(sizeHandle);
sizeHandle = null;
});

document.addEventListener("touchend", e => {
clearInterval(sizeHandle);
sizeHandle = null;
});

document.querySelector("#options-world-fit").addEventListener("click", () => fitWorld(true));

document.querySelector("#options-world-autofit").addEventListener("input", e => {


Napisz Podgląd
Ładowanie…
Anuluj
Zapisz