@nativescript-community/ui-image 4.5.1 → 4.5.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.2](https://github.com/nativescript-community/ui-image/compare/v4.5.1...v4.5.2) (2024-05-14)
+
+**Note:** Version bump only for package @nativescript-community/ui-image
+
 ## [4.5.1](https://github.com/nativescript-community/ui-image/compare/v4.5.0...v4.5.1) (2024-04-25)
 
 ### Bug Fixes

package/index-common.d.ts

@@ -107,7 +107,7 @@ export declare abstract class ImageBase extends View {
     progressiveRenderingEnabled: boolean;
     localThumbnailPreviewsEnabled: boolean;
     showProgressBar: boolean;
-    progressBarColor: Color;
+    progressBarColor: Color | string;
     roundAsCircle: boolean;
     roundBottomRightRadius: number;
     roundTopLeftRadius: number;

package/index.d.ts

@@ -74,7 +74,7 @@ export class Img extends View {
     /**
      * String value used for the image URI.
      */
-    src: string | ImageSource | ImageAsset | Promise<string | ImageSource | ImageAsset>;
+    src: SrcType;
 
     /**
      * String value used for the lower res image URI.
@@ -127,7 +127,7 @@ export class Img extends View {
     /**
      * String value used for setting the color of the progress bar. Can be set to hex values ("#FF0000"") and predefined colors ("green").
      */
-    progressBarColor: string;
+    progressBarColor: Color | string;
 
     /**
      * Boolean value used for determining if the image should be rounded as a circle.
@@ -349,6 +349,12 @@ export interface AnimatedImage {
  * The entry point for the image pipeline..
  */
 export class ImagePipeline {
+    /**
+     * iOS: set this to true to enable complex cache handling
+     * this is necessary when you use colorMatrix, decodeWidth,...
+     * and when you change images on drive requiring cache image eviction
+     */
+    static iosComplexCacheEviction: boolean;
     /**
      * Returns whether the image is stored in the bitmap memory cache.
      */
@@ -454,3 +460,7 @@ export interface ImagePipelineConfigSetting {
     useOkhttp?: boolean; // Android only
 }
 export const ImageViewTraceCategory;
+
+export type GetContextFromOptionsCallback = (context: NSDictionary<string, any>, transformers: any[], options: Partial<Img>) => void;
+
+declare function registerPluginGetContextFromOptions(callback: GetContextFromOptionsCallback); // iOS only for plugins

package/index.ios.d.ts

@@ -1,5 +1,6 @@
 export * from './index-common';
 import { EventData, ImageBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting, SrcType } from './index-common';
+import { GetContextFromOptionsCallback } from '@nativescript-community/ui-image';
 export declare class ImageInfo implements ImageInfoBase {
     private width;
     private height;
@@ -13,15 +14,17 @@ export interface FinalEventData extends EventData {
 }
 export declare function initialize(config?: ImagePipelineConfigSetting): void;
 export declare function shutDown(): void;
+export declare function registerPluginGetContextFromOptions(callback: GetContextFromOptionsCallback): void;
 export declare class ImagePipeline {
+    static iosComplexCacheEviction: boolean;
     private mIos;
     constructor();
     getCacheKey(uri: string, options: Partial<Img>): string;
     isInDiskCache(key: string): boolean;
     isInBitmapMemoryCache(key: string): boolean;
     evictFromMemoryCache(key: string): void;
-    evictFromDiskCache(key: string): Promise<void>;
-    evictFromCache(key: string): Promise<void>;
+    evictFromDiskCache(key: string): Promise<any[]>;
+    evictFromCache(key: string, type?: SDImageCacheType): Promise<any[]>;
     clearCaches(): void;
     clearMemoryCaches(): void;
     clearDiskCaches(): void;
@@ -40,7 +43,6 @@ export declare class Img extends ImageBase {
     contextOptions: any;
     get cacheKey(): string;
     protected mImageSourceAffectsLayout: boolean;
-    mCIFilter: CIFilter;
     createNativeView(): UIImageView;
     _setNativeClipToBounds(): void;
     onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;

package/index.ios.js

@@ -1,6 +1,7 @@
 var _a, _b, _c, _d, _e;
 export * from './index-common';
-import { ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { ApplicationSettings, ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { debounce } from '@nativescript/core/utils';
 import { layout } from '@nativescript/core/utils/layout-helper';
 import { isString } from '@nativescript/core/utils/types';
 import { CLog, CLogTypes, ImageBase, ScaleType, failureImageUriProperty, headersProperty, imageRotationProperty, placeholderImageUriProperty, progressBarColorProperty, showProgressBarProperty, srcProperty, stretchProperty, wrapNativeException } from './index-common';
@@ -73,6 +74,10 @@ export function initialize(config) {
     SDImageLoadersManager.sharedManager.loaders = NSArray.arrayWithArray([SDWebImageDownloader.sharedDownloader, SDImagePhotosLoader.sharedLoader]);
 }
 export function shutDown() { }
+const pluginsGetContextFromOptions = new Set();
+export function registerPluginGetContextFromOptions(callback) {
+    pluginsGetContextFromOptions.add(callback);
+}
 function getContextFromOptions(options) {
     const context = NSMutableDictionary.dictionary();
     const transformers = [];
@@ -98,14 +103,25 @@ function getContextFromOptions(options) {
         //@ts-ignore
         NSImageRoundCornerTransformer.transformerWithTopLefRadiusTopRightRadiusBottomRightRadiusBottomLeftRadius(layout.toDeviceIndependentPixels(options.roundTopLeftRadius), layout.toDeviceIndependentPixels(options.roundTopRightRadius), layout.toDeviceIndependentPixels(options.roundBottomRightRadius), layout.toDeviceIndependentPixels(options.roundBottomLeftRadius)));
     }
-    if (options.mCIFilter) {
-        transformers.push(SDImageFilterTransformer.transformerWithFilter(options.mCIFilter));
-    }
+    pluginsGetContextFromOptions.forEach((c) => c(context, transformers, options));
     if (transformers.length > 0) {
         context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
     }
     return context;
 }
+// This is not the best solution as their might be a lot of corner cases
+// for example if an image is removed from cache without going through ImagePipeline
+// we wont know it and the cacheKeyMap will grow
+// but i dont see a better way right now
+const CACHE_KEYS_SETTING_KEY = 'NS_ui_image_cache_keys';
+let cacheKeyMap = JSON.parse(ApplicationSettings.getString(CACHE_KEYS_SETTING_KEY, '{}'));
+const saveCacheKeys = debounce(() => ApplicationSettings.setString(CACHE_KEYS_SETTING_KEY, JSON.stringify(cacheKeyMap)), 500);
+function registerCacheKey(cacheKey, uri) {
+    const set = new Set(cacheKeyMap[uri] || []);
+    set.add(cacheKey);
+    cacheKeyMap[uri] = [...set];
+    saveCacheKeys();
+}
 export class ImagePipeline {
     constructor() {
         this.mIos = SDImageCache.sharedImageCache;
@@ -121,19 +137,24 @@ export class ImagePipeline {
         return this.mIos.imageFromMemoryCacheForKey(key) !== null;
     }
     evictFromMemoryCache(key) {
-        this.mIos.removeImageFromMemoryForKey(key);
+        const cachekKeys = (cacheKeyMap[key] || []).concat([key]);
+        cachekKeys.forEach((k) => {
+            this.mIos.removeImageFromMemoryForKey(k);
+        });
     }
     async evictFromDiskCache(key) {
-        return new Promise((resolve) => {
-            this.mIos.removeImageForKeyCacheTypeCompletion(key, 1 /* SDImageCacheType.Disk */, resolve);
-        });
+        return this.evictFromCache(key, 1 /* SDImageCacheType.Disk */);
     }
-    async evictFromCache(key) {
-        return new Promise((resolve) => {
-            this.mIos.removeImageForKeyCacheTypeCompletion(key, 3 /* SDImageCacheType.All */, resolve);
-        });
+    async evictFromCache(key, type = 3 /* SDImageCacheType.All */) {
+        const cachekKeys = (cacheKeyMap[key] || []).concat([key]);
+        delete cacheKeyMap[key];
+        return Promise.all(cachekKeys.map((k) => new Promise((resolve) => {
+            this.mIos.removeImageForKeyCacheTypeCompletion(k, type, resolve);
+        })));
     }
     clearCaches() {
+        cacheKeyMap = {};
+        ApplicationSettings.remove(CACHE_KEYS_SETTING_KEY);
         this.mIos.clearMemory();
         this.mIos.clearDiskOnCompletion(null);
     }
@@ -168,6 +189,7 @@ export class ImagePipeline {
         return this.mIos;
     }
 }
+ImagePipeline.iosComplexCacheEviction = false;
 export const needRequestImage = function (target, propertyKey, descriptor) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args) {
@@ -319,10 +341,9 @@ export class Img extends ImageBase {
         const src = this.src;
         const srcType = typeof src;
         if (src && (srcType === 'string' || src instanceof ImageAsset)) {
-            const cachekKey = this.mCacheKey || getUri(src).absoluteString;
             // const isInCache = imagePipeLine.isInBitmapMemoryCache(cachekKey);
             // if (isInCache) {
-            await imagePipeLine.evictFromCache(cachekKey);
+            await imagePipeLine.evictFromCache(getUri(src).absoluteString);
             // }
         }
         // this.src = null;
@@ -467,6 +488,9 @@ export class Img extends ImageBase {
                     context.setValueForKey(requestModifier, SDWebImageContextDownloadRequestModifier);
                 }
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
+                if (ImagePipeline.iosComplexCacheEviction) {
+                    registerCacheKey(this.mCacheKey, uri);
+                }
                 if (this.showProgressBar) {
                     try {
                         if (this.progressBarColor) {
@@ -505,8 +529,7 @@ export class Img extends ImageBase {
     [progressBarColorProperty.setNative](value) {
         this.progressBarColor = value;
     }
-    [_e = headersProperty.setNative](value) {
-    }
+    [_e = headersProperty.setNative](value) { }
     [failureImageUriProperty.setNative]() {
         // this.updateHierarchy();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-image",
-    "version": "4.5.1",
+    "version": "4.5.2",
     "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,
@@ -36,5 +36,5 @@
     },
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
-    "gitHead": "7ea32ad1649b64b1c3eb35b906fea16f213e474a"
+    "gitHead": "d4462950b4a219a6afa848ba9306f9031b932ec3"
 }

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