Fixes flexlayout calculations (#223)

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

@@ -139,17 +139,20 @@ bool FlexLayout::hasHeightForWidth() const { return false; }
 
 QSize FlexLayout::sizeHint() const {
   calculateLayout();
-  return QSize(YGNodeLayoutGetWidth(this->node),
-               YGNodeLayoutGetHeight(this->node));
+  QSize sizeHint = QSize(YGNodeLayoutGetWidth(this->node),
+                         YGNodeLayoutGetHeight(this->node));
+  // qDebug() << "sizeHint" << this->parentWidget() << sizeHint;
+  return sizeHint;
 }
 
 void FlexLayout::setGeometry(const QRect& rect) {
   if (!this->node) {
     return;
   }
-
+  // qDebug() << "setGeometry" << rect << this->parentWidget();
   FlexNodeContext* layoutNodeCtx = flexutils::getFlexNodeContext(this->node);
   if (parentWidget()->isWindow() || layoutNodeCtx->isSizeControlled) {
+    // qDebug() << "controlled" << this->parentWidget();
     YGNodeStyleSetWidth(this->node, rect.width());
     YGNodeStyleSetHeight(this->node, rect.height());
   }
@@ -157,6 +160,7 @@ void FlexLayout::setGeometry(const QRect& rect) {
   calculateLayout();
   QRect calculatedRect = flexutils::getFlexNodeGeometry(this->node);
   QLayout::setGeometry(calculatedRect);
+  // qDebug() << "calculatedRect" << calculatedRect << this->parentWidget();
 
   uint count = YGNodeGetChildCount(this->node);
 
@@ -165,6 +169,7 @@ void FlexLayout::setGeometry(const QRect& rect) {
     QRect childRect = flexutils::getFlexNodeGeometry(childNode);
     FlexNodeContext* ctx = flexutils::getFlexNodeContext(childNode);
     QLayoutItem* childItem = ctx->layoutItem();
+    // qDebug() << "child" << childRect << childItem->widget();
     childItem->setGeometry(childRect);
   }
 }
@@ -175,7 +180,8 @@ void FlexLayout::calculateLayout() const {
   YGNodeRef parentNode = this->node;
   YGNodeRef rootNode = getRootNode(parentNode);
   YGDirection rootDirection = YGNodeStyleGetDirection(rootNode);
-  YGNodeStyleSetMaxHeight(rootNode, QWIDGETSIZE_MAX);
-  YGNodeStyleSetMaxWidth(rootNode, QWIDGETSIZE_MAX);
-  YGNodeCalculateLayout(rootNode, 0, 0, rootDirection);
+  float rootWidth = YGNodeLayoutGetWidth(rootNode);
+  float rootHeight = YGNodeLayoutGetHeight(rootNode);
+
+  YGNodeCalculateLayout(rootNode, rootWidth, rootHeight, rootDirection);
 }

src/demo.ts

@@ -1,10 +1,13 @@
-import { QWidget, QScrollArea, QMainWindow, FlexLayout, QLabel } from './index';
+import { QWidget, QMainWindow, FlexLayout, QLabel } from './index';
+import { QScrollArea } from './lib/QtWidgets/QScrollArea';
 
 const win = new QMainWindow();
-const scrollArea = new QScrollArea();
 const center = new QWidget();
 const label = new QLabel();
+const scrollArea = new QScrollArea();
+
 label.setText(`
+😱😱😱😱😱😱😱😱😱😱😱😱😱😱😱😱😱😱😱
     Hellloooooo
     Hellloooooo
     Hellloooooo
@@ -35,48 +38,13 @@ label.setText(`
     Hellloooooo
     `);
 
-scrollArea.setInlineStyle('border: 1px solid yellow;');
 center.setInlineStyle(`border: 3px solid blue;`);
-label.setInlineStyle(`border: 2px solid green;padding: 10;`);
-
+label.setInlineStyle(`border: 2px solid green;padding: 10;font-family: "Sans serif";`);
+scrollArea.setWidget(label);
 center.setLayout(new FlexLayout());
-center.layout?.addWidget(label);
-center.layout?.setProperty('sizeConstraint', 3);
-scrollArea.setWidget(center);
-win.setCentralWidget(scrollArea);
+center.layout?.addWidget(scrollArea);
+win.setCentralWidget(center);
 win.show();
+scrollArea.setInlineStyle(`flex: 1;`);
 
 (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/QWidget.ts

@@ -28,15 +28,15 @@ export abstract class NodeWidget extends YogaWidget {
     close(): boolean {
         return this.native.close();
     }
-    async setStyleSheet(styleSheet: string): Promise<void> {
-        const preparedSheet = await StyleSheet.create(styleSheet);
+    setStyleSheet(styleSheet: string): void {
+        const preparedSheet = StyleSheet.create(styleSheet);
         this.native.setStyleSheet(preparedSheet);
     }
     styleSheet(): string {
         return this.native.styleSheet();
     }
-    async setInlineStyle(style: string): Promise<void> {
-        const preparedSheet = await prepareInlineStyleSheet(this, style);
+    setInlineStyle(style: string): void {
+        const preparedSheet = prepareInlineStyleSheet(this, style);
         this.native.setStyleSheet(preparedSheet);
     }
     setGeometry(x: number, y: number, w: number, h: number): void {

src/lib/core/Style/StyleSheet.ts

@@ -3,19 +3,18 @@ import cuid from 'cuid';
 import nodeguiAutoPrefixer from 'postcss-nodegui-autoprefixer';
 import { NodeWidget } from '../../QtWidgets/QWidget';
 export class StyleSheet {
-    static async create(cssString: string): Promise<string> {
-        const { css } = await postcss([nodeguiAutoPrefixer()])
-            .process(cssString, { from: undefined })
-            .catch(err => {
-                console.warn(`Error autoprefixing`, err);
-                return { css: cssString };
-            });
-        return css;
+    static create(cssString: string): string {
+        try {
+            return postcss([nodeguiAutoPrefixer()]).process(cssString).css;
+        } catch (err) {
+            console.error(err);
+            return '';
+        }
     }
 }
 
-export async function prepareInlineStyleSheet(widget: NodeWidget, rawStyle: string): Promise<string> {
-    const inlineStyle = await StyleSheet.create(rawStyle);
+export function prepareInlineStyleSheet(widget: NodeWidget, rawStyle: string): string {
+    const inlineStyle = StyleSheet.create(rawStyle);
     // Make sure to not calculate ObjectName in the same pass of event loop as other props (incase of react) since the order will matter in that case
     // So doing it in multiple passes of event loop allows objectName to be set before using it. The above await solves it.
     let cssId = widget.objectName();