Fix behavior when clear and add makers/shape (lolochristen#55)

Co-authored-by: lolochristen <[email protected]>
SpatialFocus · Mar 27, 2024 · 88cd9cc · 88cd9cc
1 parent a2e61d8
commit 88cd9cc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 44 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor
@@ -13,6 +13,7 @@
             <option value="@MarkerType.MarkerCustomImage">Custom Image</option>
         </select>
         <button class="btn btn-primary" @onclick="() => _map.MarkersList.Clear()">Clear</button>
+        <button class="btn btn-primary" @onclick="AddRandom">Add Random</button>
     </div>
 </div>
 
@@ -40,6 +41,8 @@
 
     private async Task OnMapClick(Coordinate coordinate)
     {
+        _map.MarkersList.Clear();
+
         switch (_selectedMarkerType)
         {
             case MarkerType.MarkerPin:
@@ -55,4 +58,14 @@
         }
     }
 
+    private async Task AddRandom()
+    {
+        var random = new Random((int)DateTime.Now.Ticks);
+        var extent = _map.LayersList[0].Extent;
+        for (var i = 0; i < 20; i++)
+        {
+            _map.MarkersList.Add(
+                new Marker(MarkerType.MarkerPin, new Coordinate(random.NextDouble() * (extent[2] - extent[0]) + extent[0], random.NextDouble() * (extent[3] - extent[1]) + extent[1])));
+        }
+    }
 }
diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -791,23 +791,20 @@ private void ShapesOnCollectionChanged(object? sender, NotifyCollectionChangedEv
             foreach (var newShape in e.NewItems.OfType<Shape>())
                 newShape.ParentMap = this;
 
-        Task.Run(async () =>
+        if (e.Action == NotifyCollectionChangedAction.Reset)
         {
-            if (e.Action == NotifyCollectionChangedAction.Reset)
-            {
-                await _module.InvokeVoidAsync("MapOLSetShapes", _mapId, null);
-            }
-            else
-            {
-                if (e.OldItems != null)
-                    foreach (var oldShape in e.OldItems.OfType<Shape>())
-                        await _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature);
+            _ = _module.InvokeVoidAsync("MapOLSetShapes", _mapId, null);
+        }
+        else
+        {
+            if (e.OldItems != null)
+                foreach (var oldShape in e.OldItems.OfType<Shape>())
+                    _ = _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature);
 
-                if (e.NewItems != null)
-                    foreach (var newShape in e.NewItems.OfType<Shape>())
-                        await _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature);
-            }
-        });
+            if (e.NewItems != null)
+                foreach (var newShape in e.NewItems.OfType<Shape>())
+                    _ = _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature);
+        }
     }
 
     private void MarkersOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
@@ -819,22 +816,20 @@ private void MarkersOnCollectionChanged(object? sender, NotifyCollectionChangedE
             foreach (var newShape in e.NewItems.OfType<Shape>())
                 newShape.ParentMap = this;
 
-        Task.Run(async () =>
+        // when execute the following as Task, the order of execute of InvoiceAsync cannot be guaranteed
+        if (e.Action == NotifyCollectionChangedAction.Reset)
         {
-            if (e.Action == NotifyCollectionChangedAction.Reset)
-            {
-                await _module.InvokeVoidAsync("MapOLMarkers", _mapId, null);
-            }
-            else
-            {
-                if (e.OldItems != null)
-                    foreach (var oldShape in e.OldItems.OfType<Shape>())
-                        await _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature);
+            _ = _module.InvokeVoidAsync("MapOLMarkers", _mapId, null);
+        }
+        else
+        {
+            if (e.OldItems != null)
+                foreach (var oldShape in e.OldItems.OfType<Shape>())
+                    _ = _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature);
 
-                if (e.NewItems != null)
-                    foreach (var newShape in e.NewItems.OfType<Shape>())
-                        await _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature);
-            }
-        });
+            if (e.NewItems != null)
+                foreach (var newShape in e.NewItems.OfType<Shape>())
+                    _ = _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature);
+        }
     }
 }
diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -443,26 +443,24 @@ MapOL.prototype.findLayer = function (layer) {
 
 MapOL.prototype.setMarkers = function (markers) {
     var source = this.Markers.getSource();
-
     source.clear();
-
-    markers.forEach((marker) => {
-        var feature = this.mapShapeToFeature(marker);
-        source.addFeature(feature);
-    });
+    if (markers) {
+        markers.forEach((marker) => {
+            var feature = this.mapShapeToFeature(marker);
+            source.addFeature(feature);
+        });
+    }
 };
 
 MapOL.prototype.setShapes = function (shapes) {
     var source = this.Geometries.getSource();
-
     source.clear();
-
-    if (!shapes) return;
-
-    shapes.forEach((shape) => {
-        var feature = this.mapShapeToFeature(shape);
-        source.addFeature(feature);
-    });
+    if (shapes) {
+        shapes.forEach((shape) => {
+            var feature = this.mapShapeToFeature(shape);
+            source.addFeature(feature);
+        });
+    }
 };
 
 MapOL.prototype.loadGeoJson = function (json, dataProjection, raiseEvents) {