diff --git a/macrovision.css b/macrovision.css
index 849a451f..2fead511 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -173,6 +173,7 @@ body.toggle-entity-name .entity-name {
}
#world {
+ position: relative;
flex: 9 0 85vw;
min-height: 85vh;
max-height: 85vh;
@@ -371,4 +372,38 @@ a {
#options-attribution-source {
text-align: center;
+}
+
+.floating-slider {
+ position: absolute;
+ z-index: 1000;
+ width: 250px;
+ height: 50px;
+}
+
+#slider-scale {
+ top: 1%;
+ left: 5%;
+}
+
+#slider-scale:before {
+ content: "World scale";
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ font-size: 20px;
+}
+
+#slider-entity-scale {
+ display: none;
+ top: 1%;
+ right: 5%;
+}
+
+#slider-entity-scale:before {
+ content: "Entity scale";
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ font-size: 20px;
}
\ No newline at end of file
diff --git a/macrovision.html b/macrovision.html
index a4abf4f7..8696d781 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -150,6 +150,8 @@
+
+
diff --git a/macrovision.js b/macrovision.js
index 3d7ccae2..f20582c6 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -16,6 +16,12 @@ let entityX;
let canvasWidth;
let canvasHeight;
+let dragScale = 1;
+let dragScaleHandle = null;
+
+let dragEntityScale = 1;
+let dragEntityScaleHandle = null;
+
const unitChoices = {
length: [
"meters",
@@ -358,6 +364,7 @@ function deselect() {
clearViewList();
clearEntityOptions();
clearViewOptions();
+ document.querySelector("#slider-entity-scale").style.display = "none";
}
function select(target) {
@@ -372,6 +379,7 @@ function select(target) {
configViewList(selectedEntity, selectedEntity.view);
configEntityOptions(selectedEntity, selectedEntity.view);
configViewOptions(selectedEntity, selectedEntity.view);
+ document.querySelector("#slider-entity-scale").style.display = "block";
}
function configViewList(entity, selectedView) {
@@ -859,9 +867,67 @@ window.onfocus = function () {
window.dispatchEvent(new Event("keydown"));
}
+function doSliderScale() {
+ setWorldHeight(config.height, math.multiply(config.height, (9 + sliderScale) / 10));
+}
+
+function doSliderEntityScale() {
+ if (selected) {
+ console.log(selected)
+ entities[selected.dataset.key].scale *= (9 + sliderEntityScale) / 10;
+ updateSizes();
+ }
+}
+
document.addEventListener("DOMContentLoaded", () => {
prepareEntities();
+ document.querySelector("#slider-scale").addEventListener("mousedown", e => {
+ dragScaleHandle = setInterval(doSliderScale, 50);
+ });
+
+ document.querySelector("#slider-scale").addEventListener("touchstart", e => {
+ dragScaleHandle = setInterval(doSliderScale, 50);
+ });
+
+ 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 => {
+ dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
+ });
+
+ document.querySelector("#slider-entity-scale").addEventListener("touchstart", e => {
+ dragEntityScaleHandle = setInterval(doSliderEntityScale, 50);
+ });
+
+ 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]) => {