refactor: draw burgs and cells

src/layers/renderers/drawBurgs.ts

@@ -0,0 +1,96 @@
+import {rn} from "utils/numberUtils";
+
+export function drawBurgs() {
+  // remove old data
+  burgIcons.selectAll("circle").remove();
+  burgLabels.selectAll("text").remove();
+  icons.selectAll("use").remove();
+
+  const validBurgs = pack.burgs.filter(burg => burg.i && !(burg as IBurg).removed) as IBurg[];
+
+  // capitals
+  const capitals = validBurgs.filter(burg => burg.capital);
+  const capitalIcons = burgIcons.select("#cities");
+  const capitalLabels = burgLabels.select("#cities");
+  const capitalSize = Number(capitalIcons.attr("size")) || 1;
+  const capitalAnchors = anchors.selectAll("#cities");
+  const caSize = Number(capitalAnchors.attr("size")) || 2;
+
+  capitalIcons
+    .selectAll("circle")
+    .data(capitals)
+    .enter()
+    .append("circle")
+    .attr("id", d => "burg" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("cx", d => d.x)
+    .attr("cy", d => d.y)
+    .attr("r", capitalSize);
+
+  capitalLabels
+    .selectAll("text")
+    .data(capitals)
+    .enter()
+    .append("text")
+    .attr("id", d => "burgLabel" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("dy", `${capitalSize * -1.5}px`)
+    .text(d => d.name);
+
+  capitalAnchors
+    .selectAll("use")
+    .data(capitals.filter(c => c.port))
+    .enter()
+    .append("use")
+    .attr("xlink:href", "#icon-anchor")
+    .attr("data-id", d => d.i)
+    .attr("x", d => rn(d.x - caSize * 0.47, 2))
+    .attr("y", d => rn(d.y - caSize * 0.47, 2))
+    .attr("width", caSize)
+    .attr("height", caSize);
+
+  // towns
+  const towns = validBurgs.filter(burg => !burg.capital);
+  const townIcons = burgIcons.select("#towns");
+  const townLabels = burgLabels.select("#towns");
+  const townSize = Number(townIcons.attr("size")) || 0.5;
+  const townsAnchors = anchors.selectAll("#towns");
+  const taSize = Number(townsAnchors.attr("size")) || 1;
+
+  townIcons
+    .selectAll("circle")
+    .data(towns)
+    .enter()
+    .append("circle")
+    .attr("id", d => "burg" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("cx", d => d.x)
+    .attr("cy", d => d.y)
+    .attr("r", townSize);
+
+  townLabels
+    .selectAll("text")
+    .data(towns)
+    .enter()
+    .append("text")
+    .attr("id", d => "burgLabel" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("dy", `${townSize * -1.5}px`)
+    .text(d => d.name);
+
+  townsAnchors
+    .selectAll("use")
+    .data(towns.filter(c => c.port))
+    .enter()
+    .append("use")
+    .attr("xlink:href", "#icon-anchor")
+    .attr("data-id", d => d.i)
+    .attr("x", d => rn(d.x - taSize * 0.47, 2))
+    .attr("y", d => rn(d.y - taSize * 0.47, 2))
+    .attr("width", taSize)
+    .attr("height", taSize);
+}

src/layers/renderers/drawCells.ts

@@ -1,11 +1,14 @@
 import {getGridPolygon, getPackPolygon} from "utils/graphUtils";
 
 export function drawCells() {
-  cells.selectAll("path").remove();
+  viewbox.select("#cells").selectAll("path").remove();
 
   const cellIds = customization === 1 ? grid.cells.i : pack.cells.i;
   const getPolygon = customization === 1 ? getGridPolygon : getPackPolygon;
 
   const paths = Array.from(cellIds).map(getPolygon);
-  cells.append("path").attr("d", "M" + paths.join("M"));
+  viewbox
+    .select("#cells")
+    .append("path")
+    .attr("d", "M" + paths.join("M"));
 }

src/layers/renderers/index.ts

@@ -2,11 +2,12 @@
 import {TIME} from "config/logging";
 import {drawBiomes} from "./drawBiomes";
 import {drawBorders} from "./drawBorders";
+import {drawBurgs} from "./drawBurgs";
 import {drawCells} from "./drawCells";
-import {drawFeatures} from "./drawFeatures";
 import {drawCoordinates} from "./drawCoordinates";
 import {drawCultures} from "./drawCultures";
 import {drawEmblems} from "./drawEmblems";
+import {drawFeatures} from "./drawFeatures";
 import {drawGrid} from "./drawGrid";
 import {drawHeightmap} from "./drawHeightmap";
 import {drawIce} from "./drawIce";
@@ -24,6 +25,7 @@ import {drawTemperature} from "./drawTemperature";
 const layerRenderersMap = {
   biomes: drawBiomes,
   borders: drawBorders,
+  burgs: drawBurgs,
   cells: drawCells,
   coordinates: drawCoordinates,
   cultures: drawCultures,

src/layers/toggles.ts

@@ -156,7 +156,7 @@ function togglePopulation(event?: MouseEvent) {
 }
 
 function toggleCells(event?: MouseEvent) {
-  if (!cells.selectAll("path").size()) {
+  if (!viewbox.select("#cells").selectAll("path").size()) {
     turnLayerButtonOn("toggleCells");
     renderLayer("cells");
     if (isCtrlPressed(event)) editStyle("cells");
@@ -165,7 +165,7 @@ function toggleCells(event?: MouseEvent) {
       editStyle("cells");
       return;
     }
-    cells.selectAll("path").remove();
+    viewbox.select("#cells").selectAll("path").remove();
     turnLayerButtonOff("toggleCells");
   }
 }