changed to class properties instead. Added calculator base example starting

examples/calculator/index.ts

@@ -8,7 +8,6 @@ const globals = global as any;
 
 // Main Window
 const win = new QMainWindow();
-
 win.resize(400, 600);
 
 const getButton = (
@@ -26,93 +25,90 @@ const getButton = (
 };
 
 // Top Row
-const row0 = new QWidget();
-win.setCentralWidget(row0);
-
-row0.setStyleSheet(`
-  qproperty-flex: 1;
-`);
 const btnClear = getButton("AC", "AC", "command");
 const resultText = new QLabel();
 resultText.setText(0);
-
+const row0 = new QWidget();
+row0.setStyleSheet(`
+  qproperty-flex: 1;
+`);
 const row0Layout = new FlexLayout();
 row0Layout.setFlexNode(row0.getFlexNode());
-
 row0Layout.addWidget(btnClear.ui, btnClear.ui.getFlexNode());
 row0Layout.addWidget(resultText, resultText.getFlexNode());
 row0.setLayout(row0Layout);
 
-// // First Row
-// const btn7 = getButton("7", 7, "value");
-// const btn8 = getButton("8", 8, "value");
-// const btn9 = getButton("9", 9, "value");
-// const btnDivide = getButton("/", "/", "command");
-// const row1 = new QWidget();
-// const row1Layout = new FlexLayout();
-// row1.setLayout(row1Layout);
-// row1Layout.setFlexNode(row1.getFlexNode());
-// row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
-// row1Layout.addWidget(btn8.ui, btn8.ui.getFlexNode());
-// row1Layout.addWidget(btn9.ui, btn9.ui.getFlexNode());
-// row1Layout.addWidget(btnDivide.ui, btnDivide.ui.getFlexNode());
+// First Row
+const btn7 = getButton("7", 7, "value");
+const btn8 = getButton("8", 8, "value");
+const btn9 = getButton("9", 9, "value");
+const btnDivide = getButton("/", "/", "command");
+const row1 = new QWidget();
+const row1Layout = new FlexLayout();
+row1Layout.setFlexNode(row1.getFlexNode());
+row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
+row1Layout.addWidget(btn8.ui, btn8.ui.getFlexNode());
+row1Layout.addWidget(btn9.ui, btn9.ui.getFlexNode());
+row1Layout.addWidget(btnDivide.ui, btnDivide.ui.getFlexNode());
+row1.setLayout(row1Layout);
 
-// // Second Row
-// const btn4 = getButton("4", 4, "value");
-// const btn5 = getButton("5", 5, "value");
-// const btn6 = getButton("6", 6, "value");
-// const btnMultiply = getButton("x", "*", "command");
-// const row2 = new QWidget();
-// const row2Layout = new FlexLayout();
-// row2.setLayout(row2Layout);
-// row2Layout.setFlexNode(row2.getFlexNode());
-// row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
-// row2Layout.addWidget(btn5.ui, btn5.ui.getFlexNode());
-// row2Layout.addWidget(btn6.ui, btn6.ui.getFlexNode());
-// row2Layout.addWidget(btnMultiply.ui, btnMultiply.ui.getFlexNode());
+// Second Row
+const btn4 = getButton("4", 4, "value");
+const btn5 = getButton("5", 5, "value");
+const btn6 = getButton("6", 6, "value");
+const btnMultiply = getButton("x", "*", "command");
+const row2 = new QWidget();
+const row2Layout = new FlexLayout();
+row2Layout.setFlexNode(row2.getFlexNode());
+row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
+row2Layout.addWidget(btn5.ui, btn5.ui.getFlexNode());
+row2Layout.addWidget(btn6.ui, btn6.ui.getFlexNode());
+row2Layout.addWidget(btnMultiply.ui, btnMultiply.ui.getFlexNode());
+row2.setLayout(row2Layout);
 
-// // Third Row
-// const btn1 = getButton("1", 1, "value");
-// const btn2 = getButton("2", 2, "value");
-// const btn3 = getButton("3", 3, "value");
-// const btnMinus = getButton("-", "-", "command");
-// const row3 = new QWidget();
-// const row3Layout = new FlexLayout();
-// row3.setLayout(row3Layout);
-// row3Layout.setFlexNode(row3.getFlexNode());
-// row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
-// row3Layout.addWidget(btn2.ui, btn2.ui.getFlexNode());
-// row3Layout.addWidget(btn3.ui, btn3.ui.getFlexNode());
-// row3Layout.addWidget(btnMinus.ui, btnMinus.ui.getFlexNode());
+// Third Row
+const btn1 = getButton("1", 1, "value");
+const btn2 = getButton("2", 2, "value");
+const btn3 = getButton("3", 3, "value");
+const btnMinus = getButton("-", "-", "command");
+const row3 = new QWidget();
+const row3Layout = new FlexLayout();
+row3Layout.setFlexNode(row3.getFlexNode());
+row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
+row3Layout.addWidget(btn2.ui, btn2.ui.getFlexNode());
+row3Layout.addWidget(btn3.ui, btn3.ui.getFlexNode());
+row3Layout.addWidget(btnMinus.ui, btnMinus.ui.getFlexNode());
+row3.setLayout(row3Layout);
 
-// // Fourth Row
-// const btn0 = getButton("0", 0, "value");
-// const btnDot = getButton(".", ".", "command");
-// const btnEquals = getButton("=", "=", "command");
-// const btnPlus = getButton("+", "+", "command");
-// const row4 = new QWidget();
-// const row4Layout = new FlexLayout();
-// row4.setLayout(row4Layout);
-// row4Layout.setFlexNode(row4.getFlexNode());
-// row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode());
-// row4Layout.addWidget(btnDot.ui, btnDot.ui.getFlexNode());
-// row4Layout.addWidget(btnEquals.ui, btnEquals.ui.getFlexNode());
-// row4Layout.addWidget(btnPlus.ui, btnPlus.ui.getFlexNode());
+// Fourth Row
+const btn0 = getButton("0", 0, "value");
+const btnDot = getButton(".", ".", "command");
+const btnEquals = getButton("=", "=", "command");
+const btnPlus = getButton("+", "+", "command");
+const row4 = new QWidget();
+const row4Layout = new FlexLayout();
+row4Layout.setFlexNode(row4.getFlexNode());
+row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode());
+row4Layout.addWidget(btnDot.ui, btnDot.ui.getFlexNode());
+row4Layout.addWidget(btnEquals.ui, btnEquals.ui.getFlexNode());
+row4Layout.addWidget(btnPlus.ui, btnPlus.ui.getFlexNode());
+row4.setLayout(row4Layout);
 
 // Root view
