grid patterns

modules/save-and-load.js

@@ -135,10 +135,15 @@ async function getMapURL(type, subtype) {
   }
 
   // replace ocean pattern href to base64
-  if (cloneEl.getElementById("oceanicPattern")) {
+  if (PRODUCTION && cloneEl.getElementById("oceanicPattern")) {
     const el = cloneEl.getElementById("oceanicPattern");
     const url = el.getAttribute("href");
-    getBase64(url, base64 => el.setAttribute("href", base64));
+    await new Promise(resolve => {
+      getBase64(url, base64 => {
+        el.setAttribute("href", base64);
+        resolve();
+      });
+    });
   }
 
   // add relief icons
@@ -169,6 +174,13 @@ async function getMapURL(type, subtype) {
     if (anchor) cloneDefs.appendChild(anchor.cloneNode(true));
   }
 
+  // add grid pattern
+  if (cloneEl.getElementById("gridOverlay")?.hasChildNodes()) {
+    const type = cloneEl.getElementById("gridOverlay").getAttribute("type");
+    const pattern = svgDefs.getElementById("pattern_"+type);
+    if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
+  }
+
   if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching").remove(); //remove unused hatching group
   if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog").remove(); //remove unused fog
   if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths").remove(); // removed unused statePaths
@@ -1185,6 +1197,11 @@ function parseLoadedData(data) {
       }
     }()
 
+    if (version < 1.62) {
+      // v 1.62 changed grid data
+      gridOverlay.attr("size", null);
+    }
+
     void function checkDataIntegrity() {
       const cells = pack.cells;
 
@@ -1274,6 +1291,7 @@ function parseLoadedData(data) {
 
     // draw data layers (no kept in svg)
     if (rulers && layerIsOn("toggleRulers")) rulers.draw();
+    if (layerIsOn("toggleGrid")) drawGrid();
 
     // set options
     yearInput.value = options.year;

modules/ui/layers.js

@@ -968,6 +968,8 @@ function toggleGrid(event) {
     turnButtonOn("toggleGrid");
     drawGrid();
     calculateFriendlyGridSize();
+
+
     if (event && isCtrlClick(event)) editStyle("gridOverlay");
   } else {
     if (event && isCtrlClick(event)) {editStyle("gridOverlay"); return;}
@@ -977,51 +979,19 @@ function toggleGrid(event) {
 }
 
 function drawGrid() {
-  TIME && console.time("drawGrid");
   gridOverlay.selectAll("*").remove();
-  const type = styleGridType.value;
-  const size = Math.max(+styleGridSize.value || +gridOverlay.attr("size"), 2);
-  if (type === "pointyHex" || type === "flatHex") {
-    const points = getHexGridPoints(size, type);
-    const hex = "m" + getHex(size, type).slice(0, 4).join("l");
-    const d = points.map(p => "M" + p + hex).join("");
-    gridOverlay.append("path").attr("d", d);
-  } else if (type === "square") {
-    const pathX = d3.range(size, svgWidth, size).map(x => "M" + rn(x, 2) + ",0v" + svgHeight).join(" ");
-    const pathY = d3.range(size, svgHeight, size).map(y => "M0," + rn(y, 2) + "h" + svgWidth).join(" ");
-    gridOverlay.append("path").attr("d", pathX + pathY);
-  }
+  const pattern = "#pattern_" + (gridOverlay.attr("type") || "pointyHex");
+  const stroke = gridOverlay.attr("stroke") || "#808080";
+  const width = gridOverlay.attr("stroke-width") || .5;
+  const dasharray = gridOverlay.attr("stroke-dasharray") || null;
+  const linecap = gridOverlay.attr("stroke-linecap") || null;
+  const scale = gridOverlay.attr("scale") || 1;
+  const dx = gridOverlay.attr("dx") || 0;
+  const dy = gridOverlay.attr("dy") || 0;
+  const tr = `scale(${scale}) translate(${dx} ${dy})`;
 
-  // calculate hexes centers
-  function getHexGridPoints(size, type) {
-    const points = [];
-    const rt3 = Math.sqrt(3);
-    const off = type === "pointyHex" ? rn(rt3 * size / 2, 2) : rn(size * 3 / 2, 2);
-    const ySpace = type === "pointyHex" ? rn(size * 3 / 2, 2) : rn(rt3 * size / 2, 2);
-    const xSpace = type === "pointyHex" ? rn(rt3 * size, 2) : rn(size * 3, 2);
-    for (let y = 0, l = 0; y < graphHeight+ySpace; y += ySpace, l++) {
-      for (let x = l % 2 ? 0 : off; x < graphWidth+xSpace; x += xSpace) {points.push([rn(x, 2), rn(y, 2)]);}
-    }
-    return points;
-  }
-
-  // calculate hex points
-  function getHex(radius, type) {
-    let x0 = 0, y0 = 0;
-    const s = type === "pointyHex" ? 0 : Math.PI / -6;
-    const thirdPi = Math.PI / 3;
-    let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
-    return angles.map(function(a) {
-      const x1 = Math.sin(a) * radius;
-      const y1 = -Math.cos(a) * radius;
-      const dx = rn(x1 - x0, 2);
-      const dy = rn(y1 - y0, 2);
-      x0 = x1, y0 = y1;
-      return [rn(dx, 2), rn(dy, 2)];
-    });
-  }
-
-  TIME && console.timeEnd("drawGrid");
+  d3.select(pattern).attr("stroke", stroke).attr("stroke-width", width).attr("stroke-dasharray", dasharray).attr("stroke-linecap", linecap).attr("patternTransform", tr);
+  gridOverlay.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "url(" + pattern + ")").attr("stroke", "none");
 }
 
 function toggleCoordinates(event) {

modules/utils.js

@@ -605,15 +605,15 @@ JSON.isValid = str => {
 
 function getBase64(url, callback) {
   const xhr = new XMLHttpRequest();
-  xhr.onload = function() {
+  xhr.onload = function () {
     const reader = new FileReader();
-    reader.onloadend = function() {
+    reader.onloadend = function () {
       callback(reader.result);
-    }
+    };
     reader.readAsDataURL(xhr.response);
   };
-  xhr.open('GET', url);
-  xhr.responseType = 'blob';
+  xhr.open("GET", url);
+  xhr.responseType = "blob";
   xhr.send();
 }