mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
316e05b8b9
* refactor: Reorganize Vue nodes system to domain-driven design architecture Move Vue nodes code from scattered technical layers to domain-focused structure: - Widget system → src/renderer/extensions/vueNodes/widgets/ - LOD optimization → src/renderer/extensions/vueNodes/lod/ - Layout logic → src/renderer/extensions/vueNodes/layout/ - Node components → src/renderer/extensions/vueNodes/components/ - Test structure mirrors source organization Benefits: - Clear domain boundaries instead of technical layers - Everything Vue nodes related in renderer domain (not workbench) - camelCase naming (vueNodes vs vue-nodes) - Tests co-located with source domains - All imports updated to new DDD structure * fix: Skip spatial index performance test on CI to avoid flaky timing Performance tests are inherently flaky on CI due to variable system performance. This test should only run locally like the other performance tests.
118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
/**
|
|
* Widget renderer composable for Vue node system
|
|
* Maps LiteGraph widget types to Vue components
|
|
*/
|
|
import {
|
|
WidgetType,
|
|
widgetTypeToComponent
|
|
} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
|
|
|
|
/**
|
|
* Static mapping of LiteGraph widget types to Vue widget component names
|
|
* Moved outside function to prevent recreation on every call
|
|
*/
|
|
const TYPE_TO_ENUM_MAP: Record<string, string> = {
|
|
// Number inputs
|
|
number: WidgetType.NUMBER,
|
|
slider: WidgetType.SLIDER,
|
|
INT: WidgetType.INT,
|
|
FLOAT: WidgetType.FLOAT,
|
|
|
|
// Text inputs
|
|
text: WidgetType.STRING,
|
|
string: WidgetType.STRING,
|
|
STRING: WidgetType.STRING,
|
|
|
|
// Selection
|
|
combo: WidgetType.COMBO,
|
|
COMBO: WidgetType.COMBO,
|
|
|
|
// Boolean
|
|
toggle: WidgetType.TOGGLESWITCH,
|
|
boolean: WidgetType.BOOLEAN,
|
|
BOOLEAN: WidgetType.BOOLEAN,
|
|
|
|
// Multiline text
|
|
multiline: WidgetType.TEXTAREA,
|
|
textarea: WidgetType.TEXTAREA,
|
|
customtext: WidgetType.TEXTAREA,
|
|
MARKDOWN: WidgetType.MARKDOWN,
|
|
|
|
// Advanced widgets
|
|
color: WidgetType.COLOR,
|
|
COLOR: WidgetType.COLOR,
|
|
image: WidgetType.IMAGE,
|
|
IMAGE: WidgetType.IMAGE,
|
|
imagecompare: WidgetType.IMAGECOMPARE,
|
|
IMAGECOMPARE: WidgetType.IMAGECOMPARE,
|
|
galleria: WidgetType.GALLERIA,
|
|
GALLERIA: WidgetType.GALLERIA,
|
|
file: WidgetType.FILEUPLOAD,
|
|
fileupload: WidgetType.FILEUPLOAD,
|
|
FILEUPLOAD: WidgetType.FILEUPLOAD,
|
|
|
|
// Button widget
|
|
button: WidgetType.BUTTON,
|
|
BUTTON: WidgetType.BUTTON,
|
|
|
|
// Chart widget
|
|
chart: WidgetType.CHART,
|
|
CHART: WidgetType.CHART
|
|
} as const
|
|
|
|
/**
|
|
* Pre-computed widget support map for O(1) lookups
|
|
* Maps widget type directly to boolean for fast shouldRenderAsVue checks
|
|
*/
|
|
const WIDGET_SUPPORT_MAP = new Map(
|
|
Object.entries(TYPE_TO_ENUM_MAP).map(([type, enumValue]) => [
|
|
type,
|
|
widgetTypeToComponent[enumValue] !== undefined
|
|
])
|
|
)
|
|
|
|
export const ESSENTIAL_WIDGET_TYPES = new Set([
|
|
'combo',
|
|
'COMBO',
|
|
'select',
|
|
'toggle',
|
|
'boolean',
|
|
'BOOLEAN',
|
|
'slider',
|
|
'number',
|
|
'INT',
|
|
'FLOAT'
|
|
])
|
|
|
|
export const useWidgetRenderer = () => {
|
|
const getWidgetComponent = (widgetType: string): string => {
|
|
const enumKey = TYPE_TO_ENUM_MAP[widgetType]
|
|
|
|
if (enumKey && widgetTypeToComponent[enumKey]) {
|
|
return enumKey
|
|
}
|
|
|
|
return WidgetType.STRING
|
|
}
|
|
|
|
const shouldRenderAsVue = (widget: {
|
|
type?: string
|
|
options?: Record<string, unknown>
|
|
}): boolean => {
|
|
if (widget.options?.canvasOnly) return false
|
|
if (!widget.type) return false
|
|
|
|
// Check if widget type is explicitly supported
|
|
const isSupported = WIDGET_SUPPORT_MAP.get(widget.type)
|
|
if (isSupported !== undefined) return isSupported
|
|
|
|
// Fallback: unknown types are rendered as STRING widget
|
|
return widgetTypeToComponent[WidgetType.STRING] !== undefined
|
|
}
|
|
|
|
return {
|
|
getWidgetComponent,
|
|
shouldRenderAsVue
|
|
}
|
|
}
|