Town Promotion to largetown

index.html

@@ -3707,9 +3707,9 @@
         <input id="submapDepressRivers" class="checkbox" type="checkbox">
         <label for="submapDepressRivers" class="checkbox-label">Errode riverbeds.</label>
       </div>
-      <div data-tip="All small cities of the parent map will be promoted to Capitals" >
+      <div data-tip="Move all existing towns to the 'largetown' burg group">
-        <input id="submapPromoteTown" class="checkbox" type="checkbox">
+        <input id="submapPromoteTowns" class="checkbox" type="checkbox">
-        <label for="submapPromoteTown" class="checkbox-label">Promote towns to cities</label>
+        <label for="submapPromoteTowns" class="checkbox-label">Promote towns to largetowns</label>
       </div>
       <div data-tip="Add lakes in depressions. (Can be very slow on big landmasses!)" >
         <input id="submapAddLakeInDepression" class="checkbox" type="checkbox">

modules/ui/burg-editor.js

@@ -266,14 +266,7 @@ function editBurg(id) {
     toggleNewGroupInput();
     document.getElementById("burgInputGroup").value = "";
 
-    const newLabelG = document.querySelector("#burgLabels").appendChild(labelG.cloneNode(false));
+    addBurgsGroup(group);
-    newLabelG.id = group;
-    const newIconG = document.querySelector("#burgIcons").appendChild(iconG.cloneNode(false));
-    newIconG.id = group;
-    if (anchor) {
-      const newAnchorG = document.querySelector("#anchors").appendChild(anchorG.cloneNode(false));
-      newAnchorG.id = group;
-    }
     moveBurgToGroup(id, group);
   }
 

modules/ui/editors.js

@@ -169,7 +169,7 @@ function moveBurgToGroup(id, g) {
   const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
   const anchor = document.querySelector("#anchors [data-id='" + id + "']");
   if (!label || !icon) {
-    ERROR && console.error("Cannot find label or icon elements");
+    ERROR && console.error(`Cannot find label or icon elements for id ${id}`);
     return;
   }
 
@@ -190,6 +190,25 @@ function moveBurgToGroup(id, g) {
   }
 }
 
+function moveAllBurgsToGroup(fromGroup, toGroup) {
+  const groupToMove = document.querySelector(`#burgIcons #${fromGroup}`);
+  const burgsToMove = Array.from(groupToMove.children).map(x=>x.dataset.id);
+  addBurgsGroup(toGroup)
+  burgsToMove.forEach(x=>moveBurgToGroup(x, toGroup));
+}
+
+function addBurgsGroup(group) {
+  if (document.querySelector(`#burgLabels > #${group}`)) return;
+  const labelCopy = document.querySelector("#burgLabels > #towns").cloneNode(false);
+  const iconCopy = document.querySelector("#burgIcons > #towns").cloneNode(false);
+  const anchorCopy = document.querySelector("#anchors > #towns").cloneNode(false);
+
+  // FIXME: using the same id is against the spec!
+  document.querySelector("#burgLabels").appendChild(labelCopy).id = group;
+  document.querySelector("#burgIcons").appendChild(iconCopy).id = group;
+  document.querySelector("#anchors").appendChild(anchorCopy).id = group;
+}
+
 function removeBurg(id) {
   const label = document.querySelector("#burgLabels [data-id='" + id + "']");
   const icon = document.querySelector("#burgIcons [data-id='" + id + "']");

modules/ui/style.js

@@ -574,20 +574,20 @@ addFontMethod.addEventListener("change", function () {
 });
 
 styleFontSize.addEventListener("change", function () {
-  changeFontSize(+this.value);
+  changeFontSize(getEl(), +this.value);
 });
 
 styleFontPlus.addEventListener("click", function () {
   const size = +getEl().attr("data-size") + 1;
-  changeFontSize(Math.min(size, 999));
+  changeFontSize(getEl(), Math.min(size, 999));
 });
 
 styleFontMinus.addEventListener("click", function () {
   const size = +getEl().attr("data-size") - 1;
-  changeFontSize(Math.max(size, 1));
+  changeFontSize(getEl(), Math.max(size, 1));
 });
 
-function changeFontSize(size) {
+function changeFontSize(el, size) {
   styleFontSize.value = size;
 
   const getSizeOnScale = element => {
@@ -600,7 +600,7 @@ function changeFontSize(size) {
   };
 
   const scaleSize = getSizeOnScale(styleElementSelect.value);
-  getEl().attr("data-size", size).attr("font-size", scaleSize);
+  el.attr("data-size", size).attr("font-size", scaleSize);
 
   if (styleElementSelect.value === "legend") redrawLegend();
 }

modules/ui/submap.js

@@ -39,7 +39,7 @@ const generateSubmap = debounce(async function () {
 
     depressRivers: checked("submapDepressRivers"),
     addLakesInDepressions: checked("submapAddLakeInDepression"),
-    promoteTown: checked("submapPromoteTown"),
+    promoteTowns: checked("submapPromoteTowns"),
     smoothHeightMap: scale > 2,
   }
 
@@ -67,7 +67,7 @@ const generateSubmap = debounce(async function () {
   customization = 0;
 
   undraw();
-  resetZoom(1000);
+  resetZoom(0);
   let oldstate = {
     grid: _.cloneDeep(grid),
     pack: _.cloneDeep(pack),
@@ -77,7 +77,15 @@ const generateSubmap = debounce(async function () {
   };
 
   try {
+    const oldScale = scale;
     await Submap.resample(oldstate, projection, options);
+    if (options.promoteTowns) {
+      const groupName = 'largetowns';
+      moveAllBurgsToGroup('towns', groupName);
+      changeRadius(oldScale * 0.8, groupName);
+      changeFontSize(svg.select(`#labels #${groupName}`), oldScale*2);
+      invoceActiveZooming();
+    }
   } catch (error) {
     generateSubmapErrorHandler(error, oldstate, projection, options);
   }