diff --git a/nodes/debug/__init__.py b/nodes/debug/__init__.py index be478bf..be0609e 100644 --- a/nodes/debug/__init__.py +++ b/nodes/debug/__init__.py @@ -1,2 +1,2 @@ -from .toast_box import * -from .dialog_box import * \ No newline at end of file +# from .toast_box import * +# from .dialog_box import * \ No newline at end of file diff --git a/nodes/debug/dialog_box.py b/nodes/debug/dialog_box.py index 8f86ac7..66b56ae 100644 --- a/nodes/debug/dialog_box.py +++ b/nodes/debug/dialog_box.py @@ -1,46 +1,46 @@ -from ... import register_node +# from ... import register_node -@register_node(emoji="🪲") -class DialogBox: - """ - A ComfyUI node that displays dialog boxes during workflow execution. - """ +# @register_node(emoji="🪲") +# class DialogBox: +# """ +# A ComfyUI node that displays dialog boxes during workflow execution. +# """ - def __init__(self): - pass +# def __init__(self): +# pass - @classmethod - def INPUT_TYPES(s): - return { - "required": { - "dialog_type": (["info", "success", "warn", "error", "confirm"], { - "default": "info" - }), - "message": ("STRING", { - "default": "Hello from DialogBox!", - "multiline": True - }), - } - } +# @classmethod +# def INPUT_TYPES(s): +# return { +# "required": { +# "dialog_type": (["info", "success", "warn", "error", "confirm"], { +# "default": "info" +# }), +# "message": ("STRING", { +# "default": "Hello from DialogBox!", +# "multiline": True +# }), +# } +# } - RETURN_TYPES = ("STRING",) - RETURN_NAMES = ("message",) - FUNCTION = "run" - CATEGORY = "EasyToolkit/Debug" - OUTPUT_NODE = True +# RETURN_TYPES = ("STRING",) +# RETURN_NAMES = ("message",) +# FUNCTION = "run" +# CATEGORY = "EasyToolkit/Debug" +# OUTPUT_NODE = True - def run(self, dialog_type, message): - """ - Display a dialog box and return user response. - """ - # The actual dialog display is handled by the frontend JavaScript - # This node triggers the frontend extension and passes the dialog configuration - return { - "result": (message,), # Default empty response, will be updated by frontend - "ui": { - "dialogs": [{ - "type": dialog_type, - "message": message - }] - } - } \ No newline at end of file +# def run(self, dialog_type, message): +# """ +# Display a dialog box and return user response. +# """ +# # The actual dialog display is handled by the frontend JavaScript +# # This node triggers the frontend extension and passes the dialog configuration +# return { +# "result": (message,), # Default empty response, will be updated by frontend +# "ui": { +# "dialogs": [{ +# "type": dialog_type, +# "message": message +# }] +# } +# } \ No newline at end of file diff --git a/nodes/debug/toast_box.py b/nodes/debug/toast_box.py index 02f6bf9..ebacc38 100644 --- a/nodes/debug/toast_box.py +++ b/nodes/debug/toast_box.py @@ -1,58 +1,58 @@ -from ... import register_node +# from ... import register_node -@register_node(emoji="🪲") -class ToastBox: - """ - A ComfyUI node that displays toast notifications during workflow execution. - """ +# @register_node(emoji="🪲") +# class ToastBox: +# """ +# A ComfyUI node that displays toast notifications during workflow execution. +# """ - def __init__(self): - pass +# def __init__(self): +# pass - @classmethod - def INPUT_TYPES(s): - return { - "required": { - "type": (["info", "success", "warn", "error"], { - "default": "info" - }), - "mode": (["comfyui", "system"], { - "default": "comfyui" - }), - "message": ("STRING", { - "default": "Hello from ToastBox!", - "multiline": True - }), - "duration": ("INT", { - "default": 3000, - "min": 1000, - "max": 10000, - "step": 500 - }), - } - } +# @classmethod +# def INPUT_TYPES(s): +# return { +# "required": { +# "type": (["info", "success", "warn", "error"], { +# "default": "info" +# }), +# "mode": (["comfyui", "system"], { +# "default": "comfyui" +# }), +# "message": ("STRING", { +# "default": "Hello from ToastBox!", +# "multiline": True +# }), +# "duration": ("INT", { +# "default": 3000, +# "min": 1000, +# "max": 10000, +# "step": 500 +# }), +# } +# } - RETURN_TYPES = ("STRING",) - RETURN_NAMES = ("message",) - FUNCTION = "run" - CATEGORY = "EasyToolkit/Debug" - OUTPUT_NODE = True +# RETURN_TYPES = ("STRING",) +# RETURN_NAMES = ("message",) +# FUNCTION = "run" +# CATEGORY = "EasyToolkit/Debug" +# OUTPUT_NODE = True - def run(self, type, message, duration=3000, mode="comfyui"): - """ - Display a toast notification and pass through any input data. - """ - # This node doesn't modify data, it just triggers a frontend notification - # The actual toast display is handled by the frontend JavaScript - # The node execution itself triggers the frontend extension - return { - "result": (message,), - "ui": { - "notifications": [{ - "type": type, - "message": message, - "duration": duration, - "mode": mode - }] - } - } \ No newline at end of file +# def run(self, type, message, duration=3000, mode="comfyui"): +# """ +# Display a toast notification and pass through any input data. +# """ +# # This node doesn't modify data, it just triggers a frontend notification +# # The actual toast display is handled by the frontend JavaScript +# # The node execution itself triggers the frontend extension +# return { +# "result": (message,), +# "ui": { +# "notifications": [{ +# "type": type, +# "message": message, +# "duration": duration, +# "mode": mode +# }] +# } +# } \ No newline at end of file diff --git a/web/box_utils.js b/web/box_utils.js index ceba260..8e5401e 100644 --- a/web/box_utils.js +++ b/web/box_utils.js @@ -1,506 +1,506 @@ -import { app } from "../../scripts/app.js"; -import { - createMessage, - createDialogOverlay, - createDialogContainer, - createDialogTitle, - createDialogContent, - createButtonContainer, - createDialogButton, - setupDialogEvents -} from "./ui_utils.js"; - -/** - * Utility functions for ComfyUI dialog and notification boxes - * Provides a simplified and consistent API for showing messages to users - */ - -/** - * Dialog button types enumeration - */ -export const DialogButtonType = { - OK_ONLY: 'ok_only', - OK_CANCEL: 'ok_cancel' -}; - -/** - * Dialog result enumeration - */ -export const DialogResult = { - OK: 'ok', - CANCEL: 'cancel' -}; - -/** - * Begin a custom dialog box - * Creates the overlay and dialog container with title - * @param {string} title - Dialog title - * @param {Object} [options] - Dialog options - * @param {number} [options.minWidth=400] - Minimum dialog width in pixels - * @param {number} [options.maxWidth=600] - Maximum dialog width in pixels - * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage - * @returns {Object} Dialog context containing overlay, dialog, and content elements - */ -export function beginDialogBox(title, options = {}) { - const { - minWidth = 400, - maxWidth = 600, - maxHeight = 80 - } = options; - - // Create overlay - const overlay = createDialogOverlay(); - - // Create dialog - const dialog = createDialogContainer({ minWidth, maxWidth, maxHeight }); - - // Title - const titleElement = createDialogTitle(title); - dialog.appendChild(titleElement); - - // Content container for user controls - const content = createDialogContent(); - dialog.appendChild(content); - - // Add dialog to overlay - overlay.appendChild(dialog); - - // Add to body - document.body.appendChild(overlay); - - // Close on Escape key - const escapeHandler = (e) => { - if (e.key === 'Escape') { - document.body.removeChild(overlay); - document.removeEventListener('keydown', escapeHandler); - } - }; - - // Setup event handlers - const cleanupEvents = setupDialogEvents(overlay, escapeHandler); - - return { - overlay, - dialog, - content, - escapeHandler, - cleanupEvents - }; -} - -/** - * End a custom dialog box - * Adds buttons and handles cleanup - * @param {Object} dialogContext - Dialog context from beginDialogBox - * @param {DialogButtonType} buttonType - Type of buttons to show - * @param {Function} onButtonClick - Callback when buttons are clicked - * @param {Object} [options] - Button options - * @param {string} [options.okText='Ok'] - Text for OK button - * @param {string} [options.cancelText='Cancel'] - Text for Cancel button - */ -export function endDialogBox(dialogContext, buttonType, onButtonClick, options = {}) { - const { - overlay, - escapeHandler, - cleanupEvents - } = dialogContext; - - const { - okText = 'Ok', - cancelText = 'Cancel' - } = options; - - // Buttons container - const buttonContainer = createButtonContainer(); - - // Cleanup function - const cleanup = () => { - document.body.removeChild(overlay); - if (cleanupEvents) { - cleanupEvents(); - } else { - document.removeEventListener('keydown', escapeHandler); - } - }; - - // Add buttons based on buttonType - if (buttonType === DialogButtonType.OK_ONLY) { - const okButton = createDialogButton(okText, true); - okButton.onclick = () => { - cleanup(); - if (onButtonClick) { - onButtonClick(DialogResult.OK); - } - }; - buttonContainer.appendChild(okButton); - } else if (buttonType === DialogButtonType.OK_CANCEL) { - const cancelButton = createDialogButton(cancelText, false); - cancelButton.onclick = () => { - cleanup(); - if (onButtonClick) { - onButtonClick(DialogResult.CANCEL); - } - }; - - const okButton = createDialogButton(okText, true); - okButton.onclick = () => { - cleanup(); - if (onButtonClick) { - onButtonClick(DialogResult.OK); - } - }; - - buttonContainer.appendChild(okButton); - buttonContainer.appendChild(cancelButton); - } - - dialogContext.dialog.appendChild(buttonContainer); -} - - -/** - * Show a message dialog with customizable appearance - * @param {string} message - The message to display - * @param {Object} [options] - Message options - * @param {string} [options.title="Message"] - Dialog title - * @param {string} [options.color="#fff"] - Text color - * @param {number} [options.minWidth=300] - Minimum dialog width - * @param {number} [options.maxWidth=500] - Maximum dialog width - * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage - */ -export function showMessage(message, options = {}) { - const { - title = "Message", - color = "#fff", - minWidth = 300, - maxWidth = 500, - maxHeight = 80 - } = options; - - const dialogContext = beginDialogBox(title, { - minWidth, - maxWidth, - maxHeight - }); - - const messageElement = createMessage(message, { color }); - dialogContext.content.appendChild(messageElement); - - endDialogBox(dialogContext, DialogButtonType.OK_ONLY); -} - -/** - * Show an error message dialog - * @param {string} message - The error message - * @param {Error} [error] - Optional error object for logging - */ -export function showError(message, error = null) { - const errorMsg = error ? `${message}: ${error.message}` : message; - - showMessage(errorMsg, { - title: "❌ Error", - color: "#ff6b6b", - minWidth: 400, - maxWidth: 600 - }); - - if (error) { - console.error("[Error]", message, error); - } else { - console.error("[Error]", message); - } -} - -/** - * Show a success message dialog - * @param {string} message - The success message - */ -export function showSuccess(message) { - showMessage(message, { - title: "✅ Success", - color: "#4caf50", - minWidth: 300, - maxWidth: 500 - }); -} - -/** - * Show a warning message dialog - * @param {string} message - The warning message - */ -export function showWarning(message) { - showMessage(message, { - title: "⚠️ Warning", - color: "#ff9800", - minWidth: 400, - maxWidth: 600 - }); -} - -/** - * Show an info message dialog - * @param {string} message - The info message - */ -export function showInfo(message) { - showMessage(message, { - title: "ℹ️ Information", - color: "#2196f3", - minWidth: 300, - maxWidth: 500 - }); -} - -/** - * Show a confirmation dialog with custom yes/no text - * @param {string} message - The confirmation message - * @param {string} [yesText="OK"] - Text for yes button - * @param {string} [noText="Cancel"] - Text for no button - * @returns {Promise} - Promise that resolves to true if user confirmed, false if cancelled - */ -export function showConfirmDialog(message, yesText = "OK", noText = "Cancel") { - return new Promise((resolve) => { - const dialogContext = beginDialogBox("Confirmation", { - minWidth: 400, - maxWidth: 600 - }); - - const messageElement = createMessage(message, { color: "#fff" }); - messageElement.style.marginBottom = '15px'; - dialogContext.content.appendChild(messageElement); - - endDialogBox(dialogContext, DialogButtonType.OK_CANCEL, (result) => { - resolve(result === DialogResult.OK); - }, { - okText: yesText, - cancelText: noText - }); - }); -} - -/** - * Show a toast notification - * @param {Object} options - Toast options - * @param {string} options.severity - Severity level: "info", "success", "warn", "error" - * @param {string} options.summary - Toast title/summary - * @param {string} options.detail - Toast detail message - * @param {number} [options.life=3000] - Duration in milliseconds (0 for persistent) - */ -export function showToast({ severity = "info", summary, detail, life = 3000 }) { - app.extensionManager.toast.add({ - severity, - summary, - detail, - life - }); -} - -/** - * Show an info toast notification - * @param {string} summary - Toast title - * @param {string} detail - Toast detail message - * @param {number} [life=3000] - Duration in milliseconds - */ -export function showToastInfo(summary, detail, life = 3000) { - showToast({ - severity: "info", - summary, - detail, - life - }); -} - -/** - * Show a success toast notification - * @param {string} summary - Toast title - * @param {string} detail - Toast detail message - * @param {number} [life=3000] - Duration in milliseconds - */ -export function showToastSuccess(summary, detail, life = 3000) { - showToast({ - severity: "success", - summary, - detail, - life - }); -} - -/** - * Show an error toast notification - * @param {string} summary - Toast title - * @param {string} detail - Toast detail message - * @param {number} [life=5000] - Duration in milliseconds (longer default for errors) - */ -export function showToastError(summary, detail, life = 5000) { - showToast({ - severity: "error", - summary, - detail, - life - }); -} - -/** - * Show a warning toast notification - * @param {string} summary - Toast title - * @param {string} detail - Toast detail message - * @param {number} [life=4000] - Duration in milliseconds - */ -export function showToastWarning(summary, detail, life = 4000) { - showToast({ - severity: "warn", - summary, - detail, - life - }); -} +// import { app } from "../../scripts/app.js"; +// import { +// createMessage, +// createDialogOverlay, +// createDialogContainer, +// createDialogTitle, +// createDialogContent, +// createButtonContainer, +// createDialogButton, +// setupDialogEvents +// } from "./ui_utils.js"; // /** -// * Windows System Notification Functions -// * Provides system-level notifications using Web Notifications API +// * Utility functions for ComfyUI dialog and notification boxes +// * Provides a simplified and consistent API for showing messages to users // */ // /** -// * Check if system notifications are supported and permission is granted -// * @returns {Promise} - Promise that resolves to true if notifications are available +// * Dialog button types enumeration // */ -// export async function checkNotificationSupport() { -// if (!('Notification' in window)) { -// console.warn('This browser does not support system notifications'); -// return false; -// } - -// if (Notification.permission === 'granted') { -// return true; -// } - -// if (Notification.permission === 'denied') { -// console.warn('Notification permission has been denied'); -// return false; -// } - -// // Request permission -// const permission = await Notification.requestPermission(); -// return permission === 'granted'; -// } +// export const DialogButtonType = { +// OK_ONLY: 'ok_only', +// OK_CANCEL: 'ok_cancel' +// }; // /** -// * Show a system notification -// * @param {string} title - Notification title -// * @param {Object} [options] - Notification options -// * @param {string} [options.body] - Notification body text -// * @param {string} [options.icon] - URL of notification icon -// * @param {string} [options.image] - URL of notification image -// * @param {string} [options.tag] - Notification tag for grouping -// * @param {boolean} [options.requireInteraction=false] - Whether notification requires user interaction -// * @param {number} [options.timeout=5000] - Auto-close timeout in milliseconds (0 for no auto-close) -// * @param {Array} [options.actions] - Array of action objects -// * @returns {Promise} - Promise that resolves to Notification object or null if failed +// * Dialog result enumeration // */ -// export async function showSystemNotification(title, options = {}) { +// export const DialogResult = { +// OK: 'ok', +// CANCEL: 'cancel' +// }; + +// /** +// * Begin a custom dialog box +// * Creates the overlay and dialog container with title +// * @param {string} title - Dialog title +// * @param {Object} [options] - Dialog options +// * @param {number} [options.minWidth=400] - Minimum dialog width in pixels +// * @param {number} [options.maxWidth=600] - Maximum dialog width in pixels +// * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage +// * @returns {Object} Dialog context containing overlay, dialog, and content elements +// */ +// export function beginDialogBox(title, options = {}) { // const { -// body = '', -// icon = '', -// image = '', -// tag = '', -// requireInteraction = false, -// timeout = 5000, -// actions = [] +// minWidth = 400, +// maxWidth = 600, +// maxHeight = 80 // } = options; -// const hasSupport = await checkNotificationSupport(); -// if (!hasSupport) { -// console.warn('System notifications not available, falling back to toast'); -// showToastInfo(title, body); -// return null; -// } +// // Create overlay +// const overlay = createDialogOverlay(); -// const notificationOptions = { -// body, -// icon, -// image, -// tag, -// requireInteraction, -// actions +// // Create dialog +// const dialog = createDialogContainer({ minWidth, maxWidth, maxHeight }); + +// // Title +// const titleElement = createDialogTitle(title); +// dialog.appendChild(titleElement); + +// // Content container for user controls +// const content = createDialogContent(); +// dialog.appendChild(content); + +// // Add dialog to overlay +// overlay.appendChild(dialog); + +// // Add to body +// document.body.appendChild(overlay); + +// // Close on Escape key +// const escapeHandler = (e) => { +// if (e.key === 'Escape') { +// document.body.removeChild(overlay); +// document.removeEventListener('keydown', escapeHandler); +// } // }; -// const notification = new Notification(title, notificationOptions); +// // Setup event handlers +// const cleanupEvents = setupDialogEvents(overlay, escapeHandler); -// // Auto-close if timeout is specified -// if (timeout > 0) { -// setTimeout(() => { -// notification.close(); -// }, timeout); -// } - -// return notification; +// return { +// overlay, +// dialog, +// content, +// escapeHandler, +// cleanupEvents +// }; // } -/** - * Windows-style notification utilities - * Provides Windows-specific notification patterns - */ - // /** -// * Request notification permission with user-friendly dialog -// * @returns {Promise} - Promise that resolves to true if permission granted +// * End a custom dialog box +// * Adds buttons and handles cleanup +// * @param {Object} dialogContext - Dialog context from beginDialogBox +// * @param {DialogButtonType} buttonType - Type of buttons to show +// * @param {Function} onButtonClick - Callback when buttons are clicked +// * @param {Object} [options] - Button options +// * @param {string} [options.okText='Ok'] - Text for OK button +// * @param {string} [options.cancelText='Cancel'] - Text for Cancel button // */ -// export async function requestNotificationPermission() { -// if (!('Notification' in window)) { -// showError('System notifications are not supported in this browser'); -// return false; -// } +// export function endDialogBox(dialogContext, buttonType, onButtonClick, options = {}) { +// const { +// overlay, +// escapeHandler, +// cleanupEvents +// } = dialogContext; -// if (Notification.permission === 'granted') { -// return true; -// } +// const { +// okText = 'Ok', +// cancelText = 'Cancel' +// } = options; -// if (Notification.permission === 'denied') { -// showError('Notification permission has been denied. Please enable notifications in your browser settings.'); -// return false; -// } +// // Buttons container +// const buttonContainer = createButtonContainer(); -// // Show a friendly permission request dialog -// const granted = await showConfirmDialog( -// 'Would you like to receive system notifications for workflow updates?', -// 'Allow Notifications', -// 'Not Now' -// ); - -// if (granted) { -// const permission = await Notification.requestPermission(); -// if (permission === 'granted') { -// showSuccess('Notification permission granted! You will now receive system notifications.'); -// return true; +// // Cleanup function +// const cleanup = () => { +// document.body.removeChild(overlay); +// if (cleanupEvents) { +// cleanupEvents(); // } else { -// showWarning('Notification permission was not granted. You can enable it later in browser settings.'); -// return false; +// document.removeEventListener('keydown', escapeHandler); // } +// }; + +// // Add buttons based on buttonType +// if (buttonType === DialogButtonType.OK_ONLY) { +// const okButton = createDialogButton(okText, true); +// okButton.onclick = () => { +// cleanup(); +// if (onButtonClick) { +// onButtonClick(DialogResult.OK); +// } +// }; +// buttonContainer.appendChild(okButton); +// } else if (buttonType === DialogButtonType.OK_CANCEL) { +// const cancelButton = createDialogButton(cancelText, false); +// cancelButton.onclick = () => { +// cleanup(); +// if (onButtonClick) { +// onButtonClick(DialogResult.CANCEL); +// } +// }; + +// const okButton = createDialogButton(okText, true); +// okButton.onclick = () => { +// cleanup(); +// if (onButtonClick) { +// onButtonClick(DialogResult.OK); +// } +// }; + +// buttonContainer.appendChild(okButton); +// buttonContainer.appendChild(cancelButton); // } -// return false; +// dialogContext.dialog.appendChild(buttonContainer); // } -// Default export with all functions -export default { - DialogButtonType, - DialogResult, - beginDialogBox, - endDialogBox, - showMessage, - showError, - showSuccess, - showWarning, - showInfo, - showConfirmDialog, - showToast, - showToastInfo, - showToastSuccess, - showToastError, - showToastWarning, - // // Windows System Notification Functions - // checkNotificationSupport, - // showSystemNotification, - // closeNotificationsByTag, - // requestNotificationPermission -}; + +// /** +// * Show a message dialog with customizable appearance +// * @param {string} message - The message to display +// * @param {Object} [options] - Message options +// * @param {string} [options.title="Message"] - Dialog title +// * @param {string} [options.color="#fff"] - Text color +// * @param {number} [options.minWidth=300] - Minimum dialog width +// * @param {number} [options.maxWidth=500] - Maximum dialog width +// * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage +// */ +// export function showMessage(message, options = {}) { +// const { +// title = "Message", +// color = "#fff", +// minWidth = 300, +// maxWidth = 500, +// maxHeight = 80 +// } = options; + +// const dialogContext = beginDialogBox(title, { +// minWidth, +// maxWidth, +// maxHeight +// }); + +// const messageElement = createMessage(message, { color }); +// dialogContext.content.appendChild(messageElement); + +// endDialogBox(dialogContext, DialogButtonType.OK_ONLY); +// } + +// /** +// * Show an error message dialog +// * @param {string} message - The error message +// * @param {Error} [error] - Optional error object for logging +// */ +// export function showError(message, error = null) { +// const errorMsg = error ? `${message}: ${error.message}` : message; + +// showMessage(errorMsg, { +// title: "❌ Error", +// color: "#ff6b6b", +// minWidth: 400, +// maxWidth: 600 +// }); + +// if (error) { +// console.error("[Error]", message, error); +// } else { +// console.error("[Error]", message); +// } +// } + +// /** +// * Show a success message dialog +// * @param {string} message - The success message +// */ +// export function showSuccess(message) { +// showMessage(message, { +// title: "✅ Success", +// color: "#4caf50", +// minWidth: 300, +// maxWidth: 500 +// }); +// } + +// /** +// * Show a warning message dialog +// * @param {string} message - The warning message +// */ +// export function showWarning(message) { +// showMessage(message, { +// title: "⚠️ Warning", +// color: "#ff9800", +// minWidth: 400, +// maxWidth: 600 +// }); +// } + +// /** +// * Show an info message dialog +// * @param {string} message - The info message +// */ +// export function showInfo(message) { +// showMessage(message, { +// title: "ℹ️ Information", +// color: "#2196f3", +// minWidth: 300, +// maxWidth: 500 +// }); +// } + +// /** +// * Show a confirmation dialog with custom yes/no text +// * @param {string} message - The confirmation message +// * @param {string} [yesText="OK"] - Text for yes button +// * @param {string} [noText="Cancel"] - Text for no button +// * @returns {Promise} - Promise that resolves to true if user confirmed, false if cancelled +// */ +// export function showConfirmDialog(message, yesText = "OK", noText = "Cancel") { +// return new Promise((resolve) => { +// const dialogContext = beginDialogBox("Confirmation", { +// minWidth: 400, +// maxWidth: 600 +// }); + +// const messageElement = createMessage(message, { color: "#fff" }); +// messageElement.style.marginBottom = '15px'; +// dialogContext.content.appendChild(messageElement); + +// endDialogBox(dialogContext, DialogButtonType.OK_CANCEL, (result) => { +// resolve(result === DialogResult.OK); +// }, { +// okText: yesText, +// cancelText: noText +// }); +// }); +// } + +// /** +// * Show a toast notification +// * @param {Object} options - Toast options +// * @param {string} options.severity - Severity level: "info", "success", "warn", "error" +// * @param {string} options.summary - Toast title/summary +// * @param {string} options.detail - Toast detail message +// * @param {number} [options.life=3000] - Duration in milliseconds (0 for persistent) +// */ +// export function showToast({ severity = "info", summary, detail, life = 3000 }) { +// app.extensionManager.toast.add({ +// severity, +// summary, +// detail, +// life +// }); +// } + +// /** +// * Show an info toast notification +// * @param {string} summary - Toast title +// * @param {string} detail - Toast detail message +// * @param {number} [life=3000] - Duration in milliseconds +// */ +// export function showToastInfo(summary, detail, life = 3000) { +// showToast({ +// severity: "info", +// summary, +// detail, +// life +// }); +// } + +// /** +// * Show a success toast notification +// * @param {string} summary - Toast title +// * @param {string} detail - Toast detail message +// * @param {number} [life=3000] - Duration in milliseconds +// */ +// export function showToastSuccess(summary, detail, life = 3000) { +// showToast({ +// severity: "success", +// summary, +// detail, +// life +// }); +// } + +// /** +// * Show an error toast notification +// * @param {string} summary - Toast title +// * @param {string} detail - Toast detail message +// * @param {number} [life=5000] - Duration in milliseconds (longer default for errors) +// */ +// export function showToastError(summary, detail, life = 5000) { +// showToast({ +// severity: "error", +// summary, +// detail, +// life +// }); +// } + +// /** +// * Show a warning toast notification +// * @param {string} summary - Toast title +// * @param {string} detail - Toast detail message +// * @param {number} [life=4000] - Duration in milliseconds +// */ +// export function showToastWarning(summary, detail, life = 4000) { +// showToast({ +// severity: "warn", +// summary, +// detail, +// life +// }); +// } + +// // /** +// // * Windows System Notification Functions +// // * Provides system-level notifications using Web Notifications API +// // */ + +// // /** +// // * Check if system notifications are supported and permission is granted +// // * @returns {Promise} - Promise that resolves to true if notifications are available +// // */ +// // export async function checkNotificationSupport() { +// // if (!('Notification' in window)) { +// // console.warn('This browser does not support system notifications'); +// // return false; +// // } + +// // if (Notification.permission === 'granted') { +// // return true; +// // } + +// // if (Notification.permission === 'denied') { +// // console.warn('Notification permission has been denied'); +// // return false; +// // } + +// // // Request permission +// // const permission = await Notification.requestPermission(); +// // return permission === 'granted'; +// // } + +// // /** +// // * Show a system notification +// // * @param {string} title - Notification title +// // * @param {Object} [options] - Notification options +// // * @param {string} [options.body] - Notification body text +// // * @param {string} [options.icon] - URL of notification icon +// // * @param {string} [options.image] - URL of notification image +// // * @param {string} [options.tag] - Notification tag for grouping +// // * @param {boolean} [options.requireInteraction=false] - Whether notification requires user interaction +// // * @param {number} [options.timeout=5000] - Auto-close timeout in milliseconds (0 for no auto-close) +// // * @param {Array} [options.actions] - Array of action objects +// // * @returns {Promise} - Promise that resolves to Notification object or null if failed +// // */ +// // export async function showSystemNotification(title, options = {}) { +// // const { +// // body = '', +// // icon = '', +// // image = '', +// // tag = '', +// // requireInteraction = false, +// // timeout = 5000, +// // actions = [] +// // } = options; + +// // const hasSupport = await checkNotificationSupport(); +// // if (!hasSupport) { +// // console.warn('System notifications not available, falling back to toast'); +// // showToastInfo(title, body); +// // return null; +// // } + +// // const notificationOptions = { +// // body, +// // icon, +// // image, +// // tag, +// // requireInteraction, +// // actions +// // }; + +// // const notification = new Notification(title, notificationOptions); + +// // // Auto-close if timeout is specified +// // if (timeout > 0) { +// // setTimeout(() => { +// // notification.close(); +// // }, timeout); +// // } + +// // return notification; +// // } + +// /** +// * Windows-style notification utilities +// * Provides Windows-specific notification patterns +// */ + +// // /** +// // * Request notification permission with user-friendly dialog +// // * @returns {Promise} - Promise that resolves to true if permission granted +// // */ +// // export async function requestNotificationPermission() { +// // if (!('Notification' in window)) { +// // showError('System notifications are not supported in this browser'); +// // return false; +// // } + +// // if (Notification.permission === 'granted') { +// // return true; +// // } + +// // if (Notification.permission === 'denied') { +// // showError('Notification permission has been denied. Please enable notifications in your browser settings.'); +// // return false; +// // } + +// // // Show a friendly permission request dialog +// // const granted = await showConfirmDialog( +// // 'Would you like to receive system notifications for workflow updates?', +// // 'Allow Notifications', +// // 'Not Now' +// // ); + +// // if (granted) { +// // const permission = await Notification.requestPermission(); +// // if (permission === 'granted') { +// // showSuccess('Notification permission granted! You will now receive system notifications.'); +// // return true; +// // } else { +// // showWarning('Notification permission was not granted. You can enable it later in browser settings.'); +// // return false; +// // } +// // } + +// // return false; +// // } + +// // Default export with all functions +// export default { +// DialogButtonType, +// DialogResult, +// beginDialogBox, +// endDialogBox, +// showMessage, +// showError, +// showSuccess, +// showWarning, +// showInfo, +// showConfirmDialog, +// showToast, +// showToastInfo, +// showToastSuccess, +// showToastError, +// showToastWarning, +// // // Windows System Notification Functions +// // checkNotificationSupport, +// // showSystemNotification, +// // closeNotificationsByTag, +// // requestNotificationPermission +// }; diff --git a/web/debug/dialog_box.js b/web/debug/dialog_box.js index 0eba22b..2a35397 100644 --- a/web/debug/dialog_box.js +++ b/web/debug/dialog_box.js @@ -1,89 +1,89 @@ -import { app } from "../../../scripts/app.js"; -import { api } from "../../../scripts/api.js"; -import { - showInfo, - showSuccess, - showWarning, - showError, - showConfirmDialog, - showMessage -} from "../box_utils.js"; +// import { app } from "../../../scripts/app.js"; +// import { api } from "../../../scripts/api.js"; +// import { +// showInfo, +// showSuccess, +// showWarning, +// showError, +// showConfirmDialog, +// showMessage +// } from "../box_utils.js"; -/** - * Extension for DialogBox node - * Displays dialog boxes during workflow execution and captures user responses - */ -app.registerExtension({ - name: "EasyToolkit.DialogBox", +// /** +// * Extension for DialogBox node +// * Displays dialog boxes during workflow execution and captures user responses +// */ +// app.registerExtension({ +// name: "EasyToolkit.DialogBox", - async beforeRegisterNodeDef(nodeType, nodeData) { - if (nodeData.name === "DialogBox") { - // Add custom node behavior - const originalOnExecuted = nodeType.prototype.onExecuted; +// async beforeRegisterNodeDef(nodeType, nodeData) { +// if (nodeData.name === "DialogBox") { +// // Add custom node behavior +// const originalOnExecuted = nodeType.prototype.onExecuted; - nodeType.prototype.onExecuted = function(output) { - // Call original method if it exists - if (originalOnExecuted) { - originalOnExecuted.call(this, output); - } +// nodeType.prototype.onExecuted = function(output) { +// // Call original method if it exists +// if (originalOnExecuted) { +// originalOnExecuted.call(this, output); +// } - const dialogs = output?.dialogs; - if (dialogs && dialogs.length > 0) { - const dialog = dialogs[0]; - // Show dialog and capture user response - this.showDialog(dialog.type, dialog.message); - } - }; +// const dialogs = output?.dialogs; +// if (dialogs && dialogs.length > 0) { +// const dialog = dialogs[0]; +// // Show dialog and capture user response +// this.showDialog(dialog.type, dialog.message); +// } +// }; - // Add method to show dialog and capture response - nodeType.prototype.showDialog = async function(type, message) { - try { - // Validate inputs - if (!message || message.trim() === "") { - console.warn("[DialogBox] Empty message"); - return; - } +// // Add method to show dialog and capture response +// nodeType.prototype.showDialog = async function(type, message) { +// try { +// // Validate inputs +// if (!message || message.trim() === "") { +// console.warn("[DialogBox] Empty message"); +// return; +// } - const trimmedMessage = message.trim(); - console.log(`[DialogBox] Showing ${type} dialog: ${trimmedMessage}`); +// const trimmedMessage = message.trim(); +// console.log(`[DialogBox] Showing ${type} dialog: ${trimmedMessage}`); - let userResponse = ""; +// let userResponse = ""; - // Use appropriate dialog function based on type - switch (type) { - case "info": - showMessage(trimmedMessage); - userResponse = "ok"; - break; - case "success": - showSuccess(trimmedMessage); - userResponse = "ok"; - break; - case "warn": - showWarning(trimmedMessage); - userResponse = "ok"; - break; - case "error": - showError(trimmedMessage); - userResponse = "ok"; - break; - case "confirm": - const confirmed = await showConfirmDialog(trimmedMessage); - userResponse = confirmed ? "ok" : "cancel"; - break; - default: - console.warn(`[DialogBox] Unknown type: ${type}, defaulting to info`); - showMessage(trimmedMessage); - userResponse = "ok"; - } +// // Use appropriate dialog function based on type +// switch (type) { +// case "info": +// showMessage(trimmedMessage); +// userResponse = "ok"; +// break; +// case "success": +// showSuccess(trimmedMessage); +// userResponse = "ok"; +// break; +// case "warn": +// showWarning(trimmedMessage); +// userResponse = "ok"; +// break; +// case "error": +// showError(trimmedMessage); +// userResponse = "ok"; +// break; +// case "confirm": +// const confirmed = await showConfirmDialog(trimmedMessage); +// userResponse = confirmed ? "ok" : "cancel"; +// break; +// default: +// console.warn(`[DialogBox] Unknown type: ${type}, defaulting to info`); +// showMessage(trimmedMessage); +// userResponse = "ok"; +// } - console.log(`[DialogBox] User response: ${userResponse}`); +// console.log(`[DialogBox] User response: ${userResponse}`); - } catch (error) { - console.error("[DialogBox] Error showing dialog:", error); - showError("DialogBox Error", "Failed to display dialog"); - } - }; - } - } -}); \ No newline at end of file +// } catch (error) { +// console.error("[DialogBox] Error showing dialog:", error); +// showError("DialogBox Error", "Failed to display dialog"); +// } +// }; +// } +// } +// }); \ No newline at end of file diff --git a/web/debug/toast_box.js b/web/debug/toast_box.js index 2533b2e..669c19a 100644 --- a/web/debug/toast_box.js +++ b/web/debug/toast_box.js @@ -1,123 +1,123 @@ -import { app } from "../../../scripts/app.js"; -import { api } from "../../../scripts/api.js"; -import { - showToastInfo, - showToastSuccess, - showToastWarning, - showToastError, - showSystemNotification, - showWindowsNotification -} from "../box_utils.js"; +// import { app } from "../../../scripts/app.js"; +// import { api } from "../../../scripts/api.js"; +// import { +// showToastInfo, +// showToastSuccess, +// showToastWarning, +// showToastError, +// showSystemNotification, +// showWindowsNotification +// } from "../box_utils.js"; -/** - * Extension for ToastBox node - * Displays toast notifications during workflow execution - */ -app.registerExtension({ - name: "EasyToolkit.ToastBox", +// /** +// * Extension for ToastBox node +// * Displays toast notifications during workflow execution +// */ +// app.registerExtension({ +// name: "EasyToolkit.ToastBox", - async beforeRegisterNodeDef(nodeType, nodeData) { - if (nodeData.name === "ToastBox") { - // Add custom node behavior - const originalOnExecuted = nodeType.prototype.onExecuted; +// async beforeRegisterNodeDef(nodeType, nodeData) { +// if (nodeData.name === "ToastBox") { +// // Add custom node behavior +// const originalOnExecuted = nodeType.prototype.onExecuted; - nodeType.prototype.onExecuted = function(output) { - // Call original method if it exists - if (originalOnExecuted) { - originalOnExecuted.call(this, output); - } +// nodeType.prototype.onExecuted = function(output) { +// // Call original method if it exists +// if (originalOnExecuted) { +// originalOnExecuted.call(this, output); +// } - const notifications = output?.notifications; - if (notifications && notifications.length > 0) { - const notification = notifications[0]; - // Show notification based on node parameters - this.showNotification( - notification.type, - notification.message, - notification.duration, - notification.mode - ); - } - }; +// const notifications = output?.notifications; +// if (notifications && notifications.length > 0) { +// const notification = notifications[0]; +// // Show notification based on node parameters +// this.showNotification( +// notification.type, +// notification.message, +// notification.duration, +// notification.mode +// ); +// } +// }; - // Add method to show notification (toast or system) - nodeType.prototype.showNotification = function(type, message, duration, mode = "comfyui") { - try { - // Validate inputs - if (!message || message.trim() === "") { - console.warn("[ToastBox] Empty message"); - return; - } +// // Add method to show notification (toast or system) +// nodeType.prototype.showNotification = function(type, message, duration, mode = "comfyui") { +// try { +// // Validate inputs +// if (!message || message.trim() === "") { +// console.warn("[ToastBox] Empty message"); +// return; +// } - const trimmedMessage = message.trim(); - const clampedDuration = Math.max(1000, Math.min(10000, duration)); // Clamp duration between 1-10 seconds +// const trimmedMessage = message.trim(); +// const clampedDuration = Math.max(1000, Math.min(10000, duration)); // Clamp duration between 1-10 seconds - console.log(`[ToastBox] Showing ${type} notification (${mode}): ${trimmedMessage}`); +// console.log(`[ToastBox] Showing ${type} notification (${mode}): ${trimmedMessage}`); - // Choose notification method based on mode - if (mode === "system") { - // Use system notifications - // this.showSystemNotification(type, trimmedMessage, clampedDuration); - } else { - // Use ComfyUI toast notifications (default) - this.showComfyUIToast(type, trimmedMessage, clampedDuration); - } - } catch (error) { - console.error("[ToastBox] Error showing notification:", error); - // Fallback to error toast - showToastError("ToastBox Error", "Failed to display notification", 5000); - } - }; +// // Choose notification method based on mode +// if (mode === "system") { +// // Use system notifications +// // this.showSystemNotification(type, trimmedMessage, clampedDuration); +// } else { +// // Use ComfyUI toast notifications (default) +// this.showComfyUIToast(type, trimmedMessage, clampedDuration); +// } +// } catch (error) { +// console.error("[ToastBox] Error showing notification:", error); +// // Fallback to error toast +// showToastError("ToastBox Error", "Failed to display notification", 5000); +// } +// }; - // Method to show ComfyUI toast notifications - nodeType.prototype.showComfyUIToast = function(type, message, duration) { - const toastOptions = { - summary: "ToastBox Notification", - detail: message, - life: duration - }; +// // Method to show ComfyUI toast notifications +// nodeType.prototype.showComfyUIToast = function(type, message, duration) { +// const toastOptions = { +// summary: "ToastBox Notification", +// detail: message, +// life: duration +// }; - // Use appropriate toast function based on type - switch (type) { - case "info": - showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life); - break; - case "success": - showToastSuccess(toastOptions.summary, toastOptions.detail, toastOptions.life); - break; - case "warn": - showToastWarning(toastOptions.summary, toastOptions.detail, toastOptions.life); - break; - case "error": - showToastError(toastOptions.summary, toastOptions.detail, toastOptions.life); - break; - default: - console.warn(`[ToastBox] Unknown type: ${type}, defaulting to info`); - showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life); - } - }; +// // Use appropriate toast function based on type +// switch (type) { +// case "info": +// showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life); +// break; +// case "success": +// showToastSuccess(toastOptions.summary, toastOptions.detail, toastOptions.life); +// break; +// case "warn": +// showToastWarning(toastOptions.summary, toastOptions.detail, toastOptions.life); +// break; +// case "error": +// showToastError(toastOptions.summary, toastOptions.detail, toastOptions.life); +// break; +// default: +// console.warn(`[ToastBox] Unknown type: ${type}, defaulting to info`); +// showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life); +// } +// }; - // // Method to show system notifications - // nodeType.prototype.showSystemNotification = function(type, message, duration) { - // const titleMap = { - // "info": "Info", - // "success": "Success", - // "warn": "Warning", - // "error": "Error" - // }; +// // // Method to show system notifications +// // nodeType.prototype.showSystemNotification = function(type, message, duration) { +// // const titleMap = { +// // "info": "Info", +// // "success": "Success", +// // "warn": "Warning", +// // "error": "Error" +// // }; - // const title = titleMap[type] || titleMap.info; +// // const title = titleMap[type] || titleMap.info; - // // Use Windows-style system notification - // showWindowsNotification(title, message, type, { - // timeout: duration, - // requireInteraction: type === "error" - // }).catch(error => { - // console.warn("[ToastBox] System notification failed, falling back to toast:", error); - // // Fallback to ComfyUI toast - // this.showComfyUIToast(type, message, duration); - // }); - // }; - } - } -}); \ No newline at end of file +// // // Use Windows-style system notification +// // showWindowsNotification(title, message, type, { +// // timeout: duration, +// // requireInteraction: type === "error" +// // }).catch(error => { +// // console.warn("[ToastBox] System notification failed, falling back to toast:", error); +// // // Fallback to ComfyUI toast +// // this.showComfyUIToast(type, message, duration); +// // }); +// // }; +// } +// } +// }); \ No newline at end of file diff --git a/web/ui_utils.js b/web/ui_utils.js index 21d59a3..80dfdd3 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -1,325 +1,325 @@ -/** - * UI Component Utility Functions - * Provides utility functions for creating and managing dialog UI components - */ +// /** +// * UI Component Utility Functions +// * Provides utility functions for creating and managing dialog UI components +// */ -/** - * Create label element - * @param {string} text - Label text - * @param {Object} options - Configuration options - * @param {string} options.color - Text color (default: '#fff') - * @param {string} options.fontSize - Font size (default: '14px') - * @param {string} options.fontWeight - Font weight (default: 'bold') - * @returns {HTMLLabelElement} Label element - */ -export function createLabel(text, options = {}) { - const label = document.createElement('label'); - label.textContent = text; - label.style.color = options.color || '#fff'; - label.style.fontSize = options.fontSize || '14px'; - label.style.fontWeight = options.fontWeight || 'bold'; +// /** +// * Create label element +// * @param {string} text - Label text +// * @param {Object} options - Configuration options +// * @param {string} options.color - Text color (default: '#fff') +// * @param {string} options.fontSize - Font size (default: '14px') +// * @param {string} options.fontWeight - Font weight (default: 'bold') +// * @returns {HTMLLabelElement} Label element +// */ +// export function createLabel(text, options = {}) { +// const label = document.createElement('label'); +// label.textContent = text; +// label.style.color = options.color || '#fff'; +// label.style.fontSize = options.fontSize || '14px'; +// label.style.fontWeight = options.fontWeight || 'bold'; - return label; -} +// return label; +// } -/** - * Create input element - * @param {Object} options - Configuration options - * @param {string} options.type - Input type (default: 'text') - * @param {string} options.placeholder - Placeholder text - * @param {string} options.value - Initial value - * @param {string} options.backgroundColor - Background color (default: '#2d2d2d') - * @param {string} options.color - Text color (default: '#fff') - * @param {string} options.border - Border style (default: '1px solid #555') - * @param {string} options.borderRadius - Border radius (default: '4px') - * @param {string} options.fontSize - Font size (default: '14px') - * @param {string} options.padding - Padding (default: '8px') - * @returns {HTMLInputElement} Input element - */ -export function createInput(options = {}) { - const input = document.createElement('input'); - input.type = options.type || 'text'; +// /** +// * Create input element +// * @param {Object} options - Configuration options +// * @param {string} options.type - Input type (default: 'text') +// * @param {string} options.placeholder - Placeholder text +// * @param {string} options.value - Initial value +// * @param {string} options.backgroundColor - Background color (default: '#2d2d2d') +// * @param {string} options.color - Text color (default: '#fff') +// * @param {string} options.border - Border style (default: '1px solid #555') +// * @param {string} options.borderRadius - Border radius (default: '4px') +// * @param {string} options.fontSize - Font size (default: '14px') +// * @param {string} options.padding - Padding (default: '8px') +// * @returns {HTMLInputElement} Input element +// */ +// export function createInput(options = {}) { +// const input = document.createElement('input'); +// input.type = options.type || 'text'; - if (options.placeholder) input.placeholder = options.placeholder; - if (options.value) input.value = options.value; +// if (options.placeholder) input.placeholder = options.placeholder; +// if (options.value) input.value = options.value; - input.style.padding = options.padding || '8px'; - input.style.backgroundColor = options.backgroundColor || '#2d2d2d'; - input.style.color = options.color || '#fff'; - input.style.border = options.border || '1px solid #555'; - input.style.borderRadius = options.borderRadius || '4px'; - input.style.fontSize = options.fontSize || '14px'; - input.style.boxSizing = 'border-box'; +// input.style.padding = options.padding || '8px'; +// input.style.backgroundColor = options.backgroundColor || '#2d2d2d'; +// input.style.color = options.color || '#fff'; +// input.style.border = options.border || '1px solid #555'; +// input.style.borderRadius = options.borderRadius || '4px'; +// input.style.fontSize = options.fontSize || '14px'; +// input.style.boxSizing = 'border-box'; - return input; -} +// return input; +// } -/** - * Create textarea element - * @param {Object} options - Configuration options - * @param {string} options.placeholder - Placeholder text - * @param {string} options.value - Initial value - * @param {string} options.width - Width (default: '100%') - * @param {string} options.height - Height (default: '150px') - * @param {string} options.backgroundColor - Background color (default: '#2d2d2d') - * @param {string} options.color - Text color (default: '#fff') - * @param {string} options.border - Border style (default: '1px solid #555') - * @param {string} options.borderRadius - Border radius (default: '4px') - * @param {string} options.fontSize - Font size (default: '14px') - * @param {string} options.fontFamily - Font family (default: 'monospace') - * @param {string} options.padding - Padding (default: '8px') - * @param {string} options.resize - Resize behavior (default: 'vertical') - * @returns {HTMLTextAreaElement} Textarea element - */ -export function createTextarea(options = {}) { - const textarea = document.createElement('textarea'); +// /** +// * Create textarea element +// * @param {Object} options - Configuration options +// * @param {string} options.placeholder - Placeholder text +// * @param {string} options.value - Initial value +// * @param {string} options.width - Width (default: '100%') +// * @param {string} options.height - Height (default: '150px') +// * @param {string} options.backgroundColor - Background color (default: '#2d2d2d') +// * @param {string} options.color - Text color (default: '#fff') +// * @param {string} options.border - Border style (default: '1px solid #555') +// * @param {string} options.borderRadius - Border radius (default: '4px') +// * @param {string} options.fontSize - Font size (default: '14px') +// * @param {string} options.fontFamily - Font family (default: 'monospace') +// * @param {string} options.padding - Padding (default: '8px') +// * @param {string} options.resize - Resize behavior (default: 'vertical') +// * @returns {HTMLTextAreaElement} Textarea element +// */ +// export function createTextarea(options = {}) { +// const textarea = document.createElement('textarea'); - if (options.placeholder) textarea.placeholder = options.placeholder; - if (options.value) textarea.value = options.value; +// if (options.placeholder) textarea.placeholder = options.placeholder; +// if (options.value) textarea.value = options.value; - textarea.style.width = options.width || '100%'; - textarea.style.height = options.height || '150px'; - textarea.style.padding = options.padding || '8px'; - textarea.style.backgroundColor = options.backgroundColor || '#2d2d2d'; - textarea.style.color = options.color || '#fff'; - textarea.style.border = options.border || '1px solid #555'; - textarea.style.borderRadius = options.borderRadius || '4px'; - textarea.style.fontSize = options.fontSize || '14px'; - textarea.style.fontFamily = options.fontFamily || 'monospace'; - textarea.style.resize = options.resize || 'vertical'; - textarea.style.boxSizing = 'border-box'; +// textarea.style.width = options.width || '100%'; +// textarea.style.height = options.height || '150px'; +// textarea.style.padding = options.padding || '8px'; +// textarea.style.backgroundColor = options.backgroundColor || '#2d2d2d'; +// textarea.style.color = options.color || '#fff'; +// textarea.style.border = options.border || '1px solid #555'; +// textarea.style.borderRadius = options.borderRadius || '4px'; +// textarea.style.fontSize = options.fontSize || '14px'; +// textarea.style.fontFamily = options.fontFamily || 'monospace'; +// textarea.style.resize = options.resize || 'vertical'; +// textarea.style.boxSizing = 'border-box'; - return textarea; -} +// return textarea; +// } -/** - * Create form container - * @param {Object} options - Configuration options - * @param {string} options.display - Display mode (default: 'flex') - * @param {string} options.flexDirection - Layout direction (default: 'column') - * @param {string} options.gap - Element spacing (default: '15px') - * @returns {HTMLDivElement} Form container element - */ -export function createFormContainer(options = {}) { - const container = document.createElement('div'); - container.style.display = options.display || 'flex'; - container.style.flexDirection = options.flexDirection || 'column'; - container.style.gap = options.gap || '15px'; +// /** +// * Create form container +// * @param {Object} options - Configuration options +// * @param {string} options.display - Display mode (default: 'flex') +// * @param {string} options.flexDirection - Layout direction (default: 'column') +// * @param {string} options.gap - Element spacing (default: '15px') +// * @returns {HTMLDivElement} Form container element +// */ +// export function createFormContainer(options = {}) { +// const container = document.createElement('div'); +// container.style.display = options.display || 'flex'; +// container.style.flexDirection = options.flexDirection || 'column'; +// container.style.gap = options.gap || '15px'; - return container; -} +// return container; +// } -/** - * Create form field container - * @param {Object} options - Configuration options - * @param {string} options.display - Display mode (default: 'flex') - * @param {string} options.flexDirection - Layout direction (default: 'column') - * @param {string} options.gap - Element spacing (default: '5px') - * @returns {HTMLDivElement} Field container element - */ -export function createFieldContainer(options = {}) { - const container = document.createElement('div'); - container.style.display = options.display || 'flex'; - container.style.flexDirection = options.flexDirection || 'column'; - container.style.gap = options.gap || '5px'; +// /** +// * Create form field container +// * @param {Object} options - Configuration options +// * @param {string} options.display - Display mode (default: 'flex') +// * @param {string} options.flexDirection - Layout direction (default: 'column') +// * @param {string} options.gap - Element spacing (default: '5px') +// * @returns {HTMLDivElement} Field container element +// */ +// export function createFieldContainer(options = {}) { +// const container = document.createElement('div'); +// container.style.display = options.display || 'flex'; +// container.style.flexDirection = options.flexDirection || 'column'; +// container.style.gap = options.gap || '5px'; - return container; -} +// return container; +// } -/** - * Create complete form field (label + input/textarea) - * @param {string} labelText - Label text - * @param {string} fieldType - Field type ('input' or 'textarea') - * @param {Object} fieldOptions - Field configuration options - * @param {Object} containerOptions - Container configuration options - * @returns {Object} Object containing container, label and field - */ -export function createFormField(labelText, fieldType, fieldOptions = {}, containerOptions = {}) { - const container = createFieldContainer(containerOptions); - const label = createLabel(labelText); - let field; +// /** +// * Create complete form field (label + input/textarea) +// * @param {string} labelText - Label text +// * @param {string} fieldType - Field type ('input' or 'textarea') +// * @param {Object} fieldOptions - Field configuration options +// * @param {Object} containerOptions - Container configuration options +// * @returns {Object} Object containing container, label and field +// */ +// export function createFormField(labelText, fieldType, fieldOptions = {}, containerOptions = {}) { +// const container = createFieldContainer(containerOptions); +// const label = createLabel(labelText); +// let field; - if (fieldType === 'textarea') { - field = createTextarea(fieldOptions); - } else { - field = createInput(fieldOptions); - } +// if (fieldType === 'textarea') { +// field = createTextarea(fieldOptions); +// } else { +// field = createInput(fieldOptions); +// } - container.appendChild(label); - container.appendChild(field); +// container.appendChild(label); +// container.appendChild(field); - return { - container, - label, - field - }; -} +// return { +// container, +// label, +// field +// }; +// } -/** - * Create message element - * @param {string} message - Message text - * @param {Object} [options] - Configuration options - * @param {string} [options.color="#fff"] - Text color - * @param {string} [options.fontSize="14px"] - Font size - * @param {string} [options.lineHeight="1.5"] - Line height - * @param {string} [options.whiteSpace="pre-wrap"] - White space handling - * @param {string} [options.wordBreak="break-word"] - Word breaking - * @returns {HTMLElement} - Styled message element - */ -export function createMessage(message, options = {}) { - const { - color = "#fff", - fontSize = "14px", - lineHeight = "1.5", - whiteSpace = "pre-wrap", - wordBreak = "break-word" - } = options; +// /** +// * Create message element +// * @param {string} message - Message text +// * @param {Object} [options] - Configuration options +// * @param {string} [options.color="#fff"] - Text color +// * @param {string} [options.fontSize="14px"] - Font size +// * @param {string} [options.lineHeight="1.5"] - Line height +// * @param {string} [options.whiteSpace="pre-wrap"] - White space handling +// * @param {string} [options.wordBreak="break-word"] - Word breaking +// * @returns {HTMLElement} - Styled message element +// */ +// export function createMessage(message, options = {}) { +// const { +// color = "#fff", +// fontSize = "14px", +// lineHeight = "1.5", +// whiteSpace = "pre-wrap", +// wordBreak = "break-word" +// } = options; - const messageElement = document.createElement('div'); - messageElement.textContent = message; - messageElement.style.color = color; - messageElement.style.fontSize = fontSize; - messageElement.style.lineHeight = lineHeight; - messageElement.style.whiteSpace = whiteSpace; - messageElement.style.wordBreak = wordBreak; +// const messageElement = document.createElement('div'); +// messageElement.textContent = message; +// messageElement.style.color = color; +// messageElement.style.fontSize = fontSize; +// messageElement.style.lineHeight = lineHeight; +// messageElement.style.whiteSpace = whiteSpace; +// messageElement.style.wordBreak = wordBreak; - return messageElement; -} +// return messageElement; +// } -/** - * Create dialog overlay element - * @returns {HTMLDivElement} Overlay element - */ -export function createDialogOverlay() { - const overlay = document.createElement('div'); - overlay.style.position = 'fixed'; - overlay.style.top = '0'; - overlay.style.left = '0'; - overlay.style.width = '100%'; - overlay.style.height = '100%'; - overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; - overlay.style.display = 'flex'; - overlay.style.justifyContent = 'center'; - overlay.style.alignItems = 'center'; - overlay.style.zIndex = '10000'; +// /** +// * Create dialog overlay element +// * @returns {HTMLDivElement} Overlay element +// */ +// export function createDialogOverlay() { +// const overlay = document.createElement('div'); +// overlay.style.position = 'fixed'; +// overlay.style.top = '0'; +// overlay.style.left = '0'; +// overlay.style.width = '100%'; +// overlay.style.height = '100%'; +// overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; +// overlay.style.display = 'flex'; +// overlay.style.justifyContent = 'center'; +// overlay.style.alignItems = 'center'; +// overlay.style.zIndex = '10000'; - return overlay; -} +// return overlay; +// } -/** - * Create dialog container element - * @param {Object} options - Dialog options - * @param {number} options.minWidth - Minimum dialog width in pixels - * @param {number} options.maxWidth - Maximum dialog width in pixels - * @param {number} options.maxHeight - Maximum dialog height as viewport percentage - * @returns {HTMLDivElement} Dialog container element - */ -export function createDialogContainer(options = {}) { - const { minWidth = 400, maxWidth = 600, maxHeight = 80 } = options; +// /** +// * Create dialog container element +// * @param {Object} options - Dialog options +// * @param {number} options.minWidth - Minimum dialog width in pixels +// * @param {number} options.maxWidth - Maximum dialog width in pixels +// * @param {number} options.maxHeight - Maximum dialog height as viewport percentage +// * @returns {HTMLDivElement} Dialog container element +// */ +// export function createDialogContainer(options = {}) { +// const { minWidth = 400, maxWidth = 600, maxHeight = 80 } = options; - const dialog = document.createElement('div'); - dialog.style.backgroundColor = '#1e1e1e'; - dialog.style.border = '1px solid #555'; - dialog.style.borderRadius = '8px'; - dialog.style.padding = '20px'; - dialog.style.minWidth = `${minWidth}px`; - dialog.style.maxWidth = `${maxWidth}px`; - dialog.style.maxHeight = `${maxHeight}vh`; - dialog.style.display = 'flex'; - dialog.style.flexDirection = 'column'; - dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.5)'; +// const dialog = document.createElement('div'); +// dialog.style.backgroundColor = '#1e1e1e'; +// dialog.style.border = '1px solid #555'; +// dialog.style.borderRadius = '8px'; +// dialog.style.padding = '20px'; +// dialog.style.minWidth = `${minWidth}px`; +// dialog.style.maxWidth = `${maxWidth}px`; +// dialog.style.maxHeight = `${maxHeight}vh`; +// dialog.style.display = 'flex'; +// dialog.style.flexDirection = 'column'; +// dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.5)'; - return dialog; -} +// return dialog; +// } -/** - * Create dialog title element - * @param {string} title - Dialog title - * @returns {HTMLHeadingElement} Title element - */ -export function createDialogTitle(title) { - const titleElement = document.createElement('h3'); - titleElement.textContent = title; - titleElement.style.margin = '0 0 15px 0'; - titleElement.style.color = '#fff'; - titleElement.style.fontSize = '18px'; +// /** +// * Create dialog title element +// * @param {string} title - Dialog title +// * @returns {HTMLHeadingElement} Title element +// */ +// export function createDialogTitle(title) { +// const titleElement = document.createElement('h3'); +// titleElement.textContent = title; +// titleElement.style.margin = '0 0 15px 0'; +// titleElement.style.color = '#fff'; +// titleElement.style.fontSize = '18px'; - return titleElement; -} +// return titleElement; +// } -/** - * Create dialog content container - * @returns {HTMLDivElement} Content container element - */ -export function createDialogContent() { - const content = document.createElement('div'); - content.style.flex = '1'; - content.style.overflow = 'auto'; - content.style.marginBottom = '15px'; +// /** +// * Create dialog content container +// * @returns {HTMLDivElement} Content container element +// */ +// export function createDialogContent() { +// const content = document.createElement('div'); +// content.style.flex = '1'; +// content.style.overflow = 'auto'; +// content.style.marginBottom = '15px'; - return content; -} +// return content; +// } -/** - * Create button container for dialog - * @returns {HTMLDivElement} Button container element - */ -export function createButtonContainer() { - const buttonContainer = document.createElement('div'); - buttonContainer.style.display = 'flex'; - buttonContainer.style.justifyContent = 'flex-end'; - buttonContainer.style.gap = '10px'; +// /** +// * Create button container for dialog +// * @returns {HTMLDivElement} Button container element +// */ +// export function createButtonContainer() { +// const buttonContainer = document.createElement('div'); +// buttonContainer.style.display = 'flex'; +// buttonContainer.style.justifyContent = 'flex-end'; +// buttonContainer.style.gap = '10px'; - return buttonContainer; -} +// return buttonContainer; +// } -/** - * Create styled button for dialogs - * @param {string} text - Button text - * @param {boolean} isPrimary - Whether this is a primary button - * @returns {HTMLButtonElement} Styled button element - */ -export function createDialogButton(text, isPrimary = false) { - const button = document.createElement('button'); - button.textContent = text; - button.style.padding = '8px 20px'; - button.style.backgroundColor = isPrimary ? '#007acc' : '#555'; - button.style.color = '#fff'; - button.style.border = 'none'; - button.style.borderRadius = '4px'; - button.style.cursor = 'pointer'; - button.style.fontSize = '14px'; +// /** +// * Create styled button for dialogs +// * @param {string} text - Button text +// * @param {boolean} isPrimary - Whether this is a primary button +// * @returns {HTMLButtonElement} Styled button element +// */ +// export function createDialogButton(text, isPrimary = false) { +// const button = document.createElement('button'); +// button.textContent = text; +// button.style.padding = '8px 20px'; +// button.style.backgroundColor = isPrimary ? '#007acc' : '#555'; +// button.style.color = '#fff'; +// button.style.border = 'none'; +// button.style.borderRadius = '4px'; +// button.style.cursor = 'pointer'; +// button.style.fontSize = '14px'; - // Hover effects - button.onmouseover = () => { - button.style.backgroundColor = isPrimary ? '#0098ff' : '#666'; - }; - button.onmouseout = () => { - button.style.backgroundColor = isPrimary ? '#007acc' : '#555'; - }; +// // Hover effects +// button.onmouseover = () => { +// button.style.backgroundColor = isPrimary ? '#0098ff' : '#666'; +// }; +// button.onmouseout = () => { +// button.style.backgroundColor = isPrimary ? '#007acc' : '#555'; +// }; - return button; -} +// return button; +// } -/** - * Setup dialog event handlers - * @param {HTMLElement} overlay - Dialog overlay element - * @param {Function} escapeHandler - Escape key handler function - * @returns {Function} Cleanup function to remove event listeners - */ -export function setupDialogEvents(overlay, escapeHandler) { - // Close on overlay click - overlay.onclick = (e) => { - if (e.target === overlay) { - document.body.removeChild(overlay); - } - }; +// /** +// * Setup dialog event handlers +// * @param {HTMLElement} overlay - Dialog overlay element +// * @param {Function} escapeHandler - Escape key handler function +// * @returns {Function} Cleanup function to remove event listeners +// */ +// export function setupDialogEvents(overlay, escapeHandler) { +// // Close on overlay click +// overlay.onclick = (e) => { +// if (e.target === overlay) { +// document.body.removeChild(overlay); +// } +// }; - // Close on Escape key - document.addEventListener('keydown', escapeHandler); +// // Close on Escape key +// document.addEventListener('keydown', escapeHandler); - // Return cleanup function - return () => { - document.removeEventListener('keydown', escapeHandler); - }; -} \ No newline at end of file +// // Return cleanup function +// return () => { +// document.removeEventListener('keydown', escapeHandler); +// }; +// } \ No newline at end of file