diff --git a/package-lock.json b/package-lock.json index e61800f..94d023a 100644 --- a/package-lock.json +++ b/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 } diff --git a/package.json b/package.json index 43ec6c4..6a1d2dd 100644 --- a/package.json +++ b/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" }, diff --git a/src/nodes/Api.ts b/src/nodes/Api.ts index ffbcbd7..9fe250b 100644 --- a/src/nodes/Api.ts +++ b/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 { 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 { } private async getBlobFromImage(media: CanvasImageSource): Promise { + 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) => { diff --git a/src/nodes/canvas.ts b/src/nodes/canvas.ts index eb129db..87920fe 100644 --- a/src/nodes/canvas.ts +++ b/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 = (