Merge pull request #209 from zumero/image-scaling

Image Display fixes for Ooui.Forms

Ooui.Forms/Renderers/ImageRenderer.cs

@@ -9,6 +9,8 @@ namespace Ooui.Forms.Renderers
     public class ImageRenderer : ViewRenderer<Xamarin.Forms.Image, Ooui.Image>
     {
         bool _isDisposed;
+        double ClientHeight = -1;
+        double ClientWidth = -1;
 
         protected override void Dispose (bool disposing)
         {
@@ -29,6 +31,8 @@ namespace Ooui.Forms.Renderers
                 var imageView = new Ooui.Image ();
                 SetNativeControl (imageView);
                 this.Style.Overflow = "hidden";
+
+                Control.Loaded += OnLoad;
             }
 
             if (e.NewElement != null) {
@@ -49,6 +53,43 @@ namespace Ooui.Forms.Renderers
                 SetOpacity ();
             else if (e.PropertyName == Xamarin.Forms.Image.AspectProperty.PropertyName)
                 SetAspect();
+            else if (e.PropertyName == VisualElement.WidthProperty.PropertyName)
+                SetDimensions ();
+        }
+
+        void OnLoad(object sender, EventArgs eventArgs)
+        {
+            var args = (TargetEventArgs)eventArgs;
+            ClientHeight = args.ClientHeight;
+            ClientWidth = args.ClientWidth;
+
+            SetDimensions();
+        }
+
+        void SetDimensions()
+        {
+            var b = Element.Bounds;
+            double scale = 1;
+
+            if (ClientWidth < 0 || ClientHeight < 0)
+                return;
+
+            if (Math.Abs(b.Width) > 0)
+            {
+                scale = b.Width / ClientWidth;
+                Element.WidthRequest = b.Width;
+                Element.HeightRequest = scale * ClientHeight;
+            }
+            else if (Math.Abs(b.Height) > 0)
+            {
+                scale = b.Height / ClientHeight;
+                Element.WidthRequest = scale * ClientWidth;
+                Element.HeightRequest = b.Height;
+            }
+            else
+            {
+                // We can't really know what to do in this case
+            }
         }
 
         void SetAspect ()
@@ -112,7 +153,7 @@ namespace Ooui.Forms.Renderers
                     return;
 
                 var imageView = Control;
-                if (imageView != null)
+                if (imageView != null && uiimage != null)
                     imageView.Source = uiimage;
 
                 ((IVisualElementController)Element).NativeSizeChanged ();

Ooui/Client.js

@@ -37,6 +37,10 @@ const inputEvents = {
     keyup: true,
 };
 
+const elementEvents = {
+    load: true
+}
+
 function getSize () {
     return {
         height: window.innerHeight,
@@ -304,6 +308,12 @@ function msgListen (m) {
                 offsetY: e.offsetY,
             };
         }
+        else if (elementEvents[m.k]) {
+            em.v = {
+                clientHeight: node.clientHeight,
+                clientWidth: node.clientWidth
+            }
+        }
         const ems = JSON.stringify (em);
         send (ems);
         if (debug) console.log ("Event", em);

Ooui/Element.cs

@@ -53,6 +53,11 @@ namespace Ooui
             remove => RemoveEventListener ("keyup", value);
         }
         
+        public event TargetEventHandler Loaded {
+            add => AddEventListener ("load", value);
+            remove => RemoveEventListener ("load", value);
+        }
+        
         public event TargetEventHandler MouseDown {
             add => AddEventListener ("mousedown", value);
             remove => RemoveEventListener ("mousedown", value);

Ooui/EventTarget.cs

@@ -220,9 +220,17 @@ namespace Ooui
             if (handlers != null) {
                 var args = new TargetEventArgs ();
                 if (message.Value is Newtonsoft.Json.Linq.JObject o) {
+                    if (o["offsetX"] != null)
+                    {
                         args.OffsetX = (double)o["offsetX"];
                         args.OffsetY = (double)o["offsetY"];
                     }
+                    if (o["clientHeight"] != null)
+                    {
+                        args.ClientHeight = (double)o.GetValue("clientHeight");
+                        args.ClientWidth = (double)o.GetValue("clientWidth");
+                    }
+                }
                 foreach (var h in handlers) {
                     h.Invoke (this, args);
                 }
@@ -257,5 +265,7 @@ namespace Ooui
     {
         public double OffsetX { get; set; }
         public double OffsetY { get; set; }
+        public double ClientHeight { get; set; }
+        public double ClientWidth { get; set; }
     }
 }