Merge pull request #156 from DJMJP/master

InvokeAsync for Polyline&Polygon
rungwiroon · Oct 11, 2021 · 4052183 · 4052183
2 parents 09c2fc8 + 58058c8
commit 4052183
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 2 deletions.
diff --git a/GoogleMapsComponents/Maps/ListableEntityBase.cs b/GoogleMapsComponents/Maps/ListableEntityBase.cs
@@ -3,6 +3,7 @@
 using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
+using OneOf;
 
 namespace GoogleMapsComponents.Maps
 {
@@ -14,7 +15,7 @@ public class ListableEntityBase<TEntityOptions> : IDisposable, IJsObjectRef
         public readonly Dictionary<string, List<MapEventListener>> EventListeners;
 
         public Guid Guid => _jsObjectRef.Guid;
-
+        
         internal ListableEntityBase(JsObjectRef jsObjectRef)
         {
             _jsObjectRef = jsObjectRef;
@@ -98,5 +99,25 @@ public virtual async Task ClearListeners(string eventName)
                 EventListeners[eventName].Clear();
             }
         }
+
+        public Task InvokeAsync(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync(functionName, args);
+        }
+
+        public Task<T> InvokeAsync<T>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T>(functionName, args);
+        }
+
+        public Task<OneOf<T, U>> InvokeAsync<T, U>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T, U>(functionName, args);
+        }
+
+        public Task<OneOf<T, U, V>> InvokeAsync<T, U, V>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T, U, V>(functionName, args);
+        }
     }
 }
diff --git a/GoogleMapsComponents/Maps/Polygon.cs b/GoogleMapsComponents/Maps/Polygon.cs
@@ -1,4 +1,5 @@
 using Microsoft.JSInterop;
+using OneOf;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -10,6 +11,8 @@ public class Polygon : IDisposable
     {
         protected readonly JsObjectRef _jsObjectRef;
         private Map _map;
+
+        public Guid Guid => _jsObjectRef.Guid;
 
         /// <summary>
         /// Create a polygon using the passed PolygonOptions, which specify the polygon's path, the stroke style for the polygon's edges, and the fill style for the polygon's interior regions. 
@@ -180,6 +183,26 @@ public Task SetVisible(bool visible)
                 visible);
         }
 
+        public Task InvokeAsync(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync(functionName, args);
+        }
+
+        public Task<T> InvokeAsync<T>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T>(functionName, args);
+        }
+
+        public Task<OneOf<T, U>> InvokeAsync<T, U>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T, U>(functionName, args);
+        }
+
+        public Task<OneOf<T, U, V>> InvokeAsync<T, U, V>(string functionName, params object[] args)
+        {
+            return _jsObjectRef.InvokeAsync<T, U, V>(functionName, args);
+        }
+
         public async Task<MapEventListener> AddListener(string eventName, Action handler)
         {
             var listenerRef = await _jsObjectRef.InvokeWithReturnedObjectRefAsync(

diff --git a/ServerSideDemo/Pages/MapPolyline.razor b/ServerSideDemo/Pages/MapPolyline.razor
@@ -1,7 +1,6 @@
 @page "/mapPolyline"
 @using GoogleMapsComponents
 @using GoogleMapsComponents.Maps
-@using System.Diagnostics
 
 <h1>Polylines</h1>
 
@@ -72,6 +71,22 @@
 
         path.Clear();
 
+        // Add Listener to Paths from Polyline
+        await polyline.InvokeAsync("AddListeners").ConfigureAwait(true);
+
+        await polyline.AddListener("insert_at", async () =>
+        {
+            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();
+        });
+
         await polyline.AddListener("click", () =>
         {
             _events.Insert(0, "click polyline");
@@ -125,6 +140,22 @@
             Map = map1.InteropObject
         });
 
+        // Add Listener to Paths from Polyline
+        await polygon.InvokeAsync("AddListeners").ConfigureAwait(true);
+
+        await polygon.AddListener("insert_at", async () =>
+        {
+            path = (await polygon.GetPath().ConfigureAwait(true)).ToList();
+        });
+        await polygon.AddListener("set_at", async () =>
+        {
+            path = (await polygon.GetPath().ConfigureAwait(true)).ToList();
+        });
+        await polygon.AddListener("remove_at", async () =>
+        {
+            path = (await polygon.GetPath().ConfigureAwait(true)).ToList();
+        });
+
         path.Clear();
     }
 
@@ -172,6 +203,9 @@
             //Debug.WriteLine($"Path length : {path.Count()}");
 
             await polyline.SetPath(path);
+
+            // Add Listener to Paths from Polyline
+            await polyline.InvokeAsync("AddListeners").ConfigureAwait(true);
         }
         else if (polygon != null)
         {

diff --git a/ServerSideDemo/wwwroot/js/serverSideScripts.js b/ServerSideDemo/wwwroot/js/serverSideScripts.js
@@ -24,4 +24,67 @@
         div.innerHTML = '<img src="' + icon + '"> ' + name;
         legend.appendChild(div);
     }
+}
+
+google.maps.Polyline.prototype.AddListeners = function()
+{
+    // getpath
+    console.log('Add Listeners Called.');
+    var poly = this;
+    var path = this.getPath();
+
+    // addlistener insert_at
+    event.initEvent('insert_at', true, true);
+    google.maps.event.addListener(path, 'insert_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' inserted to path.');
+        google.maps.event.trigger(poly, 'insert_at', vertex);
+    });
+
+    // addlistener set_at
+    event.initEvent('set_at', true, true);
+    google.maps.event.addListener(path, 'set_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' set on path.');
+        google.maps.event.trigger(poly, 'set_at', vertex);
+    });
+
+    // addlistener remove_at
+    event.initEvent('remove_at', true, true);
+    google.maps.event.addListener(path, 'remove_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' removed from path.');
+        google.maps.event.trigger(poly, 'remove_at', vertex);
+    });
+}
+google.maps.Polygon.prototype.AddListeners = function()
+{
+    // getpath
+    console.log('Add Listeners Called.');
+    var poly = this;
+    var path = this.getPath();
+
+    // addlistener insert_at
+    event.initEvent('insert_at', true, true);
+    google.maps.event.addListener(path, 'insert_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' inserted to path.');
+        google.maps.event.trigger(poly, 'insert_at', vertex);
+    });
+
+    // addlistener set_at
+    event.initEvent('set_at', true, true);
+    google.maps.event.addListener(path, 'set_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' set on path.');
+        google.maps.event.trigger(poly, 'set_at', vertex);
+    });
+
+    // addlistener remove_at
+    event.initEvent('remove_at', true, true);
+    google.maps.event.addListener(path, 'remove_at', function(vertex) {
+        // event auf polyline auslösen
+        console.log('Vertex ' + vertex + ' removed from path.');
+        google.maps.event.trigger(poly, 'remove_at', vertex);
+    });
 }