diff --git a/macrovision.css b/macrovision.css
index cd34b224..b365f916 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -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%;
}
\ No newline at end of file
diff --git a/macrovision.html b/macrovision.html
index 67329722..19297d4b 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -136,10 +136,6 @@
-
+
+
-
-
+
+
diff --git a/macrovision.js b/macrovision.js
index 500f9e98..c2a5ed82 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -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 => {