Layout add minWidth minHeight maxWidth maxHeight

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

@@ -16,7 +16,6 @@
 package pub.doric.shader;
 
 import android.text.TextUtils;
-import android.util.Log;
 
 import com.github.pengfeizhou.jscore.JSONBuilder;
 import com.github.pengfeizhou.jscore.JSObject;

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

@@ -92,54 +92,7 @@ public abstract class SuperNode<V extends View> extends ViewNode<V> {
     protected abstract void blendSubNode(JSObject subProperties);
 
     protected void blendSubLayoutConfig(ViewNode viewNode, JSObject jsObject) {
-        JSValue margin = jsObject.getProperty("margin");
+        viewNode.blendLayoutConfig(jsObject);
-        JSValue widthSpec = jsObject.getProperty("widthSpec");
-        JSValue heightSpec = jsObject.getProperty("heightSpec");
-        ViewGroup.LayoutParams layoutParams = viewNode.getLayoutParams();
-        if (widthSpec.isNumber()) {
-            switch (widthSpec.asNumber().toInt()) {
-                case 1:
-                    layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT;
-                    break;
-                case 2:
-                    layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
-                    break;
-                default:
-                    layoutParams.width = Math.max(0, layoutParams.width);
-                    break;
-            }
-        }
-        if (heightSpec.isNumber()) {
-            switch (heightSpec.asNumber().toInt()) {
-                case 1:
-                    layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
-                    break;
-                case 2:
-                    layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
-                    break;
-                default:
-                    layoutParams.height = Math.max(0, layoutParams.height);
-                    break;
-            }
-        }
-        if (margin.isObject() && layoutParams instanceof ViewGroup.MarginLayoutParams) {
-            JSValue topVal = margin.asObject().getProperty("top");
-            if (topVal.isNumber()) {
-                ((ViewGroup.MarginLayoutParams) layoutParams).topMargin = DoricUtils.dp2px(topVal.asNumber().toFloat());
-            }
-            JSValue leftVal = margin.asObject().getProperty("left");
-            if (leftVal.isNumber()) {
-                ((ViewGroup.MarginLayoutParams) layoutParams).leftMargin = DoricUtils.dp2px(leftVal.asNumber().toFloat());
-            }
-            JSValue rightVal = margin.asObject().getProperty("right");
-            if (rightVal.isNumber()) {
-                ((ViewGroup.MarginLayoutParams) layoutParams).rightMargin = DoricUtils.dp2px(rightVal.asNumber().toFloat());
-            }
-            JSValue bottomVal = margin.asObject().getProperty("bottom");
-            if (bottomVal.isNumber()) {
-                ((ViewGroup.MarginLayoutParams) layoutParams).bottomMargin = DoricUtils.dp2px(bottomVal.asNumber().toFloat());
-            }
-        }
     }
 
     private void mixin(JSObject src, JSObject target) {

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

@@ -37,8 +37,6 @@ import android.widget.LinearLayout;
 import androidx.annotation.NonNull;
 import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
 
-import com.facebook.yoga.YogaNode;
-import com.facebook.yoga.android.YogaLayout;
 import com.github.pengfeizhou.jscore.JSArray;
 import com.github.pengfeizhou.jscore.JSDecoder;
 import com.github.pengfeizhou.jscore.JSONBuilder;
@@ -55,7 +53,6 @@ import pub.doric.DoricRegistry;
 import pub.doric.async.AsyncResult;
 import pub.doric.extension.bridge.DoricMethod;
 import pub.doric.extension.bridge.DoricPromise;
-import pub.doric.shader.flex.FlexNode;
 import pub.doric.utils.DoricConstant;
 import pub.doric.utils.DoricContextHolder;
 import pub.doric.utils.DoricLog;
@@ -531,7 +528,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
         );
     }
 
