From 8152ccbe9c1ce0a66f83eac1918edc723f1debc8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 26 Apr 2020 21:12:54 +0300
Subject: [PATCH] v1.4.04

---
 index.html                     |  5 +++--
 main.js                        |  2 --
 modules/ui/coastline-editor.js |  2 +-
 modules/ui/options.js          | 13 ++++++++-----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index a1eb751e..38ade5c2 100644
--- a/index.html
+++ b/index.html
@@ -1797,7 +1797,8 @@
               <input data-tip="Maximal possible zoom level (should be > 1)" id="zoomExtentMax" class="paired" type="number" min=1 max=50 value=20>
             </td>
             <td>
-              <i data-tip="Restore default [1, 20] zoom extent" id="zoomExtentDefault" class="icon-ccw"></i>
+              <i data-tip="Restore default zoom extent (1, 20)" id="zoomExtentDefault" class="icon-ccw"></i>
+              <i data-tip="Allow to drag map beyond canvas borders" id="translateExtent" data-on=0 class="icon-hand-paper-o"></i>
             </td>
           </tr>
 
@@ -2186,7 +2187,7 @@
       </div>
 
       <button id="coastlineEditStyle" data-tip="Edit coastline group style in Style Editor" class="icon-brush"></button>
-      <button id="coastlineArea" data-tip="Lake area in selected units">0</button>
+      <button id="coastlineArea" data-tip="Landmass area in selected units">0</button>
     </div>
 
     <div id="reliefEditor" class="dialog" style="display: none">
diff --git a/main.js b/main.js
index 6803f2cc..0626e5b7 100644
--- a/main.js
+++ b/main.js
@@ -952,8 +952,6 @@ function drawCoastline() {
   const waterMask = defs.select("#water");
   lineGen.curve(d3.curveBasisClosed);
 
-  zoom.translateExtent([[-200, -200],[graphWidth+200, graphHeight+200]]);
-
   for (const i of cells.i) {
     const startFromEdge = !i && cells.h[i] >= 20;
     if (!startFromEdge && cells.t[i] !== -1 && cells.t[i] !== 1) continue; // non-edge cell
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index 428db5ce..b1c357a9 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -61,7 +61,7 @@ function editCoastline(node = d3.event.target) {
     lineGen.curve(d3.curveBasisClosed);
     const f = +elSelected.attr("data-f");
     const vertices = pack.features[f].vertices;
-    const points = vertices.map(v => pack.vertices.p[v]);
+    const points = clipPoly(vertices.map(v => pack.vertices.p[v]), 1);
     const d = round(lineGen(points));
     elSelected.attr("d", d);
     defs.select("mask#land > path#land_"+f).attr("d", d); // update land mask
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 6af46b0a..906914ad 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -118,6 +118,7 @@ optionsContent.addEventListener("click", function(event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
+  else if (id === "translateExtent") toggleTranslateExtent(event.target);
 });
 
 function mapSizeInputChange() {
@@ -138,7 +139,6 @@ function changeMapSize() {
   landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
-  //defs.select("#mapClip > rect").attr("width", maxWidth).attr("height", maxHeight);
 
   fitScaleBar();
   if (window.fitLegendBox) fitLegendBox();
@@ -152,10 +152,7 @@ function applyMapSize() {
   svgWidth = Math.min(graphWidth, window.innerWidth);
   svgHeight = Math.min(graphHeight, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
-  zoom.translateExtent([[0, 0],[graphWidth, graphHeight]]).scaleExtent([zoomMin, zoomMax]).scaleTo(svg, zoomMin);
-  //viewbox.attr("transform", null).attr("clip-path", "url(#mapClip)");
-  //defs.append("clipPath").attr("id", "mapClip").append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
-  //zoom.translateExtent([[-svgWidth*.2, -graphHeight*.2], [svgWidth*1.2, graphHeight*1.2]]);
+  zoom.translateExtent([[0, 0], [graphWidth, graphHeight]]).scaleExtent([zoomMin, zoomMax]).scaleTo(svg, zoomMin);
 }
 
 function toggleFullscreen() {
@@ -171,6 +168,12 @@ function toggleFullscreen() {
   changeMapSize();
 }
 
+function toggleTranslateExtent(el) {
+  const on = el.dataset.on = +!(+el.dataset.on);
+  if (on) zoom.translateExtent([[-graphWidth/2, -graphHeight/2], [graphWidth*1.5, graphHeight*1.5]]);
+  else zoom.translateExtent([[0, 0], [graphWidth, graphHeight]]);
+}
+
 function generateMapWithSeed() {
   if (optionsSeed.value == seed) {
     tip("The current map already has this seed", false, "error");