diff --git a/index.html b/index.html
index a1eb751e..38ade5c2 100644
--- a/index.html
+++ b/index.html
@@ -1797,7 +1797,8 @@
-
+
+
|
@@ -2186,7 +2187,7 @@
-
+
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");