Added dateline wrapping to the Rectangle Layer

Author: matafokka

SynthPolygonLayer/SynthPolygonLayer.js

@@ -105,9 +105,8 @@ L.ALS.SynthPolygonLayer = L.ALS.SynthPolygonBaseLayer.extend({
 			}
 
 			// Skip cloned layers
-			if (layer.isCloned) {
+			if (layer.isCloned)
 				return;
-			}
 
 			this.cloneLayerIfNeeded(layer);
 

SynthRectangleBaseLayer/drawPaths.js

@@ -62,7 +62,7 @@ L.ALS.SynthRectangleBaseLayer.prototype.drawPathsWorker = function (isParallels)
 
 			lat = startLat, lng = startLng,
 			turfPolygonCoordinates = turfPolygon.geometry.coordinates[0], // MathTools accepts coordinates of the polygon, not polygon itself
-			number = 1, connectionLine = L.polyline([], connLineOptions),
+			number = 1, connectionLine = new L.WrappedPolyline([], connLineOptions),
 			prevLine, shouldDraw = true;
 
 		connectionLine.actualPaths = [];
@@ -133,7 +133,7 @@ L.ALS.SynthRectangleBaseLayer.prototype.drawPathsWorker = function (isParallels)
 				secondPoint = endPoint;
 			}
 
-			let line = L.polyline([], lineOptions); // Contains paths with turns, i.e. internal connections
+			let line = new L.WrappedPolyline([], lineOptions); // Contains paths with turns, i.e. internal connections
 
 			for (let point of [firstPoint, secondPoint]) {
 				// Add points to the path
@@ -147,7 +147,7 @@ L.ALS.SynthRectangleBaseLayer.prototype.drawPathsWorker = function (isParallels)
 
 				let labelId = L.ALS.Helpers.generateID();
 				this.pathsLabelsIds.push(labelId);
-				this.labelsGroup.addLabel(labelId, coord, number, L.LabelLayer.DefaultDisplayOptions[isParallels ? "Message" : "Error"]);
+				this.labelsGroup.addLabel(labelId, L.latLng(coord).wrap(), number, L.LabelLayer.DefaultDisplayOptions[isParallels ? "Message" : "Error"]);
 				number++;
 			}
 

SynthRectangleLayer/SynthRectangleLayer.js

@@ -34,6 +34,18 @@ L.ALS.SynthRectangleLayer = L.ALS.SynthRectangleBaseLayer.extend({
 		let layersWereInvalidated = false;
 
 		this.polygonGroup.eachLayer((layer) => {
+			// Remove a linked layer when a layer either original or cloned has been removed
+			if (layer.linkedLayer && !this.polygonGroup.hasLayer(layer.linkedLayer)) {
+				this.polygonGroup.removeLayer(layer);
+				return;
+			}
+
+			// Skip cloned layers
+			if (layer.isCloned)
+				return;
+
+			this.cloneLayerIfNeeded(layer);
+
 			// Limit polygon size by limiting total paths count
 			let bounds = layer.getBounds(), topLeft = bounds.getNorthWest(),
 				parallelsPathsCount = Math.ceil(this.getParallelOrMeridianLineLength(topLeft, bounds.getSouthWest()) / this.By) + 1,

WrappedPolyline.js

@@ -0,0 +1,55 @@
+/**
+ * A class for displaying paths by parallels and meridians. Shouldn't be using for anything else.
+ *
+ * @class
+ * @extends L.Polyline
+ */
+L.WrappedPolyline = L.Polyline.extend(/** @lends L.WrappedPolyline.prototype */{
+	initialize: function (latlngs, options) {
+		L.Util.setOptions(this, options);
+		this.setLatLngs(latlngs);
+	},
+
+	setLatLngs: function (latlngs) {
+		this._originalLatLngs = [];
+
+		if (latlngs.length === 0) {
+			L.Polyline.prototype.setLatLngs.call(this, this._originalLatLngs);
+			return this;
+		}
+
+		let segments = [this._originalLatLngs, []], moveBy = 0, isFirstIteration = true;
+
+		for (let segment of segments) {
+			for (let i = 0; i < latlngs.length; i++) {
+				let point = L.latLng(latlngs[i]).clone();
+
+				if (isFirstIteration && !moveBy) {
+					if (point.lng < -180)
+						moveBy = 360;
+					else if (point.lng > 180)
+						moveBy = -360;
+				} else if (!isFirstIteration)
+					point.lng += moveBy;
+
+				segment.push(point);
+			}
+			isFirstIteration = false;
+		}
+
+		L.Polyline.prototype.setLatLngs.call(this, moveBy === 0 ? this._originalLatLngs : segments);
+		return this;
+	},
+
+	addLatLng: function (latLng) {
+		return this.setLatLngs([...this._originalLatLngs, latLng]);
+	},
+
+	getLatLngs: function () {
+		return this._originalLatLngs;
+	},
+
+	toGeoJSON: function (precision) {
+		return new L.Polyline(this._originalLatLngs).toGeoJSON(precision);
+	}
+});

main.js

@@ -17,6 +17,7 @@ window.L = require("leaflet");
 L.GEODESIC_SEGMENTS = 500;
 
 L.Geodesic = require("leaflet.geodesic").GeodesicLine;
+require("./WrappedPolyline.js");
 require("leaflet-draw");
 require("./DrawGeodesic.js");
 require("leaflet-advanced-layer-system");
@@ -132,8 +133,7 @@ let overlayLayer = new L.BlackOverlayLayer({
 // When drawing starts, hide notifications and black overlay, but add red datelines
 
 let datelines = L.featureGroup();
-for (let sign of [1, -1]) {
-	let lng = 180 * sign;
+for (let lng of [180, -180]) {
 	datelines.addLayer(L.polyline([[90, lng], [-90, lng]], {
 		color: "red",
 		weight: 1,