Bug fixes: Flexlayout. Fixes layout issues (#211)

* bump version

* Fixes size control for the flex layout

* Bumps version

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@nodegui/nodegui",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nodegui/nodegui",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "description": "A cross platform library to build native desktop apps.",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",
@@ -16,7 +16,7 @@
     "license": "MIT",
     "private": false,
     "scripts": {
-        "dev": "npm run build && qode --inspect dist/demo.js",
+        "dev": "npm run build && qode  dist/demo.js",
         "postinstall": "npm run build:addon",
         "build": "tsc && npm run build:addon",
         "build:addon": "cross-env CMAKE_BUILD_PARALLEL_LEVEL=8 cmake-js compile",

src/cpp/include/nodegui/core/FlexLayout/flexutils.h

@@ -10,6 +10,7 @@ class FlexNodeContext {
   QLayoutItem* _layoutItem;
 
  public:
+  bool isSizeControlled;
   FlexNodeContext(void* widget);
   QWidget* widget();
   QLayoutItem* layoutItem();

src/cpp/include/nodegui/core/YogaWidget/yogawidget_macro.h

@@ -14,6 +14,15 @@
     YGNodeRef node = this->instance->getFlexNode();                          \
     Napi::Value yogaNodeRef = Napi::External<YGNode>::New(info.Env(), node); \
     return yogaNodeRef;                                                      \
+  }                                                                          \
+  Napi::Value setFlexNodeSizeControlled(const Napi::CallbackInfo& info) {    \
+    Napi::Env env = info.Env();                                              \
+    Napi::HandleScope scope(env);                                            \
+    Napi::Boolean isSizeControlled = info[0].As<Napi::Boolean>();            \
+    YGNodeRef node = this->instance->getFlexNode();                          \
+    FlexNodeContext* ctx = flexutils::getFlexNodeContext(node);              \
+    ctx->isSizeControlled = isSizeControlled.Value();                        \
+    return env.Null();                                                       \
   }
 
 #endif  // YOGAWIDGET_WRAPPED_METHODS_DECLARATION
@@ -21,6 +30,8 @@
 #ifndef YOGAWIDGET_WRAPPED_METHODS_EXPORT_DEFINE
 #define YOGAWIDGET_WRAPPED_METHODS_EXPORT_DEFINE(WidgetWrapName) \
                                                                  \
-  InstanceMethod("getFlexNode", &WidgetWrapName::getFlexNode),
+  InstanceMethod("getFlexNode", &WidgetWrapName::getFlexNode),   \
+      InstanceMethod("setFlexNodeSizeControlled",                \
+                     &WidgetWrapName::setFlexNodeSizeControlled),
 
 #endif  // YOGAWIDGET_WRAPPED_METHODS_EXPORT_DEFINE

src/cpp/lib/QtWidgets/QMainWindow/qmainwindow_wrap.cpp

@@ -55,12 +55,8 @@ Napi::Value QMainWindowWrap::setCentralWidget(const Napi::CallbackInfo& info) {
   Napi::HandleScope scope(env);
 
   Napi::Object widgetObject = info[0].As<Napi::Object>();
-  Napi::External<YGNode> centralWidgetFlexNode =
-      info[1].As<Napi::External<YGNode>>();
   QWidgetWrap* centralWidget =
       Napi::ObjectWrap<QWidgetWrap>::Unwrap(widgetObject);
-  YGNodeInsertChild(this->instance->getFlexNode(), centralWidgetFlexNode.Data(),
-                    0);
   this->instance->setCentralWidget(centralWidget->getInternalInstance());
   return env.Null();
 }

src/cpp/lib/QtWidgets/QScrollArea/qscrollarea_wrap.cpp

@@ -56,11 +56,9 @@ Napi::Value QScrollAreaWrap::setWidget(const Napi::CallbackInfo& info) {
   Napi::Env env = info.Env();
   Napi::HandleScope scope(env);
   Napi::Object contentWidget = info[0].As<Napi::Object>();
-  Napi::External<YGNode> centralWidgetFlexNode =
-      info[1].As<Napi::External<YGNode>>();
   QWidgetWrap* contentWidgetWrap =
       Napi::ObjectWrap<QWidgetWrap>::Unwrap(contentWidget);
-  YGNodeInsertChild(this->scrollNode, centralWidgetFlexNode.Data(), 0);
+
   this->instance->setWidget(contentWidgetWrap->getInternalInstance());
   return env.Null();
 }

src/cpp/lib/core/FlexLayout/flexlayout.cpp

@@ -147,9 +147,11 @@ void FlexLayout::setGeometry(const QRect& rect) {
   if (!this->node) {
     return;
   }
-  if (this->sizeConstraint() != QLayout::SetFixedSize) {
-    YGNodeStyleSetHeight(this->node, rect.height());
+
+  FlexNodeContext* layoutNodeCtx = flexutils::getFlexNodeContext(this->node);
+  if (parentWidget()->isWindow() || layoutNodeCtx->isSizeControlled) {
     YGNodeStyleSetWidth(this->node, rect.width());
+    YGNodeStyleSetHeight(this->node, rect.height());
   }
 
   calculateLayout();

src/cpp/lib/core/FlexLayout/flexutils.cpp

@@ -3,6 +3,7 @@
 FlexNodeContext::FlexNodeContext(void* widget) {
   this->_widget = widget;
   this->_layoutItem = nullptr;
+  this->isSizeControlled = false;
 }
 
 QWidget* FlexNodeContext::widget() {

src/demo.ts

@@ -47,3 +47,36 @@ win.setCentralWidget(scrollArea);
 win.show();
 
 (global as any).win = win;
+
+// const win = new QMainWindow();
+const view = new QWidget();
+view.setLayout(new FlexLayout());
+view.setObjectName('view');
+const left = new QWidget();
+left.setObjectName('left');
+const right = new QWidget();
+right.setObjectName('right');
+view.layout?.addWidget(left);
+view.layout?.addWidget(right);
+view.show();
+
+view.setStyleSheet(`
+    #view {
+        border: 1px solid yellow;
+    }
+
+    #left {
+        flex: 1;
+       background-color: 'red';
+    }
+
+    #right {
+        flex: 1;
+       background-color: 'green';
+    }
+`);
+center.layout?.addWidget(view);
+// win.setCentralWidget(view);
+// win.show();
+// win.resize(300, 300);
+// (global as any).win = win;

src/lib/QtWidgets/QMainWindow.ts

@@ -34,8 +34,9 @@ export class QMainWindow extends NodeWidget {
     }
     setCentralWidget(widget: NodeWidget): void {
         // react:✓
-        this.native.setCentralWidget(widget.native, widget.getFlexNode());
+        this.native.setCentralWidget(widget.native);
         this.centralWidget = widget;
+        this.centralWidget.setFlexNodeSizeControlled(true);
     }
     setMenuBar(menuBar: QMenuBar): void {
         this.native.setMenuBar(menuBar.native);

src/lib/QtWidgets/QScrollArea.ts

@@ -24,7 +24,7 @@ export class QScrollArea extends QAbstractScrollArea {
     setWidget(widget: NodeWidget): void {
         // react:✓, //TODO:getter
         this.contentWidget = widget;
-        this.native.setWidget(widget.native, widget.getFlexNode());
+        this.native.setWidget(widget.native);
     }
     takeWidget(): NodeWidget | null {
         // react:✓

src/lib/core/YogaWidget.ts

@@ -5,4 +5,7 @@ export abstract class YogaWidget extends NodeObject {
     getFlexNode(): FlexNode {
         return this.native.getFlexNode();
     }
+    setFlexNodeSizeControlled(isSizeControlled: boolean): void {
+        this.native.setFlexNodeSizeControlled(isSizeControlled);
+    }
 }