-    private void blendLayoutConfig(JSObject jsObject) {
+    protected void blendLayoutConfig(JSObject jsObject) {
         JSValue margin = jsObject.getProperty("margin");
         JSValue widthSpec = jsObject.getProperty("widthSpec");
         JSValue heightSpec = jsObject.getProperty("heightSpec");
@@ -584,6 +581,14 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
         if (jsValue.isNumber() && layoutParams instanceof FrameLayout.LayoutParams) {
             ((FrameLayout.LayoutParams) layoutParams).gravity = jsValue.asNumber().toInt();
         }
+        JSValue minWidthValue = jsObject.getProperty("minWidth");
+        if (minWidthValue.isNumber()) {
+            mView.setMinimumWidth(DoricUtils.dp2px(minWidthValue.asNumber().toFloat()));
+        }
+        JSValue minHeightValue = jsObject.getProperty("minHeight");
+        if (minHeightValue.isNumber()) {
+            mView.setMinimumHeight(DoricUtils.dp2px(minHeightValue.asNumber().toFloat()));
+        }
     }
 
     protected boolean isAnimating() {

doric-demo/src/FlexDemo.ts

@@ -15,7 +15,7 @@ class LayoutDemo extends Panel {
                                 {
                                     backgroundColor: colors[1],
                                     flexConfig: {
-                                        width: 300,
+                                        width: 500,
                                         height: 100,
                                     }
                                 }),
@@ -27,71 +27,77 @@ class LayoutDemo extends Panel {
                                         height: 100,
                                     }
                                 }),
-                            stack([],
+                            // stack([],
-                                {
+                            //     {
-                                    backgroundColor: colors[3],
+                            //         backgroundColor: colors[3],
-                                    flexConfig: {
+                            //         flexConfig: {
-                                        width: 100,
+                            //             width: 500,
-                                        height: 100,
+                            //             height: 300,
-                                    }
+                            //         }
-                                }),
+                            //     }),
+                            // stack([],
+                            //     {
+                            //         backgroundColor: colors[4],
+                            //         flexConfig: {
+                            //             width: 500,
+                            //             height: 500,
+                            //         }
+                            //     }),
                         ],
                         {
                             flexConfig: {
                                 flexDirection: FlexDirection.COLUMN,
                             },
-                            backgroundColor: colors[4]
+                            backgroundColor: colors[4].alpha(0.1)
                         }),
                     {
                         layoutConfig: {
                             widthSpec: LayoutSpec.FIT,
-                            heightSpec: LayoutSpec.FIT
+                            heightSpec: LayoutSpec.FIT,
+                            minHeight: 300,
+                            maxHeight: 300,
                         },
-                        backgroundColor: colors[0],
+                        backgroundColor: colors[0].alpha(0.3),
                     })
             ],
             {
-                layoutConfig: layoutConfig().just(),
+                layoutConfig: layoutConfig().fit(),
-                width: 250,
-                height: 250,
             }
-        )
+        ).in(root)
-        //.in(root)
+        // flexScroller(
-        flexScroller(
+        //     [
-            [
+        //         stack([],
-                stack([],
+        //             {
-                    {
+        //                 backgroundColor: colors[1],
-                        backgroundColor: colors[1],
+        //                 flexConfig: {
-                        flexConfig: {
+        //                     width: 500,
-                            width: 500,
+        //                     height: 100,
-                            height: 100,
+        //                 }
-                        }
+        //             }),
-                    }),
+        //         stack([],
-                stack([],
+        //             {
-                    {
+        //                 backgroundColor: colors[2],
-                        backgroundColor: colors[2],
+        //                 flexConfig: {
-                        flexConfig: {
+        //                     width: 100,
-                            width: 100,
+        //                     height: 300,
-                            height: 100,
+        //                 }
-                        }
+        //             }),
-                    }),
+        //         stack([],
-                stack([],
+        //             {
-                    {
+        //                 backgroundColor: colors[3],
-                        backgroundColor: colors[3],
+        //                 flexConfig: {
-                        flexConfig: {
+        //                     width: 100,
-                            width: 100,
+        //                     height: 100,
-                            height: 100,
+        //                 }
-                        }
+        //             }),
-                    }),
+        //     ],
-            ],
+        //     {
-            {
+        //         backgroundColor: Color.GRAY.alpha(0.3),
-                backgroundColor: Color.GRAY.alpha(0.3),
+        //         layoutConfig: layoutConfig().fit(),
-                layoutConfig: layoutConfig().just(),
+        //         flexConfig: {
-                width: 300,
+        //             maxWidth: 300,
-                height: 300,
+        //             maxHeight: 300,
-                flexConfig: {
+        //         },
-                    overFlow: OverFlow.HIDDEN,
+        //     })//.in(root)
-                }
-            }).in(root)
     }
 }

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

