iOS: resize image support tile mode.

doric-demo/src/ImageDemo.ts

@@ -179,6 +179,28 @@ class ImageDemo extends Panel {
                             bottom: 0
                         }
                     }),
+                    label('tileInset'),
+                    image({
+                        imageBase64: img_base64[1],
+                        height: 66,
+                        width: 147,
+                        scaleType: ScaleType.ScaleAspectFill,
+                        layoutConfig: layoutConfig().just(),
+                    }),
+                    image({
+                        imageBase64: img_base64[1],
+                        height: 66 * 2,
+                        width: 147 * 2,
+                        backgroundColor: Color.CYAN,
+                        scaleType: ScaleType.ScaleToFill,
+                        layoutConfig: layoutConfig().just(),
+                        tileInset: {
+                            left: 0,
+                            top: 0,
+                            right: 83,
+                            bottom: 0
+                        }
+                    }),
                 ],
                 {
                     layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),

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

@@ -84,6 +84,7 @@ @interface DoricImageNode ()
 @property(nonatomic, strong) NSString *errorImageBase64;
 @property(nonatomic, strong) UIVisualEffectView *blurEffectView;
 @property(nonatomic, strong) NSDictionary *stretchInsetDic;
+@property(nonatomic, strong) NSDictionary *tileInsetDic;
 @property(nonatomic, assign) CGFloat imageScale;
 @end
 
@@ -556,6 +557,8 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
         }
     } else if ([@"stretchInset" isEqualToString:name]) {
         self.stretchInsetDic = (NSDictionary *) prop;
+    } else if ([@"tileInset" isEqualToString:name]) {
+        self.tileInsetDic = (NSDictionary *) prop;
     } else if ([@"imageScale" isEqualToString:name]) {
         //Do not need set
     } else if ([@"onAnimationEnd" isEqualToString:name]) {
@@ -668,6 +671,14 @@ - (void)afterBlended:(NSDictionary *)props {
         CGFloat scale = self.imageScale;
         UIImage *result = [self.view.image resizableImageWithCapInsets:UIEdgeInsetsMake(top / scale, left / scale, bottom / scale, right / scale) resizingMode:UIImageResizingModeStretch];
         self.view.image = result;
+    } else if (self.tileInsetDic != nil) {
+        CGFloat left = [self.tileInsetDic[@"left"] floatValue];
+        CGFloat top = [self.tileInsetDic[@"top"] floatValue];
+        CGFloat right = [self.tileInsetDic[@"right"] floatValue];
+        CGFloat bottom = [self.tileInsetDic[@"bottom"] floatValue];
+        CGFloat scale = self.imageScale;
+        UIImage *result = [self.view.image resizableImageWithCapInsets:UIEdgeInsetsMake(top / scale, left / scale, bottom / scale, right / scale) resizingMode:UIImageResizingModeTile];
+        self.view.image = result;
     }
 }
 

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

