feat: separate labels rendering from generation process

index.css

@@ -721,7 +721,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 
 #toolsContent > .grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   margin: 0.2em 0;
 }
 

index.html

@@ -652,10 +652,10 @@
               <u>L</u>abels
             </li>
             <li
-              id="toggleIcons"
+              id="toggleBurgIcons"
               data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="I"
-              onclick="toggleIcons(event)"
+              onclick="toggleBurgIcons(event)"
             >
               <u>I</u>cons
             </li>
@@ -2063,7 +2063,7 @@
               id="regenerateStateLabels"
               data-tip="Click to update state labels placement based on current borders"
             >
-              Labels
+              State Labels
             </button>
             <button id="regenerateMarkers" data-tip="Click to regenerate unlocked markers">
               Markers <i id="configRegenerateMarkers" class="icon-cog" data-tip="Click to set number multiplier"></i>
@@ -8010,7 +8010,6 @@
     <script src="modules/biomes.js?v=1.99.00"></script>
     <script src="modules/names-generator.js?v=1.87.14"></script>
     <script src="modules/cultures-generator.js?v=1.99.05"></script>
-    <script src="modules/renderers/draw-state-labels.js?v=1.104.0"></script>
     <script src="modules/burgs-and-states.js?v=1.104.0"></script>
     <script src="modules/provinces-generator.js?v=1.104.0"></script>
     <script src="modules/routes-generator.js?v=1.99.04"></script>
@@ -8089,5 +8088,8 @@
     <script defer src="modules/renderers/draw-temperature.js?v=1.104.0"></script>
     <script defer src="modules/renderers/draw-emblems.js?v=1.104.0"></script>
     <script defer src="modules/renderers/draw-military.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-state-labels.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-burg-labels.js?v=1.104.0"></script>
+    <script defer src="modules/renderers/draw-burg-icons.js?v=1.104.0"></script>
   </body>
 </html>

main.js

@@ -655,8 +655,6 @@ async function generate(options) {
     Provinces.getPoles();
     BurgsAndStates.defineBurgFeatures();
 
-    drawStateLabels();
-
     Rivers.specify();
     Features.specify();
 

modules/burgs-and-states.js

@@ -22,7 +22,6 @@ window.BurgsAndStates = (() => {
 
     generateCampaigns();
     generateDiplomacy();
-    drawBurgs();
 
     function placeCapitals() {
       TIME && console.time("placeCapitals");
@@ -274,103 +273,6 @@ window.BurgsAndStates = (() => {
       });
   };
 
-  const drawBurgs = () => {
-    TIME && console.time("drawBurgs");
-
-    // remove old data
-    burgIcons.selectAll("circle").remove();
-    burgLabels.selectAll("text").remove();
-    icons.selectAll("use").remove();
-
-    // capitals
-    const capitals = pack.burgs.filter(b => b.capital && !b.removed);
-    const capitalIcons = burgIcons.select("#cities");
-    const capitalLabels = burgLabels.select("#cities");
-    const capitalSize = capitalIcons.attr("size") || 1;
-    const capitalAnchors = anchors.selectAll("#cities");
-    const caSize = 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 = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
-    const townIcons = burgIcons.select("#towns");
-    const townLabels = burgLabels.select("#towns");
-    const townSize = townIcons.attr("size") || 0.5;
-    const townsAnchors = anchors.selectAll("#towns");
-    const taSize = 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);
-
-    TIME && console.timeEnd("drawBurgs");
-  };
-
   // expand cultures across the map (Dijkstra-like algorithm)
   const expandStates = () => {
     TIME && console.time("expandStates");
@@ -960,7 +862,6 @@ window.BurgsAndStates = (() => {
     normalizeStates,
     getPoles,
     assignColors,
-    drawBurgs,
     specifyBurgs,
     defineBurgFeatures,
     getType,

modules/io/load.js

@@ -443,7 +443,7 @@ async function parseLoadedData(data, mapVersion) {
       if (hasChild(prec, "circle")) turnOn("togglePrecipitation");
       if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
       if (isVisible(labels)) turnOn("toggleLabels");
-      if (isVisible(icons)) turnOn("toggleIcons");
+      if (isVisible(icons)) turnOn("toggleBurgIcons");
       if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
       if (hasChildren(markers)) turnOn("toggleMarkers");
       if (isVisible(ruler)) turnOn("toggleRulers");

modules/renderers/draw-burg-icons.js

@@ -0,0 +1,67 @@
+"use strict";
+
+function drawBurgIcons() {
+  TIME && console.time("drawBurgIcons");
+
+  // capitals
+  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
+  const capitalIcons = burgIcons.select("#cities");
+  const capitalSize = capitalIcons.attr("size") || 1;
+  const capitalAnchors = anchors.selectAll("#cities");
+  const capitalAnchorsSize = 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);
+
+  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 - capitalAnchorsSize * 0.47, 2))
+    .attr("y", d => rn(d.y - capitalAnchorsSize * 0.47, 2))
+    .attr("width", capitalAnchorsSize)
+    .attr("height", capitalAnchorsSize);
+
+  // towns
+  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
+  const townIcons = burgIcons.select("#towns");
+  const townSize = townIcons.attr("size") || 0.5;
+  const townsAnchors = anchors.selectAll("#towns");
+  const townsAnchorsSize = 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);
+
+  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 - townsAnchorsSize * 0.47, 2))
+    .attr("y", d => rn(d.y - townsAnchorsSize * 0.47, 2))
+    .attr("width", townsAnchorsSize)
+    .attr("height", townsAnchorsSize);
+
+  TIME && console.timeEnd("drawBurgIcons");
+}

