markers - generate tool + lock tooltip

index.html

@@ -2044,7 +2044,7 @@
         <button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
         <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
         <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
-        <button id="burgLock" class="icon-lock-open"></button>
+        <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
         <button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
       </div>
     </div>
@@ -2102,7 +2102,7 @@
 
       <div id="markerBottom">
         <button id="markerNotes" data-tip="Edit place legend (notes)" class="icon-edit"></button>
-        <button id="markerLock" class="icon-lock-open"></button>
+        <button id="markerLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
         <button id="markerAdd" data-tip="Add additional marker of that type" class="icon-plus"></button>
         <button id="markerRemove" data-tip="Remove the marker. Shortcut: Delete" class="icon-trash fastDelete"></button>
       </div>

modules/markers-generator.js

@@ -3,10 +3,18 @@
 window.Markers = (function () {
   let multiplier = 1;
 
-  const generate = requestedQtyMultiplier => {
+  const generate = function () {
     pack.markers = [];
-    if (requestedQtyMultiplier === 0) return;
-    if (requestedQtyMultiplier) multiplier = requestedQtyMultiplier;
+    generateTypes();
+  };
+
+  const regenerate = requestedMultiplier => {
+    if (requestedMultiplier === 0) return;
+    if (requestedMultiplier) multiplier = requestedMultiplier;
+    generateTypes();
+  };
+
+  const generateTypes = () => {
     TIME && console.time("addMarkers");
 
     const culturesSet = document.getElementById("culturesSet").value;
@@ -38,8 +46,9 @@ window.Markers = (function () {
   };
 
   const getQuantity = (array, min, each) => {
-    if (array.length < min) return 0;
-    return Math.ceil((array.length / each) * multiplier);
+    if (!array.length || array.length < min / multiplier) return 0;
+    const requestQty = Math.ceil((array.length / each) * multiplier);
+    return array.length < requestQty ? array.length : requestQty;
   };
 
   const extractAnyElement = array => {
@@ -765,5 +774,5 @@ window.Markers = (function () {
     return "marker" + i;
   }
 
-  return {generate};
+  return {generate, regenerate};
 })();

modules/ui/burg-editor.js

@@ -49,7 +49,6 @@ function editBurg(id) {
   document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
   document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
   document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton);
-  document.getElementById("burgLock").addEventListener("mouseover", showBurgELockTip);
   document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg);
 
   function updateBurgValues() {
@@ -373,11 +372,6 @@ function editBurg(id) {
     }
   }
 
-  function showBurgELockTip() {
-    const id = +elSelected.attr("data-id");
-    showBurgLockTip(id);
-  }
-
   function showStyleSection() {
     document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "none"));
     document.getElementById("burgStyleSection").style.display = "inline-block";

modules/ui/burgs-overview.js

@@ -79,20 +79,26 @@ function overviewBurgs() {
       const province = prov ? pack.provinces[prov].name : "";
       const culture = pack.cultures[b.culture].name;
 
-      lines += `<div class="states" data-id=${b.i} data-name="${b.name}" data-state="${state}" data-province="${province}" data-culture="${culture}" data-population=${population} data-type="${type}">
+      lines += `<div class="states" data-id=${b.i} data-name="${
+        b.name
+      }" data-state="${state}" data-province="${province}" data-culture="${culture}" data-population=${population} data-type="${type}">
         <span data-tip="Click to zoom into view" class="icon-dot-circled pointer"></span>
         <input data-tip="Burg name. Click and type to change" class="burgName" value="${b.name}" autocorrect="off" spellcheck="false">
         <input data-tip="Burg province" class="burgState" value="${province}" disabled>
         <input data-tip="Burg state" class="burgState" value="${state}" disabled>
-        <select data-tip="Dominant culture. Click to change burg culture (to change cell cultrure use Cultures Editor)" class="stateCulture">${getCultureOptions(b.culture)}</select>
+        <select data-tip="Dominant culture. Click to change burg culture (to change cell cultrure use Cultures Editor)" class="stateCulture">${getCultureOptions(
+          b.culture
+        )}</select>
         <span data-tip="Burg population" class="icon-male"></span>
         <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)}>
         <div class="burgType">
-          <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${b.capital ? "" : " inactive pointer"}"></span>
+          <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${
+        b.capital ? "" : " inactive pointer"
+      }"></span>
           <span data-tip="Click to toggle port status" class="icon-anchor pointer${b.port ? "" : " inactive"}" style="font-size:.9em"></span>
         </div>
         <span data-tip="Edit burg" class="icon-pencil"></span>
-        <span class="locks pointer  ${b.lock ? "icon-lock" : "icon-lock-open inactive"}"></span>
+        <span class="locks pointer ${b.lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove burg" class="icon-trash-empty"></span>
       </div>`;
     }
@@ -112,7 +118,6 @@ function overviewBurgs() {
     body.querySelectorAll("div > span.icon-star-empty").forEach(el => el.addEventListener("click", toggleCapitalStatus));
     body.querySelectorAll("div > span.icon-anchor").forEach(el => el.addEventListener("click", togglePortStatus));
     body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleBurgLockStatus));
-    body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("mouseover", showBurgOLockTip));
     body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openBurgEditor));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerBurgRemove));
 
@@ -202,11 +207,6 @@ function overviewBurgs() {
     }
   }
 
-  function showBurgOLockTip() {
-    const burg = +this.parentNode.dataset.id;
-    showBurgLockTip(burg);
-  }
-
   function openBurgEditor() {
     const burg = +this.parentNode.dataset.id;
     editBurg(burg);
@@ -413,7 +413,14 @@ function overviewBurgs() {
         if (this.value === "provinces") return d.province;
       };
 
-      const base = this.value === "states" ? getStatesData() : this.value === "cultures" ? getCulturesData() : this.value === "parent" ? getParentData() : getProvincesData();
+      const base =
+        this.value === "states"
+          ? getStatesData()
+          : this.value === "cultures"
+          ? getCulturesData()
+          : this.value === "parent"
+          ? getParentData()
+          : getProvincesData();
       burgs.forEach(b => (b.id = b.i + base.length - 1));
 
       const data = base.concat(burgs);
@@ -447,7 +454,10 @@ function overviewBurgs() {
   }
 
   function downloadBurgsData() {
-    let data = "Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Population,Longitude,Latitude,Elevation (" + heightUnit.value + "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
+    let data =
+      "Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Population,Longitude,Latitude,Elevation (" +
+      heightUnit.value +
+      "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
     const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
 
     valid.forEach(b => {

modules/ui/editors.js

@@ -265,15 +265,6 @@ function toggleBurgLock(burg) {
   b.lock = b.lock ? 0 : 1;
 }
 
-function showBurgLockTip(burg) {
-  const b = pack.burgs[burg];
-  if (b.lock) {
-    tip("Click to Unlock burg and allow it to be change by regeneration tools");
-  } else {
-    tip("Click to Lock burg and prevent changes by regeneration tools");
-  }
-}
-
 // draw legend box
 function drawLegend(name, data) {
   legend.selectAll("*").remove(); // fully redraw every time

modules/ui/general.js

@@ -56,6 +56,15 @@ function showDataTip(e) {
   tip(dataTip);
 }
 
+function showElementLockTip(event) {
+  const locked = event?.target?.classList?.contains("icon-lock");
+  if (locked) {
+    tip("Click to unlock the element and allow it to be changed by regeneration tools");
+  } else {
+    tip("Click to lock the element and prevent changes to it by regeneration tools");
+  }
+}
+
 const moved = debounce(mouseMove, 100);
 function mouseMove() {
   const point = d3.mouse(this);
@@ -101,7 +110,8 @@ function showMapTooltip(point, e, i, g) {
 
   if (group === "emblems" && e.target.tagName === "use") {
     const parent = e.target.parentNode;
-    const [g, type] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
+    const [g, type] =
+      parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
     const i = +e.target.dataset.i;
     if (event.shiftKey) highlightEmblemElement(type, g[i]);
 
@@ -328,7 +338,20 @@ function highlightEmblemElement(type, el) {
 
   if (type === "burg") {
     const {x, y} = el;
-    debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 0).attr("fill", "none").attr("stroke", "#d0240f").attr("stroke-width", 1).attr("opacity", 1).transition(animation).attr("r", 20).attr("opacity", 0.1).attr("stroke-width", 0).remove();
+    debug
+      .append("circle")
+      .attr("cx", x)
+      .attr("cy", y)
+      .attr("r", 0)
+      .attr("fill", "none")
+      .attr("stroke", "#d0240f")
+      .attr("stroke-width", 1)
+      .attr("opacity", 1)
+      .transition(animation)
+      .attr("r", 20)
+      .attr("opacity", 0.1)
+      .attr("stroke-width", 0)
+      .remove();
     return;
   }
 

modules/ui/markers-editor.js

@@ -22,6 +22,7 @@ function editMarker() {
   const markerStroke = document.getElementById("markerStroke");
 
   const markerNotes = document.getElementById("markerNotes");
+  const markerLock = document.getElementById("markerLock");
   const addMarker = document.getElementById("addMarker");
   const markerAdd = document.getElementById("markerAdd");
   const markerRemove = document.getElementById("markerRemove");
@@ -47,6 +48,7 @@ function editMarker() {
     listen(markerFill, "input", changePinFill),
     listen(markerStroke, "input", changePinStroke),
     listen(markerNotes, "click", editMarkerLegend),
+    listen(markerLock, "click", toggleMarkerLock),
     listen(markerAdd, "click", toggleAddMarker),
     listen(markerRemove, "click", confirmMarkerDeletion)
   ];
@@ -80,7 +82,7 @@ function editMarker() {
   }
 
   function updateInputs() {
-    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble"} = marker;
+    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble", lock} = marker;
 
     markerType.value = type;
     markerIcon.value = icon;
@@ -91,6 +93,8 @@ function editMarker() {
     markerPin.value = pin;
     markerFill.value = fill;
     markerStroke.value = stroke;
+
+    markerLock.className = lock ? "icon-lock" : "icon-lock-open";
   }
 
   function changeMarkerType() {
@@ -201,6 +205,12 @@ function editMarker() {
     editNotes(id, id);
   }
 
+  function toggleMarkerLock() {
+    marker.lock = !marker.lock;
+    markerLock.classList.toggle("icon-lock-open");
+    markerLock.classList.toggle("icon-lock");
+  }
+
   function toggleAddMarker() {
     addMarker.click();
   }

modules/ui/tools.js

@@ -417,22 +417,21 @@ function regenerateIce() {
 }
 
 function regenerateMarkers(event) {
-  // TODO: rework for new markers system
   if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v));
-  else addNumberOfMarkers(gauss(1, 0.5, 0.3, 5, 2));
+  else addNumberOfMarkers();
 
-  function addNumberOfMarkers(number) {
-    // remove existing markers and assigned notes
-    markers
-      .selectAll("use")
-      .each(function () {
-        const index = notes.findIndex(n => n.id === this.id);
+  function addNumberOfMarkers(multiplier) {
+    pack.markers = pack.markers.filter(marker => {
+      if (marker.lock) return true;
+      document.getElementById(`marker${marker.i}`)?.remove();
+      const index = notes.findIndex(note => note.id === marker.id);
       if (index != -1) notes.splice(index, 1);
-      })
-      .remove();
+      return false;
+    });
 
-    Markers.generate(number);
-    if (!layerIsOn("toggleMarkers")) toggleMarkers();
+    Markers.regenerate(multiplier);
+    turnButtonOn("toggleMarkers");
+    drawMarkers();
   }
 }