Add support for MVCArray for polyline #169

rungwiroon · Feb 7, 2022 · af96b58 · af96b58
1 parent 10b865a
commit af96b58
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 54 deletions.
diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj
@@ -18,7 +18,7 @@
     <RazorLangVersion>3.0</RazorLangVersion>
     <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
     <PackageId>BlazorGoogleMaps</PackageId>
-    <Version>1.4.2</Version>
+    <Version>1.5.1</Version>
     <Authors>Rungwiroon</Authors>
     <Company>QueueStack Solution</Company>
     <Product>BlazorGoogleMaps</Product>

diff --git a/GoogleMapsComponents/Maps/Polyline.cs b/GoogleMapsComponents/Maps/Polyline.cs
@@ -28,15 +28,15 @@ public async static Task<Polyline> CreateAsync(IJSRuntime jsRuntime, PolylineOpt
         /// Constructor for use in ListableEntityListBase. Must be the first constructor!
         /// </summary>
         internal Polyline(JsObjectRef jsObjectRef)
-            :base(jsObjectRef)
+            : base(jsObjectRef)
         {
         }
 
         /// <summary>
         /// Create a polyline using the passed PolylineOptions, which specify both the path of the polyline and the stroke style to use when drawing the polyline.
         /// </summary>
         private Polyline(JsObjectRef jsObjectRef, PolylineOptions opts)
-            :this(jsObjectRef)
+            : this(jsObjectRef)
         {
         }
 
@@ -69,6 +69,19 @@ public Task<IEnumerable<LatLngLiteral>> GetPath()
             return _jsObjectRef.InvokeAsync<IEnumerable<LatLngLiteral>>("getPath");
         }
 
+        /// <summary>
+        /// Creates paths lime MVCArray where elements could be appended
+        /// </summary>
+        /// <returns></returns>
+        public async Task<PolylinePath> CreatePath()
+        {
+            var id = Guid.NewGuid();
+            await _jsObjectRef.InvokeAsync("createPath", id.ToString());
+            var path = new PolylinePath(new JsObjectRef(_jsObjectRef.JSRuntime, id));
+
+            return path;
+        }
+
         /// <summary>
         /// Returns whether this poly is visible on the map.
         /// </summary>

diff --git a/GoogleMapsComponents/Maps/PolylinePath.cs b/GoogleMapsComponents/Maps/PolylinePath.cs
@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+
+namespace GoogleMapsComponents.Maps
+{
+    public class PolylinePath
+    {
+        private readonly JsObjectRef _jsObjectRef;
+
+        public PolylinePath(JsObjectRef jsObjectRef)
+        {
+            _jsObjectRef = jsObjectRef;
+        }
+
+        public Task Push(LatLngLiteral coordinate)
+        {
+            return _jsObjectRef.InvokeAsync("push", coordinate);
+        }
+
+        public Task Clear()
+        {
+            return _jsObjectRef.InvokeAsync("clear");
+        }
+    }
+}
diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js
@@ -409,6 +409,21 @@ window.googleMapsObjectManager = {
         let obj = window._blazorGoogleMapsObjects[args[0]];
         let functionToInvoke = args[1];
 
+        //We make check if element is LatLng and cast it.
+        //It could be bug here.
+        if (Array.isArray(args2) && args2.length > 0) {
+            var cloneArgs = args2;
+            args2 = new Array();
+            for (let i = 0, len = cloneArgs.length; i < len; i++) {
+                var element = cloneArgs[i];
+                if (element.hasOwnProperty("lat") && element.hasOwnProperty("lng")) {
+                    args2.push(new google.maps.LatLng(element.lat, element.lng));
+                } else {
+                    args2.push(element);
+                }
+            }
+        }
+
         //If function is route, then handle callback in promise.
         if (functionToInvoke == "googleMapDirectionServiceFunctions.route") {
             let dirRequest = args2[0];
@@ -484,6 +499,15 @@ window.googleMapsObjectManager = {
                 console.log(e);
             }
         }
+        else if (functionToInvoke == "createPath") {
+
+            try {
+                var projection = _blazorGoogleMapsObjects[args[0]].getPath();
+                _blazorGoogleMapsObjects[args[2]] = projection;
+            } catch (e) {
+                console.log(e);
+            }
+        }
         else if (functionToInvoke == "fromLatLngToPoint") {
 
             try {

diff --git a/ServerSideDemo/Pages/MapPolyline.razor b/ServerSideDemo/Pages/MapPolyline.razor
@@ -7,6 +7,9 @@
 <GoogleMap @ref="@map1" Id="map1" Options="@mapOptions" OnAfterInit="async () => await OnAfterMapInit()"></GoogleMap>
 <button @onclick="StartDrawingPolyline">Start drawing polyline</button>
 <button @onclick="EndDrawingPolyline">End drawing polyline</button>
+<button @onclick="AppendToPolylinePath">Append to last polyline path</button>
+<button @onclick="ClearPolylinePath">Clear last polyline path</button>
+<br />
 <button @onclick="AddArrowsToPolyline">Add arrow symbols to polyline</button>
 <button @onclick="RemoveArrowsFromPolyline">Remove arrow symbols from polyline</button>
 <br />
@@ -44,15 +47,15 @@
     protected override void OnInitialized()
     {
         mapOptions = new MapOptions()
-        {
-            Zoom = 13,
-            Center = new LatLngLiteral()
             {
-                Lat = 13.505892,
-                Lng = 100.8162
-            },
-            MapTypeId = MapTypeId.Roadmap
-        };
+                Zoom = 13,
+                Center = new LatLngLiteral()
+                {
+                    Lat = 13.505892,
+                    Lng = 100.8162
+                },
+                MapTypeId = MapTypeId.Roadmap
+            };
     }
 
     private async Task OnAfterMapInit()
@@ -63,11 +66,11 @@
     private async Task StartDrawingPolyline()
     {
         polyline = await Polyline.CreateAsync(map1.JsRuntime, new PolylineOptions()
-        {
-            Draggable = true,
-            Editable = true,
-            Map = map1.InteropObject
-        });
+            {
+                Draggable = true,
+                Editable = true,
+                Map = map1.InteropObject
+            });
 
         path.Clear();
 
@@ -76,15 +79,22 @@
 
         await polyline.AddListener("insert_at", async () =>
         {
-            path = (await polyline.GetPath().ConfigureAwait(true)).ToList();
+            if (polyline != null)
+            {
+                path = (await polyline.GetPath().ConfigureAwait(true)).ToList();
+            }
         });
         await polyline.AddListener("set_at", async () =>
         {
             path = (await polyline.GetPath().ConfigureAwait(true)).ToList();
         });
         await polyline.AddListener("remove_at", async () =>
         {
-            path = (await polyline.GetPath().ConfigureAwait(true)).ToList();
+            if (polyline != null)
+            {
+                path = (await polyline.GetPath().ConfigureAwait(true)).ToList();
+            }
+
         });
 
         await polyline.AddListener("click", () =>
@@ -94,6 +104,22 @@
         });
     }
 
