Austin Mroz
38618d4eae
stdin is always flushed before yeilding. While this loses some potential speedup by processing video output on cpu while the gpu is processing the next batch of frames, it is likely incompatible with errors related to metadata which could not be replicated. For now, stdin is flushed to reduce the likelihood of regression. Fixed a mistaken ordering in the batch_manager node causing the unique_id to be overwritten. Re-add the dummy count value to the batch manager node in js. Without it, an error during the first batch step will result in teh batch manager node not being marked as stale. Since the batch_manager node exists only as an optional input, IS_CHANGED will never be called and there must be some external change to ensure it is still marked stale
1091 lines
46 KiB
JavaScript
Executable File
1091 lines
46 KiB
JavaScript
Executable File
import { app } from '../../../scripts/app.js'
|
|
import { api } from '../../../scripts/api.js'
|
|
import { applyTextReplacements } from "../../../scripts/utils.js";
|
|
|
|
function chainCallback(object, property, callback) {
|
|
if (object == undefined) {
|
|
//This should not happen.
|
|
console.error("Tried to add callback to non-existant object")
|
|
return;
|
|
}
|
|
if (property in object) {
|
|
const callback_orig = object[property]
|
|
object[property] = function () {
|
|
const r = callback_orig.apply(this, arguments);
|
|
callback.apply(this, arguments);
|
|
return r
|
|
};
|
|
} else {
|
|
object[property] = callback;
|
|
}
|
|
}
|
|
|
|
function injectHidden(widget) {
|
|
widget.computeSize = (target_width) => {
|
|
if (widget.hidden) {
|
|
return [0, -4];
|
|
}
|
|
return [target_width, 20];
|
|
};
|
|
widget._type = widget.type
|
|
Object.defineProperty(widget, "type", {
|
|
set : function(value) {
|
|
widget._type = value;
|
|
},
|
|
get : function() {
|
|
if (widget.hidden) {
|
|
return "hidden";
|
|
}
|
|
return widget._type;
|
|
}
|
|
});
|
|
}
|
|
|
|
const convDict = {
|
|
VHS_LoadImages : ["directory", null, "image_load_cap", "skip_first_images", "select_every_nth"],
|
|
VHS_LoadImagesPath : ["directory", "image_load_cap", "skip_first_images", "select_every_nth"],
|
|
VHS_VideoCombine : ["frame_rate", "loop_count", "filename_prefix", "format", "pingpong", "save_image"],
|
|
VHS_LoadVideo : ["video", "force_rate", "force_size", "frame_load_cap", "skip_first_frames", "select_every_nth"],
|
|
VHS_LoadVideoPath : ["video", "force_rate", "force_size", "frame_load_cap", "skip_first_frames", "select_every_nth"]
|
|
};
|
|
const renameDict = {VHS_VideoCombine : {save_output : "save_image"}}
|
|
function useKVState(nodeType) {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function () {
|
|
chainCallback(this, "onConfigure", function(info) {
|
|
if (!this.widgets) {
|
|
//Node has no widgets, there is nothing to restore
|
|
return
|
|
}
|
|
if (typeof(info.widgets_values) != "object") {
|
|
//widgets_values is in some unknown inactionable format
|
|
return
|
|
}
|
|
let widgetDict = info.widgets_values
|
|
if (info.widgets_values.length) {
|
|
//widgets_values is in the old list format
|
|
if (this.type in convDict) {
|
|
//widget does not have a conversion format provided
|
|
let convList = convDict[this.type];
|
|
if(info.widgets_values.length >= convList.length) {
|
|
//has all required fields
|
|
widgetDict = {}
|
|
for (let i = 0; i < convList.length; i++) {
|
|
if(!convList[i]) {
|
|
//Element should not be processed (upload button on load image sequence)
|
|
continue
|
|
}
|
|
widgetDict[convList[i]] = info.widgets_values[i];
|
|
}
|
|
} else {
|
|
//widgets_values is missing elements marked as required
|
|
//let it fall through to failure state
|
|
}
|
|
}
|
|
}
|
|
if (widgetDict.length == undefined) {
|
|
for (let w of this.widgets) {
|
|
if (w.name in widgetDict) {
|
|
w.value = widgetDict[w.name];
|
|
} else {
|
|
//Check for a legacy name that needs migrating
|
|
if (this.type in renameDict && w.name in renameDict[this.type]) {
|
|
if (renameDict[this.type][w.name] in widgetDict) {
|
|
w.value = widgetDict[renameDict[this.type][w.name]]
|
|
continue
|
|
}
|
|
}
|
|
//attempt to restore default value
|
|
let inputs = LiteGraph.getNodeType(this.type).nodeData.input;
|
|
let initialValue = null;
|
|
if (inputs?.required?.hasOwnProperty(w.name)) {
|
|
if (inputs.required[w.name][1]?.hasOwnProperty("default")) {
|
|
initialValue = inputs.required[w.name][1].default;
|
|
} else if (inputs.required[w.name][0].length) {
|
|
initialValue = inputs.required[w.name][0][0];
|
|
}
|
|
} else if (inputs?.optional?.hasOwnProperty(w.name)) {
|
|
if (inputs.optional[w.name][1]?.hasOwnProperty("default")) {
|
|
initialValue = inputs.optional[w.name][1].default;
|
|
} else if (inputs.optional[w.name][0].length) {
|
|
initialValue = inputs.optional[w.name][0][0];
|
|
}
|
|
}
|
|
if (initialValue) {
|
|
w.value = initialValue;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
//Saved data was not a map made by this method
|
|
//and a conversion dict for it does not exist
|
|
//It's likely an array and that has been blindly applied
|
|
if (info?.widgets_values?.length != this.widgets.length) {
|
|
//Widget could not have restored properly
|
|
//Note if multiple node loads fail, only the latest error dialog displays
|
|
app.ui.dialog.show("Failed to restore node: " + this.title + "\nPlease remove and re-add it.")
|
|
this.bgcolor = "#C00"
|
|
}
|
|
}
|
|
});
|
|
chainCallback(this, "onSerialize", function(info) {
|
|
info.widgets_values = {};
|
|
if (!this.widgets) {
|
|
//object has no widgets, there is nothing to store
|
|
return;
|
|
}
|
|
for (let w of this.widgets) {
|
|
info.widgets_values[w.name] = w.value;
|
|
}
|
|
});
|
|
})
|
|
}
|
|
|
|
function fitHeight(node) {
|
|
node.setSize([node.size[0], node.computeSize([node.size[0], node.size[1]])[1]])
|
|
node?.graph?.setDirtyCanvas(true);
|
|
}
|
|
|
|
async function uploadFile(file) {
|
|
//TODO: Add uploaded file to cache with Cache.put()?
|
|
try {
|
|
// Wrap file in formdata so it includes filename
|
|
const body = new FormData();
|
|
const i = file.webkitRelativePath.lastIndexOf('/');
|
|
const subfolder = file.webkitRelativePath.slice(0,i+1)
|
|
const new_file = new File([file], file.name, {
|
|
type: file.type,
|
|
lastModified: file.lastModified,
|
|
});
|
|
body.append("image", new_file);
|
|
if (i > 0) {
|
|
body.append("subfolder", subfolder);
|
|
}
|
|
const resp = await api.fetchApi("/upload/image", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
return resp.status
|
|
} else {
|
|
alert(resp.status + " - " + resp.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
function addDateFormatting(nodeType, field, timestamp_widget = false) {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const widget = this.widgets.find((w) => w.name === field);
|
|
widget.serializeValue = () => {
|
|
return applyTextReplacements(app, widget.value);
|
|
};
|
|
});
|
|
}
|
|
function addTimestampWidget(nodeType, nodeData, targetWidget) {
|
|
const newWidgets = {};
|
|
for (let key in nodeData.input.required) {
|
|
if (key == targetWidget) {
|
|
//TODO: account for duplicate entries?
|
|
newWidgets["timestamp_directory"] = ["BOOLEAN", {"default": true}]
|
|
}
|
|
newWidgets[key] = nodeData.input.required[key];
|
|
}
|
|
nodeDta.input.required = newWidgets;
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function () {
|
|
const directoryWidget = this.widgets.find((w) => w.name === "directory_name");
|
|
const timestampWidget = this.widgets.find((w) => w.name === "timestamp_directory");
|
|
directoryWidget.serializeValue = () => {
|
|
if (timestampWidget.value) {
|
|
//ignore actual value and return timestamp
|
|
return formatDate("yyyy-MM-ddThh:mm:ss", new Date());
|
|
}
|
|
return directoryWidget.value
|
|
};
|
|
timestampWidget._value = value;
|
|
Object.definteProperty(timestampWidget, "value", {
|
|
set : function(value) {
|
|
this._value = value;
|
|
directoryWidget.disabled = value;
|
|
},
|
|
get : function() {
|
|
return this._value;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function addCustomSize(nodeType, nodeData, widgetName) {
|
|
//Add a callback which sets up the actual logic once the node is created
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const node = this;
|
|
const sizeOptionWidget = node.widgets.find((w) => w.name === widgetName);
|
|
const widthWidget = node.widgets.find((w) => w.name === "custom_width");
|
|
const heightWidget = node.widgets.find((w) => w.name === "custom_height");
|
|
injectHidden(widthWidget);
|
|
injectHidden(heightWidget);
|
|
sizeOptionWidget._value = sizeOptionWidget.value;
|
|
Object.defineProperty(sizeOptionWidget, "value", {
|
|
set : function(value) {
|
|
//TODO: Only modify hidden/reset size when a change occurs
|
|
if (value == "Custom Width") {
|
|
widthWidget.hidden = false;
|
|
heightWidget.hidden = true;
|
|
} else if (value == "Custom Height") {
|
|
widthWidget.hidden = true;
|
|
heightWidget.hidden = false;
|
|
} else if (value == "Custom") {
|
|
widthWidget.hidden = false;
|
|
heightWidget.hidden = false;
|
|
} else{
|
|
widthWidget.hidden = true;
|
|
heightWidget.hidden = true;
|
|
}
|
|
node.setSize([node.size[0], node.computeSize([node.size[0], node.size[1]])[1]])
|
|
this._value = value;
|
|
},
|
|
get : function() {
|
|
return this._value;
|
|
}
|
|
});
|
|
//Ensure proper visibility/size state for initial value
|
|
sizeOptionWidget.value = sizeOptionWidget._value;
|
|
|
|
sizeOptionWidget.serializePreview = function() {
|
|
if (this.value == "Custom Width") {
|
|
return widthWidget.value + "x?";
|
|
} else if (this.value == "Custom Height") {
|
|
return "?x" + heightWidget.value;
|
|
} else if (this.value == "Custom") {
|
|
return widthWidget.value + "x" + heightWidget.value;
|
|
} else {
|
|
return this.value;
|
|
}
|
|
};
|
|
});
|
|
}
|
|
function addUploadWidget(nodeType, nodeData, widgetName, type="video") {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === widgetName);
|
|
const fileInput = document.createElement("input");
|
|
chainCallback(this, "onRemoved", () => {
|
|
fileInput?.remove();
|
|
});
|
|
if (type == "folder") {
|
|
Object.assign(fileInput, {
|
|
type: "file",
|
|
style: "display: none",
|
|
webkitdirectory: true,
|
|
onchange: async () => {
|
|
const directory = fileInput.files[0].webkitRelativePath;
|
|
const i = directory.lastIndexOf('/');
|
|
if (i <= 0) {
|
|
throw "No directory found";
|
|
}
|
|
const path = directory.slice(0,directory.lastIndexOf('/'))
|
|
if (pathWidget.options.values.includes(path)) {
|
|
alert("A folder of the same name already exists");
|
|
return;
|
|
}
|
|
let successes = 0;
|
|
for(const file of fileInput.files) {
|
|
if (await uploadFile(file) == 200) {
|
|
successes++;
|
|
} else {
|
|
//Upload failed, but some prior uploads may have succeeded
|
|
//Stop future uploads to prevent cascading failures
|
|
//and only add to list if an upload has succeeded
|
|
if (successes > 0) {
|
|
break
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
pathWidget.options.values.push(path);
|
|
pathWidget.value = path;
|
|
if (pathWidget.callback) {
|
|
pathWidget.callback(path)
|
|
}
|
|
},
|
|
});
|
|
} else if (type == "video") {
|
|
Object.assign(fileInput, {
|
|
type: "file",
|
|
accept: "video/webm,video/mp4,video/mkv,image/gif",
|
|
style: "display: none",
|
|
onchange: async () => {
|
|
if (fileInput.files.length) {
|
|
if (await uploadFile(fileInput.files[0]) != 200) {
|
|
//upload failed and file can not be added to options
|
|
return;
|
|
}
|
|
const filename = fileInput.files[0].name;
|
|
pathWidget.options.values.push(filename);
|
|
pathWidget.value = filename;
|
|
if (pathWidget.callback) {
|
|
pathWidget.callback(filename)
|
|
}
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
throw "Unknown upload type"
|
|
}
|
|
document.body.append(fileInput);
|
|
let uploadWidget = this.addWidget("button", "choose " + type + " to upload", "image", () => {
|
|
//clear the active click event
|
|
app.canvas.node_widget = null
|
|
|
|
fileInput.click();
|
|
});
|
|
uploadWidget.options.serialize = false;
|
|
});
|
|
}
|
|
|
|
function addVideoPreview(nodeType) {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
var element = document.createElement("div");
|
|
const previewNode = this;
|
|
var previewWidget = this.addDOMWidget("videopreview", "preview", element, {
|
|
serialize: false,
|
|
hideOnZoom: false,
|
|
getValue() {
|
|
return element.value;
|
|
},
|
|
setValue(v) {
|
|
element.value = v;
|
|
},
|
|
});
|
|
previewWidget.computeSize = function(width) {
|
|
if (this.aspectRatio && !this.parentEl.hidden) {
|
|
let height = (previewNode.size[0]-20)/ this.aspectRatio + 10;
|
|
if (!(height > 0)) {
|
|
height = 0;
|
|
}
|
|
this.computedHeight = height + 10;
|
|
return [width, height];
|
|
}
|
|
return [width, -4];//no loaded src, widget should not display
|
|
}
|
|
element.style['pointer-events'] = "none"
|
|
previewWidget.value = {hidden: false, paused: false, params: {}}
|
|
previewWidget.parentEl = document.createElement("div");
|
|
previewWidget.parentEl.className = "vhs_preview";
|
|
previewWidget.parentEl.style['width'] = "100%"
|
|
element.appendChild(previewWidget.parentEl);
|
|
previewWidget.videoEl = document.createElement("video");
|
|
previewWidget.videoEl.controls = false;
|
|
previewWidget.videoEl.loop = true;
|
|
previewWidget.videoEl.muted = true;
|
|
previewWidget.videoEl.style['width'] = "100%"
|
|
previewWidget.videoEl.addEventListener("loadedmetadata", () => {
|
|
|
|
previewWidget.aspectRatio = previewWidget.videoEl.videoWidth / previewWidget.videoEl.videoHeight;
|
|
fitHeight(this);
|
|
});
|
|
previewWidget.videoEl.addEventListener("error", () => {
|
|
//TODO: consider a way to properly notify the user why a preview isn't shown.
|
|
previewWidget.parentEl.hidden = true;
|
|
fitHeight(this);
|
|
});
|
|
|
|
previewWidget.imgEl = document.createElement("img");
|
|
previewWidget.imgEl.style['width'] = "100%"
|
|
previewWidget.imgEl.hidden = true;
|
|
previewWidget.imgEl.onload = () => {
|
|
previewWidget.aspectRatio = previewWidget.imgEl.naturalWidth / previewWidget.imgEl.naturalHeight;
|
|
fitHeight(this);
|
|
};
|
|
|
|
var timeout = null;
|
|
this.updateParameters = (params, force_update) => {
|
|
if (!previewWidget.value.params) {
|
|
if(typeof(previewWidget.value != 'object')) {
|
|
previewWidget.value = {hidden: false, paused: false}
|
|
}
|
|
previewWidget.value.params = {}
|
|
}
|
|
Object.assign(previewWidget.value.params, params)
|
|
if (!force_update &&
|
|
!app.ui.settings.getSettingValue("VHS.AdvancedPreviews", false)) {
|
|
return;
|
|
}
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
if (force_update) {
|
|
previewWidget.updateSource();
|
|
} else {
|
|
timeout = setTimeout(() => previewWidget.updateSource(),100);
|
|
}
|
|
};
|
|
previewWidget.updateSource = function () {
|
|
if (this.value.params == undefined) {
|
|
return;
|
|
}
|
|
let params = {}
|
|
Object.assign(params, this.value.params);//shallow copy
|
|
this.parentEl.hidden = this.value.hidden;
|
|
if (params.format?.split('/')[0] == 'video' ||
|
|
app.ui.settings.getSettingValue("VHS.AdvancedPreviews", false) &&
|
|
(params.format?.split('/')[1] == 'gif') || params.format == 'folder') {
|
|
this.videoEl.autoplay = !this.value.paused && !this.value.hidden;
|
|
let target_width = 256
|
|
if (element.style?.width) {
|
|
//overscale to allow scrolling. Endpoint won't return higher than native
|
|
target_width = element.style.width.slice(0,-2)*2;
|
|
}
|
|
if (!params.force_size || params.force_size.includes("?") || params.force_size == "Disabled") {
|
|
params.force_size = target_width+"x?"
|
|
} else {
|
|
let size = params.force_size.split("x")
|
|
let ar = parseInt(size[0])/parseInt(size[1])
|
|
params.force_size = target_width+"x"+(target_width/ar)
|
|
}
|
|
if (app.ui.settings.getSettingValue("VHS.AdvancedPreviews", false)) {
|
|
this.videoEl.src = api.apiURL('/viewvideo?' + new URLSearchParams(params));
|
|
} else {
|
|
previewWidget.videoEl.src = api.apiURL('/view?' + new URLSearchParams(params));
|
|
}
|
|
this.videoEl.hidden = false;
|
|
this.imgEl.hidden = true;
|
|
} else if (params.format?.split('/')[0] == 'image'){
|
|
//Is animated image
|
|
this.imgEl.src = api.apiURL('/view?' + new URLSearchParams(params));
|
|
this.videoEl.hidden = true;
|
|
this.imgEl.hidden = false;
|
|
}
|
|
}
|
|
previewWidget.parentEl.appendChild(previewWidget.videoEl)
|
|
previewWidget.parentEl.appendChild(previewWidget.imgEl)
|
|
});
|
|
}
|
|
function addPreviewOptions(nodeType) {
|
|
chainCallback(nodeType.prototype, "getExtraMenuOptions", function(_, options) {
|
|
// The intended way of appending options is returning a list of extra options,
|
|
// but this isn't used in widgetInputs.js and would require
|
|
// less generalization of chainCallback
|
|
let optNew = []
|
|
const previewWidget = this.widgets.find((w) => w.name === "videopreview");
|
|
|
|
let url = null
|
|
if (previewWidget.videoEl?.hidden == false && previewWidget.videoEl.src) {
|
|
//Use full quality video
|
|
url = api.apiURL('/view?' + new URLSearchParams(previewWidget.value.params));
|
|
} else if (previewWidget.imgEl?.hidden == false && previewWidget.imgEl.src) {
|
|
url = previewWidget.imgEl.src;
|
|
url = new URL(url);
|
|
}
|
|
if (url) {
|
|
optNew.push(
|
|
{
|
|
content: "Open preview",
|
|
callback: () => {
|
|
window.open(url, "_blank")
|
|
},
|
|
},
|
|
{
|
|
content: "Save preview",
|
|
callback: () => {
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.setAttribute("download", new URLSearchParams(previewWidget.value.params).get("filename"));
|
|
document.body.append(a);
|
|
a.click();
|
|
requestAnimationFrame(() => a.remove());
|
|
},
|
|
}
|
|
);
|
|
}
|
|
const PauseDesc = (previewWidget.value.paused ? "Resume" : "Pause") + " preview";
|
|
if(previewWidget.videoEl.hidden == false) {
|
|
optNew.push({content: PauseDesc, callback: () => {
|
|
//animated images can't be paused and are more likely to cause performance issues.
|
|
//changing src to a single keyframe is possible,
|
|
//For now, the option is disabled if an animated image is being displayed
|
|
if(previewWidget.value.paused) {
|
|
previewWidget.videoEl?.play();
|
|
} else {
|
|
previewWidget.videoEl?.pause();
|
|
}
|
|
previewWidget.value.paused = !previewWidget.value.paused;
|
|
}});
|
|
}
|
|
//TODO: Consider hiding elements if no video preview is available yet.
|
|
//It would reduce confusion at the cost of functionality
|
|
//(if a video preview lags the computer, the user should be able to hide in advance)
|
|
const visDesc = (previewWidget.value.hidden ? "Show" : "Hide") + " preview";
|
|
optNew.push({content: visDesc, callback: () => {
|
|
if (!previewWidget.videoEl.hidden && !previewWidget.value.hidden) {
|
|
previewWidget.videoEl.pause();
|
|
} else if (previewWidget.value.hidden && !previewWidget.videoEl.hidden && !previewWidget.value.paused) {
|
|
previewWidget.videoEl.play();
|
|
}
|
|
previewWidget.value.hidden = !previewWidget.value.hidden;
|
|
previewWidget.parentEl.hidden = previewWidget.value.hidden;
|
|
fitHeight(this);
|
|
|
|
}});
|
|
optNew.push({content: "Sync preview", callback: () => {
|
|
//TODO: address case where videos have varying length
|
|
//Consider a system of sync groups which are opt-in?
|
|
for (let p of document.getElementsByClassName("vhs_preview")) {
|
|
for (let child of p.children) {
|
|
if (child.tagName == "VIDEO") {
|
|
child.currentTime=0;
|
|
} else if (child.tagName == "IMG") {
|
|
child.src = child.src;
|
|
}
|
|
}
|
|
}
|
|
}});
|
|
if(options.length > 0 && options[0] != null && optNew.length > 0) {
|
|
optNew.push(null);
|
|
}
|
|
options.unshift(...optNew);
|
|
});
|
|
}
|
|
function addFormatWidgets(nodeType) {
|
|
function parseFormats(options) {
|
|
options.fullvalues = options._values;
|
|
options._values = [];
|
|
for (let format of options.fullvalues) {
|
|
if (Array.isArray(format)) {
|
|
options._values.push(format[0]);
|
|
} else {
|
|
options._values.push(format);
|
|
}
|
|
}
|
|
}
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
var formatWidget = null;
|
|
var formatWidgetIndex = -1;
|
|
for(let i = 0; i < this.widgets.length; i++) {
|
|
if (this.widgets[i].name === "format"){
|
|
formatWidget = this.widgets[i];
|
|
formatWidgetIndex = i+1;
|
|
}
|
|
}
|
|
let formatWidgetsCount = 0;
|
|
//Pre-process options to just names
|
|
formatWidget.options._values = formatWidget.options.values;
|
|
parseFormats(formatWidget.options);
|
|
Object.defineProperty(formatWidget.options, "values", {
|
|
set : (value) => {
|
|
formatWidget.options._values = value;
|
|
parseFormats(formatWidget.options);
|
|
},
|
|
get : () => {
|
|
return formatWidget.options._values;
|
|
}
|
|
})
|
|
|
|
formatWidget._value = formatWidget.value;
|
|
Object.defineProperty(formatWidget, "value", {
|
|
set : (value) => {
|
|
formatWidget._value = value;
|
|
let newWidgets = [];
|
|
const fullDef = formatWidget.options.fullvalues.find((w) => Array.isArray(w) ? w[0] === value : w === value);
|
|
if (!Array.isArray(fullDef)) {
|
|
formatWidget._value = value;
|
|
} else {
|
|
formatWidget._value = fullDef[0];
|
|
for (let wDef of fullDef[1]) {
|
|
//create widgets. Heavy borrowed from web/scripts/app.js
|
|
//default implementation doesn't work since it automatically adds
|
|
//the widget in the wrong spot.
|
|
//TODO: consider letting this happen and just removing from list?
|
|
let w = {};
|
|
w.name = wDef[0];
|
|
let inputData = wDef.slice(1);
|
|
w.type = inputData[0];
|
|
w.options = inputData[1] ? inputData[1] : {};
|
|
if (Array.isArray(w.type)) {
|
|
w.value = w.type[0];
|
|
w.options.values = w.type;
|
|
w.type = "combo";
|
|
}
|
|
if(inputData[1]?.default) {
|
|
w.value = inputData[1].default;
|
|
}
|
|
if (w.type == "INT") {
|
|
Object.assign(w.options, {"precision": 0, "step": 10})
|
|
w.callback = function (v) {
|
|
const s = this.options.step / 10;
|
|
this.value = Math.round(v / s) * s;
|
|
}
|
|
}
|
|
const typeTable = {BOOLEAN: "toggle", STRING: "text", INT: "number", FLOAT: "number"};
|
|
if (w.type in typeTable) {
|
|
w.type = typeTable[w.type];
|
|
}
|
|
newWidgets.push(w);
|
|
}
|
|
}
|
|
this.widgets.splice(formatWidgetIndex, formatWidgetsCount, ...newWidgets);
|
|
fitHeight(this);
|
|
formatWidgetsCount = newWidgets.length;
|
|
},
|
|
get : () => {
|
|
return formatWidget._value;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
function addLoadVideoCommon(nodeType, nodeData) {
|
|
addCustomSize(nodeType, nodeData, "force_size")
|
|
addVideoPreview(nodeType);
|
|
addPreviewOptions(nodeType);
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "video");
|
|
const frameCapWidget = this.widgets.find((w) => w.name === 'frame_load_cap');
|
|
const frameSkipWidget = this.widgets.find((w) => w.name === 'skip_first_frames');
|
|
const rateWidget = this.widgets.find((w) => w.name === 'force_rate');
|
|
const skipWidget = this.widgets.find((w) => w.name === 'select_every_nth');
|
|
const sizeWidget = this.widgets.find((w) => w.name === 'force_size');
|
|
//widget.callback adds unused arguements which need culling
|
|
let update = function (value, _, node) {
|
|
let param = {}
|
|
param[this.name] = value
|
|
node.updateParameters(param);
|
|
}
|
|
chainCallback(frameCapWidget, "callback", update);
|
|
chainCallback(frameSkipWidget, "callback", update);
|
|
chainCallback(rateWidget, "callback", update);
|
|
chainCallback(skipWidget, "callback", update);
|
|
let priorSize = sizeWidget.value;
|
|
let updateSize = function(value, _, node) {
|
|
if (sizeWidget.value == 'Custom' || priorSize != sizeWidget.value) {
|
|
node.updateParameters({"force_size": sizeWidget.serializePreview()});
|
|
}
|
|
priorSize = sizeWidget.value;
|
|
}
|
|
chainCallback(sizeWidget, "callback", updateSize);
|
|
chainCallback(this.widgets.find((w) => w.name === "custom_width"), "callback", updateSize);
|
|
chainCallback(this.widgets.find((w) => w.name === "custom_height"), "callback", updateSize);
|
|
|
|
//do first load
|
|
requestAnimationFrame(() => {
|
|
for (let w of [frameCapWidget, frameSkipWidget, rateWidget, pathWidget, skipWidget]) {
|
|
w.callback(w.value, null, this);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
function addLoadImagesCommon(nodeType, nodeData) {
|
|
addVideoPreview(nodeType);
|
|
addPreviewOptions(nodeType);
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "directory");
|
|
const frameCapWidget = this.widgets.find((w) => w.name === 'image_load_cap');
|
|
const frameSkipWidget = this.widgets.find((w) => w.name === 'skip_first_images');
|
|
const skipWidget = this.widgets.find((w) => w.name === 'select_every_nth');
|
|
//widget.callback adds unused arguements which need culling
|
|
let update = function (value, _, node) {
|
|
let param = {}
|
|
param[this.name] = value
|
|
node.updateParameters(param);
|
|
}
|
|
chainCallback(frameCapWidget, "callback", (value, _, node) => {
|
|
node.updateParameters({frame_load_cap: value})
|
|
});
|
|
chainCallback(frameSkipWidget, "callback", update);
|
|
chainCallback(skipWidget, "callback", update);
|
|
//do first load
|
|
requestAnimationFrame(() => {
|
|
for (let w of [frameCapWidget, frameSkipWidget, pathWidget, skipWidget]) {
|
|
w.callback(w.value, null, this);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function path_stem(path) {
|
|
let i = path.lastIndexOf("/");
|
|
if (i >= 0) {
|
|
return [path.slice(0,i+1),path.slice(i+1)];
|
|
}
|
|
return ["",path];
|
|
}
|
|
function searchBox(event, [x,y], node) {
|
|
//Ensure only one dialogue shows at a time
|
|
if (this.prompt)
|
|
return;
|
|
this.prompt = true;
|
|
|
|
let pathWidget = this;
|
|
let dialog = document.createElement("div");
|
|
dialog.className = "litegraph litesearchbox graphdialog rounded"
|
|
dialog.innerHTML = '<span class="name">Path</span> <input autofocus="" type="text" class="value"><button class="rounded">OK</button><div class="helper"></div>'
|
|
dialog.close = () => {
|
|
dialog.remove();
|
|
}
|
|
document.body.append(dialog);
|
|
if (app.canvas.ds.scale > 1) {
|
|
dialog.style.transform = "scale(" + app.canvas.ds.scale + ")";
|
|
}
|
|
var name_element = dialog.querySelector(".name");
|
|
var input = dialog.querySelector(".value");
|
|
var options_element = dialog.querySelector(".helper");
|
|
input.value = pathWidget.value;
|
|
|
|
var timeout = null;
|
|
let last_path = null;
|
|
let extensions = pathWidget.options.extensions
|
|
|
|
input.addEventListener("keydown", (e) => {
|
|
dialog.is_modified = true;
|
|
if (e.keyCode == 27) {
|
|
//ESC
|
|
dialog.close();
|
|
} else if (e.keyCode == 13 && e.target.localName != "textarea") {
|
|
pathWidget.value = input.value;
|
|
if (pathWidget.callback) {
|
|
pathWidget.callback(pathWidget.value);
|
|
}
|
|
dialog.close();
|
|
} else {
|
|
if (e.keyCode == 9) {
|
|
//TAB
|
|
input.value = last_path + options_element.firstChild.innerText;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
} else if (e.ctrlKey && e.keyCode == 87) {
|
|
//Ctrl+w
|
|
//most browsers won't support, but it's good QOL for those that do
|
|
input.value = path_stem(input.value.slice(0,-1))[0]
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
} else if (e.ctrlKey && e.keyCode == 71) {
|
|
//Ctrl+g
|
|
//Temporarily disables extension filtering to show all files
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
extensions = undefined
|
|
last_path = null;
|
|
}
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(updateOptions, 10);
|
|
return;
|
|
}
|
|
this.prompt=false;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
|
|
var button = dialog.querySelector("button");
|
|
button.addEventListener("click", (e) => {
|
|
pathWidget.value = input.value;
|
|
if (pathWidget.callback) {
|
|
pathWidget.callback(pathWidget.value);
|
|
}
|
|
//unsure why dirty is set here, but not on enter-key above
|
|
node.graph.setDirtyCanvas(true);
|
|
dialog.close();
|
|
this.prompt = false;
|
|
});
|
|
var rect = app.canvas.canvas.getBoundingClientRect();
|
|
var offsetx = -20;
|
|
var offsety = -20;
|
|
if (rect) {
|
|
offsetx -= rect.left;
|
|
offsety -= rect.top;
|
|
}
|
|
|
|
if (event) {
|
|
dialog.style.left = event.clientX + offsetx + "px";
|
|
dialog.style.top = event.clientY + offsety + "px";
|
|
} else {
|
|
dialog.style.left = canvas.width * 0.5 + offsetx + "px";
|
|
dialog.style.top = canvas.height * 0.5 + offsety + "px";
|
|
}
|
|
//Search code
|
|
let options = []
|
|
function addResult(name, isDir) {
|
|
let el = document.createElement("div");
|
|
el.innerText = name;
|
|
el.className = "litegraph lite-search-item";
|
|
if (isDir) {
|
|
el.className += " is-dir";
|
|
el.addEventListener("click", (e) => {
|
|
input.value = last_path+name
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(updateOptions, 10);
|
|
});
|
|
} else {
|
|
el.addEventListener("click", (e) => {
|
|
pathWidget.value = last_path+name;
|
|
if (pathWidget.callback) {
|
|
pathWidget.callback(pathWidget.value);
|
|
}
|
|
dialog.close();
|
|
pathWidget.prompt = false;
|
|
});
|
|
}
|
|
options_element.appendChild(el);
|
|
}
|
|
async function updateOptions() {
|
|
timeout = null;
|
|
let [path, remainder] = path_stem(input.value);
|
|
if (last_path != path) {
|
|
//fetch options. Must block execution here, so update should be async?
|
|
let params = {path : path}
|
|
if (extensions) {
|
|
params.extensions = extensions
|
|
}
|
|
let optionsURL = api.apiURL('getpath?' + new URLSearchParams(params));
|
|
try {
|
|
let resp = await fetch(optionsURL);
|
|
options = await resp.json();
|
|
} catch(e) {
|
|
options = []
|
|
}
|
|
last_path = path;
|
|
}
|
|
options_element.innerHTML = '';
|
|
//filter options based on remainder
|
|
for (let option of options) {
|
|
if (option.startsWith(remainder)) {
|
|
let isDir = option.endsWith('/')
|
|
addResult(option, isDir);
|
|
}
|
|
}
|
|
}
|
|
|
|
setTimeout(async function() {
|
|
input.focus();
|
|
await updateOptions();
|
|
}, 10);
|
|
|
|
return dialog;
|
|
}
|
|
|
|
app.ui.settings.addSetting({
|
|
id: "VHS.AdvancedPreviews",
|
|
name: "🎥🅥🅗🅢 Advanced Previews",
|
|
type: "boolean",
|
|
defaultValue: false,
|
|
});
|
|
|
|
app.registerExtension({
|
|
name: "VideoHelperSuite.Core",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if(nodeData?.name?.startsWith("VHS_")) {
|
|
useKVState(nodeType);
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function () {
|
|
let new_widgets = []
|
|
if (this.widgets) {
|
|
for (let w of this.widgets) {
|
|
let input = this.constructor.nodeData.input
|
|
let config = input?.required[w.name] ?? input.optional[w.name]
|
|
if (!config) {
|
|
continue
|
|
}
|
|
if (w?.type == "text" && config[1].vhs_path_extensions) {
|
|
new_widgets.push(app.widgets.VHSPATH({}, w.name, ["VHSPATH", config[1]]));
|
|
} else {
|
|
new_widgets.push(w)
|
|
}
|
|
}
|
|
this.widgets = new_widgets;
|
|
}
|
|
});
|
|
}
|
|
if (nodeData?.name == "VHS_LoadImages") {
|
|
addUploadWidget(nodeType, nodeData, "directory", "folder");
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "directory");
|
|
chainCallback(pathWidget, "callback", (value) => {
|
|
if (!value) {
|
|
return;
|
|
}
|
|
let params = {filename : value, type : "input", format: "folder"};
|
|
this.updateParameters(params, true);
|
|
});
|
|
});
|
|
addLoadImagesCommon(nodeType, nodeData);
|
|
} else if (nodeData?.name == "VHS_LoadImagesPath") {
|
|
addUploadWidget(nodeType, nodeData, "directory", "folder");
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "directory");
|
|
chainCallback(pathWidget, "callback", (value) => {
|
|
if (!value) {
|
|
return;
|
|
}
|
|
let params = {filename : value, type : "path", format: "folder"};
|
|
this.updateParameters(params, true);
|
|
});
|
|
});
|
|
addLoadImagesCommon(nodeType, nodeData);
|
|
} else if (nodeData?.name == "VHS_LoadVideo") {
|
|
addUploadWidget(nodeType, nodeData, "video");
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "video");
|
|
chainCallback(pathWidget, "callback", (value) => {
|
|
if (!value) {
|
|
return;
|
|
}
|
|
let parts = ["input", value];
|
|
let extension_index = parts[1].lastIndexOf(".");
|
|
let extension = parts[1].slice(extension_index+1);
|
|
let format = "video"
|
|
if (["gif", "webp", "avif"].includes(extension)) {
|
|
format = "image"
|
|
}
|
|
format += "/" + extension;
|
|
let params = {filename : parts[1], type : parts[0], format: format};
|
|
this.updateParameters(params, true);
|
|
});
|
|
});
|
|
addLoadVideoCommon(nodeType, nodeData);
|
|
} else if (nodeData?.name =="VHS_LoadVideoPath") {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
const pathWidget = this.widgets.find((w) => w.name === "video");
|
|
chainCallback(pathWidget, "callback", (value) => {
|
|
let extension_index = value.lastIndexOf(".");
|
|
let extension = value.slice(extension_index+1);
|
|
let format = "video"
|
|
if (["gif", "webp", "avif"].includes(extension)) {
|
|
format = "image"
|
|
}
|
|
format += "/" + extension;
|
|
let params = {filename : value, type: "path", format: format};
|
|
this.updateParameters(params, true);
|
|
});
|
|
});
|
|
addLoadVideoCommon(nodeType, nodeData);
|
|
} else if (nodeData?.name == "VHS_VideoCombine") {
|
|
addDateFormatting(nodeType, "filename_prefix");
|
|
chainCallback(nodeType.prototype, "onExecuted", function(message) {
|
|
if (message?.gifs) {
|
|
this.updateParameters(message.gifs[0], true);
|
|
}
|
|
});
|
|
addVideoPreview(nodeType);
|
|
addPreviewOptions(nodeType);
|
|
addFormatWidgets(nodeType);
|
|
|
|
//Hide the information passing 'gif' output
|
|
//TODO: check how this is implemented for save image
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
this._outputs = this.outputs
|
|
Object.defineProperty(this, "outputs", {
|
|
set : function(value) {
|
|
this._outputs = value;
|
|
requestAnimationFrame(() => {
|
|
if (app.nodeOutputs[this.id + ""]) {
|
|
this.updateParameters(app.nodeOutputs[this.id+""].gifs[0], true);
|
|
}
|
|
})
|
|
},
|
|
get : function() {
|
|
return this._outputs;
|
|
}
|
|
});
|
|
//Display previews after reload/ loading workflow
|
|
requestAnimationFrame(() => {this.updateParameters({}, true);});
|
|
});
|
|
} else if (nodeData?.name == "VHS_SaveImageSequence") {
|
|
//Disabled for safety as VHS_SaveImageSequence is not currently merged
|
|
//addDateFormating(nodeType, "directory_name", timestamp_widget=true);
|
|
//addTimestampWidget(nodeType, nodeData, "directory_name")
|
|
} else if (nodeData?.name == "VHS_BatchManager") {
|
|
chainCallback(nodeType.prototype, "onNodeCreated", function() {
|
|
this.widgets.push({name: "count", type: "dummy", value: 0,
|
|
computeSize: () => {return [0,-4]},
|
|
afterQueued: function() {this.value++;}});
|
|
});
|
|
}
|
|
},
|
|
async getCustomWidgets() {
|
|
return {
|
|
VHSPATH(node, inputName, inputData) {
|
|
let w = {
|
|
name : inputName,
|
|
type : "VHS.PATH",
|
|
value : "",
|
|
draw : function(ctx, node, widget_width, y, H) {
|
|
//Adapted from litegraph.core.js:drawNodeWidgets
|
|
var show_text = app.canvas.ds.scale > 0.5;
|
|
var margin = 15;
|
|
var text_color = LiteGraph.WIDGET_TEXT_COLOR;
|
|
var secondary_text_color = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR;
|
|
ctx.textAlign = "left";
|
|
ctx.strokeStyle = LiteGraph.WIDGET_OUTLINE_COLOR;
|
|
ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR;
|
|
ctx.beginPath();
|
|
if (show_text)
|
|
ctx.roundRect(margin, y, widget_width - margin * 2, H, [H * 0.5]);
|
|
else
|
|
ctx.rect( margin, y, widget_width - margin * 2, H );
|
|
ctx.fill();
|
|
if (show_text) {
|
|
if(!this.disabled)
|
|
ctx.stroke();
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.rect(margin, y, widget_width - margin * 2, H);
|
|
ctx.clip();
|
|
|
|
//ctx.stroke();
|
|
ctx.fillStyle = secondary_text_color;
|
|
const label = this.label || this.name;
|
|
if (label != null) {
|
|
ctx.fillText(label, margin * 2, y + H * 0.7);
|
|
}
|
|
ctx.fillStyle = text_color;
|
|
ctx.textAlign = "right";
|
|
let disp_text = this.format_path(String(this.value))
|
|
ctx.fillText(disp_text, widget_width - margin * 2, y + H * 0.7); //30 chars max
|
|
ctx.restore();
|
|
}
|
|
},
|
|
mouse : searchBox,
|
|
options : {},
|
|
format_path : function(path) {
|
|
//Formats the full path to be under 30 characters
|
|
if (path.length <= 30) {
|
|
return path;
|
|
}
|
|
let filename = path_stem(path)[1]
|
|
if (filename.length > 28) {
|
|
//may all fit, but can't squeeze more info
|
|
return filename.substr(0,30);
|
|
}
|
|
//TODO: find solution for windows, path[1] == ':'?
|
|
let isAbs = path[0] == '/';
|
|
let partial = path.substr(path.length - (isAbs ? 28:29))
|
|
let cutoff = partial.indexOf('/');
|
|
if (cutoff < 0) {
|
|
//Can occur, but there isn't a nicer way to format
|
|
return path.substr(path.length-30);
|
|
}
|
|
return (isAbs ? '/…':'…') + partial.substr(cutoff);
|
|
|
|
}
|
|
};
|
|
if (inputData.length > 1) {
|
|
if (inputData[1].vhs_path_extensions) {
|
|
w.options.extensions = inputData[1].vhs_path_extensions;
|
|
}
|
|
if (inputData[1].default) {
|
|
w.value = inputData[1].default;
|
|
}
|
|
}
|
|
|
|
if (!node.widgets) {
|
|
node.widgets = [];
|
|
}
|
|
node.widgets.push(w);
|
|
return w;
|
|
}
|
|
}
|
|
}
|
|
});
|