feat: zones editor - update editor

index.css

@@ -153,6 +153,10 @@ a {
   fill-rule: evenodd;
 }
 
+#zones {
+  fill-rule: nonzero;
+}
+
 #coastline {
   fill: none;
   stroke-linejoin: round;

modules/ui/zones-editor.js

@@ -30,29 +30,37 @@ function editZones() {
   byId("zonesManuallyCancel").on("click", cancelZonesManualAssignent);
   byId("zonesAdd").on("click", addZonesLayer);
   byId("zonesExport").on("click", downloadZonesData);
-  byId("zonesRemove").on("click", toggleEraseMode);
+  byId("zonesRemove").on("click", e => e.target.classList.toggle("pressed"));
 
   body.on("click", function (ev) {
     const el = ev.target;
     const cl = el.classList;
-    const zoneId = el.parentNode.dataset.id;
+    const zoneId = +(cl.contains("states") ? el.dataset.id : el.parentNode.dataset.id);
-    const zone = pack.zones.find(z => "zone" + z.i === zoneId);
+    const zone = pack.zones.find(z => z.i === zoneId);
     if (!zone) return;
 
-    if (el.tagName === "FILL-BOX") changeFill(el, zone);
+    if (customization) {
+      if (zone.hidden) return;
+      body.querySelector("div.selected").classList.remove("selected");
+      el.classList.add("selected");
+      return;
+    }
+
+    if (el.tagName === "FILL-BOX") changeFill(el.getAttribute("fill"), zone);
     else if (cl.contains("zonePopulation")) changePopulation(zone);
-    else if (cl.contains("icon-trash-empty")) zoneRemove(zoneId, zone);
+    else if (cl.contains("icon-trash-empty")) zoneRemove(zone);
     else if (cl.contains("icon-eye")) toggleVisibility(zone);
-    else if (cl.contains("icon-pin")) toggleFog(zoneId, cl);
+    else if (cl.contains("icon-pin")) toggleFog(zone, cl);
-    if (customization) selectZone(el);
   });
 
   body.on("input", function (ev) {
     const el = ev.target;
-    const zone = zones.select("#" + el.parentNode.dataset.id);
+    const zoneId = +el.parentNode.dataset.id;
+    const zone = pack.zones.find(z => z.i === zoneId);
+    if (!zone) return;
 
-    if (el.classList.contains("zoneName")) zone.attr("data-description", el.value);
+    if (el.classList.contains("zoneName")) changeDescription(zone, el.value);
-    else if (el.classList.contains("zoneType")) zone.attr("data-type", el.value);
+    else if (el.classList.contains("zoneType")) changeType(zone, el.value);
   });
 
   // update type filter with a list of used types
@@ -68,8 +76,6 @@ function editZones() {
 
   // add line for each zone
   function zonesEditorAddLines() {
-    const unit = " " + getAreaUnit();
-
     const typeToFilterBy = byId("zonesFilterType").value;
     const filteredZones =
       typeToFilterBy === "all" ? pack.zones : pack.zones.filter(zone => zone.type === typeToFilterBy);
@@ -85,22 +91,22 @@ function editZones() {
       )}; Urban population: ${si(urban)}. Click to change`;
       const focused = defs.select("#fog #focusZone" + i).size();
 
-      return /* html */ `<div class="states" style="${
+      return /* html */ `<div class="states" data-id="${i}" data-color="${color}" data-description="${name}"
-        hidden ? "opacity: 0.5" : null
+        data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population} style="${
-      }" data-id="zone${i}" data-fill="${color}" data-description="${name}"
+        hidden && "opacity: 0.5"
-        data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population}>
+      }">
         <fill-box fill="${color}"></fill-box>
         <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">${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>
+        <div data-tip="Zone area" class="biomeArea hide">${si(area) + " " + getAreaUnit()}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="zonePopulation hide pointer">${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 ${
+        <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : "inactive"} hide ${
-        cells.length ? "" : " placeholder"
+        cells.length ? "" : "placeholder"
       }"></span>
         <span data-tip="Toggle zone visibility" class="icon-eye hide ${cells.length ? "" : " placeholder"}"></span>
         <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
@@ -118,7 +124,7 @@ function editZones() {
     zonesFooterPopulation.dataset.population = totalPop;
     zonesFooterNumber.innerHTML = `${filteredZones.length} of ${pack.zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
-    zonesFooterArea.innerHTML = si(totalArea) + unit;
+    zonesFooterArea.innerHTML = si(totalArea) + " " + getAreaUnit();
     zonesFooterPopulation.innerHTML = si(totalPop);
 
     body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", zoneHighlightOn));
@@ -132,13 +138,13 @@ function editZones() {
   }
 
   function zoneHighlightOn(event) {
-    const zone = event.target.dataset.id;
+    const zoneId = event.target.dataset.id;
-    zones.select("#" + zone).style("outline", "1px solid red");
+    zones.select("#zone" + zoneId).style("outline", "1px solid red");
   }
 
   function zoneHighlightOff(event) {
-    const zone = event.target.dataset.id;
+    const zoneId = event.target.dataset.id;
-    zones.select("#" + zone).style("outline", null);
+    zones.select("#zone" + zoneId).style("outline", null);
   }
 
   function filterZonesByType() {
@@ -155,22 +161,22 @@ function editZones() {
   });
 
   function movezone(_ev, ui) {
-    const zone = $("#" + ui.item.attr("data-id"));
+    const zone = pack.zones.find(z => z.i === +ui.item[0].dataset.id);
-    const prev = $("#" + ui.item.prev().attr("data-id"));
+    const oldIndex = pack.zones.indexOf(zone);
-    if (prev) {
+    const newIndex = ui.item.index();
-      zone.insertAfter(prev);
+    if (oldIndex === newIndex) return;
-      return;
+
-    }
+    pack.zones.splice(oldIndex, 1);
-    const next = $("#" + ui.item.next().attr("data-id"));
+    pack.zones.splice(newIndex, 0, zone);
-    if (next) zone.insertBefore(next);
+    drawZones();
   }
 
   function enterZonesManualAssignent() {
     if (!layerIsOn("toggleZones")) toggleZones();
     customization = 10;
+
     document.querySelectorAll("#zonesBottom > *").forEach(el => (el.style.display = "none"));
     byId("zonesManuallyButtons").style.display = "inline-block";
-
     zonesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
     zonesFooter.style.display = "none";
     body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "none"));
@@ -184,21 +190,32 @@ function editZones() {
       .on("touchmove mousemove", moveZoneBrush);
 
     body.querySelector("div").classList.add("selected");
-    zones.selectAll("g").each(function () {
-      this.setAttribute("data-init", this.getAttribute("data-cells"));
-    });
-  }
 
-  function selectZone(el) {
+    // draw zones as individual cells
-    body.querySelector("div.selected").classList.remove("selected");
+    zones.selectAll("*").remove();
-    el.classList.add("selected");
+
+    const filterBy = byId("zonesFilterType").value;
+    const isFiltered = filterBy && filterBy !== "all";
+    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
+    const data = visibleZones.map(({i, cells, color}) => cells.map(cell => ({cell, zoneId: i, fill: color}))).flat();
+    zones
+      .selectAll("polygon")
+      .data(data, d => `${d.zoneId}-${d.cell}`)
+      .enter()
+      .append("polygon")
+      .attr("points", d => getPackPolygon(d.cell))
+      .attr("fill", d => d.fill)
+      .attr("data-zone", d => d.zoneId)
+      .attr("data-cell", d => d.cell);
   }
 
   function selectZoneOnMapClick() {
-    if (d3.event.target.parentElement.parentElement.id !== "zones") return;
+    if (d3.event.target.parentElement.id !== "zones") return;
-    const zone = d3.event.target.parentElement.id;
+    const zoneId = d3.event.target.dataset.zone;
-    const el = body.querySelector("div[data-id='" + zone + "']");
+    const el = body.querySelector("div[data-id='" + zoneId + "']");
-    selectZone(el);
+
+    body.querySelector("div.selected").classList.remove("selected");
+    el.classList.add("selected");
   }
 
   function dragZoneBrush() {
@@ -206,43 +223,40 @@ function editZones() {
     const eraseMode = byId("zonesRemove").classList.contains("pressed");
     const landOnly = byId("zonesBrushLandOnly").checked;
 
-    const selected = body.querySelector("div.selected");
-    const zone = zones.select("#" + selected.dataset.id);
-    const base = zone.attr("id") + "_"; // id generic part
-
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
       const [x, y] = d3.mouse(this);
       moveCircle(x, y, radius);
 
-      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y, radius)];
+      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y)];
       if (landOnly) selection = selection.filter(i => pack.cells.h[i] >= 20);
