@nativescript-community/ui-image 4.3.21 → 4.3.23

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.23](https://github.com/nativescript-community/ui-image/compare/v4.3.22...v4.3.23) (2023-11-22)
+
+### Bug Fixes
+
+* **ios:** updated native dep ([e6cc5f5](https://github.com/nativescript-community/ui-image/commit/e6cc5f5e0d42f048acbf37d0f8b936f138326b78))
+
+## [4.3.22](https://github.com/nativescript-community/ui-image/compare/v4.3.21...v4.3.22) (2023-11-17)
+
+### Bug Fixes
+
+* edge cases auto measurement fix ([dff9f29](https://github.com/nativescript-community/ui-image/commit/dff9f293f22f36641bd623fd8df3a5799ad14ffa))
+
 ## [4.3.21](https://github.com/nativescript-community/ui-image/compare/v4.3.20...v4.3.21) (2023-11-09)
 
 **Note:** Version bump only for package @nativescript-community/ui-image

package/index-common.js

@@ -94,7 +94,7 @@ export const srcProperty = new Property({ name: 'src' });
 export const lowerResSrcProperty = new Property({ name: 'lowerResSrc' });
 export const placeholderImageUriProperty = new Property({ name: 'placeholderImageUri' });
 export const failureImageUriProperty = new Property({ name: 'failureImageUri' });
-export const stretchProperty = new Property({ name: 'stretch', defaultValue: 'aspectFill' });
+export const stretchProperty = new Property({ name: 'stretch' });
 export const backgroundUriProperty = new Property({ name: 'backgroundUri' });
 export const progressiveRenderingEnabledProperty = new Property({ name: 'progressiveRenderingEnabled', valueConverter: booleanConverter });
 export const localThumbnailPreviewsEnabledProperty = new Property({ name: 'localThumbnailPreviewsEnabled', valueConverter: booleanConverter });

package/index.android.d.ts

@@ -62,17 +62,19 @@ export declare class FailureEventData extends EventData {
     get error(): ImageError;
     set error(value: ImageError);
 }
-export declare const needUpdateHierarchy: (target: any, propertyKey: string | Symbol, descriptor: PropertyDescriptor) => void;
+export declare const needUpdateHierarchy: (targetOrNeedsLayout: any, propertyKey?: string | Symbol, descriptor?: PropertyDescriptor) => any;
 export declare class Img extends ImageBase {
     nativeViewProtected: com.nativescript.image.DraweeView;
     nativeImageViewProtected: com.nativescript.image.DraweeView;
     isLoading: boolean;
     mCanUpdateHierarchy: boolean;
     mNeedUpdateHierarchy: boolean;
+    mNeedUpdateLayout: boolean;
     onResumeNativeUpdates(): void;
     createNativeView(): com.nativescript.image.DraweeView;
     updateViewSize(imageInfo: any): void;
     disposeNativeView(): void;
+    get cacheKey(): string | globalAndroid.net.Uri;
     updateImageUri(): void;
     controllerListener: com.facebook.drawee.controller.ControllerListener<com.facebook.imagepipeline.image.ImageInfo>;
     protected initImage(): Promise<void>;

package/index.android.js

@@ -2,6 +2,7 @@ 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';
+import { layout } from '@nativescript/core/utils/layout-helper';
 import { CLog, CLogTypes, EventData, ImageBase, ScaleType, aspectRatioProperty, backgroundUriProperty, blurDownSamplingProperty, blurRadiusProperty, fadeDurationProperty, failureImageUriProperty, imageRotationProperty, lowerResSrcProperty, needRequestImage, placeholderImageUriProperty, progressBarColorProperty, roundAsCircleProperty, roundBottomLeftRadiusProperty, roundBottomRightRadiusProperty, roundTopLeftRadiusProperty, roundTopRightRadiusProperty, showProgressBarProperty, srcProperty, stretchProperty, tintColorProperty } from './index-common';
 let initialized = false;
 let initializeConfig;
@@ -264,7 +265,27 @@ export class FailureEventData extends EventData {
         this._error = value;
     }
 }
-export const needUpdateHierarchy = function (target, propertyKey, descriptor) {
+export const needUpdateHierarchy = function (targetOrNeedsLayout, propertyKey, descriptor) {
+    if (typeof targetOrNeedsLayout === 'boolean') {
+        return function (target2, propertyKey, descriptor) {
+            const originalMethod = descriptor.value;
+            descriptor.value = function (...args) {
+                if (!this.mCanUpdateHierarchy) {
+                    this.mNeedUpdateHierarchy = true;
+                    if (this.isLoaded && targetOrNeedsLayout) {
+                        const layoutParams = this.nativeViewProtected?.getLayoutParams();
+                        if (layoutParams) {
+                            if (layout.getMeasureSpecMode(layoutParams.height) !== layout.EXACTLY || layout.getMeasureSpecMode(layoutParams.width) !== layout.EXACTLY) {
+                                this.mNeedUpdateLayout = true;
+                            }
+                        }
+                    }
+                    return;
+                }
+                return originalMethod.apply(this, args);
+            };
+        };
+    }
     const originalMethod = descriptor.value;
     descriptor.value = function (...args) {
         if (!this.mCanUpdateHierarchy) {
@@ -280,6 +301,7 @@ export class Img extends ImageBase {
         this.isLoading = false;
         this.mCanUpdateHierarchy = true;
         this.mNeedUpdateHierarchy = false;
+        this.mNeedUpdateLayout = false;
     }
     onResumeNativeUpdates() {
         // {N} suspends properties update on `_suspendNativeUpdates`. So we only need to do this in onResumeNativeUpdates
@@ -290,6 +312,10 @@ export class Img extends ImageBase {
             this.mNeedUpdateHierarchy = false;
             this.updateHierarchy();
         }
+        if (this.mNeedUpdateLayout) {
+            this.mNeedUpdateLayout = false;
+            this.nativeViewProtected.requestLayout();
+        }
     }
     createNativeView() {
         if (!initialized) {
@@ -327,15 +353,22 @@ export class Img extends ImageBase {
         this.controllerListener = null;
         // this.nativeImageViewProtected.setImageURI(null, null);
     }
+    get cacheKey() {
+        const src = this.src;
+        if (src && !(src instanceof ImageSource)) {
+            return getUri(src);
+        }
+        return undefined;
+    }
     updateImageUri() {
         const imagePipeLine = getImagePipeline();
+        const cacheKey = this.cacheKey;
         const src = this.src;
-        if (!(src instanceof ImageSource)) {
-            const uri = getUri(src);
-            const isInCache = imagePipeLine.isInBitmapMemoryCache(uri);
-            if (isInCache) {
-                imagePipeLine.evictFromCache(uri);
-            }
+        if (cacheKey) {
+            // const isInCache = imagePipeLine.isInBitmapMemoryCache(uri);
+            // // if (isInCache) {
+            imagePipeLine.evictFromCache(cacheKey);
+            // }
         }
         this.src = null;
         this.src = src;
@@ -747,7 +780,7 @@ __decorate([
     needUpdateHierarchy
 ], Img.prototype, _j, null);
 __decorate([
-    needUpdateHierarchy
+    needUpdateHierarchy(true)
 ], Img.prototype, _k, null);
 __decorate([
     needUpdateHierarchy
@@ -778,7 +811,7 @@ __decorate([
 ], Img.prototype, _u, null);
 class GenericDraweeHierarchyBuilder {
     constructor() {
-        const res = Utils.ad.getApplicationContext().getResources();
+        const res = Utils.android.getApplicationContext().getResources();
         this.nativeBuilder = new com.facebook.drawee.generic.GenericDraweeHierarchyBuilder(res);
     }
     setPlaceholderImage(drawable, scaleType) {

package/index.d.ts

@@ -208,6 +208,8 @@ export class Img extends View {
      * Android: custom imageRotation
      */
     imageRotation: number;
+
+    cacheKey: string;
 }
 
 /**

package/index.ios.d.ts

@@ -17,11 +17,11 @@ export declare class ImagePipeline {
     private mIos;
     constructor();
     getCacheKey(uri: string, context: any): string;
-    isInDiskCache(uri: string): boolean;
-    isInBitmapMemoryCache(uri: string): boolean;
-    evictFromMemoryCache(uri: string): void;
-    evictFromDiskCache(uri: string): void;
-    evictFromCache(uri: string): void;
+    isInDiskCache(key: string): boolean;
+    isInBitmapMemoryCache(key: string): boolean;
+    evictFromMemoryCache(key: string): void;
+    evictFromDiskCache(key: string): void;
+    evictFromCache(key: string): void;
     clearCaches(): void;
     clearMemoryCaches(): void;
     clearDiskCaches(): void;
@@ -36,6 +36,8 @@ export declare class Img extends ImageBase {
     nativeViewProtected: SDAnimatedImageView | UIImageView;
     nativeImageViewProtected: SDAnimatedImageView | UIImageView;
     isLoading: boolean;
+    mCacheKey: string;
+    get cacheKey(): string;
     protected mImageSourceAffectsLayout: boolean;
     protected mCIFilter: CIFilter;
     createNativeView(): UIImageView;

package/index.ios.js

@@ -80,20 +80,20 @@ export class ImagePipeline {
     getCacheKey(uri, context) {
         return SDWebImageManager.sharedManager.cacheKeyForURLContext(NSURL.URLWithString(uri), context);
     }
-    isInDiskCache(uri) {
-        return this.mIos.diskImageDataExistsWithKey(getUri(uri).absoluteString);
+    isInDiskCache(key) {
+        return this.mIos.diskImageDataExistsWithKey(key);
     }
-    isInBitmapMemoryCache(uri) {
-        return this.mIos.imageFromMemoryCacheForKey(getUri(uri).absoluteString) !== null;
+    isInBitmapMemoryCache(key) {
+        return this.mIos.imageFromMemoryCacheForKey(key) !== null;
     }
-    evictFromMemoryCache(uri) {
-        this.mIos.removeImageFromMemoryForKey(getUri(uri).absoluteString);
+    evictFromMemoryCache(key) {
+        this.mIos.removeImageFromMemoryForKey(key);
     }
-    evictFromDiskCache(uri) {
-        this.mIos.removeImageFromDiskForKey(getUri(uri).absoluteString);
+    evictFromDiskCache(key) {
+        this.mIos.removeImageFromDiskForKey(key);
     }
-    evictFromCache(uri) {
-        const key = getUri(uri).absoluteString;
+    evictFromCache(key) {
+        // const key = getUri(uri).absoluteString;
         this.mIos.removeImageFromDiskForKey(key);
         this.mIos.removeImageFromMemoryForKey(key);
         // this.mIos.removeImageForKeyWithCompletion(getUri(uri).absoluteString, null);
@@ -221,6 +221,9 @@ export class Img extends ImageBase {
             this.handleImageProgress(totalSize > 0 ? currentSize / totalSize : -1, totalSize);
         };
     }
+    get cacheKey() {
+        return this.mCacheKey;
+    }
     createNativeView() {
         const result = this.animatedImageView ? SDAnimatedImageView.new() : UIImageView.new();
         result.contentMode = 1 /* UIViewContentMode.ScaleAspectFit */;
@@ -243,23 +246,34 @@ export class Img extends ImageBase {
         const finiteWidth = widthMode === layout.EXACTLY;
         const finiteHeight = heightMode === layout.EXACTLY;
         this.mImageSourceAffectsLayout = !finiteWidth || !finiteHeight;
-        if (Trace.isEnabled()) {
-            CLog(CLogTypes.info, 'onMeasure', this.src, widthMeasureSpec, heightMeasureSpec, width, height, this.aspectRatio, image && image.imageOrientation);
-        }
+        // if (Trace.isEnabled()) {
+        //     CLog(CLogTypes.info, 'onMeasure', this.src, widthMeasureSpec, heightMeasureSpec, width, height, this.aspectRatio, image && image.imageOrientation);
+        // }
         if (image || this.aspectRatio > 0) {
             const nativeWidth = image ? layout.toDevicePixels(image.size.width) : 0;
             const nativeHeight = image ? layout.toDevicePixels(image.size.height) : 0;
             const imgRatio = nativeWidth / nativeHeight;
             const ratio = this.aspectRatio || imgRatio;
             // const scale = this.computeScaleFactor(width, height, finiteWidth, finiteHeight, nativeWidth, nativeHeight, this.aspectRatio || imgRatio );
-            if (!finiteWidth) {
+            if (!finiteWidth && finiteHeight) {
                 widthMeasureSpec = layout.makeMeasureSpec(height * ratio, layout.EXACTLY);
             }
-            if (!finiteHeight) {
+            else if (!finiteHeight && finiteWidth) {
                 heightMeasureSpec = layout.makeMeasureSpec(width / ratio, layout.EXACTLY);
             }
+            else if (!finiteWidth && !finiteHeight) {
+                const viewRatio = width / height;
+                if (viewRatio < ratio) {
+                    widthMeasureSpec = layout.makeMeasureSpec(width, layout.EXACTLY);
+                    heightMeasureSpec = layout.makeMeasureSpec((width / ratio), layout.EXACTLY);
+                }
+                else {
+                    widthMeasureSpec = layout.makeMeasureSpec((height * ratio), layout.EXACTLY);
+                    heightMeasureSpec = layout.makeMeasureSpec(height, layout.EXACTLY);
+                }
+            }
             if (Trace.isEnabled()) {
-                CLog(CLogTypes.info, 'onMeasure scale', this.src, this.aspectRatio, finiteWidth, finiteHeight, width, height, nativeWidth, nativeHeight, widthMeasureSpec, heightMeasureSpec);
+                CLog(CLogTypes.info, 'onMeasure', this.src, this.aspectRatio, finiteWidth, finiteHeight, width, height, nativeWidth, nativeHeight, widthMeasureSpec, heightMeasureSpec);
             }
         }
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
@@ -268,13 +282,15 @@ export class Img extends ImageBase {
         const imagePipeLine = getImagePipeline();
         const src = this.src;
         if (!(src instanceof ImageSource)) {
-            const uri = getUri(src).absoluteString;
-            const isInCache = imagePipeLine.isInBitmapMemoryCache(uri);
-            if (isInCache) {
-                imagePipeLine.evictFromCache(uri);
-            }
+            const cachekKey = this.mCacheKey || getUri(src).absoluteString;
+            // const isInCache = imagePipeLine.isInBitmapMemoryCache(cachekKey);
+            // if (isInCache) {
+            imagePipeLine.evictFromCache(cachekKey);
+            // }
         }
         this.src = null;
+        // ensure we clear the image as 
+        this._setNativeImage(null, false);
         this.src = src;
     }
     _setNativeImage(nativeImage, animated = true) {
@@ -306,7 +322,7 @@ export class Img extends ImageBase {
             this.nativeImageViewProtected.image = nativeImage;
         }
         if (this.mImageSourceAffectsLayout) {
-            this.mImageSourceAffectsLayout = false;
+            // this.mImageSourceAffectsLayout = false;
             this.requestLayout();
         }
     }
@@ -408,6 +424,7 @@ export class Img extends ImageBase {
                     }
                     context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
                 }
+                this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
                 this.nativeImageViewProtected.sd_setImageWithURLPlaceholderImageOptionsContextProgressCompleted(uri, this.placeholderImage, options, context, this.onLoadProgress, this.handleImageLoaded);
             }
             else if (this.placeholderImage) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-image",
-    "version": "4.3.21",
+    "version": "4.3.23",
     "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": "c8d5da96305841a97fce835b01fd2f41f8125257"
+    "gitHead": "2a74cda73128571c05d0e636aefe40be63c8d3eb"
 }

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

@@ -26,6 +26,7 @@ import android.graphics.PorterDuffXfermode;
 import android.view.ViewOutlineProvider;
 
 import org.nativescript.widgets.BorderDrawable;
+import com.nativescript.image.ScalingUtils.AbstractScaleType;
 
 import org.json.JSONArray;
 import org.json.JSONObject;
@@ -159,18 +160,33 @@ public class DraweeView extends SimpleDraweeView {
         int width = MeasureSpec.getSize(widthMeasureSpec);
         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
         int height = MeasureSpec.getSize(heightMeasureSpec);
-        final float aspectRatio = this.getAspectRatio();
+        float aspectRatio = this.getAspectRatio();
         if (aspectRatio > 0) {
             boolean finiteWidth = widthMode == android.view.View.MeasureSpec.EXACTLY;
             boolean finiteHeight = heightMode == android.view.View.MeasureSpec.EXACTLY;
+            Object scaleType = getHierarchy().getActualImageScaleType();
+            if (scaleType instanceof AbstractScaleType) {
+                final float rotation = ((AbstractScaleType)scaleType).getImageRotation();
+                if (Math.abs(rotation) % 180 != 0) {
+                    aspectRatio = 1.0f / aspectRatio;
+                }
+            }
             if (imageWidth != 0 && imageHeight != 0) {
-                if (!finiteWidth) {
+                if (!finiteWidth && finiteHeight) {
                     widthMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) (height * aspectRatio),
                             android.view.View.MeasureSpec.EXACTLY);
-                }
-                if (!finiteHeight) {
+                } else if (!finiteHeight && finiteWidth) {
                     heightMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) (width / aspectRatio),
                             android.view.View.MeasureSpec.EXACTLY);
+                } else if (!finiteWidth &&  !finiteHeight ) {
+                    float viewRatio = width / (float)height;
+                    if (viewRatio < aspectRatio) {
+                        widthMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) width, android.view.View.MeasureSpec.EXACTLY);
+                        heightMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) (width / aspectRatio), android.view.View.MeasureSpec.EXACTLY);
+                    } else {
+                        widthMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) (height * aspectRatio), android.view.View.MeasureSpec.EXACTLY);
+                        heightMeasureSpec = android.view.View.MeasureSpec.makeMeasureSpec((int) height, android.view.View.MeasureSpec.EXACTLY);
+                    }
                 }
             }
         }

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

@@ -123,6 +123,10 @@ public class ScalingUtils {
     public void setImageMatrix(Matrix matrix) {
         _imageMatrix = matrix;
     }
+
+    public float getImageRotation() {
+        return _imageRotation;
+    }
     public void setImageRotation(float rotation) {
         _imageRotation = rotation;
     }

package/platforms/ios/Podfile

@@ -1,2 +1,2 @@
-pod 'SDWebImage', '>= 5.13.0'
+pod 'SDWebImage', '>= 5.18.5.0'
 pod 'SDWebImagePhotosPlugin'

package/vue/index.mjs

@@ -0,0 +1,8 @@
+import { Img } from '../image';
+const ImagePlugin = {
+    install(Vue) {
+        Vue.registerElement('NSImg', () => Img);
+    }
+};
+export default ImagePlugin;
+//# sourceMappingURL=index.mjs.map