121 lines
5.9 KiB
JavaScript
121 lines
5.9 KiB
JavaScript
/**
|
|
* ComfyUI GeomPack - Self Intersections Dynamic Display
|
|
* Shows self-intersecting faces in the node after execution
|
|
*/
|
|
|
|
import { app } from "../../../scripts/app.js";
|
|
|
|
app.registerExtension({
|
|
name: "geompack.self_intersections",
|
|
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "GeomPackDetectSelfIntersections") {
|
|
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = function() {
|
|
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
|
|
|
// Create info panel container
|
|
const infoPanel = document.createElement("div");
|
|
infoPanel.style.backgroundColor = "#1a1a1a";
|
|
infoPanel.style.padding = "8px";
|
|
infoPanel.style.fontSize = "10px";
|
|
infoPanel.style.fontFamily = "monospace";
|
|
infoPanel.style.color = "#ccc";
|
|
infoPanel.style.lineHeight = "1.4";
|
|
infoPanel.style.maxHeight = "200px";
|
|
infoPanel.style.overflowY = "auto";
|
|
infoPanel.style.borderRadius = "4px";
|
|
infoPanel.innerHTML = '<span style="color: #666;">Run workflow to detect self-intersections</span>';
|
|
|
|
// Add widget
|
|
const widget = this.addDOMWidget("intersection_info", "INTERSECTION_INFO", infoPanel, {
|
|
getValue() { return ""; },
|
|
setValue(v) { }
|
|
});
|
|
|
|
widget.computeSize = () => [this.size[0] - 20, 120];
|
|
|
|
this.intersectionInfoPanel = infoPanel;
|
|
|
|
// Handle execution results
|
|
const onExecuted = this.onExecuted;
|
|
this.onExecuted = function(message) {
|
|
onExecuted?.apply(this, arguments);
|
|
|
|
if (message?.intersection_data && message.intersection_data.length > 0) {
|
|
let html = '';
|
|
|
|
for (const data of message.intersection_data) {
|
|
const { mesh_name, num_intersecting_faces, num_intersection_pairs, total_faces, total_vertices, has_cgal, faces } = data;
|
|
|
|
// Header with mesh name and status
|
|
html += `<div style="margin-bottom: 8px;">`;
|
|
|
|
// Color based on whether there are intersections
|
|
const statusColor = num_intersecting_faces === 0 ? '#6f6' : '#f66';
|
|
const statusText = num_intersecting_faces === 0 ? 'Clean' : `${num_intersecting_faces} intersecting face(s)`;
|
|
|
|
html += `<div style="color: #fff; font-weight: bold; margin-bottom: 4px;">`;
|
|
html += `${mesh_name}: <span style="color: ${statusColor};">${statusText}</span>`;
|
|
html += `</div>`;
|
|
|
|
if (!has_cgal) {
|
|
html += `<div style="color: #f96; font-size: 9px; margin-bottom: 4px;">`;
|
|
html += `CGAL not available - results may be incomplete`;
|
|
html += `</div>`;
|
|
}
|
|
|
|
if (num_intersecting_faces > 0) {
|
|
html += `<div style="color: #888; font-size: 9px; margin-bottom: 4px;">`;
|
|
html += `${num_intersection_pairs} intersection pair(s) detected`;
|
|
html += `</div>`;
|
|
|
|
// Face table
|
|
html += `<table style="width: 100%; border-collapse: collapse; font-size: 9px;">`;
|
|
html += `<tr style="color: #888; border-bottom: 1px solid #333;">`;
|
|
html += `<th style="text-align: left; padding: 2px 4px;">Face</th>`;
|
|
html += `<th style="text-align: left; padding: 2px 4px;">Vertices</th>`;
|
|
html += `</tr>`;
|
|
|
|
// Show faces (limit to 20 for UI performance)
|
|
const displayFaces = faces.slice(0, 20);
|
|
for (const face of displayFaces) {
|
|
html += `<tr style="border-bottom: 1px solid #222;">`;
|
|
html += `<td style="padding: 2px 4px; color: #f66;">${face.id}</td>`;
|
|
html += `<td style="padding: 2px 4px; color: #888;">[${face.vertices.join(', ')}]</td>`;
|
|
html += `</tr>`;
|
|
}
|
|
|
|
if (faces.length > 20) {
|
|
html += `<tr><td colspan="2" style="padding: 4px; color: #888; text-align: center;">`;
|
|
html += `... and ${faces.length - 20} more faces`;
|
|
html += `</td></tr>`;
|
|
}
|
|
|
|
html += `</table>`;
|
|
} else {
|
|
html += `<div style="color: #888; font-size: 9px;">`;
|
|
html += `Total: ${total_vertices.toLocaleString()} vertices, ${total_faces.toLocaleString()} faces`;
|
|
html += `</div>`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
}
|
|
|
|
infoPanel.innerHTML = html;
|
|
|
|
// Resize widget based on content
|
|
const numRows = Math.min(message.intersection_data[0]?.faces?.length || 0, 20) + 3;
|
|
const height = Math.min(Math.max(80, numRows * 16 + 40), 250);
|
|
widget.computeSize = () => [this.size[0] - 20, height];
|
|
this.setDirtyCanvas(true);
|
|
}
|
|
};
|
|
|
|
return r;
|
|
};
|
|
}
|
|
}
|
|
});
|