Merge pull request #447 from almightyju/master

Improve support for Features and data.setStyle(func) support

Author: valentasm1

Demos/Demo.Ui.Shared/Pages/MapDataPage.razor

@@ -2,6 +2,10 @@
 @using GoogleMapsComponents
 @using GoogleMapsComponents.Maps
 @using GoogleMapsComponents.Maps.Data
+@using System.Runtime.InteropServices
+
+@implements IAsyncDisposable
+
 @*
     The code for this sample was taken from below on 09/02/2020:
     https://developers.google.com/maps/documentation/javascript/earthquakes#maps_earthquake_circles-typescript
@@ -13,6 +17,8 @@
 <button @onclick="@GetMapDataFeature">Get MapData (Feature)</button>
 <button @onclick="@GetMapDataGeoJsonLine">Get MapData (GeoJson Line)</button>
 <button @onclick="@GetMapDataGeoJsonPolygon">Get MapData (GeoJson Polygon)</button>
+<button @onclick="@UseSetStyleInJs">Set Global Style in JS function</button>
+<button @onclick="@UseSetStyleInWASM">Set Global Style in Blazor (WASM)</button>
 <button @onclick="@RemoveFeatures">Remove All Features</button>
 
 <div>
@@ -34,9 +40,55 @@
             };
     }
 
-    private Task OnAfterMapInit()
+    private async Task OnAfterMapInit()
+    {
+        await _map1.InteropObject.Data.AddListener<GoogleMapsComponents.Maps.Data.MouseEvent>("click", async e => OnClick(e));
+        await _map1.InteropObject.Data.AddListener<GoogleMapsComponents.Maps.Data.MouseEvent>("mouseover", async e => OnMouseOver(e));
+        await _map1.InteropObject.Data.AddListener<GoogleMapsComponents.Maps.Data.MouseEvent>("mouseout", async e => OnMouseOut(e));
+    }
+
+    private async Task UseSetStyleInJs()
+    {
+        await _map1.InteropObject.Data.SetStyle("window.mapDataPage.getFeatureStyle");
+    }
+
+    private async Task UseSetStyleInWASM()
+    {
+        if (RuntimeInformation.ProcessArchitecture == Architecture.Wasm)
+            await _map1.InteropObject.Data.SetStyle(GetStyle);
+    }
+
+    StyleOptions GetStyle(Feature feature)
+    {
+        return new StyleOptions
+        {
+            FillColor = "orange",
+            StrokeColor = "purple",
+            StrokeWeight = 2,
+            StrokeOpacity = 1,
+            FillOpacity = 0.5f
+        };
+    }
+
+    private async Task OnClick(GoogleMapsComponents.Maps.Data.MouseEvent e)
+    {
+        if (e.Feature == null)
+            return;
+        string fill = await e.Feature.GetProperty<string>("fillColor");
+        await e.Feature.SetProperty("fillColor", fill == "orange" ? "green" : "orange");
+    }
+
+    private async Task OnMouseOver(GoogleMapsComponents.Maps.Data.MouseEvent e)
+    {
+        await _map1.InteropObject.Data.RevertStyle();
+        await _map1.InteropObject.Data.OverrideStyle(e.Feature, new StyleOptions() {
+            StrokeWeight = 8f
+        });
+    }
+
+    private async Task OnMouseOut(GoogleMapsComponents.Maps.Data.MouseEvent e)
     {
-        return Task.CompletedTask;
+        await _map1.InteropObject.Data.RevertStyle();
     }
 
     private async Task GetMapDataFeature()
@@ -122,16 +174,23 @@
                        "  \"features\": [" +
                        "{ \"type\": \"Feature\"," +
                        " \"id\": 3," +
-                       " \"properties\": { \"stroke\": \"#555555\", \"stroke-width\": 2, \"stroke-opacity\": 1 }, " +
                        " \"geometry\": {\"type\": \"Polygon\",  \"coordinates\": [ [ [ 151.219, -33.888], [151.23, -33.888], [151.23, -33.869], [ 151.219, -33.869], [ 151.219, -33.888]]]}}]}";
 