+    private async Task ClearPolylinePath()
+    {
+        var line = polylines.FirstOrDefault();
+        if (line == null) return;
+
+        var polylinePath = await line.CreatePath();
+        await polylinePath.Clear();
+    }
+    private async Task AppendToPolylinePath()
+    {
+        var line = polylines.FirstOrDefault();
+        if (line == null) return;
+
+        var polylinePath = await line.CreatePath();
+        await polylinePath.Push(new LatLngLiteral(98.3256193, 7.8881847));
+    }
     private async Task EndDrawingPolyline()
     {
         polylines.Add(polyline);
@@ -107,15 +133,15 @@
         foreach (var polyline in polylines)
         {
             polyline.SetOptions(new PolylineOptions
-            {
-                Icons = new IconSequence[] {
+                {
+                    Icons = new IconSequence[] {
                     new IconSequence { Icon=new Symbol { Path=SymbolPath.FORWARD_CLOSED_ARROW }, Offset="100%" },
                     new IconSequence { Icon=new Symbol { Path=SymbolPath.FORWARD_OPEN_ARROW }, Offset="80%" },
                     new IconSequence { Icon=new Symbol { Path=SymbolPath.FORWARD_OPEN_ARROW }, Offset="60%" },
                     new IconSequence { Icon=new Symbol { Path=SymbolPath.FORWARD_OPEN_ARROW }, Offset="40%" },
                     new IconSequence { Icon=new Symbol { Path=SymbolPath.FORWARD_OPEN_ARROW }, Offset="20%" },
                 }
-            });
+                });
         }
     }
 
@@ -124,21 +150,21 @@
         foreach (var polyline in polylines)
         {
             polyline.SetOptions(new PolylineOptions
-            {
-                Icons = new IconSequence[] {
+                {
+                    Icons = new IconSequence[] {
                 }
-            });
+                });
         }
     }
 
     private async Task StartDrawingPolygon()
     {
         polygon = await Polygon.CreateAsync(map1.JsRuntime, new PolygonOptions()
-        {
-            Draggable = false,
-            Editable = true,
-            Map = map1.InteropObject
-        });
+            {
+                Draggable = false,
+                Editable = true,
+                Map = map1.InteropObject
+            });
 
         // Add Listener to Paths from Polyline
         await polygon.InvokeAsync("AddListeners").ConfigureAwait(true);
@@ -170,24 +196,24 @@
     private async Task DrawingRectangle()
     {
         rectangle = await Rectangle.CreateAsync(map1.JsRuntime, new RectangleOptions()
-        {
-            Draggable = true,
-            Editable = true,
-            Map = map1.InteropObject
-        });
+            {
+                Draggable = true,
+                Editable = true,
+                Map = map1.InteropObject
+            });
 
         path.Clear();
     }
 
     private async Task DrawingCircle()
     {
         circle = await Circle.CreateAsync(map1.JsRuntime, new CircleOptions()
-        {
-            Draggable = true,
-            Editable = true,
-            Map = map1.InteropObject,
-            Radius = 1000
-        });
+            {
+                Draggable = true,
+                Editable = true,
+                Map = map1.InteropObject,
+                Radius = 1000
+            });
 
         path.Clear();
     }
@@ -219,12 +245,12 @@
             }
 
             var bounds = new LatLngBoundsLiteral()
-            {
-                East = path[1].Lng,
-                North = path[0].Lat,
-                South = path[1].Lat,
-                West = path[0].Lng
-            };
+                {
+                    East = path[1].Lng,
+                    North = path[0].Lat,
+                    South = path[1].Lat,
+                    West = path[0].Lng
+                };
 
             await rectangle.SetBounds(bounds);
 
@@ -242,13 +268,13 @@
     {
 
         var polygonForPath = await Polygon.CreateAsync(map1.JsRuntime, new PolygonOptions()
-        {
-            Draggable = true,
-            Editable = false,
-            Map = map1.InteropObject,
-            FillColor = "red",
-            ZIndex = 999
-        });
+            {
+                Draggable = true,
+                Editable = false,
+                Map = map1.InteropObject,
+                FillColor = "red",
+                ZIndex = 999
+            });
 
         var path = new List<LatLngLiteral>()
 {

diff --git a/ServerSideDemo/ServerSideDemo.csproj b/ServerSideDemo/ServerSideDemo.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <TargetFramework>net6.0</TargetFramework>
   </PropertyGroup>
 
   <ItemGroup>