Added image loading support from url

Author: irustm

package-lock.json

@@ -28,9 +28,10 @@
     "@angular/platform-browser": "~8.2.11",
     "@angular/platform-browser-dynamic": "~8.2.11",
     "@angular/router": "~8.2.11",
-    "@nodegui/nodegui": "^0.2.1",
+    "@nodegui/nodegui": "^0.8.0",
     "core-js": "^3.3.2",
     "node-fetch": "^2.6.0",
+    "phin": "^3.4.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "^0.9.1"

package.json

@@ -33,7 +33,7 @@ export class NgButton extends QPushButton implements NgComponent {
     }
   }
 
-  public setProperty(name: string, value: boolean | number): void {
+  public setNgProperty(name: string, value: boolean | number): void {
     switch (name) {
       case 'enabled':
         this.setEnabled(value as boolean);

projects/angular-nodegui/src/lib/components/button.ts

@@ -33,7 +33,7 @@ export class NgCheckbox extends QCheckBox implements NgComponent {
     }
   }
 
-  public setProperty(name: string, value: boolean): void {
+  public setNgProperty(name: string, value: boolean): void {
     switch (name) {
       case 'checked':
         this.setChecked(value);

projects/angular-nodegui/src/lib/components/checkbox.ts

@@ -7,7 +7,7 @@ export interface NgComponent {
 
   setNgAttribute(name: string, value: string, namespace?: string | null): void;
 
-  setProperty(name: string, value: any): void;
+  setNgProperty(name: string, value: any): void;
 
   setStyle(style: string, value: any, flags?: RendererStyleFlags2): void;
 

projects/angular-nodegui/src/lib/components/component.ts

@@ -27,7 +27,7 @@ export class NgDial extends QDial implements NgComponent {
     }
   }
 
-  public setProperty(name: string, value: boolean | number): void {
+  public setNgProperty(name: string, value: boolean | number): void {
     switch (name) {
       case 'enabled':
         this.setEnabled(value as boolean);

projects/angular-nodegui/src/lib/components/dial.ts

@@ -1,6 +1,7 @@
+import { RendererStyleFlags2 } from '@angular/core';
 import { QLabel, QPixmap, AspectRatioMode } from '@nodegui/nodegui';
+import * as phin from 'phin';
 import { NgComponent } from './component';
-import { RendererStyleFlags2 } from '@angular/core';
 
 export class NgImage extends QLabel implements NgComponent {
   public static nodeName = 'image';
@@ -30,9 +31,9 @@ export class NgImage extends QLabel implements NgComponent {
     }
   }
 
-  public setProperty(
+  public setNgProperty(
     name: string,
-    value: string | boolean | AspectRatioMode
+    value: string | boolean | AspectRatioMode | Buffer
   ): void {
     switch (name) {
       case 'enabled':
@@ -42,13 +43,21 @@ export class NgImage extends QLabel implements NgComponent {
         if (!value) {
           return;
         }
-        const pixMap = new QPixmap(value as string);
+        getLoadedPixmap(value as string)
+        .then(pixmap => this.setPixmap(pixmap))
+        .catch(console.warn);
 
-        this.setPixmap(pixMap);
         // TODO: not set current aspect size
         // const size = this.size();
         // this.scalePixmap(size.width, size.height);
         break;
+
+      case 'buffer':
+        const pixMap = new QPixmap();
+        pixMap.loadFromData(value as Buffer);
+        this.setPixmap(pixMap);
+        break;
+
       case 'aspectRatioMode':
         this.setAspectRatioMode(value as AspectRatioMode);
         break;
@@ -100,3 +109,25 @@ export class NgImage extends QLabel implements NgComponent {
     throw new Error('Method not implemented.');
   }
 }
+
+async function getLoadedPixmap(imageUrlOrPath: string): Promise<QPixmap> {
+  const pixMap = new QPixmap();
+  if (isValidUrl(imageUrlOrPath)) {
+    const res = await phin(imageUrlOrPath);
+    const imageBuffer = Buffer.from(res.body);
+    pixMap.loadFromData(imageBuffer);
+  } else {
+    pixMap.load(imageUrlOrPath);
+  }
+  return pixMap;
+}
+
+export function isValidUrl(str: string) {
+  try {
+    // tslint:disable-next-line:no-unused-expression
+    new URL(str);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}

projects/angular-nodegui/src/lib/components/image.ts

@@ -27,7 +27,7 @@ export class NgLineEdit extends QLineEdit implements NgComponent {
     }
   }
 
-  public setProperty(name: string, value: boolean | string): void {
+  public setNgProperty(name: string, value: boolean | string): void {
     switch (name) {
       case 'text':
         value ? this.setText(value as string) : this.clear();

projects/angular-nodegui/src/lib/components/line-edit.ts

@@ -27,7 +27,7 @@ export class NgPlainTextEdit extends QPlainTextEdit implements NgComponent {
     }
   }
 
-  public setProperty(name: string, value: boolean | string): void {
+  public setNgProperty(name: string, value: boolean | string): void {
     switch (name) {
       case 'text':
         value ? this.setPlainText(value as string) : this.clear();

projects/angular-nodegui/src/lib/components/pline-text-edit.ts

@@ -18,7 +18,7 @@ export class NgProgressBar extends QProgressBar implements NgComponent {
     namespace?: string | null
   ): void {}
 
-  public setProperty(name: string, value: any): void {
+  public setNgProperty(name: string, value: any): void {
     switch (name) {
       case 'value':
         this.setValue(value);