diff --git a/README.md b/README.md index 3ec3aa86f..1e2ee79d6 100644 --- a/README.md +++ b/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 diff --git a/demo.ts b/demo.ts index 63a1f27f0..26af97119 100644 --- a/demo.ts +++ b/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()); diff --git a/devdocs/debugging.md b/devdocs/debugging.md new file mode 100644 index 000000000..61b11fe49 --- /dev/null +++ b/devdocs/debugging.md @@ -0,0 +1,5 @@ +# debugging + +Debugging JS + +Debugging C++ diff --git a/devdocs/setting_up.md b/devdocs/setting_up.md new file mode 100644 index 000000000..f8ef419d9 --- /dev/null +++ b/devdocs/setting_up.md @@ -0,0 +1 @@ +# Setup project for development diff --git a/devdocs/styling.md b/devdocs/styling.md new file mode 100644 index 000000000..a3e0311e0 --- /dev/null +++ b/devdocs/styling.md @@ -0,0 +1 @@ +# How styling works? diff --git a/devdocs/wrapping_widgets.md b/devdocs/wrapping_widgets.md new file mode 100644 index 000000000..f2af19f27 --- /dev/null +++ b/devdocs/wrapping_widgets.md @@ -0,0 +1,3 @@ +# Exporting a new method from a widget + +# Exporting a new widget from scratch diff --git a/examples/calculator/index.ts b/examples/calculator/index.ts index 25f3c36f1..79fd9c7bb 100644 --- a/examples/calculator/index.ts +++ b/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); }; diff --git a/package.json b/package.json index f0628aabf..cbe7b9918 100644 --- a/package.json +++ b/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", diff --git a/src/cpp/QtWidgets/QMainWindow/nmainwindow.h b/src/cpp/QtWidgets/QMainWindow/nmainwindow.h index 47b46a1d8..fa2f01be9 100644 --- a/src/cpp/QtWidgets/QMainWindow/nmainwindow.h +++ b/src/cpp/QtWidgets/QMainWindow/nmainwindow.h @@ -3,6 +3,8 @@ #include #include #include "src/cpp/core/YogaWidget/yogawidget.h" +#include "deps/spdlog/spdlog.h" +#include 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(); + } + }; diff --git a/src/cpp/QtWidgets/QMainWindow/qmainwindow_wrap.cpp b/src/cpp/QtWidgets/QMainWindow/qmainwindow_wrap.cpp index 90006b31c..c6e83596b 100644 --- a/src/cpp/QtWidgets/QMainWindow/qmainwindow_wrap.cpp +++ b/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(); QWidgetWrap* centralWidget = Napi::ObjectWrap::Unwrap(widgetObject); + + Napi::Object flexNodeObject = info[1].As(); + FlexNodeWrap* flexNodeWrap = Napi::ObjectWrap::Unwrap(flexNodeObject); + + YGNodeRef node = this->instance->getFlexNode(); + YGNodeInsertChild(node, flexNodeWrap->getInternalInstance(), 0); this->instance->setCentralWidget(centralWidget->getInternalInstance()); return env.Null(); diff --git a/src/cpp/core/FlexLayout/flexlayout.cpp b/src/cpp/core/FlexLayout/flexlayout.cpp index d951a1ffc..cb6f46dfa 100644 --- a/src/cpp/core/FlexLayout/flexlayout.cpp +++ b/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(YGNodeLayoutGetWidth(this->node)); int height = static_cast(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(YGNodeLayoutGetLeft(childNode)); int top = static_cast(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); } diff --git a/src/lib/QtWidgets/QMainWindow/index.ts b/src/lib/QtWidgets/QMainWindow/index.ts index c2aa28ba3..e0e1767af 100644 --- a/src/lib/QtWidgets/QMainWindow/index.ts +++ b/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);