refactor: draw burgs and labels separately

src/layers/init.ts

@@ -16,7 +16,7 @@ let presets: Dict<string[]> = {};
 const defaultPresets = {
   political: [
     "toggleBorders",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleIce",
     "toggleLabels",
     "toggleRivers",
@@ -27,7 +27,7 @@ const defaultPresets = {
   cultural: [
     "toggleBorders",
     "toggleCultures",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleLabels",
     "toggleRivers",
     "toggleRoutes",
@@ -35,14 +35,14 @@ const defaultPresets = {
   ],
   religions: [
     "toggleBorders",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleLabels",
     "toggleReligions",
     "toggleRivers",
     "toggleRoutes",
     "toggleScaleBar"
   ],
-  provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar"],
+  provinces: ["toggleBorders", "toggleBurgs", "toggleProvinces", "toggleRivers", "toggleScaleBar"],
   biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar"],
   heightmap: ["toggleHeight", "toggleRivers"],
   physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"],
@@ -50,7 +50,7 @@ const defaultPresets = {
     "toggleBorders",
     "toggleHeight",
     "toggleIce",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleMarkers",
     "toggleRivers",
     "toggleRoutes",
@@ -58,7 +58,7 @@ const defaultPresets = {
   ],
   military: [
     "toggleBorders",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleLabels",
     "toggleMilitary",
     "toggleRivers",
@@ -68,7 +68,7 @@ const defaultPresets = {
   ],
   emblems: [
     "toggleBorders",
-    "toggleIcons",
+    "toggleBurgs",
     "toggleIce",
     "toggleEmblems",
     "toggleRivers",
@@ -117,7 +117,7 @@ const layerButtonToElementMap: Dict<string> = {
   toggleGrid: "gridOverlay",
   toggleHeight: "terrs",
   toggleIce: "ice",
-  toggleIcons: "icons",
+  toggleBurgs: "icons",
   toggleLabels: "labels",
   toggleMarkers: "markers",
   toggleMilitary: "armies",

src/layers/renderers/drawBurgs.ts

@@ -3,7 +3,6 @@ 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[];
@@ -11,7 +10,7 @@ export function drawBurgs() {
   // 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;
@@ -27,18 +26,6 @@ export function drawBurgs() {
     .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))
@@ -54,7 +41,6 @@ export function drawBurgs() {
   // 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;
@@ -70,18 +56,6 @@ export function drawBurgs() {
     .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))

src/layers/renderers/drawLabels.ts

@@ -0,0 +1,47 @@
+export function drawLabels() {
+  drawBurgLabels();
+  // TODO: draw other labels
+
+  window.Zoom.invoke();
+}
+
+function drawBurgLabels() {
+  // remove old data
+  burgLabels.selectAll("text").remove();
+
+  const validBurgs = pack.burgs.filter(burg => burg.i && !(burg as IBurg).removed) as IBurg[];
+
+  // capitals
+  const capitals = validBurgs.filter(burg => burg.capital);
+  const capitalSize = Number(burgIcons.select("#cities").attr("size")) || 1;
+
+  burgLabels
+    .select("#cities")
+    .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);
+
+  // towns
+  const towns = validBurgs.filter(burg => !burg.capital);
+  const townSize = Number(burgIcons.select("#towns").attr("size")) || 0.5;
+
+  burgLabels
+    .select("#towns")
+    .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);
+}

src/layers/renderers/index.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {TIME} from "config/logging";
 import {drawBiomes} from "./drawBiomes";
 import {drawBorders} from "./drawBorders";
@@ -11,6 +10,7 @@ import {drawFeatures} from "./drawFeatures";
 import {drawGrid} from "./drawGrid";
 import {drawHeightmap} from "./drawHeightmap";
 import {drawIce} from "./drawIce";
+import {drawLabels} from "./drawLabels";
 import {drawMarkers} from "./drawMarkers";
 import {drawPopulation} from "./drawPopulation";
 import {drawPrecipitation} from "./drawPrecipitation";
@@ -34,6 +34,7 @@ const layerRenderersMap = {
   grid: drawGrid,
   heightmap: drawHeightmap,
   ice: drawIce,
+  labels: drawLabels,
   markers: drawMarkers,
   population: drawPopulation,
   precipitation: drawPrecipitation,
@@ -45,7 +46,7 @@ const layerRenderersMap = {
   temperature: drawTemperature
 };
 
-export function renderLayer(layerName: keyof typeof layerRenderersMap, ...args) {
+export function renderLayer(layerName: keyof typeof layerRenderersMap, ...args: any[]) {
   const renderer = layerRenderersMap[layerName];
   TIME && console.time(renderer.name);
   renderer(...args);

src/layers/toggles.ts

@@ -21,7 +21,7 @@ const layerTogglesMap = {
   toggleGrid,
   toggleHeight,
   toggleIce,
-  toggleIcons,
+  toggleBurgs,
   toggleLabels,
   toggleMarkers,
   toggleMilitary,
@@ -417,31 +417,26 @@ function toggleMarkers(event?: MouseEvent) {
 function toggleLabels(event?: MouseEvent) {
   if (!layerIsOn("toggleLabels")) {
     turnLayerButtonOn("toggleLabels");
-    labels.style("display", null);
-    window.Zoom.invoke();
+    renderLayer("labels");
     if (isCtrlPressed(event)) editStyle("labels");
   } else {
-    if (isCtrlPressed(event)) {
-      editStyle("labels");
-      return;
-    }
+    if (isCtrlPressed(event)) return editStyle("labels");
+    labels.selectAll("text").remove();
+    // TODO: remove text paths
     turnLayerButtonOff("toggleLabels");
-    labels.style("display", "none");
   }
 }
 
-function toggleIcons(event?: MouseEvent) {
-  if (!layerIsOn("toggleIcons")) {
-    turnLayerButtonOn("toggleIcons");
-    $("#icons").fadeIn();
+function toggleBurgs(event?: MouseEvent) {
+  if (!layerIsOn("toggleBurgs")) {
+    turnLayerButtonOn("toggleBurgs");
+    renderLayer("burgs");
     if (isCtrlPressed(event)) editStyle("burgIcons");
   } else {
-    if (isCtrlPressed(event)) {
-      editStyle("burgIcons");
-      return;
-    }
-    turnLayerButtonOff("toggleIcons");
-    $("#icons").fadeOut();
+    if (isCtrlPressed(event)) return editStyle("burgIcons");
+    burgIcons.selectAll("circle").remove();
+    icons.selectAll("use").remove();
+    turnLayerButtonOff("toggleBurgs");
   }
 }