Rewrote image-cache to use the native image caching features, i.e. LruCache and NSCache.

This commit is contained in:
Rossen Hristov
2015-04-15 16:27:27 +03:00
parent 9e9c25dff7
commit 3d0882ffa7
6 changed files with 101 additions and 51 deletions

View File

@ -50,7 +50,11 @@ export class RedditViewModel extends observable.Observable {
} else if (redditAppViewModel.cache) {
var url = this._source.thumbnail;
var imgSource = redditAppViewModel.cache.get(url);
var imgSource: imageSource.ImageSource;
var image = redditAppViewModel.cache.get(url);
if (image) {
imgSource = imageSource.fromNativeSource(image);
}
if (imgSource) {
this._thumbnailImageSource = imgSource;
@ -61,11 +65,12 @@ export class RedditViewModel extends observable.Observable {
redditAppViewModel.cache.push({
key: url,
url: url,
completed: (result: imageSource.ImageSource, key: string) => {
completed: (image: any, key: string) => {
if (url === key) {
this.isLoading = false;
this._thumbnailImageSource = result;
this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: THUMBNAIL_IMAGE_SOURCE, value: result });
var imgSource = imageSource.fromNativeSource(image);
this._thumbnailImageSource = imgSource;
this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: THUMBNAIL_IMAGE_SOURCE, value: imgSource });
}
}
});

View File

