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");
   }
 }

src/modules/define-svg.js

@@ -15,7 +15,7 @@ export function defineSvg(width, height) {
   texture = viewbox.append("g").attr("id", "texture");
   terrs = viewbox.append("g").attr("id", "terrs");
   biomes = viewbox.append("g").attr("id", "biomes");
-  // cells = viewbox.append("g").attr("id", "cells");
+  viewbox.append("g").attr("id", "cells");
   gridOverlay = viewbox.append("g").attr("id", "gridOverlay");
   coordinates = viewbox.append("g").attr("id", "coordinates");
   compass = viewbox.append("g").attr("id", "compass");

src/scripts/generation/generation.ts

@@ -67,6 +67,7 @@ async function generate(options?: IGenerationOptions) {
     renderLayer("heightmap");
     renderLayer("rivers");
     // renderLayer("biomes");
+    renderLayer("burgs");
     renderLayer("routes");
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);

src/types/globals.d.ts

@@ -5,8 +5,6 @@ declare let seed: string;
 declare let mapId: number;
 declare let mapHistory: IMapHistoryEntry[];
 
-declare let elSelected: Selection<HTMLElement>;
-
 declare let notes: INote[];
 declare let customization: number;
 
@@ -36,52 +34,56 @@ declare let statesNeutral: number;
 
 declare const defineSvg: (graphWidth: number, graphHeight: number) => void;
 
-let svg: Selection<SVGGElement>;
+type D3Selection = d3.Selection<d3.BaseType, unknown, SVGElement, any>;
-let defs: Selection<SVGDefsElement>;
+
-let viewbox: Selection<SVGGElement>;
+declare let elSelected: D3Selection;
-let scaleBar: Selection<SVGGElement>;
+
-let legend: Selection<SVGGElement>;
+let svg: D3Selection;
-let ocean: Selection<SVGGElement>;
+let defs: D3Selection;
-let oceanLayers: Selection<SVGGElement>;
+let viewbox: D3Selection;
-let oceanPattern: Selection<SVGPatternElement>;
+let scaleBar: D3Selection;
-let lakes: Selection<SVGGElement>;
+let legend: D3Selection;
-let landmass: Selection<SVGGElement>;
+let ocean: D3Selection;
-let texture: Selection<SVGGElement>;
+let oceanLayers: D3Selection;
-let terrs: Selection<SVGGElement>;
+let oceanPattern: D3Selection;
-let biomes: Selection<SVGGElement>;
+let lakes: D3Selection;
-// let cells: Selection<SVGGElement>;
+let landmass: D3Selection;
-let gridOverlay: Selection<SVGGElement>;
+let texture: D3Selection;
-let coordinates: Selection<SVGGElement>;
+let terrs: D3Selection;
-let compass: Selection<SVGGElement>;
+let biomes: D3Selection;
-let rivers: Selection<SVGGElement>;
+// let cells: D3Selection;
-let terrain: Selection<SVGGElement>;
+let gridOverlay: D3Selection;
-let relig: Selection<SVGGElement>;
+let coordinates: D3Selection;
-let cults: Selection<SVGGElement>;
+let compass: D3Selection;
-let regions: Selection<SVGGElement>;
+let rivers: D3Selection;
-let statesBody: Selection<SVGGElement>;
+let terrain: D3Selection;
-let statesHalo: Selection<SVGGElement>;
+let relig: D3Selection;
-let provs: Selection<SVGGElement>;
+let cults: D3Selection;
-let zones: Selection<SVGGElement>;
+let regions: D3Selection;
-let borders: Selection<SVGGElement>;
+let statesBody: D3Selection;
-let stateBorders: Selection<SVGGElement>;
+let statesHalo: D3Selection;
-let provinceBorders: Selection<SVGGElement>;
+let provs: D3Selection;
-let routes: Selection<SVGGElement>;
+let zones: D3Selection;
-// let roads: Selection<SVGGElement>;
+let borders: D3Selection;
-// let trails: Selection<SVGGElement>;
+let stateBorders: D3Selection;
-// let searoutes: Selection<SVGGElement>;
+let provinceBorders: D3Selection;
-let temperature: Selection<SVGGElement>;
+let routes: D3Selection;
-let coastline: Selection<SVGGElement>;
+// let roads: D3Selection;
-let ice: Selection<SVGGElement>;
+// let trails: D3Selection;
-let prec: Selection<SVGGElement>;
+// let searoutes: D3Selection;
-let population: Selection<SVGGElement>;
+let temperature: D3Selection;
-let emblems: Selection<SVGGElement>;
+let coastline: D3Selection;
-let labels: Selection<SVGGElement>;
+let ice: D3Selection;
-let icons: Selection<SVGGElement>;
+let prec: D3Selection;
-let burgLabels: Selection<SVGGElement>;
+let population: D3Selection;
-let burgIcons: Selection<SVGGElement>;
+let emblems: D3Selection;
-let anchors: Selection<SVGGElement>;
+let labels: D3Selection;
-let armies: Selection<SVGGElement>;
+let icons: D3Selection;
-let markers: Selection<SVGGElement>;
+let burgLabels: D3Selection;
-let fogging: Selection<SVGGElement>;
+let burgIcons: D3Selection;
-let ruler: Selection<SVGGElement>;
+let anchors: D3Selection;
-let debug: Selection<SVGGElement>;
+let armies: D3Selection;
+let markers: D3Selection;
+let fogging: D3Selection;
+let ruler: D3Selection;
+let debug: D3Selection;