From f3cce4162b5e0da47c8e02a55ef520f92abfc71d Mon Sep 17 00:00:00 2001 From: rgthree Date: Mon, 1 Jan 2024 18:20:00 -0500 Subject: [PATCH] Add help for the Image Comparer node. --- ts/image_comparer.ts | 54 ++++++++++++++++++++----------------------- web/image_comparer.js | 31 ++++++++++++++++++------- 2 files changed, 48 insertions(+), 37 deletions(-) diff --git a/ts/image_comparer.ts b/ts/image_comparer.ts index a710c54..c86aabc 100644 --- a/ts/image_comparer.ts +++ b/ts/image_comparer.ts @@ -42,16 +42,7 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { override onExecuted(output: any) { super.onExecuted?.(output); - // this.imgs = []; - // for (const imgData of output.images || []) { - // let img = new Image(); - // img.src = api.apiURL( - // `/view?filename=${encodeURIComponent(imgData.filename)}&type=${imgData.type}&subfolder=${ - // imgData.subfolder - // }${app.getPreviewFormatParam()}${app.getRandParam()}`, - // ); - // this.imgs.push(img); - // } + // Set the widget, it will then set the `node.imgs` property for us. this.canvasWidget!.value = (output.images || []).map((d: any) => api.apiURL( `/view?filename=${encodeURIComponent(d.filename)}&type=${d.type}&subfolder=${ d.subfolder @@ -59,11 +50,6 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { )); } - // override configure(info: SerializedLGraphNode): void { - // console.log('configure', info) - // super.configure?.(info); - // } - private drawWidgetImage(ctx: CanvasRenderingContext2D, image: InstanceType|undefined, y: number, cropX?: number) { if (!image?.naturalWidth || !image?.naturalHeight) { return; @@ -202,6 +188,30 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { this.pointerOverPos = [...pos]; } + override getHelp(): string { + return ` +

+ The ${this.type!.replace("(rgthree)", "",)} node compares two images on top of each other. + Two images must be provided, either using both the image_a and + image_b inputs, or using the first two images in a image_a batch. + Note, only two images can be compared; if the inputs contain multiple batches, only the + first image of each batch will be shown. +

+
    +
  • +

    + Properties. You can change the following properties (by right-clicking + on the node, and select "Properties" or "Properties Panel" from the menu): +

    +
      +

    • + comparer_mode - Choose between "Slide" and "Click". Defaults to "Slide". +

      • +
    +
    • +
`; + } + static override setUp(comfyClass: any) { RgthreeBaseServerNode.registerForOverride(comfyClass, RgthreeImageComparer); addConnectionLayoutSupport(RgthreeBaseServerNode, app, [ @@ -212,19 +222,8 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { RgthreeImageComparer.category = comfyClass.category; }); } - - override getExtraMenuOptions(canvas: LGraphCanvas, options: ContextMenuItem[]): void { - PreviewImageNodeForHacking?.prototype?.getExtraMenuOptions?.apply(this, [canvas, options]); - } - } -// Set a reference to the native PreviewImage node so we can use its `getExtraMenuOptions` method -// off its prototype (ComfyUI doesn't expose the method to set it up, so we can't hook in natively). -// This may not be super beneficial, since it's likely that it will always be options for the first -// image, but, that's ok. -let PreviewImageNodeForHacking: any; - app.registerExtension({ name: "rgthree.ImageComparer", async beforeRegisterNodeDef(nodeType: ComfyNodeConstructor, nodeData: ComfyObjectInfo) { @@ -233,8 +232,5 @@ app.registerExtension({ RgthreeImageComparer.nodeData = nodeData; RgthreeImageComparer.setUp(nodeType as any); } - if (nodeData.name === 'PreviewImage') { - PreviewImageNodeForHacking = nodeType; - } }, }); diff --git a/web/image_comparer.js b/web/image_comparer.js index 82256dd..981f90b 100644 --- a/web/image_comparer.js +++ b/web/image_comparer.js @@ -137,6 +137,29 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { (_a = super.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(this, event, pos, graphCanvas); this.pointerOverPos = [...pos]; } + getHelp() { + return ` +

+ The ${this.type.replace("(rgthree)", "")} node compares two images on top of each other. + Two images must be provided, either using both the image_a and + image_b inputs, or using the first two images in a image_a batch. + Note, only two images can be compared; if the inputs contain multiple batches, only the + first image of each batch will be shown. +

+
    +
  • +

    + Properties. You can change the following properties (by right-clicking + on the node, and select "Properties" or "Properties Panel" from the menu): +

    +
      +

    • + comparer_mode - Choose between "Slide" and "Click". Defaults to "Slide". +

      • +
    +
    • +
`; + } static setUp(comfyClass) { RgthreeBaseServerNode.registerForOverride(comfyClass, RgthreeImageComparer); addConnectionLayoutSupport(RgthreeBaseServerNode, app, [ @@ -147,10 +170,6 @@ export class RgthreeImageComparer extends RgthreeBaseServerNode { RgthreeImageComparer.category = comfyClass.category; }); } - getExtraMenuOptions(canvas, options) { - var _a, _b; - (_b = (_a = PreviewImageNodeForHacking === null || PreviewImageNodeForHacking === void 0 ? void 0 : PreviewImageNodeForHacking.prototype) === null || _a === void 0 ? void 0 : _a.getExtraMenuOptions) === null || _b === void 0 ? void 0 : _b.apply(this, [canvas, options]); - } } RgthreeImageComparer.title = NodeTypesString.IMAGE_COMPARER; RgthreeImageComparer.type = NodeTypesString.IMAGE_COMPARER; @@ -159,7 +178,6 @@ RgthreeImageComparer["@comparer_mode"] = { type: "combo", values: ["Slide", "Click"], }; -let PreviewImageNodeForHacking; app.registerExtension({ name: "rgthree.ImageComparer", async beforeRegisterNodeDef(nodeType, nodeData) { @@ -168,8 +186,5 @@ app.registerExtension({ RgthreeImageComparer.nodeData = nodeData; RgthreeImageComparer.setUp(nodeType); } - if (nodeData.name === 'PreviewImage') { - PreviewImageNodeForHacking = nodeType; - } }, });