experimental responsiveness

Author: beto-rodriguez

samples/FluidHostPage.cs

@@ -8,17 +8,37 @@ public class FluidHostPage : ContentPage, IFluidHost
     private int _zIndex = 0;
     private View? _currentView;
     private readonly AbsoluteLayout _presenter = [];
+    private static readonly Dictionary<int, int> s_screens = new()
+    {
+        { (int)BreakPoint.sm, 640 },
+        { (int)BreakPoint.md, 768 },
+        { (int)BreakPoint.lg, 1024 },
+        { (int)BreakPoint.xl, 1280 },
+        { (int)BreakPoint.xxl, 1536 }
+    };
 
     public FluidHostPage()
     {
         Content = _presenter = [];
         Loaded += (_, _) => FlowNavigation.Current.Initialize(this);
-        SizeChanged += (_, _) => _currentView?.Size(Width, Height);
+        SizeChanged += (_, _) =>
+        {
+            _ = (_currentView?.Size(Width, Height));
+
+            var bp = GetBreakpoint();
+            if (bp == ActiveBreakpoint) return;
+
+            ActiveBreakpoint = bp;
+            BreakpointChanged?.Invoke(ActiveBreakpoint);
+        };
 
         Presenter = _presenter;
     }
 
     public View Presenter { get; }
+    public BreakPoint ActiveBreakpoint { get; private set; } = BreakPoint.sm;
+
+    public event Action<BreakPoint>? BreakpointChanged;
 
     public void ShowView(View view)
     {
@@ -29,4 +49,19 @@ public void ShowView(View view)
         if (!_presenter.Children.Contains(view))
             _presenter.Children.Add(view);
     }
+
+    private BreakPoint GetBreakpoint()
+    {
+        var screenWidth = Width;
+
+        // sm is the default breakpoint
+        var breakPoint = BreakPoint.sm;
+
+        if (screenWidth >= s_screens[1]) breakPoint = BreakPoint.md;
+        if (screenWidth >= s_screens[2]) breakPoint = BreakPoint.lg;
+        if (screenWidth >= s_screens[3]) breakPoint = BreakPoint.xl;
+        if (screenWidth >= s_screens[4]) breakPoint = BreakPoint.xxl;
+
+        return breakPoint;
+    }
 }

src/FluidView.cs

@@ -1,6 +1,6 @@
 namespace FluidNav;
 
