@nativescript-community/ui-image 4.3.14 → 4.3.16

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.3.16](https://github.com/nativescript-community/ui-image/compare/v4.3.15...v4.3.16) (2023-09-29)
+
+### Bug Fixes
+
+* **android:** fix for image disappearing on fragment/ativity transitions. See https://github.com/facebook/fresco/issues/1446 ([b36d001](https://github.com/nativescript-community/ui-image/commit/b36d0012af443fadcdb969e901f7f0e69f4e0c80))
+
+## [4.3.15](https://github.com/nativescript-community/ui-image/compare/v4.3.14...v4.3.15) (2023-09-28)
+
+### Bug Fixes
+
+* **android:** most stretch values are now working correctly with imageRotation ([323d42e](https://github.com/nativescript-community/ui-image/commit/323d42edc85e57145cb4e7e6158b72e256437d0d))
+
 ## [4.3.14](https://github.com/nativescript-community/ui-image/compare/v4.3.13...v4.3.14) (2023-09-27)
 
 **Note:** Version bump only for package @nativescript-community/ui-image

package/index-common.js

@@ -103,7 +103,7 @@ export const progressBarColorProperty = new Property({ name: 'progressBarColor',
 export const roundAsCircleProperty = new Property({ name: 'roundAsCircle', valueConverter: booleanConverter, affectsLayout: isAndroid });
 export const blurRadiusProperty = new Property({ name: 'blurRadius', valueConverter: (v) => parseFloat(v) });
 export const blurDownSamplingProperty = new Property({ name: 'blurDownSampling', valueConverter: (v) => parseFloat(v) });
-export const imageRotationProperty = new Property({ name: 'imageRotation', valueConverter: (v) => parseFloat(v) });
+export const imageRotationProperty = new Property({ name: 'imageRotation', valueConverter: (v) => parseFloat(v), defaultValue: 0 });
 export const autoPlayAnimationsProperty = new Property({ name: 'autoPlayAnimations', valueConverter: booleanConverter });
 export const tapToRetryEnabledProperty = new Property({ name: 'tapToRetryEnabled', valueConverter: booleanConverter });
 export const aspectRatioProperty = new Property({ name: 'aspectRatio', affectsLayout: true, valueConverter: (v) => parseFloat(v) });

package/index.android.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
 export * from './index-common';
 import { Application, Background, Color, ImageAsset, ImageSource, Trace, Utils, backgroundInternalProperty, knownFolders, path } from '@nativescript/core';
 import { isString } from '@nativescript/core/utils/types';
@@ -384,36 +384,36 @@ export class Img extends ImageBase {
     [_j = roundTopLeftRadiusProperty.setNative]() {
         this.updateHierarchy();
     }
-    [imageRotationProperty.setNative](value) {
+    [_k = imageRotationProperty.setNative](value) {
         const scaleType = this.nativeImageViewProtected.getHierarchy().getActualImageScaleType();
         scaleType['setImageRotation']?.(value);
         this.nativeImageViewProtected.invalidate();
     }
-    [_k = roundTopRightRadiusProperty.setNative]() {
+    [_l = roundTopRightRadiusProperty.setNative]() {
         this.updateHierarchy();
     }
-    [_l = roundBottomLeftRadiusProperty.setNative]() {
+    [_m = roundBottomLeftRadiusProperty.setNative]() {
         this.updateHierarchy();
     }
-    [_m = roundBottomRightRadiusProperty.setNative]() {
+    [_o = roundBottomRightRadiusProperty.setNative]() {
         this.updateHierarchy();
     }
-    [_o = tintColorProperty.setNative](value) {
+    [_p = tintColorProperty.setNative](value) {
         this.updateHierarchy();
     }
-    [_p = blurRadiusProperty.setNative]() {
+    [_q = blurRadiusProperty.setNative]() {
         this.initImage();
     }
-    [_q = srcProperty.setNative]() {
+    [_r = srcProperty.setNative]() {
         this.initImage();
     }
-    [_r = lowerResSrcProperty.setNative]() {
+    [_s = lowerResSrcProperty.setNative]() {
         this.initImage();
     }
-    [_s = blurDownSamplingProperty.setNative]() {
+    [_t = blurDownSamplingProperty.setNative]() {
         this.initImage();
     }
-    [_t = aspectRatioProperty.setNative]() {
+    [_u = aspectRatioProperty.setNative]() {
         this.initImage();
     }
     [backgroundInternalProperty.setNative](value) {
@@ -669,6 +669,9 @@ export class Img extends ImageBase {
                 builder.setCornersRadii(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
             }
             this.nativeImageViewProtected.setHierarchy(builder.build());
+            if (!this._needRequestImage) {
+                this.nativeImageViewProtected.setController(this.nativeImageViewProtected.getController());
+            }
         }
     }
     getDrawable(path) {
@@ -773,7 +776,7 @@ __decorate([
     needUpdateHierarchy
 ], Img.prototype, _o, null);
 __decorate([
-    needRequestImage
+    needUpdateHierarchy
 ], Img.prototype, _p, null);
 __decorate([
     needRequestImage
@@ -787,6 +790,9 @@ __decorate([
 __decorate([
     needRequestImage
 ], Img.prototype, _t, null);
+__decorate([
+    needRequestImage
+], Img.prototype, _u, null);
 class GenericDraweeHierarchyBuilder {
     constructor() {
         const res = Utils.ad.getApplicationContext().getResources();
@@ -823,12 +829,12 @@ class GenericDraweeHierarchyBuilder {
         }
         return this;
     }
-    setActualImageScaleType(scaleType, imageRotation) {
+    setActualImageScaleType(scaleType, imageRotation = 0) {
         if (!this.nativeBuilder) {
             return this;
         }
         const nativeScaleType = getScaleType(scaleType);
-        if (nativeScaleType['setImageRotation']) {
+        if (imageRotation !== 0 && nativeScaleType['setImageRotation']) {
             nativeScaleType['setImageRotation'](imageRotation);
         }
         this.nativeBuilder.setActualImageScaleType(nativeScaleType);

package/index.d.ts

@@ -198,6 +198,12 @@ export class Img extends View {
      * IOS: if you want to show animated images you need to set this to true
      */
     animatedImageView: boolean;
+
+    loadMode: 'sync' | 'async';
+    alwaysFade: boolean;
+    noCache: boolean;
+    tintColor: Color;
+    imageRotation: number;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-image",
-    "version": "4.3.14",
+    "version": "4.3.16",
     "description": "Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.",
     "main": "./index",
     "sideEffects": false,
@@ -44,5 +44,5 @@
     },
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
-    "gitHead": "cc57cff80b69dd3bcce84f27ee5e66c46b858874"
+    "gitHead": "7d5be4ee8fb3fcef33da045af7151873cd084b4b"
 }

package/platforms/android/java/com/nativescript/image/DraweeView.java

@@ -39,12 +39,24 @@ public class DraweeView extends SimpleDraweeView {
     public boolean isUsingOutlineProvider = false;
     private static Paint clipPaint;
 
+    private boolean mLegacyVisibilityHandlingEnabled = false;
+
+    private static boolean sGlobalLegacyVisibilityHandlingEnabled = true;
+
+    public static void setGlobalLegacyVisibilityHandlingEnabled(
+        boolean legacyVisibilityHandlingEnabled) {
+        sGlobalLegacyVisibilityHandlingEnabled = legacyVisibilityHandlingEnabled;
+    }
+
     public DraweeView(Context context, GenericDraweeHierarchy hierarchy) {
         super(context);
     }
 
     public DraweeView(Context context) {
         super(context);
+        // In Android N and above, visibility handling for Drawables has been changed, which breaks
+        // activity transitions with DraweeViews.
+        mLegacyVisibilityHandlingEnabled = sGlobalLegacyVisibilityHandlingEnabled  && context.getApplicationInfo().targetSdkVersion >= 24; //Build.VERSION_CODES.N
     }
 
     public DraweeView(Context context, AttributeSet attrs) {
@@ -55,6 +67,61 @@ public class DraweeView extends SimpleDraweeView {
         super(context, attrs, defStyle);
     }
 
+    @Override
+    protected void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        maybeOverrideVisibilityHandling();
+        onAttach();
+    }
+
+    @Override
+    protected void onDetachedFromWindow() {
+        super.onDetachedFromWindow();
+        maybeOverrideVisibilityHandling();
+        onDetach();
+    }
+
+    @Override
+    public void onStartTemporaryDetach() {
+        super.onStartTemporaryDetach();
+        maybeOverrideVisibilityHandling();
+        onDetach();
+    }
+
+    @Override
+    public void onFinishTemporaryDetach() {
+        super.onFinishTemporaryDetach();
+        maybeOverrideVisibilityHandling();
+        onAttach();
+    }
+
+    @Override
+    protected void onVisibilityChanged(
+        View changedView,
+        int visibility) {
+        super.onVisibilityChanged(changedView, visibility);
+        maybeOverrideVisibilityHandling();
+    }
+
+    @Override
+    public void onVisibilityAggregated (boolean isVisible) {
+        super.onVisibilityAggregated(isVisible);
+        maybeOverrideVisibilityHandling();
+    }
+
+    private void maybeOverrideVisibilityHandling() {
+        if (mLegacyVisibilityHandlingEnabled)  {
+            Drawable drawable = getDrawable();
+            if (drawable != null) {
+                drawable.setVisible(getVisibility() == VISIBLE, false);
+            }
+        }
+    }
+
+    public void setLegacyVisibilityHandlingEnabled(boolean legacyVisibilityHandlingEnabled) {
+        mLegacyVisibilityHandlingEnabled = legacyVisibilityHandlingEnabled;
+    }
+
 	// private final Rect outlineRect = new RectF();
     public void updateOutlineProvider() {
         Drawable drawable = getBackground();

package/platforms/android/java/com/nativescript/image/ScalingUtils.java

@@ -136,33 +136,33 @@ public class ScalingUtils {
     }
     @Override
     public Matrix getTransform(
-        Matrix outTransform,
-        Rect parentRect,
-        int childWidth,
-        int childHeight,
-        float focusX,
-        float focusY) {
-        float sX = (float) parentRect.width() / (float) childWidth;
-        float sY = (float) parentRect.height() / (float) childHeight;
-        float rotationDelta = (90 - (_imageRotation % 180))/90.0f;
-        if (rotationDelta != 1) {
-            float destSX = (float) parentRect.width() / (float) childHeight;
-            float destSY = (float) parentRect.height() / (float) childWidth;
-          if (rotationDelta < 0) {
-            sX = destSX + rotationDelta * (destSX - sX);
-            sY = destSY + rotationDelta * (destSY - sY);
-          } else {
-            sX = sX + (1 - rotationDelta) * (destSX - sX);
-            sY = sY + (1 - rotationDelta) * (destSY - sY);
-          }
-            
-        }
-        getTransformImpl(outTransform, parentRect, childWidth, childHeight, focusX, focusY, sX, sY);
-        if (_imageMatrix != null) {
-            outTransform.preConcat(_imageMatrix);
-        } else if (_imageRotation != 0) {
-            outTransform.preRotate(_imageRotation, childWidth / 2.0f, childHeight / 2.0f);
+      Matrix outTransform,
+      Rect parentRect,
+      int childWidth,
+      int childHeight,
+      float focusX,
+      float focusY) {
+      float sX = (float) parentRect.width() / (float) childWidth;
+      float sY = (float) parentRect.height() / (float) childHeight;
+      float rotationDelta = (90 - (_imageRotation % 180))/90.0f;
+      if (rotationDelta != 1) {
+          float destSX = (float) parentRect.width() / (float) childHeight;
+          float destSY = (float) parentRect.height() / (float) childWidth;
+        if (rotationDelta < 0) {
+          sX = destSX + rotationDelta * (destSX - sX);
+          sY = destSY + rotationDelta * (destSY - sY);
+        } else {
+          sX = sX + (1 - rotationDelta) * (destSX - sX);
+          sY = sY + (1 - rotationDelta) * (destSY - sY);
         }
+          
+      }
+      getTransformImpl(outTransform, parentRect, childWidth, childHeight, focusX, focusY, sX, sY, rotationDelta);
+      if (_imageMatrix != null) {
+          outTransform.preConcat(_imageMatrix);
+      } else if (_imageRotation != 0) {
+          outTransform.preRotate(_imageRotation, childWidth / 2.0f, childHeight / 2.0f);
+      }
       
       return outTransform;
     }
@@ -175,7 +175,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY);
+        float scaleY, 
+        float rotationDelta);
   }
 
   public static class ScaleTypeFitXY extends AbstractScaleType {
@@ -191,10 +192,14 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
-      float dx = parentRect.left;
-      float dy = parentRect.top;
+        float scaleY, 
+        float rotationDelta) {
+      float deltaX = ((rotationDelta != 1) ? (childWidth - childHeight) * scaleX/ 2.0f : 0.0f);
+      float deltaY = ((rotationDelta != 1) ? (childWidth - childHeight) * scaleY/ 2.0f : 0.0f);
+      float dx = parentRect.left - deltaX;
+      float dy = parentRect.top + deltaY;
       outTransform.setScale(scaleX, scaleY);
+      
       outTransform.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
     }
 
@@ -217,10 +222,13 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale = Math.min(scaleX, scaleY);
-      float dx = parentRect.left;
-      float dy = parentRect.top;
+      float delta = ((rotationDelta != 1) ? (childWidth - childHeight) * scale/ 2.0f : 0.0f);
+
+      float dx = parentRect.left - delta;
+      float dy = parentRect.top + delta;
       outTransform.setScale(scale, scale);
       outTransform.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
     }
@@ -244,7 +252,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale = Math.min(scaleX, scaleY);
       float dx = parentRect.left;
       float dy = parentRect.top + (parentRect.height() - childHeight * scale);
@@ -271,7 +280,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale =  Math.min(scaleX, scaleY);
       float dx = parentRect.left + (parentRect.width() - childWidth * scale) * 0.5f;
       float dy = parentRect.top + (parentRect.height() - childHeight * scale) * 0.5f;
@@ -298,10 +308,12 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale = Math.min(scaleX, scaleY);
-      float dx = parentRect.left + (parentRect.width() - childWidth * scale);
-      float dy = parentRect.top + (parentRect.height() - childHeight * scale);
+      float delta = ((rotationDelta != 1) ? (childWidth - childHeight) * scale/ 2.0f : 0.0f);
+      float dx = parentRect.left + (parentRect.width() - childWidth * scale) + delta;
+      float dy = parentRect.top + (parentRect.height() - childHeight * scale) - delta;
       outTransform.setScale(scale, scale);
       outTransform.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
     }
@@ -325,7 +337,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float dx = parentRect.left + (parentRect.width() - childWidth) * 0.5f;
       float dy = parentRect.top + (parentRect.height() - childHeight) * 0.5f;
       outTransform.setTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
@@ -350,7 +363,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale = Math.min(Math.min(scaleX, scaleY), 1.0f);
       float dx = parentRect.left + (parentRect.width() - childWidth * scale) * 0.5f;
       float dy = parentRect.top + (parentRect.height() - childHeight * scale) * 0.5f;
@@ -377,15 +391,16 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale, dx, dy;
       if (scaleY > scaleX) {
         scale = scaleY;
         dx = parentRect.left + (parentRect.width() - childWidth * scale) * 0.5f;
-        dy = parentRect.top;
+        dy = parentRect.top + (parentRect.height() - childHeight * scale) * 0.5f;
       } else {
         scale = scaleX;
-        dx = parentRect.left;
+        dx = parentRect.left + (parentRect.width() - childWidth * scale) * 0.5f;
         dy = parentRect.top + (parentRect.height() - childHeight * scale) * 0.5f;
       }
       outTransform.setScale(scale, scale);
@@ -411,16 +426,21 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
-      float scale, dx, dy;
+        float scaleY, 
+        float rotationDelta) {
+      float scale, dx, dy, delta;
       if (scaleY > scaleX) {
         scale = scaleY;
+        delta = ((rotationDelta != 1) ? (childWidth - childHeight) * scale/ 2.0f : 0.0f);
         dx = parentRect.width() * 0.5f - childWidth * scale * focusX;
         dx = parentRect.left + Math.max(Math.min(dx, 0), parentRect.width() - childWidth * scale);
-        dy = parentRect.top;
+        dy = parentRect.height() * 0.5f - childHeight * scale * focusY;
+        dy = parentRect.top + Math.max(Math.min(dy, 0), parentRect.height() - childHeight * scale) - delta;
       } else {
         scale = scaleX;
-        dx = parentRect.left;
+        delta = ((rotationDelta != 1) ? (childWidth - childHeight) * scale: 0.0f);
+        dx = parentRect.width() * 0.5f - childWidth * scale * focusX;
+        dx = parentRect.left + Math.max(Math.min(dx, 0), parentRect.width() - childWidth * scale) + Math.min(delta / 2.0f, 0.0f);
         dy = parentRect.height() * 0.5f - childHeight * scale * focusY;
         dy = parentRect.top + Math.max(Math.min(dy, 0), parentRect.height() - childHeight * scale);
       }
@@ -447,7 +467,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale, dx, dy;
       scale = scaleX;
       dx = parentRect.left;
@@ -475,7 +496,8 @@ public class ScalingUtils {
         float focusX,
         float focusY,
         float scaleX,
-        float scaleY) {
+        float scaleY, 
+        float rotationDelta) {
       float scale, dx, dy;
       scale = scaleY;
       dx = parentRect.left + (parentRect.width() - childWidth * scale) * 0.5f;