Merge pull request #12 from UnityTech/image

Flex row column

Assets/UIWidgets/Tests/Widgets.cs

 using UIWidgets.painting;
 using UIWidgets.editor;
 using UIWidgets.widgets;
+using System.Collections.Generic;
+using UIWidgets.rendering;
+using System;
+using System.Linq;
 
 namespace UIWidgets.Tests {
     public class Widgets : EditorWindow {
 
-        private Widget root;
+        private readonly Func<Widget>[] _options;
+
+        private readonly string[] _optionStrings;
-        private Widget image;
+        private int _selected;
+        
+        [NonSerialized] private bool hasInvoked = false;
+            this._options = new Func<Widget>[] {
+                this.container,
+                this.flexRow,
+                this.flexColumn,
+            };
+            this._optionStrings = this._options.Select(x => x.Method.Name).ToArray();
+            this._selected = 0;
+
-            this.image = new widgets.Image(
-                "https://tse3.mm.bing.net/th?id=OIP.XOAIpvR1kh-CzISe_Nj9GgHaHs&pid=Api",
-                width: 100,
-                height: 100
-            );
-            this.root = new widgets.Container(
-                width: 200,
-                height: 200,
-                margin: EdgeInsets.all(30.0),
-                padding: EdgeInsets.all(15.0),
-                color: ui.Color.fromARGB(255, 244, 190, 85),
-                child: image
-            );
+            var selected = EditorGUILayout.Popup("test case", this._selected, this._optionStrings);
+            if (selected != this._selected || !this.hasInvoked) {
+                this._selected = selected;
+                this.hasInvoked = true;
+
+                var rootWidget = this._options[this._selected]();
+                
+                this.windowAdapter.attachRootWidget(rootWidget);
+            }
+
             if (this.windowAdapter != null) {
                 this.windowAdapter.OnGUI();
             }
             this.paintingBinding = new PaintingBinding(null);
             paintingBinding.initInstances();
             this.windowAdapter = new WindowAdapter(this);
-            this.windowAdapter.attachRootWidget(root);
+        }
+
+        Widget flexRow() {
+            var image = new widgets.Image(
+                "https://tse3.mm.bing.net/th?id=OIP.XOAIpvR1kh-CzISe_Nj9GgHaHs&pid=Api",
+                width: 100,
+                height: 100
+            );
+            List<Widget> rowImages = new List<Widget>();
+            rowImages.Add(image);
+            rowImages.Add(image);
+            rowImages.Add(image);
+            rowImages.Add(image);
+
+            var row = new widgets.Row(
+                textDirection: null,
+                textBaseline: null,
+                key: null,
+                mainAxisAlignment: MainAxisAlignment.start,
+                mainAxisSize: MainAxisSize.max,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                verticalDirection: VerticalDirection.down,
+                children: rowImages
+            );
+
+            return row;
+        }
+        
+        Widget flexColumn() {
+            var image = new widgets.Image(
+                "https://tse3.mm.bing.net/th?id=OIP.XOAIpvR1kh-CzISe_Nj9GgHaHs&pid=Api",
+                width: 100,
+                height: 100
+            );
+            List<Widget> columnImages = new List<Widget>();
+            columnImages.Add(image);
+            columnImages.Add(image);
+            columnImages.Add(image);
+
+            var column = new widgets.Column(
+                textDirection: null,
+                textBaseline: null,
+                key: null,
+                mainAxisAlignment: MainAxisAlignment.start,
+                mainAxisSize: MainAxisSize.max,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                verticalDirection: VerticalDirection.down,
+                children: columnImages
+            );
+
+            return column;
+        }
+
+        Widget container() {
+            var image = new widgets.Image(
+                "https://tse3.mm.bing.net/th?id=OIP.XOAIpvR1kh-CzISe_Nj9GgHaHs&pid=Api",
+                width: 100,
+                height: 100,
+                repeat: ImageRepeat.repeatX
+            );
+            var container = new widgets.Container(
+                width: 200,
+                height: 200,
+                margin: EdgeInsets.all(30.0),
+                padding: EdgeInsets.all(15.0),
+                color: ui.Color.fromARGB(255, 244, 190, 85),
+                child: image
+            );
+
+            return container;
         }
     }
 }

Assets/UIWidgets/painting/decoration_image.cs

 using System;
 using UIWidgets.ui;
 using System.Collections.Generic;
