feat:add PlcaeHolder and Error setting for Image

doric-android/doric/src/main/java/pub/doric/DoricRegistry.java

@@ -15,6 +15,7 @@
  */
 package pub.doric;
 
+import android.graphics.drawable.Drawable;
 import android.text.TextUtils;
 
 import java.util.HashMap;
@@ -70,6 +71,10 @@ public class DoricRegistry {
 
     private Set<IDoricMonitor> monitors = new HashSet<>();
 
+    private Drawable defaultPlaceHolderDrawable = null;
+
+    private Drawable defaultErrorDrawable = null;
+
     private static void initRegistry(DoricRegistry doricRegistry) {
         for (DoricLibrary library : doricLibraries) {
             library.load(doricRegistry);
@@ -168,4 +173,26 @@ public class DoricRegistry {
             monitor.onLog(type, message);
         }
     }
+
+    public Drawable getDefaultPlaceHolderDrawable() {
+        return defaultPlaceHolderDrawable;
+    }
+
+    /**
+     * @param defaultPlaceHolderDrawable Default display when image is loading and not set by JS API
+     */
+    public void setDefaultPlaceHolderDrawable(Drawable defaultPlaceHolderDrawable) {
+        this.defaultPlaceHolderDrawable = defaultPlaceHolderDrawable;
+    }
+
+    public Drawable getDefaultErrorDrawable() {
+        return defaultErrorDrawable;
+    }
+
+    /**
+     * @param defaultErrorDrawable Default display when image load error and not set by JS API
+     */
+    public void setDefaultErrorDrawable(Drawable defaultErrorDrawable) {
+        this.defaultErrorDrawable = defaultErrorDrawable;
+    }
 }

doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java

@@ -17,6 +17,8 @@ package pub.doric.shader;
 
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
+import android.graphics.Color;
+import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.text.TextUtils;
 import android.util.Base64;
@@ -41,6 +43,7 @@ import androidx.annotation.Nullable;
 import jp.wasabeef.glide.transformations.BlurTransformation;
 import pub.doric.DoricContext;
 import pub.doric.extension.bridge.DoricPlugin;
+import pub.doric.utils.DoricLog;
 import pub.doric.utils.DoricUtils;
 
 /**
@@ -52,6 +55,10 @@ import pub.doric.utils.DoricUtils;
 public class ImageNode extends ViewNode<ImageView> {
     private String loadCallbackId = "";
     private boolean isBlur;
+    private String placeHolderImage;
+    private String errorImage;
+    private int placeHolderColor = Color.TRANSPARENT;
+    private int errorColor = Color.TRANSPARENT;
 
     public ImageNode(DoricContext doricContext) {
         super(doricContext);
@@ -69,21 +76,86 @@ public class ImageNode extends ViewNode<ImageView> {
             if (jsValue.isBoolean()) {
                 isBlur = jsValue.asBoolean().value();
             }
+            JSValue placeHolder = jsObject.getProperty("placeHolderImage");
+            if (placeHolder.isString()) {
+                this.placeHolderImage = placeHolder.asString().value();
+            }
+            JSValue error = jsObject.getProperty("errorImage");
+            if (error.isString()) {
+                this.errorImage = error.asString().value();
+            }
+            JSValue placeHolderColor = jsObject.getProperty("placeHolderColor");
+            if (placeHolderColor.isNumber()) {
+                this.placeHolderColor = placeHolderColor.asNumber().toInt();
+            }
+            JSValue errorColor = jsObject.getProperty("errorColor");
+            if (errorColor.isNumber()) {
+                this.errorColor = errorColor.asNumber().toInt();
+            }
         }
         super.blend(jsObject);
     }
 
+    private Drawable getPlaceHolderDrawable() {
+        if (!TextUtils.isEmpty(placeHolderImage)) {
+            int resId = getDoricContext().getContext().getResources().getIdentifier(
+                    placeHolderImage.toLowerCase(),
+                    "drawable",
+                    getDoricContext().getContext().getPackageName());
+            if (resId > 0) {
+                return getDoricContext().getContext().getResources().getDrawable(resId);
+            } else {
+                DoricLog.e("Cannot find PlaceHolder Drawable for " + placeHolderImage);
+                return new ColorDrawable(Color.GRAY);
+            }
+        } else if (placeHolderColor != Color.TRANSPARENT) {
+            return new ColorDrawable(placeHolderColor);
+        } else {
+            return getDoricContext().getDriver().getRegistry().getDefaultPlaceHolderDrawable();
+        }
+    }
+
+    private Drawable getErrorDrawable() {
+        if (!TextUtils.isEmpty(errorImage)) {
+            int resId = getDoricContext().getContext().getResources().getIdentifier(
+                    errorImage.toLowerCase(),
+                    "drawable",
+                    getDoricContext().getContext().getPackageName());
+            if (resId > 0) {
+                return getDoricContext().getContext().getResources().getDrawable(resId);
+            } else {
+                DoricLog.e("Cannot find Error Drawable for " + errorImage);
+                return new ColorDrawable(Color.GRAY);
+            }
+        } else if (errorColor != Color.TRANSPARENT) {
+            return new ColorDrawable(errorColor);
+        } else {
+            return getDoricContext().getDriver().getRegistry().getDefaultErrorDrawable();
+        }
+    }
+
     @Override
     protected void blend(ImageView view, String name, JSValue prop) {
         switch (name) {
             case "imageUrl":
-
+                RequestBuilder<Drawable> requestBuilder = Glide.with(getContext())
-                RequestBuilder<Drawable> requestBuilder = Glide.with(getContext()).load(prop.asString().value());
+                        .load(prop.asString().value());
                 if (isBlur) {
                     requestBuilder = requestBuilder
                             .apply(RequestOptions
                                     .bitmapTransform(new BlurTransformation(25, 3)));
                 }
+                Drawable placeHolderDrawable = getPlaceHolderDrawable();
+
+                if (placeHolderDrawable != null) {
+                    requestBuilder = requestBuilder.apply(new RequestOptions().placeholder(placeHolderDrawable));
+                }
+
+                Drawable errorDrawable = getErrorDrawable();
+                if (errorDrawable != null) {
+                    requestBuilder = requestBuilder.apply(new RequestOptions().error(errorDrawable));
+                }
+
                 requestBuilder
                         .listener(new RequestListener<Drawable>() {
                             @Override

doric-iOS/Pod/Classes/DoricRegistry.h

@@ -22,11 +22,14 @@
 
 #import <Foundation/Foundation.h>
 #import "DoricMonitorProtocol.h"
+#import <UIKit/UIKit.h>
 
 NS_ASSUME_NONNULL_BEGIN
 @class DoricLibrary;
 
 @interface DoricRegistry : NSObject <DoricMonitorProtocol>
+@property(nonatomic, strong) UIImage *defaultPlaceHolderImage;
+@property(nonatomic, strong) UIImage *defaultErrorImage;
 
 - (NSString *)acquireJSBundle:(NSString *)name;
 

doric-iOS/Pod/Classes/Shader/DoricImageNode.m

@@ -27,6 +27,11 @@
 @interface DoricImageNode ()
 @property(nonatomic, copy) NSString *loadCallbackId;
 @property(nonatomic, assign) BOOL isBlur;
+@property(nonatomic, assign) UIViewContentMode contentMode;
+@property(nonatomic, strong) NSNumber *placeHolderColor;
+@property(nonatomic, strong) NSString *placeHolderImage;
+@property(nonatomic, strong) NSNumber *errorColor;
+@property(nonatomic, strong) NSString *errorImage;
 @end
 
 @implementation DoricImageNode
@@ -39,19 +44,78 @@ - (UIImageView *)build {
 
 - (void)blend:(NSDictionary *)props {
     NSInteger value = [props[@"isBlur"] intValue];
-    if(value == 1) {
+    if (value == 1) {
         self.isBlur = YES;
     }
-    
+    [props[@"placeHolderColor"] also:^(id it) {
+        self.placeHolderColor = it;
+    }];
+    [props[@"placeHolderImage"] also:^(id it) {
+        self.placeHolderImage = it;
+    }];
+    [props[@"errorColor"] also:^(id it) {
+        self.errorColor = it;
+    }];
+    [props[@"errorImage"] also:^(id it) {
+        self.errorImage = it;
+    }];
     [super blend:props];
 }
 
+- (UIImage *)currentPlaceHolderImage {
+    if (self.placeHolderImage) {
+        return [UIImage imageNamed:self.placeHolderImage];
+    }
+    if (self.placeHolderColor) {
+        UIColor *color = DoricColor(self.placeHolderColor);
+        CGRect rect = CGRectMake(0, 0, 1, 1);
+        self.view.contentMode = UIViewContentModeScaleToFill;
+        UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale);
+
+        CGContextRef context = UIGraphicsGetCurrentContext();
+        CGContextSetFillColorWithColor(context, color.CGColor);
+        CGContextFillRect(context, rect);
+
+        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+        UIGraphicsEndImageContext();
+        return image;
+    }
+    return self.doricContext.driver.registry.defaultPlaceHolderImage;
+}
+
+- (UIImage *)currentErrorImage {
+    if (self.errorImage) {
+        return [UIImage imageNamed:self.errorImage];
+    }
+    if (self.errorColor) {
+        UIColor *color = DoricColor(self.errorColor);
+        CGRect rect = CGRectMake(0, 0, 1, 1);
+        self.view.contentMode = UIViewContentModeScaleToFill;
+        UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale);
+
+        CGContextRef context = UIGraphicsGetCurrentContext();
+        CGContextSetFillColorWithColor(context, color.CGColor);
+        CGContextFillRect(context, rect);
+
+        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+        UIGraphicsEndImageContext();
+        return image;
+    }
+    return self.doricContext.driver.registry.defaultErrorImage;
+}
+
 - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id)prop {
     if ([@"imageUrl" isEqualToString:name]) {
         __weak typeof(self) _self = self;
-        [view yy_setImageWithURL:[NSURL URLWithString:prop] placeholder:nil options:0 completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
+        [view yy_setImageWithURL:[NSURL URLWithString:prop] placeholder:[self currentPlaceHolderImage] options:0 completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
             __strong typeof(_self) self = _self;
+            if (self.placeHolderColor || self.errorColor) {
+                self.view.contentMode = self.contentMode;
+            }
             if (error) {
+                [[self currentErrorImage] also:^(UIImage *it) {
+                    view.image = it;
+                }];
                 if (self.loadCallbackId.length > 0) {
                     [self callJSResponse:self.loadCallbackId, nil];
                 }
@@ -64,9 +128,9 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
                 [self requestLayout];
             }
 
-            if(self.isBlur) {
+            if (self.isBlur) {
                 UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
-                UIVisualEffectView *effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
+                UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
                 effectView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
                 [view addSubview:effectView];
             }
@@ -86,6 +150,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
                 break;
             }
         }
+        self.contentMode = self.view.contentMode;
     } else if ([@"loadCallback" isEqualToString:name]) {
         self.loadCallbackId = prop;
     } else if ([@"imageBase64" isEqualToString:name]) {

doric-js/bundle/doric-lib.es5.js

@@ -1662,6 +1662,27 @@ var Image = /** @class */ (function (_super) {
         Property,
         __metadata$4("design:type", Boolean)
     ], Image.prototype, "isBlur", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", String)
+    ], Image.prototype, "placeHolderImage", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", Color
+        /**
+         * Display while image is failed to load
+         * It can be file name in local path
+         */
+        )
+    ], Image.prototype, "placeHolderColor", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", String)
+    ], Image.prototype, "errorImage", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", Color)
+    ], Image.prototype, "errorColor", void 0);
     __decorate$4([
         Property,
         __metadata$4("design:type", Function)

doric-js/bundle/doric-lib.js

@@ -1228,6 +1228,27 @@ __decorate$4([
     Property,
     __metadata$4("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
+], Image.prototype, "placeHolderColor", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate$4([
     Property,
     __metadata$4("design:type", Function)

doric-js/bundle/doric-vm.js

@@ -2687,6 +2687,27 @@ __decorate$4([
     Property,
     __metadata$4("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
+], Image.prototype, "placeHolderColor", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate$4([
     Property,
     __metadata$4("design:type", Function)

doric-js/index.d.ts

@@ -473,30 +473,57 @@ declare module 'doric/lib/src/widget/text' {
 
 declare module 'doric/lib/src/widget/image' {
     import { IView, View } from "doric/lib/src/ui/view";
+    import { Color } from "doric/lib/src/util/color";
     export enum ScaleType {
-        ScaleToFill = 0,
+            ScaleToFill = 0,
-        ScaleAspectFit = 1,
+            ScaleAspectFit = 1,
-        ScaleAspectFill = 2
+            ScaleAspectFill = 2
     }
     export interface IImage extends IView {
-        imageUrl?: string;
+            imageUrl?: string;
-        imageBase64?: string;
+            imageBase64?: string;
-        scaleType?: ScaleType;
+            scaleType?: ScaleType;
-        isBlur?: boolean;
+            isBlur?: boolean;
-        loadCallback?: (image: {
+            placeHolderImage?: string;
-            width: number;
+            placeHolderColor?: Color;
-            height: number;
+            errorImage?: string;
-        } | undefined) => void;
+            errorColor?: Color;
+            loadCallback?: (image: {
+                    width: number;
+                    height: number;
+            } | undefined) => void;
     }
     export class Image extends View implements IImage {
-        imageUrl?: string;
+            imageUrl?: string;
-        imageBase64?: string;
+            imageBase64?: string;
-        scaleType?: ScaleType;
+            scaleType?: ScaleType;
-        isBlur?: boolean;
+            isBlur?: boolean;
-        loadCallback?: (image: {
+            /**
-            width: number;
+                * Display while image is loading
-            height: number;
+                * Local file name
-        } | undefined) => void;
+                */
+            placeHolderImage?: string;
+            /**
+                * Display while image is loading
+                * Color
+                * This priority is lower than placeHolderImage
+                */
+            placeHolderColor?: Color;
+            /**
+                * Display while image is failed to load
+                * It can be file name in local path
+                */
+            errorImage?: string;
+            /**
+                * Display while image is failed to load
+                * Color
+                * This priority is lower than errorImage
+                */
+            errorColor?: Color;
+            loadCallback?: (image: {
+                    width: number;
+                    height: number;
+            } | undefined) => void;
     }
     export function image(config: IImage): Image;
 }

doric-js/lib/src/widget/image.d.ts

@@ -1,4 +1,5 @@
 import { IView, View } from "../ui/view";
+import { Color } from "../util/color";
 export declare enum ScaleType {
     ScaleToFill = 0,
     ScaleAspectFit = 1,
@@ -9,6 +10,10 @@ export interface IImage extends IView {
     imageBase64?: string;
     scaleType?: ScaleType;
     isBlur?: boolean;
+    placeHolderImage?: string;
+    placeHolderColor?: Color;
+    errorImage?: string;
+    errorColor?: Color;
     loadCallback?: (image: {
         width: number;
         height: number;
@@ -19,6 +24,28 @@ export declare class Image extends View implements IImage {
     imageBase64?: string;
     scaleType?: ScaleType;
     isBlur?: boolean;
+    /**
+     * Display while image is loading
+     * Local file name
+     */
+    placeHolderImage?: string;
+    /**
+     * Display while image is loading
+     * Color
+     * This priority is lower than placeHolderImage
+     */
+    placeHolderColor?: Color;
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    errorImage?: string;
+    /**
+     * Display while image is failed to load
+     * Color
+     * This priority is lower than errorImage
+     */
+    errorColor?: Color;
     loadCallback?: (image: {
         width: number;
         height: number;

doric-js/lib/src/widget/image.js

@@ -24,6 +24,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
  */
 import { View, Property } from "../ui/view";
 import { layoutConfig } from "../util/layoutconfig";
+import { Color } from "../util/color";
 export var ScaleType;
 (function (ScaleType) {
     ScaleType[ScaleType["ScaleToFill"] = 0] = "ScaleToFill";
@@ -48,6 +49,27 @@ __decorate([
     Property,
     __metadata("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
+], Image.prototype, "placeHolderColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate([
     Property,
     __metadata("design:type", Function)

doric-js/src/widget/image.ts

@@ -15,6 +15,7 @@
  */
 import { IView, View, Property } from "../ui/view"
 import { layoutConfig } from "../util/layoutconfig"
+import { Color } from "../util/color"
 
 export enum ScaleType {
     ScaleToFill = 0,
@@ -27,19 +28,56 @@ export interface IImage extends IView {
     imageBase64?: string
     scaleType?: ScaleType
     isBlur?: boolean
+    placeHolderImage?: string
+    placeHolderColor?: Color
+    errorImage?: string
+    errorColor?: Color
     loadCallback?: (image: { width: number; height: number } | undefined) => void
 }
 
 export class Image extends View implements IImage {
     @Property
     imageUrl?: string
+
     @Property
     imageBase64?: string
+
     @Property
     scaleType?: ScaleType
+
     @Property
     isBlur?: boolean
 
+    /**
+     * Display while image is loading 
+     * Local file name
+     */
+    @Property
+    placeHolderImage?: string
+
+    /**
+     * Display while image is loading 
+     * Color
+     * This priority is lower than placeHolderImage
+     */
+    @Property
+    placeHolderColor?: Color
+
+    /**
+     * Display while image is failed to load 
+     * It can be file name in local path
+     */
+    @Property
+    errorImage?: string
+
+    /**
+     * Display while image is failed to load  
+     * Color
+     * This priority is lower than errorImage
+     */
+    @Property
+    errorColor?: Color
+
     @Property
     loadCallback?: (image: { width: number; height: number } | undefined) => void
 }

doric-web/dist/index.js

@@ -2745,6 +2745,27 @@ __decorate$4([
     Property,
     __metadata$4("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
+], Image.prototype, "placeHolderColor", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate$4([
     Property,
     __metadata$4("design:type", Function)