@@ -104,6 +104,15 @@ - (void)measure:(CGSize)targetSize {
             width - self.paddingLeft - self.paddingRight,
             height - self.paddingTop - self.paddingBottom)];
 
+    if ([self restrainSize]) {
+        [self measureContent:CGSizeMake(
+                self.measuredWidth - self.paddingLeft - self.paddingRight,
+                self.measuredHeight - self.paddingTop - self.paddingBottom)];
+    }
+    [self restrainSize];
+}
+
+- (BOOL)restrainSize {
     BOOL needRemeasure = NO;
     if (self.measuredWidth > self.maxWidth) {
         self.measuredWidth = self.maxWidth;
@@ -121,11 +130,7 @@ - (void)measure:(CGSize)targetSize {
         self.measuredHeight = self.minHeight;
         needRemeasure = YES;
     }
-    if (needRemeasure) {
+    return needRemeasure;
-        [self measureContent:CGSizeMake(
-                self.measuredWidth - self.paddingLeft - self.paddingRight,
-                self.measuredHeight - self.paddingTop - self.paddingBottom)];
-    }
 }
 
 - (void)measureContent:(CGSize)targetSize {

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

@@ -430,6 +430,18 @@ - (void)blendLayoutConfig:(NSDictionary *)params {
     [params[@"weight"] also:^(NSNumber *it) {
         self.view.doricLayout.weight = (DoricGravity) [it integerValue];
     }];
+    [params[@"maxWidth"] also:^(NSNumber *it) {
+        self.view.doricLayout.maxWidth = (DoricGravity) [it integerValue];
+    }];
+    [params[@"maxHeight"] also:^(NSNumber *it) {
+        self.view.doricLayout.maxHeight = (DoricGravity) [it integerValue];
+    }];
+    [params[@"minWidth"] also:^(NSNumber *it) {
+           self.view.doricLayout.minWidth = (DoricGravity) [it integerValue];
+    }];
+    [params[@"minHeight"] also:^(NSNumber *it) {
+           self.view.doricLayout.minHeight = (DoricGravity) [it integerValue];
+    }];
 }
 
 - (NSDictionary *)transformation {

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

@@ -705,6 +705,22 @@ var LayoutConfigImpl = /** @class */ (function () {
         this.weight = w;
         return this;
     };
+    LayoutConfigImpl.prototype.configMaxWidth = function (v) {
+        this.maxWidth = v;
+        return this;
+    };
+    LayoutConfigImpl.prototype.configMaxHeight = function (v) {
+        this.maxHeight = v;
+        return this;
+    };
+    LayoutConfigImpl.prototype.configMinWidth = function (v) {
+        this.minWidth = v;
+        return this;
+    };
+    LayoutConfigImpl.prototype.configMinHeight = function (v) {
+        this.minHeight = v;
+        return this;
+    };
     LayoutConfigImpl.prototype.toModel = function () {
         return {
             widthSpec: this.widthSpec,

doric-js/bundle/doric-lib.js

@@ -570,6 +570,22 @@ class LayoutConfigImpl {
         this.weight = w;
         return this;
     }
+    configMaxWidth(v) {
+        this.maxWidth = v;
+        return this;
+    }
+    configMaxHeight(v) {
+        this.maxHeight = v;
+        return this;
+    }
+    configMinWidth(v) {
+        this.minWidth = v;
+        return this;
+    }
+    configMinHeight(v) {
+        this.minHeight = v;
+        return this;
+    }
     toModel() {
         return {
             widthSpec: this.widthSpec,

doric-js/bundle/doric-vm.js

@@ -2029,6 +2029,22 @@ class LayoutConfigImpl {
         this.weight = w;
         return this;
     }
+    configMaxWidth(v) {
+        this.maxWidth = v;
+        return this;
+    }
+    configMaxHeight(v) {
+        this.maxHeight = v;
+        return this;
+    }
+    configMinWidth(v) {
+        this.minWidth = v;
+        return this;
+    }
+    configMinHeight(v) {
+        this.minHeight = v;
+        return this;
+    }
     toModel() {
         return {
             widthSpec: this.widthSpec,

doric-js/index.d.ts

@@ -1197,6 +1197,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
             };
             alignment?: Gravity;
             weight?: number;
+            maxWidth?: number;
+            maxHeight?: number;
+            minWidth?: number;
+            minHeight?: number;
     }
     export class LayoutConfigImpl implements LayoutConfig, Modeling {
             widthSpec?: LayoutSpec;
@@ -1209,6 +1213,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
             };
             alignment?: Gravity;
             weight?: number;
+            maxWidth?: number;
+            maxHeight?: number;
+            minWidth?: number;
+            minHeight?: number;
             fit(): this;
             most(): this;
             just(): this;
@@ -1222,6 +1230,10 @@ declare module 'doric/lib/src/util/layoutconfig' {
             }): this;
             configAlignment(a: Gravity): this;
             configWeight(w: number): this;
+            configMaxWidth(v: number): this;
+            configMaxHeight(v: number): this;
+            configMinWidth(v: number): this;
+            configMinHeight(v: number): this;
             toModel(): {
                     widthSpec: LayoutSpec | undefined;
                     heightSpec: LayoutSpec | undefined;

doric-js/lib/src/util/layoutconfig.d.ts

@@ -25,6 +25,10 @@ export interface LayoutConfig {
     };
     alignment?: Gravity;
     weight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
 }
 export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
     widthSpec?: LayoutSpec;
@@ -37,6 +41,10 @@ export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
     };
     alignment?: Gravity;
     weight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
     fit(): this;
     most(): this;
     just(): this;
@@ -50,6 +58,10 @@ export declare class LayoutConfigImpl implements LayoutConfig, Modeling {
     }): this;
     configAlignment(a: Gravity): this;
     configWeight(w: number): this;
+    configMaxWidth(v: number): this;
+    configMaxHeight(v: number): this;
+    configMinWidth(v: number): this;
+    configMinHeight(v: number): this;
     toModel(): {
         widthSpec: LayoutSpec | undefined;
         heightSpec: LayoutSpec | undefined;

doric-js/lib/src/util/layoutconfig.js

@@ -49,6 +49,22 @@ export class LayoutConfigImpl {
         this.weight = w;
         return this;
     }
+    configMaxWidth(v) {
+        this.maxWidth = v;
+        return this;
+    }
+    configMaxHeight(v) {
+        this.maxHeight = v;
+        return this;
+    }
+    configMinWidth(v) {
+        this.minWidth = v;
+        return this;
+    }
+    configMinHeight(v) {
+        this.minHeight = v;
+        return this;
+    }
     toModel() {
         return {
             widthSpec: this.widthSpec,

doric-js/src/util/layoutconfig.ts

@@ -43,6 +43,12 @@ export interface LayoutConfig {
     alignment?: Gravity
     //Only affective in VLayout or HLayout
     weight?: number
+
+    maxWidth?: number
+    maxHeight?: number
+
+    minWidth?: number
+    minHeight?: number
 }
 
 export class LayoutConfigImpl implements LayoutConfig, Modeling {
@@ -58,6 +64,12 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
     //Only affective in VLayout or HLayout
     weight?: number
 
+    maxWidth?: number
+    maxHeight?: number
+
+    minWidth?: number
+    minHeight?: number
+
     fit() {
         this.widthSpec = LayoutSpec.FIT
         this.heightSpec = LayoutSpec.FIT
@@ -106,6 +118,26 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
         return this
     }
 
+    configMaxWidth(v: number) {
+        this.maxWidth = v
+        return this
+    }
+
+    configMaxHeight(v: number) {
+        this.maxHeight = v
+        return this
+    }
+
+    configMinWidth(v: number) {
+        this.minWidth = v
+        return this
+    }
+
+    configMinHeight(v: number) {
+        this.minHeight = v
+        return this
+    }
+
     toModel() {
         return {
             widthSpec: this.widthSpec,

doric-web/dist/index.js

@@ -2087,6 +2087,22 @@ class LayoutConfigImpl {
         this.weight = w;
         return this;
     }
+    configMaxWidth(v) {
+        this.maxWidth = v;
+        return this;
+    }
+    configMaxHeight(v) {
+        this.maxHeight = v;
+        return this;
+    }
+    configMinWidth(v) {
+        this.minWidth = v;
+        return this;
+    }
+    configMinHeight(v) {
+        this.minHeight = v;
+        return this;
+    }
     toModel() {
         return {
             widthSpec: this.widthSpec,