feat: routes - lock routes

index.html

@@ -2996,6 +2996,7 @@
             class="icon-chart-area"
           ></button>
           <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
+          <button id="routeLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
           <button
             id="routeRemove"
             data-tip="Remove route"
@@ -5458,12 +5459,6 @@
             Population
           </div>
           <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div
-            id="burgsInvertLock"
-            style="color: #6e5e66"
-            data-tip="Click to invert lock for all burgs"
-            class="icon-lock pointer"
-          ></div>
         </div>
 
         <div id="burgsBody" class="table"></div>
@@ -5536,12 +5531,17 @@
 
         <div id="routesBottom">
           <button id="routesOverviewRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-          <button id="routeCreateNew" data-tip="Create a new route selecting route cells" class="icon-map-pin"></button>
+          <button
+            id="routesCreateNew"
+            data-tip="Create a new route selecting route cells"
+            class="icon-map-pin"
+          ></button>
           <button
             id="routesExport"
             data-tip="Save routes-related data as a text file (.csv)"
             class="icon-download"
           ></button>
+          <button id="routesLockAll" data-tip="Lock or unlock all routes" class="icon-lock"></button>
           <button id="routesRemoveAll" data-tip="Remove all routes" class="icon-trash"></button>
         </div>
       </div>

modules/routes-generator.js

