77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
|
import { $el } from "../../../scripts/ui.js";
|
|
|
|
/*
|
|
A method that returns the required style for the html
|
|
*/
|
|
function get_position_style(ctx, widget_width, y, node_height) {
|
|
const MARGIN = 4; // the margin around the html element
|
|
|
|
/* Create a transform that deals with all the scrolling and zooming */
|
|
const elRect = ctx.canvas.getBoundingClientRect();
|
|
const transform = new DOMMatrix()
|
|
.scaleSelf(
|
|
elRect.width / ctx.canvas.width,
|
|
elRect.height / ctx.canvas.height
|
|
)
|
|
.multiplySelf(ctx.getTransform())
|
|
.translateSelf(MARGIN, MARGIN + y);
|
|
|
|
return {
|
|
transformOrigin: "0 0",
|
|
transform: transform,
|
|
left: `0px`,
|
|
top: `0px`,
|
|
position: "absolute",
|
|
maxWidth: `${widget_width - MARGIN * 2}px`,
|
|
maxHeight: `${node_height - MARGIN * 2}px`, // we're assuming we have the whole height of the node
|
|
width: `auto`,
|
|
height: `auto`,
|
|
};
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "the.unique,name",
|
|
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeType.comfyClass == "HtmlNode") {
|
|
/*
|
|
Hijack the onNodeCreated call to add our widget
|
|
*/
|
|
const orig_nodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = function () {
|
|
orig_nodeCreated?.apply(this, arguments);
|
|
|
|
const widget = {
|
|
type: "HTML", // whatever
|
|
name: "flying", // whatever
|
|
draw(ctx, node, widget_width, y, widget_height) {
|
|
Object.assign(
|
|
this.inputEl.style,
|
|
get_position_style(ctx, widget_width, y, node.size[1])
|
|
); // assign the required style when we are drawn
|
|
},
|
|
};
|
|
|
|
/*
|
|
Create an html element and add it to the document.
|
|
Look at $el in ui.js for all the options here
|
|
*/
|
|
widget.inputEl = $el("img", {
|
|
src: "https://assets-global.website-files.com/65d658559223871198e78bca/65e4fd64fb258c6d9bd8c276_griptape-Chunck_beige.svg",
|
|
});
|
|
document.body.appendChild(widget.inputEl);
|
|
|
|
/*
|
|
Add the widget, make sure we clean up nicely, and we do not want to be serialized!
|
|
*/
|
|
this.addCustomWidget(widget);
|
|
this.onRemoved = function () {
|
|
widget.inputEl.remove();
|
|
};
|
|
this.serialize_widgets = false;
|
|
};
|
|
}
|
|
},
|
|
});
|