From 12c532fd3d622ca646c69a87343e7154788ec44d Mon Sep 17 00:00:00 2001 From: Troy Stanger Date: Wed, 14 Nov 2018 09:18:22 -0600 Subject: [PATCH 1/3] Image elements without dimensions defined in Xamarin forms will now have their dimensions defined by attempting to scale it to the bounding box. --- Ooui.Forms/Renderers/ImageRenderer.cs | 26 ++++++++++++++++++++++++++ Ooui/Client.js | 10 ++++++++++ Ooui/Element.cs | 7 ++++++- Ooui/EventTarget.cs | 14 ++++++++++++-- 4 files changed, 54 insertions(+), 3 deletions(-) diff --git a/Ooui.Forms/Renderers/ImageRenderer.cs b/Ooui.Forms/Renderers/ImageRenderer.cs index 30e6458..54edf64 100644 --- a/Ooui.Forms/Renderers/ImageRenderer.cs +++ b/Ooui.Forms/Renderers/ImageRenderer.cs @@ -29,6 +29,8 @@ namespace Ooui.Forms.Renderers var imageView = new Ooui.Image (); SetNativeControl (imageView); this.Style.Overflow = "hidden"; + + Control.Loaded += OnLoad; } if (e.NewElement != null) { @@ -51,6 +53,30 @@ namespace Ooui.Forms.Renderers SetAspect (); } + void OnLoad(object sender, EventArgs eventArgs) + { + var args = (TargetEventArgs)eventArgs; + var b = Element.Bounds; + double scale = 1; + + if (Math.Abs(b.Width) > 0) + { + scale = b.Width / args.ClientWidth; + Element.WidthRequest = b.Width; + Element.HeightRequest = scale * args.ClientHeight; + } + else if (Math.Abs(b.Height) > 0) + { + scale = b.Height / args.ClientHeight; + Element.WidthRequest = scale * args.ClientWidth; + Element.HeightRequest = b.Height; + } + else + { + // We can't really know what to do in this case + } + } + void SetAspect () { if (_isDisposed || Element == null || Control == null) { diff --git a/Ooui/Client.js b/Ooui/Client.js index 8ee333c..ae5c9aa 100644 --- a/Ooui/Client.js +++ b/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); diff --git a/Ooui/Element.cs b/Ooui/Element.cs index 494b1e2..4c4d615 100644 --- a/Ooui/Element.cs +++ b/Ooui/Element.cs @@ -52,7 +52,12 @@ namespace Ooui add => AddEventListener ("keyup", value); 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); diff --git a/Ooui/EventTarget.cs b/Ooui/EventTarget.cs index c2bee13..71bf794 100644 --- a/Ooui/EventTarget.cs +++ b/Ooui/EventTarget.cs @@ -220,8 +220,16 @@ namespace Ooui if (handlers != null) { var args = new TargetEventArgs (); if (message.Value is Newtonsoft.Json.Linq.JObject o) { - args.OffsetX = (double)o["offsetX"]; - args.OffsetY = (double)o["offsetY"]; + 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; } } } From 915f96fd29f029a18907156ec3f0ad6d2f65d254 Mon Sep 17 00:00:00 2001 From: Troy Stanger Date: Wed, 14 Nov 2018 09:35:20 -0600 Subject: [PATCH 2/3] Prevent the "broken image" icon from being displayed when an Image does not have an image source. --- Ooui.Forms/Renderers/ImageRenderer.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Ooui.Forms/Renderers/ImageRenderer.cs b/Ooui.Forms/Renderers/ImageRenderer.cs index 54edf64..7bb8b1a 100644 --- a/Ooui.Forms/Renderers/ImageRenderer.cs +++ b/Ooui.Forms/Renderers/ImageRenderer.cs @@ -138,7 +138,7 @@ namespace Ooui.Forms.Renderers return; var imageView = Control; - if (imageView != null) + if (imageView != null && uiimage != null) imageView.Source = uiimage; ((IVisualElementController)Element).NativeSizeChanged (); From 5d8d1f4be1bf6badd32aec70c39e4502bbe2856d Mon Sep 17 00:00:00 2001 From: Troy Stanger Date: Wed, 14 Nov 2018 12:41:34 -0600 Subject: [PATCH 3/3] Properly resize images when the window size changes --- Ooui.Forms/Renderers/ImageRenderer.cs | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/Ooui.Forms/Renderers/ImageRenderer.cs b/Ooui.Forms/Renderers/ImageRenderer.cs index 7bb8b1a..591dea7 100644 --- a/Ooui.Forms/Renderers/ImageRenderer.cs +++ b/Ooui.Forms/Renderers/ImageRenderer.cs @@ -9,6 +9,8 @@ namespace Ooui.Forms.Renderers public class ImageRenderer : ViewRenderer { bool _isDisposed; + double ClientHeight = -1; + double ClientWidth = -1; protected override void Dispose (bool disposing) { @@ -50,25 +52,38 @@ namespace Ooui.Forms.Renderers else if (e.PropertyName == Xamarin.Forms.Image.IsOpaqueProperty.PropertyName) SetOpacity (); else if (e.PropertyName == Xamarin.Forms.Image.AspectProperty.PropertyName) - SetAspect (); + 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 / args.ClientWidth; + scale = b.Width / ClientWidth; Element.WidthRequest = b.Width; - Element.HeightRequest = scale * args.ClientHeight; + Element.HeightRequest = scale * ClientHeight; } else if (Math.Abs(b.Height) > 0) { - scale = b.Height / args.ClientHeight; - Element.WidthRequest = scale * args.ClientWidth; + scale = b.Height / ClientHeight; + Element.WidthRequest = scale * ClientWidth; Element.HeightRequest = b.Height; } else