add window template

Author: irustm

src/app/app.component.ts

@@ -3,8 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    Hello {{ name }}
-    <button [style.color]="'green'">Button - {{ name }}</button>
+    <window title="Angular app in window!">
+      <text [style.font-size.px]="45">Hello, {{ name }}</text>
+
+      <button [style.background-color]="'green'">
+        Green button
+      </button>
+    </window>
   `
 })
 export class AppComponent {

src/lib/renderer.ts

@@ -5,7 +5,13 @@ import {
   RendererStyleFlags2,
   RendererType2
 } from '@angular/core';
-import { QWidget, QPushButton, QLabel, FlexLayout } from '@nodegui/nodegui';
+import {
+  QWidget,
+  QPushButton,
+  QLabel,
+  FlexLayout,
+  QMainWindow
+} from '@nodegui/nodegui';
 import { QWindowService } from './window';
 import { TextField } from './nodes';
 
@@ -33,35 +39,37 @@ export class NodeguiRenderer implements Renderer2 {
   constructor(private window: QWindowService) {}
 
   createElement(name: string, namespace?: string | null): any {
-    const button = new QPushButton();
-    button.setObjectName('button');
-    return button;
+    switch (name) {
+      case 'button':
+        return new QPushButton();
+      case 'window':
+        return new FlexLayout();
+      case 'text':
+        return new QLabel();
+    }
   }
 
   createText(value: string): any {
-    // may be use Qwidget? need for set button to text
-
-    // const label = new QLabel();
-    // label.setText(value);
-    // label.setInlineStyle(`
-    //  color: red;
-    // `);
     return new TextField(value);
   }
 
   selectRootElement(): any {
-    return this.window.rootLayout;
+    return this.window.window;
   }
 
   addClass(el: any, name: string): void {
     console.log(el, name);
   }
 
   appendChild(parent: FlexLayout, newChild: any): void {
-    // console.log(parent, newChild);
-
     if (newChild) {
-      if (parent instanceof FlexLayout && newChild instanceof TextField) {
+      if (parent instanceof QMainWindow && newChild instanceof FlexLayout) {
+        this.window.centralWidget.setLayout(newChild);
+        this.window.window.setCentralWidget(this.window.centralWidget);
+      } else if (
+        parent instanceof FlexLayout &&
+        newChild instanceof TextField
+      ) {
         const label = new QLabel();
         newChild.parent = label;
         label.setText(newChild.value);
@@ -72,6 +80,11 @@ export class NodeguiRenderer implements Renderer2 {
       ) {
         newChild.parent = parent;
         parent.setText(newChild.value);
+      } else if (newChild instanceof QLabel) {
+        parent.addWidget(newChild);
+      } else if (parent instanceof QLabel && newChild instanceof TextField) {
+        newChild.parent = parent;
+        parent.setText(newChild.value);
       } else {
         parent.addWidget(newChild);
       }
@@ -114,7 +127,9 @@ export class NodeguiRenderer implements Renderer2 {
     value: string,
     namespace?: string | null
   ): void {
-    el[name] = value;
+    if (el instanceof FlexLayout && name === 'title') {
+      this.window.window.setWindowTitle(value);
+    }
   }
 
   setProperty(el: any, name: string, value: any): void {
@@ -138,6 +153,8 @@ export class NodeguiRenderer implements Renderer2 {
   }
 
   setValue(node: any, value: string): void {
+    // console.log('setValue', node, value);
+
     if (node instanceof TextField) {
       node.parent.setText(value);
     } else {

src/lib/window.ts

@@ -5,13 +5,11 @@ import { QMainWindow, FlexLayout, QWidget } from '@nodegui/nodegui';
 export class QWindowService {
   public window: QMainWindow;
   public rootLayout: FlexLayout;
+  public centralWidget: QWidget;
+
   constructor() {
     this.window = new QMainWindow();
-    const centralWidget = new QWidget();
-    centralWidget.setObjectName('myroot');
-
-    this.rootLayout = new FlexLayout();
-    centralWidget.setLayout(this.rootLayout);
-    this.window.setCentralWidget(centralWidget);
+    this.centralWidget = new QWidget();
+    this.centralWidget.setObjectName('myroot');
   }
 }