@ -19,22 +19,22 @@ export function test_DummyTestForSnippetOnly() {
//// Enable download while not scrolling
cache.enableDownload();
var src: imageSource.ImageSource;
var imgSouce: imageSource.ImageSource;
var url = "https://github.com/NativeScript.png";
//// Try to read the image from the cache
var result = cache.get(url);
if (result) {
var image = cache.get(url);
if (image) {
//// If present -- use it.
src = result;
imgSouce = imageSource.fromNativeSource(image);
}
else {
//// If not present -- request its download.
cache.push({
key: url,
url: url,
completed: (result: imageSource.ImageSource, key: string) => {
completed: (image: any, key: string) => {
if (url === key) {
src = result;
imgSouce = imageSource.fromNativeSource(image);
}
}
});

View File

@ -9,7 +9,7 @@ export module knownEvents {
export interface DownloadRequest {
url: string;
key: string;
completed?: (result: imageSource.ImageSource, key: string) => void;
completed?: (image: any, key: string) => void;
}
export class Cache extends observable.Observable implements definition.Cache {
@ -17,7 +17,6 @@ export class Cache extends observable.Observable implements definition.Cache {
public maxRequests = 5;
private _enabled = true;
private _cache = {};
private _pendingDownloads = {};
private _queue: Array<DownloadRequest> = [];
private _currentDownloads = 0;
@ -98,47 +97,42 @@ export class Cache extends observable.Observable implements definition.Cache {
}
}
public get(key: string): imageSource.ImageSource {
var value = this._cache[key];
if (value) {
return value;
}
return undefined;
public get(key: string): any {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public set(key: string, source: imageSource.ImageSource): void {
this._cache[key] = source;
public set(key: string, image: any): void {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public remove(key: string): void {
delete this._cache[key];
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public clear() {
var keys = Object.keys(this._cache);
var i;
var length = keys.length;
for (i = 0; i < length; i++) {
delete this._cache[keys[i]];
}
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
/* tslint:disable:no-unused-variable */
public _downloadCore(request: definition.DownloadRequest) {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
/* tslint:enable:no-unused-variable */
public _onDownloadCompleted(key: string, result: imageSource.ImageSource) {
public _onDownloadCompleted(key: string, image: any) {
var request = <DownloadRequest>this._pendingDownloads[key];
this._cache[request.key] = result;
this.set(request.key, image);
this._currentDownloads--;
if (request.completed) {
request.completed(result, request.key);
request.completed(image, request.key);
}
if (this.hasListeners(knownEvents.downloaded)) {
@ -146,7 +140,7 @@ export class Cache extends observable.Observable implements definition.Cache {
eventName: knownEvents.downloaded,
object: this,
key: key,
image: result
image: image
});
}
@ -156,7 +150,7 @@ export class Cache extends observable.Observable implements definition.Cache {
}
private _shouldDownload(request: definition.DownloadRequest, onTop: boolean): boolean {
if (request.key in this._cache || request.key in this._pendingDownloads) {
if (this.get(request.key) || request.key in this._pendingDownloads) {
return false;
}

View File

@ -1,20 +1,38 @@
import common = require("ui/image-cache/image-cache-common");
import imageSource = require("image-source");
module.exports.knownEvents = common.knownEvents;
class LruBitmapCache extends android.util.LruCache<string, android.graphics.Bitmap> {
constructor(cacheSize: number) {
super(cacheSize);
return global.__native(this);
}
protected sizeOf(key: string, bitmap: android.graphics.Bitmap): number {
// The cache size will be measured in kilobytes rather than
// number of items.
var result = Math.round(bitmap.getByteCount() / 1024);
return result;
}
};
export class Cache extends common.Cache {
private _callback: any;
private _cache: LruBitmapCache;
constructor() {
super();
var maxMemory = java.lang.Runtime.getRuntime().maxMemory() / 1024;
var cacheSize = maxMemory / 8;
this._cache = new LruBitmapCache(cacheSize);
var that = new WeakRef(this);
this._callback = new (<any>com).tns.Async.CompleteCallback({
onComplete: function (result: any, context: any) {
var instance = that.get();
if (instance) {
instance._onBitmapDownloaded(result, context);
instance._onDownloadCompleted(context, result)
}
}
});
@ -24,11 +42,20 @@ export class Cache extends common.Cache {
(<any>com).tns.Async.DownloadImage(request.url, this._callback, request.key);
}
/* tslint:disable:no-unused-variable */
private _onBitmapDownloaded(result: android.graphics.Bitmap, context: any) {
// as a context we are receiving the key of the request
var source = imageSource.fromNativeSource(result);
this._onDownloadCompleted(context, source);
public get(key: string): any {
var result = this._cache.get(key);
return result;
}
public set(key: string, image: any): void {
this._cache.put(key, image);
}
public remove(key: string): void {
this._cache.remove(key);
}
public clear() {
this._cache.evictAll();
}
/* tslint:enable:no-unused-variable */
}

View File

@ -20,7 +20,7 @@ declare module "ui/image-cache" {
/**
* An optional function to be called when the download is complete.
*/
completed?: (result: imageSource.ImageSource, key: string) => void;
completed?: (image: any, key: string) => void;
}
/**
@ -57,11 +57,11 @@ declare module "ui/image-cache" {
/**
* Gets the image for the specified key. May be undefined if the key is not present in the cache.
*/
get(key: string): imageSource.ImageSource;
get(key: string): any;
/**
* Sets the image for the specified key.
*/
set(key: string, source: imageSource.ImageSource): void;
set(key: string, image: any): void;
/**
* Removes the cache for the specified key.
*/
@ -73,7 +73,7 @@ declare module "ui/image-cache" {
//@private
_downloadCore(request: DownloadRequest);
_onDownloadCompleted(key: string, result: imageSource.ImageSource);
_onDownloadCompleted(key: string, image: any);
//@endprivate
}

View File

@ -1,15 +1,39 @@
import common = require("ui/image-cache/image-cache-common");
import imageSource = require("image-source");
import httpRequest = require("http/http-request");
module.exports.knownEvents = common.knownEvents;
export class Cache extends common.Cache {
private _cache: NSCache;
constructor() {
super();
this._cache = new NSCache();
}
public _downloadCore(request: common.DownloadRequest) {
// TODO: WeakRef?
var that = this;
imageSource.fromUrl(request.url).
then(function (value) {
that._onDownloadCompleted(request.key, value);
httpRequest.request({ url: request.url, method: "GET" })
.then(response => {
var image = UIImage.imageWithData(response.content.raw);
that._onDownloadCompleted(request.key, image);
});
}
public get(key: string): any {
return this._cache.objectForKey(key);
}
public set(key: string, image: any): void {
this._cache.setObjectForKey(image, key);
}
public remove(key: string): void {
this._cache.removeObjectForKey(key);
}
public clear() {
this._cache.removeAllObjects();
}
}