Fully load river from save files

Correctly Load from save file now

index.html

@@ -5393,7 +5393,7 @@
             class="icon-plus"
           ></button>
           <button id="riverCreateNew" data-tip="Create new river selecting river cells" class="icon-map-pin"></button>
-          <button id="loadriverfromcsv" data-tip="Generate river from saved map" class="icon-upload"></button>
+          <button id="loadriverfromSavedMap" data-tip="Generate river from saved map" class="icon-upload"></button>
           <button id="riversBasinHighlight" data-tip="Toggle basin highlight mode" class="icon-sitemap"></button>
           <button
             id="riversExport"
@@ -5981,6 +5981,55 @@
         </div>
       </div>
 
+      <div id="loadRiverMapData" style="display: none" class="dialog">
+        <div>
+          <strong>Load River map from</strong>
+          <button onclick="mapRiverToLoad.click()" data-tip="Load map file (.map or .gz) from your local disk">
+            machine
+          </button>
+          <button
+            onclick="loadRiverURL()"
+            data-tip="Load map file (.map or .gz) file from URL. Note that the server should allow CORS"
+          >
+            URL
+          </button>
+          <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
+        </div>
+
+        <p>Click on <i>storage</i> to open the last saved map.</p>
+
+        <div id="loadRiverFromDropbox">
+          <p style="margin-bottom: 0.3em">
+            Or load from your Dropbox account
+            <button
+              id="dropboxConnectButton"
+              onclick="connectToDropbox()"
+              data-tip="Connect your Dropbox account to be able to load maps from it"
+            >
+              Connect
+            </button>
+          </p>
+
+          <select id="loadRiverFromDropboxSelect" style="width: 22em"></select>
+          <div id="loadRiverFromDropboxButtons" style="margin-bottom: 0.6em">
+            <button onclick="loadRiverFromDropbox()" data-tip="Load map file (.map or .gz) from your Dropbox">Load</button>
+            <button
+              onclick="createSharableRiverDropboxLink()"
+              data-tip="Select file and create a link to share with your friends"
+            >
+              Share
+            </button>
+          </div>
+
+          <div style="margin-top: 0.3em">
+            <div id="sharableLinkContainer" style="display: none">
+              <a id="sharableLink" target="_blank"></a>
+              <i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="exportToPngTilesScreen" style="display: none" class="dialog">
         <p>Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p>
         <div data-tip="Number of columns" style="margin-bottom: 0.3em">
@@ -6157,6 +6206,7 @@
 
     <div id="fileInputs" style="display: none">
       <input type="file" accept=".map,.gz" id="mapToLoad" />
+      <input type="file" accept=".map,.gz" id="mapRiverToLoad" />
       <input type="file" accept=".txt,.csv" id="burgsListToLoad" />
       <input type="file" accept=".txt" id="legendsToLoad" />
       <input type="file" accept="image/*" id="imageToLoad" />

modules/io/load.js

@@ -670,10 +670,27 @@ async function parseLoadedData(data) {
   }
 }
 
