UpdateCoordinates method and optimized change detection

src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor

@@ -21,7 +21,7 @@
 
 <SwissMap @ref="_map" OnClick="OnMapClicked" OnFeatureClick="OnFeatureClicked" Style="height:800px;" Class="card">
     <Features>
-        <Circle Center="new Coordinate(2770557.824138796, 1197279.0774135895)" Radius="5000" Fill="#2222AA66" Stroke="red" StrokeThickness="8"></Circle>
+        <Circle Center="@_circleCenter" Radius="5000" Fill="#2222AA66" Stroke="red" StrokeThickness="8"></Circle>
         <Point Coordinate="@_pos" StrokeThickness="4" Stroke="red" Fill="cyan" Radius="5"></Point>
         <Polygon Points="new []{new Coordinate(2604900, 1207650), new Coordinate(2634200, 1177650), new Coordinate(2621200, 1177950), new Coordinate(2551200, 1207650)}" Stroke="green" StrokeThickness="4" Fill="#2222AA66" Text="Ugly polygon" Font="20px sans-serif" TextColor="yellow"></Polygon>
         <Line Points="new []{new Coordinate(2734200, 1197650), new Coordinate(2754200, 1177650)}" Styles="new() { _lineStyle }"></Line>
@@ -34,6 +34,17 @@
     private SwissMap _map = null!;
     private string _featureInfo;
     private Coordinate _pos = new (2604200, 1197650);
+    private Coordinate _circleCenter = new Coordinate(2770557.824138796, 1197279.0774135895);
+    private Point _manualPoint;
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _manualPoint = new Point(new Coordinate(2608200, 1167650)) { StrokeThickness = 4, Stroke = "blue", Fill = "cyan", Radius = 5 };
+            _map.ShapesLayer.ShapesList.Add(_manualPoint);
+        }
+    }
 
     private StyleOptions _lineStyle = new StyleOptions()
     {
@@ -72,9 +83,19 @@
         }
     }
 
-    private void MovePoint()
+    private async Task MovePoint()
     {
-        _pos = new Coordinate(_pos.X + 1000, _pos.Y); // set new coordinate to trigger refresh
+        _pos = new Coordinate(_pos.X + 2000, _pos.Y); // set new coordinate to trigger refresh
+
+        for(int i = 0; i < 100; i++)
+        {
+            _circleCenter = new Coordinate(_circleCenter.X - 1000, _circleCenter.Y);
+            StateHasChanged();
+            await Task.Delay(1);
+
+            _manualPoint.Coordinate = new Coordinate(_manualPoint.Coordinate.X + 500, _manualPoint.Coordinate.Y);
+            await _manualPoint.UpdateCoordinates(); // manual created shapes require explicit update
+        }
     }
 
     private async Task RemoveShape()

src/OpenLayers.Blazor/Circle.cs

@@ -24,7 +24,7 @@ public Coordinate Center
     public override Task SetParametersAsync(ParameterView parameters)
     {
         if (parameters.TryGetValue(nameof(Center), out Coordinate coordinate) && !coordinate.Equals(Center))
-            _updateableParametersChanged = true;
+            _coordinatesParametersChanged = true;
 
         return base.SetParametersAsync(parameters);
     }

src/OpenLayers.Blazor/Map.razor.cs

@@ -1029,6 +1029,22 @@ public ValueTask UpdateShape(Shape shape)
         return _module?.InvokeVoidAsync("MapOLUpdateShape", _mapId, shape.Layer.Id, shape.InternalFeature) ?? ValueTask.CompletedTask;
     }
 
+    /// <summary>
+    ///     Sets coordinates of an existing shape
+    /// </summary>
+    /// <param name="shape"></param>
+    /// <returns></returns>
+    public ValueTask SetCoordinates(Shape shape, Coordinates coordinates)
+    {
+#if DEBUG
+        Console.WriteLine($"SetCoordinates: {shape.Id} {coordinates}");
+#endif
+        if (shape.Layer == null)
+            throw new InvalidOperationException("Shape must be assigned to a layer");
+
+        return _module?.InvokeVoidAsync("MapOLSetCoordinates", _mapId, shape.Layer.Id, shape.Id, coordinates) ?? ValueTask.CompletedTask;
+    }
+
     /// <summary>
     ///     Default Style Callback
     /// </summary>

