feat: zones editor - update to work with pack data

main.js

@@ -62,7 +62,7 @@ let regions = viewbox.append("g").attr("id", "regions");
 let statesBody = regions.append("g").attr("id", "statesBody");
 let statesHalo = regions.append("g").attr("id", "statesHalo");
 let provs = viewbox.append("g").attr("id", "provs");
-let zones = viewbox.append("g").attr("id", "zones").style("display", "none");
+let zones = viewbox.append("g").attr("id", "zones");
 let borders = viewbox.append("g").attr("id", "borders");
 let stateBorders = borders.append("g").attr("id", "stateBorders");
 let provinceBorders = borders.append("g").attr("id", "provinceBorders");

modules/dynamic/auto-update.js

@@ -925,4 +925,9 @@ export function resolveVersionConflicts(mapVersion) {
       }
     }
   }
+
+  if (isOlderThan("1.100.0")) {
+    // v1.100.00 added zones to pack data
+    zones.stlye("display", "none");
+  }
 }

modules/ui/general.js

@@ -168,6 +168,7 @@ function showMapTooltip(point, e, i, g) {
     if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
     return;
   }
+
   if (group === "labels") return tip("Click to edit the Label");
 
   if (group === "markers") return tip("Click to edit the Marker. Hold Shift to not close the assosiated note");
@@ -199,9 +200,11 @@ function showMapTooltip(point, e, i, g) {
   if (group === "coastline") return tip("Click to edit the coastline");
 
   if (group === "zones") {
-    const zone = path[path.length - 8];
+    const element = path[path.length - 8];
-    tip(zone.dataset.description);
+    const zoneId = +element.dataset.id;
-    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
+    const zone = pack.zones.find(zone => zone.i === zoneId);
+    tip(zone.name);
+    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zoneId, 5000);
     return;
   }
 

modules/ui/layers.js

