PozzettiAndrea
414f759791
The viewer JS/HTML/bundles are now committed in javascript/ (declared via pyproject [tool.comfy] web = "javascript") instead of being copied from the shared comfy-3d-viewers pip package at prestartup. Consequences: - requirements.txt is now just comfy-env (host env installs nothing else, per the never-touch-the-host-env principle) - prestartup_script.py no longer copies viewers or web_src; it keeps only setup_env() and the input-asset copies - WEB_DIRECTORY attribute removed; the pyproject declaration is the single source (served at /extensions/comfyui-geometrypack/, keyed by project name) - web_src/ deleted; its 6 widgets now live in javascript/js/ as the tracked source, edited directly - viewer_pbr.html hardcoded-fallback URL updated to the new mount name Iframe URLs auto-detect the mount from import.meta.url, so the folder rename and mount-name change are transparent at runtime.
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) { }
|
|
};
|
|
}
|