Allow to change interactive option of layer Leaflet#2669

Falke-Design · Oct 27, 2021 · 01a00f5 · 01a00f5
1 parent 7d9b2f7
commit 01a00f5
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/spec/suites/layer/ImageOverlaySpec.js b/spec/suites/layer/ImageOverlaySpec.js
@@ -157,4 +157,28 @@ describe('ImageOverlay', function () {
 			});
 		}
 	});
+
+	describe("#interactive", function () {
+		var blankUrl = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+		it("should have class leaflet-interactive", function () {
+			var overlay = L.imageOverlay(blankUrl, imageBounds, {interactive: true}).addTo(map);
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(true);
+		});
+		it("should not have class leaflet-interactive", function () {
+			var overlay = L.imageOverlay('', imageBounds).addTo(map);
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(false);
+		});
+		it("toggle class leaflet-interactive with setStyle", function () {
+			var overlay = L.imageOverlay('', imageBounds, {interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(false);
+			overlay.setStyle({interactive: true});
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(true);
+		});
+		it("toggle class leaflet-interactive with setInteractive", function () {
+			var overlay = L.imageOverlay('', imageBounds, {interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(false);
+			overlay.setInteractive(true);
+			expect(L.DomUtil.hasClass(overlay._image, 'leaflet-interactive')).to.eql(true);
+		});
+	});
 });
diff --git a/spec/suites/layer/marker/MarkerSpec.js b/spec/suites/layer/marker/MarkerSpec.js
@@ -328,4 +328,22 @@ describe("Marker", function () {
 			happen.mousemove(marker._icon);
 		});
 	});
+
+	describe("#interactive", function () {
+		it("should have class leaflet-interactive", function () {
+			var marker = new L.Marker([0, 0], {icon: icon1}).addTo(map);
+			expect(L.DomUtil.hasClass(marker._icon, 'leaflet-interactive')).to.eql(true);
+		});
+		it("should not have class leaflet-interactive", function () {
+			var marker = new L.Marker([0, 0], {icon: icon1, interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(marker._icon, 'leaflet-interactive')).to.eql(false);
+		});
+		it("toggle class leaflet-interactive", function () {
+			var marker = new L.Marker([0, 0], {icon: icon1, interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(marker._icon, 'leaflet-interactive')).to.eql(false);
+			marker.options.interactive = true;
+			marker.setIcon(icon1);
+			expect(L.DomUtil.hasClass(marker._icon, 'leaflet-interactive')).to.eql(true);
+		});
+	});
 });
diff --git a/spec/suites/layer/vector/PolylineSpec.js b/spec/suites/layer/vector/PolylineSpec.js
@@ -212,4 +212,21 @@ describe('Polyline', function () {
 			expect(polyline._latlngs).to.eql([L.latLng([1, 2])]);
 		});
 	});
+
+	describe("#interactive", function () {
+		it("should have class leaflet-interactive", function () {
+			var polyline = new L.Polyline([[1, 2], [2, 3]]).addTo(map);
+			expect(L.DomUtil.hasClass(polyline._path, 'leaflet-interactive')).to.eql(true);
+		});
+		it("should not have class leaflet-interactive", function () {
+			var polyline = new L.Polyline([[1, 2], [2, 3]], {interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(polyline._path, 'leaflet-interactive')).to.eql(false);
+		});
+		it("toggle class leaflet-interactive", function () {
+			var polyline = new L.Polyline([[1, 2], [2, 3]], {interactive: false}).addTo(map);
+			expect(L.DomUtil.hasClass(polyline._path, 'leaflet-interactive')).to.eql(false);
+			polyline.setStyle({interactive: true});
+			expect(L.DomUtil.hasClass(polyline._path, 'leaflet-interactive')).to.eql(true);
+		});
+	});
 });
diff --git a/src/layer/ImageOverlay.js b/src/layer/ImageOverlay.js
@@ -103,6 +103,9 @@ export var ImageOverlay = Layer.extend({
 		if (styleOpts.opacity) {
 			this.setOpacity(styleOpts.opacity);
 		}
+		if (styleOpts.interactive === true || styleOpts.interactive === false) {
+			this.setInteractive(styleOpts.interactive);
+		}
 		return this;
 	},
 
@@ -253,6 +256,21 @@ export var ImageOverlay = Layer.extend({
 			this._url = errorUrl;
 			this._image.src = errorUrl;
 		}
+	},
+
+	// @method setInteractive(interactive: Boolean): this
+	// Changes `interactive` option. Emit of [mouse events](#interactive-layer) on image overlay when clicked or hovered.
+	setInteractive: function (interactive) {
+		interactive = !!interactive;
+		if (interactive) {
+			DomUtil.addClass(this._image, 'leaflet-interactive');
+			this.addInteractiveTarget(this._image);
+		} else {
+			DomUtil.removeClass(this._image, 'leaflet-interactive');
+			this.removeInteractiveTarget(this._image);
+		}
+		this.options.interactive = interactive;
+		return this;
 	}
 });
 

diff --git a/src/layer/vector/SVG.VML.js b/src/layer/vector/SVG.VML.js
@@ -119,6 +119,12 @@ export var vmlMixin = {
 			container.removeChild(fill);
 			layer._fill = null;
 		}
+
+		if (layer.options.interactive) {
+			layer.addInteractiveTarget(container);
+		} else {
+			layer.removeInteractiveTarget(container);
+		}
 	},
 
 	_updateCircle: function (layer) {

diff --git a/src/layer/vector/SVG.js b/src/layer/vector/SVG.js
@@ -173,6 +173,14 @@ export var SVG = Renderer.extend({
 		} else {
 			path.setAttribute('fill', 'none');
 		}
+
+		if (layer.options.interactive) {
+			DomUtil.addClass(path, 'leaflet-interactive');
+			layer.addInteractiveTarget(layer._path);
+		} else if (DomUtil.hasClass(path, 'leaflet-interactive')) {
+			DomUtil.removeClass(path, 'leaflet-interactive');
+			layer.removeInteractiveTarget(layer._path);
+		}
 	},
 
 	_updatePoly: function (layer, closed) {