Fix coordination Serializations / Optimize shape/makers lists handling (

#32) * fix coordinats serialization * fix getShapeStyle with sync/nonsync * fix point * Optimize Shape/Markers collection modification * remove test code --------- Co-authored-by: lolochristen <[email protected]>
lolochristen · Dec 29, 2023 · a0240c5 · a0240c5
1 parent aa4645a
commit a0240c5
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 51 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor
@@ -1,4 +1,5 @@
 @page "/drawdemo"
+@using System.Text.Json
 @rendermode Components.RenderMode.DefaultRenderMode
 
 <div class="card mt-2 mb-2">
@@ -33,7 +34,7 @@
     </div>
 </div>
 
-<SwissMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" OnShapeChanged="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType" Freehand="_freehand">
+<SwissMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType" Freehand="_freehand">
     <Popup>
         <div id="popup" class="ol-box">
             @if (@context != null)
@@ -43,47 +44,43 @@
         </div>
     </Popup>
     <Features>
-        <Line Points="new []{new Coordinate(1197650, 2604200), new Coordinate(1177650, 2624200)}" BorderColor="red" BorderSize="2"></Line>
+        <Line Points="new []{new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650)}" BorderColor="red" BorderSize="2"></Line>
         <Circle @ref="_circle" Center="_center" Radius="2000" BorderSize="3" BorderColor="blue" BackgroundColor="#55229933"></Circle>
-        <Point Coordinate="new Coordinate(1247123.8311215444, 2683276.620804008)" BackgroundColor="green" Radius="20"></Point>
+        <Point Coordinate="new Coordinate(2683276.620804008, 1247123.8311215444)" BackgroundColor="green" Radius="20"></Point>
     </Features>
 </SwissMap>
 
-<CodeView Source="DrawDemo.razor" />
-
 @if (_map != null)
 {
-    <div>
-        <h5>Shapes</h5>
+ <div class="card mt-2 mb-2">
+    <div class="card-header">
+        <h5 class="card-title">Shapes</h5>
+    </div>
+    <div class="card-body">
         @foreach (var shape in _map.ShapesList)
         {
             <p>
                 @shape.Id @shape.Type @shape.GeometryType
                 <ul>
                     @if (shape.Coordinates != null)
                     {
-                        @foreach (Coordinate c in shape.Coordinates)
-                        {
-                            <li>@c</li>
-                        }
+                        @JsonSerializer.Serialize(shape.Coordinates)
                     }
                 </ul>
             </p>
         }
-        <h5>Markers</h5>
-        @foreach (var marker in _map.MarkersList)
-        {
-            <p>@marker.Id @marker.Type</p>
-        }
     </div>
+</div>
 }
 
+<CodeView Source="DrawDemo.razor" />
+
 @code {
     private SwissMap _map = null!;
     private ShapeType _shapeType = ShapeType.LineString;
     private double _y = 1197650;
     private Circle _circle;
-    private Coordinate _center = new Coordinate(1197650, 2604200);
+    private Coordinate _center = new(2604200, 1197650);
     private bool _enabledraw, _enableedit, _snap = true, _freehand;
 
     private StyleOptions _styleOptions = new StyleOptions()
@@ -113,4 +110,4 @@
         _circle.Center = _center;
         _ = _circle.UpdateShape();
     }
-    }
+}
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor
@@ -53,7 +53,7 @@ Visible Extent: @_map?.VisibleExtent
     <Features>
         <Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(2604200, 1197650)" Popup></Marker>
          <Marker Type="MarkerType.MarkerFlag" Coordinate="new Coordinate(2624200, 1177650)" Title="Hallo" BackgroundColor="#449933" Popup></Marker>
-         <Line Points="new[] { new Coordinate(1197650, 2604200), new Coordinate(2624200, 1177650) }" BorderColor="cyan"></Line>
+         <Line Points="new[] { new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650) }" BorderColor="cyan"></Line>
      </Features>
  </SwissMap>
 

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor
@@ -1,12 +1,16 @@
 @page "/shapesdemo"
 @rendermode Components.RenderMode.DefaultRenderMode
 @using System.Text.Json
+@using Point = OpenLayers.Blazor.Point
+@using System.Drawing
 
 <div class="card mt-2 mb-2">
     <div class="card-header">
         <h3 class="card-title">ShapesDemo</h3>
     </div>
     <div class="card-body">