-public abstract class FluidView : ContentView
+public abstract class FluidView : ResponsiveView
 {
     public FluidView()
     {

src/IFluidHost.cs

@@ -20,6 +20,16 @@ public interface IFluidHost
     /// </summary>
     View Presenter { get; }
 
+    /// <summary>
+    /// Gets the active breakpoint.
+    /// </summary>
+    BreakPoint ActiveBreakpoint { get; }
+
+    /// <summary>
+    /// Called when the breakpoint changes.
+    /// </summary>
+    event Action<BreakPoint> BreakpointChanged;
+
     /// <summary>
     /// Shows the specified view.
     /// </summary>

src/ResponsiveView.cs

@@ -0,0 +1,33 @@
+namespace FluidNav;
+
+public abstract class ResponsiveView : ContentView
+{
+    public ResponsiveView()
+    {
+        var view = FlowNavigation.Current.View ?? throw new Exception("Host view not found");
+        view.BreakpointChanged += OnBreakpointChanged;
+    }
+
+    public BreakPoint ActiveBreakpoint => FlowNavigation.Current.View.ActiveBreakpoint;
+
+    protected virtual void OnBreakpointChanged(BreakPoint breakPoint)
+    {
+        var bp = (int)breakPoint;
+
+        OnSm();
+        if (bp >= 1) OnMd();
+        if (bp >= 2) OnLg();
+        if (bp >= 3) OnXl();
+        if (bp >= 4) OnXxl();
+    }
+
+    protected virtual void OnSm() { }
+
+    protected virtual void OnMd() { }
+
+    protected virtual void OnLg() { }
+
+    protected virtual void OnXl() { }
+
+    protected virtual void OnXxl() { }
+}

src/TransitionView.cs

@@ -2,31 +2,10 @@
 
 namespace FluidNav;
 
-public abstract class TransitionView : ContentView
+public abstract class TransitionView : ResponsiveView
 {
-    private BreakPoint _activeBreakpoint = BreakPoint.sm;
     private Type _activeType = typeof(object);
     private readonly Dictionary<Type, IEnumerable<Flow>[]> _flows = [];
-    private static readonly Dictionary<int, int> s_screens = new()
-    {
-        { (int)BreakPoint.sm, 640 },
-        { (int)BreakPoint.md, 768 },
-        { (int)BreakPoint.lg, 1024 },
-        { (int)BreakPoint.xl, 1280 },
-        { (int)BreakPoint.xxl, 1536 }
-    };
-
-    public TransitionView()
-    {
-        SizeChanged += (s, e) =>
-        {
-            var flow = GetBreakpointFlow(_activeType, out var breakPoint);
-            if (breakPoint == _activeBreakpoint) return;
-
-            _activeBreakpoint = breakPoint;
-            _ = Complete(_activeType);
-        };
-    }
 
     public Rect TransitionBounds { get; set; }
 
@@ -48,13 +27,13 @@ public bool RemoveState<TView>()
     public TransitionView Complete(Type type, IEnumerable<Flow>? flow = null)
     {
         _activeType = type;
-        return FluidAnimationsExtensions.Complete(this, flow ?? GetBreakpointFlow(type, out _activeBreakpoint));
+        return FluidAnimationsExtensions.Complete(this, flow ?? GetBreakpointFlow(type, ActiveBreakpoint));
     }
 
     public Task<bool> Animate(Type type, IEnumerable<Flow>? flow = null)
     {
         _activeType = type;
-        return FluidAnimationsExtensions.Animate(this, flow ?? GetBreakpointFlow(type, out _activeBreakpoint));
+        return FluidAnimationsExtensions.Animate(this, flow ?? GetBreakpointFlow(type, ActiveBreakpoint));
     }
 
     /// <summary>
@@ -96,6 +75,13 @@ public static DataTemplate Build<TFromView, TToView, TTransitionView>(
         });
     }
 
+    protected override void OnBreakpointChanged(BreakPoint breakPoint)
+    {
+        base.OnBreakpointChanged(breakPoint);
+
+        _ = Complete(_activeType);
+    }
+
     private void SetBreakpointFlow(Type type, BreakPoint breakpoint, IEnumerable<Flow> flow)
     {
         if (!_flows.TryGetValue(type, out var typeFlows))
@@ -107,33 +93,15 @@ private void SetBreakpointFlow(Type type, BreakPoint breakpoint, IEnumerable<Flo
         typeFlows[(int)breakpoint] = flow;
     }
 
-    private IEnumerable<Flow> GetBreakpointFlow(Type type, out BreakPoint breakPoint)
+    private IEnumerable<Flow> GetBreakpointFlow(Type type, BreakPoint breakpoint)
     {
-        var view = FlowNavigation.Current.View ?? throw new Exception("Host view not found");
-
-        var screenWidth = view.Width;
-        var ft = _flows[type];
-
-        var flows = ft[(int)BreakPoint.sm];
-        breakPoint = BreakPoint.sm;
-
-        bool evaluateBreakpoint(BreakPoint bp)
-        {
-            if (screenWidth >= s_screens[(int)bp])
-            {
-                var f = ft![(int)bp];
-                flows = f ?? flows;
-                return f is not null;
-            }
-
-            return false;
-        }
+        var flowsOnType = _flows[type];
+        var i = (int)breakpoint;
+        var flow = flowsOnType[i];
 
-        if (evaluateBreakpoint(BreakPoint.md)) breakPoint = BreakPoint.md;
-        if (evaluateBreakpoint(BreakPoint.lg)) breakPoint = BreakPoint.lg;
-        if (evaluateBreakpoint(BreakPoint.xl)) breakPoint = BreakPoint.xl;
-        if (evaluateBreakpoint(BreakPoint.xxl)) breakPoint = BreakPoint.xxl;
+        while (flow is null && i > 0)
+            flow = flowsOnType[--i];
 
-        return flows;
+        return flow ?? throw new Exception($"No flow found for {type.Name} at breakpoint {breakpoint}");
     }
 }