@@ -2,15 +2,17 @@ const ROUTES_SHARP_ANGLE = 135;
 const ROUTES_VERY_SHARP_ANGLE = 115;
 
 window.Routes = (function () {
-  function generate() {
+  function generate(lockedRoutes = []) {
     const {capitalsByFeature, burgsByFeature, portsByFeature} = sortBurgsByFeature(pack.burgs);
+
     const connections = new Map();
+    lockedRoutes.forEach(route => addConnections(route.points.map(p => p[2])));
 
     const mainRoads = generateMainRoads();
     const trails = generateTrails();
     const seaRoutes = generateSeaRoutes();
 
-    pack.routes = createRoutesData();
+    pack.routes = createRoutesData(lockedRoutes);
     pack.cells.routes = buildLinks(pack.routes);
 
     function sortBurgsByFeature(burgs) {
@@ -124,8 +126,7 @@ window.Routes = (function () {
       return segments;
     }
 
-    function createRoutesData() {
-      const routes = [];
+    function createRoutesData(routes) {
       const pointsArray = preparePointsArray();
 
       for (const {feature, cells, merged} of mergeRoutes(mainRoads)) {

modules/ui/burgs-overview.js

@@ -36,7 +36,6 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   });
   byId("burgsLockAll").addEventListener("click", toggleLockAll);
   byId("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
-  byId("burgsInvertLock").addEventListener("click", invertLock);
 
   function refreshBurgsEditor() {
     updateFilter();
@@ -604,11 +603,6 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     burgsOverviewAddLines();
   }
 
-  function invertLock() {
-    pack.burgs = pack.burgs.map(burg => ({...burg, lock: !burg.lock}));
-    burgsOverviewAddLines();
-  }
-
   function toggleLockAll() {
     const activeBurgs = pack.burgs.filter(b => b.i && !b.removed);
     const allLocked = activeBurgs.every(burg => burg.lock);

modules/ui/general.js

@@ -67,9 +67,9 @@ function showDataTip(event) {
 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");
+    tip("Locked. 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");
+    tip("Unlocked. Click to lock the element and prevent changes to it by regeneration tools");
   }
 }
 

modules/ui/routes-editor.js

@@ -23,6 +23,7 @@ function editRoute(id) {
     updateRouteData(route);
     drawControlPoints(route.points);
     drawCells(route.points);
+    updateLockIcon();
   }
 
   $("#routeEditor").dialog({
@@ -41,6 +42,7 @@ function editRoute(id) {
   byId("routeJoin").on("click", openJoinRoutesDialog);
   byId("routeElevationProfile").on("click", showRouteElevationProfile);
   byId("routeLegend").on("click", editRouteLegend);
+  byId("routeLock").on("click", toggleLockButton);
   byId("routeRemove").on("click", removeRoute);
   byId("routeName").on("input", changeName);
   byId("routeGroup").on("input", changeGroup);
@@ -371,6 +373,23 @@ function editRoute(id) {
     editStyle("routes", group);
   }
 
+  function toggleLockButton() {
+    const route = getRoute();
+    route.lock = !route.lock;
+    updateLockIcon();
+  }
+
+  function updateLockIcon() {
+    const route = getRoute();
+    if (route.lock) {
+      byId("routeLock").classList.remove("icon-lock-open");
+      byId("routeLock").classList.add("icon-lock");
+    } else {
+      byId("routeLock").classList.remove("icon-lock");
+      byId("routeLock").classList.add("icon-lock-open");
+    }
+  }
+
   function removeRoute() {
     alertMessage.innerHTML = "Are you sure you want to remove the route";
     $("#alert").dialog({

modules/ui/routes-overview.js

@@ -21,8 +21,9 @@ function overviewRoutes() {
 
   // add listeners
   byId("routesOverviewRefresh").on("click", routesOverviewAddLines);
-  byId("routeCreateNew").on("click", createRoute);
+  byId("routesCreateNew").on("click", createRoute);
   byId("routesExport").on("click", downloadRoutesData);
+  byId("routesLockAll").on("click", toggleLockAll);
   byId("routesRemoveAll").on("click", triggerAllRoutesRemove);
 
   // add line for each route
@@ -47,6 +48,9 @@ function overviewRoutes() {
         <div data-tip="Route group" style="width: 8em;">${route.group}</div>
         <div data-tip="Route length" style="width: 6em;">${length}</div>
         <span data-tip="Edit route" class="icon-pencil"></span>
+        <span class="locks pointer ${
+          route.lock ? "icon-lock" : "icon-lock-open inactive"
+        }" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove route" class="icon-trash-empty"></span>
       </div>`;
     }
@@ -62,6 +66,7 @@ function overviewRoutes() {
     body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", routeHighlightOff));
     body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.on("click", zoomToRoute));
     body.querySelectorAll("div > span.icon-pencil").forEach(el => el.on("click", openRouteEditor));
+    body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleLockStatus));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", triggerRouteRemove));
 
     applySorting(routesHeader);
@@ -110,6 +115,33 @@ function overviewRoutes() {
     editRoute(id);
   }
 
+  function toggleLockStatus() {
+    const routeId = +this.parentNode.dataset.id;
+    const route = pack.routes[routeId];
+    route.lock = !route.lock;
+
+    if (this.classList.contains("icon-lock")) {
+      this.classList.remove("icon-lock");
+      this.classList.add("icon-lock-open");
+      this.classList.add("inactive");
+    } else {
+      this.classList.remove("icon-lock-open");
+      this.classList.add("icon-lock");
+      this.classList.remove("inactive");
+    }
+  }
+
+  function toggleLockAll() {
+    const allLocked = pack.routes.every(route => route.lock);
+
+    pack.routes.forEach(route => {
+      route.lock = !allLocked;
+    });
+
+    routesOverviewAddLines();
+    byId("routesLockAll").className = allLocked ? "icon-lock" : "icon-lock-open";
+  }
+
   function triggerRouteRemove() {
     const routeId = +this.parentNode.dataset.id;
 

modules/ui/tools.js

@@ -117,10 +117,10 @@ async function openEmblemEditor() {
 }
 
 function regenerateRoutes() {
-  pack.routes = [];
-  pack.cells.routes = {};
+  const locked = pack.routes.filter(route => route.lock).map((route, index) => ({...route, i: index}));
+  Routes.generate(locked);
+
   routes.selectAll("path").remove();
-  Routes.generate();
   if (layerIsOn("toggleRoutes")) drawRoutes();
 }