From 1e83dcd6fadc16f8fd168553ce492ae724bdd758 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Sat, 8 Feb 2020 09:49:12 -0500 Subject: [PATCH] Add an option to automatically set the world height --- macrovision.css | 14 ++++++++++++++ macrovision.html | 6 ++++++ macrovision.js | 30 ++++++++++++++++++++++++++++-- 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/macrovision.css b/macrovision.css index 8878c0f3..8f08b849 100644 --- a/macrovision.css +++ b/macrovision.css @@ -192,11 +192,25 @@ body.toggle-entity-name .entity-name { font-size: 150%; } +.options-row label { + flex: 1; + width: 100%; + font-size: 150%; +} + body #test-canvas { position: fixed; top: 100vh; } +.switch { + height: 24pt; +} + +.switch input { + transform: scale(2); +} + .bottom-name { display: none; text-align: center; diff --git a/macrovision.html b/macrovision.html index 17f0d6fc..6fbe9dcc 100644 --- a/macrovision.html +++ b/macrovision.html @@ -49,6 +49,12 @@
+
+ +
Entity options
diff --git a/macrovision.js b/macrovision.js index ba9d7225..f1dce30f 100644 --- a/macrovision.js +++ b/macrovision.js @@ -29,7 +29,8 @@ const unitChoices = { const config = { height: math.unit(1500, "meters"), minLineSize: 50, - maxLineSize: 250 + maxLineSize: 250, + autoFit: false } const availableEntities = { @@ -325,6 +326,10 @@ function configEntityOptions(entity, view) { scaleInput.addEventListener("input", e => { entity.scale = e.target.value; + + if (config.autoFit) { + fitWorld(); + } updateSizes(); updateEntityOptions(entity, view); updateViewOptions(entity, view); @@ -408,6 +413,10 @@ function configViewOptions(entity, view) { input.addEventListener("input", e => { entity.views[view][key] = math.unit(input.value, select.value); + + if (config.autoFit) { + fitWorld(); + } updateSizes(); updateEntityOptions(entity, view); updateViewOptions(entity, view, key); @@ -415,6 +424,10 @@ function configViewOptions(entity, view) { select.addEventListener("input", e => { entity.views[view][key] = math.unit(input.value, select.value); + + if (config.autoFit) { + fitWorld(); + } updateSizes(); updateEntityOptions(entity, view); updateViewOptions(entity, view, key); @@ -554,6 +567,10 @@ function displayEntity(entity, view, x, y) { entityIndex += 1; updateEntityElement(entity, box); + + if (config.autoFit) { + fitWorld(); + } } document.addEventListener("DOMContentLoaded", () => { @@ -627,6 +644,15 @@ document.addEventListener("DOMContentLoaded", () => { document.querySelector("#options-world-fit").addEventListener("click", fitWorld); + document.querySelector("#options-world-autofit").addEventListener("input", e => { + config.autoFit = e.target.value; + + + if (config.autoFit) { + fitWorld(); + } + }); + prepareEntities(); }); @@ -651,7 +677,7 @@ function prepareEntities() { button.innerText = "Create " + category; button.addEventListener("click", e => { const newEntity = entityList[select.value].constructor() - displayEntity(newEntity, newEntity.defaultView, 0.5, 0.5); + displayEntity(newEntity, newEntity.defaultView, 0.5, 1); }); holder.appendChild(select);