-// const rootView = new QWidget();
-// rootView.setStyleSheet(
-//   `
-//     qproperty-flex: 1;
-//   `
-// );
-// const rootViewFlexLayout = new FlexLayout();
-// rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
-// rootView.setLayout(rootViewFlexLayout);
-// rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
-// rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
-// rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
-// rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
+const rootView = new QWidget();
+win.setCentralWidget(rootView);
+rootView.setStyleSheet(
+  `
+    qproperty-flex: 1;
+  `
+);
+const rootViewFlexLayout = new FlexLayout();
+rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
+rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
+rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
+rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
+rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
+rootView.setLayout(rootViewFlexLayout);
 
 win.show();
 

src/lib/QtGui/QApplication/index.ts

@@ -3,10 +3,10 @@ import { Component } from "../../core/Component";
 
 export class QApplication extends Component {
   native = new addon.QApplication();
-  processEvents() {
+  processEvents = () => {
     this.native.processEvents();
-  }
-  exec() {
+  };
+  exec = () => {
     this.native.exec();
-  }
+  };
 }

src/lib/QtGui/QWidget/index.ts

@@ -7,25 +7,25 @@ import { NodeLayout } from "../../QtWidgets/QLayout";
 export abstract class NodeWidget extends YogaWidget {
   type = "widget";
   layout?: NodeLayout;
-  show() {
+  show = () => {
     this.native.show();
-  }
-  resize(width: number, height: number) {
+  };
+  resize = (width: number, height: number) => {
     this.native.resize(width, height);
-  }
-  close() {
+  };
+  close = () => {
     this.native.close();
-  }
-  setLayout(parentLayout: NodeLayout) {
+  };
+  setLayout = (parentLayout: NodeLayout) => {
     this.native.setLayout(parentLayout.native);
     this.layout = parentLayout;
-  }
-  setStyleSheet(style: string) {
+  };
+  setStyleSheet = (style: string) => {
     this.native.setStyleSheet(style);
-  }
-  hide() {
+  };
+  hide = () => {
     this.native.hide();
-  }
+  };
 }
 
 export class QWidget extends NodeWidget {

src/lib/QtWidgets/QCheckBox/index.ts

@@ -11,7 +11,7 @@ export class QCheckBox extends NodeWidget {
       this.native = new addon.QCheckBox();
     }
   }
