Merge pull request #22 from Dutch77/bug/api-node-media-size-fix

api node - fix media size, remove input width and height

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "graphfx",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3930,6 +3930,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.16.tgz",
       "integrity": "sha512-vRuMyoOr5yfNf8QWxXegOjeyjpWJxFePzHzmBOIzDIzo+rSqF94RW0PkS6y4T2+VjAWLXHWrfbIJY3E3aS7lUw=="
     },
+    "@types/offscreencanvas": {
+      "version": "2019.7.0",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
+      "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==",
+      "dev": true
+    },
     "@types/prettier": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
@@ -12526,7 +12532,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         }

package.json

@@ -21,9 +21,10 @@
     "@babel/preset-env": "^7.7.5",
     "@babel/preset-typescript": "^7.7.4",
     "@types/jest": "^24.0.0",
+    "@types/lodash": "^4.14.191",
+    "@types/offscreencanvas": "^2019.7.0",
     "babel-jest": "^24.6.0",
     "babel-polyfill": "^6.26.0",
-    "@types/lodash": "^4.14.191",
     "jest": "^29.2.2",
     "typescript": "^3.7.3"
   },

src/nodes/Api.ts

@@ -1,7 +1,7 @@
 import Node from './Node';
 import {ImageVar, NumberVar, StringVar} from './io/AbstractIOSet';
 import throttle from 'lodash/throttle'
-import {createCanvas, paintToCanvas} from "./canvas";
+import {createCanvas, mediaSize, paintToCanvas} from './canvas';
 
 const numberOfImageInputs = 8;
 const inputs = {
@@ -54,12 +54,6 @@ const inputs = {
     image7: {
         type: 'Image',
     } as ImageVar,
-    width: {
-        type: 'Number',
-    } as NumberVar,
-    height: {
-        type: 'Number',
-    } as NumberVar,
     url: {
         type: 'String',
     } as StringVar,
@@ -87,11 +81,10 @@ export default class Api extends Node<typeof inputs, typeof outputs> {
         super('Api', inputs, outputs);
         this.updateThrottleWait = this.in.throttleMs.value;
         this.updateThrottled = throttle(this.upload, this.updateThrottleWait);
-        console.log(this.updateThrottleWait);
     }
 
     async _update() {
-        if (!this.in.url.value || !this.in.width.value || !this.in.height.value) {
+        if (!this.in.url.value) {
             return;
         }
 
@@ -151,12 +144,13 @@ export default class Api extends Node<typeof inputs, typeof outputs> {
     }
 
     private async getBlobFromImage(media: CanvasImageSource): Promise<Blob> {
+        const {width, height} = mediaSize(media)
         if (!this.tempCanvas) {
-            this.tempCanvas = createCanvas(this.in.width.value, this.in.height.value);
+            this.tempCanvas = createCanvas(width, height);
         }
 
         paintToCanvas(this.tempCanvas, media, {
-            top: 0, left: 0, width: this.in.width.value, height: this.in.height.value,
+            top: 0, left: 0, width, height,
         })
 
         return await new Promise((resolve, reject) => {

src/nodes/canvas.ts

@@ -18,7 +18,7 @@ export const mediaSize = (media: HTMLImageElement|HTMLVideoElement|{width: numbe
 
 /**
  * @param {HTMLCanvasElement} canvas
- * @param {PaintableElement} media
+ * @param {CanvasImageSource} media
  * @param {Bounds} param2
  */
 export const paintToCanvas = (