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]) => {