Provide workaround for instant map interactions before map is ready

Fixes #305

Author: AB-xdev

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 4.0.2
+* Provide a workaround that fixes a problem where certain methods didn't work instantly after the map was created #305
+
 ## 4.0.1
 * Added shortcut method ``invokeSelfReturn`` #282
 * Updated dependencies

vaadin-maps-leaflet-flow-demo/src/main/java/software/xdev/vaadin/maps/leaflet/flow/DemoView.java

@@ -15,6 +15,7 @@
 
 import software.xdev.vaadin.maps.leaflet.flow.demo.ComplexDemo;
 import software.xdev.vaadin.maps.leaflet.flow.demo.FreeingUpResourceBenchmarkDemo;
+import software.xdev.vaadin.maps.leaflet.flow.demo.InitialResizeDemo;
 import software.xdev.vaadin.maps.leaflet.flow.demo.MinimalisticDemo;
 
 
@@ -55,6 +56,12 @@ protected void onAttach(final AttachEvent attachEvent)
 				"Minimalistic",
 				"Showcasing the simplest form of using the API"
 			),
+			new Example(
+				InitialResizeDemo.NAV,
+				"Initial resize",
+				"Some map methods - when called instantly after the map is created - will not work correctly."
+					+ " This example shows how to workaround this restriction."
+			),
 			new Example(
 				ComplexDemo.NAV,
 				"Complex",

vaadin-maps-leaflet-flow-demo/src/main/java/software/xdev/vaadin/maps/leaflet/flow/demo/InitialResizeDemo.java

@@ -0,0 +1,53 @@
+package software.xdev.vaadin.maps.leaflet.flow.demo;
+
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+import software.xdev.vaadin.maps.leaflet.MapContainer;
+import software.xdev.vaadin.maps.leaflet.basictypes.LLatLng;
+import software.xdev.vaadin.maps.leaflet.basictypes.LLatLngBounds;
+import software.xdev.vaadin.maps.leaflet.layer.raster.LTileLayer;
+import software.xdev.vaadin.maps.leaflet.layer.vector.LPolylineOptions;
+import software.xdev.vaadin.maps.leaflet.layer.vector.LRectangle;
+import software.xdev.vaadin.maps.leaflet.map.LMap;
+import software.xdev.vaadin.maps.leaflet.registry.LComponentManagementRegistry;
+import software.xdev.vaadin.maps.leaflet.registry.LDefaultComponentManagementRegistry;
+
+
+@Route(InitialResizeDemo.NAV)
+public class InitialResizeDemo extends VerticalLayout
+{
+	public static final String NAV = "/initial-resize";
+	
+	public InitialResizeDemo()
+	{
+		this.setSizeFull();
+		
+		final LComponentManagementRegistry reg = new LDefaultComponentManagementRegistry(this);
+		
+		// We want to show this area initially
+		final LLatLngBounds bounds = new LLatLngBounds(
+			reg,
+			new LLatLng(reg, 49, 12),
+			new LLatLng(reg, 50, 11)
+		);
+		
+		final MapContainer mapContainer = new MapContainer(reg, map -> {
+			// This needs to be done after the map was initially resized
+			// otherwise the view is calculated incorrectly
+			map.fitBounds(bounds);
+		});
+		mapContainer.setSizeFull();
+		this.add(mapContainer);
+		
+		final LMap map = mapContainer.getlMap();
+		map.addLayer(LTileLayer.createDefaultForOpenStreetMapTileServer(reg));
+		
+		// Still required as the map refuses to work otherwise
+		map.setView(new LLatLng(reg, 0, 0), 1);
+		
+		// Create rectangle for reference
+		new LRectangle(reg, bounds, new LPolylineOptions())
+			.addTo(map);
+	}
+}

vaadin-maps-leaflet-flow/src/main/java/software/xdev/vaadin/maps/leaflet/MapContainer.java

@@ -15,6 +15,9 @@
  */
 package software.xdev.vaadin.maps.leaflet;
 
+import java.util.function.Consumer;
+
+import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.Composite;
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.HasSize;
@@ -26,6 +29,7 @@
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 
+import software.xdev.vaadin.maps.leaflet.basictypes.LLatLngBounds;
 import software.xdev.vaadin.maps.leaflet.map.LMap;
 import software.xdev.vaadin.maps.leaflet.registry.LComponentManagementRegistry;
 
@@ -41,11 +45,64 @@ public class MapContainer extends Composite<Div> implements HasSize, HasStyle, H
 {
 	private final LMap lMap;
 
+	private Consumer<LMap> afterInitialResize;
+	
 	public MapContainer(final LComponentManagementRegistry reg)
 	{
+		this(reg, null);
+	}
+	
+	/**
+	 * @param afterInitialResize This is called after the map was initially resized/is ready.
+	 *                           <p/>
+	 *                           This is ONLY required when calling certain methods like e.g.
+	 *                           {@link LMap#fitBounds(LLatLngBounds)} instantly after the map is created.
+	 *                           <p/>
+	 *                           For performance reasons it's highly recommended to only use this when required.
+	 */
+	public MapContainer(
+		final LComponentManagementRegistry reg,
+		final Consumer<LMap> afterInitialResize)
+	{
+		this.afterInitialResize = afterInitialResize;
 		this.getContent().setSizeFull();
+		this.fixZIndex();
+		
+		this.lMap = new LMap(
+			reg,
+			this.getContent());
+		this.fixInitialSizeAfterCreation();
+	}
+	
+	protected String ensureId()
+	{
+		// Id is auto assigned by LMap so this will never throw
+		return this.getContent().getId().orElseThrow();
+	}
+	
+	protected void fixZIndex()
+	{
+		LMap.fixZIndex(this.getContent());
+	}
+	
+	protected void fixInitialSizeAfterCreation()
+	{
+		this.lMap.fixInvalidSizeAfterCreation(this.afterInitialResize != null
+			? "document.getElementById('" + this.ensureId() + "').$server.onInitialResize();"
+			: null);
+	}
+	
+	@ClientCallable
+	public void onInitialResize()
+	{
+		if(this.afterInitialResize == null)
+		{
+			return;
+		}
 
-		this.lMap = new LMap(reg, this.getContent());
+		this.afterInitialResize.accept(this.getlMap());
+		// Free up
+		this.afterInitialResize = null;
 	}
 
 	public LMap getlMap()

vaadin-maps-leaflet-flow/src/main/java/software/xdev/vaadin/maps/leaflet/map/LMap.java

@@ -50,8 +50,6 @@ public LMap(
 		final LMapOptions options)
 	{
 		super(compReg, "L.map($0" + compReg.writeOptionsOptionalParameter(options) + ")", id);
-		// https://stackoverflow.com/q/53879753
-		this.fixInvalidSizeAfterCreation();
 	}
 
 	public LMap(
@@ -65,23 +63,6 @@ public LMap(
 		final LComponentManagementRegistry compReg,
 		final Div bindDiv,
 		final LMapOptions options)
-	{
-		this(compReg, bindDiv, options, true);
-	}
-	
-	public LMap(
-		final LComponentManagementRegistry compReg,
-		final Div bindDiv,
-		final boolean fixDivZIndex)
-	{
-		this(compReg, bindDiv, null, fixDivZIndex);
-	}
-	
-	public LMap(
-		final LComponentManagementRegistry compReg,
-		final Div bindDiv,
-		final LMapOptions options,
-		final boolean fixDivZIndex)
 	{
 		this(
 			compReg,
@@ -91,10 +72,6 @@ public LMap(
 				return dynamicId;
 			}),
 			options);
-		if(fixDivZIndex)
-		{
-			fixZIndex(bindDiv);
-		}
 	}
 
 	/**
@@ -105,10 +82,15 @@ public static void fixZIndex(final Div div)
 		div.getStyle().set("z-index", "1");
 	}
 
-	protected void fixInvalidSizeAfterCreation()
+	public void fixInvalidSizeAfterCreation(final String callback)
 	{
+		// https://stackoverflow.com/q/53879753
+		// This should no longer be required starting in Leaflet v2 https://github.com/Leaflet/Leaflet/pull/8612
 		this.componentRegistry().execJs("let tempMap = " + this.clientComponentJsAccessor() + "; "
-			+ "setTimeout(function () { tempMap.invalidateSize(false); }, 100)");
+			+ "setTimeout(function () { "
+			+ "  tempMap.invalidateSize(false); "
+			+ (callback != null ? callback : "")
+			+ " }, 100)");
 	}
 
 	// endregion