Fixes resize needed for layout issue.

README.md

@@ -9,6 +9,10 @@ Mac screenshots:
 
 Linux and Windows screenshots to be added soon.
 
+**More screenshots?**
+
+[See examples](https://github.com/master-atul/node-native-ui/tree/master/examples/)
+
 ## Features
 
 - [x] Cross platform. Should work on major Linux flavours, Windows and MacOS

demo.ts

@@ -65,14 +65,27 @@ const testGridLayout = () => {
 // -----------------------------------------------
 
 const testFlexLayout = () => {
+  // rootView -> view  -> label
+  //                   -> label2
+  //          -> view2 -> button
+
   const win = new QMainWindow();
+  win.setObjectName("win");
+  win.resize(300,300);
   const rootView = new QWidget();
+  rootView.setStyleSheet(`
+   * {
+     position:relative;
+   }
+  `);
+  rootView.setObjectName("rootView");
   const rootLayout = new FlexLayout();
   rootLayout.setFlexNode(rootView.getFlexNode());
   rootView.setLayout(rootLayout);
   win.setCentralWidget(rootView);
 
-  const view = new QWidget();
+  const view = new QWidget(rootView);
+  view.setObjectName("view");
   view.setStyleSheet(
     `
       qproperty-flex: 1;
@@ -82,7 +95,8 @@ const testFlexLayout = () => {
   const flayout = new FlexLayout();
   flayout.setFlexNode(view.getFlexNode());
 
-  const label = new QLabel();
+  const label = new QLabel(view);
+  label.setObjectName("label");
   label.setText("Hello12321");
   label.setStyleSheet(`
     background-color:blue; 
@@ -91,7 +105,8 @@ const testFlexLayout = () => {
     qproperty-minWidth: '50%';
   `);
 
-  const label2 = new QLabel();
+  const label2 = new QLabel(view);
+  label2.setObjectName("label2");
   label2.setText("SECOND LABEL");
   label2.setStyleSheet(`
     background-color:green; 
@@ -103,12 +118,14 @@ const testFlexLayout = () => {
   flayout.addWidget(label, label.getFlexNode());
   view.setLayout(flayout);
 
-  const view2 = new QWidget();
+  const view2 = new QWidget(rootView);
+  view2.setObjectName("view2");
   const flayout2 = new FlexLayout();
   flayout2.setFlexNode(view2.getFlexNode());
   view2.setLayout(flayout2);
 
-  const button = new QPushButton();
+  const button = new QPushButton(view2);
+  button.setObjectName("button");
   button.setText("Hululu");
   flayout2.addWidget(button, button.getFlexNode());
 

devdocs/debugging.md

@@ -0,0 +1,5 @@
+# debugging
+
+Debugging JS
+
+Debugging C++

devdocs/setting_up.md

@@ -0,0 +1 @@
+# Setup project for development

devdocs/styling.md

@@ -0,0 +1 @@
+# How styling works?

devdocs/wrapping_widgets.md

@@ -0,0 +1,3 @@
+# Exporting a new method from a widget
+
+# Exporting a new widget from scratch

examples/calculator/index.ts

@@ -32,6 +32,7 @@ const getButton = (
 
 // Main Window
 const win = new QMainWindow();
+win.resize(230, 300);
 
 // Root view
 const rootView = new QWidget();
@@ -209,9 +210,6 @@ rootViewFlexLayout.addWidget(row4, row4.getFlexNode());
 
 win.show();
 
-setTimeout(() => {
-  win.resize(230, 300); // This is a hack to solve layout issues on initial render. Will need to fix this.
-}, 10);
 globals.win = win; //to keep gc from collecting ui widgets
 
 // ========================
@@ -282,9 +280,4 @@ var onBtnClick = (value: number | string, type: "value" | "command") => {
 
   // SET THE FINAL TEXT
   resultText.setText(displayText);
-
-  setTimeout(() => {
-    win.resize(231, 300);
-    win.resize(230, 300);
-  }, 10);
 };

package.json

@@ -15,7 +15,7 @@
     "typescript": "^3.4.5"
   },
   "scripts": {
-    "build": "npm run rebuild:addon && npm run build:lib",
+    "build": "npm run build:addon && npm run build:lib",
     "build:lib": "tsc",
     "build:addon": "node-gyp -j 8 build",
     "rebuild:addon": "node-gyp -j 8 rebuild",

src/cpp/QtWidgets/QMainWindow/nmainwindow.h

@@ -3,6 +3,8 @@
 #include <QWidget>
 #include <QMainWindow>
 #include "src/cpp/core/YogaWidget/yogawidget.h"
+#include "deps/spdlog/spdlog.h"
+#include <QEvent>
 
 class NMainWindow: public QMainWindow, public YogaWidget
 {
@@ -10,7 +12,25 @@ class NMainWindow: public QMainWindow, public YogaWidget
 public:
     SET_YOGA_WIDGET_Q_PROPERTIES
     using QMainWindow::QMainWindow; //inherit all constructors of QMainWindow
+    
+    void calculateLayout(){
+        YGDirection direction = YGNodeStyleGetDirection(this->getFlexNode());
+        YGNodeCalculateLayout(this->getFlexNode(),width(),height(),direction);
+    }
+
     Q_OBJECT
+public:
+    bool eventFilter(QObject *object, QEvent *event)
+    {
+        if (event->type() == QEvent::LayoutRequest || event->type() == QEvent::ChildRemoved) {
+            calculateLayout();  
+        }
+        return false;
+    }
+    void resizeEvent(QResizeEvent * event){
+        calculateLayout();
+    }
+    
 };
 
 

src/cpp/QtWidgets/QMainWindow/qmainwindow_wrap.cpp

@@ -37,6 +37,7 @@ QMainWindowWrap::QMainWindowWrap(const Napi::CallbackInfo& info): Napi::ObjectWr
     extrautils::throwTypeError(env, "Wrong number of arguments");
   }
   this->instance->setAttribute(Qt::WA_DeleteOnClose);
+  this->instance->installEventFilter(this->instance);
 }
 
 QMainWindowWrap::~QMainWindowWrap() {
@@ -49,6 +50,12 @@ Napi::Value QMainWindowWrap::setCentralWidget(const Napi::CallbackInfo& info){
 
   Napi::Object widgetObject = info[0].As<Napi::Object>();
   QWidgetWrap* centralWidget = Napi::ObjectWrap<QWidgetWrap>::Unwrap(widgetObject);
+
+  Napi::Object flexNodeObject = info[1].As<Napi::Object>();
+  FlexNodeWrap* flexNodeWrap = Napi::ObjectWrap<FlexNodeWrap>::Unwrap(flexNodeObject);
+  
+  YGNodeRef node = this->instance->getFlexNode();
+  YGNodeInsertChild(node, flexNodeWrap->getInternalInstance(), 0);
   this->instance->setCentralWidget(centralWidget->getInternalInstance());
 
   return env.Null();

src/cpp/core/FlexLayout/flexlayout.cpp

@@ -39,13 +39,9 @@ QSize FlexLayout::sizeHint() const{
     if(!this->node){
         return QSize(0,0);
     }
-    QSize size;
     int width = static_cast<uint>(YGNodeLayoutGetWidth(this->node));
     int height = static_cast<uint>(YGNodeLayoutGetHeight(this->node));
-    spdlog::info("flexlayout: sizeHint {}x{}",width, height);
-    size.setWidth(width);
-    size.setHeight(height);
-    return size;
+    return QSize(width, height);
 }
 
 void FlexLayout::addItem(QLayoutItem * item){
@@ -109,10 +105,6 @@ void FlexLayout::setGeometry(const QRect &rect)
     if(!this->node){
         return;
     }
-    int availableWidth = rect.width();
-    int availableHeight = rect.height();
-    YGDirection direction = YGNodeStyleGetDirection(this->node);
-    YGNodeCalculateLayout(this->node,availableWidth,availableHeight,direction);
 
     uint count = YGNodeGetChildCount(this->node);
 
@@ -123,14 +115,13 @@ void FlexLayout::setGeometry(const QRect &rect)
         int left = static_cast<uint>(YGNodeLayoutGetLeft(childNode));
         int top = static_cast<uint>(YGNodeLayoutGetTop(childNode));
 
-        QRect childRect(left, top,width, height);
+        QRect childRect(left, top, width, height);
         NodeContext *ctx = getNodeContext(childNode);
         if(ctx){
             QLayoutItem* childLayoutItem = ctx->item;
             QWidget* childWidget = childLayoutItem->widget();
             if(childWidget){
                 childWidget->setGeometry(childRect);
-                // spdlog::info("flexlayout setGeometry: {}, rect: w:{}, h:{}, l:{}, t:{}",childWidget->metaObject()->className(),width,height,left,top);
             }else {
                 childLayoutItem->setGeometry(childRect);
             }

src/lib/QtWidgets/QMainWindow/index.ts

@@ -1,7 +1,10 @@
 import addon from "../../core/addon";
 import { NodeWidget } from "../../QtGui/QWidget";
+import { FlexNode } from "../../core/FlexLayout/FlexNode";
 export class QMainWindow extends NodeWidget {
   native: any;
+  protected centralWidget?: NodeWidget;
+  protected centralWidgetFlexNode?: FlexNode;
   constructor(parent?: NodeWidget) {
     super();
     if (parent) {
@@ -12,8 +15,12 @@ export class QMainWindow extends NodeWidget {
     }
   }
   setCentralWidget = (widget: NodeWidget) => {
-    this.native.setCentralWidget(widget.native);
-    this.children.add(widget);
+    this.centralWidgetFlexNode = widget.getFlexNode();
+    this.centralWidget = widget;
+    this.native.setCentralWidget(
+      this.centralWidget.native,
+      this.centralWidgetFlexNode.native
+    );
   };
   setFixedSize = (width: number, height: number) => {
     this.native.setFixedSize(width, height);