Merge pull request #4 from evolvedexperiment/color-picker3

Fixes for hatching changes.

index.html

@@ -148,8 +148,6 @@
         </filter>
       </g>
 
-      <g id="hatching"/>
-
       <g id="deftemp">
         <mask id="land"></mask>
         <mask id="water">

main.js

@@ -656,7 +656,6 @@ function generate() {
 
     Military.generate();
     Markers.generate();
-    copyHatching();
     addZones();
     Names.getMapName();
 
@@ -1484,11 +1483,6 @@ function rankCells() {
   TIME && console.timeEnd("rankCells");
 }
 
-// copy the hatching (patterns)
-function copyHatching() {
-    document.getElementById("hatching").innerHTML = document.getElementById("defs-hatching").innerHTML;
-}
-
 // regenerate some zones
 function addZones(number = 1) {
   TIME && console.time("addZones");

modules/export.js

@@ -184,6 +184,9 @@ async function getMapURL(type, options = {}) {
     filters[i].remove();
   }
 
+  const hatching = svgDefs.getElementById("defs-hatching");
+  if (hatching) cloneDefs.appendChild(hatching.cloneNode(true));
+
   // remove unused patterns
   const patterns = cloneEl.querySelectorAll("pattern");
   for (let i = 0; i < patterns.length; i++) {
@@ -262,7 +265,7 @@ async function getMapURL(type, options = {}) {
     if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
   }
 
-  if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching")?.remove(); // remove unused hatching group
+  if (!cloneEl.getElementById("defs-hatching").children.length) cloneEl.getElementById("defs-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
   if (!cloneEl.getElementById("labels")) cloneEl.getElementById("textPaths")?.remove(); // removed unused textPaths

modules/load.js

@@ -472,11 +472,6 @@ function parseLoadedData(data) {
         if (!layerIsOn("toggleBorders")) $("#borders").fadeOut();
         if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
 
-        // 1.0 adds hatching
-        const gHatching = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        gHatching.setAttribute("id", "hatching");
-        document.getElementsByTagName("defs")[0].appendChild(gHatching);
-
         // 1.0 adds zones layer
         zones = viewbox.insert("g", "#borders").attr("id", "zones").attr("display", "none");
         zones.attr("opacity", 0.6).attr("stroke", null).attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt");
@@ -931,8 +926,11 @@ function parseLoadedData(data) {
         }
       }
 
-      copyHatching();
+      if (version < 1.72) {
- 
+        // 1.72 moves the hatching patterns out of the SVG
+        document.getElementById("hatching")?.remove();
+      }
+
     })();
 
     void (function checkDataIntegrity() {

modules/save.js

@@ -51,7 +51,6 @@ function getMapData() {
   cloneEl.querySelector("#viewbox").removeAttribute("transform");
 
   cloneEl.querySelector("#ruler").innerHTML = ""; // always remove rulers
-  cloneEl.querySelector("#hatching").innerHTML = ""; // remove hatching patterns
 
   const serializedSVG = new XMLSerializer().serializeToString(cloneEl);
 

modules/ui/editors.js

@@ -482,7 +482,7 @@ function createPicker() {
 
   const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333");
   const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333");
-  const hatching = d3.selectAll("g#hatching > pattern");
+  const hatching = d3.selectAll("g#defs-hatching > pattern");
   const number = hatching.size();
 
   const clr = d3.range(number).map(i => d3.hsl((i / number) * 360, 0.7, 0.7).hex());