-        await _map1.InteropObject.Data.AddGeoJson(jsonData);
-        await _map1.InteropObject.Data.SetStyle(new StyleOptions { StrokeColor = "magenta", StrokeWeight = 2, FillColor = "magenta", FillOpacity = 0.3f });
+        var features = await _map1.InteropObject.Data.AddGeoJson(jsonData);
+        foreach(Feature feature in features) {
+            await feature.SetProperty("fillColor", "red");
+            await feature.SetProperty("strokeColor", "cyan");
+        }
     }
 
     private async Task RemoveFeatures()
     {
         await _map1.InteropObject.Data.RemoveAll();
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await _map1.DisposeAsync();
+    }
 }
 

Demos/ServerSideDemo/Pages/_Host.cshtml

@@ -19,6 +19,7 @@
 
     <script src="_framework/blazor.server.js"></script>
     <script src="https://unpkg.com/@@googlemaps/markerclusterer/dist/index.min.js"></script>
+    <script src="js/clientSideFunctions.js"></script>
     <script src="_content/BlazorGoogleMaps/js/objectManager.js?v=1"></script>
 </body>
 </html>

Demos/ServerSideDemo/wwwroot/js/clientSideFunctions.js

@@ -0,0 +1,13 @@
+window.mapDataPage = {
+    getFeatureStyle: function (mapData, feature) {
+        let fillColour = feature.getProperty('fillColor');
+        let strokeColour = feature.getProperty('strokeColor');
+        return {
+            fillColor: fillColour,
+            fillOpacity: 0.3,
+            strokeColor: strokeColour,
+            strokeWeight: 2,
+            strokeOpacity: 1
+        };
+    }
+}

GoogleMapsComponents/Helper.cs

