refactor: draw burgs and labels separately

index.html

@@ -630,7 +630,7 @@
               <u>L</u>abels
             </li>
             <li
-              id="toggleIcons"
+              id="toggleBurgs"
               data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="I"
             >

src/dialogs/dialogs/burg-editor.js

@@ -18,7 +18,7 @@ let isLoaded = false;
 export function open({id} = {}) {
   if (customization) return;
   closeDialogs(".stable");
-  if (!layerIsOn("toggleIcons")) toggleLayer("toggleIcons");
+  if (!layerIsOn("toggleBurgs")) toggleLayer("toggleBurgs");
   if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
 
   const burg = id || d3.event.target.dataset.id;

src/dialogs/dialogs/burgs-overview.js

@@ -22,7 +22,7 @@ let isLoaded = false;
 export function open() {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleIcons")) toggleLayer("toggleIcons");
+  if (!layerIsOn("toggleBurgs")) toggleLayer("toggleBurgs");
   if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
 
   const body = document.getElementById("burgsBody");

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

src/modules/io/load.js

@@ -473,7 +473,7 @@ async function parseLoadedData(data) {
       if (hasChild(prec, "circle")) turnOn("togglePrec");
       if (notHidden(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
       if (notHidden(labels)) turnOn("toggleLabels");
-      if (notHidden(icons)) turnOn("toggleIcons");
+      if (notHidden(icons)) turnOn("toggleBurgs");
       if (hasChildren(armies) && notHidden(armies)) turnOn("toggleMilitary");
       if (hasChildren(markers)) turnOn("toggleMarkers");
       if (notHidden(ruler)) turnOn("toggleRulers");

src/modules/ui/threeD.js

@@ -339,7 +339,7 @@ window.ThreeD = (function () {
       }
 
       // icons
-      if (layerIsOn("toggleIcons")) {
+      if (layerIsOn("toggleBurgs")) {
         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);

src/scripts/generation/pack/generateRoutes.ts

@@ -34,7 +34,7 @@ export function generateRoutes(burgs: TBurgs, cells: Pick<IPack["cells"], "c" |
       const points: TPoints = featureCapitals.map(burg => [burg.x, burg.y]);
       const urquhartEdges = calculateUrquhartEdges(points);
       urquhartEdges.forEach(([fromId, toId]) => {
-        drawLine(points[fromId], points[toId], {stroke: "red", strokeWidth: 0.05});
+        drawLine(points[fromId], points[toId], {stroke: "red", strokeWidth: 0.03});
 
         const start = featureCapitals[fromId].cell;
         const exit = featureCapitals[toId].cell;
@@ -69,7 +69,7 @@ export function generateRoutes(burgs: TBurgs, cells: Pick<IPack["cells"], "c" |
       const points: TPoints = featureBurgs.map(burg => [burg.x, burg.y]);
       const urquhartEdges = calculateUrquhartEdges(points);
       urquhartEdges.forEach(([fromId, toId]) => {
-        drawLine(points[fromId], points[toId], {strokeWidth: 0.05});
+        drawLine(points[fromId], points[toId], {strokeWidth: 0.03});
 
         const start = featureBurgs[fromId].cell;
         const exit = featureBurgs[toId].cell;
@@ -116,7 +116,7 @@ export function generateRoutes(burgs: TBurgs, cells: Pick<IPack["cells"], "c" |
           const heightChangeCost = Math.abs(cells.h[neibCellId] - cells.h[next]) * 10; // routes tend to avoid elevation changes
           const heightCost = cells.h[neibCellId] > 80 ? cells.h[neibCellId] : 0; // routes tend to avoid mountainous areas
           const cellCoast = 10 + stateChangeCost + habitedCost + heightChangeCost + heightCost;
-          const totalCost = priority + (cellRoutes[neibCellId] || cells.burg[neibCellId] ? cellCoast / 2 : cellCoast);
+          const totalCost = priority + (cellRoutes[neibCellId] || cells.burg[neibCellId] ? cellCoast / 3 : cellCoast);
 
           if (from[neibCellId] || totalCost >= cost[neibCellId]) continue;
           from[neibCellId] = next;
@@ -174,12 +174,12 @@ function getRouteSegments(pathCells: number[], cellRoutes: Uint8Array) {
   // UC: complitely new route
   if (pathCells.every(noRoute)) return [pathCells];
 
-  // UC: all cells already have route
-  if (pathCells.every(hasRoute)) return [];
-
   // UC: only first and/or last cell have route
   if (pathCells.slice(1, -1).every(noRoute)) return [pathCells];
 
+  // UC: all cells already have route
+  if (pathCells.every(hasRoute)) return [];
+
   // UC: discontinuous route
   for (let i = 0; i < pathCells.length; i++) {
     const cellId = pathCells[i];

src/scripts/hotkeys.ts

@@ -105,7 +105,7 @@ function handleKeyup(event: KeyboardEvent) {
   else if (code === "KeyA") toggleLayer("togglePrec");
   else if (code === "KeyY") toggleLayer("toggleEmblems");
   else if (code === "KeyL") toggleLayer("toggleLabels");
-  else if (code === "KeyI") toggleLayer("toggleIcons");
+  else if (code === "KeyI") toggleLayer("toggleBurgs");
   else if (code === "KeyM") toggleLayer("toggleMilitary");
   else if (code === "KeyK") toggleLayer("toggleMarkers");
   else if (code === "Equal") toggleLayer("toggleRulers");