modules/renderers/draw-burg-labels.js

@@ -0,0 +1,37 @@
+"use strict";
+
+function drawBurgLabels() {
+  TIME && console.time("drawBurgLabels");
+
+  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
+  const capitalSize = 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);
+
+  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
+  const townSize = 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 * -2}px`)
+    .text(d => d.name);
+
+  TIME && console.timeEnd("drawBurgLabels");
+}

modules/submap.js

@@ -260,8 +260,6 @@ window.Submap = (function () {
       p.center = newCenters.length ? newCenters[0] : pack.cells.province.findIndex(x => x === i);
     });
 
-    BurgsAndStates.drawBurgs();
-
     stage("Regenerating routes network");
     regenerateRoutes();
 

modules/ui/3d.js

@@ -373,7 +373,7 @@ window.ThreeD = (function () {
       }
 
       // icons
-      if (layerIsOn("toggleIcons")) {
+      if (layerIsOn("toggleBurgIcons")) {
         const geometry = isCity ? city_icon_geometry : town_icon_geometry;
         const material = isCity ? city_icon_material : town_icon_material;
         const iconMesh = new THREE.Mesh(geometry, material);

modules/ui/burg-editor.js

@@ -2,7 +2,7 @@
 function editBurg(id) {
   if (customization) return;
   closeDialogs(".stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
+  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const burg = id || d3.event.target.dataset.id;

modules/ui/burgs-overview.js

@@ -2,7 +2,7 @@
 function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
+  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const body = byId("burgsBody");

modules/ui/hotkeys.js

@@ -81,7 +81,7 @@ function handleKeyup(event) {
   else if (code === "KeyA") togglePrecipitation();
   else if (code === "KeyY") toggleEmblems();
   else if (code === "KeyL") toggleLabels();
-  else if (code === "KeyI") toggleIcons();
+  else if (code === "KeyI") toggleBurgIcons();
   else if (code === "KeyM") toggleMilitary();
   else if (code === "KeyK") toggleMarkers();
   else if (code === "Equal" && !customization) toggleRulers();

modules/ui/layers.js

@@ -8,7 +8,7 @@ function getDefaultPresets() {
   return {
     political: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleIce",
       "toggleLabels",
       "toggleRivers",
@@ -20,7 +20,7 @@ function getDefaultPresets() {
     cultural: [
       "toggleBorders",
       "toggleCultures",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleLabels",
       "toggleRivers",
       "toggleRoutes",
@@ -29,7 +29,7 @@ function getDefaultPresets() {
     ],
     religions: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleLabels",
       "toggleReligions",
       "toggleRivers",
@@ -37,7 +37,14 @@ function getDefaultPresets() {
       "toggleScaleBar",
       "toggleVignette"
     ],
-    provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar", "toggleVignette"],
+    provinces: [
+      "toggleBorders",
+      "toggleBurgIcons",
+      "toggleProvinces",
+      "toggleRivers",
+      "toggleScaleBar",
+      "toggleVignette"
+    ],
     biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     heightmap: ["toggleHeight", "toggleRivers", "toggleVignette"],
     physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
@@ -45,7 +52,7 @@ function getDefaultPresets() {
       "toggleBorders",
       "toggleHeight",
       "toggleIce",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleMarkers",
       "toggleRivers",
       "toggleRoutes",
@@ -54,7 +61,7 @@ function getDefaultPresets() {
     ],
     military: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleLabels",
       "toggleMilitary",
       "toggleRivers",
@@ -65,7 +72,7 @@ function getDefaultPresets() {
     ],
     emblems: [
       "toggleBorders",
-      "toggleIcons",
+      "toggleBurgIcons",
       "toggleIce",
       "toggleEmblems",
       "toggleRivers",
@@ -161,28 +168,32 @@ function drawLayers() {
   drawFeatures();
   if (layerIsOn("toggleTexture")) drawTexture();
   if (layerIsOn("toggleHeight")) drawHeightmap();
+  if (layerIsOn("toggleBiomes")) drawBiomes();
   if (layerIsOn("toggleCells")) drawCells();
   if (layerIsOn("toggleGrid")) drawGrid();
   if (layerIsOn("toggleCoordinates")) drawCoordinates();
   if (layerIsOn("toggleCompass")) compass.style("display", "block");
-  if (layerIsOn("toggleRoutes")) drawRoutes();
-  if (layerIsOn("toggleTemperature")) drawTemperature();
-  if (layerIsOn("togglePrecipitation")) drawPrecipitation();
-  if (layerIsOn("togglePopulation")) drawPopulation();
-  if (layerIsOn("toggleBiomes")) drawBiomes();
+  if (layerIsOn("toggleRivers")) drawRivers();
   if (layerIsOn("toggleRelief")) ReliefIcons.draw();
-  if (layerIsOn("toggleCultures")) drawCultures();
-  if (layerIsOn("toggleProvinces")) drawProvinces();
   if (layerIsOn("toggleReligions")) drawReligions();
-  if (layerIsOn("toggleIce")) drawIce();
-  if (layerIsOn("toggleEmblems")) drawEmblems();
-  if (layerIsOn("toggleMarkers")) drawMarkers();
+  if (layerIsOn("toggleCultures")) drawCultures();
+  if (layerIsOn("toggleStates")) drawStates();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
   if (layerIsOn("toggleZones")) drawZones();
   if (layerIsOn("toggleBorders")) drawBorders();
-  if (layerIsOn("toggleStates")) drawStates();
-  if (layerIsOn("toggleRivers")) drawRivers();
+  if (layerIsOn("toggleRoutes")) drawRoutes();
+  if (layerIsOn("toggleTemperature")) drawTemperature();
+  if (layerIsOn("togglePopulation")) drawPopulation();
+  if (layerIsOn("toggleIce")) drawIce();
+  if (layerIsOn("togglePrecipitation")) drawPrecipitation();
+  if (layerIsOn("toggleEmblems")) drawEmblems();
+  if (layerIsOn("toggleLabels")) drawLabels();
+  if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
   if (layerIsOn("toggleMilitary")) drawMilitary();
+  if (layerIsOn("toggleMarkers")) drawMarkers();
   if (layerIsOn("toggleRulers")) rulers.draw();
+  // scale bar
+  // vignette
 }
 
 function toggleHeight(event) {
@@ -846,24 +857,33 @@ function toggleMarkers(event) {
 function toggleLabels(event) {
   if (!layerIsOn("toggleLabels")) {
     turnButtonOn("toggleLabels");
-    labels.style("display", null);
-    invokeActiveZooming();
+    $("#labels").fadeIn();
+    // don't redraw labels as they are not stored in data yet
+    if (labels.selectAll("text").size() === 0) drawLabels();
     if (event && isCtrlClick(event)) editStyle("labels");
   } else {
     if (event && isCtrlClick(event)) return editStyle("labels");
     turnButtonOff("toggleLabels");
-    labels.style("display", "none");
+    $("#labels").fadeOut();
   }
 }
 
-function toggleIcons(event) {
-  if (!layerIsOn("toggleIcons")) {
-    turnButtonOn("toggleIcons");
+function drawLabels() {
+  drawStateLabels();
+  drawBurgLabels();
+  invokeActiveZooming();
+}
+
+function toggleBurgIcons(event) {
+  if (!layerIsOn("toggleBurgIcons")) {
+    turnButtonOn("toggleBurgIcons");
     $("#icons").fadeIn();
+    drawBurgIcons();
     if (event && isCtrlClick(event)) editStyle("burgIcons");
   } else {
     if (event && isCtrlClick(event)) return editStyle("burgIcons");
-    turnButtonOff("toggleIcons");
+    turnButtonOff("toggleBurgIcons");
+    icons.selectAll("circle, use").remove();
     $("#icons").fadeOut();
   }
 }
@@ -954,8 +974,7 @@ function getGappedFillPaths(elementName, fill, waterGap, color, index) {
 }
 
 function layerIsOn(el) {
-  const buttonoff = byId(el).classList.contains("buttonoff");
-  return !buttonoff;
+  return byId(el).classList.contains("buttonoff") ? false : true;
 }
 
 function turnButtonOff(el) {
@@ -1002,7 +1021,7 @@ function getLayer(id) {
   if (id === "toggleTexture") return $("#texture");
   if (id === "toggleEmblems") return $("#emblems");
   if (id === "toggleLabels") return $("#labels");
-  if (id === "toggleIcons") return $("#icons");
+  if (id === "toggleBurgIcons") return $("#icons");
   if (id === "toggleMarkers") return $("#markers");
   if (id === "toggleRulers") return $("#ruler");
 }

modules/ui/tools.js

@@ -75,8 +75,10 @@ toolsContent.addEventListener("click", function (event) {
 });
 
 function processFeatureRegeneration(event, button) {
-  if (button === "regenerateStateLabels") drawStateLabels();
-  else if (button === "regenerateReliefIcons") {
+  if (button === "regenerateStateLabels") {
+    $("#labels").fadeIn();
+    drawStateLabels();
+  } else if (button === "regenerateReliefIcons") {
     ReliefIcons.draw();
     if (!layerIsOn("toggleRelief")) toggleRelief();
   } else if (button === "regenerateRoutes") {
@@ -440,7 +442,6 @@ function regenerateBurgs() {
 
   BurgsAndStates.specifyBurgs();
   BurgsAndStates.defineBurgFeatures();
-  BurgsAndStates.drawBurgs();
   regenerateRoutes();
 
   // remove emblems

utils/pathUtils.js

@@ -120,7 +120,7 @@ function getVertexPath(cellsArray) {
     const vertexChain = connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing: true});
     if (vertexChain.length < 3) continue;
 
-    path += getFillPath(vertexChain);
+    path += getFillPath(vertices, vertexChain);
   }
 
   return path;