v1.22

modules/ui/general.js

@@ -284,7 +284,7 @@ function showInfo() {
 
 // prevent default browser behavior for FMG-used hotkeys
 document.addEventListener("keydown", event => {
-  if (event.altKey && event.keyCode !== 18) event.preventDefault(); // disallowalt key combinations
+  if (event.altKey && event.keyCode !== 18) event.preventDefault(); // disallow alt key combinations
   if ([112, 113, 117, 120, 9].includes(event.keyCode)) event.preventDefault(); // F1, F2, F6, F9, Tab
 });
 
@@ -307,18 +307,8 @@ document.addEventListener("keyup", event => {
   else if (key === 9) toggleOptions(event); // Tab to toggle options
   else if (key === 27) {closeDialogs(); hideOptions();} // Escape to close all dialogs
   else if (key === 46) removeElementOnKey(); // "Delete" to remove the selected element
+  else if (key === 79 && canvas3d) toggle3dOptions(); // "O" to toggle 3d options
 
-  else if (key === 83 && canvas3d) saveScreenshot(); // "S" to save a screenshot
-  else if (key === 82 && canvas3d) toggleRotation(); // "R" to toggle 3d rotation
-  else if (key === 85 && canvas3d && customization !== 1) update3d(); // "U" to update 3d view
-
-  else if (ctrl && key === 80) savePNG(); // Ctrl + "P" to save as PNG
-  else if (ctrl && key === 71) saveJPEG(); // Ctrl + "J" to save as JPEG
-  else if (ctrl && key === 83) saveSVG(); // Ctrl + "S" to save as SVG
-  else if (ctrl && key === 77) saveMap(); // Ctrl + "M" to save MAP file
-  else if (ctrl && key === 71) saveGeoJSON(); // Ctrl + "G" to save as GeoJSON
-  else if (ctrl && key === 85) mapToLoad.click(); // Ctrl + "U" to load MAP from URL
-  else if (ctrl && key === 76) mapToLoad.click(); // Ctrl + "L" to load MAP from local file
   else if (ctrl && key === 81) toggleSaveReminder(); // Ctrl + "Q" to toggle save reminder
   else if (undo.offsetParent && ctrl && key === 90) undo.click(); // Ctrl + "Z" to undo
   else if (redo.offsetParent && ctrl && key === 89) redo.click(); // Ctrl + "Y" to redo

modules/ui/heightmap-editor.js

@@ -413,7 +413,7 @@ function editHeightmap() {
     if (!noStat) {
       updateStatistics();
       if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
-      if (document.getElementById("canvas3d")) update3dPreview(canvas3d); // update 3d heightmap preview if opened
+      if (document.getElementById("canvas3d")) ThreeD.redraw(); // update 3d heightmap preview if opened
     }
   }
 
@@ -428,7 +428,7 @@ function editHeightmap() {
     updateStatistics();
     
     if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
-    if (document.getElementById("canvas3d")) update3dPreview(canvas3d); // update 3d heightmap preview if opened
+    if (document.getElementById("canvas3d")) ThreeD.redraw(); // update 3d heightmap preview if opened
   }
 
   // restart edits from 1st step
@@ -869,7 +869,7 @@ function editHeightmap() {
       updateStatistics();
       mockHeightmap();
       if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
-      if (document.getElementById("canvas3d")) update3dPreview(canvas3d); // update 3d heightmap preview if opened
+      if (document.getElementById("canvas3d")) ThreeD.redraw(); // update 3d heightmap preview if opened
     }
 
     function downloadTemplate() {
@@ -1203,13 +1203,15 @@ function editHeightmap() {
     canvas.style.display = "block";
     canvas.width = parseFloat(preview3d.style.width) || graphWidth / 3;
     canvas.height = canvas.width / (graphWidth / graphHeight);
-    const started = await start3d(canvas);
+    const started = ThreeD.create(canvas);
     if (!started) return;
+
     document.getElementById("preview3d").appendChild(canvas);
     canvas.onmouseenter = () => {
       +canvas.dataset.hovered > 2 ? tip("") : tip("Left mouse to change angle, middle mouse or mousewheel to zoom, right mouse to pan. R to toggle rotation");
       canvas.dataset.hovered = (+canvas.dataset.hovered|0) + 1;
     };
+    show3dOptions();
 
     $("#preview3d").dialog({
       title: "3D Preview", resizable: true,
@@ -1220,11 +1222,11 @@ function editHeightmap() {
     function resize3d() {
       canvas.width = parseFloat(preview3d.style.width);
       canvas.height = parseFloat(preview3d.style.height) - 2;
-      update3dPreview(canvas);
+      ThreeD.redraw();
     }
 
     function close3dPreview() {
-      stop3d();
+      ThreeD.stop();
       canvas.remove();
     }
   }

modules/ui/layers.js

@@ -71,7 +71,7 @@ function changePreset(preset) {
   const isDefault = getDefaultPresets()[preset];
   removePresetButton.style.display = isDefault ? "none" : "inline-block";
   savePresetButton.style.display = "none";
-  if (document.getElementById("canvas3d")) setTimeout(update3d, 300);
+  if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 400);
 }
 
 function savePreset() {
@@ -115,11 +115,6 @@ function getCurrentPreset() {
   savePresetButton.style.display = "inline-block";
 }
 
-// update 3d view is layer is toggled
-document.getElementById("mapLayers").addEventListener("click", () => {
-  if (document.getElementById("canvas3d")) setTimeout(update3d, 300);
-});
-
 function toggleHeight(event) {
   if (!terrs.selectAll("*").size()) {
     turnButtonOn("toggleHeight");

modules/ui/options.js

@@ -298,7 +298,7 @@ function applyStoredOptions() {
 
   if (localStorage.getItem("winds")) winds = localStorage.getItem("winds").split(",").map(w => +w);
 
-  changeDialogsTransparency(localStorage.getItem("transparency") || 15);
+  changeDialogsTransparency(localStorage.getItem("transparency") || 5);
   if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize"));
   if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
 
@@ -444,8 +444,9 @@ function changeViewMode(event) {
 
 function enterStandardView() {
   if (!document.getElementById("canvas3d")) return;
+  ThreeD.stop();
   document.getElementById("canvas3d").remove();
-  stop3d();
+  if (options3dUpdate.offsetParent) $("#options3d").dialog("close");
 }
 
 async function enter3dView(type) {
@@ -457,13 +458,101 @@ async function enter3dView(type) {
   canvas.style.position = "absolute";
   canvas.style.display = "none";
   canvas.dataset.type = type;
-  const started = type === "viewGlobe" ? await startGlobe(canvas) : await start3d(canvas);
+  const started = await ThreeD.create(canvas, type);
   if (!started) return;
   canvas.style.display = "block";
   document.body.insertBefore(canvas, optionsContainer);
   canvas.onmouseenter = () => {
-    const help = "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan.\r\n<b>R</b> to toggle rotation. <b>U</b> to update. <b>S</b> to get a screenshot";
+    const help = "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
     +canvas.dataset.hovered > 2 ? tip("") : tip(help);
     canvas.dataset.hovered = (+canvas.dataset.hovered|0) + 1;
   };
+  toggle3dOptions();
+}
+
+function toggle3dOptions() {
+  if (options3dUpdate.offsetParent) {$("#options3d").dialog("close"); return;}
+  $("#options3d").dialog({
+    title: "3D mode settings", resizable: false, width: fitContent(),
+    position: {my: "right top", at: "right-40 top+10", of: "svg", collision: "fit"}
+  });
+
+  updateValues();
+
+  if (modules.options3d) return;
+  modules.options3d = true;
+
+  document.getElementById("options3dUpdate").addEventListener("click", ThreeD.update);
+  document.getElementById("options3dSave").addEventListener("click", ThreeD.saveScreenshot);
+
+  document.getElementById("options3dScaleRange").addEventListener("input", changeHeightScale);
+  document.getElementById("options3dScaleNumber").addEventListener("change", changeHeightScale);
+  document.getElementById("options3dLightnessRange").addEventListener("input", changeLightness);
+  document.getElementById("options3dLightnessNumber").addEventListener("change", changeLightness);
+  document.getElementById("options3dSunX").addEventListener("change", changeSunPosition);
+  document.getElementById("options3dSunY").addEventListener("change", changeSunPosition);
+  document.getElementById("options3dSunZ").addEventListener("change", changeSunPosition);
+  document.getElementById("options3dMeshRotationRange").addEventListener("input", changeRotation);
+  document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation);
+  document.getElementById("options3dGlobeRotationRange").addEventListener("input", changeRotation);
+  document.getElementById("options3dGlobeRotationNumber").addEventListener("change", changeRotation);
+  document.getElementById("options3dMeshSkyMode").addEventListener("change", toggleSkyMode);
+  document.getElementById("options3dMeshSky").addEventListener("input", changeColors);
+  document.getElementById("options3dMeshWater").addEventListener("input", changeColors);
+  document.getElementById("options3dGlobeResolution").addEventListener("change", changeResolution);
+
+  function updateValues() {
+    const globe = document.getElementById("canvas3d").dataset.type === "viewGlobe";
+    options3dMesh.style.display = globe ? "none" : "block";
+    options3dGlobe.style.display = globe ? "block" : "none";
+    options3dScaleRange.value = options3dScaleNumber.value = ThreeD.options.scale;
+    options3dLightnessRange.value = options3dLightnessNumber.value = ThreeD.options.lightness * 100;
+    options3dSunX.value = ThreeD.options.sun.x;
+    options3dSunY.value = ThreeD.options.sun.y;
+    options3dSunZ.value = ThreeD.options.sun.z;
+    options3dMeshRotationRange.value = options3dMeshRotationNumber.value = ThreeD.options.rotateMesh;
+    options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe;
+    options3dMeshSkyMode.value = ThreeD.options.extendedWater;
+    options3dColorSection.style.display = ThreeD.options.extendedWater ? "block" : "none";
+    options3dMeshSky.value = ThreeD.options.skyColor;
+    options3dMeshWater.value = ThreeD.options.waterColor;
+    options3dGlobeResolution.value = ThreeD.options.resolution;
+  }
+
+  function changeHeightScale() {
+    options3dScaleRange.value = options3dScaleNumber.value = this.value;
+    ThreeD.setScale(+this.value);
+  }
+
+  function changeLightness() {
+    options3dLightnessRange.value = options3dLightnessNumber.value = this.value;
+    ThreeD.setLightness(this.value / 100);
+  }
+
+  function changeSunPosition() {
+    const x = +options3dSunX.value;
+    const y = +options3dSunY.value;
+    const z = +options3dSunZ.value;
+    ThreeD.setSun(x, y, z);
+  }
+
+  function changeRotation() {
+    (this.nextElementSibling || this.previousElementSibling).value = this.value;
+    const speed = +this.value;
+    ThreeD.setRotation(speed);
+  }
+
+  function toggleSkyMode() {
+    const hide = ThreeD.options.extendedWater;
+    options3dColorSection.style.display = hide ? "none" : "block";
+    ThreeD.toggleSky();
+  }
+
+  function changeColors() {
+    ThreeD.setColors(options3dMeshSky.value, options3dMeshWater.value);
+  }
+
+  function changeResolution() {
+    ThreeD.setResolution(this.value);
+  }
 }