@@ -132,19 +132,28 @@ private static IEnumerable<object> MakeArgJsFriendly(IJSRuntime jsRuntime, IEnum
                         return DotNetObjectReference.Create(new JsCallableAction(jsRuntime, action));
                     default:
                         {
-                            if (argType.IsGenericType
-                                && (argType.GetGenericTypeDefinition() == typeof(Action<>)))
+                            if(argType.IsGenericType)
                             {
-                                var genericArguments = argType.GetGenericArguments();
-
-                                //Debug.WriteLine($"Generic args : {genericArguments.Count()}");
-
-                                return DotNetObjectReference.Create(new JsCallableAction(jsRuntime, (Delegate)arg, genericArguments));
+                                var typeDefinition = argType.GetGenericTypeDefinition();
+                                if (typeDefinition == typeof(Action<>))
+                                {
+                                    var genericArguments = argType.GetGenericArguments();
+
+                                    //Debug.WriteLine($"Generic args : {genericArguments.Count()}");
+
+                                    return DotNetObjectReference.Create(new JsCallableAction(jsRuntime, (Delegate)arg, genericArguments));
+                                }
+                                if(typeDefinition == typeof(Func<,>))
+                                {
+                                    var genericArguments = argType.GetGenericArguments();
+                                    return DotNetObjectReference.Create(new JsCallableFunc((Delegate)arg, genericArguments));
+                                }
                             }
 
                             switch (arg)
                             {
                                 case JsCallableAction _:
+                                case JsCallableFunc _:
                                     return DotNetObjectReference.Create(arg);
                                 case IJsObjectRef jsObjectRef:
                                     {

GoogleMapsComponents/JsCallableAction.cs

@@ -27,9 +27,9 @@ public void Invoke(string args, string guid)
             return;
         }
 
-        var jArray = JsonDocument.Parse(args)
-            .RootElement
-            .EnumerateArray();
+        var rootElement = JsonDocument.Parse(args).RootElement;
+        JsonElement.ArrayEnumerator jArray = rootElement.ValueKind == JsonValueKind.Array
+            ? rootElement.EnumerateArray() : [];
 
         var arguments = _argumentTypes.Zip(jArray, (type, jToken) => new { jToken, type })
             .Select(x =>
@@ -39,6 +39,18 @@ public void Invoke(string args, string guid)
                 {
                     actionArg.JsObjectRef = new JsObjectRef(_jsRuntime, new Guid(guid));
                 }
+                if (obj is Maps.Data.MouseEvent featureEvent)
+                {
+                    //null any reference that might have come from the json since it won't be usable
+                    featureEvent.Feature = null;
+
+                    if(x.jToken.TryGetProperty("featureUUID", out var featureUuidProp)
+				      && Guid.TryParse(featureUuidProp.GetString(), out Guid featureUuid))
+                    {
+					    var featureObjectRef = new JsObjectRef(_jsRuntime, featureUuid);
+                        featureEvent.Feature = new Maps.Data.Feature(featureObjectRef);
+                    }
+                }
 
                 return obj;
             })

GoogleMapsComponents/JsCallableFunc.cs

@@ -0,0 +1,44 @@
+using Microsoft.JSInterop;
+using System;
+using System.Linq;
+using System.Text.Json;
+
+namespace GoogleMapsComponents;
+
+public class JsCallableFunc
+{
+    private readonly Delegate _delegate;
+    private readonly Type[] _argumentTypes;
+
+    public JsCallableFunc(Delegate @delegate, params Type[] argumentTypes)
+    {
+        _delegate = @delegate;
+        _argumentTypes = argumentTypes;
+        if (argumentTypes.Length == 0)
+            throw new ArgumentException("Must have at least 1 argument type, which would be the return type of the delegate", nameof(argumentTypes));
+    }
+
+    [JSInvokable]
+    public object? Invoke(string args, string guid)
+    {
+        if (string.IsNullOrWhiteSpace(args) || !_argumentTypes.Any())
+        {
+            object?[]? nullArgs = _argumentTypes.SkipLast(1).Select(x => (object?)null).ToArray();
+            return _delegate.DynamicInvoke(nullArgs);
+        }
+
+        var rootElement = JsonDocument.Parse(args).RootElement;
+        JsonElement.ArrayEnumerator jArray = rootElement.ValueKind == JsonValueKind.Array
+            ? rootElement.EnumerateArray() : [];
+
+        var arguments = _argumentTypes.SkipLast(1).Zip(jArray, (type, jToken) => new { jToken, type })
+            .Select(x =>
+            {
+                var obj = Helper.DeSerializeObject(x.jToken, x.type);
+                return obj;
+            })
+            .ToArray();
+
+        return _delegate.DynamicInvoke(arguments);
+    }
+}

GoogleMapsComponents/Maps/Data.cs

@@ -6,6 +6,7 @@
 using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
+using System.Runtime.InteropServices;
 using System.Threading.Tasks;
 
 namespace GoogleMapsComponents.Maps;
@@ -151,11 +152,17 @@ public Task<string> GetDrawingMode()
     /// </summary>
     /// <param name="id"></param>
     /// <returns></returns>
-    public Task<Feature> GetFeatureById(OneOf<int, string> id)
+    public async Task<Feature?> GetFeatureById(OneOf<int, string> id)
     {
-        return _jsObjectRef.InvokeAsync<Feature>(
+        string featureUuid = await _jsObjectRef.InvokeAsync<string>(
             "getFeatureById",
             id.Value);
+
+        if (string.IsNullOrEmpty(featureUuid) || !Guid.TryParse(featureUuid, out Guid featureGuid))
+            return null;
+
+        var featureRef = new JsObjectRef(_jsObjectRef.JSRuntime, featureGuid);
+        return new Feature(featureRef);
     }
 
     /// <summary>
@@ -299,18 +306,65 @@ public Task SetMap(Map map)
     /// <summary>
     /// Sets the style for all features in the collection.
     /// Styles specified on a per-feature basis via overrideStyle() continue to apply.
-    /// Pass either an object with the desired style options, or a function that computes the style for each feature.
-    /// The function will be called every time a feature's properties are updated.
     /// </summary>
     /// <param name="style"></param>
     /// <returns></returns>
-    public Task SetStyle(OneOf<Func<Feature, StyleOptions>, StyleOptions> style)
+    public Task SetStyle(StyleOptions style)
     {
         return _jsObjectRef.InvokeAsync(
             "setStyle",
             style);
     }
 
+    /// <summary>
+    /// Sets the style for all features in the collection.
+    /// Styles specified on a per-feature basis via overrideStyle() continue to apply.
+    /// The function will be called every time a feature's properties are updated.
+    /// WASM Only!
+    /// </summary>
+    /// <param name="styleFunc"></param>
+    /// <returns></returns>
+    /// <exception cref="PlatformNotSupportedException">
+    /// Thrown if not running in WebAssembly as Google API expects the style function to be
+    /// synchronous and that's only possible in WebAssembly. Instead use <seealso cref="SetStyle(string)"/> 
+    /// for client side usage
+    /// </exception>
+    public Task SetStyle(Func<Feature, StyleOptions> styleFunc)
+    {
+        if (RuntimeInformation.ProcessArchitecture != Architecture.Wasm)
+            throw new PlatformNotSupportedException("Cannot be used outside of WebAssembly. Instead use SetStyle(jsFunctionName)");
+        return _jsObjectRef.InvokeAsync(
+            "setStyle",
+            (Delegate)callback);
+
+        StyleOptions callback(string featureId)
+        {
+            Guid featureGuid = Guid.Parse(featureId);
+            var feature = new Feature(new JsObjectRef(_jsObjectRef.JSRuntime, featureGuid));
+            return styleFunc(feature);
+        }
+    }
+
+    /// <summary>
+    /// Sets the style for all features by calling a javascript function
+    /// </summary>
+    /// <param name="jsFunctionName">The name of the function to call to get the style</param>
+    /// <returns></returns>
+    /// <remarks>
+    /// Example function:
+    /// window.getFeatureStyle = function (mapData, feature) {
+    ///     let fillColour = feature.getProperty('fillColor');
+    ///     return {
+    ///         fillColor: fillColour,
+    ///         fillOpacity: 0.3
+    ///     };
+    /// }
+    /// </remarks>
+    public Task SetStyle(string jsFunctionName)
+    {
+        return _jsObjectRef.InvokeAsync("setStyleCallback", jsFunctionName);
+    }
+
     /// <summary>
     /// Exports the features in the collection to a GeoJSON object.
     /// </summary>

GoogleMapsComponents/Maps/Data/Feature.cs

@@ -63,18 +63,18 @@ public async Task<int> GetId()
     /// </summary>
     /// <param name="name"></param>
     /// <returns></returns>
-    public object GetProperty(string name)
+    public Task<T> GetProperty<T>(string name)
     {
-        throw new NotImplementedException();
-    }
+        return _jsObjectRef.InvokeAsync<T>("getProperty", name);
+        }
 
     /// <summary>
     /// Removes the property with the given name.
     /// </summary>
     /// <param name="name"></param>
-    public void RemoveProperty(string name)
+    public Task RemoveProperty(string name)
     {
-        throw new NotImplementedException();
+        return _jsObjectRef.InvokeAsync("removeProperty", name);
     }
 
     /// <summary>
@@ -92,9 +92,9 @@ public void SetGeometry(OneOf<Geometry, LatLngLiteral> newGeometry)
     /// </summary>
     /// <param name="name"></param>
     /// <param name="newValue"></param>
-    public void SetProperty(string name, object newValue)
+    public Task SetProperty(string name, object newValue)
     {
-        throw new NotImplementedException();
+        return _jsObjectRef.InvokeAsync("setProperty", name, newValue);
     }
 
     /// <summary>

GoogleMapsComponents/Maps/Data/MouseEvent.cs

@@ -7,5 +7,5 @@
 /// </summary>
 public class MouseEvent : Maps.MouseEvent
 {
-    public Feature Feature { get; set; }
+    public Feature? Feature { get; set; }
 }