@@ -1872,18 +1872,25 @@ function fitScaleBar(scaleBar, fullWidth, fullHeight) {
 function toggleZones(event) {
   if (!layerIsOn("toggleZones")) {
     turnButtonOn("toggleZones");
-    $("#zones").fadeIn();
+    drawZones();
     if (event && isCtrlClick(event)) editStyle("zones");
   } else {
-    if (event && isCtrlClick(event)) {
+    if (event && isCtrlClick(event)) return editStyle("zones");
-      editStyle("zones");
-      return;
-    }
     turnButtonOff("toggleZones");
-    $("#zones").fadeOut();
+    zones.selectAll("*").remove();
   }
 }
 
+function drawZones() {
+  const zonesHtml = pack.zones.map(drawZone);
+  zones.html(zonesHtml.join(""));
+}
+
+function drawZone({i, cells, color}) {
+  const cellsPath = cells.map(cell => "M" + getPackPolygon(cell).join(" ")).join(" ");
+  return `<path id="zone${i}" data-id="${i}" d="${cellsPath}" fill="${color}" />`;
+}
+
 function toggleEmblems(event) {
   if (!layerIsOn("toggleEmblems")) {
     turnButtonOn("toggleEmblems");

modules/ui/zones-editor.js

@@ -14,7 +14,6 @@ function editZones() {
   $("#zonesEditor").dialog({
     title: "Zones Editor",
     resizable: false,
-    width: fitContent(),
     close: () => exitZonesManualAssignment("close"),
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
@@ -55,8 +54,7 @@ function editZones() {
 
   // update type filter with a list of used types
   function updateFilters() {
-    const zones = Array.from(document.querySelectorAll("#zones > g"));
+    const types = unique(pack.zones.map(zone => zone.type));
-    const types = unique(zones.map(zone => zone.dataset.type));
 
     const filterSelect = byId("zonesFilterType");
     const typeToFilterBy = types.includes(zonesFilterType.value) ? zonesFilterType.value : "all";
@@ -71,42 +69,37 @@ function editZones() {
     const unit = " " + getAreaUnit();
 
     const typeToFilterBy = byId("zonesFilterType").value;
-    const zones = Array.from(document.querySelectorAll("#zones > g"));
+    const filteredZones =
-    const filteredZones = typeToFilterBy === "all" ? zones : zones.filter(zone => zone.dataset.type === typeToFilterBy);
+      typeToFilterBy === "all" ? pack.zones : pack.zones.filter(zone => zone.type === typeToFilterBy);
 
-    const lines = filteredZones.map(zoneEl => {
+    const lines = filteredZones.map(({i, name, type, cells, color, hidden}) => {
-      const c = zoneEl.dataset.cells ? zoneEl.dataset.cells.split(",").map(c => +c) : [];
+      const area = getArea(d3.sum(cells.map(i => pack.cells.area[i])));
-      const description = zoneEl.dataset.description;
+      const rural = d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate;
-      const type = zoneEl.dataset.type;
-      const fill = zoneEl.getAttribute("fill");
-      const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
-      const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
       const urban =
-        d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
+        d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
       const population = rural + urban;
       const populationTip = `Total population: ${si(population)}; Rural population: ${si(
         rural
       )}; Urban population: ${si(urban)}. Click to change`;
-      const inactive = zoneEl.style.display === "none";
+      const focused = defs.select("#fog #focusZone" + i).size();
-      const focused = defs.select("#fog #focus" + zoneEl.id).size();
 
-      return `<div class="states" data-id="${zoneEl.id}" data-fill="${fill}" data-description="${description}"
+      return `<div class="states" data-id="zone${i}" data-fill="${color}" data-description="${name}"
-        data-type="${type}" data-cells=${c.length} data-area=${area} data-population=${population}>
+        data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population}>
-        <fill-box fill="${fill}"></fill-box>
+        <fill-box fill="${color}"></fill-box>
-        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
+        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${name}" autocorrect="off" spellcheck="false">
         <input data-tip="Zone type. Click and type to change" class="zoneType" value="${type}">
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="stateCells hide">${c.length}</div>
+        <div data-tip="Cells count" class="stateCells hide">${cells.length}</div>
         <span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
         <div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
         <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
         <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${
-        c.length ? "" : " placeholder"
+        cells.length ? "" : " placeholder"
       }"></span>
-        <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${
+        <span data-tip="Toggle zone visibility" class="icon-eye ${hidden ? " inactive" : ""} hide ${
-        c.length ? "" : " placeholder"
+        cells.length ? "" : " placeholder"
       }"></span>
         <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
       </div>`;
@@ -121,14 +114,13 @@ function editZones() {
       (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) *
       populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
-    zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
+    zonesFooterNumber.innerHTML = `${filteredZones.length} of ${zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
     zonesFooterArea.innerHTML = si(totalArea) + unit;
     zonesFooterPopulation.innerHTML = si(totalPop);
 
-    // add listeners
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", zoneHighlightOn));
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", ev => zoneHighlightOn(ev)));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", zoneHighlightOff));
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", ev => zoneHighlightOff(ev)));
 
     if (body.dataset.type === "percentage") {
       body.dataset.type = "absolute";
@@ -167,7 +159,8 @@ function editZones() {
     axis: "y",
     update: movezone
   });
-  function movezone(ev, ui) {
+
+  function movezone(_ev, ui) {
     const zone = $("#" + ui.item.attr("data-id"));
     const prev = $("#" + ui.item.prev().attr("data-id"));
     if (prev) {

modules/zones-generator.js

@@ -28,30 +28,6 @@ window.Zones = (function () {
       }
     });
 
-    console.table(pack.zones);
-    drawZones();
-
-    function drawZones() {
-      zones
-        .selectAll("g")
-        .data(pack.zones)
-        .enter()
-        .append("g")
-        .attr("id", d => "zone" + d.i)
-        .attr("data-description", d => d.name)
-        .attr("data-type", d => d.type)
-        .attr("data-cells", d => d.cells.join(","))
-        .attr("fill", d => d.color)
-        .selectAll("polygon")
-        .data(d => d.cells)
-        .enter()
-        .append("polygon")
-        .attr("points", d => getPackPolygon(d))
-        .attr("id", function (d) {
-          return this.parentNode.id + "_" + d;
-        });
-    }
-
     TIME && console.timeEnd("generateZones");
   };
 
@@ -98,7 +74,7 @@ window.Zones = (function () {
       Intervention: 1
     });
     const name = getAdjective(invader.name) + " " + invasion;
-    pack.zones.push({name, type: "Invasion", cells: cellsArray, color: "url(#hatch1)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Invasion", cells: cellsArray, color: "url(#hatch1)"});
   }
 
   function addRebels(usedCells) {
@@ -145,7 +121,7 @@ window.Zones = (function () {
     });
 
     const name = getAdjective(states[neib].name) + " " + rebels;
-    pack.zones.push({name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"});
   }
 
   function addProselytism(usedCells) {
@@ -183,7 +159,7 @@ window.Zones = (function () {
     }
 
     const name = getAdjective(organized.name.split(" ")[0]) + " Proselytism";
-    pack.zones.push({name, type: "Proselytism", cells: cellsArray, color: "url(#hatch6)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Proselytism", cells: cellsArray, color: "url(#hatch6)"});
   }
 
   function addCrusade(usedCells) {
@@ -191,12 +167,18 @@ window.Zones = (function () {
     if (!heresy) return;
 
     const cells = pack.cells;
-    const cellsArray = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i);
+    const crusadeCells = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i);
-    if (!cellsArray.length) return;
+    if (!crusadeCells.length) return;
-    cellsArray.forEach(i => (usedCells[i] = 1));
+    crusadeCells.forEach(i => (usedCells[i] = 1));
 
     const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
-    pack.zones.push({name, type: "Crusade", cells: cellsArray, color: "url(#hatch6)"});
+    pack.zones.push({
+      i: pack.zones.length,
+      name,
+      type: "Crusade",
+      cells: Array.from(crusadeCells),
+      color: "url(#hatch6)"
+    });
   }
 
   function addDisease(usedCells) {
@@ -276,8 +258,9 @@ window.Zones = (function () {
       Dropsy: 1,
       Leprosy: 2
     });
+
     const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type;
-    pack.zones.push({name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"});
   }
 
   function addDisaster(usedCells) {
@@ -310,7 +293,7 @@ window.Zones = (function () {
 
     const type = rw({Famine: 5, Dearth: 1, Drought: 3, Earthquake: 3, Tornadoes: 1, Wildfires: 1});
     const name = getAdjective(burg.name) + " " + type;
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
   }
 
   function addEruption(usedCells) {
@@ -342,7 +325,7 @@ window.Zones = (function () {
       });
     }
 
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch7)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch7)"});
   }
 
   function addAvalanche(usedCells) {
@@ -368,7 +351,7 @@ window.Zones = (function () {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Avalanche";
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
   }
 
   function addFault(usedCells) {
@@ -394,7 +377,7 @@ window.Zones = (function () {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Fault";
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch2)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch2)"});
   }
 
   function addFlood(usedCells) {
@@ -428,7 +411,7 @@ window.Zones = (function () {
     }
 
     const name = getAdjective(pack.burgs[cells.burg[cell]].name) + " Flood";
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"});
   }
 
   function addTsunami(usedCells) {
@@ -459,7 +442,7 @@ window.Zones = (function () {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Tsunami";
-    pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"});
+    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"});
   }
 
   return {generate};