-      if (!selection) return;
+      if (!selection.length) return;
 
-      const dataCells = zone.attr("data-cells");
+      const zoneId = +body.querySelector("div.selected")?.dataset.id;
-      let cells = dataCells ? dataCells.split(",").map(i => +i) : [];
+      const zone = pack.zones.find(z => z.i === zoneId);
 
       if (eraseMode) {
-        // remove
+        const data = zones
-        selection.forEach(i => {
+          .selectAll("polygon")
-          const index = cells.indexOf(i);
+          .data()
-          if (index === -1) return;
+          .filter(d => !(d.zoneId === zoneId && selection.includes(d.cell)));
-          zone.select("polygon#" + base + i).remove();
+        zones
-          cells.splice(index, 1);
+          .selectAll("polygon")
-        });
+          .data(data, d => `${d.zoneId}-${d.cell}`)
+          .exit()
+          .remove();
       } else {
-        // add
+        const data = selection.map(cell => ({cell, zoneId, fill: zone.color}));
-        selection.forEach(i => {
+        zones
-          if (cells.includes(i)) return;
+          .selectAll("polygon")
-          cells.push(i);
+          .data(data, d => `${d.zoneId}-${d.cell}`)
-          zone
+          .enter()
-            .append("polygon")
+          .append("polygon")
-            .attr("points", getPackPolygon(i))
+          .attr("points", d => getPackPolygon(d.cell))
-            .attr("id", base + i);
+          .attr("fill", d => d.fill)
-        });
+          .attr("data-zone", d => d.zoneId)
+          .attr("data-cell", d => d.cell);
       }
