Resample transformations (#782)

* Rescale style option for submaps.

* namespace for submap ui.

* Keep visual change for towns

* rotation and shift for resample

* Shift first - rotate later

* submap mirror transformation, applicative style

Co-authored-by: Mészáros Gergely <monk@geotronic.hu>

index.html

@@ -4447,6 +4447,7 @@
       <div id="remapOptionsDialog" style="display: none; max-width: 300px" class="dialog">
         <p style="font-style: italic; color: red; font-weight: bold">Warning! This operation is destructive and irreversible. Don't forget to save your map!</p>
         <table>
+          <tr>
             <td>Points number</td>
             <td>
               <input
@@ -4455,14 +4456,49 @@
                 type="range"
                 min="1"
                 max="13"
-              value="8"
-              data-cells="50000"
+                value="4"
+                data-cells="10000"
                 oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()"
               />
             </td>
             <td>
-            <output id="submapPointsOutput" style="color: #053305">50K</output>
+              <output id="submapPointsOutput" style="color: #053305">10K</output>
             </td>
+          </tr>
+          <tr>
+            <td>Shift</td>
+            <td colspan="2">
+              X: <input id="submapShiftX" autocomplete="off" min="0" size="4" value="0"/>
+              Y: <input id="submapShiftY" autocomplete="off" min="0" size="4" value="0"/>
+            </td>
+          </tr>
+          <tr>
+            <td>Rotate <i class="icon-cw"></i></td>
+            <td>
+              <input
+                id="submapRotationAngle"
+                autocomplete="off"
+                type="range"
+                min="0"
+                max="359"
+                value="0"
+                oninput="document.getElementById('submapRotationAngleOutput').value=+this.value + '°'"
+              />
+            </td>
+            <td>
+              <output id="submapRotationAngleOutput" style="color: #053305">0°</output>
+            </td>
+          </tr>
+          <tr>
+            <td>Mirror</td>
+            <td colspan="2">
+              <input type="checkbox" class="checkbox" id="submapMirrorH" />
+              <label for="submapMirrorH" class="checkbox-label" >Horizontally</label>
+              &nbsp;
+              <input type="checkbox" class="checkbox" id="submapMirrorV" />
+              <label for="submapMirrorV" class="checkbox-label">Vertically</label>
+            </td>
+          </tr>
         </table>
       </div>
       <div id="submapOptionsDialog" style="display: none; max-width: 300px" class="dialog">

main.js

@@ -1413,6 +1413,7 @@ function reMarkFeatures() {
     cells.harbor[i] = water.length;
   };
 
+  if (!cells.i.length) return; // no cells -> there is nothing to do
   for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
     const start = queue[0]; // first cell
     cells.f[start] = i; // assign feature number

modules/ui/submap.js

@@ -25,6 +25,12 @@ window.UISubmap = (function () {
 
   function openRemapOptions() {
     resetZoom(0);
+    document.getElementById("submapRotationAngle").value = 0;
+    document.getElementById("submapRotationAngleOutput").value = "0°";
+    document.getElementById("submapShiftX").value = 0;
+    document.getElementById("submapShiftY").value = 0;
+    document.getElementById("submapMirrorH").checked = false;
+    document.getElementById("submapMirrorV").checked = false;
     $("#remapOptionsDialog").dialog({
       title: "Resampler options",
       resizable: false,
@@ -47,10 +53,36 @@ window.UISubmap = (function () {
   const resampleCurrentMap = debounce(function () {
     // Resample the whole map to different cell resolution or shape
     const cellNumId = Number(document.getElementById("submapPointsInput").value);
+    const angle = Number(document.getElementById("submapRotationAngle").value) / 180 * Math.PI;
+    const shiftX = Number(document.getElementById("submapShiftX").value);
+    const shiftY = Number(document.getElementById("submapShiftY").value);
+    const mirrorH = document.getElementById("submapMirrorH").checked;
+    const mirrorV = document.getElementById("submapMirrorV").checked;
     if (!cellsDensityConstants[cellNumId]) {
       console.error("Unknown cell number!");
       return;
     }
+
+    const [cx, cy] = [graphWidth / 2, graphHeight / 2];
+    const rot = alfa  => (x, y) => [
+      (x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx,
+      (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy
+    ];
+    const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
+    const flipH = (x, y) => [-x + 2 * cx, y];
+    const flipV = (x, y) => [x, -y + 2 * cy];
+    const app = (f, g) => (x, y) => f(...g(x, y));
+    const id = (x, y) => [x, y];
+    let projection = id, inverse = id;
+
+    if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
+    if (shiftX || shiftY) {
+      projection = app(shift(shiftX, shiftY), projection);
+      inverse = app(inverse, shift(-shiftX, -shiftY));
+    }
+    if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
+    if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
+
     changeCellsDensity(cellNumId);
     WARN && console.warn("Resampling current map");
     startResample({
@@ -61,8 +93,8 @@ window.UISubmap = (function () {
       promoteTowns: false,
       smoothHeightMap: false,
       rescaleStyles: false,
-      projection: (x, y) => [x, y],
-      inverse: (x, y) => [x, y]
+      projection,
+      inverse,
     });
   }, 1000);