Color picker hatches 14-60 (#726)

* Color picker hatches 14-60

Added hatches to number 14 to 60.
Updated the code of the color picker to accept multiples rows of hatches.

Changed the size of fillRectPointer from 0.9 em to 1.5 em.

Added an Update code to upgrade maps to 1.72 to have a grid of 60 svg hatches. Without the update, loaded files appeared with the rectangles for hatches 14-60 empty.

* Hatches ordered

Reworked the code to put back rows of 14 hatches. Reordered the first 14 hatches to defaault.
Made 3 rows, so 42 hatches.

* Cleaned code and fixes

Cleaned </pattern> in index.html line 152.
Put back: width=".9em" height=".9em" style="margin-bottom:-1px"> for fill.

* mouseover hatches

Fixed some typos. Changed mousemove for mouseover and moved the calling of the function tip from the each function to the original place at 519.
The arrow function changed to one that tells the id.

* Copies hatching from defElements into map svg, and hatching removed from saved map files.

* Removed haching completely from map svg

* Hatching copy for clone is now done before unused pattern removal

* Added back code that removes the unused hatching group

Co-authored-by: Evolvedexperiment <evolvedexperiment@gmail.com>
Co-authored-by: Azgaar <maxganiev@yandex.ru>

modules/export.js

@@ -180,6 +180,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++) {
@@ -258,7 +261,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

@@ -189,8 +189,7 @@ function parseLoadedData(data) {
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
-    const reliefIcons = document.getElementById('defs-relief').innerHTML; // save relief icons
+    const reliefIcons = document.getElementById("defs-relief").innerHTML; // save relief icons
-    const hatching = document.getElementById('hatching').cloneNode(true); // save hatching
 
     void (function parseParameters() {
       const params = data[0].split('|');
@@ -473,9 +472,6 @@ function parseLoadedData(data) {
         if (!layerIsOn('toggleBorders')) $('#borders').fadeOut();
         if (!layerIsOn('toggleStates')) regions.attr('display', 'none').selectAll('path').remove();
 
-        // 1.0 adds hatching
-        document.getElementsByTagName('defs')[0].appendChild(hatching);
-
         // 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');
@@ -883,6 +879,11 @@ function parseLoadedData(data) {
         // v 1.7 changed markers data
         // TODO: get markers data from svg
       }
+
+      if (version < 1.73) {
+        // v1.73 moved the hatching patterns out of the user's SVG
+        document.getElementById("hatching")?.remove();
+      }
     })();
 
     void (function checkDataIntegrity() {