+using UnityEngine;
+using Canvas = UIWidgets.ui.Canvas;
+using Rect = UIWidgets.ui.Rect;
 
 namespace UIWidgets.painting {
     /// How to paint any portions of a box not covered by an image.
     }
 
     public static class DecorationImageUtil {
-        public static void paintImage(Canvas canvas, Rect rect, ui.Image image) {
-            canvas.drawImageRect(Rect.fromLTWH(0, 0, 100, 100), rect, new Paint(), image);
-        }
-        // todo refine logic below, no just draw in Rect(0, 0, 100, 100) for testing widgets
-        /*
-        public static void paintImage(Canvas canvas, Rect rect, ui.Image image, BoxFit fit, Rect centerSlice,
+        public static void paintImage(
+            Canvas canvas,
+            Rect rect,
+            ui.Image image,
+//            ColorFilter colorFileter,
+            BoxFit fit,
+            Rect centerSlice,
-            ImageRepeat repeat = ImageRepeat.noRepeat) {
+            ImageRepeat repeat = ImageRepeat.noRepeat
+//            bool flipHorizontally = false
+        ) {
             if (rect.isEmpty)
                 return;
             alignment = alignment ?? Alignment.center;
 
             if (needSave)
                 canvas.restore();
-        }*/
+        }
 
         public static List<Rect> _generateImageTileRects(Rect outputRect, Rect fundamentalRect,
             ImageRepeat repeat) {

Assets/UIWidgets/rendering/image.cs

 using UIWidgets.ui;
 using UIWidgets.painting;
+using UnityEngine;
+using Color = UIWidgets.ui.Color;
+using Rect = UIWidgets.ui.Rect;
 
 namespace UIWidgets.rendering {
     class RenderImage : RenderBox {
             constraints = BoxConstraints.tightFor(
                 _width,
                 _height
-            );
-            constraints = constraints.enforce(constraints);
+            ).enforce(constraints);
 
             if (_image == null)
                 return constraints.smallest;
             DecorationImageUtil.paintImage(
                 context.canvas,
                 offset & size,
-                _image
-//                _fit,
-//                _centerSlice,
-//                _resolvedAlignment,
-//                _repeat
+                _image,
+                _fit,
+                _centerSlice,
+                _resolvedAlignment,
+                _repeat
             );
         }
     }

Assets/UIWidgets/rendering/proxy_box.cs

 
         public override double computeMaxIntrinsicWidth(double height) {
             if (this._additionalConstraints.hasBoundedWidth && this._additionalConstraints.hasTightWidth) {
-                return this._additionalConstraints.maxWidth;
+                return this._additionalConstraints.minWidth;
             }
 
             double width = base.computeMaxIntrinsicWidth(height);

Assets/UIWidgets/ui/painting/canvas_impl.cs

         }
 
         public void drawImageRect(Rect src, Rect dst, Paint paint, Image image) {
-            if (image != null) {
-                Texture2D _texture = new Texture2D(0, 0);
-                _texture.LoadImage(image.rawData);
-                Graphics.DrawTexture(dst.toRect(), _texture);
+            if (image != null && image.texture != null) {
+                Graphics.DrawTexture(dst.toRect(), image.texture);
             }
         }
 

Assets/UIWidgets/ui/painting/image.cs

-using System;
-using System.Collections.Generic;
-using UIWidgets.painting;
 using UnityEngine;
 
 namespace UIWidgets.ui
-        public Image(byte[] raw, int height = 100, int width = 100) {
-            this.rawData = raw;
-            this.height = height;
-            this.width = width;
+        public Image(byte[] raw) {
+            rawData = raw;
-        public int height;
-        public int width;
+        public int height {
+            get {
+                return texture != null ? texture.height : 0;
+            }
+        }
+
+        public int width {
+            get {
+                return texture != null ? texture.width : 0;
+            }
+        }
+
+        public Texture2D texture {
+            get {
+                if (_texture == null && rawData.Length != 0) {
+                    _texture = new Texture2D(2, 2);
+                    _texture.LoadImage(rawData);
+                }
+
+                return _texture;
+            }
+        }
+
+
+        private Texture2D _texture;
     }
 }

Assets/UIWidgets/ui/painting/painting.cs

         }
     }
 
-    public class ColorFilter {
-        public ColorFilter(Color color, BlendMode blendMode) {
-            _color = color;
-            _blendMode = blendMode;
-        }
-
-        Color _color;
-        BlendMode _blendMode;
-    }
+//    public class ColorFilter {
+//        public ColorFilter(Color color, BlendMode blendMode) {
+//            _color = color;
+//            _blendMode = blendMode;
+//        }
+//
+//        Color _color;
+//        BlendMode _blendMode;
+//    }
 
     public enum BlendMode {
         None = 0, // explicitly assign zero to make it more clear

Assets/UIWidgets/widgets/basic.cs

         }
     }
 
