Audio node widgets (#54)

* Add audio widgets

* Change rendering order

* Proper output node

* Change indent

* Fix param

* Hide audio widget when output is empty

* Load default value

* populate audio widget from history

* Prevent init if no audio selection

src/scripts/app.ts

@@ -65,7 +65,7 @@ export class ComfyApp {
 	ui: ComfyUI;
 	logging: ComfyLogging;
 	extensions: ComfyExtension[];
-	nodeOutputs: Record<string, any>;
+	_nodeOutputs: Record<string, any>;
 	nodePreviewImages: Record<string, typeof Image>;
 	shiftDown: boolean;
 	graph: LGraph;
@@ -116,6 +116,15 @@ export class ComfyApp {
 		this.shiftDown = false;
 	}
 
+	get nodeOutputs() {
+		return this._nodeOutputs;
+	}
+
+	set nodeOutputs(value) {
+		this._nodeOutputs = value;
+		this.#invokeExtensions("onNodeOutputsUpdated", value);
+	}
+
 	getPreviewFormatParam() {
 		let preview_format = this.ui.settings.getSettingValue("Comfy.PreviewFormat");
 		if(preview_format)

src/scripts/domWidget.ts

@@ -12,11 +12,11 @@ interface Rect {
 	y: number;
 }
 
-interface DOMWidget {
+export interface DOMWidget<T = HTMLElement> {
 	type: string;
 	name: string;
 	computedHeight?: number;
-	element?: HTMLElement;
+	element?: T;
 	options: any;
 	value?: any;
 	y?: number;

src/scripts/widgets.ts

@@ -400,7 +400,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
 		}
 		return res;
 	},
-	IMAGEUPLOAD(node: LGraphNode, inputName, inputData, app) {
+	IMAGEUPLOAD(node: LGraphNode, inputName: string, inputData, app) {
 		// TODO make image upload handle a custom node type?
 		// @ts-ignore
 		const imageWidget = node.widgets.find((w) => w.name === (inputData[1]?.widget ?? "image"));