diff --git a/README.md b/README.md index e2ae337f3..515e1ac3a 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ Visit: https://nodegui.github.io/nodegui for docs. ## How does it look?
-
-
+
+
+


@@ -23,9 +23,11 @@ Visit: https://nodegui.github.io/nodegui for docs.
**More screenshots?**
-[See examples](https://github.com/nodegui/nodegui/tree/master/examples/)
+### More Examples:
-[See React based examples](https://github.com/nodegui/react-nodegui/tree/master/examples/)
+https://github.com/nodegui/examples
+
+---
## Features
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 000000000..92d5c68d3
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,7 @@
+# Examples
+
+Examples have now moved to a repo of their own
+
+They are all available at:
+
+https://github.com/nodegui/examples
diff --git a/examples/calculator/README.md b/examples/calculator/README.md
deleted file mode 100644
index 448523708..000000000
--- a/examples/calculator/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Calculator app
-
-This example showcases how to build a basic calculator clone.
-
-### Screenshots
-
-**Linux**
-
-
-
-**Windows**
-
-
-
-**Mac:**
-
-
-
-To run the demo:
-
-1. `yarn build`
-
-2. `yarn qode dist/examples/calculator/index.js`
diff --git a/examples/calculator/calculator_linux.png b/examples/calculator/calculator_linux.png
deleted file mode 100644
index cfcca2946..000000000
Binary files a/examples/calculator/calculator_linux.png and /dev/null differ
diff --git a/examples/calculator/calculator_mac.png b/examples/calculator/calculator_mac.png
deleted file mode 100644
index 9e19e6dc7..000000000
Binary files a/examples/calculator/calculator_mac.png and /dev/null differ
diff --git a/examples/calculator/calculator_win.jpg b/examples/calculator/calculator_win.jpg
deleted file mode 100644
index 88d123988..000000000
Binary files a/examples/calculator/calculator_win.jpg and /dev/null differ
diff --git a/examples/calculator/index.ts b/examples/calculator/index.ts
deleted file mode 100644
index ca2583466..000000000
--- a/examples/calculator/index.ts
+++ /dev/null
@@ -1,311 +0,0 @@
-import { QMainWindow } from "../../src/lib/QtWidgets/QMainWindow";
-import { QWidget } from "../../src/lib/QtGui/QWidget";
-import { FlexLayout } from "../../src/lib/core/FlexLayout";
-import {
- QPushButton,
- QPushButtonEvents
-} from "../../src/lib/QtWidgets/QPushButton";
-import { QLabel } from "../../src/lib/QtWidgets/QLabel";
-import { BaseWidgetEvents } from "../../src/lib/core/EventWidget";
-import { QKeyEvent } from "../../src/lib/QtGui/QEvent/QKeyEvent";
-
-const globals = global as any;
-
-// ===============
-// UI AND DESIGN
-// ===============
-const getButton = (
- label: string,
- value: number | string,
- type: "value" | "command"
-) => {
- const button = new QPushButton();
- button.setText(label);
- button.setObjectName(`btn${value}`);
- button.addEventListener(QPushButtonEvents.clicked, () => {
- onBtnClick(value, type);
- });
- return {
- ui: button,
- value,
- type
- };
-};
-
-// Main Window
-const win = new QMainWindow();
-win.resize(230, 300);
-
-// Root view
-const rootView = new QWidget();
-win.addEventListener(BaseWidgetEvents.KeyRelease, nativeEvent => {
- const keyEvt = new QKeyEvent(nativeEvent);
- const text = keyEvt.text();
- const isNotNumber = isNaN(parseInt(text));
- onBtnClick(text, isNotNumber ? "command" : "value");
-});
-rootView.setObjectName("rootView"); //This is like ids in web world
-win.setCentralWidget(rootView);
-const rootStyleSheet = `
-* {
- font-size: 20px;
- color: white;
-}
-
-QPushButton {
- min-width: '25%';
- border: 1px solid black;
-}
-
-QPushButton:pressed {
- background: grey;
-}
-
-#rootView {
- flex: 1;
- flex-direction: column;
-}
-
-#btnAC {
- min-width: '25%';
- border-right: 2px solid black;
-}
-
-#resultText {
- flex: 1;
- qproperty-alignment: 'AlignRight|AlignVCenter';
- padding-right: 5px;
- font-size: 40px;
-}
-
-#row0,#row1,#row2,#row3,#row4 {
- flex: 1;
- align-items: stretch;
- justify-content: space-between;
- flex-direction: row;
-}
-
-#row0 * {
- background: #1E1E1E;
-}
-
-#row0 QPushButton:pressed {
- background: grey;
-}
-
-#row1 QPushButton {
- background: #2E2E2E;
-}
-
-#row1 QPushButton:pressed {
- background: grey;
-}
-
-
-#row2 QPushButton, #row2 QPushButton, #row3 QPushButton, #row4 QPushButton {
- background: #4B4B4B;
-}
-
-#row2 QPushButton:pressed, #row2 QPushButton:pressed, #row3 QPushButton:pressed, #row4 QPushButton:pressed {
- background: grey;
-}
-`;
-
-const operatorStyleSheet = `
-QPushButton {
- background: #FD8D0E;
-}
-
-QPushButton:pressed {
- background: grey;
-}
-`;
-
-rootView.setStyleSheet(rootStyleSheet);
-const rootViewFlexLayout = new FlexLayout();
-rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
-rootView.setLayout(rootViewFlexLayout);
-
-// Top Row
-const btnClear = getButton("AC", "AC", "command");
-const resultText = new QLabel();
-resultText.setObjectName("resultText");
-resultText.setText(0);
-const row0 = new QWidget();
-row0.setObjectName("row0");
-
-const row0Layout = new FlexLayout();
-row0Layout.setFlexNode(row0.getFlexNode());
-row0.setLayout(row0Layout);
-row0Layout.addWidget(btnClear.ui, btnClear.ui.getFlexNode());
-row0Layout.addWidget(resultText, resultText.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");
-btnDivide.ui.setStyleSheet(operatorStyleSheet);
-const row1 = new QWidget();
-row1.setObjectName("row1");
-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");
-btnMultiply.ui.setStyleSheet(operatorStyleSheet);
-const row2 = new QWidget();
-row2.setObjectName("row2");
-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");
-btnMinus.ui.setStyleSheet(operatorStyleSheet);
-
-const row3 = new QWidget();
-row3.setObjectName("row3");
-
-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");
-btnPlus.ui.setStyleSheet(operatorStyleSheet);
-
-const row4 = new QWidget();
-row4.setObjectName("row4");
-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);
-
-// Add to root view
-rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
-rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
-rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
-rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
-rootViewFlexLayout.addWidget(row4, row4.getFlexNode());
-
-win.show();
-
-globals.win = win; //to keep gc from collecting ui widgets
-
-// ========================
-// CALC APP LOGIC - LOGIC
-// ========================
-// This is probably the worst calculator logic ever but the purpose of demo is to showcase the UI and not the js logic.
-// Read ahead of this line at your own risk.
-
-let displayText = "0";
-let currentInputString = "";
-let total = 0;
-let previousOperator = "+";
-
-var onBtnClick = (value: number | string, type: "value" | "command") => {
- if (
- ![
- "0",
- "1",
- "2",
- "3",
- "4",
- "5",
- "6",
- "7",
- "8",
- "9",
- "+",
- "-",
- "/",
- "*",
- "=",
- "AC"
- ].includes(`${value}`)
- ) {
- return;
- }
- if (type === "value" || value === ".") {
- currentInputString += value;
- displayText = currentInputString;
- } else {
- const currentInput = parseFloat(currentInputString || "0");
- if (!previousOperator) {
- if (currentInputString) {
- total = currentInput;
- }
- }
- if (!currentInputString && value === "=") {
- previousOperator = "+";
- }
- switch (previousOperator) {
- case "+": {
- total += currentInput;
- break;
- }
- case "-": {
- total -= currentInput;
- break;
- }
- case "*": {
- total *= currentInput;
- break;
- }
- case "/": {
- total /= currentInput;
- break;
- }
- }
- currentInputString = "";
-
- if (value === "=") {
- displayText = String(total);
- previousOperator = "";
- } else {
- previousOperator = String(value);
- displayText = previousOperator;
- }
- }
-
- if (value === "AC") {
- displayText = "0";
- currentInputString = "";
- total = 0;
- previousOperator = "+";
- }
-
- if (Number.isNaN(total)) {
- total = 0;
- displayText = "Error";
- }
-
- // SET THE FINAL TEXT
- resultText.setText(displayText);
-};
diff --git a/package-lock.json b/package-lock.json
index cb0b6d3b7..249e4bf21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -195,14 +195,6 @@
"tweetnacl": "^0.14.3"
}
},
- "bindings": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
- "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
- "requires": {
- "file-uri-to-path": "1.0.0"
- }
- },
"boxen": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -637,11 +629,6 @@
"pend": "~1.2.0"
}
},
- "file-uri-to-path": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
- "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
- },
"forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
diff --git a/package.json b/package.json
index 7caf50c1f..09f939de9 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "@nodegui/nodegui",
"version": "0.1.3",
"description": "A cross platform library to build native desktop apps.",
- "main": "dist/src/lib/index.js",
+ "main": "dist/index.js",
"files": [
"dist",
"config",
@@ -18,8 +18,7 @@
"dev": "npm run build && qode dist/demo.js",
"install": "npm -v",
"postinstall": "npm run build:addon",
- "build": "npm run build:lib && npm run build:addon",
- "build:lib": "tsc",
+ "build": "tsc && npm run build:addon",
"build:addon": "node-gyp -j 8 configure build",
"rebuild:addon": "node-gyp -j 8 rebuild",
"automoc": "node ./scripts/automoc.js",
@@ -27,7 +26,6 @@
},
"dependencies": {
"@nodegui/qode": "^1.0.2",
- "bindings": "^1.5.0",
"cuid": "^2.1.6",
"node-addon-api": "^1.6.3",
"node-gyp": "^4.0.0",
diff --git a/demo.ts b/src/demo.ts
similarity index 98%
rename from demo.ts
rename to src/demo.ts
index cb2cab677..064fcbced 100644
--- a/demo.ts
+++ b/src/demo.ts
@@ -8,7 +8,7 @@ import {
QRadioButton,
FlexLayout,
QWidget
-} from "./src/lib/index";
+} from "./index";
const win = new QMainWindow();
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 000000000..4e02edbdf
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,23 @@
+// enums
+export { AspectRatioMode, WidgetAttribute, WindowType } from "./lib/QtEnums";
+export { QApplication } from "./lib/QtGui/QApplication";
+export { QWidget, QWidgetEvents } from "./lib/QtGui/QWidget";
+export { QPixmap } from "./lib/QtGui/QPixmap";
+// Abstract:
+export { NodeWidget } from "./lib/QtGui/QWidget";
+export { NodeLayout } from "./lib/QtWidgets/QLayout";
+// Widgets:
+export { QCheckBox, QCheckBoxEvents } from "./lib/QtWidgets/QCheckBox";
+export { QLabel, QLabelEvents } from "./lib/QtWidgets/QLabel";
+export { QLineEdit, QLineEditEvents } from "./lib/QtWidgets/QLineEdit";
+export { QMainWindow, QMainWindowEvents } from "./lib/QtWidgets/QMainWindow";
+export { QProgressBar, QProgressBarEvents } from "./lib/QtWidgets/QProgressBar";
+export { QPushButton, QPushButtonEvents } from "./lib/QtWidgets/QPushButton";
+export { QRadioButton, QRadioButtonEvents } from "./lib/QtWidgets/QRadioButton";
+// Layouts:
+export { QGridLayout } from "./lib/QtWidgets/QGridLayout";
+export { FlexLayout } from "./lib/core/FlexLayout";
+// Events : Maybe a separate module ?
+export { QKeyEvent } from "./lib/QtGui/QEvent/QKeyEvent";
+export { NativeEvent } from "./lib/core/EventWidget";
+export { StyleSheet } from "./lib/core/Style/StyleSheet";
diff --git a/src/lib/core/addon.ts b/src/lib/core/addon.ts
index 59d68acbe..a38d93de5 100644
--- a/src/lib/core/addon.ts
+++ b/src/lib/core/addon.ts
@@ -1,4 +1,3 @@
-import bindings from "bindings";
-const addon = bindings("qtnode");
+const addon = require("../../../build/Release/qtnode.node");
export default addon;
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index ce14ab185..000000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// enums
-export { AspectRatioMode, WidgetAttribute, WindowType } from "./QtEnums";
-export { QApplication } from "./QtGui/QApplication";
-export { QWidget, QWidgetEvents } from "./QtGui/QWidget";
-export { QPixmap } from "./QtGui/QPixmap";
-// Abstract:
-export { NodeWidget } from "./QtGui/QWidget";
-export { NodeLayout } from "./QtWidgets/QLayout";
-// Widgets:
-export { QCheckBox, QCheckBoxEvents } from "./QtWidgets/QCheckBox";
-export { QLabel, QLabelEvents } from "./QtWidgets/QLabel";
-export { QLineEdit, QLineEditEvents } from "./QtWidgets/QLineEdit";
-export { QMainWindow, QMainWindowEvents } from "./QtWidgets/QMainWindow";
-export { QProgressBar, QProgressBarEvents } from "./QtWidgets/QProgressBar";
-export { QPushButton, QPushButtonEvents } from "./QtWidgets/QPushButton";
-export { QRadioButton, QRadioButtonEvents } from "./QtWidgets/QRadioButton";
-// Layouts:
-export { QGridLayout } from "./QtWidgets/QGridLayout";
-export { FlexLayout } from "./core/FlexLayout";
-// Events : Maybe a separate module ?
-export { QKeyEvent } from "./QtGui/QEvent/QKeyEvent";
-export { NativeEvent } from "./core/EventWidget";
-export { StyleSheet } from "./core/Style/StyleSheet";
diff --git a/tsconfig.json b/tsconfig.json
index 8db180b56..f11ab0435 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,8 +14,8 @@
"outDir": "./dist" /* Redirect output structure to the directory. */,
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
- "incremental": true, /* Enable incremental compilation */
- "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo", /* Specify file to store incremental compilation information */
+ // "incremental": true, /* Enable incremental compilation */
+ // "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo" /* Specify file to store incremental compilation information */,
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
@@ -60,5 +60,5 @@
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"resolveJsonModule": true
},
- "include": ["."]
+ "include": ["src"]
}