add gravity handle & nested layout with rectangle with height handle

doric-Qt/doric/demo/DoricDemoBridge.cpp

@@ -23,8 +23,8 @@ void DoricDemoBridge::navigate(QVariant route) {
   {
     const QUrl url(QStringLiteral("qrc:/doric/qml/view.qml"));
     view->setSource(url);
-    view->setWidth(450);
+    view->setWidth(405);
-    view->setHeight(800);
+    view->setHeight(720);
   }
 
   {
@@ -33,8 +33,8 @@ void DoricDemoBridge::navigate(QVariant route) {
     component.loadUrl(url);
     QQuickItem *quickItem = qobject_cast<QQuickItem *>(component.create());
     DoricPanel *panel = new DoricPanel(view->engine(), quickItem);
-    quickItem->setWidth(450);
+    quickItem->setWidth(405);
-    quickItem->setHeight(800);
+    quickItem->setHeight(720);
     quickItem->setParentItem(view->rootObject());
 
     panel->config(script, name, NULL);

doric-Qt/doric/qml.qrc

@@ -20,6 +20,7 @@
         <file alias="hlayout.qml">resources/hlayout.qml</file>
         <file alias="text.qml">resources/text.qml</file>
         <file alias="util.mjs">resources/util.mjs</file>
+        <file alias="gravity.mjs">resources/gravity.mjs</file>
         <file>test-layout.qml</file>
     </qresource>
 </RCC>

doric-Qt/doric/resources/gravity.mjs

@@ -0,0 +1,32 @@
+// gravity.mjs
+export function enumerate() {
+    const SPECIFIED = 1;
+    const START = 1 << 1;
+    const END = 1 << 2;
+    const SHIFT_X = 0;
+    const SHIFT_Y = 4;
+    const LEFT = (START | SPECIFIED) << SHIFT_X;
+    const RIGHT = (END | SPECIFIED) << SHIFT_X;
+    const TOP = (START | SPECIFIED) << SHIFT_Y;
+    const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
+    const CENTER_X = SPECIFIED << SHIFT_X;
+    const CENTER_Y = SPECIFIED << SHIFT_Y;
+    const CENTER = CENTER_X | CENTER_Y;
+
+    var gravity = {
+        SPECIFIED,
+        START,
+        END,
+        SHIFT_X,
+        SHIFT_Y,
+        LEFT,
+        RIGHT,
+        TOP,
+        BOTTOM,
+        CENTER_X,
+        CENTER_Y,
+        CENTER
+    }
+
+    return gravity
+}

doric-Qt/doric/resources/hlayout.qml

@@ -3,16 +3,18 @@ import QtQuick.Controls 2.5
 import QtQuick.Layouts 1.15
 
 import "util.mjs" as Util
+import "gravity.mjs" as Gravity
 
 Rectangle {
+    property var tag: "HLayout"
+
     property var uuid: Util.uuidv4()
+
     property int widthSpec: 0
     property int heightSpec: 0
     property int childrenRectWidth: childrenRect.width
     property int childrenRectHeight: childrenRect.height
 
-    property var tag: "HLayout"
-
     onWidthChanged: () => {
         console.log(tag, uuid + " onWidthChanged: " + this.width)
     }
@@ -24,8 +26,10 @@ Rectangle {
     onWidthSpecChanged: () => {
         console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
         console.log(tag, uuid + " parent width: " + parent.width)
+
         if (this.widthSpec === 2) {
             this.width = parent.width
+//            children[0].width = parent.width
         }
     }
 
@@ -35,6 +39,7 @@ Rectangle {
 
         if (this.heightSpec === 2) {
             this.height = parent.height
+            children[0].height = parent.height
         }
     }
 
@@ -56,6 +61,19 @@ Rectangle {
     color: 'transparent'
 
     RowLayout {
+        property int gravity: 0
+
         spacing: 0
+
+        onChildrenChanged: () => {
+            console.log(tag, uuid + " gravity: " + gravity)
+            for (var i = 0;i !== children.length;i++) {
+                switch(this.gravity) {
+                    case Gravity.enumerate().CENTER_X:
+                        children[i].Layout.alignment = Qt.AlignHCenter
+                        break
+                }
+            }
+        }
     }
 }

doric-Qt/doric/resources/vlayout.qml

@@ -3,16 +3,18 @@ import QtQuick.Controls 2.5
 import QtQuick.Layouts 1.15
 
 import "util.mjs" as Util
+import "gravity.mjs" as Gravity
 
 Rectangle {
+    property var tag: "VLayout"
+
     property var uuid: Util.uuidv4()
+
     property int widthSpec: 0
     property int heightSpec: 0
     property int childrenRectWidth: childrenRect.width
     property int childrenRectHeight: childrenRect.height
 
-    property var tag: "VLayout"
-
     onWidthChanged: () => {
         console.log(tag, uuid + " onWidthChanged: " + this.width)
     }
@@ -24,8 +26,10 @@ Rectangle {
     onWidthSpecChanged: () => {
         console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
         console.log(tag, uuid + " parent width: " + parent.width)
+
         if (this.widthSpec === 2) {
             this.width = parent.width
+            children[0].width = parent.width
         }
     }
 
@@ -35,6 +39,7 @@ Rectangle {
 
         if (this.heightSpec === 2) {
             this.height = parent.height
+//            children[0].height = parent.height
         }
     }
 
@@ -56,6 +61,20 @@ Rectangle {
     color: 'transparent'
 
     ColumnLayout {
+        property int gravity: 0
+
         spacing: 0
+
+        onChildrenChanged: () => {
+            console.log(tag, uuid + " gravity: " + gravity)
+
+            for (var i = 0;i !== children.length;i++) {
+                switch(this.gravity) {
+                    case Gravity.enumerate().CENTER_X:
+                        children[i].Layout.alignment = Qt.AlignHCenter
+                        break
+                }
+            }
+        }
     }
 }

doric-Qt/doric/shader/DoricHLayoutNode.cpp

@@ -18,11 +18,7 @@ void DoricHLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
   if (name == "space") {
     view->childItems().at(0)->setProperty("spacing", prop.toInt());
   } else if (name == "gravity") {
-    switch (prop.toInt()) {
+    view->childItems().at(0)->setProperty("gravity", prop.toInt());
-    case 1:
-      view->setProperty("alignItems", "center");
-      break;
-    }
   } else {
     DoricGroupNode::blend(view, name, prop);
   }

doric-Qt/doric/shader/DoricVLayoutNode.cpp

@@ -18,11 +18,7 @@ void DoricVLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
   if (name == "space") {
     view->childItems().at(0)->setProperty("spacing", prop.toInt());
   } else if (name == "gravity") {
-    switch (prop.toInt()) {
+    view->childItems().at(0)->setProperty("gravity", prop.toInt());
-    case 1:
-      view->setProperty("alignItems", "center");
-      break;
-    }
   } else {
     DoricGroupNode::blend(view, name, prop);
   }

doric-Qt/doric/test-layout.qml

@@ -14,18 +14,22 @@ ApplicationWindow {
         height: childrenRect.height
 
         ColumnLayout {
+            property int gravity: 0
+            onGravityChanged: {
+                console.log(children[0].Layout.alignment)
+                children[0].Layout.alignment = 1
+            }
+
             spacing: 0
-            width: 400
+            height: 600
 
             Rectangle {
-                Layout.alignment: Qt.AlignHCenter
                 width: 100
                 height: 100
                 color: 'black'
             }
 
             Rectangle {
-                Layout.alignment: Qt.AlignHCenter
                 width: 100
                 height: 100
                 color: 'yellow'