fix(image): ios added ImagePipeline.iosComplexCacheEviction

When enabled we remove all cached images with different transforms. It is a tricky implementation but for now it should work in most cases

Author: farfromrefug

src/image-colorfilter/index.ios.ts

@@ -22,7 +22,6 @@ function filterFromMatrix(matrix: number[], ciFilter:CIFilter = CIFilter.filterW
     ciFilter.setName(JSON.stringify(matrix));
 }
 registerPluginGetContextFromOptions((context, transformers, options: Partial<Img>) => {
-    console.log('colorFilter GetContextFromOptions')
     const ciFilter  = options.mCIFilter ?? (options.colorMatrix? filterFromMatrix(options.colorMatrix) : undefined);
     if (ciFilter) {
         transformers.push(SDImageFilterTransformer.transformerWithFilter(ciFilter));

src/image/index.d.ts

@@ -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.
      */
@@ -455,6 +461,6 @@ export interface ImagePipelineConfigSetting {
 }
 export const ImageViewTraceCategory;
 
-export type GetContextFromOptionsCallback = (context: NSDictionary<string, any>, transformers:any[], options: Partial<Img>)=>void
+export type GetContextFromOptionsCallback = (context: NSDictionary<string, any>, transformers: any[], options: Partial<Img>) => void;
 
-declare function registerPluginGetContextFromOptions(callback: GetContextFromOptionsCallback); // iOS only for plugins
+declare function registerPluginGetContextFromOptions(callback: GetContextFromOptionsCallback); // iOS only for plugins

src/image/index.ios.ts

@@ -1,5 +1,6 @@
 export * from './index-common';
-import { Color, ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { ApplicationSettings, Color, 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 {
@@ -106,9 +107,9 @@ export function initialize(config?: ImagePipelineConfigSetting): void {
 }
 export function shutDown(): void {}
 
-let pluginsGetContextFromOptions = new Set<GetContextFromOptionsCallback>();
+const pluginsGetContextFromOptions = new Set<GetContextFromOptionsCallback>();
 export function registerPluginGetContextFromOptions(callback: GetContextFromOptionsCallback) {
-    pluginsGetContextFromOptions.add(callback)
+    pluginsGetContextFromOptions.add(callback);
 }
 function getContextFromOptions(options: Partial<Img>) {
     const context: NSDictionary<string, any> = NSMutableDictionary.dictionary();
@@ -141,14 +142,30 @@ function getContextFromOptions(options: Partial<Img>) {
             )
         );
     }
+    pluginsGetContextFromOptions.forEach((c) => c(context, transformers, options));
+
     if (transformers.length > 0) {
         context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
     }
-    pluginsGetContextFromOptions.forEach(c=>c(context, transformers, options));
     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: string, uri: any) {
+    const set = new Set(cacheKeyMap[uri] || []);
+    set.add(cacheKey);
+    cacheKeyMap[uri] = [...set];
+    saveCacheKeys();
+}
 export class ImagePipeline {
+    static iosComplexCacheEviction = false;
     private mIos: SDImageCache = SDImageCache.sharedImageCache;
     constructor() {}
 
@@ -166,22 +183,32 @@ export class ImagePipeline {
     }
 
     evictFromMemoryCache(key: string): void {
-        this.mIos.removeImageFromMemoryForKey(key);
-    }
-
-    async evictFromDiskCache(key: string) {
-        return new Promise<void>((resolve) => {
-            this.mIos.removeImageForKeyCacheTypeCompletion(key, SDImageCacheType.Disk, resolve);
+        const cachekKeys = (cacheKeyMap[key] || []).concat([key]);
+        cachekKeys.forEach((k) => {
+            this.mIos.removeImageFromMemoryForKey(k);
         });
     }
 
-    async evictFromCache(key: string) {
-        return new Promise<void>((resolve) => {
-            this.mIos.removeImageForKeyCacheTypeCompletion(key, SDImageCacheType.All, resolve);
-        });
+    async evictFromDiskCache(key: string) {
+        return this.evictFromCache(key, SDImageCacheType.Disk);
+    }
+
+    async evictFromCache(key: string, type = SDImageCacheType.All) {
+        const cachekKeys = (cacheKeyMap[key] || []).concat([key]);
+        delete cacheKeyMap[key];
+        return Promise.all(
+            cachekKeys.map(
+                (k) =>
+                    new Promise<void>((resolve) => {
+                        this.mIos.removeImageForKeyCacheTypeCompletion(k, type, resolve);
+                    })
+            )
+        );
     }
 
     clearCaches() {
+        cacheKeyMap = {};
+        ApplicationSettings.remove(CACHE_KEYS_SETTING_KEY);
         this.mIos.clearMemory();
         this.mIos.clearDiskOnCompletion(null);
     }
@@ -347,10 +374,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 as string | ImageAsset).absoluteString;
             // const isInCache = imagePipeLine.isInBitmapMemoryCache(cachekKey);
             // if (isInCache) {
-            await imagePipeLine.evictFromCache(cachekKey);
+            await imagePipeLine.evictFromCache(getUri(src as string | ImageAsset).absoluteString);
             // }
         }
         // this.src = null;
@@ -539,11 +565,14 @@ export class Img extends ImageBase {
                 }
 
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
+                if (ImagePipeline.iosComplexCacheEviction) {
+                    registerCacheKey(this.mCacheKey, uri);
+                }
                 if (this.showProgressBar) {
                     try {
                         if (this.progressBarColor) {
                             const indicator = new SDWebImageActivityIndicator();
-                            indicator.indicatorView.color = this.progressBarColor.ios;
+                            indicator.indicatorView.color = (this.progressBarColor as Color).ios;
                             this.nativeImageViewProtected.sd_imageIndicator = indicator;
                         } else {
                             this.nativeImageViewProtected.sd_imageIndicator = SDWebImageActivityIndicator.grayIndicator;
@@ -590,8 +619,7 @@ export class Img extends ImageBase {
     }
 
     @needRequestImage
-    [headersProperty.setNative](value) {
-    }
+    [headersProperty.setNative](value) {}
 
     [failureImageUriProperty.setNative]() {
         // this.updateHierarchy();