+async function createSharableRiverDropboxLink() {
+  const mapFile = document.querySelector("#loadRiverFromDropbox select").value;
+  const sharableLink = byId("sharableLink");
+  const sharableLinkContainer = byId("sharableLinkContainer");
 
+  try {
+    const previewLink = await Cloud.providers.dropbox.getLink(mapFile);
+    const directLink = previewLink.replace("www.dropbox.com", "dl.dropboxusercontent.com"); // DL allows CORS
+    const finalLink = `${location.origin}${location.pathname}?maplink=${directLink}`;
 
-async function loadRiversFromDropbox() {
+    sharableLink.innerText = finalLink.slice(0, 45) + "...";
-    const mapPath = byId("loadFromDropboxSelect")?.value;
+    sharableLink.setAttribute("href", finalLink);
+    sharableLinkContainer.style.display = "block";
+  } catch (error) {
+    ERROR && console.error(error);
+    return tip("Dropbox API error. Can not create link.", true, "error", 2000);
+  }
+}
+
+async function loadRiverFromDropbox() {
+    const mapPath = byId("loadRiverFromDropboxSelect")?.value;
 
   DEBUG && console.log("Loading map from Dropbox:", mapPath);
   const blob = await Cloud.providers.dropbox.load(mapPath);
@@ -746,21 +763,66 @@ async function parseLoadedDataOnlyRivers(data) {
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
+    const params = data[0].split("|");
+
+
     INFO && console.group("Loaded Map " + seed);
 
 
     void (function parsePackData() {
-      reGraph();
-      reMarkFeatures();
 
       pack.rivers = data[32] ? JSON.parse(data[32]) : [];
 
-      const cells = pack.cells;
+      pack.cells.r = Uint16Array.from(data[22].split(","));
-      cells.r = Uint16Array.from(data[22].split(","));
  
     })();
 
+    void (function restoreLayersState() {
+      const isVisible = selection => selection.node() && selection.style("display") !== "none";
+      const isVisibleNode = node => node && node.style.display !== "none";
+      const hasChildren = selection => selection.node()?.hasChildNodes();
+      const hasChild = (selection, selector) => selection.node()?.querySelector(selector);
+      const turnOn = el => byId(el).classList.remove("buttonoff");
 
+      toggleRivers();
+      toggleRivers();
+      // turn all layers off
+      byId("mapLayers")
+        .querySelectorAll("li")
+        .forEach(el => el.classList.add("buttonoff"));
+
+      // turn on active layers
+      if (hasChild(texture, "image")) turnOn("toggleTexture");
+      if (hasChildren(terrs)) turnOn("toggleHeight");
+      if (hasChildren(biomes)) turnOn("toggleBiomes");
+      if (hasChildren(cells)) turnOn("toggleCells");
+      if (hasChildren(gridOverlay)) turnOn("toggleGrid");
+      if (hasChildren(coordinates)) turnOn("toggleCoordinates");
+      if (isVisible(compass) && hasChild(compass, "use")) turnOn("toggleCompass");
+      if (hasChildren(rivers)) turnOn("toggleRivers");
+      if (isVisible(terrain) && hasChildren(terrain)) turnOn("toggleRelief");
+      if (hasChildren(relig)) turnOn("toggleReligions");
+      if (hasChildren(cults)) turnOn("toggleCultures");
+      if (hasChildren(statesBody)) turnOn("toggleStates");
+      if (hasChildren(provs)) turnOn("toggleProvinces");
+      if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones");
+      if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
+      if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
+      if (hasChildren(temperature)) turnOn("toggleTemp");
+      if (hasChild(population, "line")) turnOn("togglePopulation");
+      if (hasChildren(ice)) turnOn("toggleIce");
+      if (hasChild(prec, "circle")) turnOn("togglePrec");
+      if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
+      if (isVisible(labels)) turnOn("toggleLabels");
+      if (isVisible(icons)) turnOn("toggleIcons");
+      if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
+      if (hasChildren(markers)) turnOn("toggleMarkers");
+      if (isVisible(ruler)) turnOn("toggleRulers");
+      if (isVisible(scaleBar)) turnOn("toggleScaleBar");
+      if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
+
+      getCurrentPreset();
+    })();
     {
       // dynamically import and run auto-update script
       const versionNumber = parseFloat(params[0]);
@@ -776,11 +838,7 @@ async function parseLoadedDataOnlyRivers(data) {
       }
     }
 
-    {
+    fitMapToScreen();
-      // add custom texture if any
-      const textureHref = texture.attr("data-href");
-      if (textureHref) updateTextureSelectValue(textureHref);
-    }
 
     void (function checkDataIntegrity() {
       const cells = pack.cells;

modules/ui/rivers-overview.js

@@ -25,7 +25,7 @@ function overviewRivers() {
   document.getElementById("riversBasinHighlight").addEventListener("click", toggleBasinsHightlight);
   document.getElementById("riversExport").addEventListener("click", downloadRiversData);
   document.getElementById("riversRemoveAll").addEventListener("click", triggerAllRiversRemove);
-  document.getElementById("loadriverfromcsv").addEventListener("click", showLoadRiverPane);
+  document.getElementById("loadriverfromSavedMap").addEventListener("click", showLoadRiverPane);
 
   // add line for each river
   function riversOverviewAddLines() {
@@ -189,25 +189,9 @@ function overviewRivers() {
     riversOverviewAddLines();
   }
   
-  function loadriverfromcsvfunction() {
-    alertMessage.innerHTML = /* html */ `Are you sure you want to add river from file?`;
-        $("#alert").dialog({
-          resizable: false,
-          title: "Import rivers",
-          buttons: {
-            Import: function() {
-              $(this).dialog("load");
-              showLoadRiverPane();
-            },
-            Cancel: function() {
-              $(this).dialog("close");
-            }
-          }
-        });
-  }
 
 async function showLoadRiverPane() {
-  $("#loadMapData").dialog({
+  $("#loadRiverMapData").dialog({
     title: "Load River from saved map",
     resizable: false,
     width: "auto",
@@ -222,20 +206,20 @@ async function showLoadRiverPane() {
   // already connected to Dropbox: list saved maps
   if (Cloud.providers.dropbox.api) {
     byId("dropboxConnectButton").style.display = "none";
-    byId("loadFromDropboxSelect").style.display = "block";
+    byId("loadRiverFromDropboxSelect").style.display = "block";
-    const loadFromDropboxButtons = byId("loadFromDropboxButtons");
+    const loadRiverFromDropboxButtons = byId("loadRiverFromDropboxButtons");
-    const fileSelect = byId("loadFromDropboxSelect");
+    const fileSelect = byId("loadRiverFromDropboxSelect");
     fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Loading...</option>`;
 
     const files = await Cloud.providers.dropbox.list();
 
     if (!files) {
-      loadFromDropboxButtons.style.display = "none";
+      loadRiverFromDropboxButtons.style.display = "none";
       fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Save files to Dropbox first</option>`;
       return;
     }
 
-    loadFromDropboxButtons.style.display = "block";
+    loadRiverFromDropboxButtons.style.display = "block";
     fileSelect.innerHTML = "";
     files.forEach(({name, updated, size, path}) => {
       const sizeMB = rn(size / 1024 / 1024, 2) + " MB";
@@ -250,16 +234,13 @@ async function showLoadRiverPane() {
 
   // not connected to Dropbox: show connect button
   byId("dropboxConnectButton").style.display = "inline-block";
-  byId("loadFromDropboxButtons").style.display = "none";
+  byId("loadRiverFromDropboxButtons").style.display = "none";
-  byId("loadFromDropboxSelect").style.display = "none";
+  byId("loadRiverFromDropboxSelect").style.display = "none";
 }
 
-async function connectToDropbox() {
-  await Cloud.providers.dropbox.initialize();
-  if (Cloud.providers.dropbox.api) showLoadPane();
-}
 
-function loadURL() {
+
+function loadRiverURL() {
   const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
   const inner = `Provide URL to map file:
     <input id="mapURL" type="url" style="width: 24em" placeholder="https://e-cloud.com/test.map">
@@ -287,7 +268,7 @@ function loadURL() {
 }
 
 // load map
-byId("mapToLoad").addEventListener("change", function () {
+byId("mapRiverToLoad").addEventListener("change", function () {
   const fileToLoad = this.files[0];
   this.value = "";
   closeDialogs();