-
-      zone.attr("data-cells", cells);
     });
   }
 
@@ -250,39 +264,29 @@ function editZones() {
     showMainTip();
     const point = d3.mouse(this);
     const radius = +zonesBrush.value;
-    moveCircle(point[0], point[1], radius);
+    moveCircle(...point, radius);
   }
 
   function applyZonesManualAssignent() {
-    zones.selectAll("g").each(function () {
+    const data = zones.selectAll("polygon").data();
-      if (this.dataset.cells) return;
+    const zoneCells = data.reduce((acc, d) => {
-      // all zone cells are removed
+      if (!acc[d.zoneId]) acc[d.zoneId] = [];
-      unfog("focusZone" + this.id);
+      acc[d.zoneId].push(d.cell);
-      this.style.display = "block";
+      return acc;
-    });
+    }, {});
 
+    const filterBy = byId("zonesFilterType").value;
+    const isFiltered = filterBy && filterBy !== "all";
+    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
+    visibleZones.forEach(zone => (zone.cells = zoneCells[zone.i] || []));
+
+    drawZones();
     zonesEditorAddLines();
     exitZonesManualAssignment();
   }
 
-  // restore initial zone cells
   function cancelZonesManualAssignent() {
-    zones.selectAll("g").each(function () {
+    drawZones();
-      const zone = d3.select(this);
-      const dataCells = zone.attr("data-init");
-      const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
-      zone.attr("data-cells", cells);
-      zone.selectAll("*").remove();
-      const base = zone.attr("id") + "_"; // id generic part
-      zone
-        .selectAll("*")
-        .data(cells)
-        .enter()
-        .append("polygon")
-        .attr("points", d => getPackPolygon(d))
-        .attr("id", d => base + d);
-    });
-
     exitZonesManualAssignment();
   }
 