src/OpenLayers.Blazor/Point.cs

@@ -58,7 +58,7 @@ protected override void SetStrokeThickness(double value)
     public override Task SetParametersAsync(ParameterView parameters)
     {
         if (parameters.TryGetValue(nameof(Coordinate), out Coordinate coordinate) && !coordinate.Equals(Coordinate))
-            _updateableParametersChanged = true;
+            _coordinatesParametersChanged = true;
 
         return base.SetParametersAsync(parameters);
     }

src/OpenLayers.Blazor/Shape.cs

@@ -9,6 +9,7 @@ namespace OpenLayers.Blazor;
 public class Shape : Feature, IDisposable
 {
     internal bool _updateableParametersChanged;
+    internal bool _coordinatesParametersChanged;
 
     /// <summary>
     ///     Initializes a new instance of <see cref="Shape" />.
@@ -390,7 +391,9 @@ public override Task SetParametersAsync(ParameterView parameters)
         if (parameters.TryGetValue(nameof(Font), out string? font) && font != Font)
             _updateableParametersChanged = true;
         if (parameters.TryGetValue(nameof(Coordinates), out Coordinates? c) && c != Coordinates)
-            _updateableParametersChanged = true;
+            _coordinatesParametersChanged = true;
+
+        Console.WriteLine($"{_updateableParametersChanged} {_coordinatesParametersChanged} { string.Join(";", parameters.ToDictionary().Select(p => p.Key + "=" + p.Value)) }");
 
         return base.SetParametersAsync(parameters);
     }
@@ -401,6 +404,12 @@ protected override async Task OnParametersSetAsync()
         {
             await UpdateShape();
             _updateableParametersChanged = false;
+            _coordinatesParametersChanged = false;
+        }
+        else if (_coordinatesParametersChanged)
+        {
+            await UpdateCoordinates();
+            _coordinatesParametersChanged = false;
         }
     }
 
@@ -413,4 +422,14 @@ public async Task UpdateShape()
         if (Map != null && Layer != null)
             await Map.UpdateShape(this);
     }
+
+    /// <summary>
+    ///     Update the coordinates of the shape on the parent layer.
+    /// </summary>
+    /// <returns></returns>
+    public async Task UpdateCoordinates()
+    {
+        if (Map != null && Layer != null)
+            await Map.SetCoordinates(this, Coordinates);
+    }
 }

src/OpenLayers.Blazor/wwwroot/openlayers_interop.js

@@ -95,6 +95,10 @@ export function MapOLGetCoordinates(mapId, layerId, shapeId) {
     return _MapOL[mapId].getCoordinates(layerId, shapeId);
 }
 
+export function MapOLSetCoordinates(mapId, layerId, shapeId, coordinates) {
+    return _MapOL[mapId].setCoordinates(layerId, shapeId, coordinates);
+}
+
 export function MapOLSetInteractions(mapId, active) {
     _MapOL[mapId].setInteractions(active);
 }
@@ -1081,6 +1085,22 @@ MapOL.prototype.getCoordinates = function(layerId, featureId) {
     return null;
 };
 
+MapOL.prototype.setCoordinates = function (layerId, featureId, coordinates) {
+    const feature = this.getLayer(layerId).getSource().getFeatureById(featureId);
+    if (feature == null)
+        return;
+    const geometry = feature.getGeometry();
+    const viewProjection = this.Map.getView().getProjection();
+    const sourceProjection = this.getLayer(layerId).getSource().getProjection();
+    const coordinatesTransformed = MapOL.transformCoordinates(coordinates,
+        sourceProjection ?? this.Options.coordinatesProjection,
+        viewProjection);
+    if (geometry.getType() == "Circle")
+        geometry.setCenter(coordinatesTransformed);
+    else
+        geometry.setCoordinates(coordinatesTransformed);
+};
+
 MapOL.prototype.getShapeStyleAsync = async function(feature, layer_id) {
     var shape;
     if (ol.render.Feature.prototype.isPrototypeOf(feature))