PozzettiAndrea
7947ff3f23
Vendor the viewer JavaScript into javascript/ and drop the comfy-3d-viewers dependency. The viewers were previously copied into web/ at every startup by prestartup_script.py, which made the served frontend depend on a second package resolving at runtime. Bundles are vendored as .mjs so ComfyUI's **/*.js auto-import glob skips them: they are iframe-only and must never enter the shared main browser realm. Only the widget entry points stay .js. Also replace comfy_env.copy_files with a local helper. Its two extra features (frame-derived source dir, silent no-op on a missing source) were unused here, and the asset seeding now resolves the input directory through folder_paths.get_input_directory() so it follows ComfyUI Desktop and --input-directory instead of writing into the code tree. comfy-test.toml moves to the current schema: [test.workflows] cuda (there is no "gpu" key -- the accelerator is named by backend, and the old spelling parsed to an empty list, so CUDA runners silently ran the full unfiltered set), an explicit [test.platforms] platforms allowlist (per-platform booleans are no longer supported), and the javascript level. DisplayName becomes "DepthAnythingV3": the namespace enforced on registerExtension names is derived from it, and the space in "Depth Anything V3" made that prefix invalid. Delete the 21 loose js/viewer/*.js modules -- they are already inside viewer-bundle-vtk.mjs, so shipping them loose leaked the whole viewer into the shared realm.
134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
/**
|
|
* UI component factory functions for ComfyUI 3D viewer widgets
|
|
*/
|
|
|
|
/**
|
|
* Create a container div for viewer + info panel
|
|
* @param {Object} options - Container options
|
|
* @param {string} options.backgroundColor - Background color (default: "#2a2a2a")
|
|
* @returns {HTMLDivElement} Container element
|
|
*/
|
|
export function createContainer(options = {}) {
|
|
const { backgroundColor = "#2a2a2a" } = options;
|
|
|
|
const container = document.createElement("div");
|
|
container.style.width = "100%";
|
|
container.style.height = "100%";
|
|
container.style.display = "flex";
|
|
container.style.flexDirection = "column";
|
|
container.style.backgroundColor = backgroundColor;
|
|
container.style.overflow = "hidden";
|
|
|
|
return container;
|
|
}
|
|
|
|
/**
|
|
* Create an iframe for embedding a viewer
|
|
* @param {string} src - Initial iframe source URL
|
|
* @param {Object} options - Iframe options
|
|
* @param {string} options.minHeight - Minimum height (default: "0")
|
|
* @param {string} options.backgroundColor - Background color (default: "#2a2a2a")
|
|
* @returns {HTMLIFrameElement} Iframe element
|
|
*/
|
|
export function createIframe(src, options = {}) {
|
|
const {
|
|
minHeight = "0",
|
|
backgroundColor = "#2a2a2a"
|
|
} = options;
|
|
|
|
const iframe = document.createElement("iframe");
|
|
iframe.style.width = "100%";
|
|
iframe.style.flex = "1 1 0";
|
|
iframe.style.minHeight = minHeight;
|
|
iframe.style.border = "none";
|
|
iframe.style.backgroundColor = backgroundColor;
|
|
iframe.src = src;
|
|
|
|
return iframe;
|
|
}
|
|
|
|
/**
|
|
* Create an info panel for displaying mesh metadata
|
|
* @param {string} placeholder - Initial placeholder text
|
|
* @param {Object} options - Panel options
|
|
* @returns {HTMLDivElement} Info panel element
|
|
*/
|
|
export function createInfoPanel(placeholder = "Info will appear here after execution", options = {}) {
|
|
const {
|
|
backgroundColor = "#1a1a1a",
|
|
borderTop = "1px solid #444",
|
|
padding = "6px 12px",
|
|
fontSize = "10px",
|
|
fontFamily = "monospace",
|
|
color = "#ccc",
|
|
lineHeight = "1.3"
|
|
} = options;
|
|
|
|
const infoPanel = document.createElement("div");
|
|
infoPanel.style.backgroundColor = backgroundColor;
|
|
infoPanel.style.borderTop = borderTop;
|
|
infoPanel.style.padding = padding;
|
|
infoPanel.style.fontSize = fontSize;
|
|
infoPanel.style.fontFamily = fontFamily;
|
|
infoPanel.style.color = color;
|
|
infoPanel.style.lineHeight = lineHeight;
|
|
infoPanel.style.flexShrink = "0";
|
|
infoPanel.style.overflow = "hidden";
|
|
infoPanel.innerHTML = `<span style="color: #888;">${placeholder}</span>`;
|
|
|
|
return infoPanel;
|
|
}
|
|
|
|
/**
|
|
* Create an analysis info panel (for connected components, self-intersections, etc.)
|
|
* @param {string} placeholder - Initial placeholder text
|
|
* @param {Object} options - Panel options
|
|
* @returns {HTMLDivElement} Analysis panel element
|
|
*/
|
|
export function createAnalysisPanel(placeholder = "Run workflow to see results", options = {}) {
|
|
const {
|
|
backgroundColor = "#1a1a1a",
|
|
padding = "8px",
|
|
fontSize = "10px",
|
|
fontFamily = "monospace",
|
|
color = "#ccc",
|
|
lineHeight = "1.4",
|
|
maxHeight = "200px",
|
|
borderRadius = "4px"
|
|
} = options;
|
|
|
|
const panel = document.createElement("div");
|
|
panel.style.backgroundColor = backgroundColor;
|
|
panel.style.padding = padding;
|
|
panel.style.fontSize = fontSize;
|
|
panel.style.fontFamily = fontFamily;
|
|
panel.style.color = color;
|
|
panel.style.lineHeight = lineHeight;
|
|
panel.style.maxHeight = maxHeight;
|
|
panel.style.overflowY = "auto";
|
|
panel.style.borderRadius = borderRadius;
|
|
panel.innerHTML = `<span style="color: #666;">${placeholder}</span>`;
|
|
|
|
return panel;
|
|
}
|
|
|
|
/**
|
|
* Show error in an info panel
|
|
* @param {HTMLElement} panel - The info panel element
|
|
* @param {string} message - Error message
|
|
*/
|
|
export function showPanelError(panel, message) {
|
|
panel.innerHTML = `<div style="color: #ff6b6b; padding: 8px;">Error: ${message}</div>`;
|
|
}
|
|
|
|
/**
|
|
* Create default widget options
|
|
* @returns {Object} Widget options object
|
|
*/
|
|
export function createWidgetOptions() {
|
|
return {
|
|
getValue() { return ""; },
|
|
setValue(v) { }
|
|
};
|
|
}
|