+        <button class="btn btn-primary" @onclick="AddShapes">Add some shapes</button>
+        <button class="btn btn-primary" @onclick="RemoveShape">Remove the last</button>
         <p>
             <code>@_featureInfo</code>
         </p>
@@ -34,7 +38,26 @@
 
     private void OnMapClicked(Coordinate coordinate)
     {
-        _map.ShapesList.Add(new Circle(coordinate, 3) { BackgroundColor = "cyan" });
+        _map.ShapesList.Add(new Circle(coordinate, 2000) { BackgroundColor = "#33DD5588", });
     }
 
+    private async Task AddShapes()
+    {
+        var random = new Random((int)DateTime.Now.Ticks);
+        var extent = _map.LayersList[0].Extent;
+        for (var i = 0; i < 50; i++)
+        {
+            _map.ShapesList.Add(
+                new Point(new Coordinate(random.NextDouble() * (extent[2] - extent[0]) + extent[0], random.NextDouble() * (extent[3] - extent[1]) + extent[1]))
+                {
+                    BorderColor = $"#{random.Next(0, 255):x2}{random.Next(0, 255):x2}{random.Next(0, 255):x2}",
+                    BorderSize = 4
+                });
+        }
+    }
+
+    private async Task RemoveShape()
+    {
+        _map.ShapesList.Remove(_map.ShapesList.Last());
+    }
 }
diff --git a/src/OpenLayers.Blazor/Coordinate.cs b/src/OpenLayers.Blazor/Coordinate.cs
@@ -8,8 +8,11 @@ namespace OpenLayers.Blazor.Model;
 using OpenLayers.Blazor.Model;
 */
 
+using System.Text.Json.Serialization;
+
 namespace OpenLayers.Blazor;
 
+[JsonConverter(typeof(CoordinateConverter))]
 public class Coordinate : IEquatable<Coordinate>
 {
     public Coordinate()
@@ -40,6 +43,7 @@ public Coordinate(double[] coordinates)
         Value = coordinates;
     }
 
+    [JsonIgnore]
     public double Latitude => X;
 
     public double Y
@@ -48,6 +52,7 @@ public double Y
         set => Value[1] = value;
     }
 
+    [JsonIgnore]
     public double Longitude => Y;
 
     public double X
@@ -59,9 +64,9 @@ public double X
     /// <summary>
     ///     Coordinate in OpenLayers Style: [Longitude, Latitude]
     /// </summary>
+    [JsonIgnore]
     public double[] Value { get; set; } = new double[2] { 0, 0 };
 
-
     public bool Equals(Coordinate? other)
     {
         if (ReferenceEquals(null, other)) return false;
@@ -86,7 +91,7 @@ public static implicit operator Coordinate(double[] val)
         return new Coordinate(val[0], val[1]);
     }
 
-    private static Coordinate Parse(string val)
+    public static Coordinate Parse(string val)
     {
         val = val.Trim();
         var parts = val.Split(',', '/', ':');
@@ -97,6 +102,20 @@ private static Coordinate Parse(string val)
         return new Coordinate(double.Parse(parts[0]), double.Parse(parts[1]));
     }
 
+    public static bool TryParse(string val, out Coordinate? result)
+    {
+        try
+        {
+            result = Parse(val);
+            return true;
+        }
+        catch
+        {
+            result = null;
+            return false;
+        }
+    }
+
     /// <summary>
     ///     Distance in kilometers
     /// </summary>
@@ -159,6 +178,6 @@ public override bool Equals(object? obj)
 
     public override int GetHashCode()
     {
-        return X.GetHashCode() + Y.GetHashCode();
+        return HashCode.Combine(X, Y);
     }
 }
diff --git a/src/OpenLayers.Blazor/CoordinateConverter.cs b/src/OpenLayers.Blazor/CoordinateConverter.cs
@@ -0,0 +1,24 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace OpenLayers.Blazor;
+
+public class CoordinateConverter : JsonConverter<Coordinate>
+{
+    public override Coordinate? Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        if (reader.TokenType == JsonTokenType.String)
+        {
+            var val = reader.GetString();
+            Coordinate.TryParse(val, out var coordinate);
+            return coordinate;
+        }
+
+        return null;
+    }
+
+    public override void Write(Utf8JsonWriter writer, Coordinate value, JsonSerializerOptions options)
+    {
+        writer.WriteStringValue(value.ToString());
+    }
+}
diff --git a/src/OpenLayers.Blazor/Defaults.cs b/src/OpenLayers.Blazor/Defaults.cs
@@ -19,5 +19,5 @@ public class Defaults
     [JsonConverter(typeof(JsonStringEnumConverter))]
     public ScaleLineUnit ScaleLineUnit { get; set; } = ScaleLineUnit.Metric;
 
