Add minimum zoom button, reorganize zoom options

docs/README.md

@@ -137,15 +137,20 @@ To use it, copy the content and paste it in the URL field when creating a bookma
     <li>Overlay no longer wait for fetch to update. (v0.86.1)</li>
     <li>Allow templates to be renamed by clicking on the template name. (v0.86.1)</li>
     <li>
-    Allow smooth diagonal map scrolling via keyboard using arrow keys (<kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd>) (Implemented by <a href="https://github.com/due2e">@due2e</a> as per <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/pull/7">PR #7</a>). (v0.86.5)
+    Allow smooth diagonal map scrolling via keyboard using arrow keys (<kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd>). (v0.86.5)
       <ul>
+        <li>Implemented by <a href="https://github.com/due2e">@due2e</a> as per <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/pull/7">PR #7</a>.</li>
         <li>Notice that wplace has its default key bindings for axis-aligned panning via <kbd>↑</kbd> <kbd>←</kbd> <kbd>↓</kbd> <kbd>→</kbd> (and rotation / tilt with <kbd>Shift</kbd> key combined)</li>
       </ul>
     </li>
     <li>Show suspension countdown and reason if it exists. (v0.86.6)</li>
-    <li>Display Integer Zoom Ratio Buttons to allow screenshots to have exactly the same pixel size for each painted pixel (Address <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/issues/8">#8</a>). (v0.86.10)</li>
+    <li>Display extra zoom ratio Buttons to allow screenshots to have exactly the same pixel size for each painted pixel, or the minimum zoom possible before the artwork disappears (Addresses <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/issues/8">#8</a>). (v0.86.10)
+      <ul>
+        <li>Extended by <a href="https://github.com/Commenter25">@Commenter25</a> as per <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/pull/13">PR #13</a>. (v0.86.15)</li>
+      </ul>
+    </li>
     <li>Allow creating a line template of the currently selected color by picking two coordinates of opposite corners (One from the textboxes, another from the pixel you pick from the map before clicking the "Share" button) (v0.86.13)</li>
-    <li>Add an option to allow only currently enabled colors to be included in the error map. (Address <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/issues/11">#11</a>). (v0.86.14)</li>
+    <li>Add an option to allow only currently enabled colors to be included in the error map. (Addresses <a href="https://github.com/t-wy/Wplace-BlueMarble-Userscripts/issues/11">#11</a>). (v0.86.14)</li>
   </ul>
 </p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.86.14",
+  "version": "0.86.15",
   "type": "module",
   "homepage": "https://bluemarble.camilledaguin.fr/",
   "repository": {

src/main.js

@@ -7,7 +7,7 @@ import Overlay from './Overlay.js';
 import ApiManager from './apiManager.js';
 import TemplateManager from './templateManager.js';
 import { consoleLog, consoleWarn, selectAllCoordinateInputs, rgbToMeta, getOverlayCoords, sortByOptions, getCurrentColor } from './utils.js';
-import { getCenterGeoCoords, getPixelPerWplacePixel, forceRefreshTiles, removeLayer, themeList, setTheme, isMapTilerLoaded, teleportToTileCoords, teleportToGeoCoords, coordsTileCoordsToGeoCoords, coordsGeoCoordsToTileCoords, doAfterMapFound, panMap, setZoom} from './utilsMaptiler.js';
+import { getCenterGeoCoords, getPixelPerWplacePixel, forceRefreshTiles, removeLayer, themeList, setTheme, isMapTilerLoaded, teleportToTileCoords, teleportToGeoCoords, coordsTileCoordsToGeoCoords, coordsGeoCoordsToTileCoords, doAfterMapFound, panMap, setZoom, getCurrentTileSize} from './utilsMaptiler.js';
 // import { getCenterGeoCoords, addTemplate } from './utilsMaptiler.js';
 
 const name = GM_info.script.name.toString(); // Name of userscript
@@ -339,38 +339,56 @@ GM.getValue('bmTemplates', '{}').then(async storageTemplatesValue => {
   consoleLog(`%c${name}%c (${version}) userscript has loaded!`, 'color: cornflowerblue;', '');
 });
 
+/** Add the zoom level buttons if they do not exist.
+ * @since 0.86.15
+ */
+function createZoomButtons() {
+  // If the 1x zoom button does not exist, we make new zoom level buttons
+  const zoom1 = document.getElementById('BM-zoom-1x');
+  if (zoom1) return;
+  const ref = Array.from(document.querySelectorAll(".gap-1>.btn[title]")).slice(-1)[0];
+  if (!ref) return;
+  const container = ref.parentNode;
+  if (!container) return;
+
+  const isShown = templateManager.areIntegerZoomButtonsShown();
+
+  function createZoomButton(zoomLevel) {
+    const zoomBtn = document.createElement('button');
+
+    const label = zoomLevel === 0 ? "Min" : (zoomLevel + 'x');
+    zoomBtn.id = `BM-zoom-${label}`;
+    zoomBtn.textContent = label;
+
+    zoomBtn.className = ref.className;
+    zoomBtn.classList.add('bm-zoom-btn');
+    if (!isShown) {
+      zoomBtn.style.display = "none";
+    };
+
+    zoomBtn.onclick = function() {
+      var actualZoomLevel = zoomLevel;
+      if (zoomLevel === 0) {
+        var currentTileSize = getCurrentTileSize();
+        var epsilon = 1e-7; // Ensure no rounding issue but remain negligible
+        setZoom(Math.log2(8 * currentTileSize * currentTileSize) / 2 + epsilon);
+        return;
+      }
+      setZoom(Math.log2(4000 * actualZoomLevel / window['devicePixelRatio']));
+    };
+
+    container.appendChild(zoomBtn); // Adds the zoom level button
+  };
+
+  [0, 1, 2, 3, 4, 5, 10, 25].forEach( zoom => createZoomButton(zoom) );
+}
+
 /** Observe the black color, and add the "Move" button.
  * @since 0.66.3
  */
 function observeBlack() {
   const observer = new MutationObserver((mutations, observer) => {
-    const zoom1 = document.getElementById('BM-zoom-1x'); // The 1x zoom button
-
-    // If the 1x zoom button does not exist, we make a new one
-    if (!zoom1) {
-      const ref = Array.from(document.querySelectorAll(".gap-1>.btn[title]")).slice(-1)[0];
-      const isShown = templateManager.areIntegerZoomButtonsShown();
-      if (ref) {
-        const container = ref.parentNode;
-        if (container) {
-          [1, 2, 3, 5, 10, 25, 50, 100].forEach(zoom => {
-            const zoomBtn = document.createElement('button');
-            zoomBtn.id = 'BM-zoom-' + zoom + 'x';
-            zoomBtn.textContent = zoom + 'x';
-            zoomBtn.className = ref.className;
-            zoomBtn.classList.add('bm-zoom-btn');
-            zoomBtn.onclick = function() {
-              setZoom(Math.log2(4000 * zoom / window['devicePixelRatio']));
-            }
-            if (!isShown) {
-              zoomBtn.style.display = "none";
-            }
-
-            container.appendChild(zoomBtn); // Adds the zoom 1x button
-          })
-        }
-      }
-    }
+    createZoomButtons();
 
     const black = document.querySelector('#color-1'); // Attempt to retrieve the black color element for anchoring
 

src/utilsMaptiler.js

@@ -635,3 +635,20 @@ export function panMap(offset) {
     });
   }, offset);
 }
+
+
+/** Check the current tileSize
+ * @since 0.86.15
+ */
+export function getCurrentTileSize() {
+  var tileSize = controlMapTiler((map) => {
+    var source = map.getSource("pixel-art-layer");
+    if (!source) return;
+    return source.tileSize;
+  });
+  // fallback
+  if (tileSize === null) {
+    return window.innerWidth > 640 ? 550 : 400;
+  }
+  return tileSize;
+}