upodate flexnode settings

doric-demo/src/FlexDemo.ts

@@ -1,48 +1,60 @@
 
 import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity, flexlayout } from "doric";
-import { FlexDirection, Wrap, Justify, Align, FlexTypedValue } from "doric/lib/src/util/flexbox";
+import { FlexDirection, Wrap, Justify, Align, FlexTypedValue, OverFlow } from "doric/lib/src/util/flexbox";
 import { colors } from "./utils";
 
 @Entry
 class LayoutDemo extends Panel {
     build(root: Group) {
-        flexlayout(
+        stack(
             [
-                stack([], {
-                    flexConfig: {
-                        width: 100,
-                        height: 100,
-                    },
-                    backgroundColor: colors[0]
-                }),
-                stack([], {
-                    flexConfig: {
-                        width: 100,
-                        height: 100,
-                    },
-                    backgroundColor: colors[1],
-                }),
-                stack([], {
-                    flexConfig: {
-                        width: 100,
-                        height: 100,
-                    },
-                    backgroundColor: colors[2],
-                }),
+                scroller(
+                    flexlayout(
+                        [
+                            stack([],
+                                {
+                                    backgroundColor: colors[1],
+                                    flexConfig: {
+                                        width: 300,
+                                        height: 100,
+                                    }
+                                }),
+                            stack([],
+                                {
+                                    backgroundColor: colors[2],
+                                    flexConfig: {
+                                        width: 100,
+                                        height: 100,
+                                    }
+                                }),
+                            stack([],
+                                {
+                                    backgroundColor: colors[3],
+                                    flexConfig: {
+                                        width: 100,
+                                        height: 100,
+                                    }
+                                }),
+                        ],
+                        {
+                            flexConfig: {
+                                flexDirection: FlexDirection.COLUMN,
+                            },
+                            backgroundColor: colors[4]
+                        }),
+                    {
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.FIT,
+                            heightSpec: LayoutSpec.FIT
+                        },
+                        backgroundColor: colors[0],
+                    })
             ],
             {
-                layoutConfig: layoutConfig().fit(),
-                backgroundColor: Color.GRAY,
-                flexConfig: {
-                    flexDirection: FlexDirection.COLUMN,
-                    justifyContent: Justify.SPACE_EVENLY,
-                    alignContent: Align.CENTER,
-                    flexWrap: Wrap.WRAP,
-                    width: FlexTypedValue.Auto,
-                    height: FlexTypedValue.Auto,
-                }
+                layoutConfig: layoutConfig().just(),
+                width: 250,
+                height: 250,
             }
-        )
-            .in(root)
+        ).in(root)
     }
 }

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

@@ -34,6 +34,7 @@ - (CGSize)sizeThatFits:(CGSize)size {
 @implementation DoricFlexNode
 - (UIView *)build {
     return [[DoricFlexView new] also:^(DoricFlexView *it) {
+        it.clipsToBounds = YES;
         [it configureLayoutWithBlock:^(YGLayout *_Nonnull layout) {
             layout.isEnabled = YES;
         }];

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

@@ -38,9 +38,11 @@ - (void)setContentView:(UIView *)contentView {
 - (CGSize)sizeThatFits:(CGSize)size {
     if (self.contentView) {
         if (!self.contentView.doricLayout.resolved) {
-            [self.contentView.doricLayout apply:self.frame.size];
+            [self.contentView.doricLayout apply:size];
         }
-        return self.contentView.frame.size;
+        return CGSizeMake(
+                MIN(size.width, self.contentView.doricLayout.measuredWidth),
+                MIN(size.height, self.contentView.doricLayout.measuredHeight));
     }
     return CGSizeZero;
 }

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

@@ -878,6 +878,7 @@ var FlexLayout = /** @class */ (function (_super) {
 function flexlayout(views, config) {
     var e_4, _a;
     var ret = new FlexLayout;
+    ret.layoutConfig = layoutConfig().fit();
     try {
         for (var views_4 = __values$1(views), views_4_1 = views_4.next(); !views_4_1.done; views_4_1 = views_4.next()) {
             var v = views_4_1.value;

doric-js/bundle/doric-lib.js

@@ -654,6 +654,7 @@ class FlexLayout extends Group {
 }
 function flexlayout(views, config) {
     const ret = new FlexLayout;
+    ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }

doric-js/bundle/doric-vm.js

@@ -2113,6 +2113,7 @@ class FlexLayout extends Group {
 }
 function flexlayout(views, config) {
     const ret = new FlexLayout;
+    ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }

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

@@ -86,6 +86,7 @@ export class FlexLayout extends Group {
 }
 export function flexlayout(views, config) {
     const ret = new FlexLayout;
+    ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }

doric-js/src/widget/layouts.ts

@@ -100,6 +100,7 @@ export class FlexLayout extends Group {
 
 export function flexlayout(views: View[], config: IView) {
     const ret = new FlexLayout
+    ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
         ret.addChild(v)
     }

doric-web/dist/index.js

@@ -2171,6 +2171,7 @@ class FlexLayout extends Group {
 }
 function flexlayout(views, config) {
     const ret = new FlexLayout;
+    ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }