Fixed Leaflet layers being interactive and/or draggable (for example,…

… markers) when ALS layer is not being selected.

Added setInteractive(), getInteractive() and isInteractive() methods to L.Layer (thanks to Piero "Jadaw1n" Steinger; comment: Leaflet/Leaflet#5442 (comment); home page: https://github.com/Jadaw1n)

js/LeafletAdvancedLayerSystem/InteractiveLayerPatch.js

@@ -0,0 +1,39 @@
+/**
+ * Sets this layer to be interactive or not.
+ * @param interactive {boolean} If true, this layer will be interactive. Otherwise layer will be static.
+ * @author Piero "Jadaw1n" Steinger. Home page: https://github.com/Jadaw1n
+ */
+L.Layer.prototype.setInteractive = function (interactive) {
+	if (this.getLayers) {
+		this.getLayers().forEach(layer => {
+			layer.setInteractive(interactive);
+		});
+		return;
+	}
+	if (!this._path) {
+		return;
+	}
+
+	this.options.interactive = interactive;
+
+	if (interactive) {
+		L.DomUtil.addClass(this._path, 'leaflet-interactive');
+	} else {
+		L.DomUtil.removeClass(this._path, 'leaflet-interactive');
+	}
+};
+
+/**
+ * @return {boolean} True, if this layer is interactive. False otherwise.
+ */
+L.Layer.prototype.getInteractive = function () {
+	return this.options.interactive;
+}
+
+/**
+ * Alias for Layer.getInteractive()
+ * @return {boolean} True, if this layer is interactive. False otherwise.
+ */
+L.Layer.prototype.isInteractive = function () {
+	return this.getInteractive();
+}

js/LeafletAdvancedLayerSystem/System.js

@@ -1,11 +1,12 @@
 /**
- * Root object containing all AdvancedLayerSystem stuff.
+ * Root object containing all AdvancedLayerSystem stuff
  */
 L.ALS = {};
 
 const Sortable = require("sortablejs");
 const JSZip = require("jszip");
 const saveAs = require("file-saver");
+require("./InteractiveLayerPatch.js");
 require("./Helpers.js");
 require("./Serializable.js");
 require("./Widgetable.js");
@@ -277,13 +278,43 @@ L.ALS.System = L.Control.extend({
 			this._selectedLayer.onDeselect();
 		}
 
-		// Deselect other layers and select given layer
-		for (let layer in this._layers) {
-			this._layers[layer].isSelected = false;
+		// Deselect other layers, remove interactive and dragging abilities, and select given layer
+		for (let prop in this._layers) {
+			let layer = this._layers[prop];
+			layer.isSelected = false;
+			if (!layer.layers)
+				continue;
+			layer.layers.eachLayer((leafletLayer) => {
+				if (leafletLayer.wasInteractive === undefined && leafletLayer.getInteractive)
+					leafletLayer.wasInteractive = leafletLayer.getInteractive();
+
+				if (leafletLayer.setInteractive)
+					leafletLayer.setInteractive(false);
+
+				if (leafletLayer.dragging) {
+					if (leafletLayer.wasDraggable === undefined)
+						leafletLayer.wasDraggable = leafletLayer.dragging.enabled();
+					leafletLayer.dragging.disable();
+				}
+			});
 		}
 
 		this._layers[layerId].isSelected = true;
 		this._selectedLayer = this._layers[layerId];
+
+		if (this._selectedLayer.layers) {
+			this._selectedLayer.layers.eachLayer((leafletLayer) => {
+				if (leafletLayer.setInteractive && leafletLayer.wasInteractive)
+					leafletLayer.setInteractive(true);
+
+				if (leafletLayer.wasDraggable && leafletLayer.dragging)
+					leafletLayer.dragging.enable();
+
+				delete leafletLayer.wasInteractive;
+				delete leafletLayer.wasDraggable;
+			});
+		}
+
 		this._selectedLayer.onSelect();
 
 		// Do the same for HTML elements