v1.5.16 - further optimization

modules/relief-icons.js

@@ -35,7 +35,7 @@
           let h = rn((4 + Math.random()) * size, 2);
           const icon = getBiomeIcon(i, biomesData.icons[b]);
           if (icon === "#relief-grass-1") h *= 1.3;
-          relief.push({i: icon, x: rn(cx-h, 2), y: rn(cy-h, 2), s: h*2});
+          relief.push({i: icon, x: rn(cx-h, 2), y: rn(cy-h, 2), s: rn(h*2, 2)});
         }
       }
 
@@ -45,7 +45,7 @@
 
         for (const [cx, cy] of poissonDiscSampler(e[0], e[1], e[2], e[3], radius)) {
           if (!d3.polygonContains(polygon, [cx, cy])) continue;
-          relief.push({i: icon, x: rn(cx-h, 2), y: rn(cy-h, 2), s: h*2});
+          relief.push({i: icon, x: rn(cx-h, 2), y: rn(cy-h, 2), s: rn(h*2, 2)});
         }
       }
 
@@ -64,7 +64,7 @@
     void function renderRelief() {
       let reliefHTML = "";
       for (const r of relief) {
-        reliefHTML += `<use xlink:href="${r.i}" data-type="${r.i}" x=${r.x} y=${r.y} data-size=${r.s} width=${r.s} height=${r.s}></use>`;
+        reliefHTML += `<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`;
       }
       terrain.html(reliefHTML);
     }()

modules/save-and-load.js

@@ -81,6 +81,8 @@ async function getMapURL(type, subtype) {
   const clone = d3.select(cloneEl);
   clone.select("#debug").remove();
 
+  const defs = cloneEl.getElementsByTagName("defs")[0];
+
   const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove();
   if (subtype === "globe") clone.select("#scaleBar").remove();
@@ -126,10 +128,30 @@ async function getMapURL(type, subtype) {
   const symbols = cloneEl.querySelectorAll("symbol");
   for (let i=0; i < symbols.length; i++) {
     const id = symbols[i].id;
-    if (cloneEl.querySelector("[use='#"+id+"']")) continue;
+    if (cloneEl.querySelector("use[href='#"+id+"']")) continue;
     symbols[i].remove();
   }
 
+  // add ocean pattern
+  const patternId = cloneEl.getElementById("oceanicPattern").getAttribute("filter").slice(5,-1);
+  const pattern = document.getElementById(patternId);
+  if (patternId) defs.appendChild(pattern.cloneNode(true));
+
+  // add relief icons
+  if (cloneEl.getElementById("terrain")) {
+    const uniqueElements = new Set();
+    const terrainElements = cloneEl.getElementById("terrain").childNodes;
+    for (let i=0; i < terrainElements.length; i++) {
+      uniqueElements.add(terrainElements[i].getAttribute("href"));
+    }
+
+    const defsRelief = document.getElementById("defs-relief");
+    for (const terrain of [...uniqueElements]) {
+      const element = defsRelief.querySelector(terrain);
+      if (element) defs.appendChild(element.cloneNode(true));
+    }
+  }
+
   if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching").remove(); //remove unused hatching group
   if (!cloneEl.getElementById("defs-icons").children.length) cloneEl.getElementById("defs-icons").remove(); //remove unused icons group
   if (!cloneEl.getElementById("compass")) cloneEl.getElementById("rose").remove(); //remove unused rose

modules/ui/relief-editor.js

@@ -54,7 +54,7 @@ function editReliefIcon() {
   }
 
   function updateReliefIconSelected() {
-    const type = elSelected.attr("data-type");
+    const type = elSelected.attr("href");
     const button = reliefIconsDiv.querySelector("svg[data-type='"+type+"']");
 
     reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed"));
@@ -65,7 +65,7 @@ function editReliefIcon() {
   }
 
   function updateReliefSizeInput() {
-    const size = +elSelected.attr("data-size");
+    const size = +elSelected.attr("width");
     reliefSize.value = reliefSizeNumber.value = rn(size);
   }
 
@@ -146,14 +146,15 @@ function editReliefIcon() {
         const x = rn(cx-h, 2);
         const y = rn(cy-h, 2);
         const z = y + h * 2;
+        const s = rn(h*2, 2);
 
         let nth = 1;
         while (positions[nth] && z > positions[nth]) {nth++;}
 
         tree.add([cx, cy]);
         positions.push(z);
-        terrain.insert("use", ":nth-child("+nth+")").attr("xlink:href", type).attr("data-type", type)
+        terrain.insert("use", ":nth-child("+nth+")").attr("href", type)
-          .attr("x", x).attr("y", y).attr("data-size", h*2).attr("width", h*2).attr("height", h*2);
+          .attr("x", x).attr("y", y).attr("width", s).attr("height", s);
       });
 
     });
@@ -178,7 +179,7 @@ function editReliefIcon() {
 
     const r = +reliefRadiusNumber.value;
     const type = pressed.dataset.type;
-    const icons = type ? terrain.selectAll("use[data-type='"+type+"']") : terrain.selectAll("use");
+    const icons = type ? terrain.selectAll("use[href='"+type+"']") : terrain.selectAll("use");
     const tree = d3.quadtree();
     icons.each(function() {
       const x = +this.getAttribute("x") + this.getAttribute("width") / 2;
@@ -198,7 +199,7 @@ function editReliefIcon() {
     if (!reliefIndividual.classList.contains("pressed")) return;
 
     const shift = (size - +elSelected.attr("width")) / 2;
-    elSelected.attr("width", size).attr("height", size).attr("data-size", size);
+    elSelected.attr("width", size).attr("height", size);
     const x = +elSelected.attr("x"), y = +elSelected.attr("y");
     elSelected.attr("x", x-shift).attr("y", y-shift);
   }
@@ -217,7 +218,7 @@ function editReliefIcon() {
 
     if (reliefIndividual.classList.contains("pressed")) {
       const type = this.dataset.type;
-      elSelected.attr("xlink:href", type).attr("data-type", type);
+      elSelected.attr("href", type);
     }
   }