v1.22.09

index.css

@@ -106,7 +106,7 @@ button, select, a {
 }
 
 #statesBody, #provincesBody {
-	stroke-width: 2;
+	stroke-width: .6;
 	fill-rule: evenodd;
 	mask: url(#land);
 }
@@ -965,6 +965,12 @@ body button.noicon {
 	top: -3px;
 }
 
+#debug path.selected {
+	stroke-width: .8;
+	stroke: #da3126;
+	fill: none;
+}
+
 .selectedCell {
 	stroke-width: 1;
 	stroke: #da3126;

index.html

@@ -953,12 +953,12 @@
           <li id="toggleReligions" data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: R" class="buttonoff" onclick="toggleReligions(event)"><u>R</u>eligions</li>
           <li id="toggleCultures" data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: C" class="buttonoff" onclick="toggleCultures(event)"><u>C</u>ultures</li>
           <li id="toggleStates" data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: S" onclick="toggleStates(event)"><u>S</u>tates</li>
-          <li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="toggleProvinces(event)">Provi<u>n</u>ces</li>
+          <li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P" class="buttonoff" onclick="toggleProvinces(event)"><u>P</u>rovinces</li>
           <li id="toggleZones" data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Z" class="buttonoff" onclick="toggleZones(event)"><u>Z</u>ones</li>
           <li id="toggleBorders" data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: D" onclick="toggleBorders(event)">Bor<u>d</u>ers</li>
           <li id="toggleRoutes"data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: U" onclick="toggleRoutes(event)">Ro<u>u</u>tes</li>
           <li id="toggleTemp" data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: T" class="buttonoff" onclick="toggleTemp(event)"><u>T</u>emperature</li>
-          <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P" class="buttonoff" onclick="togglePopulation(event)"><u>P</u>opulation</li>
+          <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="togglePopulation(event)">Populatio<u>n</u></li>
           <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A" class="buttonoff" onclick="togglePrec(event)">Precipit<u>a</u>tion</li>
           <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L" onclick="toggleLabels(event)"><u>L</u>abels</li>
           <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I" onclick="toggleIcons(event)"><u>I</u>cons</li>
@@ -2746,8 +2746,8 @@
         <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
         <div id="provincesManuallyButtons" style="display: none">
           <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
-            <input id="provincesManuallyBrush" oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value" type="range" min=5 max=99 value=15 style="width:5em">
+            <input id="provincesManuallyBrush" oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value" type="range" min=5 max=99 value=8 style="width:5em">
-            <input id="provincesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value" type="number" min=5 max=99 value=15>
+            <input id="provincesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value" type="number" min=5 max=99 value=8>
           </label><br>
           <button id="provincesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
           <button id="provincesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>

modules/ui/general.js

@@ -364,13 +364,13 @@ document.addEventListener("keyup", event => {
   else if (key === 70) toggleRelief(); // "F" to toggle Relief icons layer
   else if (key === 67) toggleCultures(); // "C" to toggle Cultures layer
   else if (key === 83) toggleStates(); // "S" to toggle States layer
-  else if (key === 78) toggleProvinces(); // "N" to toggle Provinces layer
+  else if (key === 80) toggleProvinces(); // "P" to toggle Provinces layer
   else if (key === 90) toggleZones(); // "Z" to toggle Zones
   else if (key === 68) toggleBorders(); // "D" to toggle Borders layer
   else if (key === 82) toggleReligions(); // "R" to toggle Religions layer
   else if (key === 85) toggleRoutes(); // "U" to toggle Routes layer
   else if (key === 84) toggleTemp(); // "T" to toggle Temperature layer
-  else if (key === 80) togglePopulation(); // "P" to toggle Population layer
+  else if (key === 78) togglePopulation(); // "N" to toggle Population layer
   else if (key === 65) togglePrec(); // "A" to toggle Precipitation layer
   else if (key === 76) toggleLabels(); // "L" to toggle Labels layer
   else if (key === 73) toggleIcons(); // "I" to toggle Icons layer

modules/ui/provinces-editor.js

@@ -577,6 +577,10 @@ function editProvinces() {
     if (!layerIsOn("toggleProvinces")) toggleProvinces();
     if (!layerIsOn("toggleBorders")) toggleBorders();
 
+    // make province and state borders more visible
+    provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", .5);
+    stateBorders.select("path").attr("stroke", "#000").attr("stroke-width", 1.2);
+
     customization = 11;
     provs.select("g#provincesBody").append("g").attr("id", "temp");
     provs.select("g#provincesBody").append("g").attr("id", "centers")
@@ -598,6 +602,7 @@ function editProvinces() {
       .on("touchmove mousemove", moveBrush);
 
     body.querySelector("div").classList.add("selected");
+    selectProvince(+body.querySelector("div").dataset.id);
   }
 
   function selectProvinceOnLineClick() {
@@ -605,6 +610,7 @@ function editProvinces() {
     if (this.parentNode.id !== "provincesBodySection") return;
     body.querySelector("div.selected").classList.remove("selected");
     this.classList.add("selected");
+    selectProvince(+this.dataset.id);
   }
 
   function selectProvinceOnMapClick() {
@@ -620,6 +626,13 @@ function editProvinces() {
 
     body.querySelector("div.selected").classList.remove("selected");
     editorLine.classList.add("selected");
+    selectProvince(province);
+  }
+
+  function selectProvince(p) {
+    debug.selectAll("path.selected").remove();
+    const path = provs.select("#province"+p).attr("d");
+    debug.append("path").attr("class", "selected").attr("d", path);
   }
 
   function dragBrush() {
@@ -644,7 +657,6 @@ function editProvinces() {
     const provinceNew = +selected.dataset.id;
     const state = pack.provinces[provinceNew].state;
     const fill = pack.provinces[provinceNew].color || "#ffffff";
-    const stroke = fill.startsWith("#") ? d3.color(fill).darker(.2).hex() : "#000000";
 
     selection.forEach(i => {
       if (!pack.cells.state[i] || pack.cells.state[i] !== state) return;
@@ -659,10 +671,14 @@ function editProvinces() {
       }
 
       // change of append new element
-      if (exists.size()) exists.attr("data-province", provinceNew).attr("fill", fill).attr("stroke", stroke);
+      if (exists.size()) {
-      else temp.append("polygon").attr("points", getPackPolygon(i))
+        if (pack.cells.province[i] === provinceNew) exists.remove();
-        .attr("data-cell", i).attr("data-province", provinceNew)
+        else exists.attr("data-province", provinceNew).attr("fill", fill);
-        .attr("fill", fill).attr("stroke", stroke);
+      } else {
+        temp.append("polygon").attr("points", getPackPolygon(i))
+          .attr("data-cell", i).attr("data-province", provinceNew)
+          .attr("fill", fill).attr("stroke", "#555");
+      }
     });
   }
 
@@ -691,6 +707,11 @@ function editProvinces() {
     provs.select("#centers").remove();
     removeCircle();
 
+    // restore borders style
+    provinceBorders.select("path").attr("stroke", null).attr("stroke-width", null);
+    stateBorders.select("path").attr("stroke", null).attr("stroke-width", null);
+    debug.selectAll("path.selected").remove();
+
     document.querySelectorAll("#provincesBottom > *").forEach(el => el.style.display = "inline-block");
     document.getElementById("provincesManuallyButtons").style.display = "none";