diff --git a/index.css b/index.css
index 3491ddc3..ca18c7d4 100644
--- a/index.css
+++ b/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;
diff --git a/index.html b/index.html
index 7f9ffed6..97bcfbdc 100644
--- a/index.html
+++ b/index.html
@@ -953,12 +953,12 @@
Religions
Cultures
States
- Provinces
+ Provinces
Zones
Borders
Routes
Temperature
- Population
+ Population
Precipitation
Labels
Icons
@@ -2746,8 +2746,8 @@
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 51048f76..07726d91 100644
--- a/modules/ui/general.js
+++ b/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
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index a55f62bd..594abada 100644
--- a/modules/ui/provinces-editor.js
+++ b/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);
- else temp.append("polygon").attr("points", getPackPolygon(i))
- .attr("data-cell", i).attr("data-province", provinceNew)
- .attr("fill", fill).attr("stroke", stroke);
+ if (exists.size()) {
+ if (pack.cells.province[i] === provinceNew) exists.remove();
+ else exists.attr("data-province", provinceNew).attr("fill", fill);
+ } 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";