Spaces:
Runtime error
Runtime error
import { app, ANIM_PREVIEW_WIDGET } from "./app.js"; | |
const SIZE = Symbol(); | |
function intersect(a, b) { | |
const x = Math.max(a.x, b.x); | |
const num1 = Math.min(a.x + a.width, b.x + b.width); | |
const y = Math.max(a.y, b.y); | |
const num2 = Math.min(a.y + a.height, b.y + b.height); | |
if (num1 >= x && num2 >= y) return [x, y, num1 - x, num2 - y]; | |
else return null; | |
} | |
function getClipPath(node, element) { | |
const selectedNode = Object.values(app.canvas.selected_nodes)[0]; | |
if (selectedNode && selectedNode !== node) { | |
const elRect = element.getBoundingClientRect(); | |
const MARGIN = 7; | |
const scale = app.canvas.ds.scale; | |
const bounding = selectedNode.getBounding(); | |
const intersection = intersect( | |
{ x: elRect.x / scale, y: elRect.y / scale, width: elRect.width / scale, height: elRect.height / scale }, | |
{ | |
x: selectedNode.pos[0] + app.canvas.ds.offset[0] - MARGIN, | |
y: selectedNode.pos[1] + app.canvas.ds.offset[1] - LiteGraph.NODE_TITLE_HEIGHT - MARGIN, | |
width: bounding[2] + MARGIN + MARGIN, | |
height: bounding[3] + MARGIN + MARGIN, | |
} | |
); | |
if (!intersection) { | |
return ""; | |
} | |
const widgetRect = element.getBoundingClientRect(); | |
const clipX = elRect.left + intersection[0] - widgetRect.x / scale + "px"; | |
const clipY = elRect.top + intersection[1] - widgetRect.y / scale + "px"; | |
const clipWidth = intersection[2] + "px"; | |
const clipHeight = intersection[3] + "px"; | |
const path = `polygon(0% 0%, 0% 100%, ${clipX} 100%, ${clipX} ${clipY}, calc(${clipX} + ${clipWidth}) ${clipY}, calc(${clipX} + ${clipWidth}) calc(${clipY} + ${clipHeight}), ${clipX} calc(${clipY} + ${clipHeight}), ${clipX} 100%, 100% 100%, 100% 0%)`; | |
return path; | |
} | |
return ""; | |
} | |
function computeSize(size) { | |
if (this.widgets?.[0]?.last_y == null) return; | |
let y = this.widgets[0].last_y; | |
let freeSpace = size[1] - y; | |
let widgetHeight = 0; | |
let dom = []; | |
for (const w of this.widgets) { | |
if (w.type === "converted-widget") { | |
// Ignore | |
delete w.computedHeight; | |
} else if (w.computeSize) { | |
widgetHeight += w.computeSize()[1] + 4; | |
} else if (w.element) { | |
// Extract DOM widget size info | |
const styles = getComputedStyle(w.element); | |
let minHeight = w.options.getMinHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-min-height")); | |
let maxHeight = w.options.getMaxHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-max-height")); | |
let prefHeight = w.options.getHeight?.() ?? styles.getPropertyValue("--comfy-widget-height"); | |
if (prefHeight.endsWith?.("%")) { | |
prefHeight = size[1] * (parseFloat(prefHeight.substring(0, prefHeight.length - 1)) / 100); | |
} else { | |
prefHeight = parseInt(prefHeight); | |
if (isNaN(minHeight)) { | |
minHeight = prefHeight; | |
} | |
} | |
if (isNaN(minHeight)) { | |
minHeight = 50; | |
} | |
if (!isNaN(maxHeight)) { | |
if (!isNaN(prefHeight)) { | |
prefHeight = Math.min(prefHeight, maxHeight); | |
} else { | |
prefHeight = maxHeight; | |
} | |
} | |
dom.push({ | |
minHeight, | |
prefHeight, | |
w, | |
}); | |
} else { | |
widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4; | |
} | |
} | |
freeSpace -= widgetHeight; | |
// Calculate sizes with all widgets at their min height | |
const prefGrow = []; // Nodes that want to grow to their prefd size | |
const canGrow = []; // Nodes that can grow to auto size | |
let growBy = 0; | |
for (const d of dom) { | |
freeSpace -= d.minHeight; | |
if (isNaN(d.prefHeight)) { | |
canGrow.push(d); | |
d.w.computedHeight = d.minHeight; | |
} else { | |
const diff = d.prefHeight - d.minHeight; | |
if (diff > 0) { | |
prefGrow.push(d); | |
growBy += diff; | |
d.diff = diff; | |
} else { | |
d.w.computedHeight = d.minHeight; | |
} | |
} | |
} | |
if (this.imgs && !this.widgets.find((w) => w.name === ANIM_PREVIEW_WIDGET)) { | |
// Allocate space for image | |
freeSpace -= 220; | |
} | |
this.freeWidgetSpace = freeSpace; | |
if (freeSpace < 0) { | |
// Not enough space for all widgets so we need to grow | |
size[1] -= freeSpace; | |
this.graph.setDirtyCanvas(true); | |
} else { | |
// Share the space between each | |
const growDiff = freeSpace - growBy; | |
if (growDiff > 0) { | |
// All pref sizes can be fulfilled | |
freeSpace = growDiff; | |
for (const d of prefGrow) { | |
d.w.computedHeight = d.prefHeight; | |
} | |
} else { | |
// We need to grow evenly | |
const shared = -growDiff / prefGrow.length; | |
for (const d of prefGrow) { | |
d.w.computedHeight = d.prefHeight - shared; | |
} | |
freeSpace = 0; | |
} | |
if (freeSpace > 0 && canGrow.length) { | |
// Grow any that are auto height | |
const shared = freeSpace / canGrow.length; | |
for (const d of canGrow) { | |
d.w.computedHeight += shared; | |
} | |
} | |
} | |
// Position each of the widgets | |
for (const w of this.widgets) { | |
w.y = y; | |
if (w.computedHeight) { | |
y += w.computedHeight; | |
} else if (w.computeSize) { | |
y += w.computeSize()[1] + 4; | |
} else { | |
y += LiteGraph.NODE_WIDGET_HEIGHT + 4; | |
} | |
} | |
} | |
// Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen | |
const elementWidgets = new Set(); | |
const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes; | |
LGraphCanvas.prototype.computeVisibleNodes = function () { | |
const visibleNodes = computeVisibleNodes.apply(this, arguments); | |
for (const node of app.graph._nodes) { | |
if (elementWidgets.has(node)) { | |
const hidden = visibleNodes.indexOf(node) === -1; | |
for (const w of node.widgets) { | |
if (w.element) { | |
w.element.hidden = hidden; | |
w.element.style.display = hidden ? "none" : undefined; | |
if (hidden) { | |
w.options.onHide?.(w); | |
} | |
} | |
} | |
} | |
} | |
return visibleNodes; | |
}; | |
let enableDomClipping = true; | |
export function addDomClippingSetting() { | |
app.ui.settings.addSetting({ | |
id: "Comfy.DOMClippingEnabled", | |
name: "Enable DOM element clipping (enabling may reduce performance)", | |
type: "boolean", | |
defaultValue: enableDomClipping, | |
onChange(value) { | |
enableDomClipping = !!value; | |
}, | |
}); | |
} | |
LGraphNode.prototype.addDOMWidget = function (name, type, element, options) { | |
options = { hideOnZoom: true, selectOn: ["focus", "click"], ...options }; | |
if (!element.parentElement) { | |
document.body.append(element); | |
} | |
element.hidden = true; | |
element.style.display = "none"; | |
let mouseDownHandler; | |
if (element.blur) { | |
mouseDownHandler = (event) => { | |
if (!element.contains(event.target)) { | |
element.blur(); | |
} | |
}; | |
document.addEventListener("mousedown", mouseDownHandler); | |
} | |
const widget = { | |
type, | |
name, | |
get value() { | |
return options.getValue?.() ?? undefined; | |
}, | |
set value(v) { | |
options.setValue?.(v); | |
widget.callback?.(widget.value); | |
}, | |
draw: function (ctx, node, widgetWidth, y, widgetHeight) { | |
if (widget.computedHeight == null) { | |
computeSize.call(node, node.size); | |
} | |
const hidden = | |
node.flags?.collapsed || | |
(!!options.hideOnZoom && app.canvas.ds.scale < 0.5) || | |
widget.computedHeight <= 0 || | |
widget.type === "converted-widget"|| | |
widget.type === "hidden"; | |
element.hidden = hidden; | |
element.style.display = hidden ? "none" : null; | |
if (hidden) { | |
widget.options.onHide?.(widget); | |
return; | |
} | |
const margin = 10; | |
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 ); | |
const scale = new DOMMatrix().scaleSelf(transform.a, transform.d); | |
Object.assign(element.style, { | |
transformOrigin: "0 0", | |
transform: scale, | |
left: `${transform.a + transform.e + elRect.left}px`, | |
top: `${transform.d + transform.f + elRect.top}px`, | |
width: `${widgetWidth - margin * 2}px`, | |
height: `${(widget.computedHeight ?? 50) - margin * 2}px`, | |
position: "absolute", | |
zIndex: app.graph._nodes.indexOf(node), | |
}); | |
if (enableDomClipping) { | |
element.style.clipPath = getClipPath(node, element); | |
element.style.willChange = "clip-path"; | |
} | |
this.options.onDraw?.(widget); | |
}, | |
element, | |
options, | |
onRemove() { | |
if (mouseDownHandler) { | |
document.removeEventListener("mousedown", mouseDownHandler); | |
} | |
element.remove(); | |
}, | |
}; | |
for (const evt of options.selectOn) { | |
element.addEventListener(evt, () => { | |
app.canvas.selectNode(this); | |
app.canvas.bringToFront(this); | |
}); | |
} | |
this.addCustomWidget(widget); | |
elementWidgets.add(this); | |
const collapse = this.collapse; | |
this.collapse = function() { | |
collapse.apply(this, arguments); | |
if(this.flags?.collapsed) { | |
element.hidden = true; | |
element.style.display = "none"; | |
} | |
} | |
const onRemoved = this.onRemoved; | |
this.onRemoved = function () { | |
element.remove(); | |
elementWidgets.delete(this); | |
onRemoved?.apply(this, arguments); | |
}; | |
if (!this[SIZE]) { | |
this[SIZE] = true; | |
const onResize = this.onResize; | |
this.onResize = function (size) { | |
options.beforeResize?.call(widget, this); | |
computeSize.call(this, size); | |
onResize?.apply(this, arguments); | |
options.afterResize?.call(widget, this); | |
}; | |
} | |
return widget; | |
}; | |