mirror of
https://github.com/justUmen/Bjornulf_custom_nodes.git
synced 2026-03-21 20:52:11 -03:00
0.61
This commit is contained in:
justumen
116
web/js/concat_videos.js
Normal file
116
web/js/concat_videos.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import { app } from "../../../scripts/app.js";
|
||||
|
||||
app.registerExtension({
|
||||
name: "Bjornulf.ConcatVideos",
|
||||
async nodeCreated(node) {
|
||||
if (node.comfyClass === "Bjornulf_ConcatVideos") {
|
||||
// Initialize properties if not already set
|
||||
node.properties = node.properties || {};
|
||||
|
||||
// Default output filename
|
||||
const defaultOutputFilename = "concatenated.mp4";
|
||||
|
||||
// Ensure `output_filename` is initialized in properties
|
||||
if (!node.properties.output_filename) {
|
||||
node.properties.output_filename = defaultOutputFilename;
|
||||
}
|
||||
|
||||
// Store the original serialize/configure methods
|
||||
const originalSerialize = node.serialize;
|
||||
const originalConfigure = node.configure;
|
||||
|
||||
// Override serialize to save `output_filename` and inputs
|
||||
node.serialize = function() {
|
||||
const data = originalSerialize ? originalSerialize.call(this) : {};
|
||||
data.video_inputs = this.inputs
|
||||
.filter(input => input.name.startsWith("video_path_"))
|
||||
.map(input => ({
|
||||
name: input.name,
|
||||
type: input.type,
|
||||
link: input.link || null,
|
||||
}));
|
||||
data.properties = { ...this.properties };
|
||||
return data;
|
||||
};
|
||||
|
||||
// Override configure to restore `output_filename` and inputs
|
||||
node.configure = function(data) {
|
||||
if (originalConfigure) {
|
||||
originalConfigure.call(this, data);
|
||||
}
|
||||
if (data.video_inputs) {
|
||||
data.video_inputs.forEach(inputData => {
|
||||
if (!this.inputs.find(input => input.name === inputData.name)) {
|
||||
const newInput = this.addInput(inputData.name, inputData.type);
|
||||
newInput.link = inputData.link || null;
|
||||
}
|
||||
});
|
||||
}
|
||||
node.properties = { ...node.properties, ...data.properties };
|
||||
|
||||
// Ensure `output_filename` is always consistent
|
||||
if (!node.properties.output_filename) {
|
||||
node.properties.output_filename = defaultOutputFilename;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const updateInputs = () => {
|
||||
const initialWidth = node.size[0];
|
||||
const numVideosWidget = node.widgets.find(w => w.name === "number_of_videos");
|
||||
if (!numVideosWidget) return;
|
||||
|
||||
const numVideos = numVideosWidget.value;
|
||||
|
||||
// Store existing connections before modifying inputs
|
||||
const existingConnections = {};
|
||||
node.inputs.forEach(input => {
|
||||
if (input.link !== null) {
|
||||
existingConnections[input.name] = input.link;
|
||||
}
|
||||
});
|
||||
|
||||
// Clear and update inputs
|
||||
node.inputs = node.inputs.filter(input => !input.name.startsWith("video_path_"));
|
||||
for (let i = 1; i <= numVideos; i++) {
|
||||
const inputName = `video_path_${i}`;
|
||||
const newInput = node.addInput(inputName, "STRING");
|
||||
if (existingConnections[inputName] !== undefined) {
|
||||
newInput.link = existingConnections[inputName];
|
||||
}
|
||||
}
|
||||
|
||||
// Synchronize `output_filename` with properties and widget
|
||||
const outputFilenameWidget = node.widgets.find(w => w.name === "output_filename");
|
||||
if (outputFilenameWidget) {
|
||||
outputFilenameWidget.value = node.properties.output_filename;
|
||||
}
|
||||
|
||||
// Adjust size and redraw
|
||||
node.setSize(node.computeSize());
|
||||
node.size[0] = Math.max(initialWidth, 200);
|
||||
app.graph.setDirtyCanvas(true);
|
||||
};
|
||||
|
||||
// Set up widget callbacks
|
||||
const numVideosWidget = node.widgets.find(w => w.name === "number_of_videos");
|
||||
if (numVideosWidget) {
|
||||
numVideosWidget.callback = updateInputs;
|
||||
}
|
||||
|
||||
// Ensure `output_filename` is properly initialized on node creation
|
||||
let outputFilenameWidget = node.widgets.find(w => w.name === "output_filename");
|
||||
if (!outputFilenameWidget) {
|
||||
outputFilenameWidget = node.addWidget("string", "output_filename", node.properties.output_filename, value => {
|
||||
node.properties.output_filename = value || defaultOutputFilename;
|
||||
});
|
||||
} else {
|
||||
// Synchronize widget value with properties
|
||||
outputFilenameWidget.value = node.properties.output_filename || defaultOutputFilename;
|
||||
}
|
||||
|
||||
// Initialize inputs on node creation
|
||||
requestAnimationFrame(updateInputs);
|
||||
}
|
||||
}
|
||||
});
|
||||
385
web/js/show_stuff.js
Normal file
385
web/js/show_stuff.js
Normal file
@@ -0,0 +1,385 @@
|
||||
import { app } from "../../../scripts/app.js";
|
||||
import { ComfyWidgets } from "../../../scripts/widgets.js";
|
||||
|
||||
// Styles for the text area
|
||||
const textStyles = {
|
||||
readOnly: true,
|
||||
opacity: 1,
|
||||
padding: "4px",
|
||||
paddingLeft: "7px",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#222",
|
||||
color: "Lime",
|
||||
fontFamily: "Arial, sans-serif",
|
||||
fontSize: "14px",
|
||||
lineHeight: "1.4",
|
||||
resize: "none",
|
||||
overflowY: "auto",
|
||||
};
|
||||
|
||||
app.registerExtension({
|
||||
name: "Bjornulf.ShowStringText",
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "Bjornulf_ShowStringText") {
|
||||
function populate(text) {
|
||||
if (!Array.isArray(text)) {
|
||||
console.warn("populate expects an array, got:", text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.widgets) {
|
||||
const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
if (pos !== -1) {
|
||||
for (let i = pos; i < this.widgets.length; i++) {
|
||||
this.widgets[i].onRemove?.();
|
||||
}
|
||||
this.widgets.length = pos;
|
||||
}
|
||||
} else {
|
||||
this.widgets = [];
|
||||
}
|
||||
|
||||
text.forEach((list) => {
|
||||
const existingWidget = this.widgets.find(
|
||||
(w) => w.name === "text" && w.value === list
|
||||
);
|
||||
if (!existingWidget) {
|
||||
const w = ComfyWidgets["STRING"](
|
||||
this,
|
||||
"text",
|
||||
["STRING", { multiline: true }],
|
||||
app
|
||||
).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textStyles);
|
||||
|
||||
// Determine color based on type
|
||||
let color = "lime";
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const sz = this.computeSize();
|
||||
if (sz[0] < this.size[0]) sz[0] = this.size[0];
|
||||
if (sz[1] < this.size[1]) sz[1] = this.size[1];
|
||||
this.onResize?.(sz);
|
||||
app.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
}
|
||||
|
||||
// When the node is executed we will be sent the input text, display this in the widget
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
nodeType.prototype.onExecuted = function (message) {
|
||||
const initialWidth = this.size[0];
|
||||
onExecuted?.apply(this, arguments);
|
||||
populate.call(this, message.text);
|
||||
this.size[0] = Math.max(initialWidth, 200); // Ensure minimum width
|
||||
// this.setSize(this.size[0], this.size[1]);
|
||||
};
|
||||
|
||||
// const onConfigure = nodeType.prototype.onConfigure;
|
||||
// nodeType.prototype.onConfigure = function () {
|
||||
// onConfigure?.apply(this, arguments);
|
||||
// if (this.widgets_values?.length) {
|
||||
// populate.call(this, this.widgets_values);
|
||||
// }
|
||||
// };
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.registerExtension({
|
||||
name: "Bjornulf.ShowJson",
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "Bjornulf_ShowJson") {
|
||||
function populate(text) {
|
||||
if (!Array.isArray(text)) {
|
||||
console.warn("populate expects an array, got:", text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.widgets) {
|
||||
const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
if (pos !== -1) {
|
||||
for (let i = pos; i < this.widgets.length; i++) {
|
||||
this.widgets[i].onRemove?.();
|
||||
}
|
||||
this.widgets.length = pos;
|
||||
}
|
||||
} else {
|
||||
this.widgets = [];
|
||||
}
|
||||
|
||||
text.forEach((list) => {
|
||||
const existingWidget = this.widgets.find(
|
||||
(w) => w.name === "text" && w.value === list
|
||||
);
|
||||
if (!existingWidget) {
|
||||
const w = ComfyWidgets["STRING"](
|
||||
this,
|
||||
"text",
|
||||
["STRING", { multiline: true }],
|
||||
app
|
||||
).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textStyles);
|
||||
|
||||
// Determine color based on type
|
||||
let color = "pink";
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const sz = this.computeSize();
|
||||
if (sz[0] < this.size[0]) sz[0] = this.size[0];
|
||||
if (sz[1] < this.size[1]) sz[1] = this.size[1];
|
||||
this.onResize?.(sz);
|
||||
app.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
}
|
||||
|
||||
// When the node is executed we will be sent the input text, display this in the widget
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
nodeType.prototype.onExecuted = function (message) {
|
||||
const initialWidth = this.size[0];
|
||||
onExecuted?.apply(this, arguments);
|
||||
populate.call(this, message.text);
|
||||
this.size[0] = Math.max(initialWidth, 200); // Ensure minimum width
|
||||
// this.setSize(this.size[0], this.size[1]);
|
||||
};
|
||||
|
||||
// const onConfigure = nodeType.prototype.onConfigure;
|
||||
// nodeType.prototype.onConfigure = function () {
|
||||
// onConfigure?.apply(this, arguments);
|
||||
// if (this.widgets_values?.length) {
|
||||
// populate.call(this, this.widgets_values);
|
||||
// }
|
||||
// };
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.registerExtension({
|
||||
name: "Bjornulf.ShowInt",
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "Bjornulf_ShowInt") {
|
||||
function populate(text) {
|
||||
if (!Array.isArray(text)) {
|
||||
console.warn("populate expects an array, got:", text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.widgets) {
|
||||
const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
if (pos !== -1) {
|
||||
for (let i = pos; i < this.widgets.length; i++) {
|
||||
this.widgets[i].onRemove?.();
|
||||
}
|
||||
this.widgets.length = pos;
|
||||
}
|
||||
} else {
|
||||
this.widgets = [];
|
||||
}
|
||||
|
||||
text.forEach((list) => {
|
||||
const existingWidget = this.widgets.find(
|
||||
(w) => w.name === "text" && w.value === list
|
||||
);
|
||||
if (!existingWidget) {
|
||||
const w = ComfyWidgets["STRING"](
|
||||
this,
|
||||
"text",
|
||||
["STRING", { multiline: true }],
|
||||
app
|
||||
).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textStyles);
|
||||
|
||||
// Determine color based on type
|
||||
let color = "#0096FF";
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const sz = this.computeSize();
|
||||
if (sz[0] < this.size[0]) sz[0] = this.size[0];
|
||||
if (sz[1] < this.size[1]) sz[1] = this.size[1];
|
||||
this.onResize?.(sz);
|
||||
app.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
}
|
||||
|
||||
// When the node is executed we will be sent the input text, display this in the widget
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
nodeType.prototype.onExecuted = function (message) {
|
||||
onExecuted?.apply(this, arguments);
|
||||
populate.call(this, message.text);
|
||||
};
|
||||
|
||||
|
||||
// const onConfigure = nodeType.prototype.onConfigure;
|
||||
// nodeType.prototype.onConfigure = function () {
|
||||
// onConfigure?.apply(this, arguments);
|
||||
// if (this.widgets_values?.length) {
|
||||
// populate.call(this, this.widgets_values);
|
||||
// }
|
||||
// };
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.registerExtension({
|
||||
name: "Bjornulf.ShowFloat",
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "Bjornulf_ShowFloat") {
|
||||
function populate(text) {
|
||||
if (!Array.isArray(text)) {
|
||||
console.warn("populate expects an array, got:", text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.widgets) {
|
||||
const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
if (pos !== -1) {
|
||||
for (let i = pos; i < this.widgets.length; i++) {
|
||||
this.widgets[i].onRemove?.();
|
||||
}
|
||||
this.widgets.length = pos;
|
||||
}
|
||||
} else {
|
||||
this.widgets = [];
|
||||
}
|
||||
|
||||
text.forEach((list) => {
|
||||
const existingWidget = this.widgets.find(
|
||||
(w) => w.name === "text" && w.value === list
|
||||
);
|
||||
if (!existingWidget) {
|
||||
const w = ComfyWidgets["STRING"](
|
||||
this,
|
||||
"text",
|
||||
["STRING", { multiline: true }],
|
||||
app
|
||||
).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textStyles);
|
||||
|
||||
// Determine color based on type
|
||||
let color = "orange";
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const sz = this.computeSize();
|
||||
if (sz[0] < this.size[0]) sz[0] = this.size[0];
|
||||
if (sz[1] < this.size[1]) sz[1] = this.size[1];
|
||||
this.onResize?.(sz);
|
||||
app.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
}
|
||||
|
||||
// When the node is executed we will be sent the input text, display this in the widget
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
nodeType.prototype.onExecuted = function (message) {
|
||||
onExecuted?.apply(this, arguments);
|
||||
populate.call(this, message.text);
|
||||
};
|
||||
|
||||
// const onConfigure = nodeType.prototype.onConfigure;
|
||||
// nodeType.prototype.onConfigure = function () {
|
||||
// onConfigure?.apply(this, arguments);
|
||||
// if (this.widgets_values?.length) {
|
||||
// populate.call(this, this.widgets_values);
|
||||
// }
|
||||
// };
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// app.registerExtension({
|
||||
// name: "Bjornulf.ShowJson",
|
||||
// async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
// if (nodeData.name === "Bjornulf_ShowJson") {
|
||||
// function populate(text) {
|
||||
// if (!Array.isArray(text)) {
|
||||
// console.warn("populate expects an array, got:", text);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (this.widgets) {
|
||||
// const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
// if (pos !== -1) {
|
||||
// for (let i = pos; i < this.widgets.length; i++) {
|
||||
// this.widgets[i].onRemove?.();
|
||||
// }
|
||||
// this.widgets.length = pos;
|
||||
// }
|
||||
// } else {
|
||||
// this.widgets = [];
|
||||
// }
|
||||
|
||||
// text.forEach((list) => {
|
||||
// const existingWidget = this.widgets.find(w => w.name === "text" && w.value === list);
|
||||
// if (!existingWidget) {
|
||||
// const w = ComfyWidgets["STRING"](this, "text", ["STRING", { multiline: true }], app).widget;
|
||||
// w.inputEl.readOnly = true;
|
||||
// Object.assign(w.inputEl.style, textStyles);
|
||||
|
||||
// // Determine color based on type
|
||||
// let color = 'Lime'; // Default color for strings
|
||||
// const value = list.toString().trim();
|
||||
|
||||
// if (/^-?\d+$/.test(value)) {
|
||||
// color = '#0096FF'; // Integer
|
||||
// } else if (/^-?\d*\.?\d+$/.test(value)) {
|
||||
// color = 'orange'; // Float
|
||||
// } else if (value.startsWith("If-Else ERROR: ")) {
|
||||
// color = 'red'; // If-Else ERROR lines
|
||||
// } else if (value.startsWith("tensor(")) {
|
||||
// color = '#0096FF'; // Lines starting with "tensor("
|
||||
// }
|
||||
|
||||
// w.inputEl.style.color = color;
|
||||
// w.value = list;
|
||||
// }
|
||||
// });
|
||||
|
||||
// requestAnimationFrame(() => {
|
||||
// const sz = this.computeSize();
|
||||
// if (sz[0] < this.size[0]) sz[0] = this.size[0];
|
||||
// if (sz[1] < this.size[1]) sz[1] = this.size[1];
|
||||
// this.onResize?.(sz);
|
||||
// app.graph.setDirtyCanvas(true, false);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // When the node is executed we will be sent the input text, display this in the widget
|
||||
// const onExecuted = nodeType.prototype.onExecuted;
|
||||
// nodeType.prototype.onExecuted = function (message) {
|
||||
// onExecuted?.apply(this, arguments);
|
||||
// populate.call(this, message.text);
|
||||
// };
|
||||
|
||||
// const onConfigure = nodeType.prototype.onConfigure;
|
||||
// nodeType.prototype.onConfigure = function () {
|
||||
// onConfigure?.apply(this, arguments);
|
||||
// if (this.widgets_values?.length) {
|
||||
// populate.call(this, this.widgets_values);
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
@@ -24,6 +24,11 @@ app.registerExtension({
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "Bjornulf_ShowText") {
|
||||
function populate(text) {
|
||||
if (!Array.isArray(text)) {
|
||||
console.warn("populate expects an array, got:", text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.widgets) {
|
||||
const pos = this.widgets.findIndex((w) => w.name === "text");
|
||||
if (pos !== -1) {
|
||||
@@ -32,30 +37,35 @@ app.registerExtension({
|
||||
}
|
||||
this.widgets.length = pos;
|
||||
}
|
||||
} else {
|
||||
this.widgets = [];
|
||||
}
|
||||
|
||||
for (const list of text) {
|
||||
const w = ComfyWidgets["STRING"](this, "text", ["STRING", { multiline: true }], app).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textAreaStyles);
|
||||
text.forEach((list) => {
|
||||
const existingWidget = this.widgets.find(w => w.name === "text" && w.value === list);
|
||||
if (!existingWidget) {
|
||||
const w = ComfyWidgets["STRING"](this, "text", ["STRING", { multiline: true }], app).widget;
|
||||
w.inputEl.readOnly = true;
|
||||
Object.assign(w.inputEl.style, textAreaStyles);
|
||||
|
||||
// Improved type detection
|
||||
let color = 'Lime'; // Default color for strings
|
||||
const value = list.toString().trim();
|
||||
|
||||
if (/^-?\d+$/.test(value)) {
|
||||
color = '#0096FF'; // Integer
|
||||
} else if (/^-?\d*\.?\d+$/.test(value)) {
|
||||
color = 'orange'; // Float
|
||||
} else if (value.startsWith("If-Else ERROR: ")) {
|
||||
color = 'red'; // If-Else ERROR lines
|
||||
} else if (value.startsWith("tensor(")) {
|
||||
color = '#0096FF'; // Lines starting with "tensor("
|
||||
// Determine color based on type
|
||||
let color = 'Lime'; // Default color for strings
|
||||
const value = list.toString().trim();
|
||||
|
||||
if (/^-?\d+$/.test(value)) {
|
||||
color = '#0096FF'; // Integer
|
||||
} else if (/^-?\d*\.?\d+$/.test(value)) {
|
||||
color = 'orange'; // Float
|
||||
} else if (value.startsWith("If-Else ERROR: ")) {
|
||||
color = 'red'; // If-Else ERROR lines
|
||||
} else if (value.startsWith("tensor(")) {
|
||||
color = '#0096FF'; // Lines starting with "tensor("
|
||||
}
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
|
||||
w.inputEl.style.color = color;
|
||||
w.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const sz = this.computeSize();
|
||||
@@ -65,6 +75,7 @@ app.registerExtension({
|
||||
app.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// When the node is executed we will be sent the input text, display this in the widget
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
|
||||
Reference in New Issue
Block a user