added shortcuts to move it to previous/next frame on mask editor.

This commit is contained in:
bruefire
2023-12-10 10:53:26 +09:00
parent 4c8f3eb838
commit 7a9a7de0c2
4 changed files with 50 additions and 39 deletions
+3 -3
View File
@@ -1,16 +1,16 @@
import os, shutil
import folder_paths
from .AnimateDiffInpaint import LoadImagesFromDirInpaint
from .SequentialImageLoader import LoadImagesFromDirInpaint
NODE_CLASS_MAPPINGS = { "VFrame Loader With Mask Editor" : LoadImagesFromDirInpaint }
NODE_DISPLAY_NAME_MAPPINGS = { "VFrame Loader With Mask Editor" : "AnimateDiffInpaint" }
NODE_DISPLAY_NAME_MAPPINGS = { "VFrame Loader With Mask Editor" : "SequentialImageLoader" }
__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS']
module_js_directory = os.path.join(os.path.dirname(os.path.realpath(__file__)), "js")
application_root_directory = os.path.dirname(folder_paths.__file__)
application_web_extensions_directory = os.path.join(application_root_directory, "web", "extensions", "AnimateDiffInpaint")
application_web_extensions_directory = os.path.join(application_root_directory, "web", "extensions", "SequentialImageLoader")
if os.path.exists(application_web_extensions_directory):
shutil.rmtree(application_web_extensions_directory)
+24 -18
View File
@@ -260,24 +260,8 @@ class MaskEditorDialog extends ComfyDialog {
this.maskCanvas.getContext('2d').drawImage(prevBack, 0, 0, prevBack.width, prevBack.height);
}
});
var prevButton = this.createLeftButton("Prev",
() => {
if (this.#selectedIndex > 0) {
this.storeActiveToBack();
const params = new URLSearchParams(this.#paths[--this.#selectedIndex]);
this.image.src = new URL(api.apiURL("/view?" + params.toString()), window.location.href);
this.updateFrameNumberText();
}
});
var nextButton = this.createLeftButton("Next",
() => {
if (this.#selectedIndex < this.#paths.length - 1) {
this.storeActiveToBack();
const params = new URLSearchParams(this.#paths[++this.#selectedIndex]);
this.image.src = new URL(api.apiURL("/view?" + params.toString()), window.location.href);
this.updateFrameNumberText();
}
});
var prevButton = this.createLeftButton("Prev", () => this.moveToPrev());
var nextButton = this.createLeftButton("Next", () => this.moveToNext());
var cancelButton = this.createRightButton("Cancel", () => {
document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
@@ -549,6 +533,10 @@ class MaskEditorDialog extends ComfyDialog {
self.brush_size = Math.max(self.brush_size-2, 1);
} else if(event.key === 'Enter') {
self.save();
} else if (event.key == 'ArrowLeft') {
self.moveToPrev();
} else if (event.key == 'ArrowRight') {
self.moveToNext();
}
self.updateBrushPreview(self);
@@ -764,6 +752,24 @@ class MaskEditorDialog extends ComfyDialog {
this.frameNumberText.innerText = `${String(this.#selectedIndex + 1)} / ${String(this.#paths.length)}`;
}
moveToPrev() {
if (this.#selectedIndex > 0) {
this.storeActiveToBack();
const params = new URLSearchParams(this.#paths[--this.#selectedIndex]);
this.image.src = new URL(api.apiURL("/view?" + params.toString()), window.location.href);
this.updateFrameNumberText();
}
}
moveToNext() {
if (this.#selectedIndex < this.#paths.length - 1) {
this.storeActiveToBack();
const params = new URLSearchParams(this.#paths[++this.#selectedIndex]);
this.image.src = new URL(api.apiURL("/view?" + params.toString()), window.location.href);
this.updateFrameNumberText();
}
}
async save() {
this.storeActiveToBack();
+23 -18
View File
@@ -4,9 +4,11 @@ import { ComfyApp } from "../../../scripts/app.js";
import { api } from "../../../scripts/api.js";
import MaskEditorForVframes from "./MaskEditorForVframes.js";
let sequentialimageloader_getExtraMenuOptionsOverrided = false;
app.registerExtension({
name: "ComfyUI.animatediff.inpaint",
name: "ComfyUI.sequentialimageloader.inpaint",
async init(app)
{
@@ -38,25 +40,28 @@ app.registerExtension({
{
if (nodeData.name !== "VFrame Loader With Mask Editor")
return;
// menu initializing
const originalProto = nodeType.prototype.getExtraMenuOptions;
nodeType.prototype.getExtraMenuOptions = function (_, options){
// do original processing
originalProto.bind(this)(_, options);
// add mask menu
if (this.extVframes) {
options.push({
content: "Open in MaskEditor",
callback: (obj) => {
// ComfyApp.copyToClipspace(this);
// ComfyApp.clipspace_return_node = this;
ComfyApp.ext_open_maskeditor_for_vframes(this.widgets[0]);
}
});
if (!sequentialimageloader_getExtraMenuOptionsOverrided) {
// menu initializing
const originalProto = nodeType.prototype.getExtraMenuOptions;
nodeType.prototype.getExtraMenuOptions = function (_, options){
// do original processing
originalProto.bind(this)(_, options);
// add mask menu
if (this.extVframes) {
options.push({
content: "Open in MaskEditor",
callback: (obj) => {
// ComfyApp.copyToClipspace(this);
// ComfyApp.clipspace_return_node = this;
ComfyApp.ext_open_maskeditor_for_vframes(this.widgets[0]);
}
});
}
}
sequentialimageloader_getExtraMenuOptionsOverrided = true;
}
// head image drawing