+    public abstract class Flex : MultiChildRenderObjectWidget {
+        public Flex(
+            Axis direction,
+            TextDirection? textDirection,
+            TextBaseline? textBaseline,
+            Key key = null,
+            MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
+            MainAxisSize mainAxisSize = MainAxisSize.max,
+            CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
+            VerticalDirection verticalDirection = VerticalDirection.down,
+            List<Widget> children = null
+        ) : base(key, children) {
+            this.direction = direction;
+            this.mainAxisAlignment = mainAxisAlignment;
+            this.mainAxisSize = mainAxisSize;
+            this.crossAxisAlignment = crossAxisAlignment;
+            this.textDirection = textDirection;
+            this.verticalDirection = verticalDirection;
+            this.textBaseline = textBaseline;
+        }
+
+        public Axis direction;
+        public MainAxisAlignment mainAxisAlignment;
+        public MainAxisSize mainAxisSize;
+        public CrossAxisAlignment crossAxisAlignment;
+        public TextDirection? textDirection;
+        public VerticalDirection verticalDirection;
+        public TextBaseline? textBaseline;
+
+        private bool _needTextDirection {
+            get {
+                D.assert(direction != null);
+                switch (direction) {
+                    case Axis.horizontal:
+                        return true;
+                    case Axis.vertical:
+                        return (this.crossAxisAlignment == CrossAxisAlignment.start ||
+                                this.crossAxisAlignment == CrossAxisAlignment.end);
+                }
+
+                return false;
+            }
+        }
+
+        public TextDirection getEffectiveTextDirection(BuildContext context) {
+            return textDirection ?? (_needTextDirection ? Directionality.of(context) : TextDirection.ltr);
+        }
+
+        public override RenderObject createRenderObject(BuildContext context) {
+            return new RenderFlex(
+                direction: direction,
+                mainAxisAlignment: mainAxisAlignment,
+                mainAxisSize: mainAxisSize,
+                crossAxisAlignment: crossAxisAlignment,
+                textDirection: getEffectiveTextDirection(context),
+                verticalDirection: verticalDirection,
+                textBaseline: textBaseline ?? TextBaseline.alphabetic
+            );
+        }
+
+        public override void updateRenderObject(BuildContext context, RenderObject renderObject) {
+            ((RenderFlex) renderObject).direction = this.direction;
+            ((RenderFlex) renderObject).mainAxisAlignment = this.mainAxisAlignment;
+            ((RenderFlex) renderObject).mainAxisSize = this.mainAxisSize;
+            ((RenderFlex) renderObject).crossAxisAlignment = this.crossAxisAlignment;
+            ((RenderFlex) renderObject).textDirection = this.textDirection ?? TextDirection.ltr;
+            ((RenderFlex) renderObject).verticalDirection = this.verticalDirection;
+            ((RenderFlex) renderObject).textBaseline = this.textBaseline ?? TextBaseline.alphabetic;
+        }
+    }
+
+    public class Row : Flex {
+        public Row(
+            TextDirection? textDirection,
+            TextBaseline? textBaseline,
+            Key key = null,
+            MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
+            MainAxisSize mainAxisSize = MainAxisSize.max,
+            CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
+            VerticalDirection verticalDirection = VerticalDirection.down,
+            List<Widget> children = null
+        ) : base(
+            children: children,
+            key: key,
+            direction: Axis.horizontal,
+            textDirection: textDirection,
+            textBaseline: textBaseline,
+            mainAxisAlignment: mainAxisAlignment,
+            mainAxisSize: mainAxisSize,
+            crossAxisAlignment: crossAxisAlignment,
+            verticalDirection: verticalDirection
+        ) {}
+    }
+    
+    public class Column : Flex {
+        public Column(
+            TextDirection? textDirection,
+            TextBaseline? textBaseline,
+            Key key = null,
+            MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
+            MainAxisSize mainAxisSize = MainAxisSize.max,
+            CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
+            VerticalDirection verticalDirection = VerticalDirection.down,
+            List<Widget> children = null
+        ) : base(
+            children: children,
+            key: key,
+            direction: Axis.vertical,
+            textDirection: textDirection,
+            textBaseline: textBaseline,
+            mainAxisAlignment: mainAxisAlignment,
+            mainAxisSize: mainAxisSize,
+            crossAxisAlignment: crossAxisAlignment,
+            verticalDirection: verticalDirection
+        ) {}
+    }
+
     public class Padding : SingleChildRenderObjectWidget {
         public Padding(
             EdgeInsets padding,

Assets/UIWidgets/widgets/framework.cs

             base.mount(parent, newSlot);
             this._children = new List<Element>(this.widget.children.Count);
             Element previousChild = null;
-            for (int i = 0; i < this._children.Count; i += 1) {
+            for (int i = 0; i < this._children.Capacity; i += 1) {
-                this._children[i] = newChild;
+                this._children.Add(newChild);
                 previousChild = newChild;
             }
         }