qml frontend first effort

main.cpp

@@ -7,14 +7,23 @@
 using namespace Quite::Objects;
 using namespace Quite::Objects::Flex;
 
-int main(int argc, char *argv[])
-{
+/*****************************************************************************/
+
+int main(int argc, char *argv[]) {
     QGuiApplication app(argc, argv);
 
-    qmlRegisterType<FlexBackend>("com.tripolskypetr.quitejs", 1, 0, "FlexBackend");
+    qmlRegisterType<FlexBackend>(
+        "com.tripolskypetr.quitejs",
+        1, 0,
+        "FlexBackend"
+    );
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
+    engine.load(QUrl(
+        QStringLiteral("qrc:/qml/main.qml"))
+    );
 
     return app.exec();
 }
+
+/*****************************************************************************/

objects/flex/flexnode.cpp

@@ -28,26 +28,19 @@ YGNodeRef FlexNode::getNode() {
 
 /*---------------------------------------------------------------------------*/
 
-void FlexNode::setChildren(QVariant node) {
+void FlexNode::appendChildren(QVariant node) {
     FlexNode* object = qvariant_cast<FlexNode*>(node);
+    std::vector<YGNodeRef> tmp;
     if (object==nullptr) {
         qCritical() << "FlexNode setChildren child not flexnode*";
     } else {
-        object->setParent(this);
-        std::vector<YGNodeRef> child = { object->getNode() };
-        YGNodeSetChildren(this->node,child);
-    }
-}
-
-/*---------------------------------------------------------------------------*/
-
-void FlexNode::removeChildren(QVariant node) {
-    FlexNode* object = qvariant_cast<FlexNode*>(node);
-    if (object==nullptr) {
-        qCritical() << "FlexNode removeChildren child not flexnode*";
-    } else {
-        object->setParent(nullptr);
-        YGNodeRemoveChild(this->node, object->getNode());
+        child.append(object);
+        QLinkedList<FlexNode*>::iterator i;
+        for (i = child.begin(); i != child.end(); i++) {
+            FlexNode* it = (*i);
+            tmp.push_back(it->getNode());
+        }
+        YGNodeSetChildren(this->node,tmp);
     }
 }
 

objects/flex/flexnode.h

@@ -4,6 +4,7 @@
 #include <QtDebug>
 #include <QObject>
 #include <QVariant>
+#include <QLinkedList>
 #include <QSharedPointer>
 
 #include "objects/flex/flexconfig.h"
@@ -33,7 +34,7 @@ class FlexNode : public QObject {
 
   Q_PROPERTY(int paddingTop READ getPaddingTop WRITE setPaddingTop)
   Q_PROPERTY(int paddingLeft READ getPaddingLeft WRITE setPaddingLeft)
-  Q_PROPERTY(int paddingRight READ setPaddingRight WRITE setPaddingRight)
+  Q_PROPERTY(int paddingRight READ getPaddingRight WRITE setPaddingRight)
   Q_PROPERTY(int paddingBottom READ getPaddingBottom WRITE setPaddingBottom)
 
   Q_PROPERTY(int layoutTop READ getLayoutTop)
@@ -44,14 +45,14 @@ class FlexNode : public QObject {
   private:
     YGNodeRef node;
     FlexConfig* config;
+    QLinkedList<FlexNode*> child;
   public:
     FlexNode(FlexConfig* config, QObject* parent = nullptr);
     virtual ~FlexNode();
     YGNodeRef getNode();
   public slots:
     /* child */
-    Q_INVOKABLE void setChildren(QVariant node);
-    Q_INVOKABLE void removeChildren(QVariant node);
+    Q_INVOKABLE void appendChildren(QVariant node);
     /* flex */
     int getFlexGrow();
     int getFlexShrink();

objects/flexbackend.h

@@ -18,6 +18,23 @@ namespace Objects {
 
 /*****************************************************************************/
 
+/*namespace FlexEnums {
+    Q_NAMESPACE
+    enum Wrap {
+        NoWrap,
+        Wrap,
+        WrapReverse
+    };
+    enum FlexDirection {
+        FlexDirectionColumn,
+        FlexDirectionColumnReverse,
+        FlexDirectionRow,
+        FlexDirectionRowReverse
+    };
+}*/
+
+/*****************************************************************************/
+
 class FlexBackend : public QObject {
   Q_OBJECT
   private:

qml/Flex.qml

@@ -1,33 +1,220 @@
-import QtQuick 2.5
+import QtQuick 2.10
 import QtQuick.Layouts 1.1
 import com.tripolskypetr.quitejs 1.0
 
 Item {
-    id: grid
-    property var columnDefenition: []
-    property var rowDefenition: []
-    onChildrenChanged: updatePositions();
+    id: flex
+
+    property int minHeight: 0
+    property int minWidth: 0
+
+    property int flexShrink: 0
+    property int flexGrow: 0
+
+    property int marginTop: 0
+    property int marginLeft: 0
+    property int marginRight: 0
+    property int marginBottom: 0
+
+    property int paddingTop: 0
+    property int paddingLeft: 0
+    property int paddingRight: 0
+    property int paddingBottom: 0
+
+    property string alignContent: "auto"
+    property string alignItems: "auto"
+    property string alignSelf: "auto"
+
+    property string justifyContent: "spaceBetween"
+
+    property string display: "flex"
+
+    property string flexWrap: "noWrap"
 
     FlexBackend{ id: backend }
 
-    function updatePositions() {
+    function isFlex(child) {
+        if (typeof child.flexShrink === 'undefined') {
+            return false;
+        } else if (typeof child.flexGrow === 'undefined') {
+            return false;
+        } else if (typeof child.minHeight === 'undefined') {
+            return false;
+        } else if (typeof child.minWidth === 'undefined') {
+            return false;
+        } else if (typeof child.marginTop === 'undefined') {
+            return false;
+        } else if (typeof child.marginLeft === 'undefined') {
+            return false;
+        } else if (typeof child.marginRight === 'undefined') {
+            return false;
+        } else if (typeof child.marginBottom === 'undefined') {
+            return false;
+        } else if (typeof child.paddingTop === 'undefined') {
+            return false;
+        } else if (typeof child.paddingLeft === 'undefined') {
+            return false;
+        } else if (typeof child.paddingRight === 'undefined') {
+            return false;
+        } else if (typeof child.paddingBottom === 'undefined') {
+            return false;
+        } else if (typeof child.alignContent === 'undefined') {
+            return false;
+        } else if (typeof child.alignItems === 'undefined') {
+            return false;
+        } else if (typeof child.alignSelf === 'undefined') {
+            return false;
+        } else if (typeof child.justifyContent === 'undefined') {
+            return false;
+        } else if (typeof child.display === 'undefined') {
+            return false;
+        } else if (typeof child.flexWrap === 'undefined') {
+            return false;
+        }  else {
+            return true;
+        }
+    }
+
+    function setAlignContent(child, node) {
+        var align = child.alignContent;
+        if (align === "auto") {
+            node.setAlignContentAuto();
+        } else if (align === "flexStart") {
+            node.setAlignContentFlexStart();
+        } else if (align === "center") {
+            node.setAlignContentCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignContentFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignContentStretch();
+        } else if (align === "baseline") {
+            node.setAlignContentBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignContentSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignContentSpaceAround();
+        } else {
+            debugger;
+        }
+    }
 
-        //var rootNode = backend.createNode();
+    function setAlignItems(child, node) {
+        var align = child.alignItems;
+        if (align === "auto") {
+            node.setAlignItemsAuto();
+        } else if (align === "flexStart") {
+            node.setAlignItemsFlexStart();
+        } else if (align === "center") {
+            node.setAlignItemsCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignItemsFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignItemsStretch();
+        } else if (align === "baseline") {
+            node.setAlignItemsBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignItemsSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignItemsSpaceAround();
+        } else {
+            debugger;
+        }
+    }
 
-        for (var i = 0; i < grid.children.length; ++i) {
+    function setAlignSelf(child, node) {
+        var align = child.alignSelf;
+        if (align === "auto") {
+            node.setAlignSelfAuto();
+        } else if (align === "flexStart") {
+            node.setAlignSelfFlexStart();
+        } else if (align === "center") {
+            node.setAlignSelfCenter();
+        } else if (align === "flexEnd") {
+            node.setAlignSelfFlexEnd();
+        } else if (align === "stretch") {
+            node.setAlignSelfStretch();
+        } else if (align === "baseline") {
+            node.setAlignSelfBaseline();
+        } else if (align === "spaceBetween") {
+            node.setAlignSelfSpaceBetween();
+        } else if (align === "spaceAround") {
+            node.setAlignSelfSpaceAround();
+        } else {
+            debugger;
+        }
+    }
 
-            //var node = backend.createNode();
+    function setDisplay(child, node) {
+        var display = child.display;
+        if (display==="flex") {
+            node.setDisplayFlex();
+        } else if (display==="none") {
+            node.setDisplayNone();
+        } else {
+            debugger;
+        }
+    }
 
-            grid.children[i].x = i*50;
-            grid.children[i].y = i*60;
+    function setJustifyContent(child, node){
+        var justify = child.justifyContent;
+        if (justify==="center") {
+            node.setJustifyCenter();
+        } else if (justify==="flexEnd") {
+            node.setJustifyFlexEnd();
+        } else if (justify==="flexStart") {
+            node.setJustifyFlexStart();
+        } else if (justify==="spaceAround") {
+            node.setJustifySpaceAround();
+        } else if (justify==="spaceEvenly") {
+            node.setJustifySpaceEvenly();
+        } else if (justify==="spaceBetween") {
+            node.setJustifySpaceBetween();
+        } else {
+            debugger;
         }
     }
 
-    Component.onCompleted: {
-        var node = backend.createNode();
-        node.flexGrow=1488;
-        node.height = 14;
-        node.setDisplayFlex();
-        console.log(JSON.stringify(node))
+    function setFlexWrap(child, node){
+        var wrap = child.flexWrap;
+        if (wrap==="wrap") {
+            node.setWrap();
+        } else if (wrap==="noWrap") {
+            node.setNoWrap();
+        } else if (wrap==="wrapReverser") {
+            node.setWrapReverser();
+        } else {
+            debugger;
+        }
     }
+
+    function updatePositions() {
+
+        var rootNode = backend.createNode();
+        var childs = []
+        var nodes = []
+
+        for (var i = 0; i < flex.children.length; ++i) {
+            var node = backend.createNode();
+            var child = flex.children[i];
+            if (isFlex(child)) {
+                setJustifyContent(child, node);
+                setAlignContent(child, node);
+                setAlignItems(child, node);
+                setAlignSelf(child, node);
+                setFlexWrap(child, node);
+                setDisplay(child, node);
+            } else {
+                node.height = child.height;
+                node.width = child.width;
+            }
+            childs.push(child);
+            nodes.push(node);
+            rootNode.appendChildren(node);
+            //grid.children[i].x = i*50;
+            //grid.children[i].y = i*60;
+        }
+    }
+
+    Component.onCompleted: updatePositions();
+    onChildrenChanged: updatePositions();
 }

qml/main.qml

@@ -6,11 +6,6 @@ Window {
     visible: true
     Flex {
         anchors.fill: parent
-        columnDefenition : ["auto", "1fr", "auto"]
-        rowDefenition: ["auto", "1fr", "auto"]
-        Text { text: "1"; }
-        Text { text: "1"; }
-        Text { text: "1"; }
-        Text { text: "1"; }
+        Text { text: "1" }
     }
 }