rotation and shift for resample

index.html

@@ -4447,22 +4447,48 @@
       <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>
-          <td>Points number</td>
+          <tr>
-          <td>
+            <td>Points number</td>
-            <input
+            <td>
-              id="submapPointsInput"
+              <input
-              autocomplete="off"
+                id="submapPointsInput"
-              type="range"
+                autocomplete="off"
-              min="1"
+                type="range"
-              max="13"
+                min="1"
-              value="8"
+                max="13"
-              data-cells="50000"
+                value="8"
-              oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()"
+                data-cells="50000"
-            />
+                oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()"
-          </td>
+              />
-          <td>
+            </td>
-            <output id="submapPointsOutput" style="color: #053305">50K</output>
+            <td>
-          </td>
+              <output id="submapPointsOutput" style="color: #053305">50K</output>
+            </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>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>
         </table>
       </div>
       <div id="submapOptionsDialog" style="display: none; max-width: 300px" class="dialog">

modules/ui/submap.js

@@ -47,10 +47,30 @@ 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 [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 app = (f, g) => (x, y) => f(...g(x, y));
     if (!cellsDensityConstants[cellNumId]) {
       console.error("Unknown cell number!");
       return;
     }
+
+    let projection, inverse;
+    if (angle || shiftX || shiftY) {
+      projection = app(rot(angle), shift(shiftX, shiftY));
+      inverse = app(shift(-shiftX, -shiftY), rot(-angle));
+    } else {
+      projection = (x, y) => [x, y];
+      inverse = (x, y) => [x, y];
+    }
+
     changeCellsDensity(cellNumId);
     WARN && console.warn("Resampling current map");
     startResample({
@@ -61,8 +81,8 @@ window.UISubmap = (function () {
       promoteTowns: false,
       smoothHeightMap: false,
       rescaleStyles: false,
-      projection: (x, y) => [x, y],
+      projection,
-      inverse: (x, y) => [x, y]
+      inverse,
     });
   }, 1000);