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.

modules/load.js

@@ -190,7 +190,7 @@ function parseLoadedData(data) {
     if (customizationMenu.offsetParent) styleTab.click();
 
     const reliefIcons = document.getElementById("defs-relief").innerHTML; // save relief icons
-    const hatching = document.getElementById("hatching").cloneNode(true); // save hatching
+    const newHatching = document.getElementById("hatching").cloneNode(true); // save hatching
 
     void (function parseParameters() {
       const params = data[0].split("|");
@@ -474,7 +474,7 @@ function parseLoadedData(data) {
         if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
 
         // 1.0 adds hatching
-        document.getElementsByTagName("defs")[0].appendChild(hatching);
+        document.getElementsByTagName("defs")[0].appendChild(newHatching);
 
         // 1.0 adds zones layer
         zones = viewbox.insert("g", "#borders").attr("id", "zones").attr("display", "none");
@@ -929,6 +929,13 @@ function parseLoadedData(data) {
           if (layerIsOn("markers")) drawMarkers();
         }
       }
+
+     if (version < 1.72) {
+        // v 1.72 changed hatching data
+        document.getElementById("hatching").remove();      
+        document.getElementsByTagName("defs")[0].appendChild(newHatching);
+      };
+ 
     })();
 
     void (function checkDataIntegrity() {
@@ -1039,7 +1046,7 @@ function parseLoadedData(data) {
         // sort markers by index
         pack.markers.sort((a, b) => a.i - b.i);
       }
-    })();
+   })();
 
     changeMapSize();
 

modules/ui/editors.js

@@ -492,8 +492,8 @@ function createPicker() {
       .attr("id", "picker_" + d)
       .attr("fill", d)
       .attr("class", i ? "" : "selected")
-      .attr("x", i * 22 + 4)
-      .attr("y", 40)
+      .attr("x", (i % 15) * 22 + 4)
+      .attr("y", 40 + Math.floor(i / 15)*20)
       .attr("width", 16)
       .attr("height", 16);
   });
@@ -503,10 +503,11 @@ function createPicker() {
       .append("rect")
       .attr("id", "picker_" + this.id)
       .attr("fill", "url(#" + this.id + ")")
-      .attr("x", i * 22 + 4)
-      .attr("y", 61)
+      .attr("x", (i % 15) * 22 + 4)
+      .attr("y", Math.floor(i / 15)*20 + (number * 2))
       .attr("width", 16)
-      .attr("height", 16);
+      .attr("height", 16)
+      .on("mousemove", () => tip("Click to fill with the hatching " + this.id));
   });
 
   colors
@@ -516,7 +517,7 @@ function createPicker() {
   hatches
     .selectAll("rect")
     .on("click", pickerFillClicked)
-    .on("mousemove", () => tip("Click to fill with the hatching"));
+    //.on("mousemove", () => tip("Click to fill with the hatching " + #("#picker_" + hatch.id) ));
 
   // append box
   const bbox = picker.node().getBBox();
@@ -532,10 +533,10 @@ function createPicker() {
     .attr("fill", "#ffffff")
     .attr("stroke", "#5d4651")
     .on("mousemove", pos);
-  picker.insert("text", ":first-child").attr("x", 291).attr("y", -10).attr("id", "pickerCloseText").text("✕");
+  picker.insert("text", ":first-child").attr("x", width-20).attr("y", -10).attr("id", "pickerCloseText").text("✕");
   picker
     .insert("rect", ":first-child")
-    .attr("x", 288)
+    .attr("x", width-23)
     .attr("y", -21)
     .attr("id", "pickerCloseRect")
     .attr("width", 14)

modules/ui/zones-editor.js

@@ -80,7 +80,7 @@ function editZones() {
       const focused = defs.select("#fog #focus" + this.id).size();
 
       lines += `<div class="states" data-id="${this.id}" data-fill="${fill}" data-description="${description}" data-cells=${c.length} data-area=${area} data-population=${population}>
-        <svg data-tip="Zone fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg>
+        <svg data-tip="Zone fill style. Click to change" width="1.5em" height="1.5em" style="margin-bottom:-4px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg>
         <input data-tip="Zone description. Click and type to change" class="religionName" value="${description}" autocorrect="off" spellcheck="false">
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
         <div data-tip="Cells count" class="stateCells hide">${c.length}</div>
@@ -344,12 +344,12 @@ function editZones() {
   function addZonesLayer() {
     const id = getNextId("zone");
     const description = "Unknown zone";
-    const fill = "url(#hatch" + (id.slice(4) % 14) + ")";
+    const fill = "url(#hatch" + (id.slice(4) % 60) + ")";
     zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill);
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
 
     const line = `<div class="states" data-id="${id}" data-fill="${fill}" data-description="${description}" data-cells=0 data-area=0 data-population=0>
-      <svg data-tip="Zone fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg>
+      <svg data-tip="Zone fill style. Click to change" width="1.5em" height="1.5em" style="margin-bottom:-4px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg>
       <input data-tip="Zone description. Click and type to change" class="religionName" value="${description}" autocorrect="off" spellcheck="false">
       <span data-tip="Cells count" class="icon-check-empty hide"></span>
       <div data-tip="Cells count" class="stateCells hide">0</div>