-  setText(text: string) {
+  setText = (text: string) => {
     this.native.setText(text);
-  }
+  };
 }

src/lib/QtWidgets/QGridLayout/index.ts

@@ -13,8 +13,8 @@ export class QGridLayout extends NodeLayout {
       this.native = new addon.QGridLayout();
     }
   }
-  addWidget(widget: NodeWidget) {
+  addWidget = (widget: NodeWidget) => {
     this.native.addWidget(widget.native);
     this.children.add(widget);
-  }
+  };
 }

src/lib/QtWidgets/QLabel/index.ts

@@ -1,6 +1,5 @@
 import addon from "../../core/addon";
 import { NodeWidget } from "../../QtGui/QWidget";
-import { FlexNode } from "../../core/FlexLayout/FlexNode";
 
 export class QLabel extends NodeWidget {
   native: any;
@@ -13,17 +12,13 @@ export class QLabel extends NodeWidget {
       this.native = new addon.QLabel();
     }
   }
-  setWordWrap(on: boolean) {
+  setWordWrap = (on: boolean) => {
     this.native.setWordWrap(on);
-  }
-  setText(text: string | number) {
+  };
+  setText = (text: string | number) => {
     this.native.setText(`${text}`);
-  }
-  text() {
+  };
+  text = () => {
     return this.native.text();
-  }
-  getFlexNode(): FlexNode {
-    const nativeFlexNode = this.native.getFlexNode();
-    return new FlexNode(nativeFlexNode);
-  }
+  };
 }

src/lib/QtWidgets/QMainWindow/index.ts

@@ -11,11 +11,11 @@ export class QMainWindow extends NodeWidget {
       this.native = new addon.QMainWindow();
     }
   }
-  setCentralWidget(widget: NodeWidget) {
+  setCentralWidget = (widget: NodeWidget) => {
     this.native.setCentralWidget(widget.native);
     this.children.add(widget);
-  }
-  setFixedSize(width: number, height: number) {
+  };
+  setFixedSize = (width: number, height: number) => {
     this.native.setFixedSize(width, height);
-  }
+  };
 }

src/lib/QtWidgets/QPushButton/index.ts

@@ -21,6 +21,7 @@ export class QPushButton extends SignalNodeWidget {
     super(native);
     this.parent = parent;
     this.native = native;
+    this.setText.bind(this);
   }
 
   setText(text: string | number) {

src/lib/core/FlexLayout/FlexNode/index.ts

@@ -6,7 +6,7 @@ export class FlexNode extends Component {
     super();
     this.native = nativeNode;
   }
-  debugValue() {
+  debugValue = (): void => {
     return this.native.debugValue();
-  }
+  };
 }

src/lib/core/FlexLayout/index.ts

@@ -8,14 +8,14 @@ export class FlexLayout extends NodeLayout {
   protected flexNode?: FlexNode;
   protected childFlexNodes = new Set<FlexNode>();
 
-  addWidget(childWidget: NodeWidget, childFlexNode: FlexNode) {
+  addWidget = (childWidget: NodeWidget, childFlexNode: FlexNode) => {
     this.children.add(childWidget);
     this.childFlexNodes.add(childFlexNode);
 
     this.native.addWidget(childWidget.native, childFlexNode.native);
-  }
-  setFlexNode(flexNode: FlexNode) {
+  };
+  setFlexNode = (flexNode: FlexNode) => {
     this.flexNode = flexNode;
     this.native.setFlexNode(flexNode.native);
-  }
+  };
 }

src/lib/core/SignalNodeWidget/index.ts

@@ -13,7 +13,10 @@ export abstract class SignalNodeWidget extends NodeWidget {
     }
   }
 
-  setSignalListener(signalType: string, callback: (payload?: any) => void) {
+  setSignalListener = (
+    signalType: string,
+    callback: (payload?: any) => void
+  ) => {
     this.emitter.on(signalType, callback);
-  }
+  };
 }

src/lib/core/YogaWidget/index.ts

@@ -2,7 +2,7 @@ import { Component } from "../Component";
 import { FlexNode } from "../FlexLayout/FlexNode";
 
 export abstract class YogaWidget extends Component {
-  getFlexNode(): FlexNode {
+  getFlexNode = (): FlexNode => {
     return new FlexNode(this.native.getFlexNode());
-  }
+  };
 }