@@ -68,7 +68,7 @@ var Mutable = /** @class */ (function () {
  */
 var __uniqueId__ = 0;
 function uniqueId(prefix) {
-    return "__" + prefix + "_" + __uniqueId__++ + "__";
+    return "__".concat(prefix, "_").concat(__uniqueId__++, "__");
 }
 
 function toString(message) {
@@ -177,11 +177,11 @@ var __values$5 = (undefined && undefined.__values) || function(o) {
 function Property(target, propKey) {
     Object.defineProperty(target, propKey, {
         get: function () {
-            return Reflect.get(this, "__prop__" + propKey, this);
+            return Reflect.get(this, "__prop__".concat(propKey), this);
         },
         set: function (v) {
-            var oldV = Reflect.get(this, "__prop__" + propKey, this);
+            var oldV = Reflect.get(this, "__prop__".concat(propKey), this);
-            Reflect.set(this, "__prop__" + propKey, v, this);
+            Reflect.set(this, "__prop__".concat(propKey), v, this);
             if (oldV !== v) {
                 Reflect.apply(this.onPropertyChanged, this, [propKey, oldV, v]);
             }
@@ -191,11 +191,11 @@ function Property(target, propKey) {
 function InconsistProperty(target, propKey) {
     Object.defineProperty(target, propKey, {
         get: function () {
-            return Reflect.get(this, "__prop__" + propKey, this);
+            return Reflect.get(this, "__prop__".concat(propKey), this);
         },
         set: function (v) {
-            var oldV = Reflect.get(this, "__prop__" + propKey, this);
+            var oldV = Reflect.get(this, "__prop__".concat(propKey), this);
-            Reflect.set(this, "__prop__" + propKey, v, this);
+            Reflect.set(this, "__prop__".concat(propKey), v, this);
             Reflect.apply(this.onPropertyChanged, this, [propKey, oldV, v]);
         },
     });
@@ -373,7 +373,7 @@ var View = /** @class */ (function () {
             return Reflect.apply(f, this, argumentsList);
         }
         else {
-            loge("Cannot find callback:" + id + " for " + JSON.stringify(this.toModel()));
+            loge("Cannot find callback:".concat(id, " for ").concat(JSON.stringify(this.toModel())));
         }
     };
     View.prototype.toModel = function () {
@@ -714,7 +714,7 @@ var Group = /** @class */ (function (_super) {
             this.addChild(e);
         }
         else {
-            loge("Not allowed to add " + typeof e);
+            loge("Not allowed to add ".concat(typeof e));
         }
     };
     Object.defineProperty(Group.prototype, "innerElement", {
@@ -1225,7 +1225,7 @@ var Panel = /** @class */ (function () {
 
         var v = this.retrospectView(viewIds);
         if (v === undefined) {
-            loge("Cannot find view for " + viewIds);
+            loge("Cannot find view for ".concat(viewIds));
         }
         else {
             var argumentsList = [callbackId];
@@ -1427,7 +1427,7 @@ var Color = /** @class */ (function () {
     }
     Color.parse = function (str) {
         if (!str.startsWith("#")) {
-            throw new Error("Parse color error with " + str);
+            throw new Error("Parse color error with ".concat(str));
         }
         var val = parseInt(str.substr(1), 16);
         if (str.length === 7) {
@@ -1437,7 +1437,7 @@ var Color = /** @class */ (function () {
             return new Color(val);
         }
         else {
-            throw new Error("Parse color error with " + str);
+            throw new Error("Parse color error with ".concat(str));
         }
     };
     Color.safeParse = function (str, defVal) {
@@ -2240,7 +2240,7 @@ var MainBundleResource = /** @class */ (function (_super) {
 var BundleResource = /** @class */ (function (_super) {
     __extends$f(BundleResource, _super);
     function BundleResource(bundleName, fileName) {
-        return _super.call(this, "bundle", bundleName + "://" + fileName) || this;
+        return _super.call(this, "bundle", "".concat(bundleName, "://").concat(fileName)) || this;
     }
     return BundleResource;
 }(iOSResource));
@@ -2389,6 +2389,10 @@ var Image = /** @class */ (function (_super) {
         Property,
         __metadata$b("design:type", Object)
     ], Image.prototype, "stretchInset", void 0);
+    __decorate$b([
+        Property,
+        __metadata$b("design:type", Object)
+    ], Image.prototype, "tileInset", void 0);
     __decorate$b([
         Property,
         __metadata$b("design:type", Function)
@@ -2522,7 +2526,7 @@ var List = /** @class */ (function (_super) {
     List.prototype.getItem = function (itemIdx) {
         var view = this.renderItem(itemIdx);
         view.superview = this;
-        this.cachedViews.set("" + itemIdx, view);
+        this.cachedViews.set("".concat(itemIdx), view);
         return view;
     };
     List.prototype.renderBunchedItems = function (start, length) {
@@ -2656,7 +2660,7 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.getItem = function (itemIdx) {
         var view = this.renderPage(itemIdx);
         view.superview = this;
-        this.cachedViews.set("" + itemIdx, view);
+        this.cachedViews.set("".concat(itemIdx), view);
         return view;
     };
     Slider.prototype.renderBunchedItems = function (start, length) {
@@ -3020,7 +3024,7 @@ exports.jsx = void 0;
                 Reflect.set(e, "innerElement", children, e);
             }
             else {
-                throw new Error("Do not support " + constructor.name + " for " + children);
+                throw new Error("Do not support ".concat(constructor.name, " for ").concat(children));
             }
         }
         return e;
@@ -3138,7 +3142,7 @@ var FlowLayout = /** @class */ (function (_super) {
     FlowLayout.prototype.getItem = function (itemIdx) {
         var view = this.renderItem(itemIdx);
         view.superview = this;
-        this.cachedViews.set("" + itemIdx, view);
+        this.cachedViews.set("".concat(itemIdx), view);
         return view;
     };
     FlowLayout.prototype.renderBunchedItems = function (start, length) {
@@ -3819,7 +3823,7 @@ function navbar(context) {
 }
 
 function internalScheme(context, panelClass) {
-    return "_internal_://export?class=" + encodeURIComponent(panelClass.name) + "&context=" + context.id;
+    return "_internal_://export?class=".concat(encodeURIComponent(panelClass.name), "&context=").concat(context.id);
 }
 function navigator(context) {
     var moduleName = "navigator";
@@ -3859,9 +3863,9 @@ function transformRequest(request) {
     if (request.params !== undefined) {
         var queryStrings = [];
         for (var key in request.params) {
-            queryStrings.push(key + "=" + encodeURIComponent(request.params[key]));
+            queryStrings.push("".concat(key, "=").concat(encodeURIComponent(request.params[key])));
         }
-        request.url = "" + request.url + (url.indexOf('?') >= 0 ? '&' : '?') + queryStrings.join('&');
+        request.url = "".concat(request.url).concat(url.indexOf('?') >= 0 ? '&' : '?').concat(queryStrings.join('&'));
     }
     if (typeof request.data === 'object') {
         request.data = JSON.stringify(request.data);
@@ -4137,7 +4141,7 @@ function animate(context) {
     }
     else {
         return function (args) {
-            return Promise.reject("Cannot find panel in Context:" + context.id);
+            return Promise.reject("Cannot find panel in Context:".concat(context.id));
         };
     }
 }

doric-js/bundle/doric-lib.js

@@ -1804,6 +1804,10 @@ __decorate$b([
     Property,
     __metadata$b("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
+__decorate$b([
+    Property,
+    __metadata$b("design:type", Object)
+], Image.prototype, "tileInset", void 0);
 __decorate$b([
     Property,
     __metadata$b("design:type", Function)

doric-js/bundle/doric-vm.js

@@ -3332,6 +3332,10 @@ __decorate$b([
     Property,
     __metadata$b("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
+__decorate$b([
+    Property,
+    __metadata$b("design:type", Object)
+], Image.prototype, "tileInset", void 0);
 __decorate$b([
     Property,
     __metadata$b("design:type", Function)

doric-js/index.d.ts

@@ -702,6 +702,12 @@ declare module 'doric/lib/src/widget/image' {
                     right: number;
                     bottom: number;
             };
+            tileInset?: {
+                    left: number;
+                    top: number;
+                    right: number;
+                    bottom: number;
+            };
             /**
                 * Called if loaded image is animated and played end.
                 */

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

@@ -82,6 +82,12 @@ export declare class Image extends View {
         right: number;
         bottom: number;
     };
+    tileInset?: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
     /**
      * Called if loaded image is animated and played end.
      */

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

@@ -129,6 +129,10 @@ __decorate([
     Property,
     __metadata("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], Image.prototype, "tileInset", void 0);
 __decorate([
     Property,
     __metadata("design:type", Function)

doric-js/src/widget/image.ts

@@ -120,6 +120,14 @@ export class Image extends View {
         bottom: number
     }
 
+    @Property
+    tileInset?: {
+        left: number,
+        top: number,
+        right: number,
+        bottom: number
+    }
+
     /**
      * Called if loaded image is animated and played end.
      */

doric-web/dist/index.js

@@ -3406,6 +3406,10 @@ __decorate$b([
     Property,
     __metadata$b("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
+__decorate$b([
+    Property,
+    __metadata$b("design:type", Object)
+], Image.prototype, "tileInset", void 0);
 __decorate$b([
     Property,
     __metadata$b("design:type", Function)