Using our map controls in Reactor

[Morten Nielsen (dotMorten)]

Here's a little video of wrapping our map control in Reactor:

ReactorMap.1.mp4

Here's what I wrote so far. (disclaimer it's raw prototype code thrown together, but gives you an idea):

using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.UI;
using Esri.ArcGISRuntime.UI.Controls;
using Microsoft.UI.Reactor.Core;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;

namespace Esri.ArcGISRuntime.Reactor
{
    public static class Factories
    {
        public static void Register(Reconciler reconciler)
        {
            Action<GeoViewElement, GeoViewElement, GeoView> geoViewUpdate = static (oldElement, newElement, geoView) =>
                {
                    if (oldElement.GraphicsOverlays != newElement.GraphicsOverlays)
                        geoView.GraphicsOverlays = newElement.GraphicsOverlays;
                };
            ReactorApp.RegisterControlAssembly(new Esri_ArcGISRuntime_WinUI_XamlTypeInfo.XamlMetaDataProvider());
            reconciler.RegisterType<MapViewElement, MapView>(
                mount: (_, element, _) => CreateMapView(element),
                update: (r, oldElement, newElement, mapView, a) =>
                {
                    if (oldElement.map != newElement.map)
                        mapView.Map = newElement.map;
                    geoViewUpdate(oldElement, newElement, mapView);
                    ApplySetters(newElement.Setters, mapView);
                    return null;
                },
                unmount: static (r, mapView) => mapView.Map = null
                );
            reconciler.RegisterType<SceneViewElement, SceneView>(
                mount: (_, element, _) => CreateSceneView(element),
                update: (_, oldElement, newElement, sceneView, _) =>
                {
                    if (oldElement.scene != newElement.scene)
                        sceneView.Scene = newElement.scene;
                    geoViewUpdate(oldElement, newElement, sceneView);

                    ApplySetters(newElement.Setters, sceneView);
                    return null;
                },
                unmount: static (r, sceneView) => sceneView.Scene = null
                );
            reconciler.RegisterType<LocalSceneViewElement, LocalSceneView>(
                mount: (_, element, _) => CreateLocalSceneView(element),
                update: (_, oldElement, newElement, sceneView, _) =>
                {
                    if (oldElement.scene != newElement.scene)
                        sceneView.Scene = newElement.scene;
                    geoViewUpdate(oldElement, newElement, sceneView);

                    ApplySetters(newElement.Setters, sceneView);
                    return null;
                },
                unmount: static (r, sceneView) => sceneView.Scene = null
                );
        }

        public record GeoViewElement() : Element
        {
            internal Action<GeoView>[] Setters { get; init; } = [];
            public GraphicsOverlayCollection? GraphicsOverlays { get; init; }
        }
        public record MapViewElement(Map? map) : GeoViewElement() {
            public Map? Map { get; init; }
        }
        public record SceneViewElement(Scene? scene) : GeoViewElement() { }
        public record LocalSceneViewElement(Scene? scene) : GeoViewElement() { }

        public static MapViewElement MapView(Map? map = null) => new(map);
        public static SceneViewElement SceneView(Scene? scene = null) => new(scene);
        public static LocalSceneViewElement LocalSceneView(Scene? scene = null) => new(scene);

        public static GeoViewElement GraphicsOverlays(this GeoViewElement el, GraphicsOverlayCollection collection)
        {
            return el with
            {
                GraphicsOverlays = collection
            };
        }


        public static T Set<T>(this T element, Action<GeoView> configure) where T: GeoViewElement =>
            element with { Setters = [.. element.Setters, configure] };

        public static T Basemap<T>(this T element, Basemap basemap) where T: GeoViewElement =>
            element.Set((gv) =>
            {
                if (gv is MapView mv)
                {
                    if (mv.Map is not null)
                        mv.Map.Basemap = basemap;
                    else
                        mv.Map = new Map(basemap);
                }
                else if (gv is SceneView sv)
                {
                    if (sv.Scene is not null)
                        sv.Scene.Basemap = basemap;
                    else
                        sv.Scene = new Scene(basemap);
                }
                else if (gv is LocalSceneView lsv)
                {
                    if (lsv.Scene is not null)
                        lsv.Scene.Basemap = basemap;
                    else
                        lsv.Scene = new Scene(SceneViewingMode.Local, basemap);
                }
            });

        public static T Basemap<T>(this T element, BasemapStyle basemap) where T:GeoViewElement => element.Basemap(new Basemap(basemap));

        private static MapView CreateMapView(MapViewElement element)
        {
            var mapView = new MapView { Map = element.map };
            ApplySetters(element.Setters, geoView: mapView);
            return mapView;
        }

        private static SceneView CreateSceneView(SceneViewElement element)
        {
            var sceneView = new SceneView { Scene = element.scene };
            ApplySetters(element.Setters, geoView: sceneView);
            return sceneView;
        }

        private static LocalSceneView CreateLocalSceneView(LocalSceneViewElement element)
        {
            var sceneView = new LocalSceneView { Scene = element.scene };
            ApplySetters(element.Setters, geoView: sceneView);
            return sceneView;
        }

        private static void ApplySetters(Action<GeoView>[] setters, GeoView geoView)
        {
            foreach (var setter in setters)
                setter(geoView);
        }
    }
}

[Chris Anderson (codemonkeychris)]

I think this points out a current gap in how to bring controls into the full reconciler model. I had previously been focused on "fully Reactor" and "interop with XAML", but hadn't yet tackled a "Reactor syntax fully supported for XAML control"...

this is A LOT of boilerplate code that we should simplify.

Do you think we should try code gen? reflection? thoughts?

[Morten Nielsen (dotMorten)]

I definitely think there's work that can be done to simplify this. I only mapped a very small amount of properties, methods and events. Doing it all will be some significant amount of work, so any tooling to help with it would be great, to help quickly adopt the controls in the 3rdparty ecosystem. The community toolkit alone would be a huge undertaking, but while the community toolkit team will likely handle that, there are going to be any number of controls out there users want to use, where a binding hasn't been made, and they will have to write that themselves.

[Chris Anderson (codemonkeychris)]

maybe we embrace a pattern like typescript with "d.ts" files?

[Morten Nielsen (dotMorten)]

You mean handwriting a file that defines the mappings and a tool then generates from that? If so, I'm not sure how much is saved if I still have to write that. Perhaps a lot of it can be done just by reflection, and there can be an extra file to specify overrides/ignores/adjustments to the auto-generated bits, so in most cases "it just works" with no work needed, other than opting in the type for generation.