475 lines
13 KiB
JavaScript
475 lines
13 KiB
JavaScript
import { app } from "../scripts/app.js";
|
|
//import {convertToInput, convertToWidget} from "/extensions/core/widgetInputs.js";
|
|
|
|
function CUSTOM_INT(node, inputName, val, func, config = {}) {
|
|
return {
|
|
widget: node.addWidget(
|
|
"number",
|
|
inputName,
|
|
val,
|
|
func,
|
|
Object.assign({}, { min: 0, max: 2048, step: 640, precision: 0 }, config)
|
|
),
|
|
};
|
|
}
|
|
|
|
function recursiveLinkUpstream(node, index=0) {
|
|
const link = node.inputs[index].link
|
|
if (link) {
|
|
const nodeID = node.graph.links[link].origin_id
|
|
const connectedNode = node.graph._nodes_by_id[nodeID]
|
|
|
|
if (connectedNode.type === "Reroute") {
|
|
return recursiveLinkUpstream(connectedNode)
|
|
} else {
|
|
return connectedNode
|
|
}
|
|
} else {
|
|
return node
|
|
}
|
|
}
|
|
|
|
function addCanvas(node, app) {
|
|
|
|
function computeCanvasSize(node, size) {
|
|
if (node.widgets[0].last_y == null) return;
|
|
|
|
const MIN_SIZE = 200;
|
|
|
|
let y = LiteGraph.NODE_WIDGET_HEIGHT * Math.max(node.inputs.length, node.outputs.length) + 5;
|
|
let freeSpace = size[1] - y;
|
|
|
|
// Compute the height of all non customtext widgets
|
|
let widgetHeight = 0;
|
|
for (let i = 0; i < node.widgets.length; i++) {
|
|
const w = node.widgets[i];
|
|
if (w.type !== "customCanvas") {
|
|
if (w.computeSize) {
|
|
widgetHeight += w.computeSize()[1] + 4;
|
|
} else {
|
|
widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 5;
|
|
}
|
|
}
|
|
}
|
|
|
|
// See how large the canvas can be
|
|
freeSpace -= widgetHeight;
|
|
|
|
// There isnt enough space for all the widgets, increase the size of the node
|
|
if (freeSpace < MIN_SIZE) {
|
|
freeSpace = MIN_SIZE;
|
|
node.size[1] = y + widgetHeight + freeSpace;
|
|
node.graph.setDirtyCanvas(true);
|
|
}
|
|
|
|
// Position each of the widgets
|
|
for (const w of node.widgets) {
|
|
w.y = y;
|
|
if (w.type === "customCanvas") {
|
|
y += freeSpace;
|
|
} else if (w.computeSize) {
|
|
y += w.computeSize()[1] + 4;
|
|
} else {
|
|
y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
|
|
}
|
|
}
|
|
|
|
node.canvasHeight = freeSpace;
|
|
}
|
|
|
|
const widget = {
|
|
type: "customCanvas",
|
|
name: "name",
|
|
get value() {
|
|
return this.canvas.value;
|
|
},
|
|
set value(x) {
|
|
this.canvas.value = x;
|
|
},
|
|
draw: function (ctx, node, widgetWidth, widgetY) {
|
|
|
|
// If we are initially offscreen when created we wont have received a resize event
|
|
// Calculate it here instead
|
|
if (!node.canvasHeight) {
|
|
computeCanvasSize(node, node.size)
|
|
}
|
|
|
|
const visible = true //app.canvasblank.ds.scale > 0.5 && this.type === "customCanvas";
|
|
const t = ctx.getTransform();
|
|
const margin = 10
|
|
const border = 2
|
|
|
|
const widgetHeight = node.canvasHeight
|
|
const values = node.properties["values"]
|
|
const width = node.properties["width"]
|
|
const height = node.properties["height"]
|
|
|
|
const scale = Math.min((widgetWidth-margin*2)/width, (widgetHeight-margin*2)/height)
|
|
|
|
const index = node.widgets[3].value
|
|
|
|
Object.assign(this.canvas.style, {
|
|
left: `${t.e}px`,
|
|
top: `${t.f + (widgetY*t.d)}px`,
|
|
width: `${widgetWidth * t.a}px`,
|
|
height: `${widgetHeight * t.d}px`,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
fontSize: `${t.d * 10.0}px`,
|
|
pointerEvents: "none",
|
|
});
|
|
|
|
this.canvas.hidden = !visible;
|
|
|
|
let backgroudWidth = width * scale
|
|
let backgroundHeight = height * scale
|
|
|
|
let xOffset = margin
|
|
if (backgroudWidth < widgetWidth) {
|
|
xOffset += (widgetWidth-backgroudWidth)/2 - margin
|
|
}
|
|
let yOffset = margin
|
|
if (backgroundHeight < widgetHeight) {
|
|
yOffset += (widgetHeight-backgroundHeight)/2 - margin
|
|
}
|
|
|
|
let widgetX = xOffset
|
|
widgetY = widgetY + yOffset
|
|
|
|
ctx.fillStyle = "#000000"
|
|
ctx.fillRect(widgetX-border, widgetY-border, backgroudWidth+border*2, backgroundHeight+border*2)
|
|
|
|
ctx.fillStyle = globalThis.LiteGraph.NODE_DEFAULT_BGCOLOR
|
|
ctx.fillRect(widgetX, widgetY, backgroudWidth, backgroundHeight);
|
|
|
|
function getDrawArea(v) {
|
|
let x = v[0]*backgroudWidth/width
|
|
let y = v[1]*backgroundHeight/height
|
|
let w = v[2]*backgroudWidth/width
|
|
let h = v[3]*backgroundHeight/height
|
|
|
|
if (x > backgroudWidth) { x = backgroudWidth}
|
|
if (y > backgroundHeight) { y = backgroundHeight}
|
|
|
|
if (x+w > backgroudWidth) {
|
|
w = Math.max(0, backgroudWidth-x)
|
|
}
|
|
|
|
if (y+h > backgroundHeight) {
|
|
h = Math.max(0, backgroundHeight-y)
|
|
}
|
|
|
|
return [x, y, w, h]
|
|
}
|
|
|
|
function getDrawColor(percent, alpha) {
|
|
let h = 360*percent
|
|
let s = 50;
|
|
let l = 50;
|
|
l /= 100;
|
|
const a = s * Math.min(l, 1 - l) / 100;
|
|
const f = n => {
|
|
const k = (n + h / 30) % 12;
|
|
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
|
|
};
|
|
return `#${f(0)}${f(8)}${f(4)}${alpha}`;
|
|
}
|
|
|
|
// Draw all the conditioning zones
|
|
for (const [k, v] of values.entries()) {
|
|
|
|
if (k == index) {continue}
|
|
|
|
const [x, y, w, h] = getDrawArea(v)
|
|
|
|
ctx.fillStyle = getDrawColor(k/values.length, "80") //colors[k] + "B0"
|
|
ctx.fillRect(widgetX+x, widgetY+y, w, h)
|
|
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 1;
|
|
|
|
for (let x = 0; x <= width/64; x += 1) {
|
|
ctx.moveTo(widgetX+x*64*scale, widgetY);
|
|
ctx.lineTo(widgetX+x*64*scale, widgetY+backgroundHeight);
|
|
}
|
|
|
|
for (let y = 0; y <= height/64; y += 1) {
|
|
ctx.moveTo(widgetX, widgetY+y*64*scale);
|
|
ctx.lineTo(widgetX+backgroudWidth, widgetY+y*64*scale);
|
|
}
|
|
|
|
ctx.strokeStyle = "#00000050";
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
// Draw currently selected zone
|
|
let [x, y, w, h] = getDrawArea(values[index])
|
|
|
|
w = Math.max(32*scale, w)
|
|
h = Math.max(32*scale, h)
|
|
|
|
//ctx.fillStyle = "#"+(Number(`0x1${colors[index].substring(1)}`) ^ 0xFFFFFF).toString(16).substring(1).toUpperCase()
|
|
ctx.fillStyle = "#ffffff"
|
|
ctx.fillRect(widgetX+x, widgetY+y, w, h)
|
|
|
|
const selectedColor = getDrawColor(index/values.length, "FF")
|
|
ctx.fillStyle = selectedColor
|
|
ctx.fillRect(widgetX+x+border, widgetY+y+border, w-border*2, h-border*2)
|
|
|
|
// Display
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(LiteGraph.NODE_SLOT_HEIGHT*0.5, LiteGraph.NODE_SLOT_HEIGHT*(index + 0.5)+4, 4, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = "white";
|
|
ctx.stroke();
|
|
|
|
if (node.selected) {
|
|
const connectedNode = recursiveLinkUpstream(node, index)
|
|
if (connectedNode) {
|
|
|
|
if (connectedNode.type != node.type) {
|
|
const [x, y] = connectedNode.pos
|
|
const [w, h] = connectedNode.size
|
|
const offset = 5
|
|
const titleHeight = LiteGraph.NODE_TITLE_HEIGHT * (connectedNode.type === "Reroute" ? 0 : 1)
|
|
|
|
ctx.strokeStyle = selectedColor
|
|
ctx.lineWidth = 5;
|
|
ctx.strokeRect(x-offset-node.pos[0], y-offset-node.pos[1]-titleHeight, w+offset*2, h+offset*2+titleHeight)
|
|
}
|
|
}
|
|
}
|
|
ctx.lineWidth = 1;
|
|
ctx.closePath();
|
|
|
|
},
|
|
};
|
|
|
|
widget.canvas = document.createElement("canvas");
|
|
widget.canvas.className = "dave-custom-canvas";
|
|
|
|
// Mouse event... could be usefull
|
|
// widget.canvas.addEventListener("click", function(e) {
|
|
// console.log("click", e)
|
|
// });
|
|
// widget.canvas.addEventListener("mouseenter", function(e) {
|
|
// console.log("mouseenter", e)
|
|
// });
|
|
// widget.canvas.addEventListener("mouseleave", function(e) {
|
|
// console.log("mouseleave", e)
|
|
// });
|
|
|
|
widget.parent = node;
|
|
document.body.appendChild(widget.canvas);
|
|
|
|
node.addCustomWidget(widget);
|
|
|
|
app.canvas.onDrawBackground = function () {
|
|
// Draw node isnt fired once the node is off the screen
|
|
// if it goes off screen quickly, the input may not be removed
|
|
// this shifts it off screen so it can be moved back if the node is visible.
|
|
for (let n in app.graph._nodes) {
|
|
n = graph._nodes[n];
|
|
for (let w in n.widgets) {
|
|
let wid = n.widgets[w];
|
|
if (Object.hasOwn(wid, "canvas")) {
|
|
wid.canvas.style.left = -8000 + "px";
|
|
wid.canvas.style.position = "absolute";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
node.onResize = function (size) {
|
|
computeCanvasSize(node, size);
|
|
}
|
|
|
|
return { minWidth: 200, minHeight: 200, widget }
|
|
}
|
|
|
|
|
|
function transformFunc(widget, value, node, index) {
|
|
const s = widget.options.step / 10;
|
|
widget.value = Math.round(value / s) * s;
|
|
node.properties["values"][node.widgets[3].value][index] = widget.value
|
|
if (node.widgets_values) {
|
|
node.widgets_values[2] = node.properties["values"].join()
|
|
}
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "Comfy.MultiAreaConditioning",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "MultiAreaConditioning") {
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = function () {
|
|
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
|
|
|
this.setProperty("width", 512)
|
|
this.setProperty("height", 512)
|
|
this.setProperty("values", [[0, 0, 0, 0], [0, 0, 0, 0]])
|
|
|
|
this.selected = false
|
|
this.converted = false
|
|
|
|
this.serialize_widgets = true;
|
|
|
|
CUSTOM_INT(this, "resolutionX", 512, function (v, _, node) {const s = this.options.step / 10; this.value = Math.round(v / s) * s; node.properties["width"] = this.value})
|
|
CUSTOM_INT(this, "resolutionY", 512, function (v, _, node) {const s = this.options.step / 10; this.value = Math.round(v / s) * s; node.properties["height"] = this.value})
|
|
|
|
addCanvas(this, app)
|
|
|
|
CUSTOM_INT(
|
|
this,
|
|
"index",
|
|
0,
|
|
function (v, _, node) {
|
|
|
|
let values = node.properties["values"]
|
|
|
|
node.widgets[4].value = values[v][0]
|
|
node.widgets[5].value = values[v][1]
|
|
node.widgets[6].value = values[v][2]
|
|
node.widgets[7].value = values[v][3]
|
|
},
|
|
{ step: 10, max: 1 }
|
|
|
|
)
|
|
|
|
CUSTOM_INT(this, "x", 0, function (v, _, node) {transformFunc(this, v, node, 0)})
|
|
CUSTOM_INT(this, "y", 0, function (v, _, node) {transformFunc(this, v, node, 1)})
|
|
CUSTOM_INT(this, "width", 0, function (v, _, node) {transformFunc(this, v, node, 2)})
|
|
CUSTOM_INT(this, "height", 0, function (v, _, node) {transformFunc(this, v, node, 3)})
|
|
|
|
this.removeNodeInputs = function (indexesToRemove) {
|
|
indexesToRemove.sort((a, b) => b - a);
|
|
|
|
for (let i of indexesToRemove) {
|
|
if (i <= 1) { continue } // if not first 2
|
|
this.removeInput(i)
|
|
this.properties.values.splice(i, 1)
|
|
}
|
|
|
|
const inputLenght = this.inputs.length-1
|
|
|
|
this.widgets[3].options.max = inputLenght
|
|
if (this.widgets[3].value > inputLenght) {
|
|
this.widgets[3].value = inputLenght
|
|
}
|
|
|
|
this.onResize(this.size)
|
|
|
|
for (let i in this.inputs) {
|
|
this.inputs[i].name = "conditioning" + i
|
|
}
|
|
}
|
|
|
|
this.getExtraMenuOptions = function(_, options) {
|
|
options.unshift(
|
|
{
|
|
content: "add input",
|
|
callback: () => {
|
|
this.properties["values"].push([0, 0, 0, 0])
|
|
|
|
const index = this.inputs.length
|
|
|
|
this.addInput("conditioning"+index, "CONDITIONING")
|
|
|
|
this.widgets[3].options.max = index
|
|
|
|
this.onResize(this.size)
|
|
},
|
|
},
|
|
{
|
|
content: "remove currently selected input",
|
|
callback: () => { this.removeNodeInputs([this.widgets[3].value]) },
|
|
},
|
|
{
|
|
content: "remove all unconnected inputs",
|
|
callback: () => {
|
|
let indexesToRemove = []
|
|
|
|
for (let i = 2; i < this.inputs.length; i++) {
|
|
if (!this.inputs[i].link) {
|
|
indexesToRemove.push(i)
|
|
}
|
|
}
|
|
|
|
if (indexesToRemove.length) {
|
|
this.removeNodeInputs(indexesToRemove)
|
|
}
|
|
|
|
},
|
|
},
|
|
// not working
|
|
// {
|
|
// content: `${(this.converted ? "remove " : "add" )} size resizing`,
|
|
// callback: () => {
|
|
// this.converted = !this.converted
|
|
// if (this.converted) {
|
|
|
|
// console.log("before", this.inputs)
|
|
|
|
// for (const widgetName of ["testHeight", "testWidth"]) {
|
|
// CUSTOM_INT(
|
|
// this,
|
|
// widgetName,
|
|
// 512,
|
|
// function (v, _, node) {
|
|
// console.log(v, node)
|
|
|
|
// const s = this.options.step / 10;
|
|
// this.value = Math.round(v / s) * s;
|
|
// },
|
|
// { "min": 64,"max": 8192,"step": 64,"precision": 0 },
|
|
// )
|
|
// convertToInput(this, this.widgets.at(-1), ["INT", this.widgets.at(-1).options])
|
|
|
|
// this.inputs.unshift(this.inputs.pop())
|
|
// }
|
|
|
|
// console.log("after", this.inputs)
|
|
|
|
// } else {
|
|
// this.removeInput(0)
|
|
// this.removeInput(0)
|
|
// }
|
|
// this.onResize(this.size)
|
|
// },
|
|
// },
|
|
);
|
|
}
|
|
|
|
this.onRemoved = function () {
|
|
// When removing this node we need to remove the input from the DOM
|
|
for (let y in this.widgets) {
|
|
if (this.widgets[y].canvas) {
|
|
this.widgets[y].canvas.remove();
|
|
}
|
|
}
|
|
};
|
|
|
|
this.onSelected = function () {
|
|
this.selected = true
|
|
}
|
|
this.onDeselected = function () {
|
|
this.selected = false
|
|
}
|
|
|
|
return r;
|
|
};
|
|
}
|
|
},
|
|
loadedGraphNode(node, _) {
|
|
if (node.type === "MultiAreaConditioning") {
|
|
node.widgets[3].options["max"] = node.properties["values"].length-1
|
|
}
|
|
},
|
|
|
|
}); |