@@ -300,19 +304,16 @@ function editZones() {
 
     restoreDefaultEvents();
     clearMainTip();
-    zones.selectAll("g").each(function () {
+
-      this.removeAttribute("data-init");
-    });
     const selected = body.querySelector("div.selected");
     if (selected) selected.classList.remove("selected");
   }
 
-  function changeFill(el, zone) {
+  function changeFill(fill, zone) {
-    const fill = el.getAttribute("fill");
     const callback = newFill => {
-      el.fill = newFill;
-      byId(el.parentNode.dataset.id).setAttribute("fill", newFill);
       zone.color = newFill;
+      drawZones();
+      zonesEditorAddLines();
     };
 
     openPicker(fill, callback);
@@ -327,20 +328,16 @@ function editZones() {
     zonesEditorAddLines();
   }
 
-  function toggleFog(z, cl) {
+  function toggleFog(zone, cl) {
-    const dataCells = zones.select("#" + z).attr("data-cells");
+    const inactive = cl.contains("inactive");
-    if (!dataCells) return;
-
-    const path =
-        "M" +
-        dataCells
-          .split(",")
-          .map(c => getPackPolygon(+c))
-          .join("M") +
-        "Z",
-      id = "focusZone" + z;
-    cl.contains("inactive") ? fog(id, path) : unfog(id);
     cl.toggle("inactive");
+
+    if (inactive) {
+      const path = zones.select("#zone" + zone.i).attr("d");
+      fog("focusZone" + zone.i, path);
+    } else {
+      unfog("focusZone" + zone.i);
+    }
   }
 
   function toggleLegend() {
@@ -370,28 +367,23 @@ function editZones() {
   }
 
   function addZonesLayer() {
-    const id = getNextId("zone");
+    const zoneId = pack.zones.length ? Math.max(...pack.zones.map(z => z.i)) + 1 : 0;
-    const description = "Unknown zone";
+    const name = "Unknown zone";
     const type = "Unknown";
-    const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
+    const color = "url(#hatch" + (zoneId % 42) + ")";
-    zones
+    pack.zones.push({i: zoneId, name, type, color, cells: []});
-      .append("g")
-      .attr("id", id)
-      .attr("data-description", description)
-      .attr("data-type", type)
-      .attr("data-cells", "")
-      .attr("fill", fill);
 
     zonesEditorAddLines();
+    drawZones();
   }
 
   function downloadZonesData() {
     const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Fill,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
+    let data = "Id,Color,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
 
     body.querySelectorAll(":scope > div").forEach(function (el) {
       data += el.dataset.id + ",";
-      data += el.dataset.fill + ",";
+      data += el.dataset.color + ",";
       data += el.dataset.description + ",";
       data += el.dataset.type + ",";
       data += el.dataset.cells + ",";
@@ -403,8 +395,14 @@ function editZones() {
     downloadFile(data, name);
   }
 
-  function toggleEraseMode() {
+  function changeDescription(zone, value) {
-    this.classList.toggle("pressed");
+    zone.name = value;
+    zones.select("#zone" + zone.i).attr("data-description", value);
+  }
+
+  function changeType(zone, value) {
+    zone.type = value;
+    zones.select("#zone" + zone.i).attr("data-type", value);
   }
 
   function changePopulation(zone) {
@@ -478,15 +476,15 @@ function editZones() {
     }
   }
 
-  function zoneRemove(zoneId, zone) {
+  function zoneRemove(zone) {
     confirmationDialog({
       title: "Remove zone",
       message: "Are you sure you want to remove the zone? <br>This action cannot be reverted",
       confirm: "Remove",
       onConfirm: () => {
         pack.zones = pack.zones.filter(z => z.i !== zone.i);
-        zones.select("#" + zoneId).remove();
+        zones.select("#zone" + zone.i).remove();
-        unfog("focusZone" + zoneId);
+        unfog("focusZone" + zone.i);
         zonesEditorAddLines();
       }
     });