feat: allow to render ocean heightmap - test

modules/ui/layers.js

@@ -268,12 +268,14 @@ function drawHeightmap() {
     }
   }
 
+  return;
+
   // render paths
-  for (const h of d3.range(0, 101)) {
-    const group = h < 20 ? ocean : land;
+  for (const height of d3.range(0, 101)) {
+    const group = height < 20 ? ocean : land;
     const scheme = getColorScheme(group.attr("scheme"));
 
-    if (h === 0 && renderOceanCells) {
+    if (height === 0 && renderOceanCells) {
       // draw base ocean layer
       group
         .append("rect")
@@ -284,7 +286,7 @@ function drawHeightmap() {
         .attr("fill", scheme(1));
     }
 
-    if (h === 20) {
+    if (height === 20) {
       // draw base land layer
       group
         .append("rect")
@@ -295,21 +297,21 @@ function drawHeightmap() {
         .attr("fill", scheme(0.8));
     }
 
-    if (paths[h] && paths[h].length >= 10) {
+    if (paths[height] && paths[height].length >= 10) {
       const curve = group.attr("curve") || "curveBasisClosed";
       lineGen.curve(d3[curve]);
-      const terracing = group.attr("terracing") / 10 || 0; // shifted darker layer for pseudo-3d effect
-      const color = getColor(h, scheme);
+      const terracing = group.attr("terracing") / 10 || 0;
+      const color = getColor(height, scheme);
 
-      if (terracing && h >= 20) {
-        land
+      if (terracing) {
+        group
           .append("path")
-          .attr("d", paths[h])
+          .attr("d", paths[height])
           .attr("transform", "translate(.7,1.4)")
           .attr("fill", d3.color(color).darker(terracing))
-          .attr("data-height", h);
+          .attr("data-height", height);
       }
-      group.append("path").attr("d", paths[h]).attr("fill", color).attr("data-height", h);
+      group.append("path").attr("d", paths[height]).attr("fill", color).attr("data-height", height);
     }
   }
 

modules/ui/style.js

@@ -31,6 +31,7 @@ function editStyle(element, group) {
 
   styleElementSelect.classList.add("glow");
   if (group) styleGroupSelect.classList.add("glow");
+
   setTimeout(() => {
     styleElementSelect.classList.remove("glow");
     if (group) styleGroupSelect.classList.remove("glow");
@@ -81,10 +82,10 @@ function selectStyleElement() {
   styleIsOff.style.display = isLayerOff ? "block" : "none";
 
   // active group element
-  const group = styleGroupSelect.value;
-  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
-    const gEl = group && el.select("#" + group);
-    el = group && gEl.size() ? gEl : el.select("g");
+  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders", "terrs"].includes(styleElement)) {
+    const group = styleGroupSelect.value;
+    const defaultGroupSelector = styleElement === "terrs" ? "#landHeights" : "g";
+    el = group && el.select("#" + group).size() ? el.select("#" + group) : el.select(defaultGroupSelector);
   }
 
   // opacity
@@ -170,11 +171,14 @@ function selectStyleElement() {
 
   if (styleElement === "terrs") {
     styleHeightmap.style.display = "block";
-    styleHeightmapScheme.value = terrs.attr("scheme");
-    styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing");
-    styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr("skip");
-    styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr("relax");
-    styleHeightmapCurve.value = terrs.attr("curve");
+    styleHeightmapRenderOceanOption.style.display = el.attr("id") === "oceanHeights" ? "block" : "none";
+    styleHeightmapRenderOcean.checked = +el.attr("data-render");
+
+    styleHeightmapScheme.value = el.attr("scheme");
+    styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = el.attr("terracing");
+    styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = el.attr("skip");
+    styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = el.attr("relax");
+    styleHeightmapCurve.value = el.attr("curve");
   }
 
   if (styleElement === "markers") {
@@ -336,7 +340,7 @@ function selectStyleElement() {
 
   // update group options
   styleGroupSelect.options.length = 0; // remove all options
-  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
+  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders", "terrs"].includes(styleElement)) {
     const groups = byId(styleElement).querySelectorAll("g");
     groups.forEach(el => {
       if (el.id === "burgLabels") return;
@@ -519,18 +523,16 @@ outlineLayers.addEventListener("change", function () {
 });
 
 styleHeightmapScheme.addEventListener("change", function () {
-  terrs.attr("scheme", this.value);
+  getEl().attr("scheme", this.value);
   drawHeightmap();
 });
 
 openCreateHeightmapSchemeButton.addEventListener("click", function () {
   // start with current scheme
-  this.dataset.stops = terrs.attr("scheme").startsWith("#")
-    ? terrs.attr("scheme")
-    : (function () {
-        const scheme = heightmapColorSchemes[terrs.attr("scheme")];
-        return [0, 0.25, 0.5, 0.75, 1].map(scheme).map(toHEX).join(",");
-      })();
+  const scheme = getEl().attr("scheme");
+  this.dataset.stops = scheme.startsWith("#")
+    ? scheme
+    : (() => [0, 0.25, 0.5, 0.75, 1].map(heightmapColorSchemes[scheme]).map(toHEX).join(","))();
 
   // render dialog base structure
   alertMessage.innerHTML = /* html */ `<div>
@@ -622,7 +624,7 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
     if (stops in heightmapColorSchemes) return tip("This scheme already exists", false, "error");
 
     addCustomColorScheme(stops);
-    terrs.attr("scheme", stops);
+    getEl().attr("scheme", stops);
     drawHeightmap();
 
     handleClose();
@@ -644,23 +646,28 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
   });
 });
 
+styleHeightmapRenderOcean.addEventListener("change", function () {
+  getEl().attr("data-render", +this.checked);
+  drawHeightmap();
+});
+
 styleHeightmapTerracingInput.addEventListener("input", function () {
-  terrs.attr("terracing", this.value);
+  getEl().attr("terracing", this.value);
   drawHeightmap();
 });
 
 styleHeightmapSkipInput.addEventListener("input", function () {
-  terrs.attr("skip", this.value);
+  getEl().attr("skip", this.value);
   drawHeightmap();
 });
 
 styleHeightmapSimplificationInput.addEventListener("input", function () {
-  terrs.attr("relax", this.value);
+  getEl().attr("relax", this.value);
   drawHeightmap();
 });
 
 styleHeightmapCurve.addEventListener("change", function () {
-  terrs.attr("curve", this.value);
+  getEl().attr("curve", this.value);
   drawHeightmap();
 });
 

modules/ui/stylePresets.js

@@ -239,7 +239,18 @@ function addStylePreset() {
       "#oceanLayers": ["filter", "layers"],
       "#oceanBase": ["fill"],
       "#oceanicPattern": ["href", "opacity"],
-      "#terrs": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"],
+      "#terrs #oceanHeights": [
+        "data-render",
+        "opacity",
+        "scheme",
+        "terracing",
+        "skip",
+        "relax",
+        "curve",
+        "filter",
+        "mask"
+      ],
+      "#terrs #landHeights": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"],
       "#legend": [
         "data-size",
         "font-size",