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?
-demo_linux -demo_win -demo_mac +demo_linux +demo_win +demo_mac
kitchendemo_macdemo_win @@ -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** - -demo_linux - -**Windows** - -demo_win - -**Mac:** - -demo_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"] }