feat: submap - allow custom number of cells

modules/ui/options.js

@@ -332,16 +332,12 @@ const cellsDensityMap = {
 
 function changeCellsDensity(value) {
   pointsInput.value = value;
-  const cells = cellsDensityMap[value] || 1000;
+  const cells = cellsDensityMap[value] || pointsInput.dataset.cells;
   pointsInput.dataset.cells = cells;
-  pointsOutputFormatted.value = getCellsDensityValue(cells);
+  pointsOutputFormatted.value = cells / 1000 + "K";
   pointsOutputFormatted.style.color = getCellsDensityColor(cells);
 }
 
-function getCellsDensityValue(cells) {
-  return cells / 1000 + "K";
-}
-
 function getCellsDensityColor(cells) {
   return cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }

modules/ui/submap-tool.js

@@ -1,6 +1,8 @@
 "use strict";
 
 function openSubmapTool() {
+  resetInputs();
+
   $("#submapTool").dialog({
     title: "Create a submap",
     resizable: false,
@@ -20,8 +22,19 @@ function openSubmapTool() {
   if (modules.openSubmapTool) return;
   modules.openSubmapTool = true;
 
-  // add listeners
-  byId("submapPointsInput").on("input", handleCellsChange);
+  function resetInputs() {
+    updateCellsNumber(byId("pointsInput").value);
+    byId("submapPointsInput").oninput = e => updateCellsNumber(e.target.value);
+
+    function updateCellsNumber(value) {
+      byId("submapPointsInput").value = value;
+      const cells = cellsDensityMap[value];
+      byId("submapPointsInput").dataset.cells = cells;
+      const output = byId("submapPointsFormatted");
+      output.value = cells / 1000 + "K";
+      output.style.color = getCellsDensityColor(cells);
+    }
+  }
 
   function generateSubmap() {
     INFO && console.group("generateSubmap");
@@ -29,8 +42,9 @@ function openSubmapTool() {
     const [x0, y0] = [Math.abs(viewX / scale), Math.abs(viewY / scale)]; // top-left corner
     recalculateMapSize(x0, y0);
 
-    const cellsNumber = +byId("submapPointsInput").value;
-    changeCellsDensity(cellsNumber);
+    const submapPointsValue = byId("submapPointsInput").value;
+    const globalPointsValue = byId("pointsInput").value;
+    if (submapPointsValue !== globalPointsValue) changeCellsDensity(submapPointsValue);
 
     const projection = (x, y) => [(x - x0) * scale, (y - y0) * scale];
     const inverse = (x, y) => [x / scale + x0, y / scale + y0];
@@ -77,12 +91,4 @@ function openSubmapTool() {
       bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
     }
   }
-
-  function handleCellsChange() {
-    const cells = cellsDensityMap[+this.value] || 1000;
-    this.dataset.cells = cells;
-    const output = byId("submapPointsFormatted");
-    output.value = getCellsDensityValue(cells);
-    output.style.color = getCellsDensityColor(cells);
-  }
 }

modules/ui/transform-tool.js

@@ -32,7 +32,6 @@ async function openTransformTool() {
 
   // add listeners
   byId("transformToolBody").on("input", handleInput);
-  byId("transformPointsInput").on("input", handleCellsChange);
   byId("transformPreview")
     .on("mousedown", handleMousedown)
     .on("mouseup", _ => (mouseIsDown = false))
@@ -69,6 +68,18 @@ async function openTransformTool() {
     byId("transformShiftX").value = 0;
     byId("transformShiftY").value = 0;
     handleInput();
+
+    updateCellsNumber(byId("pointsInput").value);
+    byId("transformPointsInput").oninput = e => updateCellsNumber(e.target.value);
+
+    function updateCellsNumber(value) {
+      byId("transformPointsInput").value = value;
+      const cells = cellsDensityMap[value];
+      byId("transformPointsInput").dataset.cells = cells;
+      const output = byId("transformPointsFormatted");
+      output.value = cells / 1000 + "K";
+      output.style.color = getCellsDensityColor(cells);
+    }
   }
 
   function handleInput() {
@@ -89,14 +100,6 @@ async function openTransformTool() {
     `;
   }
 
-  function handleCellsChange() {
-    const cells = cellsDensityMap[+this.value] || 1000;
-    this.dataset.cells = cells;
-    const output = byId("transformPointsFormatted");
-    output.value = getCellsDensityValue(cells);
-    output.style.color = getCellsDensityColor(cells);
-  }
-
   function handleMousedown(e) {
     mouseIsDown = true;
     const shiftX = +byId("transformShiftX").value;
@@ -123,8 +126,9 @@ async function openTransformTool() {
   function transformMap() {
     INFO && console.group("transformMap");
 
-    const cellsNumber = +byId("transformPointsInput").value;
-    changeCellsDensity(cellsNumber);
+    const transformPointsValue = byId("transformPointsInput").value;
+    const globalPointsValue = byId("pointsInput").value;
+    if (transformPointsValue !== globalPointsValue) changeCellsDensity(transformPointsValue);
 
     const [projection, inverse] = getProjection();