-    public int SerializationCoordinatesLimit { get; set; } = 255;
+    public int SerializationCoordinatesLimit { get; set; } = 512;
 }
diff --git a/src/OpenLayers.Blazor/Feature.cs b/src/OpenLayers.Blazor/Feature.cs
@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Components;
+using System.Text.Json;
+using Microsoft.AspNetCore.Components;
 using OpenLayers.Blazor.Internal;
 
 namespace OpenLayers.Blazor;
@@ -14,6 +15,8 @@ public Feature(T value) : base(value)
 
 public class Feature : ComponentBase
 {
+    private Internal.Feature _internalFeature;
+
     public Feature()
     {
         InternalFeature = new Internal.Feature();
@@ -34,7 +37,17 @@ public string Id
         set => InternalFeature.Id = value;
     }
 
-    protected Internal.Feature InternalFeature { get; set; }
+    protected Internal.Feature InternalFeature
+    {
+        get => _internalFeature;
+        set
+        {
+            _internalFeature = value;
+
+            if (_internalFeature.Coordinates is JsonElement e)
+                _internalFeature.Coordinates = CoordinatesHelper.DeserializeCoordinates(e);
+        }
+    }
 
     public GeometryTypes? GeometryType => InternalFeature.GeometryType;
 

diff --git a/src/OpenLayers.Blazor/Internal/CoordinatesHelper.cs b/src/OpenLayers.Blazor/Internal/CoordinatesHelper.cs
@@ -1,4 +1,7 @@
-namespace OpenLayers.Blazor.Internal;
+using System.Reflection.Metadata.Ecma335;
+using System.Text.Json;
+
+namespace OpenLayers.Blazor.Internal;
 
 internal static class CoordinatesHelper
 {
@@ -49,4 +52,25 @@ public static double[][][] SetMultiCoordinates(IEnumerable<IEnumerable<Coordinat
     {
         return coordinates.Select(p => p.Select(p => p.Value).ToArray()).ToArray();
     }
+
+    public static dynamic DeserializeCoordinates(JsonElement element)
+    {
+        try
+        {
+            return element.Deserialize<double[][]>();
+        }
+        catch
+        {
+        }
+
+        try
+        {
+            return element.Deserialize<double[]>();
+        }
+        catch
+        {
+        }
+
+        return null;
+    }
 }
diff --git a/src/OpenLayers.Blazor/Internal/Feature.cs b/src/OpenLayers.Blazor/Internal/Feature.cs
@@ -34,7 +34,6 @@ public double[]? Point
 
     public Dictionary<string, dynamic> Properties { get; set; } = new();
 
-
     public bool Equals(Feature? other)
     {
         if (ReferenceEquals(null, other)) return false;
@@ -56,7 +55,10 @@ public bool Equals(Feature? other)
 
     public override int GetHashCode()
     {
-        return HashCode.Combine(Id, GeometryType, Coordinates, Properties);
+        if (Coordinates is JsonElement || Coordinates != null)
+            return HashCode.Combine(Id, GeometryType ?? GeometryTypes.None, Coordinates, Properties);
+        else
+            return HashCode.Combine(Id, GeometryType ?? GeometryTypes.None, Properties);
     }
 
     public override bool Equals(object? obj)

diff --git a/src/OpenLayers.Blazor/Internal/Source.cs b/src/OpenLayers.Blazor/Internal/Source.cs
@@ -16,7 +16,7 @@ public class Source
     public Dictionary<string, object> Params { get; set; } = new();
     public double Gutter { get; set; } = 0;
     public bool Hidpi { get; set; } = true;
-    public JsonElement? Projection { get; set; }
+    public dynamic? Projection { get; set; }
     public double? ReprojectionErrorThreshold { get; set; }
     public string? ServerType { get; set; }
     public string? Url { get; set; }