585 lines
20 KiB
JavaScript
585 lines
20 KiB
JavaScript
import { app } from "/scripts/app.js";
|
|
|
|
const customPipeLineLink = "#7737AA"
|
|
const customPipeLineSDXLLink = "#0DC52B"
|
|
const customIntLink = "#29699C"
|
|
const customXYPlotLink = "#74DA5D"
|
|
|
|
var customLinkColors = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.customLinkColors')) || {};
|
|
if (!customLinkColors["PIPE_LINE"] || !LGraphCanvas.link_type_colors["PIPE_LINE"]) {customLinkColors["PIPE_LINE"] = customPipeLineLink;}
|
|
if (!customLinkColors["PIPE_LINE_SDXL"] || !LGraphCanvas.link_type_colors["PIPE_LINE_SDXL"]) {customLinkColors["PIPE_LINE_SDXL"] = customPipeLineSDXLLink;}
|
|
if (!customLinkColors["INT"] || !LGraphCanvas.link_type_colors["INT"]) {customLinkColors["INT"] = customIntLink;}
|
|
if (!customLinkColors["XYPLOT"] || !LGraphCanvas.link_type_colors["XYPLOT"]) {customLinkColors["XYPLOT"] = customXYPlotLink;}
|
|
|
|
localStorage.setItem('Comfy.Settings.ttN.customLinkColors', JSON.stringify(customLinkColors));
|
|
|
|
|
|
app.registerExtension({
|
|
name: "comfy.ttN.interface",
|
|
init() {
|
|
function adjustToGrid(val, gridSize) {
|
|
return Math.round(val / gridSize) * gridSize;
|
|
}
|
|
|
|
function moveNodeBasedOnKey(e, node, gridSize, shiftMult) {
|
|
switch (e.code) {
|
|
case 'ArrowUp':
|
|
node.pos[1] -= gridSize * shiftMult;
|
|
break;
|
|
case 'ArrowDown':
|
|
node.pos[1] += gridSize * shiftMult;
|
|
break;
|
|
case 'ArrowLeft':
|
|
node.pos[0] -= gridSize * shiftMult;
|
|
break;
|
|
case 'ArrowRight':
|
|
node.pos[0] += gridSize * shiftMult;
|
|
break;
|
|
}
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
function keyMoveNode(e, node) {
|
|
let gridSize = JSON.parse(localStorage.getItem('Comfy.Settings.Comfy.SnapToGrid.GridSize'));
|
|
gridSize = gridSize ? parseInt(gridSize) : 1;
|
|
let shiftMult = e.shiftKey ? 10 : 1;
|
|
|
|
node.pos[0] = adjustToGrid(node.pos[0], gridSize);
|
|
node.pos[1] = adjustToGrid(node.pos[1], gridSize);
|
|
|
|
moveNodeBasedOnKey(e, node, gridSize, shiftMult);
|
|
}
|
|
|
|
function getSelectedNodes(e) {
|
|
const inputField = e.composedPath()[0];
|
|
if (inputField.tagName === "TEXTAREA") return;
|
|
if (e.ctrlKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) {
|
|
e.stopPropagation();
|
|
let graphcanvas = LGraphCanvas.active_canvas;
|
|
for (let node in graphcanvas.selected_nodes) {
|
|
keyMoveNode(e, graphcanvas.selected_nodes[node]);
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", getSelectedNodes, true);
|
|
|
|
LGraphCanvas.prototype.ttNcreateDialog = function (htmlContent, onOK, onCancel) {
|
|
var dialog = document.createElement("div");
|
|
dialog.is_modified = false;
|
|
dialog.className = "ttN-dialog";
|
|
dialog.innerHTML = htmlContent + "<button id='ok'>OK</button>";
|
|
|
|
dialog.close = function() {
|
|
if (dialog.parentNode) {
|
|
dialog.parentNode.removeChild(dialog);
|
|
}
|
|
};
|
|
|
|
var inputs = Array.from(dialog.querySelectorAll("input, select"));
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener("keydown", function(e) {
|
|
dialog.is_modified = true;
|
|
if (e.keyCode == 27) { // ESC
|
|
onCancel && onCancel();
|
|
dialog.close();
|
|
} else if (e.keyCode == 13) { // Enter
|
|
onOK && onOK(dialog, inputs.map(input => input.value));
|
|
dialog.close();
|
|
} else if (e.keyCode != 13 && e.target.localName != "textarea") {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
var graphcanvas = LGraphCanvas.active_canvas;
|
|
var canvas = graphcanvas.canvas;
|
|
|
|
var rect = 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";
|
|
}
|
|
|
|
var button = dialog.querySelector("#ok");
|
|
button.addEventListener("click", function() {
|
|
onOK && onOK(dialog, inputs.map(input => input.value));
|
|
dialog.close();
|
|
});
|
|
|
|
canvas.parentNode.appendChild(dialog);
|
|
|
|
if(inputs) inputs[0].focus();
|
|
|
|
var dialogCloseTimer = null;
|
|
dialog.addEventListener("mouseleave", function(e) {
|
|
if(LiteGraph.dialog_close_on_mouse_leave)
|
|
if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave)
|
|
dialogCloseTimer = setTimeout(dialog.close, LiteGraph.dialog_close_on_mouse_leave_delay); //dialog.close();
|
|
});
|
|
dialog.addEventListener("mouseenter", function(e) {
|
|
if(LiteGraph.dialog_close_on_mouse_leave)
|
|
if(dialogCloseTimer) clearTimeout(dialogCloseTimer);
|
|
});
|
|
|
|
return dialog;
|
|
};
|
|
|
|
LGraphCanvas.prototype.ttNsetNodeDimension = function (node) {
|
|
const nodeWidth = node.size[0];
|
|
const nodeHeight = node.size[1];
|
|
|
|
let input_html = "<input type='text' class='width' value='" + nodeWidth + "'></input>";
|
|
input_html += "<input type='text' class='height' value='" + nodeHeight + "'></input>";
|
|
|
|
LGraphCanvas.prototype.ttNcreateDialog("<span class='name'>Width/Height</span>" + input_html,
|
|
function(dialog, values) {
|
|
var widthValue = Number(values[0]) ? values[0] : nodeWidth;
|
|
var heightValue = Number(values[1]) ? values[1] : nodeHeight;
|
|
let sz = node.computeSize();
|
|
node.setSize([Math.max(sz[0], widthValue), Math.max(sz[1], heightValue)]);
|
|
if (dialog.parentNode) {
|
|
dialog.parentNode.removeChild(dialog);
|
|
}
|
|
node.setDirtyCanvas(true, true);
|
|
},
|
|
null
|
|
);
|
|
};
|
|
|
|
LGraphCanvas.prototype.ttNsetSlotTypeColor = function(slot){
|
|
var slotColor = LGraphCanvas.link_type_colors[slot.output.type].toUpperCase();
|
|
var slotType = slot.output.type;
|
|
// Check if the color is in the correct format
|
|
if (!/^#([0-9A-F]{3}){1,2}$/i.test(slotColor)) {
|
|
slotColor = "#FFFFFF";
|
|
}
|
|
|
|
// Check if browser supports color input type
|
|
var inputType = "color";
|
|
var inputID = " id='colorPicker'";
|
|
var inputElem = document.createElement("input");
|
|
inputElem.setAttribute("type", inputType);
|
|
if (inputElem.type !== "color") {
|
|
// If it doesn't, fall back to text input
|
|
inputType = "text";
|
|
inputID = " ";
|
|
}
|
|
|
|
let input_html = "<input" + inputID + "type='" + inputType + "' value='" + slotColor + "'></input>";
|
|
input_html += "<button id='Default'>DEFAULT</button>"; // Add a default button
|
|
input_html += "<button id='reset'>RESET</button>"; // Add a reset button
|
|
|
|
var dialog = LGraphCanvas.prototype.ttNcreateDialog("<span class='name'>" + slotType + "</span>" +
|
|
input_html,
|
|
function(dialog, values){
|
|
var hexColor = values[0].toUpperCase();
|
|
|
|
if (!/^#([0-9A-F]{3}){1,2}$/i.test(hexColor)) {
|
|
return
|
|
}
|
|
|
|
if (hexColor === slotColor) {
|
|
return
|
|
}
|
|
|
|
var customLinkColors = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.customLinkColors')) || {};
|
|
if (!customLinkColors[slotType + "_ORIG"]) {customLinkColors[slotType + "_ORIG"] = slotColor};
|
|
customLinkColors[slotType] = hexColor;
|
|
localStorage.setItem('Comfy.Settings.ttN.customLinkColors', JSON.stringify(customLinkColors));
|
|
|
|
app.canvas.default_connection_color_byType[slotType] = hexColor;
|
|
LGraphCanvas.link_type_colors[slotType] = hexColor;
|
|
}
|
|
);
|
|
|
|
var resetButton = dialog.querySelector("#reset");
|
|
resetButton.addEventListener("click", function() {
|
|
var colorInput = dialog.querySelector("input[type='" + inputType + "']");
|
|
colorInput.value = slotColor;
|
|
});
|
|
|
|
var defaultButton = dialog.querySelector("#Default");
|
|
defaultButton.addEventListener("click", function() {
|
|
var customLinkColors = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.customLinkColors')) || {};
|
|
if (customLinkColors[slotType+"_ORIG"]) {
|
|
app.canvas.default_connection_color_byType[slotType] = customLinkColors[slotType+"_ORIG"];
|
|
LGraphCanvas.link_type_colors[slotType] = customLinkColors[slotType+"_ORIG"];
|
|
|
|
delete customLinkColors[slotType+"_ORIG"];
|
|
delete customLinkColors[slotType];
|
|
}
|
|
localStorage.setItem('Comfy.Settings.ttN.customLinkColors', JSON.stringify(customLinkColors));
|
|
dialog.close()
|
|
})
|
|
|
|
var colorPicker = dialog.querySelector("input[type='" + inputType + "']");
|
|
colorPicker.addEventListener("focusout", function(e) {
|
|
this.focus();
|
|
});
|
|
};
|
|
|
|
LGraphCanvas.prototype.ttNdefaultBGcolor = function(node, defaultBGColor){
|
|
setTimeout(() => {
|
|
if (defaultBGColor !== 'default' && !node.color) {
|
|
node.addProperty('ttNbgOverride', defaultBGColor);
|
|
node.color=defaultBGColor.color;
|
|
node.bgcolor=defaultBGColor.bgcolor;
|
|
}
|
|
|
|
if (node.color && node.properties.ttNbgOverride) {
|
|
if (node.properties.ttNbgOverride !== defaultBGColor && node.color === node.properties.ttNbgOverride.color) {
|
|
if (defaultBGColor === 'default') {
|
|
delete node.properties.ttNbgOverride
|
|
delete node.color
|
|
delete node.bgcolor
|
|
} else {
|
|
node.properties.ttNbgOverride = defaultBGColor
|
|
node.color=defaultBGColor.color;
|
|
node.bgcolor=defaultBGColor.bgcolor;
|
|
}
|
|
}
|
|
|
|
if (node.properties.ttNbgOverride !== defaultBGColor && node.color !== node.properties.ttNbgOverride?.color) {
|
|
delete node.properties.ttNbgOverride
|
|
}
|
|
}
|
|
}, 0);
|
|
};
|
|
|
|
LGraphCanvas.ttNonShowLinkStyles = function(value, options, e, menu, node) {
|
|
new LiteGraph.ContextMenu(
|
|
LiteGraph.LINK_RENDER_MODES,
|
|
{ event: e, callback: inner_clicked, parentMenu: menu, node: node }
|
|
);
|
|
|
|
function inner_clicked(v) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
var kV = Object.values(LiteGraph.LINK_RENDER_MODES).indexOf(v);
|
|
|
|
localStorage.setItem('Comfy.Settings.Comfy.LinkRenderMode', JSON.stringify(String(kV)));
|
|
|
|
app.canvas.links_render_mode = kV;
|
|
app.graph.setDirtyCanvas(true);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
LGraphCanvas.ttNlinkStyleBorder = function(value, options, e, menu, node) {
|
|
new LiteGraph.ContextMenu(
|
|
[false, true],
|
|
{ event: e, callback: inner_clicked, parentMenu: menu, node: node }
|
|
);
|
|
|
|
function inner_clicked(v) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
|
|
localStorage.setItem('Comfy.Settings.ttN.links_render_border', JSON.stringify(v));
|
|
|
|
app.canvas.render_connections_border = v;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
LGraphCanvas.ttNlinkStyleShadow = function(value, options, e, menu, node) {
|
|
new LiteGraph.ContextMenu(
|
|
[false, true],
|
|
{ event: e, callback: inner_clicked, parentMenu: menu, node: node }
|
|
);
|
|
|
|
function inner_clicked(v) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
|
|
localStorage.setItem('Comfy.Settings.ttN.links_render_shadow', JSON.stringify(v));
|
|
|
|
app.canvas.render_connections_shadows = v;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
LGraphCanvas.ttNsetDefaultBGColor = function(value, options, e, menu, node) {
|
|
if (!node) {
|
|
throw "no node for color";
|
|
}
|
|
|
|
var values = [];
|
|
values.push({
|
|
value: null,
|
|
content:
|
|
"<span style='display: block; padding-left: 4px;'>No Color</span>"
|
|
});
|
|
|
|
for (var i in LGraphCanvas.node_colors) {
|
|
var color = LGraphCanvas.node_colors[i];
|
|
var value = {
|
|
value: i,
|
|
content:
|
|
"<span style='display: block; color: #999; padding-left: 4px; border-left: 8px solid " +
|
|
color.color +
|
|
"; background-color:" +
|
|
color.bgcolor +
|
|
"'>" +
|
|
i +
|
|
"</span>"
|
|
};
|
|
values.push(value);
|
|
}
|
|
new LiteGraph.ContextMenu(values, {
|
|
event: e,
|
|
callback: inner_clicked,
|
|
parentMenu: menu,
|
|
node: node
|
|
});
|
|
|
|
function inner_clicked(v) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
|
|
var defaultBGColor = v.value ? LGraphCanvas.node_colors[v.value] : 'default';
|
|
|
|
localStorage.setItem('Comfy.Settings.ttN.defaultBGColor', JSON.stringify(defaultBGColor));
|
|
|
|
for (var i in app.graph._nodes) {
|
|
LGraphCanvas.prototype.ttNdefaultBGcolor(app.graph._nodes[i], defaultBGColor);
|
|
}
|
|
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
LGraphCanvas.ttNshowExecutionOrder = function(value, options, e, menu, node) {
|
|
var values = [];
|
|
values.push({
|
|
value: true,
|
|
content:
|
|
"<span style='display: block; padding-left: 4px;'>True</span>"
|
|
},
|
|
{
|
|
value: false,
|
|
content:
|
|
"<span style='display: block; padding-left: 4px;'>False</span>"
|
|
}
|
|
);
|
|
|
|
new LiteGraph.ContextMenu(values, {
|
|
event: e,
|
|
callback: inner_clicked,
|
|
parentMenu: menu,
|
|
node: node
|
|
});
|
|
|
|
function inner_clicked(v) {
|
|
var showExecOrder = v.value ? v.value : false;
|
|
|
|
localStorage.setItem('Comfy.Settings.ttN.showExecutionOrder', JSON.stringify(showExecOrder));
|
|
|
|
LGraphCanvas.active_canvas.render_execution_order = showExecOrder;
|
|
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions;
|
|
LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
|
|
const options = getNodeMenuOptions.apply(this, arguments);
|
|
node.setDirtyCanvas(true, true);
|
|
|
|
options.splice(options.length - 1, 0,
|
|
{
|
|
content: "Node Dimensions (ttN)",
|
|
callback: () => { LGraphCanvas.prototype.ttNsetNodeDimension(node); }
|
|
},
|
|
{
|
|
content: "Default BG Color (ttN)",
|
|
has_submenu: true,
|
|
callback: LGraphCanvas.ttNsetDefaultBGColor
|
|
},
|
|
{
|
|
content: "Show Execution Order (ttN)",
|
|
has_submenu: true,
|
|
callback: LGraphCanvas.ttNshowExecutionOrder
|
|
|
|
},
|
|
null
|
|
);
|
|
return options;
|
|
};
|
|
|
|
LGraphCanvas.prototype.ttNupdateRenderSettings = function (app) {
|
|
let showLinkBorder = Number(localStorage.getItem('Comfy.Settings.ttN.links_render_border'));
|
|
if (showLinkBorder !== undefined) {app.canvas.render_connections_border = showLinkBorder}
|
|
|
|
let showLinkShadow = Number(localStorage.getItem('Comfy.Settings.ttN.links_render_shadow'));
|
|
if (showLinkShadow !== undefined) {app.canvas.render_connections_shadows = showLinkShadow}
|
|
|
|
let showExecOrder = localStorage.getItem('Comfy.Settings.ttN.showExecutionOrder');
|
|
if (showExecOrder === 'true') {app.canvas.render_execution_order = true}
|
|
else {app.canvas.render_execution_order = false}
|
|
|
|
var customLinkColors = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.customLinkColors')) || {};
|
|
Object.assign(app.canvas.default_connection_color_byType, customLinkColors);
|
|
Object.assign(LGraphCanvas.link_type_colors, customLinkColors);
|
|
}
|
|
},
|
|
|
|
beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
nodeType.prototype.getSlotMenuOptions = (slot) => {
|
|
let menu_info = [];
|
|
if (
|
|
slot &&
|
|
slot.output &&
|
|
slot.output.links &&
|
|
slot.output.links.length
|
|
) {
|
|
menu_info.push({ content: "Disconnect Links", slot: slot });
|
|
}
|
|
var _slot = slot.input || slot.output;
|
|
if (_slot.removable){
|
|
menu_info.push(
|
|
_slot.locked
|
|
? "Cannot remove"
|
|
: { content: "Remove Slot", slot: slot }
|
|
);
|
|
}
|
|
if (!_slot.nameLocked){
|
|
menu_info.push({ content: "Rename Slot", slot: slot });
|
|
}
|
|
|
|
menu_info.push({ content: "Slot Type Color (ttN)", slot: slot, callback: () => { LGraphCanvas.prototype.ttNsetSlotTypeColor(slot) } });
|
|
menu_info.push({ content: "Show Link Border (ttN)", has_submenu: true, slot: slot, callback: LGraphCanvas.ttNlinkStyleBorder });
|
|
menu_info.push({ content: "Show Link Shadow (ttN)", has_submenu: true, slot: slot, callback: LGraphCanvas.ttNlinkStyleShadow });
|
|
menu_info.push({ content: "Link Style (ttN)", has_submenu: true, slot: slot, callback: LGraphCanvas.ttNonShowLinkStyles });
|
|
|
|
return menu_info;
|
|
}
|
|
},
|
|
|
|
setup() {
|
|
LGraphCanvas.prototype.ttNupdateRenderSettings(app);
|
|
},
|
|
nodeCreated(node) {
|
|
let defaultBGColor = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.defaultBGColor'));
|
|
if (defaultBGColor) {LGraphCanvas.prototype.ttNdefaultBGcolor(node, defaultBGColor)};
|
|
},
|
|
loadedGraphNode(node, app) {
|
|
LGraphCanvas.prototype.ttNupdateRenderSettings(app);
|
|
|
|
let defaultBGColor = JSON.parse(localStorage.getItem('Comfy.Settings.ttN.defaultBGColor'));
|
|
if (defaultBGColor) {LGraphCanvas.prototype.ttNdefaultBGcolor(node, defaultBGColor)};
|
|
},
|
|
});
|
|
|
|
var styleElement = document.createElement("style");
|
|
const cssCode = `
|
|
.ttN-dialog {
|
|
top: 10px;
|
|
left: 10px;
|
|
min-height: 1em;
|
|
background-color: var(--comfy-menu-bg);
|
|
font-size: 1.2em;
|
|
box-shadow: 0 0 7px black !important;
|
|
z-index: 10;
|
|
display: grid;
|
|
border-radius: 7px;
|
|
padding: 7px 7px;
|
|
position: fixed;
|
|
}
|
|
.ttN-dialog .name {
|
|
display: inline-block;
|
|
min-height: 1.5em;
|
|
font-size: 14px;
|
|
font-family: sans-serif;
|
|
color: var(--descrip-text);
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
justify-self: center;
|
|
}
|
|
.ttN-dialog input,
|
|
.ttN-dialog textarea,
|
|
.ttN-dialog select {
|
|
margin: 3px;
|
|
min-width: 60px;
|
|
min-height: 1.5em;
|
|
background-color: var(--comfy-input-bg);
|
|
border: 2px solid;
|
|
border-color: var(--border-color);
|
|
color: var(--input-text);
|
|
border-radius: 14px;
|
|
padding-left: 10px;
|
|
outline: none;
|
|
}
|
|
|
|
.ttN-dialog #colorPicker {
|
|
margin: 0px;
|
|
min-width: 100%;
|
|
min-height: 2.5em;
|
|
border-radius: 0px;
|
|
padding: 0px 2px 0px 2px;
|
|
border: unset;
|
|
}
|
|
|
|
.ttN-dialog textarea {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.ttN-dialog button {
|
|
margin-top: 3px;
|
|
vertical-align: top;
|
|
background-color: #999;
|
|
border: 0;
|
|
padding: 4px 18px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ttN-dialog button.rounded,
|
|
.ttN-dialog input.rounded {
|
|
border-radius: 0 12px 12px 0;
|
|
}
|
|
|
|
.ttN-dialog .helper {
|
|
overflow: auto;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.ttN-dialog .help-item {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.ttN-dialog .help-item:hover,
|
|
.ttN-dialog .help-item.selected {
|
|
cursor: pointer;
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
`
|
|
styleElement.innerHTML = cssCode
|
|
document.head.appendChild(styleElement); |