Fixed possible wrong image layout on iOS

webfx-project · Nov 2, 2023 · cf54b5e · cf54b5e
1 parent 38e75b3
commit cf54b5e
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/...t/src/main/java/dev/webfx/kit/mapper/peers/javafxgraphics/gwt/html/HtmlImageViewPeer.java b/...t/src/main/java/dev/webfx/kit/mapper/peers/javafxgraphics/gwt/html/HtmlImageViewPeer.java
@@ -32,21 +32,21 @@ public final class HtmlImageViewPeer
 
     private final static GraphicsContext BACKGROUND_LOADING_CONTEXT = new Canvas().getGraphicsContext2D();
 
-    //private Double loadedWidth, loadedHeight;
+    private boolean loaded;
 
     public HtmlImageViewPeer() {
         this((NB) new ImageViewPeerBase(), HtmlUtil.createImageElement());
     }
 
     public HtmlImageViewPeer(NB base, HTMLElement element) {
         super(base, element);
-        HTMLElement container = HtmlUtil.createElement("fx-image");
+        HTMLElement container = HtmlUtil.createElement("fx-imageview");
         HtmlUtil.setChild(container, element);
         setContainer(container);
         makeContainerInvisible();
         HTMLImageElement imageElement = (HTMLImageElement) getElement();
         imageElement.onload = evt -> {
-            onLoad();
+            onLoaded();
             return null;
         };
     }
@@ -56,6 +56,10 @@ public HtmlImageViewPeer(NB base, HTMLElement element) {
     @Override
     public void setSizeChangedCallback(Runnable sizeChangedCallback) {
         this.sizeChangedCallback = sizeChangedCallback;
+        // Sometimes the image is loaded before the callback is set, and the ImageView hasn't yet been informed of the
+        // image size change, causing a wrong image layout (this was mainly observed on iOS)
+        if (loaded && sizeChangedCallback != null) // If this happens,
+            sizeChangedCallback.run(); // we call the callback a posteriori to fix the layout issue
     }
 
     @Override
@@ -65,7 +69,7 @@ public void updateImage(Image image) {
         //loadedWidth = loadedHeight = null;
         String imageUrl = image == null ? null : image.getUrl();
         if (tryInlineSvg(imageUrl))
-            onLoad();
+            onLoaded();
         else {
             setElementAttribute("src", imageUrl);
             // Temporary filling alt with imageUrl to avoid downgrade in Lighthouse TODO: map this to accessible text
@@ -86,7 +90,7 @@ public void updateImage(Image image) {
         }
     }
 
-    private void onLoad() {
+    private void onLoaded() {
         N node = getNode();
         Image image = node.getImage();
         if (image != null) {
@@ -97,12 +101,13 @@ private void onLoad() {
         }
         if (sizeChangedCallback != null)
             sizeChangedCallback.run();
+        loaded = true;
     }
 
     public static void onHTMLImageLoaded(HTMLImageElement imageElement, Image image) {
-        double requestedWidth = image.getRequestedWidth();
-        image.setWidth(requestedWidth  > 0 ? requestedWidth  : (double) imageElement.naturalWidth);
+        double requestedWidth  = image.getRequestedWidth();
         double requestedHeight = image.getRequestedHeight();
+        image.setWidth(requestedWidth   > 0 ? requestedWidth  : (double) imageElement.naturalWidth);
         image.setHeight(requestedHeight > 0 ? requestedHeight : (double) imageElement.naturalHeight);
         image.setProgress(1);
     }