From 22edad7ea69232ae7636424c237df4eee7577f54 Mon Sep 17 00:00:00 2001 From: Lam Doan Date: Wed, 29 Apr 2020 15:37:12 -0700 Subject: [PATCH 1/4] Fire onLoad event when a bitmap image is opeed --- vnext/ReactUWP/Views/Image/ReactImage.cpp | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/vnext/ReactUWP/Views/Image/ReactImage.cpp b/vnext/ReactUWP/Views/Image/ReactImage.cpp index 791a3776ecc..bd57d06c110 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.cpp +++ b/vnext/ReactUWP/Views/Image/ReactImage.cpp @@ -274,7 +274,14 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { bitmapImage = winrt::BitmapImage{}; strong_this->m_bitmapImageOpened = bitmapImage.ImageOpened( - winrt::auto_revoke, [imageBrush](const auto &, const auto &) { imageBrush.Opacity(1); }); + winrt::auto_revoke, [imageBrush, weak_this, fireLoadEndEvent](const auto &, const auto &) { + imageBrush.Opacity(1); + + auto strong_this{weak_this.get()}; + if (strong_this && fireLoadEndEvent) { + strong_this->m_onLoadEndEvent(*strong_this, true); + } + }); imageBrush.ImageSource(bitmapImage); } From e80f1c9a03fb48ada10cc73aee7ced12ad370bf2 Mon Sep 17 00:00:00 2001 From: Lam Doan Date: Wed, 29 Apr 2020 15:37:41 -0700 Subject: [PATCH 2/4] Change files --- ...t-native-windows-2020-04-29-15-37-41-imageonload.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 change/react-native-windows-2020-04-29-15-37-41-imageonload.json diff --git a/change/react-native-windows-2020-04-29-15-37-41-imageonload.json b/change/react-native-windows-2020-04-29-15-37-41-imageonload.json new file mode 100644 index 00000000000..714ebefda8d --- /dev/null +++ b/change/react-native-windows-2020-04-29-15-37-41-imageonload.json @@ -0,0 +1,9 @@ +{ + "type": "prerelease", + "comment": "Fire onLoad event when a bitmap image is opeed", + "packageName": "react-native-windows", + "email": "lamdoan@microsoft.com", + "commit": "22edad7ea69232ae7636424c237df4eee7577f54", + "dependentChangeType": "patch", + "date": "2020-04-29T22:37:41.642Z" +} \ No newline at end of file From 1381d3f3aa101bc0c9b7c6ea56027a1b1176defc Mon Sep 17 00:00:00 2001 From: Lam Doan Date: Thu, 30 Apr 2020 17:39:31 -0700 Subject: [PATCH 3/4] add imageFailed --- vnext/ReactUWP/Views/Image/ReactImage.cpp | 10 ++++++++++ vnext/ReactUWP/Views/Image/ReactImage.h | 1 + 2 files changed, 11 insertions(+) diff --git a/vnext/ReactUWP/Views/Image/ReactImage.cpp b/vnext/ReactUWP/Views/Image/ReactImage.cpp index bd57d06c110..9e8703e1c94 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.cpp +++ b/vnext/ReactUWP/Views/Image/ReactImage.cpp @@ -283,6 +283,16 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { } }); + strong_this->m_bitmapImageFailed = bitmapImage.ImageFailed( + winrt::auto_revoke, [imageBrush, weak_this, fireLoadEndEvent](const auto &, const auto &) { + imageBrush.Opacity(1); + + auto strong_this{weak_this.get()}; + if (strong_this && fireLoadEndEvent) { + strong_this->m_onLoadEndEvent(*strong_this, false); + } + }); + imageBrush.ImageSource(bitmapImage); } diff --git a/vnext/ReactUWP/Views/Image/ReactImage.h b/vnext/ReactUWP/Views/Image/ReactImage.h index 4a8ac619460..7c9ffb01aec 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.h +++ b/vnext/ReactUWP/Views/Image/ReactImage.h @@ -67,6 +67,7 @@ struct ReactImage : xaml::Controls::GridT { xaml::FrameworkElement::SizeChanged_revoker m_sizeChangedRevoker; xaml::Media::LoadedImageSurface::LoadCompleted_revoker m_surfaceLoadedRevoker; xaml::Media::Imaging::BitmapImage::ImageOpened_revoker m_bitmapImageOpened; + xaml::Media::Imaging::BitmapImage::ImageFailed_revoker m_bitmapImageFailed; xaml::Media::ImageBrush::ImageOpened_revoker m_imageBrushOpenedRevoker; xaml::Media::ImageBrush::ImageFailed_revoker m_imageBrushFailedRevoker; xaml::Media::Imaging::SvgImageSource::Opened_revoker m_svgImageSourceOpenedRevoker; From 7806201876ef518b74eb5fb09bf62c133a08e5d3 Mon Sep 17 00:00:00 2001 From: Lam Doan Date: Fri, 1 May 2020 15:57:04 -0700 Subject: [PATCH 4/4] remove firing of onload events in the createImageBrush block so that load events don't fire twice. --- vnext/ReactUWP/Views/Image/ReactImage.cpp | 18 ++---------------- vnext/ReactUWP/Views/Image/ReactImage.h | 1 - 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/vnext/ReactUWP/Views/Image/ReactImage.cpp b/vnext/ReactUWP/Views/Image/ReactImage.cpp index 9e8703e1c94..7ec70a89aca 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.cpp +++ b/vnext/ReactUWP/Views/Image/ReactImage.cpp @@ -213,10 +213,8 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { if (createImageBrush) { imageBrush = winrt::ImageBrush{}; - // ImageOpened and ImageFailed are mutually exclusive. One event of the other will - // always fire whenever an ImageBrush has the ImageSource value set or reset. - strong_this->m_imageBrushOpenedRevoker = imageBrush.ImageOpened( - winrt::auto_revoke, [weak_this, imageBrush, fireLoadEndEvent](const auto &, const auto &) { + strong_this->m_imageBrushOpenedRevoker = + imageBrush.ImageOpened(winrt::auto_revoke, [weak_this, imageBrush](const auto &, const auto &) { if (auto strong_this{weak_this.get()}) { if (auto bitmap{imageBrush.ImageSource().try_as()}) { strong_this->m_imageSource.height = bitmap.PixelHeight(); @@ -224,18 +222,6 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { } imageBrush.Stretch(strong_this->ResizeModeToStretch(strong_this->m_resizeMode)); - - if (fireLoadEndEvent) { - strong_this->m_onLoadEndEvent(*strong_this, true); - } - } - }); - - strong_this->m_imageBrushFailedRevoker = - imageBrush.ImageFailed(winrt::auto_revoke, [weak_this, fireLoadEndEvent](const auto &, const auto &) { - const auto strong_this{weak_this.get()}; - if (strong_this && fireLoadEndEvent) { - strong_this->m_onLoadEndEvent(*strong_this, false); } }); } diff --git a/vnext/ReactUWP/Views/Image/ReactImage.h b/vnext/ReactUWP/Views/Image/ReactImage.h index 7c9ffb01aec..e73ca246581 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.h +++ b/vnext/ReactUWP/Views/Image/ReactImage.h @@ -69,7 +69,6 @@ struct ReactImage : xaml::Controls::GridT { xaml::Media::Imaging::BitmapImage::ImageOpened_revoker m_bitmapImageOpened; xaml::Media::Imaging::BitmapImage::ImageFailed_revoker m_bitmapImageFailed; xaml::Media::ImageBrush::ImageOpened_revoker m_imageBrushOpenedRevoker; - xaml::Media::ImageBrush::ImageFailed_revoker m_imageBrushFailedRevoker; xaml::Media::Imaging::SvgImageSource::Opened_revoker m_svgImageSourceOpenedRevoker; xaml::Media::Imaging::SvgImageSource::OpenFailed_revoker m_svgImageSourceOpenFailedRevoker; };