- 
- [0],
lgCanvas: LGraphCanvas
) => {
- const { left, top } = useElementBounding(canvasElement)
+ const { left, top, update } = useElementBounding(canvasElement)
const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
const { offset, scale } = lgCanvas.ds
@@ -31,6 +31,7 @@ export const useCanvasPositionConversion = (
return {
clientPosToCanvasPos,
- canvasPosToClientPos
+ canvasPosToClientPos,
+ update
}
}
diff --git a/src/composables/element/useOverflowObserver.ts b/src/composables/element/useOverflowObserver.ts
new file mode 100644
index 000000000..10b6fecce
--- /dev/null
+++ b/src/composables/element/useOverflowObserver.ts
@@ -0,0 +1,64 @@
+import { useMutationObserver, useResizeObserver } from '@vueuse/core'
+import { debounce } from 'lodash'
+import { readonly, ref } from 'vue'
+
+/**
+ * Observes an element for overflow changes and optionally debounces the check
+ * @param element - The element to observe
+ * @param options - The options for the observer
+ * @param options.debounceTime - The time to debounce the check in milliseconds
+ * @param options.useMutationObserver - Whether to use a mutation observer to check for overflow
+ * @param options.useResizeObserver - Whether to use a resize observer to check for overflow
+ * @returns An object containing the isOverflowing state and the checkOverflow function to manually trigger
+ */
+export const useOverflowObserver = (
+ element: HTMLElement,
+ options?: {
+ debounceTime?: number
+ useMutationObserver?: boolean
+ useResizeObserver?: boolean
+ onCheck?: (isOverflowing: boolean) => void
+ }
+) => {
+ options = {
+ debounceTime: 25,
+ useMutationObserver: true,
+ useResizeObserver: true,
+ ...options
+ }
+
+ const isOverflowing = ref(false)
+ const disposeFns: (() => void)[] = []
+ const disposed = ref(false)
+
+ const checkOverflowFn = () => {
+ isOverflowing.value = element.scrollWidth > element.clientWidth
+ options.onCheck?.(isOverflowing.value)
+ }
+
+ const checkOverflow = options.debounceTime
+ ? debounce(checkOverflowFn, options.debounceTime)
+ : checkOverflowFn
+
+ if (options.useMutationObserver) {
+ disposeFns.push(
+ useMutationObserver(element, checkOverflow, {
+ subtree: true,
+ childList: true
+ }).stop
+ )
+ }
+ if (options.useResizeObserver) {
+ disposeFns.push(useResizeObserver(element, checkOverflow).stop)
+ }
+
+ return {
+ isOverflowing: readonly(isOverflowing),
+ disposed: readonly(disposed),
+ checkOverflow,
+ dispose: () => {
+ disposed.value = true
+ disposeFns.forEach((fn) => fn())
+ }
+ }
+}
diff --git a/src/composables/graph/useCanvasInteractions.ts b/src/composables/graph/useCanvasInteractions.ts
new file mode 100644
index 000000000..dca1bd125
--- /dev/null
+++ b/src/composables/graph/useCanvasInteractions.ts
@@ -0,0 +1,59 @@
+import { computed } from 'vue'
+
+import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
+
+/**
+ * Composable for handling canvas interactions from Vue components.
+ * This provides a unified way to forward events to the LiteGraph canvas
+ * and will be the foundation for migrating canvas interactions to Vue.
+ */
+export function useCanvasInteractions() {
+ const settingStore = useSettingStore()
+
+ const isStandardNavMode = computed(
+ () => settingStore.get('Comfy.Canvas.NavigationMode') === 'standard'
+ )
+
+ /**
+ * Handles wheel events from UI components that should be forwarded to canvas
+ * when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
+ */
+ const handleWheel = (event: WheelEvent) => {
+ // In standard mode, Ctrl+wheel should go to canvas for zoom
+ if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
+ event.preventDefault() // Prevent browser zoom
+ forwardEventToCanvas(event)
+ return
+ }
+
+ // In legacy mode, all wheel events go to canvas for zoom
+ if (!isStandardNavMode.value) {
+ event.preventDefault()
+ forwardEventToCanvas(event)
+ return
+ }
+
+ // Otherwise, let the component handle it normally
+ }
+
+ /**
+ * Forwards an event to the LiteGraph canvas
+ */
+ const forwardEventToCanvas = (
+ event: WheelEvent | PointerEvent | MouseEvent
+ ) => {
+ const canvasEl = app.canvas?.canvas
+ if (!canvasEl) return
+
+ // Create new event with same properties
+ const EventConstructor = event.constructor as typeof WheelEvent
+ const newEvent = new EventConstructor(event.type, event)
+ canvasEl.dispatchEvent(newEvent)
+ }
+
+ return {
+ handleWheel,
+ forwardEventToCanvas
+ }
+}
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 710fbacaf..36aaff5a7 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -30,6 +30,25 @@ function safePricingExecution(
}
}
+/**
+ * Helper function to calculate Runway duration-based pricing
+ * @param node - The LiteGraph node
+ * @returns Formatted price string
+ */
+const calculateRunwayDurationPrice = (node: LGraphNode): string => {
+ const durationWidget = node.widgets?.find(
+ (w) => w.name === 'duration'
+ ) as IComboWidget
+
+ if (!durationWidget) return '$0.05/second'
+
+ const duration = Number(durationWidget.value)
+ // If duration is 0 or NaN, don't fall back to 5 seconds - just use 0
+ const validDuration = isNaN(duration) ? 5 : duration
+ const cost = (0.05 * validDuration).toFixed(2)
+ return `$${cost}/Run`
+}
+
const pixversePricingCalculator = (node: LGraphNode): string => {
const durationWidget = node.widgets?.find(
(w) => w.name === 'duration_seconds'
@@ -110,15 +129,27 @@ const apiNodeCosts: Record =
FluxProUltraImageNode: {
displayPrice: '$0.06/Run'
},
+ FluxProKontextProNode: {
+ displayPrice: '$0.04/Run'
+ },
+ FluxProKontextMaxNode: {
+ displayPrice: '$0.08/Run'
+ },
IdeogramV1: {
displayPrice: (node: LGraphNode): string => {
const numImagesWidget = node.widgets?.find(
(w) => w.name === 'num_images'
) as IComboWidget
- if (!numImagesWidget) return '$0.06 x num_images/Run'
+ const turboWidget = node.widgets?.find(
+ (w) => w.name === 'turbo'
+ ) as IComboWidget
+
+ if (!numImagesWidget) return '$0.02-0.06 x num_images/Run'
const numImages = Number(numImagesWidget.value) || 1
- const cost = (0.06 * numImages).toFixed(2)
+ const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+ const basePrice = turbo ? 0.02 : 0.06
+ const cost = (basePrice * numImages).toFixed(2)
return `$${cost}/Run`
}
},
@@ -127,10 +158,16 @@ const apiNodeCosts: Record =
const numImagesWidget = node.widgets?.find(
(w) => w.name === 'num_images'
) as IComboWidget
- if (!numImagesWidget) return '$0.08 x num_images/Run'
+ const turboWidget = node.widgets?.find(
+ (w) => w.name === 'turbo'
+ ) as IComboWidget
+
+ if (!numImagesWidget) return '$0.05-0.08 x num_images/Run'
const numImages = Number(numImagesWidget.value) || 1
- const cost = (0.08 * numImages).toFixed(2)
+ const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+ const basePrice = turbo ? 0.05 : 0.08
+ const cost = (basePrice * numImages).toFixed(2)
return `$${cost}/Run`
}
},
@@ -651,10 +688,10 @@ const apiNodeCosts: Record =
if (duration.includes('5')) {
if (resolution.includes('720p')) return '$0.3/Run'
- if (resolution.includes('1080p')) return '~$0.3/Run'
+ if (resolution.includes('1080p')) return '$0.5/Run'
} else if (duration.includes('10')) {
- if (resolution.includes('720p')) return '$0.25/Run'
- if (resolution.includes('1080p')) return '$1.0/Run'
+ if (resolution.includes('720p')) return '$0.4/Run'
+ if (resolution.includes('1080p')) return '$1.5/Run'
}
return '$0.3/Run'
@@ -678,9 +715,9 @@ const apiNodeCosts: Record =
if (duration.includes('5')) {
if (resolution.includes('720p')) return '$0.2/Run'
- if (resolution.includes('1080p')) return '~$0.45/Run'
+ if (resolution.includes('1080p')) return '$0.3/Run'
} else if (duration.includes('10')) {
- if (resolution.includes('720p')) return '$0.6/Run'
+ if (resolution.includes('720p')) return '$0.25/Run'
if (resolution.includes('1080p')) return '$1.0/Run'
}
@@ -896,18 +933,11 @@ const apiNodeCosts: Record =
}
const model = String(modelWidget.value)
- const aspectRatio = String(aspectRatioWidget.value)
if (model.includes('photon-flash-1')) {
- if (aspectRatio.includes('1:1')) return '$0.0045/Run'
- if (aspectRatio.includes('16:9')) return '$0.0045/Run'
- if (aspectRatio.includes('4:3')) return '$0.0046/Run'
- if (aspectRatio.includes('21:9')) return '$0.0047/Run'
+ return '$0.0019/Run'
} else if (model.includes('photon-1')) {
- if (aspectRatio.includes('1:1')) return '$0.0172/Run'
- if (aspectRatio.includes('16:9')) return '$0.0172/Run'
- if (aspectRatio.includes('4:3')) return '$0.0176/Run'
- if (aspectRatio.includes('21:9')) return '$0.0182/Run'
+ return '$0.0073/Run'
}
return '$0.0172/Run'
@@ -918,31 +948,17 @@ const apiNodeCosts: Record =
const modelWidget = node.widgets?.find(
(w) => w.name === 'model'
) as IComboWidget
- const aspectRatioWidget = node.widgets?.find(
- (w) => w.name === 'aspect_ratio'
- ) as IComboWidget
if (!modelWidget) {
- return '$0.0045-0.0182/Run (varies with model & aspect ratio)'
+ return '$0.0019-0.0073/Run (varies with model)'
}
const model = String(modelWidget.value)
- const aspectRatio = aspectRatioWidget
- ? String(aspectRatioWidget.value)
- : null
if (model.includes('photon-flash-1')) {
- if (!aspectRatio) return '$0.0045/Run'
- if (aspectRatio.includes('1:1')) return '~$0.0045/Run'
- if (aspectRatio.includes('16:9')) return '~$0.0045/Run'
- if (aspectRatio.includes('4:3')) return '~$0.0046/Run'
- if (aspectRatio.includes('21:9')) return '~$0.0047/Run'
+ return '$0.0019/Run'
} else if (model.includes('photon-1')) {
- if (!aspectRatio) return '$0.0172/Run'
- if (aspectRatio.includes('1:1')) return '~$0.0172/Run'
- if (aspectRatio.includes('16:9')) return '~$0.0172/Run'
- if (aspectRatio.includes('4:3')) return '~$0.0176/Run'
- if (aspectRatio.includes('21:9')) return '~$0.0182/Run'
+ return '$0.0073/Run'
}
return '$0.0172/Run'
@@ -1004,6 +1020,279 @@ const apiNodeCosts: Record =
return '$2.25/Run'
}
+ },
+ // Runway nodes - using actual node names from ComfyUI
+ RunwayTextToImageNode: {
+ displayPrice: '$0.08/Run'
+ },
+ RunwayImageToVideoNodeGen3a: {
+ displayPrice: calculateRunwayDurationPrice
+ },
+ RunwayImageToVideoNodeGen4: {
+ displayPrice: calculateRunwayDurationPrice
+ },
+ RunwayFirstLastFrameNode: {
+ displayPrice: calculateRunwayDurationPrice
+ },
+ // Rodin nodes - all have the same pricing structure
+ Rodin3D_Regular: {
+ displayPrice: '$0.4/Run'
+ },
+ Rodin3D_Detail: {
+ displayPrice: '$0.4/Run'
+ },
+ Rodin3D_Smooth: {
+ displayPrice: '$0.4/Run'
+ },
+ Rodin3D_Sketch: {
+ displayPrice: '$0.4/Run'
+ },
+ // Tripo nodes - using actual node names from ComfyUI
+ TripoTextToModelNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const quadWidget = node.widgets?.find(
+ (w) => w.name === 'quad'
+ ) as IComboWidget
+ const styleWidget = node.widgets?.find(
+ (w) => w.name === 'style'
+ ) as IComboWidget
+ const textureWidget = node.widgets?.find(
+ (w) => w.name === 'texture'
+ ) as IComboWidget
+ const textureQualityWidget = node.widgets?.find(
+ (w) => w.name === 'texture_quality'
+ ) as IComboWidget
+
+ if (!quadWidget || !styleWidget || !textureWidget)
+ return '$0.1-0.4/Run (varies with quad, style, texture & quality)'
+
+ const quad = String(quadWidget.value).toLowerCase() === 'true'
+ const style = String(styleWidget.value).toLowerCase()
+ const texture = String(textureWidget.value).toLowerCase() === 'true'
+ const textureQuality = String(
+ textureQualityWidget?.value || 'standard'
+ ).toLowerCase()
+
+ // Pricing logic based on CSV data
+ if (style.includes('none')) {
+ if (!quad) {
+ if (!texture) return '$0.10/Run'
+ else return '$0.15/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.30/Run'
+ else return '$0.35/Run'
+ } else {
+ if (!texture) return '$0.20/Run'
+ else return '$0.25/Run'
+ }
+ }
+ } else {
+ // any style
+ if (!quad) {
+ if (!texture) return '$0.15/Run'
+ else return '$0.20/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.35/Run'
+ else return '$0.40/Run'
+ } else {
+ if (!texture) return '$0.25/Run'
+ else return '$0.30/Run'
+ }
+ }
+ }
+ }
+ },
+ TripoImageToModelNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const quadWidget = node.widgets?.find(
+ (w) => w.name === 'quad'
+ ) as IComboWidget
+ const styleWidget = node.widgets?.find(
+ (w) => w.name === 'style'
+ ) as IComboWidget
+ const textureWidget = node.widgets?.find(
+ (w) => w.name === 'texture'
+ ) as IComboWidget
+ const textureQualityWidget = node.widgets?.find(
+ (w) => w.name === 'texture_quality'
+ ) as IComboWidget
+
+ if (!quadWidget || !styleWidget || !textureWidget)
+ return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+ const quad = String(quadWidget.value).toLowerCase() === 'true'
+ const style = String(styleWidget.value).toLowerCase()
+ const texture = String(textureWidget.value).toLowerCase() === 'true'
+ const textureQuality = String(
+ textureQualityWidget?.value || 'standard'
+ ).toLowerCase()
+
+ // Pricing logic based on CSV data for Image to Model
+ if (style.includes('none')) {
+ if (!quad) {
+ if (!texture) return '$0.20/Run'
+ else return '$0.25/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.40/Run'
+ else return '$0.45/Run'
+ } else {
+ if (!texture) return '$0.30/Run'
+ else return '$0.35/Run'
+ }
+ }
+ } else {
+ // any style
+ if (!quad) {
+ if (!texture) return '$0.25/Run'
+ else return '$0.30/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.45/Run'
+ else return '$0.50/Run'
+ } else {
+ if (!texture) return '$0.35/Run'
+ else return '$0.40/Run'
+ }
+ }
+ }
+ }
+ },
+ TripoRefineNode: {
+ displayPrice: '$0.3/Run'
+ },
+ TripoTextureNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const textureQualityWidget = node.widgets?.find(
+ (w) => w.name === 'texture_quality'
+ ) as IComboWidget
+
+ if (!textureQualityWidget) return '$0.1-0.2/Run (varies with quality)'
+
+ const textureQuality = String(textureQualityWidget.value)
+ return textureQuality.includes('detailed') ? '$0.2/Run' : '$0.1/Run'
+ }
+ },
+ TripoConvertModelNode: {
+ displayPrice: '$0.10/Run'
+ },
+ TripoRetargetRiggedModelNode: {
+ displayPrice: '$0.10/Run'
+ },
+ TripoMultiviewToModelNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const quadWidget = node.widgets?.find(
+ (w) => w.name === 'quad'
+ ) as IComboWidget
+ const styleWidget = node.widgets?.find(
+ (w) => w.name === 'style'
+ ) as IComboWidget
+ const textureWidget = node.widgets?.find(
+ (w) => w.name === 'texture'
+ ) as IComboWidget
+ const textureQualityWidget = node.widgets?.find(
+ (w) => w.name === 'texture_quality'
+ ) as IComboWidget
+
+ if (!quadWidget || !styleWidget || !textureWidget)
+ return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+ const quad = String(quadWidget.value).toLowerCase() === 'true'
+ const style = String(styleWidget.value).toLowerCase()
+ const texture = String(textureWidget.value).toLowerCase() === 'true'
+ const textureQuality = String(
+ textureQualityWidget?.value || 'standard'
+ ).toLowerCase()
+
+ // Pricing logic based on CSV data for Multiview to Model (same as Image to Model)
+ if (style.includes('none')) {
+ if (!quad) {
+ if (!texture) return '$0.20/Run'
+ else return '$0.25/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.40/Run'
+ else return '$0.45/Run'
+ } else {
+ if (!texture) return '$0.30/Run'
+ else return '$0.35/Run'
+ }
+ }
+ } else {
+ // any style
+ if (!quad) {
+ if (!texture) return '$0.25/Run'
+ else return '$0.30/Run'
+ } else {
+ if (textureQuality.includes('detailed')) {
+ if (!texture) return '$0.45/Run'
+ else return '$0.50/Run'
+ } else {
+ if (!texture) return '$0.35/Run'
+ else return '$0.40/Run'
+ }
+ }
+ }
+ }
+ },
+ // Google/Gemini nodes
+ GeminiNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const modelWidget = node.widgets?.find(
+ (w) => w.name === 'model'
+ ) as IComboWidget
+
+ if (!modelWidget) return 'Token-based'
+
+ const model = String(modelWidget.value)
+
+ // Google Veo video generation
+ if (model.includes('veo-2.0')) {
+ return '$0.5/second'
+ } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
+ return '$0.00016/$0.0006 per 1K tokens'
+ } else if (model.includes('gemini-2.5-flash-preview-04-17')) {
+ return '$0.00125/$0.01 per 1K tokens'
+ }
+ // For other Gemini models, show token-based pricing info
+ return 'Token-based'
+ }
+ },
+ // OpenAI nodes
+ OpenAIChatNode: {
+ displayPrice: (node: LGraphNode): string => {
+ const modelWidget = node.widgets?.find(
+ (w) => w.name === 'model'
+ ) as IComboWidget
+
+ if (!modelWidget) return 'Token-based'
+
+ const model = String(modelWidget.value)
+
+ // Specific pricing for exposed models based on official pricing data (converted to per 1K tokens)
+ if (model.includes('o4-mini')) {
+ return '$0.0011/$0.0044 per 1K tokens'
+ } else if (model.includes('o1-pro')) {
+ return '$0.15/$0.60 per 1K tokens'
+ } else if (model.includes('o1')) {
+ return '$0.015/$0.06 per 1K tokens'
+ } else if (model.includes('o3-mini')) {
+ return '$0.0011/$0.0044 per 1K tokens'
+ } else if (model.includes('o3')) {
+ return '$0.01/$0.04 per 1K tokens'
+ } else if (model.includes('gpt-4o')) {
+ return '$0.0025/$0.01 per 1K tokens'
+ } else if (model.includes('gpt-4.1-nano')) {
+ return '$0.0001/$0.0004 per 1K tokens'
+ } else if (model.includes('gpt-4.1-mini')) {
+ return '$0.0004/$0.0016 per 1K tokens'
+ } else if (model.includes('gpt-4.1')) {
+ return '$0.002/$0.008 per 1K tokens'
+ }
+ return 'Token-based'
+ }
}
}
@@ -1045,9 +1334,11 @@ export const useNodePricing = () => {
OpenAIDalle3: ['size', 'quality'],
OpenAIDalle2: ['size', 'n'],
OpenAIGPTImage1: ['quality', 'n'],
- IdeogramV1: ['num_images'],
- IdeogramV2: ['num_images'],
+ IdeogramV1: ['num_images', 'turbo'],
+ IdeogramV2: ['num_images', 'turbo'],
IdeogramV3: ['rendering_speed', 'num_images'],
+ FluxProKontextProNode: [],
+ FluxProKontextMaxNode: [],
VeoVideoGenerationNode: ['duration_seconds'],
LumaVideoNode: ['model', 'resolution', 'duration'],
LumaImageToVideoNode: ['model', 'resolution', 'duration'],
@@ -1075,7 +1366,19 @@ export const useNodePricing = () => {
RecraftGenerateVectorImageNode: ['n'],
MoonvalleyTxt2VideoNode: ['length'],
MoonvalleyImg2VideoNode: ['length'],
- MoonvalleyVideo2VideoNode: ['length']
+ MoonvalleyVideo2VideoNode: ['length'],
+ // Runway nodes
+ RunwayImageToVideoNodeGen3a: ['duration'],
+ RunwayImageToVideoNodeGen4: ['duration'],
+ RunwayFirstLastFrameNode: ['duration'],
+ // Tripo nodes
+ TripoTextToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+ TripoImageToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+ TripoTextureNode: ['texture_quality'],
+ // Google/Gemini nodes
+ GeminiNode: ['model'],
+ // OpenAI nodes
+ OpenAIChatNode: ['model']
}
return widgetMap[nodeType] || []
}
diff --git a/src/composables/nodePack/useMissingNodes.ts b/src/composables/nodePack/useMissingNodes.ts
index 4327df0c1..a7008ff08 100644
--- a/src/composables/nodePack/useMissingNodes.ts
+++ b/src/composables/nodePack/useMissingNodes.ts
@@ -8,6 +8,7 @@ import { app } from '@/scripts/app'
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
/**
* Composable to find missing NodePacks from workflow
@@ -56,7 +57,7 @@ export const useMissingNodes = () => {
}
const missingCoreNodes = computed>(() => {
- const missingNodes = app.graph.nodes.filter(isMissingCoreNode)
+ const missingNodes = collectAllNodes(app.graph, isMissingCoreNode)
return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
})
diff --git a/src/composables/nodePack/useWorkflowPacks.ts b/src/composables/nodePack/useWorkflowPacks.ts
index 4fac76e18..296c4191d 100644
--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/composables/nodePack/useWorkflowPacks.ts
@@ -9,6 +9,7 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
import { useSystemStatsStore } from '@/stores/systemStatsStore'
import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
type WorkflowPack = {
id:
@@ -108,11 +109,13 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
}
/**
- * Get the node packs for all nodes in the workflow.
+ * Get the node packs for all nodes in the workflow (including subgraphs).
*/
const getWorkflowPacks = async () => {
- if (!app.graph?.nodes?.length) return []
- const packs = await Promise.all(app.graph.nodes.map(workflowNodeToPack))
+ if (!app.graph) return []
+ const allNodes = collectAllNodes(app.graph)
+ if (!allNodes.length) return []
+ const packs = await Promise.all(allNodes.map(workflowNodeToPack))
workflowPacks.value = packs.filter((pack) => pack !== undefined)
}
diff --git a/src/composables/useBrowserTabTitle.ts b/src/composables/useBrowserTabTitle.ts
index 95d60752d..82da27149 100644
--- a/src/composables/useBrowserTabTitle.ts
+++ b/src/composables/useBrowserTabTitle.ts
@@ -1,6 +1,7 @@
import { useTitle } from '@vueuse/core'
import { computed } from 'vue'
+import { t } from '@/i18n'
import { useExecutionStore } from '@/stores/executionStore'
import { useSettingStore } from '@/stores/settingStore'
import { useWorkflowStore } from '@/stores/workflowStore'
@@ -36,11 +37,34 @@ export const useBrowserTabTitle = () => {
: DEFAULT_TITLE
})
- const nodeExecutionTitle = computed(() =>
- executionStore.executingNode && executionStore.executingNodeProgress
- ? `${executionText.value}[${Math.round(executionStore.executingNodeProgress * 100)}%] ${executionStore.executingNode.type}`
- : ''
- )
+ const nodeExecutionTitle = computed(() => {
+ // Check if any nodes are in progress
+ const nodeProgressEntries = Object.entries(
+ executionStore.nodeProgressStates
+ )
+ const runningNodes = nodeProgressEntries.filter(
+ ([_, state]) => state.state === 'running'
+ )
+
+ if (runningNodes.length === 0) {
+ return ''
+ }
+
+ // If multiple nodes are running
+ if (runningNodes.length > 1) {
+ return `${executionText.value}[${runningNodes.length} ${t('g.nodesRunning', 'nodes running')}]`
+ }
+
+ // If only one node is running
+ const [nodeId, state] = runningNodes[0]
+ const progress = Math.round((state.value / state.max) * 100)
+ const nodeType =
+ executionStore.activePrompt?.workflow?.changeTracker?.activeState.nodes.find(
+ (n) => String(n.id) === nodeId
+ )?.type || 'Node'
+
+ return `${executionText.value}[${progress}%] ${nodeType}`
+ })
const workflowTitle = computed(
() =>
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index f0b1cc5e6..7ecbe1fe2 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -31,6 +31,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
import { useWorkspaceStore } from '@/stores/workspaceStore'
import { ManagerTab } from '@/types/comfyManagerTypes'
+import { getAllNonIoNodesInSubgraph } from '@/utils/graphTraversalUtil'
const moveSelectedNodesVersionAdded = '1.22.2'
@@ -169,11 +170,20 @@ export function useCoreCommands(): ComfyCommand[] {
function: () => {
const settingStore = useSettingStore()
if (
- !settingStore.get('Comfy.ComfirmClear') ||
+ !settingStore.get('Comfy.ConfirmClear') ||
confirm('Clear workflow?')
) {
app.clean()
- app.graph.clear()
+ if (app.canvas.subgraph) {
+ // `clear` is not implemented on subgraphs and the parent class's
+ // (`LGraph`) `clear` breaks the subgraph structure. For subgraphs,
+ // just clear the nodes but preserve input/output nodes and structure
+ const subgraph = app.canvas.subgraph
+ const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+ nonIoNodes.forEach((node) => subgraph.remove(node))
+ } else {
+ app.graph.clear()
+ }
api.dispatchCustomEvent('graphCleared')
}
}
@@ -315,6 +325,19 @@ export function useCoreCommands(): ComfyCommand[] {
}
})()
},
+ {
+ id: 'Comfy.Canvas.ToggleMinimap',
+ icon: 'pi pi-map',
+ label: 'Canvas Toggle Minimap',
+ versionAdded: '1.24.1',
+ function: async () => {
+ const settingStore = useSettingStore()
+ await settingStore.set(
+ 'Comfy.Minimap.Visible',
+ !settingStore.get('Comfy.Minimap.Visible')
+ )
+ }
+ },
{
id: 'Comfy.QueuePrompt',
icon: 'pi pi-play',
diff --git a/src/composables/useFrontendVersionMismatchWarning.ts b/src/composables/useFrontendVersionMismatchWarning.ts
new file mode 100644
index 000000000..11897a016
--- /dev/null
+++ b/src/composables/useFrontendVersionMismatchWarning.ts
@@ -0,0 +1,94 @@
+import { whenever } from '@vueuse/core'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useToastStore } from '@/stores/toastStore'
+import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+
+export interface UseFrontendVersionMismatchWarningOptions {
+ immediate?: boolean
+}
+
+/**
+ * Composable for handling frontend version mismatch warnings.
+ *
+ * Displays toast notifications when the frontend version is incompatible with the backend,
+ * either because the frontend is outdated or newer than the backend expects.
+ * Automatically dismisses warnings when shown and persists dismissal state for 7 days.
+ *
+ * @param options - Configuration options
+ * @param options.immediate - If true, automatically shows warning when version mismatch is detected
+ * @returns Object with methods and computed properties for managing version warnings
+ *
+ * @example
+ * ```ts
+ * // Show warning immediately when mismatch detected
+ * const { showWarning, shouldShowWarning } = useFrontendVersionMismatchWarning({ immediate: true })
+ *
+ * // Manual control
+ * const { showWarning } = useFrontendVersionMismatchWarning()
+ * showWarning() // Call when needed
+ * ```
+ */
+export function useFrontendVersionMismatchWarning(
+ options: UseFrontendVersionMismatchWarningOptions = {}
+) {
+ const { immediate = false } = options
+ const { t } = useI18n()
+ const toastStore = useToastStore()
+ const versionCompatibilityStore = useVersionCompatibilityStore()
+
+ // Track if we've already shown the warning
+ let hasShownWarning = false
+
+ const showWarning = () => {
+ // Prevent showing the warning multiple times
+ if (hasShownWarning) return
+
+ const message = versionCompatibilityStore.warningMessage
+ if (!message) return
+
+ const detailMessage = t('g.frontendOutdated', {
+ frontendVersion: message.frontendVersion,
+ requiredVersion: message.requiredVersion
+ })
+
+ const fullMessage = t('g.versionMismatchWarningMessage', {
+ warning: t('g.versionMismatchWarning'),
+ detail: detailMessage
+ })
+
+ toastStore.addAlert(fullMessage)
+ hasShownWarning = true
+
+ // Automatically dismiss the warning so it won't show again for 7 days
+ versionCompatibilityStore.dismissWarning()
+ }
+
+ onMounted(() => {
+ // Only set up the watcher if immediate is true
+ if (immediate) {
+ whenever(
+ () => versionCompatibilityStore.shouldShowWarning,
+ () => {
+ showWarning()
+ },
+ {
+ immediate: true,
+ once: true
+ }
+ )
+ }
+ })
+
+ return {
+ showWarning,
+ shouldShowWarning: computed(
+ () => versionCompatibilityStore.shouldShowWarning
+ ),
+ dismissWarning: versionCompatibilityStore.dismissWarning,
+ hasVersionMismatch: computed(
+ () => versionCompatibilityStore.hasVersionMismatch
+ )
+ }
+}
diff --git a/src/composables/useLitegraphSettings.ts b/src/composables/useLitegraphSettings.ts
index 83f19c334..79eaee1c3 100644
--- a/src/composables/useLitegraphSettings.ts
+++ b/src/composables/useLitegraphSettings.ts
@@ -124,9 +124,12 @@ export const useLitegraphSettings = () => {
})
watchEffect(() => {
- LiteGraph.macTrackpadGestures = settingStore.get(
- 'LiteGraph.Pointer.TrackpadGestures'
- )
+ const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode') as
+ | 'standard'
+ | 'legacy'
+
+ LiteGraph.canvasNavigationMode = navigationMode
+ LiteGraph.macTrackpadGestures = navigationMode === 'standard'
})
watchEffect(() => {
diff --git a/src/composables/useMinimap.ts b/src/composables/useMinimap.ts
new file mode 100644
index 000000000..1245a0b76
--- /dev/null
+++ b/src/composables/useMinimap.ts
@@ -0,0 +1,685 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { useRafFn, useThrottleFn } from '@vueuse/core'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import { api } from '@/scripts/api'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+interface GraphCallbacks {
+ onNodeAdded?: (node: LGraphNode) => void
+ onNodeRemoved?: (node: LGraphNode) => void
+ onConnectionChange?: (node: LGraphNode) => void
+}
+
+export function useMinimap() {
+ const settingStore = useSettingStore()
+ const canvasStore = useCanvasStore()
+
+ const containerRef = ref()
+ const canvasRef = ref()
+ const minimapRef = ref(null)
+
+ const visible = ref(true)
+
+ const initialized = ref(false)
+ const bounds = ref({
+ minX: 0,
+ minY: 0,
+ maxX: 0,
+ maxY: 0,
+ width: 0,
+ height: 0
+ })
+ const scale = ref(1)
+ const isDragging = ref(false)
+ const viewportTransform = ref({ x: 0, y: 0, width: 0, height: 0 })
+
+ const needsFullRedraw = ref(true)
+ const needsBoundsUpdate = ref(true)
+ const lastNodeCount = ref(0)
+ const nodeStatesCache = new Map()
+ const linksCache = ref('')
+
+ const updateFlags = ref({
+ bounds: false,
+ nodes: false,
+ connections: false,
+ viewport: false
+ })
+
+ const width = 250
+ const height = 200
+ const nodeColor = '#0B8CE999'
+ const linkColor = '#F99614'
+ const slotColor = '#F99614'
+ const viewportColor = '#FFF'
+ const backgroundColor = '#15161C'
+ const borderColor = '#333'
+
+ const containerRect = ref({
+ left: 0,
+ top: 0,
+ width: width,
+ height: height
+ })
+
+ const canvasDimensions = ref({
+ width: 0,
+ height: 0
+ })
+
+ const updateContainerRect = () => {
+ if (!containerRef.value) return
+
+ const rect = containerRef.value.getBoundingClientRect()
+ containerRect.value = {
+ left: rect.left,
+ top: rect.top,
+ width: rect.width,
+ height: rect.height
+ }
+ }
+
+ const updateCanvasDimensions = () => {
+ const c = canvas.value
+ if (!c) return
+
+ const canvasEl = c.canvas
+ const dpr = window.devicePixelRatio || 1
+
+ canvasDimensions.value = {
+ width: canvasEl.clientWidth || canvasEl.width / dpr,
+ height: canvasEl.clientHeight || canvasEl.height / dpr
+ }
+ }
+
+ const canvas = computed(() => canvasStore.canvas)
+ const graph = computed(() => canvas.value?.graph)
+
+ const containerStyles = computed(() => ({
+ width: `${width}px`,
+ height: `${height}px`,
+ backgroundColor: backgroundColor,
+ border: `1px solid ${borderColor}`,
+ borderRadius: '8px'
+ }))
+
+ const viewportStyles = computed(() => ({
+ transform: `translate(${viewportTransform.value.x}px, ${viewportTransform.value.y}px)`,
+ width: `${viewportTransform.value.width}px`,
+ height: `${viewportTransform.value.height}px`,
+ border: `2px solid ${viewportColor}`,
+ backgroundColor: `${viewportColor}33`,
+ willChange: 'transform',
+ backfaceVisibility: 'hidden' as const,
+ perspective: '1000px',
+ pointerEvents: 'none' as const
+ }))
+
+ const calculateGraphBounds = () => {
+ const g = graph.value
+ if (!g?._nodes || g._nodes.length === 0) {
+ return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
+ }
+
+ let minX = Infinity
+ let minY = Infinity
+ let maxX = -Infinity
+ let maxY = -Infinity
+
+ for (const node of g._nodes) {
+ minX = Math.min(minX, node.pos[0])
+ minY = Math.min(minY, node.pos[1])
+ maxX = Math.max(maxX, node.pos[0] + node.size[0])
+ maxY = Math.max(maxY, node.pos[1] + node.size[1])
+ }
+
+ let currentWidth = maxX - minX
+ let currentHeight = maxY - minY
+
+ // Enforce minimum viewport dimensions for better visualization
+ const minViewportWidth = 2500
+ const minViewportHeight = 2000
+
+ if (currentWidth < minViewportWidth) {
+ const padding = (minViewportWidth - currentWidth) / 2
+ minX -= padding
+ maxX += padding
+ currentWidth = minViewportWidth
+ }
+
+ if (currentHeight < minViewportHeight) {
+ const padding = (minViewportHeight - currentHeight) / 2
+ minY -= padding
+ maxY += padding
+ currentHeight = minViewportHeight
+ }
+
+ return {
+ minX,
+ minY,
+ maxX,
+ maxY,
+ width: currentWidth,
+ height: currentHeight
+ }
+ }
+
+ const calculateScale = () => {
+ if (bounds.value.width === 0 || bounds.value.height === 0) {
+ return 1
+ }
+
+ const scaleX = width / bounds.value.width
+ const scaleY = height / bounds.value.height
+
+ // Apply 0.9 factor to provide padding/gap between nodes and minimap borders
+ return Math.min(scaleX, scaleY) * 0.9
+ }
+
+ const renderNodes = (
+ ctx: CanvasRenderingContext2D,
+ offsetX: number,
+ offsetY: number
+ ) => {
+ const g = graph.value
+ if (!g || !g._nodes || g._nodes.length === 0) return
+
+ for (const node of g._nodes) {
+ const x = (node.pos[0] - bounds.value.minX) * scale.value + offsetX
+ const y = (node.pos[1] - bounds.value.minY) * scale.value + offsetY
+ const w = node.size[0] * scale.value
+ const h = node.size[1] * scale.value
+
+ // Render solid node blocks
+ ctx.fillStyle = nodeColor
+ ctx.fillRect(x, y, w, h)
+ }
+ }
+
+ const renderConnections = (
+ ctx: CanvasRenderingContext2D,
+ offsetX: number,
+ offsetY: number
+ ) => {
+ const g = graph.value
+ if (!g) return
+
+ ctx.strokeStyle = linkColor
+ ctx.lineWidth = 1.4
+
+ const slotRadius = 3.7 * Math.max(scale.value, 0.5) // Larger slots that scale
+ const connections: Array<{
+ x1: number
+ y1: number
+ x2: number
+ y2: number
+ }> = []
+
+ for (const node of g._nodes) {
+ if (!node.outputs) continue
+
+ const x1 = (node.pos[0] - bounds.value.minX) * scale.value + offsetX
+ const y1 = (node.pos[1] - bounds.value.minY) * scale.value + offsetY
+
+ for (const output of node.outputs) {
+ if (!output.links) continue
+
+ for (const linkId of output.links) {
+ const link = g.links[linkId]
+ if (!link) continue
+
+ const targetNode = g.getNodeById(link.target_id)
+ if (!targetNode) continue
+
+ const x2 =
+ (targetNode.pos[0] - bounds.value.minX) * scale.value + offsetX
+ const y2 =
+ (targetNode.pos[1] - bounds.value.minY) * scale.value + offsetY
+
+ const outputX = x1 + node.size[0] * scale.value
+ const outputY = y1 + node.size[1] * scale.value * 0.2
+ const inputX = x2
+ const inputY = y2 + targetNode.size[1] * scale.value * 0.2
+
+ // Draw connection line
+ ctx.beginPath()
+ ctx.moveTo(outputX, outputY)
+ ctx.lineTo(inputX, inputY)
+ ctx.stroke()
+
+ connections.push({ x1: outputX, y1: outputY, x2: inputX, y2: inputY })
+ }
+ }
+ }
+
+ // Render connection slots on top
+ ctx.fillStyle = slotColor
+ for (const conn of connections) {
+ // Output slot
+ ctx.beginPath()
+ ctx.arc(conn.x1, conn.y1, slotRadius, 0, Math.PI * 2)
+ ctx.fill()
+
+ // Input slot
+ ctx.beginPath()
+ ctx.arc(conn.x2, conn.y2, slotRadius, 0, Math.PI * 2)
+ ctx.fill()
+ }
+ }
+
+ const renderMinimap = () => {
+ if (!canvasRef.value || !graph.value) return
+
+ const ctx = canvasRef.value.getContext('2d')
+ if (!ctx) return
+
+ // Fast path for 0 nodes - just show background
+ if (!graph.value._nodes || graph.value._nodes.length === 0) {
+ ctx.clearRect(0, 0, width, height)
+ return
+ }
+
+ const needsRedraw =
+ needsFullRedraw.value ||
+ updateFlags.value.nodes ||
+ updateFlags.value.connections
+
+ if (needsRedraw) {
+ ctx.clearRect(0, 0, width, height)
+
+ const offsetX = (width - bounds.value.width * scale.value) / 2
+ const offsetY = (height - bounds.value.height * scale.value) / 2
+
+ renderNodes(ctx, offsetX, offsetY)
+ renderConnections(ctx, offsetX, offsetY)
+
+ needsFullRedraw.value = false
+ updateFlags.value.nodes = false
+ updateFlags.value.connections = false
+ }
+ }
+
+ const updateViewport = () => {
+ const c = canvas.value
+ if (!c) return
+
+ if (
+ canvasDimensions.value.width === 0 ||
+ canvasDimensions.value.height === 0
+ ) {
+ updateCanvasDimensions()
+ }
+
+ const ds = c.ds
+
+ const viewportWidth = canvasDimensions.value.width / ds.scale
+ const viewportHeight = canvasDimensions.value.height / ds.scale
+
+ const worldX = -ds.offset[0]
+ const worldY = -ds.offset[1]
+
+ const centerOffsetX = (width - bounds.value.width * scale.value) / 2
+ const centerOffsetY = (height - bounds.value.height * scale.value) / 2
+
+ viewportTransform.value = {
+ x: (worldX - bounds.value.minX) * scale.value + centerOffsetX,
+ y: (worldY - bounds.value.minY) * scale.value + centerOffsetY,
+ width: viewportWidth * scale.value,
+ height: viewportHeight * scale.value
+ }
+
+ updateFlags.value.viewport = false
+ }
+
+ const updateMinimap = () => {
+ if (needsBoundsUpdate.value || updateFlags.value.bounds) {
+ bounds.value = calculateGraphBounds()
+ scale.value = calculateScale()
+ needsBoundsUpdate.value = false
+ updateFlags.value.bounds = false
+ needsFullRedraw.value = true
+ }
+
+ if (
+ needsFullRedraw.value ||
+ updateFlags.value.nodes ||
+ updateFlags.value.connections
+ ) {
+ renderMinimap()
+ }
+ }
+
+ const checkForChanges = useThrottleFn(() => {
+ const g = graph.value
+ if (!g) return
+
+ let structureChanged = false
+ let positionChanged = false
+ let connectionChanged = false
+
+ if (g._nodes.length !== lastNodeCount.value) {
+ structureChanged = true
+ lastNodeCount.value = g._nodes.length
+ }
+
+ for (const node of g._nodes) {
+ const key = node.id
+ const currentState = `${node.pos[0]},${node.pos[1]},${node.size[0]},${node.size[1]}`
+
+ if (nodeStatesCache.get(key) !== currentState) {
+ positionChanged = true
+ nodeStatesCache.set(key, currentState)
+ }
+ }
+
+ const currentLinks = JSON.stringify(g.links || {})
+ if (currentLinks !== linksCache.value) {
+ connectionChanged = true
+ linksCache.value = currentLinks
+ }
+
+ const currentNodeIds = new Set(g._nodes.map((n) => n.id))
+ for (const [nodeId] of nodeStatesCache) {
+ if (!currentNodeIds.has(nodeId)) {
+ nodeStatesCache.delete(nodeId)
+ structureChanged = true
+ }
+ }
+
+ if (structureChanged || positionChanged) {
+ updateFlags.value.bounds = true
+ updateFlags.value.nodes = true
+ }
+
+ if (connectionChanged) {
+ updateFlags.value.connections = true
+ }
+
+ if (structureChanged || positionChanged || connectionChanged) {
+ updateMinimap()
+ }
+ }, 500)
+
+ const { pause: pauseChangeDetection, resume: resumeChangeDetection } =
+ useRafFn(
+ async () => {
+ if (visible.value) {
+ await checkForChanges()
+ }
+ },
+ { immediate: false }
+ )
+
+ const { startSync: startViewportSync, stopSync: stopViewportSync } =
+ useCanvasTransformSync(updateViewport, { autoStart: false })
+
+ const handleMouseDown = (e: MouseEvent) => {
+ isDragging.value = true
+ updateContainerRect()
+ handleMouseMove(e)
+ }
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isDragging.value || !canvasRef.value || !canvas.value) return
+
+ const x = e.clientX - containerRect.value.left
+ const y = e.clientY - containerRect.value.top
+
+ const offsetX = (width - bounds.value.width * scale.value) / 2
+ const offsetY = (height - bounds.value.height * scale.value) / 2
+
+ const worldX = (x - offsetX) / scale.value + bounds.value.minX
+ const worldY = (y - offsetY) / scale.value + bounds.value.minY
+
+ centerViewOn(worldX, worldY)
+ }
+
+ const handleMouseUp = () => {
+ isDragging.value = false
+ }
+
+ const handleWheel = (e: WheelEvent) => {
+ e.preventDefault()
+
+ const c = canvas.value
+ if (!c) return
+
+ if (
+ containerRect.value.left === 0 &&
+ containerRect.value.top === 0 &&
+ containerRef.value
+ ) {
+ updateContainerRect()
+ }
+
+ const ds = c.ds
+ const delta = e.deltaY > 0 ? 0.9 : 1.1
+
+ const newScale = ds.scale * delta
+
+ const MIN_SCALE = 0.1
+ const MAX_SCALE = 10
+
+ if (newScale < MIN_SCALE || newScale > MAX_SCALE) return
+
+ const x = e.clientX - containerRect.value.left
+ const y = e.clientY - containerRect.value.top
+
+ const offsetX = (width - bounds.value.width * scale.value) / 2
+ const offsetY = (height - bounds.value.height * scale.value) / 2
+
+ const worldX = (x - offsetX) / scale.value + bounds.value.minX
+ const worldY = (y - offsetY) / scale.value + bounds.value.minY
+
+ ds.scale = newScale
+
+ centerViewOn(worldX, worldY)
+ }
+
+ const centerViewOn = (worldX: number, worldY: number) => {
+ const c = canvas.value
+ if (!c) return
+
+ if (
+ canvasDimensions.value.width === 0 ||
+ canvasDimensions.value.height === 0
+ ) {
+ updateCanvasDimensions()
+ }
+
+ const ds = c.ds
+
+ const viewportWidth = canvasDimensions.value.width / ds.scale
+ const viewportHeight = canvasDimensions.value.height / ds.scale
+
+ ds.offset[0] = -(worldX - viewportWidth / 2)
+ ds.offset[1] = -(worldY - viewportHeight / 2)
+
+ updateFlags.value.viewport = true
+
+ c.setDirty(true, true)
+ }
+
+ let originalCallbacks: GraphCallbacks = {}
+
+ const handleGraphChanged = useThrottleFn(() => {
+ needsFullRedraw.value = true
+ updateFlags.value.bounds = true
+ updateFlags.value.nodes = true
+ updateFlags.value.connections = true
+ updateMinimap()
+ }, 500)
+
+ const setupEventListeners = () => {
+ const g = graph.value
+ if (!g) return
+
+ originalCallbacks = {
+ onNodeAdded: g.onNodeAdded,
+ onNodeRemoved: g.onNodeRemoved,
+ onConnectionChange: g.onConnectionChange
+ }
+
+ g.onNodeAdded = function (node) {
+ originalCallbacks.onNodeAdded?.call(this, node)
+
+ void handleGraphChanged()
+ }
+
+ g.onNodeRemoved = function (node) {
+ originalCallbacks.onNodeRemoved?.call(this, node)
+ nodeStatesCache.delete(node.id)
+ void handleGraphChanged()
+ }
+
+ g.onConnectionChange = function (node) {
+ originalCallbacks.onConnectionChange?.call(this, node)
+
+ void handleGraphChanged()
+ }
+ }
+
+ const cleanupEventListeners = () => {
+ const g = graph.value
+ if (!g) return
+
+ if (originalCallbacks.onNodeAdded !== undefined) {
+ g.onNodeAdded = originalCallbacks.onNodeAdded
+ }
+ if (originalCallbacks.onNodeRemoved !== undefined) {
+ g.onNodeRemoved = originalCallbacks.onNodeRemoved
+ }
+ if (originalCallbacks.onConnectionChange !== undefined) {
+ g.onConnectionChange = originalCallbacks.onConnectionChange
+ }
+ }
+
+ const init = async () => {
+ if (initialized.value) return
+
+ visible.value = settingStore.get('Comfy.Minimap.Visible')
+
+ if (canvas.value && graph.value) {
+ setupEventListeners()
+
+ api.addEventListener('graphChanged', handleGraphChanged)
+
+ if (containerRef.value) {
+ updateContainerRect()
+ }
+ updateCanvasDimensions()
+
+ window.addEventListener('resize', updateContainerRect)
+ window.addEventListener('scroll', updateContainerRect)
+ window.addEventListener('resize', updateCanvasDimensions)
+
+ needsFullRedraw.value = true
+ updateFlags.value.bounds = true
+ updateFlags.value.nodes = true
+ updateFlags.value.connections = true
+ updateFlags.value.viewport = true
+
+ updateMinimap()
+ updateViewport()
+
+ if (visible.value) {
+ resumeChangeDetection()
+ startViewportSync()
+ }
+ initialized.value = true
+ }
+ }
+
+ const destroy = () => {
+ pauseChangeDetection()
+ stopViewportSync()
+ cleanupEventListeners()
+
+ api.removeEventListener('graphChanged', handleGraphChanged)
+
+ window.removeEventListener('resize', updateContainerRect)
+ window.removeEventListener('scroll', updateContainerRect)
+ window.removeEventListener('resize', updateCanvasDimensions)
+
+ nodeStatesCache.clear()
+ initialized.value = false
+ }
+
+ watch(
+ canvas,
+ async (newCanvas, oldCanvas) => {
+ if (oldCanvas) {
+ cleanupEventListeners()
+ pauseChangeDetection()
+ stopViewportSync()
+ api.removeEventListener('graphChanged', handleGraphChanged)
+ window.removeEventListener('resize', updateContainerRect)
+ window.removeEventListener('scroll', updateContainerRect)
+ window.removeEventListener('resize', updateCanvasDimensions)
+ }
+ if (newCanvas && !initialized.value) {
+ await init()
+ }
+ },
+ { immediate: true }
+ )
+
+ watch(visible, async (isVisible) => {
+ if (isVisible) {
+ if (containerRef.value) {
+ updateContainerRect()
+ }
+ updateCanvasDimensions()
+
+ needsFullRedraw.value = true
+ updateFlags.value.bounds = true
+ updateFlags.value.nodes = true
+ updateFlags.value.connections = true
+ updateFlags.value.viewport = true
+
+ await nextTick()
+
+ updateMinimap()
+ updateViewport()
+ resumeChangeDetection()
+ startViewportSync()
+ } else {
+ pauseChangeDetection()
+ stopViewportSync()
+ }
+ })
+
+ const toggle = async () => {
+ visible.value = !visible.value
+ await settingStore.set('Comfy.Minimap.Visible', visible.value)
+ }
+
+ const setMinimapRef = (ref: any) => {
+ minimapRef.value = ref
+ }
+
+ return {
+ visible: computed(() => visible.value),
+ initialized: computed(() => initialized.value),
+
+ containerRef,
+ canvasRef,
+ containerStyles,
+ viewportStyles,
+ width,
+ height,
+
+ init,
+ destroy,
+ toggle,
+ handleMouseDown,
+ handleMouseMove,
+ handleMouseUp,
+ handleWheel,
+ setMinimapRef
+ }
+}
diff --git a/src/composables/useRefreshableSelection.ts b/src/composables/useRefreshableSelection.ts
index bb19918be..20a7c5e75 100644
--- a/src/composables/useRefreshableSelection.ts
+++ b/src/composables/useRefreshableSelection.ts
@@ -1,5 +1,4 @@
import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
import { computed, ref, watchEffect } from 'vue'
import { useCanvasStore } from '@/stores/graphStore'
@@ -9,12 +8,11 @@ interface RefreshableItem {
refresh: () => Promise | void
}
-type RefreshableWidget = IBaseWidget & RefreshableItem
-
-const isRefreshableWidget = (
- widget: IBaseWidget
-): widget is RefreshableWidget =>
- 'refresh' in widget && typeof widget.refresh === 'function'
+const isRefreshableWidget = (widget: unknown): widget is RefreshableItem =>
+ widget != null &&
+ typeof widget === 'object' &&
+ 'refresh' in widget &&
+ typeof widget.refresh === 'function'
/**
* Tracks selected nodes and their refreshable widgets
@@ -27,10 +25,17 @@ export const useRefreshableSelection = () => {
selectedNodes.value = graphStore.selectedItems.filter(isLGraphNode)
})
- const refreshableWidgets = computed(() =>
- selectedNodes.value.flatMap(
- (node) => node.widgets?.filter(isRefreshableWidget) ?? []
- )
+ const refreshableWidgets = computed(() =>
+ selectedNodes.value.flatMap((node) => {
+ if (!node.widgets) return []
+ const items: RefreshableItem[] = []
+ for (const widget of node.widgets) {
+ if (isRefreshableWidget(widget)) {
+ items.push(widget)
+ }
+ }
+ return items
+ })
)
const isRefreshable = computed(() => refreshableWidgets.value.length > 0)
diff --git a/src/composables/widgets/useChatHistoryWidget.ts b/src/composables/widgets/useChatHistoryWidget.ts
index 9f807a3c6..a3568fb21 100644
--- a/src/composables/widgets/useChatHistoryWidget.ts
+++ b/src/composables/widgets/useChatHistoryWidget.ts
@@ -3,14 +3,23 @@ import { ref } from 'vue'
import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import {
+ ComponentWidgetImpl,
+ type ComponentWidgetStandardProps,
+ addWidget
+} from '@/scripts/domWidget'
import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+type ChatHistoryCustomProps = Omit<
+ InstanceType['$props'],
+ ComponentWidgetStandardProps
+>
+
const PADDING = 16
export const useChatHistoryWidget = (
options: {
- props?: Omit['$props'], 'widget'>
+ props?: ChatHistoryCustomProps
} = {}
) => {
const widgetConstructor: ComfyWidgetConstructorV2 = (
@@ -20,7 +29,7 @@ export const useChatHistoryWidget = (
const widgetValue = ref('')
const widget = new ComponentWidgetImpl<
string | object,
- InstanceType['$props']
+ ChatHistoryCustomProps
>({
node,
name: inputSpec.name,
diff --git a/src/composables/widgets/useProgressTextWidget.ts b/src/composables/widgets/useProgressTextWidget.ts
index 625f0f9cf..1e7dc45ce 100644
--- a/src/composables/widgets/useProgressTextWidget.ts
+++ b/src/composables/widgets/useProgressTextWidget.ts
@@ -3,9 +3,18 @@ import { ref } from 'vue'
import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import {
+ ComponentWidgetImpl,
+ type ComponentWidgetStandardProps,
+ addWidget
+} from '@/scripts/domWidget'
import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+type TextPreviewCustomProps = Omit<
+ InstanceType['$props'],
+ ComponentWidgetStandardProps
+>
+
const PADDING = 16
export const useTextPreviewWidget = (
@@ -18,11 +27,17 @@ export const useTextPreviewWidget = (
inputSpec: InputSpec
) => {
const widgetValue = ref('')
- const widget = new ComponentWidgetImpl({
+ const widget = new ComponentWidgetImpl<
+ string | object,
+ TextPreviewCustomProps
+ >({
node,
name: inputSpec.name,
component: TextPreviewWidget,
inputSpec,
+ props: {
+ nodeId: node.id
+ },
options: {
getValue: () => widgetValue.value,
setValue: (value: string | object) => {
diff --git a/src/composables/widgets/useStringWidget.ts b/src/composables/widgets/useStringWidget.ts
index d5298338e..b3f438a96 100644
--- a/src/composables/widgets/useStringWidget.ts
+++ b/src/composables/widgets/useStringWidget.ts
@@ -8,6 +8,8 @@ import { app } from '@/scripts/app'
import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
import { useSettingStore } from '@/stores/settingStore'
+const TRACKPAD_DETECTION_THRESHOLD = 50
+
function addMultilineWidget(
node: LGraphNode,
name: string,
@@ -54,38 +56,55 @@ function addMultilineWidget(
}
})
- /** Timer reference. `null` when the timer completes. */
- let ignoreEventsTimer: ReturnType | null = null
- /** Total number of events ignored since the timer started. */
- let ignoredEvents = 0
-
- // Pass wheel events to the canvas when appropriate
inputEl.addEventListener('wheel', (event: WheelEvent) => {
- if (!Object.is(event.deltaX, -0)) return
+ const gesturesEnabled = useSettingStore().get(
+ 'LiteGraph.Pointer.TrackpadGestures'
+ )
+ const deltaX = event.deltaX
+ const deltaY = event.deltaY
- // If the textarea has focus, require more effort to activate pass-through
- const multiplier = document.activeElement === inputEl ? 2 : 1
- const maxScrollHeight = inputEl.scrollHeight - inputEl.clientHeight
+ const canScrollY = inputEl.scrollHeight > inputEl.clientHeight
+ const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY)
- if (
- (event.deltaY < 0 && inputEl.scrollTop === 0) ||
- (event.deltaY > 0 && inputEl.scrollTop === maxScrollHeight)
- ) {
- // Attempting to scroll past the end of the textarea
- if (!ignoreEventsTimer || ignoredEvents > 25 * multiplier) {
- app.canvas.processMouseWheel(event)
- } else {
- ignoredEvents++
- }
- } else if (event.deltaY !== 0) {
- // Start timer whenever a successful scroll occurs
- ignoredEvents = 0
- if (ignoreEventsTimer) clearTimeout(ignoreEventsTimer)
-
- ignoreEventsTimer = setTimeout(() => {
- ignoreEventsTimer = null
- }, 800 * multiplier)
+ // Prevent pinch zoom from zooming the page
+ if (event.ctrlKey) {
+ event.preventDefault()
+ event.stopPropagation()
+ app.canvas.processMouseWheel(event)
+ return
}
+
+ // Detect if this is likely a trackpad gesture vs mouse wheel
+ // Trackpads usually have deltaX or smaller deltaY values (< TRACKPAD_DETECTION_THRESHOLD)
+ // Mouse wheels typically have larger discrete deltaY values (>= TRACKPAD_DETECTION_THRESHOLD)
+ const isLikelyTrackpad =
+ Math.abs(deltaX) > 0 || Math.abs(deltaY) < TRACKPAD_DETECTION_THRESHOLD
+
+ // Trackpad gestures: when enabled, trackpad panning goes to canvas
+ if (gesturesEnabled && isLikelyTrackpad) {
+ event.preventDefault()
+ event.stopPropagation()
+ app.canvas.processMouseWheel(event)
+ return
+ }
+
+ // When gestures disabled: horizontal always goes to canvas (no horizontal scroll in textarea)
+ if (isHorizontal) {
+ event.preventDefault()
+ event.stopPropagation()
+ app.canvas.processMouseWheel(event)
+ return
+ }
+
+ // Vertical scrolling when gestures disabled: let textarea scroll if scrollable
+ if (canScrollY) {
+ event.stopPropagation()
+ return
+ }
+
+ // If textarea can't scroll vertically, pass to canvas
+ event.preventDefault()
+ app.canvas.processMouseWheel(event)
})
return widget
diff --git a/src/config/clientFeatureFlags.json b/src/config/clientFeatureFlags.json
index ebd6bcf60..84a233ccf 100644
--- a/src/config/clientFeatureFlags.json
+++ b/src/config/clientFeatureFlags.json
@@ -1,3 +1,3 @@
{
- "supports_preview_metadata": false
+ "supports_preview_metadata": true
}
diff --git a/src/constants/coreKeybindings.ts b/src/constants/coreKeybindings.ts
index 34f2cc39e..c61fd0b35 100644
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -68,12 +68,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
},
commandId: 'Comfy.OpenWorkflow'
},
- {
- combo: {
- key: 'Backspace'
- },
- commandId: 'Comfy.ClearWorkflow'
- },
{
combo: {
key: 'g',
@@ -181,5 +175,12 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
shift: true
},
commandId: 'Comfy.Graph.ConvertToSubgraph'
+ },
+ {
+ combo: {
+ key: 'm',
+ alt: true
+ },
+ commandId: 'Comfy.Canvas.ToggleMinimap'
}
]
diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index 12803be4c..943d4c8a2 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -35,7 +35,10 @@ export const CORE_SETTINGS: SettingParams[] = [
name: 'Action on link release (No modifier)',
type: 'combo',
options: Object.values(LinkReleaseTriggerAction),
- defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU
+ defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
+ defaultsByInstallVersion: {
+ '1.24.1': LinkReleaseTriggerAction.SEARCH_BOX
+ }
},
{
id: 'Comfy.LinkRelease.ActionShift',
@@ -43,7 +46,10 @@ export const CORE_SETTINGS: SettingParams[] = [
name: 'Action on link release (Shift)',
type: 'combo',
options: Object.values(LinkReleaseTriggerAction),
- defaultValue: LinkReleaseTriggerAction.SEARCH_BOX
+ defaultValue: LinkReleaseTriggerAction.SEARCH_BOX,
+ defaultsByInstallVersion: {
+ '1.24.1': LinkReleaseTriggerAction.CONTEXT_MENU
+ }
},
{
id: 'Comfy.NodeSearchBoxImpl.NodePreview',
@@ -505,15 +511,6 @@ export const CORE_SETTINGS: SettingParams[] = [
defaultValue: [] as string[],
versionAdded: '1.3.11'
},
- {
- id: 'Comfy.Validation.NodeDefs',
- name: 'Validate node definitions (slow)',
- type: 'boolean',
- tooltip:
- 'Recommended for node developers. This will validate all node definitions on startup.',
- defaultValue: false,
- versionAdded: '1.3.14'
- },
{
id: 'Comfy.LinkRenderMode',
category: ['LiteGraph', 'Graph', 'LinkRenderMode'],
@@ -785,6 +782,21 @@ export const CORE_SETTINGS: SettingParams[] = [
defaultValue: 0.6,
versionAdded: '1.9.1'
},
+ {
+ id: 'Comfy.Canvas.NavigationMode',
+ category: ['LiteGraph', 'Canvas', 'CanvasNavigationMode'],
+ name: 'Canvas Navigation Mode',
+ defaultValue: 'legacy',
+ type: 'combo',
+ options: [
+ { value: 'standard', text: 'Standard (New)' },
+ { value: 'legacy', text: 'Left-Click Pan (Legacy)' }
+ ],
+ versionAdded: '1.25.0',
+ defaultsByInstallVersion: {
+ '1.25.0': 'standard'
+ }
+ },
{
id: 'Comfy.Canvas.SelectionToolbox',
category: ['LiteGraph', 'Canvas', 'SelectionToolbox'],
@@ -812,6 +824,13 @@ export const CORE_SETTINGS: SettingParams[] = [
defaultValue: false,
versionAdded: '1.15.12'
},
+ {
+ id: 'Comfy.Minimap.Visible',
+ name: 'Display minimap on canvas',
+ type: 'hidden',
+ defaultValue: true,
+ versionAdded: '1.25.0'
+ },
{
id: 'Comfy.Workflow.AutoSaveDelay',
name: 'Auto Save Delay (ms)',
@@ -855,17 +874,6 @@ export const CORE_SETTINGS: SettingParams[] = [
versionAdded: '1.20.4',
versionModified: '1.20.5'
},
- {
- id: 'LiteGraph.Pointer.TrackpadGestures',
- category: ['LiteGraph', 'Pointer', 'Trackpad Gestures'],
- experimental: true,
- name: 'Enable trackpad gestures',
- tooltip:
- 'This setting enables trackpad mode for the canvas, allowing pinch-to-zoom and panning with two fingers.',
- type: 'boolean',
- defaultValue: false,
- versionAdded: '1.19.1'
- },
// Release data stored in settings
{
id: 'Comfy.Release.Version',
diff --git a/src/constants/supportedWorkflowFormats.ts b/src/constants/supportedWorkflowFormats.ts
index f00bd3f05..ac0bee186 100644
--- a/src/constants/supportedWorkflowFormats.ts
+++ b/src/constants/supportedWorkflowFormats.ts
@@ -6,8 +6,8 @@
* All supported image formats that can contain workflow data
*/
export const IMAGE_WORKFLOW_FORMATS = {
- extensions: ['.png', '.webp', '.svg'],
- mimeTypes: ['image/png', 'image/webp', 'image/svg+xml']
+ extensions: ['.png', '.webp', '.svg', '.avif'],
+ mimeTypes: ['image/png', 'image/webp', 'image/svg+xml', 'image/avif']
}
/**
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index 800255af1..7aa714133 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -15,6 +15,7 @@ import {
} from '@/schemas/comfyWorkflowSchema'
import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
import { useDialogService } from '@/services/dialogService'
+import { useExecutionStore } from '@/stores/executionStore'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import { useToastStore } from '@/stores/toastStore'
import { useWidgetStore } from '@/stores/widgetStore'
@@ -1224,9 +1225,10 @@ export class GroupNodeHandler {
node.onDrawForeground = function (ctx) {
// @ts-expect-error fixme ts strict error
onDrawForeground?.apply?.(this, arguments)
+ const progressState = useExecutionStore().nodeProgressStates[this.id]
if (
- // @ts-expect-error fixme ts strict error
- +app.runningNodeId === this.id &&
+ progressState &&
+ progressState.state === 'running' &&
this.runningInternalNodeId !== null
) {
// @ts-expect-error fixme ts strict error
@@ -1340,6 +1342,7 @@ export class GroupNodeHandler {
this.node.onRemoved = function () {
// @ts-expect-error fixme ts strict error
onRemoved?.apply(this, arguments)
+ // api.removeEventListener('progress_state', progress_state)
api.removeEventListener('executing', executing)
api.removeEventListener('executed', executed)
}
diff --git a/src/extensions/core/maskEditorLayerFilenames.ts b/src/extensions/core/maskEditorLayerFilenames.ts
new file mode 100644
index 000000000..2e2f1bf98
--- /dev/null
+++ b/src/extensions/core/maskEditorLayerFilenames.ts
@@ -0,0 +1,29 @@
+export interface ImageLayerFilenames {
+ maskedImage: string
+ paint: string
+ paintedImage: string
+ paintedMaskedImage: string
+}
+
+const paintedMaskedImagePrefix = 'clipspace-painted-masked-'
+
+export const imageLayerFilenamesByTimestamp = (
+ timestamp: number
+): ImageLayerFilenames => ({
+ maskedImage: `clipspace-mask-${timestamp}.png`,
+ paint: `clipspace-paint-${timestamp}.png`,
+ paintedImage: `clipspace-painted-${timestamp}.png`,
+ paintedMaskedImage: `${paintedMaskedImagePrefix}${timestamp}.png`
+})
+
+export const imageLayerFilenamesIfApplicable = (
+ inputImageFilename: string
+): ImageLayerFilenames | undefined => {
+ const isPaintedMaskedImageFilename = inputImageFilename.startsWith(
+ paintedMaskedImagePrefix
+ )
+ if (!isPaintedMaskedImageFilename) return undefined
+ const suffix = inputImageFilename.slice(paintedMaskedImagePrefix.length)
+ const timestamp = parseInt(suffix.split('.')[0], 10)
+ return imageLayerFilenamesByTimestamp(timestamp)
+}
diff --git a/src/extensions/core/maskeditor.ts b/src/extensions/core/maskeditor.ts
index fa7f29f47..c07a3d84d 100644
--- a/src/extensions/core/maskeditor.ts
+++ b/src/extensions/core/maskeditor.ts
@@ -1,4 +1,5 @@
import { debounce } from 'lodash'
+import _ from 'lodash'
import { t } from '@/i18n'
@@ -7,7 +8,12 @@ import { app } from '../../scripts/app'
import { ComfyApp } from '../../scripts/app'
import { $el, ComfyDialog } from '../../scripts/ui'
import { getStorageValue, setStorageValue } from '../../scripts/utils'
+import { hexToRgb } from '../../utils/colorUtil'
import { ClipspaceDialog } from './clipspace'
+import {
+ imageLayerFilenamesByTimestamp,
+ imageLayerFilenamesIfApplicable
+} from './maskEditorLayerFilenames'
import { MaskEditorDialogOld } from './maskEditorOld'
var styles = `
@@ -42,6 +48,7 @@ var styles = `
backdrop-filter: blur(10px);
overflow: hidden;
user-select: none;
+ --mask-editor-top-bar-height: 44px;
}
#maskEditor_sidePanelContainer {
height: 100%;
@@ -55,13 +62,17 @@ var styles = `
height: 100%;
display: flex;
align-items: center;
- overflow-y: hidden;
+ overflow-y: auto;
width: 220px;
+ padding: 0 10px;
+ }
+ #maskEditor_sidePanelContent {
+ width: 100%;
}
#maskEditor_sidePanelShortcuts {
display: flex;
flex-direction: row;
- width: 200px;
+ width: 100%;
margin-top: 10px;
gap: 10px;
justify-content: center;
@@ -82,7 +93,7 @@ var styles = `
display: flex;
flex-direction: column;
gap: 10px;
- width: 200px;
+ width: 100%;
padding: 10px;
}
.maskEditor_sidePanelTitle {
@@ -171,12 +182,12 @@ var styles = `
display: flex;
flex-direction: column;
gap: 10px;
- width: 200px;
+ width: 100%;
align-items: center;
}
.maskEditor_sidePanelLayer {
display: flex;
- width: 200px;
+ width: 100%;
height: 50px;
}
.maskEditor_sidePanelLayerVisibilityContainer {
@@ -314,7 +325,7 @@ var styles = `
display: flex;
flex-direction: column;
gap: 10px;
- width: 200px;
+ width: 100%;
padding: 10px;
}
#canvasBackground {
@@ -329,10 +340,10 @@ var styles = `
margin-top: 10px;
}
.maskEditor_sidePanelSeparator {
- width: 200px;
+ width: 100%;
height: 2px;
background: var(--border-color);
- margin-top: 5px;
+ margin-top: 1.5em;
margin-bottom: 5px;
}
#maskEditor_pointerZone {
@@ -364,14 +375,15 @@ var styles = `
}
#maskEditor_uiHorizontalContainer {
width: 100%;
- height: 100%;
+ height: calc(100% - var(--mask-editor-top-bar-height));
display: flex;
}
#maskEditor_topBar {
display: flex;
- height: 44px;
+ height: var(--mask-editor-top-bar-height);
align-items: center;
background: var(--comfy-menu-bg);
+ flex-shrink: 0;
}
#maskEditor_topBarTitle {
margin: 0;
@@ -385,7 +397,7 @@ var styles = `
margin-right: 0.5rem;
position: absolute;
right: 0;
- width: 200px;
+ width: 100%;
}
#maskEditor_topBarShortcutsContainer {
display: flex;
@@ -523,6 +535,7 @@ var styles = `
display: flex;
flex-direction: column;
gap: 12px;
+ padding-bottom: 12px;
}
.maskEditor_sidePanelContainerRow {
@@ -669,7 +682,7 @@ var styles = `
.maskEditor_layerRow {
height: 50px;
- width: 200px;
+ width: 100%;
border-radius: 10px;
}
@@ -747,10 +760,28 @@ enum BrushShape {
}
enum Tools {
- Pen = 'pen',
+ MaskPen = 'pen',
+ PaintPen = 'rgbPaint',
Eraser = 'eraser',
- PaintBucket = 'paintBucket',
- ColorSelect = 'colorSelect'
+ MaskBucket = 'paintBucket',
+ MaskColorFill = 'colorSelect'
+}
+
+const allTools = [
+ Tools.MaskPen,
+ Tools.PaintPen,
+ Tools.Eraser,
+ Tools.MaskBucket,
+ Tools.MaskColorFill
+]
+
+const allImageLayers = ['mask', 'rgb'] as const
+type ImageLayer = (typeof allImageLayers)[number]
+
+interface ToolInternalSettings {
+ container: HTMLElement
+ cursor?: string
+ newActiveLayerOnSet?: ImageLayer
}
enum CompositionOperation {
@@ -956,181 +987,138 @@ class MaskEditorDialog extends ComfyDialog {
}
async save() {
- const backupCanvas = document.createElement('canvas')
const imageCanvas = this.uiManager.getImgCanvas()
const maskCanvas = this.uiManager.getMaskCanvas()
+ const maskCanvasCtx = getCanvas2dContext(maskCanvas)
+ const paintCanvas = this.uiManager.getRgbCanvas()
const image = this.uiManager.getImage()
- const backupCtx = backupCanvas.getContext('2d', {
- willReadFrequently: true
- })
-
- backupCanvas.width = imageCanvas.width
- backupCanvas.height = imageCanvas.height
-
- if (!backupCtx) {
- return
- }
-
- // Ensure the mask image is fully loaded
- const maskImageLoaded = new Promise((resolve, reject) => {
- const maskImage = new Image()
- maskImage.src = maskCanvas.toDataURL()
- maskImage.onload = () => {
- resolve()
- }
- maskImage.onerror = (error) => {
- reject(error)
- }
- })
try {
- await maskImageLoaded
+ await ensureImageFullyLoaded(maskCanvas.toDataURL())
} catch (error) {
console.error('Error loading mask image:', error)
return
}
- backupCtx.clearRect(0, 0, backupCanvas.width, backupCanvas.height)
- backupCtx.drawImage(
- maskCanvas,
+ const unrefinedMaskImageData = maskCanvasCtx.getImageData(
0,
0,
maskCanvas.width,
- maskCanvas.height,
- 0,
- 0,
- backupCanvas.width,
- backupCanvas.height
+ maskCanvas.height
)
- let maskHasContent = false
- const maskData = backupCtx.getImageData(
- 0,
- 0,
- backupCanvas.width,
- backupCanvas.height
+ const refinedMaskOnlyData = new ImageData(
+ removeImageRgbValuesAndInvertAlpha(unrefinedMaskImageData.data),
+ unrefinedMaskImageData.width,
+ unrefinedMaskImageData.height
)
- for (let i = 0; i < maskData.data.length; i += 4) {
- if (maskData.data[i + 3] !== 0) {
- maskHasContent = true
- break
- }
+ // We create an undisplayed copy so as not to alter the original--displayed--canvas
+ const [refinedMaskCanvas, refinedMaskCanvasCtx] =
+ createCanvasCopy(maskCanvas)
+ refinedMaskCanvasCtx.globalCompositeOperation =
+ CompositionOperation.SourceOver
+ refinedMaskCanvasCtx.putImageData(refinedMaskOnlyData, 0, 0)
+
+ const timestamp = Math.round(performance.now())
+ const filenames = imageLayerFilenamesByTimestamp(timestamp)
+ const refs = {
+ maskedImage: toRef(filenames.maskedImage),
+ paint: toRef(filenames.paint),
+ paintedImage: toRef(filenames.paintedImage),
+ paintedMaskedImage: toRef(filenames.paintedMaskedImage)
}
- // paste mask data into alpha channel
- const backupData = backupCtx.getImageData(
- 0,
- 0,
- backupCanvas.width,
- backupCanvas.height
- )
+ const [paintedImageCanvas] = combineOriginalImageAndPaint({
+ originalImage: imageCanvas,
+ paint: paintCanvas
+ })
- let backupHasContent = false
- for (let i = 0; i < backupData.data.length; i += 4) {
- if (backupData.data[i + 3] !== 0) {
- backupHasContent = true
- break
- }
- }
+ replaceClipspaceImages(refs.paintedMaskedImage, [refs.paint])
- if (maskHasContent && !backupHasContent) {
- console.error('Mask appears to be empty')
- alert('Cannot save empty mask')
- return
- }
-
- // refine mask image
- for (let i = 0; i < backupData.data.length; i += 4) {
- const alpha = backupData.data[i + 3]
- backupData.data[i] = 0
- backupData.data[i + 1] = 0
- backupData.data[i + 2] = 0
- backupData.data[i + 3] = 255 - alpha
- }
-
- backupCtx.globalCompositeOperation = CompositionOperation.SourceOver
- backupCtx.putImageData(backupData, 0, 0)
-
- const formData = new FormData()
- const filename = 'clipspace-mask-' + performance.now() + '.png'
-
- const item = {
- filename: filename,
- subfolder: 'clipspace',
- type: 'input'
- }
-
- if (ComfyApp?.clipspace?.widgets?.length) {
- const index = ComfyApp.clipspace.widgets.findIndex(
- (obj) => obj?.name === 'image'
- )
-
- if (index >= 0 && item !== undefined) {
- try {
- ComfyApp.clipspace.widgets[index].value = item
- } catch (err) {
- console.warn('Failed to set widget value:', err)
- }
- }
- }
-
- const dataURL = backupCanvas.toDataURL()
- const blob = this.dataURLToBlob(dataURL)
-
- let original_url = new URL(image.src)
-
- type Ref = { filename: string; subfolder?: string; type?: string }
+ const originalImageUrl = new URL(image.src)
this.uiManager.setBrushOpacity(0)
- const filenameRef = original_url.searchParams.get('filename')
- if (!filenameRef) {
- throw new Error('filename parameter is required')
- }
- const original_ref: Ref = {
- filename: filenameRef
+ const originalImageFilename = originalImageUrl.searchParams.get('filename')
+ if (!originalImageFilename)
+ throw new Error(
+ "Expected original image URL to have a `filename` query parameter, but couldn't find it."
+ )
+
+ const originalImageRef: Partial = {
+ filename: originalImageFilename,
+ subfolder: originalImageUrl.searchParams.get('subfolder') ?? undefined,
+ type: originalImageUrl.searchParams.get('type') ?? undefined
}
- let original_subfolder = original_url.searchParams.get('subfolder')
- if (original_subfolder) original_ref.subfolder = original_subfolder
+ const mkFormData = (
+ blob: Blob,
+ filename: string,
+ originalImageRefOverride?: Partial
+ ) => {
+ const formData = new FormData()
+ formData.append('image', blob, filename)
+ formData.append(
+ 'original_ref',
+ JSON.stringify(originalImageRefOverride ?? originalImageRef)
+ )
+ formData.append('type', 'input')
+ formData.append('subfolder', 'clipspace')
+ return formData
+ }
- let original_type = original_url.searchParams.get('type')
- if (original_type) original_ref.type = original_type
+ const canvasToFormData = (
+ canvas: HTMLCanvasElement,
+ filename: string,
+ originalImageRefOverride?: Partial
+ ) => {
+ const blob = this.dataURLToBlob(canvas.toDataURL())
+ return mkFormData(blob, filename, originalImageRefOverride)
+ }
- formData.append('image', blob, filename)
- formData.append('original_ref', JSON.stringify(original_ref))
- formData.append('type', 'input')
- formData.append('subfolder', 'clipspace')
+ const formDatas = {
+ // Note: this canvas only contains mask data (no image), but during the upload process, the backend combines the mask with the original_image. Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
+ maskedImage: canvasToFormData(refinedMaskCanvas, filenames.maskedImage),
+ paint: canvasToFormData(paintCanvas, filenames.paint),
+ paintedImage: canvasToFormData(
+ paintedImageCanvas,
+ filenames.paintedImage
+ ),
+ paintedMaskedImage: canvasToFormData(
+ refinedMaskCanvas,
+ filenames.paintedMaskedImage,
+ refs.paintedImage
+ )
+ }
this.uiManager.setSaveButtonText(t('g.saving'))
this.uiManager.setSaveButtonEnabled(false)
this.keyboardManager.removeListeners()
- // Retry mechanism
- const maxRetries = 3
- let attempt = 0
- let success = false
+ try {
+ await this.uploadMask(
+ refs.maskedImage,
+ formDatas.maskedImage,
+ 'selectedIndex'
+ )
+ await this.uploadImage(refs.paint, formDatas.paint)
+ await this.uploadImage(refs.paintedImage, formDatas.paintedImage, false)
- while (attempt < maxRetries && !success) {
- try {
- await this.uploadMask(item, formData)
- success = true
- } catch (error) {
- console.error(`Upload attempt ${attempt + 1} failed:`, error)
- attempt++
- if (attempt < maxRetries) {
- console.log('Retrying upload...')
- } else {
- console.log('Max retries reached. Upload failed.')
- }
- }
- }
+ // IMPORTANT: We using `uploadMask` here, because the backend combines the mask with the painted image during the upload process. We do NOT want to combine the mask with the original image on the frontend, because the spec for CanvasRenderingContext2D does not allow for setting pixels to transparent while preserving their RGB values.
+ // See:
+ // It is possible that WebGL contexts can achieve this, but WebGL is extremely complex, and the backend functionality is here for this purpose!
+ // Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
+ await this.uploadMask(
+ refs.paintedMaskedImage,
+ formDatas.paintedMaskedImage,
+ 'combinedIndex'
+ )
- if (success) {
ComfyApp.onClipspaceEditorSave()
this.destroy()
- } else {
+ } catch (error) {
+ console.error('Error during upload:', error)
this.uiManager.setSaveButtonText(t('g.save'))
this.uiManager.setSaveButtonEnabled(true)
this.keyboardManager.addListeners()
@@ -1154,46 +1142,36 @@ class MaskEditorDialog extends ComfyDialog {
return new Blob([arrayBuffer], { type: contentType })
}
- private async uploadMask(
- filepath: { filename: string; subfolder: string; type: string },
+ private async uploadImage(
+ filepath: Ref,
formData: FormData,
- retries = 3
+ isPaintLayer = true
) {
- if (retries <= 0) {
- throw new Error('Max retries reached')
- return
- }
- await api
- .fetchApi('/upload/mask', {
+ const success = await requestWithRetries(() =>
+ api.fetchApi('/upload/image', {
method: 'POST',
body: formData
})
- .then((response) => {
- if (!response.ok) {
- console.log('Failed to upload mask:', response)
- this.uploadMask(filepath, formData, retries - 1)
- }
- })
- .catch((error) => {
- console.error('Error:', error)
- })
+ )
+ if (!success) {
+ throw new Error('Upload failed.')
+ }
+ if (!isPaintLayer) {
+ ClipspaceDialog.invalidatePreview()
+ return success
+ }
try {
- const selectedIndex = ComfyApp.clipspace?.selectedIndex
- if (ComfyApp.clipspace?.imgs && selectedIndex !== undefined) {
+ const paintedIndex = ComfyApp.clipspace?.paintedIndex
+ if (ComfyApp.clipspace?.imgs && paintedIndex !== undefined) {
// Create and set new image
const newImage = new Image()
- newImage.src = api.apiURL(
- '/view?' +
- new URLSearchParams(filepath).toString() +
- app.getPreviewFormatParam() +
- app.getRandParam()
- )
- ComfyApp.clipspace.imgs[selectedIndex] = newImage
+ newImage.src = mkFileUrl({ ref: filepath, preview: true })
+ ComfyApp.clipspace.imgs[paintedIndex] = newImage
// Update images array if it exists
if (ComfyApp.clipspace.images) {
- ComfyApp.clipspace.images[selectedIndex] = filepath
+ ComfyApp.clipspace.images[paintedIndex] = filepath
}
}
} catch (err) {
@@ -1201,6 +1179,46 @@ class MaskEditorDialog extends ComfyDialog {
}
ClipspaceDialog.invalidatePreview()
}
+
+ private async uploadMask(
+ filepath: Ref,
+ formData: FormData,
+ clipspaceLocation: 'selectedIndex' | 'combinedIndex'
+ ) {
+ const success = await requestWithRetries(() =>
+ api.fetchApi('/upload/mask', {
+ method: 'POST',
+ body: formData
+ })
+ )
+ if (!success) {
+ throw new Error('Upload failed.')
+ }
+
+ try {
+ const nameOfIndexToSaveTo = (
+ {
+ selectedIndex: 'selectedIndex',
+ combinedIndex: 'combinedIndex'
+ } as const
+ )[clipspaceLocation]
+ if (!nameOfIndexToSaveTo) return
+ const indexToSaveTo = ComfyApp.clipspace?.[nameOfIndexToSaveTo]
+ if (!ComfyApp.clipspace?.imgs || indexToSaveTo === undefined) return
+ // Create and set new image
+ const newImage = new Image()
+ newImage.src = mkFileUrl({ ref: filepath, preview: true })
+ ComfyApp.clipspace.imgs[indexToSaveTo] = newImage
+
+ // Update images array if it exists
+ if (ComfyApp.clipspace.images) {
+ ComfyApp.clipspace.images[indexToSaveTo] = filepath
+ }
+ } catch (err) {
+ console.warn('Failed to update clipspace image:', err)
+ }
+ ClipspaceDialog.invalidatePreview()
+ }
}
class CanvasHistory {
@@ -1210,7 +1228,9 @@ class CanvasHistory {
private canvas!: HTMLCanvasElement
private ctx!: CanvasRenderingContext2D
- private states: ImageData[] = []
+ private rgbCanvas!: HTMLCanvasElement
+ private rgbCtx!: CanvasRenderingContext2D
+ private states: { mask: ImageData; rgb: ImageData }[] = []
private currentStateIndex: number = -1
private maxStates: number = 20
private initialized: boolean = false
@@ -1225,6 +1245,8 @@ class CanvasHistory {
private async pullCanvas() {
this.canvas = await this.messageBroker.pull('maskCanvas')
this.ctx = await this.messageBroker.pull('maskCtx')
+ this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
+ this.rgbCtx = await this.messageBroker.pull('rgbCtx')
}
private createListeners() {
@@ -1241,21 +1263,31 @@ class CanvasHistory {
async saveInitialState() {
await this.pullCanvas()
- if (!this.canvas.width || !this.canvas.height) {
+ if (
+ !this.canvas.width ||
+ !this.canvas.height ||
+ !this.rgbCanvas.width ||
+ !this.rgbCanvas.height
+ ) {
// Canvas not ready yet, defer initialization
requestAnimationFrame(() => this.saveInitialState())
return
}
this.clearStates()
- const state = this.ctx.getImageData(
+ const maskState = this.ctx.getImageData(
0,
0,
this.canvas.width,
this.canvas.height
)
-
- this.states.push(state)
+ const rgbState = this.rgbCtx.getImageData(
+ 0,
+ 0,
+ this.rgbCanvas.width,
+ this.rgbCanvas.height
+ )
+ this.states.push({ mask: maskState, rgb: rgbState })
this.currentStateIndex = 0
this.initialized = true
}
@@ -1268,13 +1300,19 @@ class CanvasHistory {
}
this.states = this.states.slice(0, this.currentStateIndex + 1)
- const state = this.ctx.getImageData(
+ const maskState = this.ctx.getImageData(
0,
0,
this.canvas.width,
this.canvas.height
)
- this.states.push(state)
+ const rgbState = this.rgbCtx.getImageData(
+ 0,
+ 0,
+ this.rgbCanvas.width,
+ this.rgbCanvas.height
+ )
+ this.states.push({ mask: maskState, rgb: rgbState })
this.currentStateIndex++
if (this.states.length > this.maxStates) {
@@ -1304,9 +1342,10 @@ class CanvasHistory {
}
}
- restoreState(state: ImageData) {
+ restoreState(state: { mask: ImageData; rgb: ImageData }) {
if (state && this.initialized) {
- this.ctx.putImageData(state, 0, 0)
+ this.ctx.putImageData(state.mask, 0, 0)
+ this.rgbCtx.putImageData(state.rgb, 0, 0)
}
}
}
@@ -2007,6 +2046,7 @@ class BrushTool {
smoothingCordsArray: Point[] = []
smoothingLastDrawTime!: Date
maskCtx: CanvasRenderingContext2D | null = null
+ rgbCtx: CanvasRenderingContext2D | null = null
initialDraw: boolean = true
brushStrokeCanvas: HTMLCanvasElement | null = null
@@ -2022,6 +2062,9 @@ class BrushTool {
maskEditor: MaskEditorDialog
messageBroker: MessageBroker
+ private rgbColor: string = '#FF0000' // Default color
+ private activeLayer: ImageLayer = 'mask'
+
constructor(maskEditor: MaskEditorDialog) {
this.maskEditor = maskEditor
this.messageBroker = maskEditor.getMessageBroker()
@@ -2065,10 +2108,17 @@ class BrushTool {
this.messageBroker.subscribe('setBrushShape', (type: BrushShape) =>
this.setBrushType(type)
)
+ this.messageBroker.subscribe(
+ 'setActiveLayer',
+ (layer: ImageLayer) => (this.activeLayer = layer)
+ )
this.messageBroker.subscribe(
'setBrushSmoothingPrecision',
(precision: number) => this.setBrushSmoothingPrecision(precision)
)
+ this.messageBroker.subscribe('setRGBColor', (color: string) => {
+ this.rgbColor = color
+ })
//brush adjustment
this.messageBroker.subscribe(
'brushAdjustmentStart',
@@ -2149,7 +2199,6 @@ class BrushTool {
compositionOp = CompositionOperation.SourceOver //pen
}
- //check if user wants to draw line or free draw
if (event.shiftKey && this.lineStartPoint) {
this.isDrawingLine = true
this.drawLine(this.lineStartPoint, coords_canvas, compositionOp)
@@ -2374,24 +2423,59 @@ class BrushTool {
private async draw_shape(point: Point, overrideOpacity?: number) {
const brushSettings: Brush = this.brushSettings
const maskCtx = this.maskCtx || (await this.messageBroker.pull('maskCtx'))
+ const rgbCtx = this.rgbCtx || (await this.messageBroker.pull('rgbCtx'))
const brushType = await this.messageBroker.pull('brushType')
const maskColor = await this.messageBroker.pull('getMaskColor')
const size = brushSettings.size
- const sliderOpacity = brushSettings.opacity
+ const brushSettingsSliderOpacity = brushSettings.opacity
const opacity =
- overrideOpacity == undefined ? sliderOpacity : overrideOpacity
+ overrideOpacity == undefined
+ ? brushSettingsSliderOpacity
+ : overrideOpacity
const hardness = brushSettings.hardness
-
const x = point.x
const y = point.y
-
// Extend the gradient radius beyond the brush size
const extendedSize = size * (2 - hardness)
- let gradient = maskCtx.createRadialGradient(x, y, 0, x, y, extendedSize)
-
const isErasing = maskCtx.globalCompositeOperation === 'destination-out'
+ const currentTool = await this.messageBroker.pull('currentTool')
+ // handle paint pen
+ if (
+ this.activeLayer === 'rgb' &&
+ (currentTool === Tools.Eraser || currentTool === Tools.PaintPen)
+ ) {
+ const rgbaColor = this.formatRgba(this.rgbColor, opacity)
+ let gradient = rgbCtx.createRadialGradient(x, y, 0, x, y, extendedSize)
+ if (hardness === 1) {
+ gradient.addColorStop(0, rgbaColor)
+ gradient.addColorStop(
+ 1,
+ this.formatRgba(this.rgbColor, brushSettingsSliderOpacity)
+ )
+ } else {
+ gradient.addColorStop(0, rgbaColor)
+ gradient.addColorStop(hardness, rgbaColor)
+ gradient.addColorStop(1, this.formatRgba(this.rgbColor, 0))
+ }
+ rgbCtx.fillStyle = gradient
+ rgbCtx.beginPath()
+ if (brushType === BrushShape.Rect) {
+ rgbCtx.rect(
+ x - extendedSize,
+ y - extendedSize,
+ extendedSize * 2,
+ extendedSize * 2
+ )
+ } else {
+ rgbCtx.arc(x, y, extendedSize, 0, Math.PI * 2, false)
+ }
+ rgbCtx.fill()
+ return
+ }
+
+ let gradient = maskCtx.createRadialGradient(x, y, 0, x, y, extendedSize)
if (hardness === 1) {
gradient.addColorStop(
0,
@@ -2450,15 +2534,28 @@ class BrushTool {
maskCtx.fill()
}
+ private formatRgba(hex: string, alpha: number): string {
+ const { r, g, b } = hexToRgb(hex)
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`
+ }
+
private async init_shape(compositionOperation: CompositionOperation) {
const maskBlendMode = await this.messageBroker.pull('maskBlendMode')
const maskCtx = this.maskCtx || (await this.messageBroker.pull('maskCtx'))
+ const rgbCtx = this.rgbCtx || (await this.messageBroker.pull('rgbCtx'))
+
maskCtx.beginPath()
+ rgbCtx.beginPath()
+
+ // For both contexts, set the composite operation based on the passed parameter
+ // This ensures right-click always works for erasing
if (compositionOperation == CompositionOperation.SourceOver) {
maskCtx.fillStyle = maskBlendMode
maskCtx.globalCompositeOperation = CompositionOperation.SourceOver
+ rgbCtx.globalCompositeOperation = CompositionOperation.SourceOver
} else if (compositionOperation == CompositionOperation.DestinationOut) {
maskCtx.globalCompositeOperation = CompositionOperation.DestinationOut
+ rgbCtx.globalCompositeOperation = CompositionOperation.DestinationOut
}
}
@@ -2541,8 +2638,10 @@ class UIManager {
private brush!: HTMLDivElement
private brushPreviewGradient!: HTMLDivElement
private maskCtx!: CanvasRenderingContext2D
+ private rgbCtx!: CanvasRenderingContext2D
private imageCtx!: CanvasRenderingContext2D
private maskCanvas!: HTMLCanvasElement
+ private rgbCanvas!: HTMLCanvasElement
private imgCanvas!: HTMLCanvasElement
private brushSettingsHTML!: HTMLDivElement
private paintBucketSettingsHTML!: HTMLDivElement
@@ -2562,13 +2661,28 @@ class UIManager {
private canvasBackground!: HTMLDivElement
private canvasContainer!: HTMLDivElement
private image!: HTMLImageElement
+ private paint_image!: HTMLImageElement
private imageURL!: URL
private darkMode: boolean = true
+ private maskLayerContainer: HTMLElement | null = null
+ private paintLayerContainer: HTMLElement | null = null
+
+ private createColorPicker(): HTMLInputElement {
+ const colorPicker = document.createElement('input')
+ colorPicker.type = 'color'
+ colorPicker.id = 'maskEditor_colorPicker'
+ colorPicker.value = '#FF0000' // Default color
+ colorPicker.addEventListener('input', (event) => {
+ const color = (event.target as HTMLInputElement).value
+ this.messageBroker.publish('setRGBColor', color)
+ })
+ return colorPicker
+ }
private maskEditor: MaskEditorDialog
private messageBroker: MessageBroker
- private mask_opacity: number = 1.0
+ private mask_opacity: number = 0.8
private maskBlendMode: MaskBlendMode = MaskBlendMode.Black
private zoomTextHTML!: HTMLSpanElement
@@ -2620,6 +2734,8 @@ class UIManager {
this.messageBroker.createPullTopic('maskCtx', async () => this.maskCtx)
this.messageBroker.createPullTopic('imageCtx', async () => this.imageCtx)
this.messageBroker.createPullTopic('imgCanvas', async () => this.imgCanvas)
+ this.messageBroker.createPullTopic('rgbCtx', async () => this.rgbCtx)
+ this.messageBroker.createPullTopic('rgbCanvas', async () => this.rgbCanvas)
this.messageBroker.createPullTopic(
'screenToCanvas',
async (coords: Point) => this.screenToCanvas(coords)
@@ -2681,22 +2797,32 @@ class UIManager {
const maskCanvas = document.createElement('canvas')
maskCanvas.id = 'maskCanvas'
+ const rgbCanvas = document.createElement('canvas')
+ rgbCanvas.id = 'rgbCanvas'
+
const canvas_background = document.createElement('div')
canvas_background.id = 'canvasBackground'
canvasContainer.appendChild(imgCanvas)
+ canvasContainer.appendChild(rgbCanvas)
canvasContainer.appendChild(maskCanvas)
canvasContainer.appendChild(canvas_background)
// prepare content
this.imgCanvas = imgCanvas!
+ this.rgbCanvas = rgbCanvas!
this.maskCanvas = maskCanvas!
this.canvasContainer = canvasContainer!
this.canvasBackground = canvas_background!
+
let maskCtx = maskCanvas!.getContext('2d', { willReadFrequently: true })
if (maskCtx) {
this.maskCtx = maskCtx
}
+ let rgbCtx = rgbCanvas.getContext('2d', { willReadFrequently: true })
+ if (rgbCtx) {
+ this.rgbCtx = rgbCtx
+ }
let imgCtx = imgCanvas!.getContext('2d', { willReadFrequently: true })
if (imgCtx) {
this.imageCtx = imgCtx
@@ -2706,11 +2832,15 @@ class UIManager {
//remove styling and move to css file
this.imgCanvas.style.position = 'absolute'
+ this.rgbCanvas.style.position = 'absolute'
this.maskCanvas.style.position = 'absolute'
this.imgCanvas.style.top = '200'
this.imgCanvas.style.left = '0'
+ this.rgbCanvas.style.top = this.imgCanvas.style.top
+ this.rgbCanvas.style.left = this.imgCanvas.style.left
+
this.maskCanvas.style.top = this.imgCanvas.style.top
this.maskCanvas.style.left = this.imgCanvas.style.left
@@ -2747,8 +2877,10 @@ class UIManager {
}
private async createSidePanel() {
- const side_panel = this.createContainer(true)
- side_panel.id = 'maskEditor_sidePanel'
+ const sidePanelWrapper = this.createContainer(true)
+ const side_panel = document.createElement('div')
+ sidePanelWrapper.id = 'maskEditor_sidePanel'
+ side_panel.id = 'maskEditor_sidePanelContent'
const brush_settings = await this.createBrushSettings()
brush_settings.id = 'maskEditor_brushSettings'
@@ -2771,8 +2903,9 @@ class UIManager {
side_panel.appendChild(color_select_settings)
side_panel.appendChild(separator)
side_panel.appendChild(image_layer_settings)
+ sidePanelWrapper.appendChild(side_panel)
- return side_panel
+ return sidePanelWrapper
}
private async createBrushSettings() {
@@ -2895,18 +3028,18 @@ class UIManager {
resetBrushSettingsButton.addEventListener('click', () => {
this.messageBroker.publish('setBrushShape', BrushShape.Arc)
- this.messageBroker.publish('setBrushSize', 10)
- this.messageBroker.publish('setBrushOpacity', 0.7)
+ this.messageBroker.publish('setBrushSize', 20)
+ this.messageBroker.publish('setBrushOpacity', 1)
this.messageBroker.publish('setBrushHardness', 1)
- this.messageBroker.publish('setBrushSmoothingPrecision', 10)
+ this.messageBroker.publish('setBrushSmoothingPrecision', 60)
circle_shape.style.background = 'var(--p-button-text-primary-color)'
square_shape.style.background = ''
- thicknesSliderObj.slider.value = '10'
- opacitySliderObj.slider.value = '0.7'
+ thicknesSliderObj.slider.value = '20'
+ opacitySliderObj.slider.value = '1'
hardnessSliderObj.slider.value = '1'
- brushSmoothingPrecisionSliderObj.slider.value = '10'
+ brushSmoothingPrecisionSliderObj.slider.value = '60'
this.setBrushBorderRadius()
this.updateBrushPreview()
@@ -2915,6 +3048,23 @@ class UIManager {
brush_settings_container.appendChild(brush_settings_title)
brush_settings_container.appendChild(resetBrushSettingsButton)
brush_settings_container.appendChild(brush_shape_outer_container)
+
+ // Create a new container for the color picker and its title
+ const color_picker_container = this.createContainer(true)
+
+ // Add the color picker title
+ const colorPickerTitle = document.createElement('span')
+ colorPickerTitle.innerText = 'Color Selector'
+ colorPickerTitle.classList.add('maskEditor_sidePanelSubTitle') // Mimic brush shape title style
+ color_picker_container.appendChild(colorPickerTitle)
+
+ // Add the color picker
+ const colorPicker = this.createColorPicker()
+ color_picker_container.appendChild(colorPicker)
+
+ // Add the color picker container to the main settings container
+ brush_settings_container.appendChild(color_picker_container)
+
brush_settings_container.appendChild(thicknesSliderObj.container)
brush_settings_container.appendChild(opacitySliderObj.container)
brush_settings_container.appendChild(hardnessSliderObj.container)
@@ -3058,6 +3208,78 @@ class UIManager {
return color_select_settings_container
}
+ activeLayer: 'mask' | 'rgb' = 'mask'
+ layerButtons: Record = {
+ mask: (() => {
+ const btn = document.createElement('button')
+ btn.style.fontSize = '12px'
+ return btn
+ })(),
+ rgb: (() => {
+ const btn = document.createElement('button')
+ btn.style.fontSize = '12px'
+ return btn
+ })()
+ }
+ updateButtonsVisibility() {
+ allImageLayers.forEach((layer) => {
+ const button = this.layerButtons[layer]
+ if (layer === this.activeLayer) {
+ button.style.opacity = '0.5'
+ button.disabled = true
+ } else {
+ button.style.opacity = '1'
+ button.disabled = false
+ }
+ })
+ }
+
+ async updateLayerButtonsForTool() {
+ const currentTool = await this.messageBroker.pull('currentTool')
+ const isEraserTool = currentTool === Tools.Eraser
+
+ // Show/hide buttons based on whether eraser tool is active
+ Object.values(this.layerButtons).forEach((button) => {
+ if (isEraserTool) {
+ button.style.display = 'block'
+ } else {
+ button.style.display = 'none'
+ }
+ })
+ }
+
+ async setActiveLayer(layer: 'mask' | 'rgb') {
+ this.messageBroker.publish('setActiveLayer', layer)
+ this.activeLayer = layer
+ this.updateButtonsVisibility()
+ const currentTool = await this.messageBroker.pull('currentTool')
+ const maskOnlyTools = [Tools.MaskPen, Tools.MaskBucket, Tools.MaskColorFill]
+ if (maskOnlyTools.includes(currentTool) && layer === 'rgb') {
+ this.setToolTo(Tools.PaintPen)
+ }
+ if (currentTool === Tools.PaintPen && layer === 'mask') {
+ this.setToolTo(Tools.MaskPen)
+ }
+ this.updateActiveLayerHighlight()
+ }
+
+ updateActiveLayerHighlight() {
+ // Remove blue border from all containers
+ if (this.maskLayerContainer) {
+ this.maskLayerContainer.style.border = 'none'
+ }
+ if (this.paintLayerContainer) {
+ this.paintLayerContainer.style.border = 'none'
+ }
+
+ // Add blue border to active layer container
+ if (this.activeLayer === 'mask' && this.maskLayerContainer) {
+ this.maskLayerContainer.style.border = '2px solid #007acc'
+ } else if (this.activeLayer === 'rgb' && this.paintLayerContainer) {
+ this.paintLayerContainer.style.border = '2px solid #007acc'
+ }
+ }
+
private async createImageLayerSettings() {
const accentColor = this.darkMode
? 'maskEditor_accent_bg_dark'
@@ -3069,10 +3291,29 @@ class UIManager {
t('maskEditor.Layers')
)
- const mask_layer_title = this.createContainerTitle(
- t('maskEditor.Mask Layer')
- )
+ // Add a new container for layer selection
+ const layer_selection_container = this.createContainer(false)
+ layer_selection_container.classList.add(accentColor)
+ layer_selection_container.classList.add('maskEditor_layerRow')
+ this.layerButtons.mask.innerText = 'Activate Layer'
+ this.layerButtons.mask.addEventListener('click', async () => {
+ this.setActiveLayer('mask')
+ })
+
+ this.layerButtons.rgb.innerText = 'Activate Layer'
+ this.layerButtons.rgb.addEventListener('click', async () => {
+ this.setActiveLayer('rgb')
+ })
+
+ // Initially hide the buttons (they'll be shown when eraser tool is selected)
+ this.layerButtons.mask.style.display = 'none'
+ this.layerButtons.rgb.style.display = 'none'
+
+ this.setActiveLayer('mask')
+
+ // 1. MASK LAYER CONTAINER
+ const mask_layer_title = this.createContainerTitle('Mask Layer')
const mask_layer_container = this.createContainer(false)
mask_layer_container.classList.add(accentColor)
mask_layer_container.classList.add('maskEditor_layerRow')
@@ -3087,7 +3328,7 @@ class UIManager {
if (!(event.target as HTMLInputElement)!.checked) {
this.maskCanvas.style.opacity = '0'
} else {
- this.maskCanvas.style.opacity = String(this.mask_opacity) //change name
+ this.maskCanvas.style.opacity = String(this.mask_opacity)
}
})
@@ -3096,17 +3337,32 @@ class UIManager {
'maskEditor_sidePanelLayerPreviewContainer'
)
mask_layer_image_container.innerHTML =
- ''
+ ''
+ // Add checkbox, image container, and activate button to mask layer container
+ mask_layer_container.appendChild(mask_layer_visibility_checkbox)
+ mask_layer_container.appendChild(mask_layer_image_container)
+ mask_layer_container.appendChild(this.layerButtons.mask)
+
+ // Store reference to container for highlighting
+ this.maskLayerContainer = mask_layer_container
+
+ // 2. MASK BLENDING OPTIONS CONTAINER
+ const mask_blending_options_title = this.createContainerTitle(
+ 'Mask Blending Options'
+ )
+ const mask_blending_options_container = this.createContainer(false)
+ // mask_blending_options_container.classList.add(accentColor)
+ mask_blending_options_container.classList.add('maskEditor_layerRow')
+ mask_blending_options_container.style.marginTop = '-9px'
+ mask_blending_options_container.style.marginBottom = '-6px'
var blending_options = ['black', 'white', 'negative']
-
const sidePanelDropdownAccent = this.darkMode
? 'maskEditor_sidePanelDropdown_dark'
: 'maskEditor_sidePanelDropdown_light'
var mask_layer_dropdown = document.createElement('select')
mask_layer_dropdown.classList.add(sidePanelDropdownAccent)
- mask_layer_dropdown.classList.add(sidePanelDropdownAccent)
blending_options.forEach((option) => {
var option_element = document.createElement('option')
option_element.value = option
@@ -3125,10 +3381,12 @@ class UIManager {
this.updateMaskColor()
})
- mask_layer_container.appendChild(mask_layer_visibility_checkbox)
- mask_layer_container.appendChild(mask_layer_image_container)
- mask_layer_container.appendChild(mask_layer_dropdown)
+ // Center the dropdown in its container
+ // mask_blending_options_container.style.display = 'flex'
+ // mask_blending_options_container.style.justifyContent = 'center'
+ mask_blending_options_container.appendChild(mask_layer_dropdown)
+ // 3. MASK OPACITY SLIDER
const mask_layer_opacity_sliderObj = this.createSlider(
t('maskEditor.Mask Opacity'),
0.0,
@@ -3148,21 +3406,55 @@ class UIManager {
)
this.maskOpacitySlider = mask_layer_opacity_sliderObj.slider
- const image_layer_title = this.createContainerTitle(
- t('maskEditor.Image Layer')
+ // 4. PAINT LAYER CONTAINER
+ const paint_layer_title = this.createContainerTitle('Paint Layer')
+ const paint_layer_container = this.createContainer(false)
+ paint_layer_container.classList.add(accentColor)
+ paint_layer_container.classList.add('maskEditor_layerRow')
+
+ const paint_layer_checkbox = document.createElement('input')
+ paint_layer_checkbox.setAttribute('type', 'checkbox')
+ paint_layer_checkbox.classList.add('maskEditor_sidePanelLayerCheckbox')
+ paint_layer_checkbox.checked = true
+ paint_layer_checkbox.addEventListener('change', (event) => {
+ if (!(event.target as HTMLInputElement)!.checked) {
+ this.rgbCanvas.style.opacity = '0'
+ } else {
+ this.rgbCanvas.style.opacity = '1'
+ }
+ })
+
+ const paint_layer_image_container = document.createElement('div')
+ paint_layer_image_container.classList.add(
+ 'maskEditor_sidePanelLayerPreviewContainer'
)
+ paint_layer_image_container.innerHTML = `
+
+ `
- const image_layer_container = this.createContainer(false)
- image_layer_container.classList.add(accentColor)
- image_layer_container.classList.add('maskEditor_layerRow')
+ paint_layer_container.appendChild(paint_layer_checkbox)
+ paint_layer_container.appendChild(paint_layer_image_container)
+ paint_layer_container.appendChild(this.layerButtons.rgb)
- const image_layer_visibility_checkbox = document.createElement('input')
- image_layer_visibility_checkbox.setAttribute('type', 'checkbox')
- image_layer_visibility_checkbox.classList.add(
+ // Store reference to container for highlighting
+ this.paintLayerContainer = paint_layer_container
+
+ // 5. BASE IMAGE LAYER CONTAINER
+ const base_image_layer_title = this.createContainerTitle('Base Image Layer')
+ const base_image_layer_container = this.createContainer(false)
+ base_image_layer_container.classList.add(accentColor)
+ base_image_layer_container.classList.add('maskEditor_layerRow')
+
+ const base_image_layer_visibility_checkbox = document.createElement('input')
+ base_image_layer_visibility_checkbox.setAttribute('type', 'checkbox')
+ base_image_layer_visibility_checkbox.classList.add(
'maskEditor_sidePanelLayerCheckbox'
)
- image_layer_visibility_checkbox.checked = true
- image_layer_visibility_checkbox.addEventListener('change', (event) => {
+ base_image_layer_visibility_checkbox.checked = true
+ base_image_layer_visibility_checkbox.addEventListener('change', (event) => {
if (!(event.target as HTMLInputElement)!.checked) {
this.imgCanvas.style.opacity = '0'
} else {
@@ -3170,35 +3462,51 @@ class UIManager {
}
})
- const image_layer_image_container = document.createElement('div')
- image_layer_image_container.classList.add(
+ const base_image_layer_image_container = document.createElement('div')
+ base_image_layer_image_container.classList.add(
'maskEditor_sidePanelLayerPreviewContainer'
)
- const image_layer_image = document.createElement('img')
- image_layer_image.id = 'maskEditor_sidePanelImageLayerImage'
- image_layer_image.src =
+ const base_image_layer_image = document.createElement('img')
+ base_image_layer_image.id = 'maskEditor_sidePanelImageLayerImage'
+ base_image_layer_image.src =
ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src ??
''
- this.sidebarImage = image_layer_image
+ this.sidebarImage = base_image_layer_image
- image_layer_image_container.appendChild(image_layer_image)
+ base_image_layer_image_container.appendChild(base_image_layer_image)
- image_layer_container.appendChild(image_layer_visibility_checkbox)
- image_layer_container.appendChild(image_layer_image_container)
+ base_image_layer_container.appendChild(base_image_layer_visibility_checkbox)
+ base_image_layer_container.appendChild(base_image_layer_image_container)
+ // APPEND ALL CONTAINERS IN ORDER
image_layer_settings_container.appendChild(image_layer_settings_title)
- image_layer_settings_container.appendChild(mask_layer_title)
- image_layer_settings_container.appendChild(mask_layer_container)
image_layer_settings_container.appendChild(
mask_layer_opacity_sliderObj.container
)
- image_layer_settings_container.appendChild(image_layer_title)
- image_layer_settings_container.appendChild(image_layer_container)
+ image_layer_settings_container.appendChild(mask_blending_options_title)
+ image_layer_settings_container.appendChild(mask_blending_options_container)
+ image_layer_settings_container.appendChild(mask_layer_title)
+ image_layer_settings_container.appendChild(mask_layer_container)
+ image_layer_settings_container.appendChild(paint_layer_title)
+ image_layer_settings_container.appendChild(paint_layer_container)
+ image_layer_settings_container.appendChild(base_image_layer_title)
+ image_layer_settings_container.appendChild(base_image_layer_container)
+
+ // Initialize the active layer highlighting
+ this.updateActiveLayerHighlight()
+
+ // Initialize button visibility based on current tool
+ this.updateLayerButtonsForTool()
return image_layer_settings_container
}
+ // Method to be called when tool changes
+ async onToolChange() {
+ await this.updateLayerButtonsForTool()
+ }
+
private createHeadline(title: string) {
var headline = document.createElement('h3')
headline.classList.add('maskEditor_sidePanelTitle')
@@ -3236,7 +3544,6 @@ class UIManager {
) {
var slider_container = this.createContainer(true)
var slider_title = this.createContainerTitle(title)
-
var slider = document.createElement('input')
slider.classList.add('maskEditor_sidePanelBrushRange')
slider.setAttribute('type', 'range')
@@ -3392,6 +3699,7 @@ class UIManager {
this.maskCanvas.width,
this.maskCanvas.height
)
+ this.rgbCtx.clearRect(0, 0, this.rgbCanvas.width, this.rgbCanvas.height)
this.messageBroker.publish('saveState')
})
@@ -3427,6 +3735,56 @@ class UIManager {
return top_bar
}
+ toolElements: HTMLElement[] = []
+ toolSettings: Record = {
+ [Tools.MaskPen]: {
+ container: document.createElement('div'),
+ newActiveLayerOnSet: 'mask'
+ },
+ [Tools.Eraser]: {
+ container: document.createElement('div')
+ },
+ [Tools.PaintPen]: {
+ container: document.createElement('div'),
+ newActiveLayerOnSet: 'rgb'
+ },
+ [Tools.MaskBucket]: {
+ container: document.createElement('div'),
+ cursor: "url('/cursor/paintBucket.png') 30 25, auto",
+ newActiveLayerOnSet: 'mask'
+ },
+ [Tools.MaskColorFill]: {
+ container: document.createElement('div'),
+ cursor: "url('/cursor/colorSelect.png') 15 25, auto",
+ newActiveLayerOnSet: 'mask'
+ }
+ }
+
+ setToolTo(tool: Tools) {
+ this.messageBroker.publish('setTool', tool)
+ for (let toolElement of this.toolElements) {
+ if (toolElement != this.toolSettings[tool].container) {
+ toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
+ } else {
+ toolElement.classList.add('maskEditor_toolPanelContainerSelected')
+ this.brushSettingsHTML.style.display = 'flex'
+ this.colorSelectSettingsHTML.style.display = 'none'
+ this.paintBucketSettingsHTML.style.display = 'none'
+ }
+ }
+ this.messageBroker.publish('setTool', tool)
+ this.onToolChange()
+ const newActiveLayer = this.toolSettings[tool].newActiveLayerOnSet
+ if (newActiveLayer) {
+ this.setActiveLayer(newActiveLayer)
+ }
+ const cursor = this.toolSettings[tool].cursor
+ this.pointerZone.style.cursor = cursor ?? 'none'
+ if (cursor) {
+ this.brush.style.opacity = '0'
+ }
+ }
+
private createToolPanel() {
var tool_panel = document.createElement('div')
tool_panel.id = 'maskEditor_toolPanel'
@@ -3435,194 +3793,54 @@ class UIManager {
? 'maskEditor_toolPanelContainerDark'
: 'maskEditor_toolPanelContainerLight'
- var toolElements: HTMLElement[] = []
+ this.toolElements = []
+ // mask pen tool
+ const setupToolContainer = (tool: Tools) => {
+ this.toolSettings[tool].container = document.createElement('div')
+ this.toolSettings[tool].container.classList.add(
+ 'maskEditor_toolPanelContainer'
+ )
+ if (tool == Tools.MaskPen)
+ this.toolSettings[tool].container.classList.add(
+ 'maskEditor_toolPanelContainerSelected'
+ )
+ this.toolSettings[tool].container.classList.add(toolPanelHoverAccent)
+ this.toolSettings[tool].container.innerHTML = iconsHtml[tool]
+ this.toolElements.push(this.toolSettings[tool].container)
+ this.toolSettings[tool].container.addEventListener('click', () => {
+ this.setToolTo(tool)
+ })
+ const activeIndicator = document.createElement('div')
+ activeIndicator.classList.add('maskEditor_toolPanelIndicator')
+ this.toolSettings[tool].container.appendChild(activeIndicator)
+ tool_panel.appendChild(this.toolSettings[tool].container)
+ }
+ allTools.forEach(setupToolContainer)
- //brush tool
+ const setupZoomIndicatorContainer = () => {
+ var toolPanel_zoomIndicator = document.createElement('div')
+ toolPanel_zoomIndicator.classList.add('maskEditor_toolPanelZoomIndicator')
+ toolPanel_zoomIndicator.classList.add(toolPanelHoverAccent)
- var toolPanel_brushToolContainer = document.createElement('div')
- toolPanel_brushToolContainer.classList.add('maskEditor_toolPanelContainer')
- toolPanel_brushToolContainer.classList.add(
- 'maskEditor_toolPanelContainerSelected'
- )
- toolPanel_brushToolContainer.classList.add(toolPanelHoverAccent)
- toolPanel_brushToolContainer.innerHTML = `
-
- `
- toolElements.push(toolPanel_brushToolContainer)
+ var toolPanel_zoomText = document.createElement('span')
+ toolPanel_zoomText.id = 'maskEditor_toolPanelZoomText'
+ toolPanel_zoomText.innerText = '100%'
+ this.zoomTextHTML = toolPanel_zoomText
- toolPanel_brushToolContainer.addEventListener('click', () => {
- //move logic to tool manager
- this.messageBroker.publish('setTool', Tools.Pen)
- for (let toolElement of toolElements) {
- if (toolElement != toolPanel_brushToolContainer) {
- toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
- } else {
- toolElement.classList.add('maskEditor_toolPanelContainerSelected')
- this.brushSettingsHTML.style.display = 'flex'
- this.colorSelectSettingsHTML.style.display = 'none'
- this.paintBucketSettingsHTML.style.display = 'none'
- }
- }
- this.messageBroker.publish('setTool', Tools.Pen)
- this.pointerZone.style.cursor = 'none'
- })
+ var toolPanel_DimensionsText = document.createElement('span')
+ toolPanel_DimensionsText.id = 'maskEditor_toolPanelDimensionsText'
+ toolPanel_DimensionsText.innerText = ' '
+ this.dimensionsTextHTML = toolPanel_DimensionsText
- var toolPanel_brushToolIndicator = document.createElement('div')
- toolPanel_brushToolIndicator.classList.add('maskEditor_toolPanelIndicator')
+ toolPanel_zoomIndicator.appendChild(toolPanel_zoomText)
+ toolPanel_zoomIndicator.appendChild(toolPanel_DimensionsText)
- toolPanel_brushToolContainer.appendChild(toolPanel_brushToolIndicator)
-
- //eraser tool
-
- var toolPanel_eraserToolContainer = document.createElement('div')
- toolPanel_eraserToolContainer.classList.add('maskEditor_toolPanelContainer')
- toolPanel_eraserToolContainer.classList.add(toolPanelHoverAccent)
- toolPanel_eraserToolContainer.innerHTML = `
-
- `
- toolElements.push(toolPanel_eraserToolContainer)
-
- toolPanel_eraserToolContainer.addEventListener('click', () => {
- //move logic to tool manager
- this.messageBroker.publish('setTool', Tools.Eraser)
- for (let toolElement of toolElements) {
- if (toolElement != toolPanel_eraserToolContainer) {
- toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
- } else {
- toolElement.classList.add('maskEditor_toolPanelContainerSelected')
- this.brushSettingsHTML.style.display = 'flex'
- this.colorSelectSettingsHTML.style.display = 'none'
- this.paintBucketSettingsHTML.style.display = 'none'
- }
- }
- this.messageBroker.publish('setTool', Tools.Eraser)
- this.pointerZone.style.cursor = 'none'
- })
-
- var toolPanel_eraserToolIndicator = document.createElement('div')
- toolPanel_eraserToolIndicator.classList.add('maskEditor_toolPanelIndicator')
-
- toolPanel_eraserToolContainer.appendChild(toolPanel_eraserToolIndicator)
-
- //paint bucket tool
-
- var toolPanel_paintBucketToolContainer = document.createElement('div')
- toolPanel_paintBucketToolContainer.classList.add(
- 'maskEditor_toolPanelContainer'
- )
- toolPanel_paintBucketToolContainer.classList.add(toolPanelHoverAccent)
- toolPanel_paintBucketToolContainer.innerHTML = `
-
- `
- toolElements.push(toolPanel_paintBucketToolContainer)
-
- toolPanel_paintBucketToolContainer.addEventListener('click', () => {
- //move logic to tool manager
- this.messageBroker.publish('setTool', Tools.PaintBucket)
- for (let toolElement of toolElements) {
- if (toolElement != toolPanel_paintBucketToolContainer) {
- toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
- } else {
- toolElement.classList.add('maskEditor_toolPanelContainerSelected')
- this.brushSettingsHTML.style.display = 'none'
- this.colorSelectSettingsHTML.style.display = 'none'
- this.paintBucketSettingsHTML.style.display = 'flex'
- }
- }
- this.messageBroker.publish('setTool', Tools.PaintBucket)
- this.pointerZone.style.cursor =
- "url('/cursor/paintBucket.png') 30 25, auto"
- this.brush.style.opacity = '0'
- })
-
- var toolPanel_paintBucketToolIndicator = document.createElement('div')
- toolPanel_paintBucketToolIndicator.classList.add(
- 'maskEditor_toolPanelIndicator'
- )
-
- toolPanel_paintBucketToolContainer.appendChild(
- toolPanel_paintBucketToolIndicator
- )
-
- //color select tool
-
- var toolPanel_colorSelectToolContainer = document.createElement('div')
- toolPanel_colorSelectToolContainer.classList.add(
- 'maskEditor_toolPanelContainer'
- )
- toolPanel_colorSelectToolContainer.classList.add(toolPanelHoverAccent)
- toolPanel_colorSelectToolContainer.innerHTML = `
-
- `
- toolElements.push(toolPanel_colorSelectToolContainer)
- toolPanel_colorSelectToolContainer.addEventListener('click', () => {
- this.messageBroker.publish('setTool', 'colorSelect')
- for (let toolElement of toolElements) {
- if (toolElement != toolPanel_colorSelectToolContainer) {
- toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
- } else {
- toolElement.classList.add('maskEditor_toolPanelContainerSelected')
- this.brushSettingsHTML.style.display = 'none'
- this.paintBucketSettingsHTML.style.display = 'none'
- this.colorSelectSettingsHTML.style.display = 'flex'
- }
- }
- this.messageBroker.publish('setTool', Tools.ColorSelect)
- this.pointerZone.style.cursor =
- "url('/cursor/colorSelect.png') 15 25, auto"
- this.brush.style.opacity = '0'
- })
-
- var toolPanel_colorSelectToolIndicator = document.createElement('div')
- toolPanel_colorSelectToolIndicator.classList.add(
- 'maskEditor_toolPanelIndicator'
- )
- toolPanel_colorSelectToolContainer.appendChild(
- toolPanel_colorSelectToolIndicator
- )
-
- //zoom indicator
- var toolPanel_zoomIndicator = document.createElement('div')
- toolPanel_zoomIndicator.classList.add('maskEditor_toolPanelZoomIndicator')
- toolPanel_zoomIndicator.classList.add(toolPanelHoverAccent)
-
- var toolPanel_zoomText = document.createElement('span')
- toolPanel_zoomText.id = 'maskEditor_toolPanelZoomText'
- toolPanel_zoomText.innerText = '100%'
- this.zoomTextHTML = toolPanel_zoomText
-
- var toolPanel_DimensionsText = document.createElement('span')
- toolPanel_DimensionsText.id = 'maskEditor_toolPanelDimensionsText'
- toolPanel_DimensionsText.innerText = ' '
- this.dimensionsTextHTML = toolPanel_DimensionsText
-
- toolPanel_zoomIndicator.appendChild(toolPanel_zoomText)
- toolPanel_zoomIndicator.appendChild(toolPanel_DimensionsText)
-
- toolPanel_zoomIndicator.addEventListener('click', () => {
- this.messageBroker.publish('resetZoom')
- })
-
- tool_panel.appendChild(toolPanel_brushToolContainer)
- tool_panel.appendChild(toolPanel_eraserToolContainer)
- tool_panel.appendChild(toolPanel_paintBucketToolContainer)
- tool_panel.appendChild(toolPanel_colorSelectToolContainer)
- tool_panel.appendChild(toolPanel_zoomIndicator)
+ toolPanel_zoomIndicator.addEventListener('click', () => {
+ this.messageBroker.publish('resetZoom')
+ })
+ tool_panel.appendChild(toolPanel_zoomIndicator)
+ }
+ setupZoomIndicatorContainer()
return tool_panel
}
@@ -3674,14 +3892,25 @@ class UIManager {
}
async screenToCanvas(clientPoint: Point): Promise {
- // Get the bounding rectangles for both elements
+ // Get the zoom ratio
const zoomRatio = await this.messageBroker.pull('zoomRatio')
- const canvasRect = this.maskCanvas.getBoundingClientRect()
+
+ // Get the bounding rectangles for both canvases
+ const maskCanvasRect = this.maskCanvas.getBoundingClientRect()
+ const rgbCanvasRect = this.rgbCanvas.getBoundingClientRect()
+
+ // Check which canvas is currently being used for drawing
+ const currentTool = await this.messageBroker.pull('currentTool')
+ const isUsingRGBCanvas = currentTool === Tools.PaintPen
+
+ // Use the appropriate canvas rect based on the current tool
+ const canvasRect = isUsingRGBCanvas ? rgbCanvasRect : maskCanvasRect
// Calculate the offset between pointer zone and canvas
const offsetX = clientPoint.x - canvasRect.left + this.toolPanel.clientWidth
const offsetY = clientPoint.y - canvasRect.top + 44 // 44 is the height of the top menu
+ // Adjust for zoom ratio
const x = offsetX / zoomRatio
const y = offsetY / zoomRatio
@@ -3693,6 +3922,10 @@ class UIManager {
event.preventDefault()
})
+ this.rgbCanvas.addEventListener('contextmenu', (event: Event) => {
+ event.preventDefault()
+ })
+
this.rootElement.addEventListener('contextmenu', (event: Event) => {
event.preventDefault()
})
@@ -3725,32 +3958,56 @@ class UIManager {
const maskCtx = this.maskCtx
const maskCanvas = this.maskCanvas
+ const rgbCanvas = this.rgbCanvas
+
imgCtx!.clearRect(0, 0, this.imgCanvas.width, this.imgCanvas.height)
maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height)
- const alpha_url = new URL(
- ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src ??
- ''
- )
- alpha_url.searchParams.delete('channel')
- alpha_url.searchParams.delete('preview')
- alpha_url.searchParams.set('channel', 'a')
- let mask_image: HTMLImageElement = await this.loadImage(alpha_url)
+ const mainImageUrl =
+ ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src
// original image load
- if (
- !ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src
- ) {
+ if (!mainImageUrl) {
throw new Error(
'Unable to access image source - clipspace or image is null'
)
}
- const rgb_url = new URL(
- ComfyApp.clipspace.imgs[ComfyApp.clipspace.selectedIndex].src
- )
+ const mainImageFilename =
+ new URL(mainImageUrl).searchParams.get('filename') ?? undefined
+
+ const combinedImageFilename =
+ ComfyApp.clipspace?.combinedIndex !== undefined &&
+ ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace.combinedIndex]?.src
+ ? new URL(
+ ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
+ ).searchParams.get('filename')
+ : undefined
+
+ const imageLayerFilenames =
+ mainImageFilename !== undefined
+ ? imageLayerFilenamesIfApplicable(
+ combinedImageFilename ?? mainImageFilename
+ )
+ : undefined
+
+ const inputUrls = {
+ baseImagePlusMask: imageLayerFilenames?.maskedImage
+ ? mkFileUrl({ ref: toRef(imageLayerFilenames.maskedImage) })
+ : mainImageUrl,
+ paintLayer: imageLayerFilenames?.paint
+ ? mkFileUrl({ ref: toRef(imageLayerFilenames.paint) })
+ : undefined
+ }
+
+ const alpha_url = new URL(inputUrls.baseImagePlusMask)
+ alpha_url.searchParams.delete('channel')
+ alpha_url.searchParams.delete('preview')
+ alpha_url.searchParams.set('channel', 'a')
+ let mask_image: HTMLImageElement = await this.loadImage(alpha_url)
+
+ const rgb_url = new URL(inputUrls.baseImagePlusMask)
this.imageURL = rgb_url
- console.log(rgb_url)
rgb_url.searchParams.delete('channel')
rgb_url.searchParams.set('channel', 'rgb')
this.image = new Image()
@@ -3762,18 +4019,35 @@ class UIManager {
img.src = rgb_url.toString()
})
+ if (inputUrls.paintLayer) {
+ const paintURL = new URL(inputUrls.paintLayer)
+ this.paint_image = new Image()
+ this.paint_image = await new Promise(
+ (resolve, reject) => {
+ const img = new Image()
+ img.onload = () => resolve(img)
+ img.onerror = reject
+ img.src = paintURL.toString()
+ }
+ )
+ }
+
maskCanvas.width = this.image.width
maskCanvas.height = this.image.height
+ rgbCanvas.width = this.image.width
+ rgbCanvas.height = this.image.height
+
this.dimensionsTextHTML.innerText = `${this.image.width}x${this.image.height}`
- await this.invalidateCanvas(this.image, mask_image)
+ await this.invalidateCanvas(this.image, mask_image, this.paint_image)
this.messageBroker.publish('initZoomPan', [this.image, this.rootElement])
}
async invalidateCanvas(
orig_image: HTMLImageElement,
- mask_image: HTMLImageElement
+ mask_image: HTMLImageElement,
+ paint_image: HTMLImageElement
) {
this.imgCanvas.width = orig_image.width
this.imgCanvas.height = orig_image.height
@@ -3781,12 +4055,27 @@ class UIManager {
this.maskCanvas.width = orig_image.width
this.maskCanvas.height = orig_image.height
+ this.rgbCanvas.width = orig_image.width
+ this.rgbCanvas.height = orig_image.height
+
let imgCtx = this.imgCanvas.getContext('2d', { willReadFrequently: true })
let maskCtx = this.maskCanvas.getContext('2d', {
willReadFrequently: true
})
+ let rgbCtx = this.rgbCanvas.getContext('2d', {
+ willReadFrequently: true
+ })
imgCtx!.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height)
+ if (paint_image) {
+ rgbCtx!.drawImage(
+ paint_image,
+ 0,
+ 0,
+ paint_image.width,
+ paint_image.height
+ )
+ }
await this.prepare_mask(
mask_image,
this.maskCanvas,
@@ -3962,6 +4251,10 @@ class UIManager {
return this.imgCanvas
}
+ getRgbCanvas() {
+ return this.rgbCanvas
+ }
+
getImage() {
return this.image
}
@@ -4005,11 +4298,11 @@ class UIManager {
async updateCursor() {
const currentTool = await this.messageBroker.pull('currentTool')
- if (currentTool === Tools.PaintBucket) {
+ if (currentTool === Tools.MaskBucket) {
this.pointerZone.style.cursor =
"url('/cursor/paintBucket.png') 30 25, auto"
this.setBrushOpacity(0)
- } else if (currentTool === Tools.ColorSelect) {
+ } else if (currentTool === Tools.MaskColorFill) {
this.pointerZone.style.cursor =
"url('/cursor/colorSelect.png') 15 25, auto"
this.setBrushOpacity(0)
@@ -4036,7 +4329,7 @@ class ToolManager {
messageBroker: MessageBroker
mouseDownPoint: Point | null = null
- currentTool: Tools = Tools.Pen
+ currentTool: Tools = Tools.MaskPen
isAdjustingBrush: boolean = false // is user adjusting brush size or hardness with alt + right mouse button
constructor(maskEditor: MaskEditorDialog) {
@@ -4079,7 +4372,7 @@ class ToolManager {
setTool(tool: Tools) {
this.currentTool = tool
- if (tool != Tools.ColorSelect) {
+ if (tool != Tools.MaskColorFill) {
this.messageBroker.publish('clearLastPoint')
}
}
@@ -4101,8 +4394,21 @@ class ToolManager {
return
}
+ // RGB painting
+ if (this.currentTool === Tools.PaintPen && event.button === 0) {
+ this.messageBroker.publish('drawStart', event)
+ this.messageBroker.publish('saveState')
+ return
+ }
+
+ // RGB painting
+ if (this.currentTool === Tools.PaintPen && event.buttons === 1) {
+ this.messageBroker.publish('draw', event)
+ return
+ }
+
//paint bucket
- if (this.currentTool === Tools.PaintBucket && event.button === 0) {
+ if (this.currentTool === Tools.MaskBucket && event.button === 0) {
const offset = { x: event.offsetX, y: event.offsetY }
const coords_canvas = await this.messageBroker.pull(
'screenToCanvas',
@@ -4113,7 +4419,7 @@ class ToolManager {
return
}
- if (this.currentTool === Tools.ColorSelect && event.button === 0) {
+ if (this.currentTool === Tools.MaskColorFill && event.button === 0) {
const offset = { x: event.offsetX, y: event.offsetY }
const coords_canvas = await this.messageBroker.pull(
'screenToCanvas',
@@ -4130,7 +4436,9 @@ class ToolManager {
return
}
- var isDrawingTool = [Tools.Pen, Tools.Eraser].includes(this.currentTool)
+ var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
+ this.currentTool
+ )
//drawing
if ([0, 2].includes(event.button) && isDrawingTool) {
this.messageBroker.publish('drawStart', event)
@@ -4155,13 +4463,16 @@ class ToolManager {
//prevent drawing with other tools
- var isDrawingTool = [Tools.Pen, Tools.Eraser].includes(this.currentTool)
+ var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
+ this.currentTool
+ )
if (!isDrawingTool) return
// alt + right mouse button hold brush adjustment
if (
this.isAdjustingBrush &&
- (this.currentTool === Tools.Pen || this.currentTool === Tools.Eraser) &&
+ (this.currentTool === Tools.MaskPen ||
+ this.currentTool === Tools.Eraser) &&
event.altKey &&
event.buttons === 2
) {
@@ -4213,6 +4524,7 @@ class PanAndZoomManager {
canvasContainer: HTMLElement | null = null
maskCanvas: HTMLCanvasElement | null = null
+ rgbCanvas: HTMLCanvasElement | null = null
rootElement: HTMLElement | null = null
image: HTMLImageElement | null = null
@@ -4641,6 +4953,22 @@ class PanAndZoomManager {
left: `${this.pan_offset.x}px`,
top: `${this.pan_offset.y}px`
})
+
+ this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
+ if (this.rgbCanvas) {
+ // Ensure the canvas has the proper dimensions
+ if (
+ this.rgbCanvas.width !== this.image.width ||
+ this.rgbCanvas.height !== this.image.height
+ ) {
+ this.rgbCanvas.width = this.image.width
+ this.rgbCanvas.height = this.image.height
+ }
+
+ // Make sure the style dimensions match the container
+ this.rgbCanvas.style.width = `${raw_width}px`
+ this.rgbCanvas.style.height = `${raw_height}px`
+ }
}
private handlePanStart(event: PointerEvent) {
@@ -4711,6 +5039,7 @@ class MessageBroker {
this.createPushTopic('setBrushShape')
this.createPushTopic('initZoomPan')
this.createPushTopic('setTool')
+ this.createPushTopic('setActiveLayer')
this.createPushTopic('pointerDown')
this.createPushTopic('pointerMove')
this.createPushTopic('pointerUp')
@@ -4734,6 +5063,8 @@ class MessageBroker {
this.createPushTopic('setZoomText')
this.createPushTopic('resetZoom')
this.createPushTopic('invert')
+ this.createPushTopic('setRGBColor')
+ this.createPushTopic('paintedurl')
this.createPushTopic('setSelectionOpacity')
this.createPushTopic('setFillOpacity')
}
@@ -4850,6 +5181,7 @@ class MessageBroker {
class KeyboardManager {
private keysDown: string[] = []
+
// @ts-expect-error unused variable
private maskEditor: MaskEditorDialog
private messageBroker: MessageBroker
@@ -5005,12 +5337,23 @@ app.registerExtension({
selectedNode.previewMediaType !== 'image'
)
return
-
ComfyApp.copyToClipspace(selectedNode)
// @ts-expect-error clipspace_return_node is an extension property added at runtime
ComfyApp.clipspace_return_node = selectedNode
openMaskEditor()
}
+ },
+ {
+ id: 'Comfy.MaskEditor.BrushSize.Increase',
+ icon: 'pi pi-plus-circle',
+ label: 'Increase Brush Size in MaskEditor',
+ function: () => changeBrushSize((old) => _.clamp(old + 4, 1, 100))
+ },
+ {
+ id: 'Comfy.MaskEditor.BrushSize.Decrease',
+ icon: 'pi pi-minus-circle',
+ label: 'Decrease Brush Size in MaskEditor',
+ function: () => changeBrushSize((old) => _.clamp(old - 4, 1, 100))
}
],
init() {
@@ -5024,3 +5367,180 @@ app.registerExtension({
)
}
})
+
+const changeBrushSize = async (sizeChanger: (oldSize: number) => number) => {
+ if (!isOpened()) return
+ const maskEditor = MaskEditorDialog.getInstance()
+ if (!maskEditor) return
+ const messageBroker = maskEditor.getMessageBroker()
+ const oldBrushSize = (await messageBroker.pull('brushSettings')).size
+ const newBrushSize = sizeChanger(oldBrushSize)
+ messageBroker.publish('setBrushSize', newBrushSize)
+ messageBroker.publish('updateBrushPreview')
+}
+
+const requestWithRetries = async (
+ mkRequest: () => Promise,
+ maxRetries: number = 3
+): Promise<{ success: boolean }> => {
+ let attempt = 0
+ let success = false
+ while (attempt < maxRetries && !success) {
+ try {
+ const response = await mkRequest()
+ if (response.ok) {
+ success = true
+ } else {
+ console.log('Failed to upload mask:', response)
+ }
+ } catch (error) {
+ console.error(`Upload attempt ${attempt + 1} failed:`, error)
+ attempt++
+ if (attempt < maxRetries) {
+ console.log('Retrying upload...')
+ } else {
+ console.log('Max retries reached. Upload failed.')
+ }
+ }
+ }
+ return { success }
+}
+
+const isAlphaValue = (index: number) => index % 4 === 3
+
+const removeImageRgbValuesAndInvertAlpha = (imageData: Uint8ClampedArray) =>
+ imageData.map((val, i) => (isAlphaValue(i) ? 255 - val : 0))
+
+type Ref = { filename: string; subfolder?: string; type?: string }
+
+/**
+ * Note: the images' positions are important here. What the positions mean is hardcoded in `src/scripts/app.ts` in the `copyToClipspace` method.
+ * - `newMainOutput` should be the fully composited image: base image + mask (in the alpha channel) + paint.
+ * - The first array element of `extraImagesShownButNotOutputted` should be JUST the paint layer, with a transparent background.
+ * - It is possible to add more images in the clipspace array, but is not useful currently.
+ * With this configuration, the MaskEditor will properly load the paint layer separately from the base image, ensuring it is editable.
+ * */
+const replaceClipspaceImages = (
+ newMainOutput: Ref,
+ otherImagesInClipspace?: Ref[]
+) => {
+ try {
+ if (!ComfyApp?.clipspace?.widgets?.length) return
+ const firstImageWidgetIndex = ComfyApp.clipspace.widgets.findIndex(
+ (obj) => obj?.name === 'image'
+ )
+ const firstImageWidget = ComfyApp.clipspace.widgets[firstImageWidgetIndex]
+ if (!firstImageWidget) return
+
+ ComfyApp!.clipspace!.widgets![firstImageWidgetIndex].value = newMainOutput
+
+ otherImagesInClipspace?.forEach((extraImage, extraImageIndex) => {
+ const extraImageWidgetIndex = firstImageWidgetIndex + extraImageIndex + 1
+ ComfyApp!.clipspace!.widgets![extraImageWidgetIndex].value = extraImage
+ })
+ } catch (err) {
+ console.warn('Failed to set widget value:', err)
+ }
+}
+
+const ensureImageFullyLoaded = (src: string) =>
+ new Promise((resolve, reject) => {
+ const maskImage = new Image()
+ maskImage.src = src
+ maskImage.onload = () => resolve()
+ maskImage.onerror = reject
+ })
+
+const createCanvasCopy = (
+ canvas: HTMLCanvasElement
+): [HTMLCanvasElement, CanvasRenderingContext2D] => {
+ const newCanvas = document.createElement('canvas')
+ const newCanvasCtx = getCanvas2dContext(newCanvas)
+ newCanvas.width = canvas.width
+ newCanvas.height = canvas.height
+ newCanvasCtx.clearRect(0, 0, canvas.width, canvas.height)
+ newCanvasCtx.drawImage(
+ canvas,
+ 0,
+ 0,
+ canvas.width,
+ canvas.height,
+ 0,
+ 0,
+ canvas.width,
+ canvas.height
+ )
+ return [newCanvas, newCanvasCtx]
+}
+
+const getCanvas2dContext = (
+ canvas: HTMLCanvasElement
+): CanvasRenderingContext2D => {
+ const ctx = canvas.getContext('2d', { willReadFrequently: true })
+ // Safe with the way we use canvases
+ if (!ctx) throw new Error('Failed to get 2D context from canvas')
+ return ctx
+}
+
+const combineOriginalImageAndPaint = (
+ canvases: Record<'originalImage' | 'paint', HTMLCanvasElement>
+): [HTMLCanvasElement, CanvasRenderingContext2D] => {
+ const { originalImage, paint } = canvases
+ const [resultCanvas, resultCanvasCtx] = createCanvasCopy(originalImage)
+ resultCanvasCtx.drawImage(paint, 0, 0)
+ return [resultCanvas, resultCanvasCtx]
+}
+
+const iconsHtml: Record = {
+ [Tools.MaskPen]: `
+
+ `,
+ [Tools.Eraser]: `
+
+ `,
+ [Tools.MaskBucket]: `
+
+ `,
+ [Tools.MaskColorFill]: `
+
+ `,
+ [Tools.PaintPen]: `
+
+ `
+}
+
+const toRef = (filename: string): Ref => ({
+ filename,
+ subfolder: 'clipspace',
+ type: 'input'
+})
+
+const mkFileUrl = (props: { ref: Ref; preview?: boolean }) => {
+ const pathPlusQueryParams = api.apiURL(
+ '/view?' +
+ new URLSearchParams(props.ref).toString() +
+ app.getPreviewFormatParam() +
+ app.getRandParam()
+ )
+ const imageElement = new Image()
+ imageElement.src = pathPlusQueryParams
+ const fullyResolvedUrl = imageElement.src
+ return fullyResolvedUrl
+}
diff --git a/src/extensions/core/saveImageExtraOutput.ts b/src/extensions/core/saveImageExtraOutput.ts
index 3ea312997..77894303a 100644
--- a/src/extensions/core/saveImageExtraOutput.ts
+++ b/src/extensions/core/saveImageExtraOutput.ts
@@ -35,7 +35,7 @@ app.registerExtension({
// @ts-expect-error fixme ts strict error
widget.serializeValue = () => {
// @ts-expect-error fixme ts strict error
- return applyTextReplacements(app.graph.nodes, widget.value)
+ return applyTextReplacements(app.graph, widget.value)
}
return r
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index 94a16d04d..701fc0b5d 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -1,6 +1,11 @@
import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import type {
+ IBaseWidget,
+ IStringWidget
+} from '@comfyorg/litegraph/dist/types/widgets'
+import { MediaRecorder as ExtendableMediaRecorder } from 'extendable-media-recorder'
+import { useChainCallback } from '@/composables/functional/useChainCallback'
import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
import { useNodePaste } from '@/composables/node/useNodePaste'
@@ -8,7 +13,10 @@ import { t } from '@/i18n'
import type { ResultItemType } from '@/schemas/apiSchema'
import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
import type { DOMWidget } from '@/scripts/domWidget'
+import { useAudioService } from '@/services/audioService'
import { useToastStore } from '@/stores/toastStore'
+import { NodeLocatorId } from '@/types'
+import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
import { api } from '../../scripts/api'
import { app } from '../../scripts/app'
@@ -137,14 +145,27 @@ app.registerExtension({
audioUIWidget.element.classList.remove('empty-audio-widget')
}
}
+
+ audioUIWidget.onRemove = useChainCallback(
+ audioUIWidget.onRemove,
+ () => {
+ if (!audioUIWidget.element) return
+ audioUIWidget.element.pause()
+ audioUIWidget.element.src = ''
+ audioUIWidget.element.remove()
+ }
+ )
+
return { widget: audioUIWidget }
}
}
},
- onNodeOutputsUpdated(nodeOutputs: Record) {
- for (const [nodeId, output] of Object.entries(nodeOutputs)) {
- const node = app.graph.getNodeById(nodeId)
+ onNodeOutputsUpdated(nodeOutputs: Record) {
+ for (const [nodeLocatorId, output] of Object.entries(nodeOutputs)) {
if ('audio' in output) {
+ const node = getNodeByLocatorId(app.graph, nodeLocatorId)
+ if (!node) continue
+
// @ts-expect-error fixme ts strict error
const audioUIWidget = node.widgets.find(
(w) => w.name === 'audioUI'
@@ -241,3 +262,167 @@ app.registerExtension({
}
}
})
+
+app.registerExtension({
+ name: 'Comfy.RecordAudio',
+
+ getCustomWidgets() {
+ return {
+ AUDIO_RECORD(node, inputName: string) {
+ const audio = document.createElement('audio')
+ audio.controls = true
+ audio.classList.add('comfy-audio')
+ audio.setAttribute('name', 'media')
+
+ const audioUIWidget: DOMWidget =
+ node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
+
+ let mediaRecorder: MediaRecorder | null = null
+ let isRecording = false
+ let audioChunks: Blob[] = []
+ let currentStream: MediaStream | null = null
+ let recordWidget: IBaseWidget | null = null
+
+ let stopPromise: Promise | null = null
+ let stopResolve: (() => void) | null = null
+
+ audioUIWidget.serializeValue = async () => {
+ if (isRecording && mediaRecorder) {
+ stopPromise = new Promise((resolve) => {
+ stopResolve = resolve
+ })
+
+ mediaRecorder.stop()
+
+ await stopPromise
+ }
+
+ const audioSrc = audioUIWidget.element.src
+
+ if (!audioSrc) {
+ useToastStore().addAlert(t('g.noAudioRecorded'))
+ return ''
+ }
+
+ const blob = await fetch(audioSrc).then((r) => r.blob())
+
+ return await useAudioService().convertBlobToFileAndSubmit(blob)
+ }
+
+ recordWidget = node.addWidget(
+ 'button',
+ inputName,
+ '',
+ async () => {
+ if (!isRecording) {
+ try {
+ currentStream = await navigator.mediaDevices.getUserMedia({
+ audio: true
+ })
+
+ mediaRecorder = new ExtendableMediaRecorder(currentStream, {
+ mimeType: 'audio/wav'
+ }) as unknown as MediaRecorder
+
+ audioChunks = []
+
+ mediaRecorder.ondataavailable = (event) => {
+ audioChunks.push(event.data)
+ }
+
+ mediaRecorder.onstop = async () => {
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
+
+ useAudioService().stopAllTracks(currentStream)
+
+ if (
+ audioUIWidget.element.src &&
+ audioUIWidget.element.src.startsWith('blob:')
+ ) {
+ URL.revokeObjectURL(audioUIWidget.element.src)
+ }
+
+ audioUIWidget.element.src = URL.createObjectURL(audioBlob)
+
+ isRecording = false
+
+ if (recordWidget) {
+ recordWidget.label = t('g.startRecording')
+ }
+
+ if (stopResolve) {
+ stopResolve()
+ stopResolve = null
+ stopPromise = null
+ }
+ }
+
+ mediaRecorder.onerror = (event) => {
+ console.error('MediaRecorder error:', event)
+ useAudioService().stopAllTracks(currentStream)
+ isRecording = false
+
+ if (recordWidget) {
+ recordWidget.label = t('g.startRecording')
+ }
+
+ if (stopResolve) {
+ stopResolve()
+ stopResolve = null
+ stopPromise = null
+ }
+ }
+
+ mediaRecorder.start()
+ isRecording = true
+ if (recordWidget) {
+ recordWidget.label = t('g.stopRecording')
+ }
+ } catch (err) {
+ console.error('Error accessing microphone:', err)
+ useToastStore().addAlert(t('g.micPermissionDenied'))
+
+ if (mediaRecorder) {
+ try {
+ mediaRecorder.stop()
+ } catch {}
+ }
+ useAudioService().stopAllTracks(currentStream)
+ currentStream = null
+ isRecording = false
+ if (recordWidget) {
+ recordWidget.label = t('g.startRecording')
+ }
+ }
+ } else if (mediaRecorder && isRecording) {
+ mediaRecorder.stop()
+ }
+ },
+ { serialize: false }
+ )
+
+ recordWidget.label = t('g.startRecording')
+
+ const originalOnRemoved = node.onRemoved
+ node.onRemoved = function () {
+ if (isRecording && mediaRecorder) {
+ mediaRecorder.stop()
+ }
+ useAudioService().stopAllTracks(currentStream)
+ if (audioUIWidget.element.src?.startsWith('blob:')) {
+ URL.revokeObjectURL(audioUIWidget.element.src)
+ }
+ originalOnRemoved?.call(this)
+ }
+
+ return { widget: recordWidget }
+ }
+ }
+ },
+
+ async nodeCreated(node) {
+ if (node.constructor.comfyClass !== 'RecordAudio') return
+
+ await useAudioService().registerWavEncoder()
+ }
+})
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index daa28ce0a..fbc23b231 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -46,7 +46,7 @@ export class PrimitiveNode extends LGraphNode {
]
let v = this.widgets?.[0].value
if (v && this.properties[replacePropertyName]) {
- v = applyTextReplacements(app.graph.nodes, v as string)
+ v = applyTextReplacements(app.graph, v as string)
}
// For each output link copy our value over the original widget value
diff --git a/src/locales/en/commands.json b/src/locales/en/commands.json
index e505fa445..8e411e996 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "Canvas Toggle Lock"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "Canvas Toggle Minimap"
+ },
"Comfy_Canvas_ToggleSelected_Pin": {
"label": "Pin/Unpin Selected Items"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "Toggle the Custom Nodes Manager Progress Bar"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "Decrease Brush Size in MaskEditor"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "Increase Brush Size in MaskEditor"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "Open Mask Editor for Selected Node"
},
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 038143d96..242e7adba 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -98,6 +98,12 @@
"nodes": "Nodes",
"community": "Community",
"all": "All",
+ "versionMismatchWarning": "Version Compatibility Warning",
+ "versionMismatchWarningMessage": "{warning}: {detail} Visit https://docs.comfy.org/installation/update_comfyui#common-update-issues for update instructions.",
+ "frontendOutdated": "Frontend version {frontendVersion} is outdated. Backend requires {requiredVersion} or higher.",
+ "frontendNewer": "Frontend version {frontendVersion} may not be compatible with backend version {backendVersion}.",
+ "updateFrontend": "Update Frontend",
+ "dismiss": "Dismiss",
"update": "Update",
"updated": "Updated",
"resultsCount": "Found {count} Results",
@@ -135,7 +141,12 @@
"releaseTitle": "{package} {version} Release",
"progressCountOf": "of",
"keybindingAlreadyExists": "Keybinding already exists on",
- "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information."
+ "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
+ "startRecording": "Start Recording",
+ "stopRecording": "Stop Recording",
+ "micPermissionDenied": "Microphone permission denied",
+ "noAudioRecorded": "No audio recorded",
+ "nodesRunning": "nodes running"
},
"manager": {
"title": "Custom Nodes Manager",
@@ -463,7 +474,6 @@
"restart": "Restart"
},
"sideToolbar": {
- "themeToggle": "Toggle Theme",
"helpCenter": "Help Center",
"logout": "Logout",
"queue": "Queue",
@@ -565,7 +575,13 @@
"clipspace": "Open Clipspace",
"resetView": "Reset canvas view",
"clear": "Clear workflow",
- "toggleBottomPanel": "Toggle Bottom Panel"
+ "toggleBottomPanel": "Toggle Bottom Panel",
+ "theme": "Theme",
+ "dark": "Dark",
+ "light": "Light",
+ "manageExtensions": "Manage Extensions",
+ "settings": "Settings",
+ "help": "Help"
},
"tabMenu": {
"duplicateTab": "Duplicate Tab",
@@ -907,7 +923,8 @@
"fitView": "Fit View",
"selectMode": "Select Mode",
"panMode": "Pan Mode",
- "toggleLinkVisibility": "Toggle Link Visibility"
+ "toggleLinkVisibility": "Toggle Link Visibility",
+ "toggleMinimap": "Toggle Minimap"
},
"groupNode": {
"create": "Create group node",
@@ -984,6 +1001,7 @@
"Resize Selected Nodes": "Resize Selected Nodes",
"Canvas Toggle Link Visibility": "Canvas Toggle Link Visibility",
"Canvas Toggle Lock": "Canvas Toggle Lock",
+ "Canvas Toggle Minimap": "Canvas Toggle Minimap",
"Pin/Unpin Selected Items": "Pin/Unpin Selected Items",
"Bypass/Unbypass Selected Nodes": "Bypass/Unbypass Selected Nodes",
"Collapse/Expand Selected Nodes": "Collapse/Expand Selected Nodes",
@@ -1017,6 +1035,8 @@
"Install Missing Custom Nodes": "Install Missing Custom Nodes",
"Check for Custom Node Updates": "Check for Custom Node Updates",
"Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
+ "Decrease Brush Size in MaskEditor": "Decrease Brush Size in MaskEditor",
+ "Increase Brush Size in MaskEditor": "Increase Brush Size in MaskEditor",
"Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
"Unload Models": "Unload Models",
"Unload Models and Execution Cache": "Unload Models and Execution Cache",
@@ -1389,6 +1409,13 @@
"outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
"coreNodesFromVersion": "Requires ComfyUI {version}:"
},
+ "versionMismatchWarning": {
+ "title": "Version Compatibility Warning",
+ "frontendOutdated": "Frontend version {frontendVersion} is outdated. Backend requires version {requiredVersion} or higher.",
+ "frontendNewer": "Frontend version {frontendVersion} may not be compatible with backend version {backendVersion}.",
+ "updateFrontend": "Update Frontend",
+ "dismiss": "Dismiss"
+ },
"errorDialog": {
"defaultTitle": "An error occurred",
"loadWorkflowTitle": "Loading aborted due to error reloading workflow data",
@@ -1646,5 +1673,11 @@
"whatsNewPopup": {
"learnMore": "Learn more",
"noReleaseNotes": "No release notes available."
+ },
+ "breadcrumbsMenu": {
+ "duplicate": "Duplicate",
+ "clearWorkflow": "Clear Workflow",
+ "deleteWorkflow": "Delete Workflow",
+ "enterNewName": "Enter new name"
}
}
\ No newline at end of file
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 766cf071f..f642f69c8 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -29,6 +29,13 @@
"name": "Canvas background image",
"tooltip": "Image URL for the canvas background. You can right-click an image in the outputs panel and select \"Set as Background\" to use it, or upload your own image using the upload button."
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "Canvas Navigation Mode",
+ "options": {
+ "Standard (New)": "Standard (New)",
+ "Left-Click Pan (Legacy)": "Left-Click Pan (Legacy)"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "Show selection toolbox"
},
@@ -329,10 +336,6 @@
"Bottom": "Bottom"
}
},
- "Comfy_Validation_NodeDefs": {
- "name": "Validate node definitions (slow)",
- "tooltip": "Recommended for node developers. This will validate all node definitions on startup."
- },
"Comfy_Validation_Workflows": {
"name": "Validate workflows"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "Tooltip Delay"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "Enable trackpad gestures",
- "tooltip": "This setting enables trackpad mode for the canvas, allowing pinch-to-zoom and panning with two fingers."
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "Reroute spline offset",
"tooltip": "The bezier control point offset from the reroute centre point"
diff --git a/src/locales/es/commands.json b/src/locales/es/commands.json
index 58e6ee814..b832f542d 100644
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "Alternar bloqueo en lienzo"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "Lienzo Alternar Minimapa"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "Omitir/No omitir nodos seleccionados"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "Alternar diรกlogo de progreso del administrador"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "Disminuir tamaรฑo del pincel en MaskEditor"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "Aumentar tamaรฑo del pincel en MaskEditor"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "Abrir editor de mรกscara para el nodo seleccionado"
},
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 7655e51ba..c42543b89 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -82,6 +82,12 @@
"title": "Crea una cuenta"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "Limpiar flujo de trabajo",
+ "deleteWorkflow": "Eliminar flujo de trabajo",
+ "duplicate": "Duplicar",
+ "enterNewName": "Ingrese un nuevo nombre"
+ },
"chatHistory": {
"cancelEdit": "Cancelar",
"cancelEditTooltip": "Cancelar ediciรณn",
@@ -291,6 +297,7 @@
"devices": "Dispositivos",
"disableAll": "Deshabilitar todo",
"disabling": "Deshabilitando",
+ "dismiss": "Descartar",
"download": "Descargar",
"edit": "Editar",
"empty": "Vacรญo",
@@ -305,6 +312,8 @@
"filter": "Filtrar",
"findIssues": "Encontrar problemas",
"firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menรบ > Usar nuevo menรบ > Desactivado\" para restaurar la antigua interfaz.",
+ "frontendNewer": "La versiรณn del frontend {frontendVersion} puede no ser compatible con la versiรณn del backend {backendVersion}.",
+ "frontendOutdated": "La versiรณn del frontend {frontendVersion} estรก desactualizada. El backend requiere la versiรณn {requiredVersion} o superior.",
"goToNode": "Ir al nodo",
"help": "Ayuda",
"icon": "Icono",
@@ -326,17 +335,20 @@
"loadingPanel": "Cargando panel {panel}...",
"login": "Iniciar sesiรณn",
"logs": "Registros",
+ "micPermissionDenied": "Permiso de micrรณfono denegado",
"migrate": "Migrar",
"missing": "Faltante",
"name": "Nombre",
"newFolder": "Nueva carpeta",
"next": "Siguiente",
"no": "No",
+ "noAudioRecorded": "No se grabรณ audio",
"noResultsFound": "No se encontraron resultados",
"noTasksFound": "No se encontraron tareas",
"noTasksFoundMessage": "No hay tareas en la cola.",
"noWorkflowsFound": "No se encontraron flujos de trabajo.",
"nodes": "Nodos",
+ "nodesRunning": "nodos en ejecuciรณn",
"ok": "OK",
"openNewIssue": "Abrir nuevo problema",
"overwrite": "Sobrescribir",
@@ -370,7 +382,9 @@
"showReport": "Mostrar informe",
"sort": "Ordenar",
"source": "Fuente",
+ "startRecording": "Iniciar grabaciรณn",
"status": "Estado",
+ "stopRecording": "Detener grabaciรณn",
"success": "รxito",
"systemInfo": "Informaciรณn del sistema",
"terminal": "Terminal",
@@ -379,11 +393,14 @@
"unknownError": "Error desconocido",
"update": "Actualizar",
"updateAvailable": "Actualizaciรณn Disponible",
+ "updateFrontend": "Actualizar frontend",
"updated": "Actualizado",
"updating": "Actualizando",
"upload": "Subir",
"usageHint": "Sugerencia de uso",
"user": "Usuario",
+ "versionMismatchWarning": "Advertencia de compatibilidad de versiรณn",
+ "versionMismatchWarningMessage": "{warning}: {detail} Visita https://docs.comfy.org/installation/update_comfyui#common-update-issues para obtener instrucciones de actualizaciรณn.",
"videoFailedToLoad": "Fallรณ la carga del video",
"workflow": "Flujo de trabajo"
},
@@ -393,6 +410,7 @@
"resetView": "Restablecer vista",
"selectMode": "Modo de selecciรณn",
"toggleLinkVisibility": "Alternar visibilidad de enlace",
+ "toggleMinimap": "Alternar minimapa",
"zoomIn": "Acercar",
"zoomOut": "Alejar"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "El nรบmero de veces que la generaciรณn del flujo de trabajo debe ser encolada",
"clear": "Limpiar flujo de trabajo",
"clipspace": "Abrir Clipspace",
+ "dark": "Oscuro",
"disabled": "Deshabilitado",
"disabledTooltip": "El flujo de trabajo no se encolarรก automรกticamente",
"execute": "Ejecutar",
+ "help": "Ayuda",
"hideMenu": "Ocultar menรบ",
"instant": "Instantรกneo",
"instantTooltip": "El flujo de trabajo se encolarรก instantรกneamente despuรฉs de que finalice una generaciรณn",
"interrupt": "Cancelar ejecuciรณn actual",
+ "light": "Claro",
+ "manageExtensions": "Gestionar extensiones",
"onChange": "Al cambiar",
"onChangeTooltip": "El flujo de trabajo se encolarรก una vez que se haga un cambio",
"refresh": "Actualizar definiciones de nodos",
@@ -721,7 +743,9 @@
"run": "Ejecutar",
"runWorkflow": "Ejecutar flujo de trabajo (Shift para encolar al frente)",
"runWorkflowFront": "Ejecutar flujo de trabajo (Encolar al frente)",
+ "settings": "Configuraciรณn",
"showMenu": "Mostrar menรบ",
+ "theme": "Tema",
"toggleBottomPanel": "Alternar panel inferior"
},
"menuLabels": {
@@ -732,6 +756,8 @@
"Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",
"Canvas Toggle Lock": "Alternar bloqueo en lienzo",
"Check for Custom Node Updates": "Buscar Actualizaciones de Nodos Personalizados",
+ "Canvas Toggle Minimap": "Lienzo: Alternar minimapa",
+ "Check for Custom Node Updates": "Buscar actualizaciones de nodos personalizados",
"Check for Updates": "Buscar actualizaciones",
"Clear Pending Tasks": "Borrar tareas pendientes",
"Clear Workflow": "Borrar flujo de trabajo",
@@ -745,7 +771,9 @@
"Contact Support": "Contactar soporte",
"Convert Selection to Subgraph": "Convertir selecciรณn en subgrafo",
"Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
- "Custom Nodes (Legacy)": "Nodos Personalizados (Legado)",
+ "Custom Nodes (Legacy)": "Nodos personalizados (heredado)",
+ "Custom Nodes Manager": "Administrador de Nodos Personalizados",
+ "Decrease Brush Size in MaskEditor": "Disminuir tamaรฑo del pincel en MaskEditor",
"Delete Selected Items": "Eliminar elementos seleccionados",
"Desktop User Guide": "Guรญa de usuario de escritorio",
"Duplicate Current Workflow": "Duplicar flujo de trabajo actual",
@@ -758,6 +786,8 @@
"Group Selected Nodes": "Agrupar nodos seleccionados",
"Help": "Ayuda",
"Install Missing Custom Nodes": "Instalar Nodos Personalizados Faltantes",
+ "Increase Brush Size in MaskEditor": "Aumentar tamaรฑo del pincel en MaskEditor",
+ "Install Missing Custom Nodes": "Instalar nodos personalizados faltantes",
"Interrupt": "Interrumpir",
"Load Default Workflow": "Cargar flujo de trabajo predeterminado",
"Manage group nodes": "Gestionar nodos de grupo",
@@ -1175,7 +1205,6 @@
},
"showFlatList": "Mostrar lista plana"
},
- "themeToggle": "Cambiar tema",
"workflowTab": {
"confirmDelete": "ยฟEstรกs seguro de que quieres eliminar este flujo de trabajo?",
"confirmDeleteTitle": "ยฟEliminar flujo de trabajo?",
@@ -1599,6 +1628,13 @@
"prefix": "Debe comenzar con {prefix}",
"required": "Requerido"
},
+ "versionMismatchWarning": {
+ "dismiss": "Descartar",
+ "frontendNewer": "La versiรณn del frontend {frontendVersion} puede no ser compatible con la versiรณn del backend {backendVersion}.",
+ "frontendOutdated": "La versiรณn del frontend {frontendVersion} estรก desactualizada. El backend requiere la versiรณn {requiredVersion} o superior.",
+ "title": "Advertencia de compatibilidad de versiรณn",
+ "updateFrontend": "Actualizar frontend"
+ },
"welcome": {
"getStarted": "Empezar",
"title": "Bienvenido a ComfyUI"
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 12d7bf88d..b62c2ed57 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -29,6 +29,13 @@
"name": "Imagen de fondo del lienzo",
"tooltip": "URL de la imagen para el fondo del lienzo. Puedes hacer clic derecho en una imagen del panel de resultados y seleccionar \"Establecer como fondo\" para usarla."
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "Modo de navegaciรณn del lienzo",
+ "options": {
+ "Left-Click Pan (Legacy)": "Desplazamiento con clic izquierdo (Legado)",
+ "Standard (New)": "Estรกndar (Nuevo)"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "Mostrar caja de herramientas de selecciรณn"
},
@@ -329,10 +336,6 @@
},
"tooltip": "Posiciรณn de la barra de menรบ. En dispositivos mรณviles, el menรบ siempre se muestra en la parte superior."
},
- "Comfy_Validation_NodeDefs": {
- "name": "Validar definiciones de nodos (lento)",
- "tooltip": "Recomendado para desarrolladores de nodos. Esto validarรก todas las definiciones de nodos al iniciar."
- },
"Comfy_Validation_Workflows": {
"name": "Validar flujos de trabajo"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "Retraso de la informaciรณn sobre herramientas"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "Habilitar gestos del trackpad",
- "tooltip": "Esta configuraciรณn activa el modo trackpad para el lienzo, permitiendo hacer zoom con pellizco y desplazar con dos dedos."
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "Desvรญo de la compensaciรณn de la spline",
"tooltip": "El punto de control bezier desplazado desde el punto central de reenrutamiento"
diff --git a/src/locales/fr/commands.json b/src/locales/fr/commands.json
index 678fcabb9..0444b763d 100644
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "Basculer le verrouillage du canevas"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "Basculer la mini-carte du canevas"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "Contourner/Ne pas contourner les nลuds sรฉlectionnรฉs"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "Basculer la boรฎte de dialogue de progression"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "Rรฉduire la taille du pinceau dans MaskEditor"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "Augmenter la taille du pinceau dans MaskEditor"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "Ouvrir l'รฉditeur de masque pour le nลud sรฉlectionnรฉ"
},
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 83883640d..fd77f7455 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -82,6 +82,12 @@
"title": "Crรฉer un compte"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "Effacer le workflow",
+ "deleteWorkflow": "Supprimer le workflow",
+ "duplicate": "Dupliquer",
+ "enterNewName": "Entrez un nouveau nom"
+ },
"chatHistory": {
"cancelEdit": "Annuler",
"cancelEditTooltip": "Annuler la modification",
@@ -291,6 +297,7 @@
"devices": "Appareils",
"disableAll": "Dรฉsactiver tout",
"disabling": "Dรฉsactivation",
+ "dismiss": "Fermer",
"download": "Tรฉlรฉcharger",
"edit": "Modifier",
"empty": "Vide",
@@ -305,6 +312,8 @@
"filter": "Filtrer",
"findIssues": "Trouver des problรจmes",
"firstTimeUIMessage": "C'est la premiรจre fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Dรฉsactivรฉ\" pour restaurer l'ancienne interface utilisateur.",
+ "frontendNewer": "La version du frontend {frontendVersion} peut ne pas รชtre compatible avec la version du backend {backendVersion}.",
+ "frontendOutdated": "La version du frontend {frontendVersion} est obsolรจte. Le backend requiert la version {requiredVersion} ou supรฉrieure.",
"goToNode": "Aller au nลud",
"help": "Aide",
"icon": "Icรดne",
@@ -326,17 +335,20 @@
"loadingPanel": "Chargement du panneau {panel}...",
"login": "Connexion",
"logs": "Journaux",
+ "micPermissionDenied": "Permission du microphone refusรฉe",
"migrate": "Migrer",
"missing": "Manquant",
"name": "Nom",
"newFolder": "Nouveau dossier",
"next": "Suivant",
"no": "Non",
+ "noAudioRecorded": "Aucun audio enregistrรฉ",
"noResultsFound": "Aucun rรฉsultat trouvรฉ",
"noTasksFound": "Aucune tรขche trouvรฉe",
"noTasksFoundMessage": "Il n'y a pas de tรขches dans la file d'attente.",
"noWorkflowsFound": "Aucun flux de travail trouvรฉ.",
"nodes": "Nลuds",
+ "nodesRunning": "nลuds en cours dโexรฉcution",
"ok": "OK",
"openNewIssue": "Ouvrir un nouveau problรจme",
"overwrite": "รcraser",
@@ -370,7 +382,9 @@
"showReport": "Afficher le rapport",
"sort": "Trier",
"source": "Source",
+ "startRecording": "Commencer lโenregistrement",
"status": "Statut",
+ "stopRecording": "Arrรชter lโenregistrement",
"success": "Succรจs",
"systemInfo": "Informations systรจme",
"terminal": "Terminal",
@@ -379,11 +393,14 @@
"unknownError": "Erreur inconnue",
"update": "Mettre ร jour",
"updateAvailable": "Mise ร jour disponible",
+ "updateFrontend": "Mettre ร jour le frontend",
"updated": "Mis ร jour",
"updating": "Mise ร jour",
"upload": "Tรฉlรฉverser",
"usageHint": "Conseil d'utilisation",
"user": "Utilisateur",
+ "versionMismatchWarning": "Avertissement de compatibilitรฉ de version",
+ "versionMismatchWarningMessage": "{warning} : {detail} Consultez https://docs.comfy.org/installation/update_comfyui#common-update-issues pour les instructions de mise ร jour.",
"videoFailedToLoad": "รchec du chargement de la vidรฉo",
"workflow": "Flux de travail"
},
@@ -393,6 +410,7 @@
"resetView": "Rรฉinitialiser la vue",
"selectMode": "Mode sรฉlection",
"toggleLinkVisibility": "Basculer la visibilitรฉ des liens",
+ "toggleMinimap": "Afficher/Masquer la mini-carte",
"zoomIn": "Zoom avant",
"zoomOut": "Zoom arriรจre"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "Le nombre de fois que la gรฉnรฉration du flux de travail doit รชtre mise en file d'attente",
"clear": "Effacer le flux de travail",
"clipspace": "Ouvrir Clipspace",
+ "dark": "Sombre",
"disabled": "Dรฉsactivรฉ",
"disabledTooltip": "Le flux de travail ne sera pas mis en file d'attente automatiquement",
"execute": "Exรฉcuter",
+ "help": "Aide",
"hideMenu": "Masquer le menu",
"instant": "Instantanรฉ",
"instantTooltip": "Le flux de travail sera mis en file d'attente immรฉdiatement aprรจs la fin d'une gรฉnรฉration",
"interrupt": "Annuler l'exรฉcution en cours",
+ "light": "Clair",
+ "manageExtensions": "Gรฉrer les extensions",
"onChange": "Sur modification",
"onChangeTooltip": "Le flux de travail sera mis en file d'attente une fois une modification effectuรฉe",
"refresh": "Actualiser les dรฉfinitions des nลuds",
@@ -721,7 +743,9 @@
"run": "Exรฉcuter",
"runWorkflow": "Exรฉcuter le workflow (Maj pour mettre en file d'attente en premier)",
"runWorkflowFront": "Exรฉcuter le workflow (Mettre en file d'attente en premier)",
+ "settings": "Paramรจtres",
"showMenu": "Afficher le menu",
+ "theme": "Thรจme",
"toggleBottomPanel": "Basculer le panneau infรฉrieur"
},
"menuLabels": {
@@ -731,8 +755,9 @@
"Bypass/Unbypass Selected Nodes": "Contourner/Ne pas contourner les nลuds sรฉlectionnรฉs",
"Canvas Toggle Link Visibility": "Basculer la visibilitรฉ du lien de la toile",
"Canvas Toggle Lock": "Basculer le verrouillage de la toile",
+ "Canvas Toggle Minimap": "Basculer la mini-carte du canevas",
"Check for Custom Node Updates": "Vรฉrifier les mises ร jour des nลuds personnalisรฉs",
- "Check for Updates": "Vรฉrifier les Mises ร Jour",
+ "Check for Updates": "Vรฉrifier les mises ร jour",
"Clear Pending Tasks": "Effacer les tรขches en attente",
"Clear Workflow": "Effacer le flux de travail",
"Clipspace": "Espace de clip",
@@ -746,6 +771,8 @@
"Convert Selection to Subgraph": "Convertir la sรฉlection en sous-graphe",
"Convert selected nodes to group node": "Convertir les nลuds sรฉlectionnรฉs en nลud de groupe",
"Custom Nodes (Legacy)": "Nลuds personnalisรฉs (hรฉritage)",
+ "Custom Nodes Manager": "Gestionnaire de Nลuds Personnalisรฉs",
+ "Decrease Brush Size in MaskEditor": "Rรฉduire la taille du pinceau dans MaskEditor",
"Delete Selected Items": "Supprimer les รฉlรฉments sรฉlectionnรฉs",
"Desktop User Guide": "Guide de l'utilisateur de bureau",
"Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
@@ -757,6 +784,7 @@
"Give Feedback": "Donnez votre avis",
"Group Selected Nodes": "Grouper les nลuds sรฉlectionnรฉs",
"Help": "Aide",
+ "Increase Brush Size in MaskEditor": "Augmenter la taille du pinceau dans MaskEditor",
"Install Missing Custom Nodes": "Installer les nลuds personnalisรฉs manquants",
"Interrupt": "Interrompre",
"Load Default Workflow": "Charger le flux de travail par dรฉfaut",
@@ -1175,7 +1203,6 @@
},
"showFlatList": "Afficher la liste plate"
},
- "themeToggle": "Changer de thรจme",
"workflowTab": {
"confirmDelete": "รtes-vous sรปr de vouloir supprimer ce flux de travail ?",
"confirmDeleteTitle": "Supprimer le flux de travail ?",
@@ -1599,6 +1626,13 @@
"prefix": "Doit commencer par {prefix}",
"required": "Requis"
},
+ "versionMismatchWarning": {
+ "dismiss": "Ignorer",
+ "frontendNewer": "La version du frontend {frontendVersion} peut ne pas รชtre compatible avec la version du backend {backendVersion}.",
+ "frontendOutdated": "La version du frontend {frontendVersion} est obsolรจte. Le backend nรฉcessite la version {requiredVersion} ou supรฉrieure.",
+ "title": "Avertissement de compatibilitรฉ de version",
+ "updateFrontend": "Mettre ร jour le frontend"
+ },
"welcome": {
"getStarted": "Commencer",
"title": "Bienvenue sur ComfyUI"
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index f49862726..b27172ec2 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -29,6 +29,13 @@
"name": "Image de fond du canevas",
"tooltip": "URL de l'image pour le fond du canevas. Vous pouvez faire un clic droit sur une image dans le panneau de sortie et sรฉlectionner ยซ Dรฉfinir comme fond ยป pour l'utiliser."
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "Mode de navigation sur le canvas",
+ "options": {
+ "Left-Click Pan (Legacy)": "Panoramique clic gauche (Hรฉritรฉ)",
+ "Standard (New)": "Standard (Nouveau)"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "Afficher la boรฎte ร outils de sรฉlection"
},
@@ -329,10 +336,6 @@
},
"tooltip": "Position de la barre de menu. Sur les appareils mobiles, le menu est toujours affichรฉ en haut."
},
- "Comfy_Validation_NodeDefs": {
- "name": "Valider les dรฉfinitions de nลuds (lent)",
- "tooltip": "Recommandรฉ pour les dรฉveloppeurs de nลuds. Cela validera toutes les dรฉfinitions de nลuds au dรฉmarrage."
- },
"Comfy_Validation_Workflows": {
"name": "Valider les flux de travail"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "Dรฉlai d'infobulle"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "Activer les gestes du trackpad",
- "tooltip": "Ce paramรจtre active le mode trackpad pour le canevas, permettant le zoom par pincement et le dรฉplacement ร deux doigts."
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "Rรฉacheminement dรฉcalage de spline",
"tooltip": "Le point de contrรดle de Bรฉzier est dรฉcalรฉ par rapport au point central de rรฉacheminement"
diff --git a/src/locales/ja/commands.json b/src/locales/ja/commands.json
index f500b0f74..fd574d68d 100644
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "ใญใฃใณใในใฎใญใใฏใๅใๆฟใใ"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "ใญใฃใณใใน ใใใใใๅใๆฟใ"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "้ธๆใใใใผใใฎใใคใใน/ใใคใใน่งฃ้ค"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "ใใญใฐใฌในใใคใขใญใฐใฎๅใๆฟใ"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "ใในใฏใจใใฃใฟใงใใฉใทใตใคใบใ็ธฎๅฐ"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "ใในใฏใจใใฃใฟใงใใฉใทใตใคใบใๅคงใใใใ"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "้ธๆใใใใผใใฎใในใฏใจใใฃใฟใ้ใ"
},
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 5b3062d98..ce8836ce9 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -82,6 +82,12 @@
"title": "ใขใซใฆใณใใไฝๆใใ"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "ใฏใผใฏใใญใผใใฏใชใข",
+ "deleteWorkflow": "ใฏใผใฏใใญใผใๅ้ค",
+ "duplicate": "่ค่ฃฝ",
+ "enterNewName": "ๆฐใใๅๅใๅ
ฅๅ"
+ },
"chatHistory": {
"cancelEdit": "ใญใฃใณใปใซ",
"cancelEditTooltip": "็ทจ้ใใญใฃใณใปใซ",
@@ -291,6 +297,7 @@
"devices": "ใใใคใน",
"disableAll": "ใในใฆ็กๅนใซใใ",
"disabling": "็กๅนๅ",
+ "dismiss": "้ใใ",
"download": "ใใฆใณใญใผใ",
"edit": "็ทจ้",
"empty": "็ฉบ",
@@ -305,6 +312,8 @@
"filter": "ใใฃใซใฟ",
"findIssues": "ๅ้กใ่ฆใคใใ",
"firstTimeUIMessage": "ๆฐใใUIใๅใใฆไฝฟ็จใใฆใใพใใใใกใใฅใผ > ๆฐใใใกใใฅใผใไฝฟ็จ > ็กๅนใใ้ธๆใใใใจใงๅคใUIใซๆปใใใจใๅฏ่ฝใงใใ",
+ "frontendNewer": "ใใญใณใใจใณใใฎใใผใธใงใณ {frontendVersion} ใฏใใใฏใจใณใใฎใใผใธใงใณ {backendVersion} ใจไบๆๆงใใชใๅฏ่ฝๆงใใใใพใใ",
+ "frontendOutdated": "ใใญใณใใจใณใใฎใใผใธใงใณ {frontendVersion} ใฏๅคใใชใฃใฆใใพใใใใใฏใจใณใใฏ {requiredVersion} ไปฅไธใๅฟ
่ฆใงใใ",
"goToNode": "ใใผใใซ็งปๅ",
"help": "ใใซใ",
"icon": "ใขใคใณใณ",
@@ -326,17 +335,20 @@
"loadingPanel": "{panel} ใใใซใ่ชญใฟ่พผใฟไธญ...",
"login": "ใญใฐใคใณ",
"logs": "ใญใฐ",
+ "micPermissionDenied": "ใใคใฏใฎ่จฑๅฏใๆๅฆใใใพใใ",
"migrate": "็งป่กใใ",
"missing": "ไธ่ถณใใฆใใ",
"name": "ๅๅ",
"newFolder": "ๆฐใใใใฉใซใใผ",
"next": "ๆฌกใธ",
"no": "ใใใ",
+ "noAudioRecorded": "้ณๅฃฐใ้ฒ้ณใใใฆใใพใใ",
"noResultsFound": "็ตๆใ่ฆใคใใใพใใ",
"noTasksFound": "ใฟในใฏใ่ฆใคใใใพใใ",
"noTasksFoundMessage": "ใญใฅใผใซใฟในใฏใใใใพใใใ",
"noWorkflowsFound": "ใฏใผใฏใใญใผใ่ฆใคใใใพใใใ",
"nodes": "ใใผใ",
+ "nodesRunning": "ใใผใใๅฎ่กไธญ",
"ok": "OK",
"openNewIssue": "ๆฐใใๅ้กใ้ใ",
"overwrite": "ไธๆธใ",
@@ -370,7 +382,9 @@
"showReport": "ใฌใใผใใ่กจ็คบ",
"sort": "ไธฆใณๆฟใ",
"source": "ใฝใผใน",
+ "startRecording": "้ฒ้ณ้ๅง",
"status": "ในใใผใฟใน",
+ "stopRecording": "้ฒ้ณๅๆญข",
"success": "ๆๅ",
"systemInfo": "ใทในใใ ๆ
ๅ ฑ",
"terminal": "ใฟใผใใใซ",
@@ -379,11 +393,14 @@
"unknownError": "ไธๆใชใจใฉใผ",
"update": "ๆดๆฐ",
"updateAvailable": "ๆดๆฐใๅฉ็จๅฏ่ฝ",
+ "updateFrontend": "ใใญใณใใจใณใใๆดๆฐ",
"updated": "ๆดๆฐๆธใฟ",
"updating": "ๆดๆฐไธญ",
"upload": "ใขใใใญใผใ",
"usageHint": "ไฝฟ็จใใณใ",
"user": "ใฆใผใถใผ",
+ "versionMismatchWarning": "ใใผใธใงใณไบๆๆงใฎ่ญฆๅ",
+ "versionMismatchWarningMessage": "{warning}: {detail} ๆดๆฐๆ้ ใซใคใใฆใฏ https://docs.comfy.org/installation/update_comfyui#common-update-issues ใใ่ฆงใใ ใใใ",
"videoFailedToLoad": "ใใใชใฎ่ชญใฟ่พผใฟใซๅคฑๆใใพใใ",
"workflow": "ใฏใผใฏใใญใผ"
},
@@ -393,6 +410,7 @@
"resetView": "ใใฅใผใใชใปใใ",
"selectMode": "้ธๆใขใผใ",
"toggleLinkVisibility": "ใชใณใฏใฎ่กจ็คบๅใๆฟใ",
+ "toggleMinimap": "ใใใใใใฎๅใๆฟใ",
"zoomIn": "ๆกๅคง",
"zoomOut": "็ธฎๅฐ"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "ใฏใผใฏใใญใผ็ๆๅๆฐ",
"clear": "ใฏใผใฏใใญใผใใฏใชใข",
"clipspace": "ใฏใชใใในใใผในใ้ใ",
+ "dark": "ใใผใฏ",
"disabled": "็กๅน",
"disabledTooltip": "ใฏใผใฏใใญใผใฏ่ชๅ็ใซใญใฅใผใซ่ฟฝๅ ใใใพใใ",
"execute": "ๅฎ่ก",
+ "help": "ใใซใ",
"hideMenu": "ใกใใฅใผใ้ ใ",
"instant": "ๅณๆ",
"instantTooltip": "็ๆๅฎไบๅพใใใซใญใฅใผใซ่ฟฝๅ ",
"interrupt": "็พๅจใฎๅฎ่กใไธญๆญข",
+ "light": "ใฉใคใ",
+ "manageExtensions": "ๆกๅผตๆฉ่ฝใฎ็ฎก็",
"onChange": "ๅคๆดๆ",
"onChangeTooltip": "ๅคๆดใ่กใใใใจใฏใผใฏใใญใผใใญใฅใผใซ่ฟฝๅ ใใใพใ",
"refresh": "ใใผใใๆดๆฐ",
@@ -721,7 +743,9 @@
"run": "ๅฎ่กใใ",
"runWorkflow": "ใฏใผใฏใใญใผใๅฎ่กใใ (Shiftใงๅ
้ ญใซใญใฅใผ)",
"runWorkflowFront": "ใฏใผใฏใใญใผใๅฎ่กใใ (ๅ
้ ญใซใญใฅใผ)",
+ "settings": "่จญๅฎ",
"showMenu": "ใกใใฅใผใ่กจ็คบ",
+ "theme": "ใใผใ",
"toggleBottomPanel": "ไธ้จใใใซใๅใๆฟใ"
},
"menuLabels": {
@@ -731,8 +755,9 @@
"Bypass/Unbypass Selected Nodes": "้ธๆใใใใผใใฎใใคใใน/ใใคใใน่งฃ้ค",
"Canvas Toggle Link Visibility": "ใญใฃใณใในใฎใชใณใฏ่กจ็คบใๅใๆฟใ",
"Canvas Toggle Lock": "ใญใฃใณใในใฎใญใใฏใๅใๆฟใ",
+ "Canvas Toggle Minimap": "ใญใฃใณใใน ใใใใใใฎๅใๆฟใ",
"Check for Custom Node Updates": "ใซในใฟใ ใใผใใฎใขใใใใผใใ็ขบ่ช",
- "Check for Updates": "ๆดๆฐใ็ขบ่ช",
+ "Check for Updates": "ๆดๆฐใ็ขบ่ชใใ",
"Clear Pending Tasks": "ไฟ็ไธญใฎใฟในใฏใใฏใชใข",
"Clear Workflow": "ใฏใผใฏใใญใผใใฏใชใข",
"Clipspace": "ใฏใชใใในใใผใน",
@@ -746,6 +771,8 @@
"Convert Selection to Subgraph": "้ธๆ็ฏๅฒใใตใใฐใฉใใซๅคๆ",
"Convert selected nodes to group node": "้ธๆใใใใผใใใฐใซใผใใใผใใซๅคๆ",
"Custom Nodes (Legacy)": "ใซในใฟใ ใใผใ๏ผใฌใฌใทใผ๏ผ",
+ "Custom Nodes Manager": "ใซในใฟใ ใใผใใใใผใธใฃ",
+ "Decrease Brush Size in MaskEditor": "ใในใฏใจใใฃใฟใงใใฉใทใตใคใบใๅฐใใใใ",
"Delete Selected Items": "้ธๆใใใขใคใใ ใๅ้ค",
"Desktop User Guide": "ใในใฏใใใใฆใผใถใผใฌใคใ",
"Duplicate Current Workflow": "็พๅจใฎใฏใผใฏใใญใผใ่ค่ฃฝ",
@@ -757,6 +784,7 @@
"Give Feedback": "ใใฃใผใใใใฏใ้ใ",
"Group Selected Nodes": "้ธๆใใใใผใใใฐใซใผใๅ",
"Help": "ใใซใ",
+ "Increase Brush Size in MaskEditor": "ใในใฏใจใใฃใฟใงใใฉใทใตใคใบใๅคงใใใใ",
"Install Missing Custom Nodes": "ไธ่ถณใใฆใใใซในใฟใ ใใผใใใคใณในใใผใซ",
"Interrupt": "ไธญๆญ",
"Load Default Workflow": "ใใใฉใซใใฏใผใฏใใญใผใ่ชญใฟ่พผใ",
@@ -1175,7 +1203,6 @@
},
"showFlatList": "ใใฉใใใชในใใ่กจ็คบ"
},
- "themeToggle": "ใใผใใฎๅใๆฟใ",
"workflowTab": {
"confirmDelete": "ใใฎใฏใผใฏใใญใผใๅ้คใใฆใใใใใใงใใ๏ผ",
"confirmDeleteTitle": "ใฏใผใฏใใญใผใๅ้คใใพใใ๏ผ",
@@ -1599,6 +1626,13 @@
"prefix": "{prefix}ใงๅงใใๅฟ
่ฆใใใใพใ",
"required": "ๅฟ
้ "
},
+ "versionMismatchWarning": {
+ "dismiss": "้ใใ",
+ "frontendNewer": "ใใญใณใใจใณใใฎใใผใธใงใณ {frontendVersion} ใฏใใใใฏใจใณใใฎใใผใธใงใณ {backendVersion} ใจไบๆๆงใใชใๅฏ่ฝๆงใใใใพใใ",
+ "frontendOutdated": "ใใญใณใใจใณใใฎใใผใธใงใณ {frontendVersion} ใฏๅคใใชใฃใฆใใพใใใใใฏใจใณใใฏใใผใธใงใณ {requiredVersion} ไปฅไธใๅฟ
่ฆใงใใ",
+ "title": "ใใผใธใงใณไบๆๆงใฎ่ญฆๅ",
+ "updateFrontend": "ใใญใณใใจใณใใๆดๆฐ"
+ },
"welcome": {
"getStarted": "ใฏใใใ",
"title": "ComfyUIใธใใใใ"
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index 897db2680..46b239f15 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -29,6 +29,13 @@
"name": "ใญใฃใณใใน่ๆฏ็ปๅ",
"tooltip": "ใญใฃใณใในใฎ่ๆฏ็ปๅใฎURLใงใใๅบๅใใใซใง็ปๅใๅณใฏใชใใฏใใใ่ๆฏใจใใฆ่จญๅฎใใ้ธๆใใใจไฝฟ็จใงใใพใใ"
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "ใญใฃใณใในใใใฒใผใทใงใณใขใผใ",
+ "options": {
+ "Left-Click Pan (Legacy)": "ๅทฆใฏใชใใฏใใณ๏ผใฌใฌใทใผ๏ผ",
+ "Standard (New)": "ๆจๆบ๏ผๆฐ๏ผ"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "้ธๆใใผใซใใใฏในใ่กจ็คบ"
},
@@ -329,10 +336,6 @@
},
"tooltip": "ใกใใฅใผใใผใฎไฝ็ฝฎใใขใใคใซใใใคในใงใฏใใกใใฅใผใฏๅธธใซไธ้จใซ่กจ็คบใใใพใใ"
},
- "Comfy_Validation_NodeDefs": {
- "name": "ใใผใๅฎ็พฉใๆค่จผ๏ผ้
ใ๏ผ",
- "tooltip": "ใใผใ้็บ่
ใซๆจๅฅจใใใพใใใใใซใใใ่ตทๅๆใซใในใฆใฎใใผใๅฎ็พฉใๆค่จผใใใพใใ"
- },
"Comfy_Validation_Workflows": {
"name": "ใฏใผใฏใใญใผใๆค่จผ"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "ใใผใซใใใ้
ๅปถ"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "ใใฉใใฏใใใใธใงในใใฃใผใๆๅนใซใใ",
- "tooltip": "ใใฎ่จญๅฎใๆๅนใซใใใจใใญใฃใณใในใงใใฉใใฏใใใใขใผใใๆๅนใซใชใใใใณใใบใผใ ใ2ๆฌๆใงใฎใใณๆไฝใๅฏ่ฝใซใชใใพใใ"
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "ใชใซใผใในใใฉใคใณใชใใปใใ",
"tooltip": "ใชใซใผใไธญๅฟ็นใใใฎใใธใจๅถๅพก็นใฎใชใใปใใ"
diff --git a/src/locales/ko/commands.json b/src/locales/ko/commands.json
index 14b518a2e..30c2fcfbb 100644
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "์บ๋ฒ์ค ์ ๊ธ ํ ๊ธ"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "์บ๋ฒ์ค ๋ฏธ๋๋งต ์ ํ"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "์ ํํ ๋
ธ๋ ์ฐํ/์ฐํ ํด์ "
},
@@ -96,13 +99,13 @@
"label": "๋ณด๋ฅ ์ค์ธ ์์
์ง์ฐ๊ธฐ"
},
"Comfy_ClearWorkflow": {
- "label": "์ํฌํ๋ก ์ง์ฐ๊ธฐ"
+ "label": "์ํฌํ๋ก ๋ด์ฉ ์ง์ฐ๊ธฐ"
},
"Comfy_ContactSupport": {
"label": "์ง์ํ์ ๋ฌธ์ํ๊ธฐ"
},
"Comfy_DuplicateWorkflow": {
- "label": "ํ์ฌ ์ํฌํ๋ก์ฐ ๋ณต์ "
+ "label": "ํ์ฌ ์ํฌํ๋ก ๋ณต์ "
},
"Comfy_ExportWorkflow": {
"label": "์ํฌํ๋ก ๋ด๋ณด๋ด๊ธฐ"
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "์งํ ์ํฉ ๋ํ ์์ ์ ํ"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "๋ง์คํฌ ํธ์ง๊ธฐ์์ ๋ธ๋ฌ์ ํฌ๊ธฐ ์ค์ด๊ธฐ"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "๋ง์คํฌ ํธ์ง๊ธฐ์์ ๋ธ๋ฌ์ ํฌ๊ธฐ ๋๋ฆฌ๊ธฐ"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "์ ํํ ๋
ธ๋ ๋ง์คํฌ ํธ์ง๊ธฐ ์ด๊ธฐ"
},
@@ -225,7 +234,7 @@
"label": "๋ก๊ทธ์์"
},
"Workspace_CloseWorkflow": {
- "label": "ํ์ฌ ์ํฌํ๋ก์ฐ ๋ซ๊ธฐ"
+ "label": "ํ์ฌ ์ํฌํ๋ก ๋ซ๊ธฐ"
},
"Workspace_NextOpenedWorkflow": {
"label": "๋ค์ ์ด๋ฆฐ ์ํฌํ๋ก"
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index baf8b6000..32b0ef32a 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -5,7 +5,7 @@
"totalCost": "์ด ๋น์ฉ"
},
"apiNodesSignInDialog": {
- "message": "์ด ์ํฌํ๋ก์ฐ์๋ API ๋
ธ๋๊ฐ ํฌํจ๋์ด ์์ผ๋ฉฐ, ์คํํ๋ ค๋ฉด ๊ณ์ ์ ๋ก๊ทธ์ธํด์ผ ํฉ๋๋ค.",
+ "message": "์ด ์ํฌํ๋ก์๋ API ๋
ธ๋๊ฐ ํฌํจ๋์ด ์์ผ๋ฉฐ, ์คํํ๋ ค๋ฉด ๊ณ์ ์ ๋ก๊ทธ์ธํด์ผ ํฉ๋๋ค.",
"title": "API ๋
ธ๋ ์ฌ์ฉ์ ํ์ํ ๋ก๊ทธ์ธ"
},
"auth": {
@@ -82,6 +82,12 @@
"title": "๊ณ์ ์์ฑ"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "์ํฌํ๋ก ๋ด์ฉ ์ง์ฐ๊ธฐ",
+ "deleteWorkflow": "์ํฌํ๋ก ์ญ์ ",
+ "duplicate": "๋ณต์ ",
+ "enterNewName": "์ ์ด๋ฆ ์
๋ ฅ"
+ },
"chatHistory": {
"cancelEdit": "์ทจ์",
"cancelEditTooltip": "ํธ์ง ์ทจ์",
@@ -155,7 +161,7 @@
"time": "์๊ฐ",
"topUp": {
"buyNow": "์ง๊ธ ๊ตฌ๋งค",
- "insufficientMessage": "์ด ์ํฌํ๋ก์ฐ๋ฅผ ์คํํ๊ธฐ์ ํฌ๋ ๋ง์ด ๋ถ์กฑํฉ๋๋ค.",
+ "insufficientMessage": "์ด ์ํฌํ๋ก๋ฅผ ์คํํ๊ธฐ์ ํฌ๋ ๋ง์ด ๋ถ์กฑํฉ๋๋ค.",
"insufficientTitle": "ํฌ๋ ๋ง ๋ถ์กฑ",
"maxAmount": "(์ต๋ $1,000 USD)",
"quickPurchase": "๋น ๋ฅธ ๊ตฌ๋งค",
@@ -246,7 +252,7 @@
"errorDialog": {
"defaultTitle": "์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค",
"extensionFileHint": "๋ค์ ์คํฌ๋ฆฝํธ ๋๋ฌธ์ผ ์ ์์ต๋๋ค",
- "loadWorkflowTitle": "์ํฌํ๋ก์ฐ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๋ก๋ํ๋ ์ค ์ค๋ฅ๋ก ์ธํด ๋ก๋๊ฐ ์ค๋จ๋์์ต๋๋ค",
+ "loadWorkflowTitle": "์ํฌํ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๋ก๋ํ๋ ์ค ์ค๋ฅ๋ก ์ธํด ๋ก๋๊ฐ ์ค๋จ๋์์ต๋๋ค",
"noStackTrace": "์คํ ์ถ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค",
"promptExecutionError": "ํ๋กฌํํธ ์คํ ์คํจ"
},
@@ -291,6 +297,7 @@
"devices": "์ฅ์น",
"disableAll": "๋ชจ๋ ๋นํ์ฑํ",
"disabling": "๋นํ์ฑํ ์ค",
+ "dismiss": "๋ซ๊ธฐ",
"download": "๋ค์ด๋ก๋",
"edit": "ํธ์ง",
"empty": "๋น์ด ์์",
@@ -305,6 +312,8 @@
"filter": "ํํฐ",
"findIssues": "๋ฌธ์ ์ฐพ๊ธฐ",
"firstTimeUIMessage": "์ UI๋ฅผ ์ฒ์ ์ฌ์ฉํฉ๋๋ค. \"๋ฉ๋ด > ์ ๋ฉ๋ด ์ฌ์ฉ > ๋นํ์ฑํ\"๋ฅผ ์ ํํ์ฌ ์ด์ UI๋ก ๋ณต์ํ์ธ์.",
+ "frontendNewer": "ํ๋ก ํธ์๋ ๋ฒ์ {frontendVersion}์ด(๊ฐ) ๋ฐฑ์๋ ๋ฒ์ {backendVersion}๊ณผ(์) ํธํ๋์ง ์์ ์ ์์ต๋๋ค.",
+ "frontendOutdated": "ํ๋ก ํธ์๋ ๋ฒ์ {frontendVersion}์ด(๊ฐ) ์ค๋๋์์ต๋๋ค. ๋ฐฑ์๋๋ {requiredVersion} ์ด์์ด ํ์ํฉ๋๋ค.",
"goToNode": "๋
ธ๋๋ก ์ด๋",
"help": "๋์๋ง",
"icon": "์์ด์ฝ",
@@ -326,17 +335,20 @@
"loadingPanel": "{panel} ํจ๋ ๋ถ๋ฌ์ค๋ ์ค...",
"login": "๋ก๊ทธ์ธ",
"logs": "๋ก๊ทธ",
+ "micPermissionDenied": "๋ง์ดํฌ ๊ถํ์ด ๊ฑฐ๋ถ๋์์ต๋๋ค",
"migrate": "์ด์ (migrate)",
"missing": "๋๋ฝ๋จ",
"name": "์ด๋ฆ",
"newFolder": "์ ํด๋",
"next": "๋ค์",
"no": "์๋์ค",
+ "noAudioRecorded": "๋
น์๋ ์ค๋์ค๊ฐ ์์ต๋๋ค",
"noResultsFound": "๊ฒฐ๊ณผ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.",
"noTasksFound": "์์
์ ์ฐพ์ ์ ์์ต๋๋ค.",
"noTasksFoundMessage": "๋๊ธฐ์ด์ ์์
์ด ์์ต๋๋ค.",
"noWorkflowsFound": "์ํฌํ๋ก๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.",
"nodes": "๋
ธ๋",
+ "nodesRunning": "๋
ธ๋ ์คํ ์ค",
"ok": "ํ์ธ",
"openNewIssue": "์ ๋ฌธ์ ์ด๊ธฐ",
"overwrite": "๋ฎ์ด์ฐ๊ธฐ",
@@ -370,7 +382,9 @@
"showReport": "๋ณด๊ณ ์ ๋ณด๊ธฐ",
"sort": "์ ๋ ฌ",
"source": "์์ค",
+ "startRecording": "๋
น์ ์์",
"status": "์ํ",
+ "stopRecording": "๋
น์ ์ค์ง",
"success": "์ฑ๊ณต",
"systemInfo": "์์คํ
์ ๋ณด",
"terminal": "ํฐ๋ฏธ๋",
@@ -379,11 +393,14 @@
"unknownError": "์ ์ ์๋ ์ค๋ฅ",
"update": "์
๋ฐ์ดํธ",
"updateAvailable": "์
๋ฐ์ดํธ ๊ฐ๋ฅ",
+ "updateFrontend": "ํ๋ก ํธ์๋ ์
๋ฐ์ดํธ",
"updated": "์
๋ฐ์ดํธ ๋จ",
"updating": "์
๋ฐ์ดํธ ์ค",
"upload": "์
๋ก๋",
"usageHint": "์ฌ์ฉ ํํธ",
"user": "์ฌ์ฉ์",
+ "versionMismatchWarning": "๋ฒ์ ํธํ์ฑ ๊ฒฝ๊ณ ",
+ "versionMismatchWarningMessage": "{warning}: {detail} ์
๋ฐ์ดํธ ์ง์นจ์ https://docs.comfy.org/installation/update_comfyui#common-update-issues ๋ฅผ ๋ฐฉ๋ฌธํ์ธ์.",
"videoFailedToLoad": "๋น๋์ค๋ฅผ ๋ก๋ํ์ง ๋ชปํ์ต๋๋ค.",
"workflow": "์ํฌํ๋ก"
},
@@ -393,6 +410,7 @@
"resetView": "๋ณด๊ธฐ ์ฌ์ค์ ",
"selectMode": "์ ํ ๋ชจ๋",
"toggleLinkVisibility": "๋งํฌ ๊ฐ์์ฑ ์ ํ",
+ "toggleMinimap": "๋ฏธ๋๋งต ์ ํ",
"zoomIn": "ํ๋",
"zoomOut": "์ถ์"
},
@@ -624,7 +642,7 @@
"enabled": "ํ์ฑํ",
"nodePack": "๋
ธ๋ ํฉ"
},
- "inWorkflow": "์ํฌํ๋ก์ฐ ๋ด",
+ "inWorkflow": "์ํฌํ๋ก ๋ด",
"infoPanelEmpty": "์ ๋ณด๋ฅผ ๋ณด๋ ค๋ฉด ํญ๋ชฉ์ ํด๋ฆญํ์ธ์",
"installAllMissingNodes": "๋ชจ๋ ๋๋ฝ๋ ๋
ธ๋ ์ค์น",
"installSelected": "์ ํํ ํญ๋ชฉ ์ค์น",
@@ -707,21 +725,27 @@
"batchCountTooltip": "์ํฌํ๋ก ์์
์ ์คํ ๋๊ธฐ์ด์ ๋ฐ๋ณต ์ถ๊ฐํ ํ์",
"clear": "์ํฌํ๋ก ๋น์ฐ๊ธฐ",
"clipspace": "ํด๋ฆฝ์คํ์ด์ค ์ด๊ธฐ",
+ "dark": "๋คํฌ",
"disabled": "๋นํ์ฑํ๋จ",
"disabledTooltip": "์ํฌํ๋ก ์์
์ ์๋์ผ๋ก ์คํ ๋๊ธฐ์ด์ ์ถ๊ฐํ์ง ์์ต๋๋ค.",
"execute": "์คํ",
+ "help": "๋์๋ง",
"hideMenu": "๋ฉ๋ด ์จ๊ธฐ๊ธฐ",
"instant": "์ฆ์",
"instantTooltip": "์ํฌํ๋ก ์คํ์ด ์๋ฃ๋๋ฉด ์ฆ์ ์คํ ๋๊ธฐ์ด์ ์ถ๊ฐํฉ๋๋ค.",
"interrupt": "ํ์ฌ ์คํ ์ทจ์",
+ "light": "๋ผ์ดํธ",
+ "manageExtensions": "ํ์ฅ ํ๋ก๊ทธ๋จ ๊ด๋ฆฌ",
"onChange": "๋ณ๊ฒฝ ์",
"onChangeTooltip": "๋ณ๊ฒฝ์ด ์๋ ๊ฒฝ์ฐ์๋ง ์ํฌํ๋ก๋ฅผ ์คํ ๋๊ธฐ์ด์ ์ถ๊ฐํฉ๋๋ค.",
"refresh": "๋
ธ๋ ์ ์ ์๋ก ๊ณ ์นจ",
"resetView": "์บ๋ฒ์ค ๋ณด๊ธฐ ์ฌ์ค์ ",
"run": "์คํ",
- "runWorkflow": "์ํฌํ๋ก์ฐ ์คํ (์ํํธ ํค์ ํจ๊ป ํด๋ฆญ์ ๊ฐ์ฅ ๋จผ์ ์คํ)",
- "runWorkflowFront": "์ํฌํ๋ก์ฐ ์คํ (๊ฐ์ฅ ๋จผ์ ์คํ)",
+ "runWorkflow": "์ํฌํ๋ก ์คํ (์ํํธ ํค์ ํจ๊ป ํด๋ฆญ์ ๊ฐ์ฅ ๋จผ์ ์คํ)",
+ "runWorkflowFront": "์ํฌํ๋ก ์คํ (๊ฐ์ฅ ๋จผ์ ์คํ)",
+ "settings": "์ค์ ",
"showMenu": "๋ฉ๋ด ํ์",
+ "theme": "ํ
๋ง",
"toggleBottomPanel": "ํ๋จ ํจ๋ ์ ํ"
},
"menuLabels": {
@@ -731,6 +755,7 @@
"Bypass/Unbypass Selected Nodes": "์ ํํ ๋
ธ๋ ์ฐํ/์ฐํ ํด์ ",
"Canvas Toggle Link Visibility": "์บ๋ฒ์ค ํ ๊ธ ๋งํฌ ๊ฐ์์ฑ",
"Canvas Toggle Lock": "์บ๋ฒ์ค ํ ๊ธ ์ ๊ธ",
+ "Canvas Toggle Minimap": "์บ๋ฒ์ค ๋ฏธ๋๋งต ์ ํ",
"Check for Custom Node Updates": "์ปค์คํ
๋
ธ๋ ์
๋ฐ์ดํธ ํ์ธ",
"Check for Updates": "์
๋ฐ์ดํธ ํ์ธ",
"Clear Pending Tasks": "๋ณด๋ฅ ์ค์ธ ์์
์ ๊ฑฐํ๊ธฐ",
@@ -745,7 +770,9 @@
"Contact Support": "๊ณ ๊ฐ ์ง์ ๋ฌธ์",
"Convert Selection to Subgraph": "์ ํ ์์ญ์ ์๋ธ๊ทธ๋ํ๋ก ๋ณํ",
"Convert selected nodes to group node": "์ ํํ ๋
ธ๋๋ฅผ ๊ทธ๋ฃน ๋
ธ๋๋ก ๋ณํ",
- "Custom Nodes (Legacy)": "์ปค์คํ
๋
ธ๋ (๋ ๊ฑฐ์)",
+ "Custom Nodes (Legacy)": "์ปค์คํ
๋
ธ๋(๋ ๊ฑฐ์)",
+ "Custom Nodes Manager": "์ฌ์ฉ์ ์ ์ ๋
ธ๋ ๊ด๋ฆฌ์",
+ "Decrease Brush Size in MaskEditor": "๋ง์คํฌ ํธ์ง๊ธฐ์์ ๋ธ๋ฌ์ ํฌ๊ธฐ ์ค์ด๊ธฐ",
"Delete Selected Items": "์ ํํ ํญ๋ชฉ ์ญ์ ",
"Desktop User Guide": "๋ฐ์คํฌํฑ ์ฌ์ฉ์ ๊ฐ์ด๋",
"Duplicate Current Workflow": "ํ์ฌ ์ํฌํ๋ก ๋ณต์ ",
@@ -757,6 +784,7 @@
"Give Feedback": "ํผ๋๋ฐฑ ์ ๊ณต",
"Group Selected Nodes": "์ ํํ ๋
ธ๋ ๊ทธ๋ฃนํ",
"Help": "๋์๋ง",
+ "Increase Brush Size in MaskEditor": "๋ง์คํฌ ํธ์ง๊ธฐ์์ ๋ธ๋ฌ์ ํฌ๊ธฐ ๋๋ฆฌ๊ธฐ",
"Install Missing Custom Nodes": "๋๋ฝ๋ ์ปค์คํ
๋
ธ๋ ์ค์น",
"Interrupt": "์ค๋จ",
"Load Default Workflow": "๊ธฐ๋ณธ ์ํฌํ๋ก ๋ถ๋ฌ์ค๊ธฐ",
@@ -803,7 +831,7 @@
"Toggle Logs Bottom Panel": "๋ก๊ทธ ํ๋จ ํจ๋ ์ ํ",
"Toggle Model Library Sidebar": "๋ชจ๋ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ด๋๋ฐ ์ ํ",
"Toggle Node Library Sidebar": "๋
ธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ด๋๋ฐ ์ ํ",
- "Toggle Queue Sidebar": "๋๊ธฐ์ด ์ฌ์ด๋๋ฐ ์ ํ",
+ "Toggle Queue Sidebar": "์คํ ๋๊ธฐ์ด ์ฌ์ด๋๋ฐ ์ ํ",
"Toggle Search Box": "๊ฒ์ ์์ ์ ํ",
"Toggle Terminal Bottom Panel": "ํฐ๋ฏธ๋ ํ๋จ ํจ๋ ์ ํ",
"Toggle Theme (Dark/Light)": "ํ
๋ง ์ ํ (์ด๋์ด/๋ฐ์)",
@@ -902,7 +930,7 @@
"documentationPage": "๋ฌธ์ ํ์ด์ง",
"inputs": "์
๋ ฅ",
"loadError": "๋์๋ง์ ๋ถ๋ฌ์ค์ง ๋ชปํ์ต๋๋ค: {error}",
- "moreHelp": "๋ ๋ง์ ๋์๋ง์",
+ "moreHelp": "๋ ์์ธํ ๋์๋ง์",
"outputs": "์ถ๋ ฅ",
"type": "์ ํ"
},
@@ -1175,7 +1203,6 @@
},
"showFlatList": "ํ๋ฉด ๋ชฉ๋ก ํ์"
},
- "themeToggle": "ํ
๋ง ์ ํ",
"workflowTab": {
"confirmDelete": "์ ๋ง๋ก ์ด ์ํฌํ๋ก๋ฅผ ์ญ์ ํ์๊ฒ ์ต๋๊น?",
"confirmDeleteTitle": "์ํฌํ๋ก ์ญ์ ",
@@ -1230,11 +1257,11 @@
"stable_zero123_example": "Stable Zero123"
},
"3D API": {
- "api_rodin_image_to_model": "Rodin: ์ด๋ฏธ์ง ํฌ ๋ชจ๋ธ",
- "api_rodin_multiview_to_model": "Rodin: ๋ค์ค๋ทฐ ํฌ ๋ชจ๋ธ",
- "api_tripo_image_to_model": "Tripo: ์ด๋ฏธ์ง ํฌ ๋ชจ๋ธ",
- "api_tripo_multiview_to_model": "Tripo: ๋ค์ค๋ทฐ ํฌ ๋ชจ๋ธ",
- "api_tripo_text_to_model": "Tripo: ํ
์คํธ ํฌ ๋ชจ๋ธ"
+ "api_rodin_image_to_model": "Rodin: ์ด๋ฏธ์ง โ ๋ชจ๋ธ",
+ "api_rodin_multiview_to_model": "Rodin: ๋ค์ค๋ทฐ โ ๋ชจ๋ธ",
+ "api_tripo_image_to_model": "Tripo: ์ด๋ฏธ์ง โ ๋ชจ๋ธ",
+ "api_tripo_multiview_to_model": "Tripo: ๋ค์ค๋ทฐ โ ๋ชจ๋ธ",
+ "api_tripo_text_to_model": "Tripo: ํ
์คํธ โ ๋ชจ๋ธ"
},
"Area Composition": {
"area_composition": "์์ญ ๊ตฌ์ฑ",
@@ -1242,15 +1269,15 @@
},
"Audio": {
"audio_ace_step_1_m2m_editing": "ACE Step v1 M2M ํธ์ง",
- "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 ํ
์คํธ ํฌ ์ฐ์ฃผ๊ณก",
- "audio_ace_step_1_t2a_song": "ACE Step v1 ํ
์คํธ ํฌ ๋
ธ๋",
+ "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 ํ
์คํธ โ ์ฐ์ฃผ๊ณก",
+ "audio_ace_step_1_t2a_song": "ACE Step v1 ํ
์คํธ โ ๋
ธ๋",
"audio_stable_audio_example": "Stable Audio"
},
"Basics": {
"default": "์ด๋ฏธ์ง ์์ฑ",
"embedding_example": "์๋ฒ ๋ฉ",
"gligen_textbox_example": "๊ธ๋ฆฌ์ ํ
์คํธ๋ฐ์ค",
- "image2image": "์ด๋ฏธ์ง ํฌ ์ด๋ฏธ์ง",
+ "image2image": "์ด๋ฏธ์ง โ ์ด๋ฏธ์ง",
"inpaint_example": "์ธํ์ธํธ",
"inpaint_model_outpainting": "์์ํ์ธํ
",
"lora": "LoRA",
@@ -1264,62 +1291,62 @@
"mixing_controlnets": "์ปจํธ๋กค๋ท ํผํฉ"
},
"Flux": {
- "flux_canny_model_example": "Flux ์บ๋ ๋ชจ๋ธ",
- "flux_depth_lora_example": "Flux ๊น์ด ๋ก๋ผ",
- "flux_dev_checkpoint_example": "Flux Dev fp8",
- "flux_dev_full_text_to_image": "Flux Dev ์ ์ฒด ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "flux_fill_inpaint_example": "Flux ์ธํ์ธํธ",
- "flux_fill_outpaint_example": "Flux ์์ํ์ธํธ",
- "flux_kontext_dev_basic": "Flux Kontext Dev(๊ธฐ๋ณธ)",
- "flux_kontext_dev_grouped": "Flux Kontext Dev(๊ทธ๋ฃนํ)",
- "flux_redux_model_example": "Flux Redux ๋ชจ๋ธ",
- "flux_schnell": "Flux Schnell fp8",
- "flux_schnell_full_text_to_image": "Flux Schnell ์ ์ฒด ํ
์คํธ ํฌ ์ด๋ฏธ์ง"
+ "flux_canny_model_example": "FLUX ์บ๋ ๋ชจ๋ธ",
+ "flux_depth_lora_example": "FLUX ๊น์ด ๋ก๋ผ",
+ "flux_dev_checkpoint_example": "FLUX Dev fp8",
+ "flux_dev_full_text_to_image": "FLUX Dev ์ ์ฒด ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
+ "flux_fill_inpaint_example": "FLUX ์ธํ์ธํธ",
+ "flux_fill_outpaint_example": "FLUX ์์ํ์ธํธ",
+ "flux_kontext_dev_basic": "FLUX Kontext Dev(๊ธฐ๋ณธ)",
+ "flux_kontext_dev_grouped": "FLUX Kontext Dev(๊ทธ๋ฃนํ)",
+ "flux_redux_model_example": "FLUX Redux ๋ชจ๋ธ",
+ "flux_schnell": "FLUX Schnell fp8",
+ "flux_schnell_full_text_to_image": "FLUX Schnell Full ํ
์คํธ โ ์ด๋ฏธ์ง"
},
"Image": {
"hidream_e1_full": "HiDream E1 Full",
"hidream_i1_dev": "HiDream I1 Dev",
"hidream_i1_fast": "HiDream I1 Fast",
"hidream_i1_full": "HiDream I1 Full",
- "image_chroma_text_to_image": "Chroma ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
+ "image_chroma_text_to_image": "Chroma ํ
์คํธ โ ์ด๋ฏธ์ง",
"image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
"image_lotus_depth_v1_1": "Lotus Depth",
"image_omnigen2_image_edit": "OmniGen2 ์ด๋ฏธ์ง ํธ์ง",
- "image_omnigen2_t2i": "OmniGen2 ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "sd3_5_large_blur": "SD3.5 ๋ํ ๋ธ๋ฌ",
- "sd3_5_large_canny_controlnet_example": "SD3.5 ๋ํ ์บ๋ ์ปจํธ๋กค๋ท",
- "sd3_5_large_depth": "SD3.5 ๋ํ ๊น์ด",
+ "image_omnigen2_t2i": "OmniGen2 ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "sd3_5_large_blur": "SD3.5 Large ๋ธ๋ฌ",
+ "sd3_5_large_canny_controlnet_example": "SD3.5 Large ์บ๋ ์ปจํธ๋กค๋ท",
+ "sd3_5_large_depth": "SD3.5 Large ๊น์ด",
"sd3_5_simple_example": "SD3.5 ๊ฐ๋จ ์์ ",
- "sdxl_refiner_prompt_example": "SDXL ๋ฆฌํ์ด๋ ํ๋กฌํํธ",
+ "sdxl_refiner_prompt_example": "SDXL Refiner ํ๋กฌํํธ",
"sdxl_revision_text_prompts": "SDXL Revision ํ
์คํธ ํ๋กฌํํธ",
"sdxl_revision_zero_positive": "SDXL Revision Zero Positive",
"sdxl_simple_example": "SDXL ๊ฐ๋จ ์์ ",
"sdxlturbo_example": "SDXL ํฐ๋ณด"
},
"Image API": {
- "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext ๋งฅ์ค",
- "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext ๋ค์ค ์ด๋ฏธ์ง ์
๋ ฅ",
- "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext ํ๋ก",
- "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_ideogram_v3_t2i": "Ideogram V3: ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_luma_photon_i2i": "Luma Photon: ์ด๋ฏธ์ง ํฌ ์ด๋ฏธ์ง",
+ "api_bfl_flux_1_kontext_max_image": "BFL FLUX.1 Kontext ๋งฅ์ค",
+ "api_bfl_flux_1_kontext_multiple_images_input": "BFL FLUX.1 Kontext ๋ค์ค ์ด๋ฏธ์ง ์
๋ ฅ",
+ "api_bfl_flux_1_kontext_pro_image": "BFL FLUX.1 Kontext ํ๋ก",
+ "api_bfl_flux_pro_t2i": "BFL FLUX[Pro]: ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_ideogram_v3_t2i": "Ideogram V3: ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_luma_photon_i2i": "Luma Photon: ์ด๋ฏธ์ง โ ์ด๋ฏธ์ง",
"api_luma_photon_style_ref": "Luma Photon: ์คํ์ผ ์ฐธ์กฐ",
"api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 ์ธํ์ธํธ",
- "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 ์ด๋ฏธ์ง ํฌ ์ด๋ฏธ์ง",
+ "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 ์ด๋ฏธ์ง โ ์ด๋ฏธ์ง",
"api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 ์ธํ์ธํธ",
"api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 ๋ฉํฐ ์
๋ ฅ",
- "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
+ "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 ํ
์คํธ โ ์ด๋ฏธ์ง",
"api_recraft_image_gen_with_color_control": "Recraft: ์์ ์ ์ด ์ด๋ฏธ์ง ์์ฑ",
"api_recraft_image_gen_with_style_control": "Recraft: ์คํ์ผ ์ ์ด ์ด๋ฏธ์ง ์์ฑ",
"api_recraft_vector_gen": "Recraft: ๋ฒกํฐ ์์ฑ",
- "api_runway_reference_to_image": "Runway: ์ฐธ์กฐ ํฌ ์ด๋ฏธ์ง",
- "api_runway_text_to_image": "Runway: ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_stability_ai_i2i": "Stability AI: ์ด๋ฏธ์ง ํฌ ์ด๋ฏธ์ง",
- "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 ์ด๋ฏธ์ง ํฌ ์ด๋ฏธ์ง",
- "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 ํ
์คํธ ํฌ ์ด๋ฏธ์ง",
- "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra ํ
์คํธ ํฌ ์ด๋ฏธ์ง"
+ "api_runway_reference_to_image": "Runway: ์ฐธ์กฐ โ ์ด๋ฏธ์ง",
+ "api_runway_text_to_image": "Runway: ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_stability_ai_i2i": "Stability AI: ์ด๋ฏธ์ง โ ์ด๋ฏธ์ง",
+ "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 ์ด๋ฏธ์ง โ ์ด๋ฏธ์ง",
+ "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 ํ
์คํธ โ ์ด๋ฏธ์ง",
+ "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra ํ
์คํธ โ ์ด๋ฏธ์ง"
},
"LLM API": {
"api_google_gemini": "Google Gemini: ์ฑํ
",
@@ -1327,24 +1354,24 @@
},
"Upscaling": {
"esrgan_example": "ESRGAN",
- "hiresfix_esrgan_workflow": "HiresFix ESRGAN ์ํฌํ๋ก์ฐ",
- "hiresfix_latent_workflow": "์
์ค์ผ์ผ",
- "latent_upscale_different_prompt_model": "Latent ์
์ค์ผ์ผ ๋ค๋ฅธ ํ๋กฌํํธ ๋ชจ๋ธ"
+ "hiresfix_esrgan_workflow": "HiresFix ESRGAN ์ํฌํ๋ก",
+ "hiresfix_latent_workflow": "์ด๋ฏธ์ง ํ๋",
+ "latent_upscale_different_prompt_model": "์ ์ฌ ์ด๋ฏธ์ง ํ๋ ๋ค๋ฅธ ํ๋กฌํํธ ๋ชจ๋ธ"
},
"Video": {
- "hunyuan_video_text_to_video": "Hunyuan ๋น๋์ค ํ
์คํธ ํฌ ๋น๋์ค",
- "image_to_video": "SVD ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "image_to_video_wan": "Wan 2.1 ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "ltxv_image_to_video": "LTXV ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "ltxv_text_to_video": "LTXV ํ
์คํธ ํฌ ๋น๋์ค",
- "mochi_text_to_video_example": "Mochi ํ
์คํธ ํฌ ๋น๋์ค",
- "text_to_video_wan": "Wan 2.1 ํ
์คํธ ํฌ ๋น๋์ค",
- "txt_to_image_to_video": "SVD ํ
์คํธ ํฌ ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
+ "hunyuan_video_text_to_video": "Hunyuan ๋น๋์ค ํ
์คํธ โ ๋น๋์ค",
+ "image_to_video": "SVD ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "image_to_video_wan": "Wan 2.1 ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "ltxv_image_to_video": "LTXV ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "ltxv_text_to_video": "LTXV ํ
์คํธ โ ๋น๋์ค",
+ "mochi_text_to_video_example": "Mochi ํ
์คํธ โ ๋น๋์ค",
+ "text_to_video_wan": "Wan 2.1 ํ
์คํธ โ ๋น๋์ค",
+ "txt_to_image_to_video": "SVD ํ
์คํธ โ ์ด๋ฏธ์ง โ ๋น๋์ค",
"video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
"video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
"video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
- "video_wan_vace_14B_ref2v": "Wan VACE ์ฐธ์กฐ ํฌ ๋น๋์ค",
- "video_wan_vace_14B_t2v": "Wan VACE ํ
์คํธ ํฌ ๋น๋์ค",
+ "video_wan_vace_14B_ref2v": "Wan VACE ์ฐธ์กฐ โ ๋น๋์ค",
+ "video_wan_vace_14B_t2v": "Wan VACE ํ
์คํธ โ ๋น๋์ค",
"video_wan_vace_14B_v2v": "Wan VACE ์ปจํธ๋กค ๋น๋์ค",
"video_wan_vace_flf2v": "Wan VACE ์ฒซ-๋ง์ง๋ง ํ๋ ์",
"video_wan_vace_inpainting": "Wan VACE ์ธํ์ธํ
",
@@ -1354,24 +1381,24 @@
"wan2_1_fun_inp": "Wan 2.1 ์ธํ์ธํ
"
},
"Video API": {
- "api_hailuo_minimax_i2v": "MiniMax: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_hailuo_minimax_t2v": "MiniMax: ํ
์คํธ ํฌ ๋น๋์ค",
+ "api_hailuo_minimax_i2v": "MiniMax: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_hailuo_minimax_t2v": "MiniMax: ํ
์คํธ โ ๋น๋์ค",
"api_kling_effects": "Kling: ๋น๋์ค ํจ๊ณผ",
"api_kling_flf": "Kling: FLF2V",
- "api_kling_i2v": "Kling: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_luma_i2v": "Luma: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_luma_t2v": "Luma: ํ
์คํธ ํฌ ๋น๋์ค",
- "api_moonvalley_image_to_video": "Moonvalley: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_moonvalley_text_to_video": "Moonvalley: ํ
์คํธ ํฌ ๋น๋์ค",
- "api_pika_i2v": "Pika: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_pika_scene": "Pika ์ฅ๋ฉด: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_pixverse_i2v": "PixVerse: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_pixverse_t2v": "PixVerse: ํ
์คํธ ํฌ ๋น๋์ค",
- "api_pixverse_template_i2v": "PixVerse ํ
ํ๋ฆฟ: ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_runway_first_last_frame": "Runway: ์ฒซ-๋ง์ง๋ง ํ๋ ์ ํฌ ๋น๋์ค",
- "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo ์ด๋ฏธ์ง ํฌ ๋น๋์ค",
- "api_veo2_i2v": "Veo2: ์ด๋ฏธ์ง ํฌ ๋น๋์ค"
+ "api_kling_i2v": "Kling: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_luma_i2v": "Luma: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_luma_t2v": "Luma: ํ
์คํธ โ ๋น๋์ค",
+ "api_moonvalley_image_to_video": "Moonvalley: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_moonvalley_text_to_video": "Moonvalley: ํ
์คํธ โ ๋น๋์ค",
+ "api_pika_i2v": "Pika: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_pika_scene": "Pika ์ฅ๋ฉด: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_pixverse_i2v": "PixVerse: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_pixverse_t2v": "PixVerse: ํ
์คํธ โ ๋น๋์ค",
+ "api_pixverse_template_i2v": "PixVerse ํ
ํ๋ฆฟ: ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_runway_first_last_frame": "Runway: ์ฒซ-๋ง์ง๋ง ํ๋ ์ โ ๋น๋์ค",
+ "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo ์ด๋ฏธ์ง โ ๋น๋์ค",
+ "api_veo2_i2v": "Veo2: ์ด๋ฏธ์ง โ ๋น๋์ค"
}
},
"templateDescription": {
@@ -1386,7 +1413,7 @@
"api_rodin_multiview_to_model": "Rodin์ ๋ค๊ฐ๋ ์ฌ๊ตฌ์ฑ์ผ๋ก ์ข
ํฉ์ ์ธ 3D ๋ชจ๋ธ์ ๋ง๋ญ๋๋ค.",
"api_tripo_image_to_model": "Tripo ์์ง์ผ๋ก 2D ์ด๋ฏธ์ง์์ ์ ๋ฌธ๊ฐ์ฉ 3D ์์
์ ์์ฑํฉ๋๋ค.",
"api_tripo_multiview_to_model": "Tripo์ ๊ณ ๊ธ ์ค์บ๋๋ก ์ฌ๋ฌ ๊ฐ๋์์ 3D ๋ชจ๋ธ์ ๋ง๋ญ๋๋ค.",
- "api_tripo_text_to_model": "Tripo์ ํ
์คํธ ๊ธฐ๋ฐ ๋ชจ๋ธ๋ง์ผ๋ก ์ค๋ช
์์ 3D ์ค๋ธ์ ํธ๋ฅผ ๋ง๋ญ๋๋ค."
+ "api_tripo_text_to_model": "Tripo์ ํ
์คํธ ๊ธฐ๋ฐ ๋ชจ๋ธ๋ง์ผ๋ก ์ค๋ช
์์ 3D ๊ฐ์ฒด๋ฅผ ๋ง๋ญ๋๋ค."
},
"Area Composition": {
"area_composition": "์ ์๋ ์์ญ์ผ๋ก ๊ตฌ์ฑ์ ์ ์ดํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
@@ -1409,49 +1436,49 @@
"lora_multiple": "์ฌ๋ฌ LoRA ๋ชจ๋ธ์ ๊ฒฐํฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค."
},
"ControlNet": {
- "2_pass_pose_worship": "ControlNet์ผ๋ก ํฌ์ฆ ์ฐธ์กฐ๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "controlnet_example": "ControlNet์ผ๋ก ์คํฌ๋ฆฌ๋ธ ์ฐธ์กฐ ์ด๋ฏธ์ง๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "depth_controlnet": "ControlNet์ผ๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "2_pass_pose_worship": "์ปจํธ๋กค๋ท์ผ๋ก ํฌ์ฆ ์ฐธ์กฐ๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "controlnet_example": "์ปจํธ๋กค๋ท์ผ๋ก ์คํฌ๋ฆฌ๋ธ ์ฐธ์กฐ ์ด๋ฏธ์ง๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "depth_controlnet": "์ปจํธ๋กค๋ท์ผ๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"depth_t2i_adapter": "T2I ์ด๋ํฐ๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "mixing_controlnets": "์ฌ๋ฌ ControlNet ๋ชจ๋ธ์ ๊ฒฐํฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค."
+ "mixing_controlnets": "์ฌ๋ฌ ์ปจํธ๋กค๋ท ๋ชจ๋ธ์ ๊ฒฐํฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค."
},
"Flux": {
- "flux_canny_model_example": "Flux Canny๋ก ์์ง ๊ฐ์ง์ ๋ฐ๋ผ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "flux_depth_lora_example": "Flux LoRA๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "flux_dev_checkpoint_example": "Flux Dev fp8 ์์ํ ๋ฒ์ ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. VRAM์ด ์ ํ๋ ์ฅ์น์ ์ ํฉํ๋ฉฐ, ๋ชจ๋ธ ํ์ผ ํ๋๋ง ํ์ํ์ง๋ง ํ์ง์ ์ ์ฒด ๋ฒ์ ๋ณด๋ค ์ฝ๊ฐ ๋ฎ์ต๋๋ค.",
- "flux_dev_full_text_to_image": "Flux Dev ์ ์ฒด ๋ฒ์ ์ผ๋ก ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ๋ ๋ง์ VRAM๊ณผ ์ฌ๋ฌ ๋ชจ๋ธ ํ์ผ์ด ํ์ํ์ง๋ง, ์ต๊ณ ์ ํ๋กฌํํธ ๋ฐ์๋ ฅ๊ณผ ํ์ง์ ์ ๊ณตํฉ๋๋ค.",
- "flux_fill_inpaint_example": "Flux ์ธํ์ธํ
์ผ๋ก ์ด๋ฏธ์ง์ ๋๋ฝ๋ ๋ถ๋ถ์ ์ฑ์๋๋ค.",
- "flux_fill_outpaint_example": "Flux ์์ํ์ธํ
์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๊ฒฝ๊ณ ๋๋จธ๋ก ํ์ฅํฉ๋๋ค.",
- "flux_kontext_dev_basic": "Flux Kontext์ ์ ์ฒด ๋
ธ๋ ํ์๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค. ์ํฌํ๋ก์ฐ ํ์ต์ ์ ํฉํฉ๋๋ค.",
- "flux_kontext_dev_grouped": "๋
ธ๋๊ฐ ๊ทธ๋ฃนํ๋ Flux Kontext์ ๊ฐ์ํ ๋ฒ์ ์ผ๋ก ์์
๊ณต๊ฐ์ด ๋ ๊น๋ํฉ๋๋ค.",
- "flux_redux_model_example": "Flux Redux๋ก ์ฐธ์กฐ ์ด๋ฏธ์ง์ ์คํ์ผ์ ์ ์กํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "flux_schnell": "Flux Schnell fp8 ์์ํ ๋ฒ์ ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํฉ๋๋ค. ์ ์ฌ์ ํ๋์จ์ด์ ์ด์์ ์ด๋ฉฐ, 4๋จ๊ณ๋ง์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.",
- "flux_schnell_full_text_to_image": "Flux Schnell ์ ์ฒด ๋ฒ์ ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํฉ๋๋ค. Apache2.0 ๋ผ์ด์ ์ค๋ฅผ ์ฌ์ฉํ๋ฉฐ, 4๋จ๊ณ๋ง์ผ๋ก ์ข์ ํ์ง์ ์ ์งํฉ๋๋ค."
+ "flux_canny_model_example": "FLUX ์บ๋ ์ปจํธ๋กค๋ท์ผ๋ก ์์ง ๊ฐ์ง์ ๋ฐ๋ผ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "flux_depth_lora_example": "FLUX LoRA๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "flux_dev_checkpoint_example": "FLUX Dev fp8 ์์ํ ๋ฒ์ ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. VRAM์ด ์ ํ๋ ์ฅ์น์ ์ ํฉํ๋ฉฐ, ๋ชจ๋ธ ํ์ผ ํ๋๋ง ํ์ํ์ง๋ง ํ์ง์ ์ ์ฒด ๋ฒ์ ๋ณด๋ค ์ฝ๊ฐ ๋ฎ์ต๋๋ค.",
+ "flux_dev_full_text_to_image": "FLUX Dev ์ ์ฒด ๋ฒ์ ์ผ๋ก ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ๋ ๋ง์ VRAM๊ณผ ์ฌ๋ฌ ๋ชจ๋ธ ํ์ผ์ด ํ์ํ์ง๋ง, ์ต๊ณ ์ ํ๋กฌํํธ ๋ฐ์๋ ฅ๊ณผ ํ์ง์ ์ ๊ณตํฉ๋๋ค.",
+ "flux_fill_inpaint_example": "FLUX ์ธํ์ธํ
์ผ๋ก ์ด๋ฏธ์ง์ ๋๋ฝ๋ ๋ถ๋ถ์ ์ฑ์๋๋ค.",
+ "flux_fill_outpaint_example": "FFLUXlux ์์ํ์ธํ
์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๊ฒฝ๊ณ ๋๋จธ๋ก ํ์ฅํฉ๋๋ค.",
+ "flux_kontext_dev_basic": "FLUX Kontext์ ์ ์ฒด ๋
ธ๋ ํ์๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค. ์ํฌํ๋ก ํ์ต์ ์ ํฉํฉ๋๋ค.",
+ "flux_kontext_dev_grouped": "๋
ธ๋๊ฐ ๊ทธ๋ฃนํ๋ FLUX Kontext์ ๊ฐ์ํ ๋ฒ์ ์ผ๋ก ์์
๊ณต๊ฐ์ด ๋ ๊น๋ํฉ๋๋ค.",
+ "flux_redux_model_example": "FLUX Redux๋ก ์ฐธ์กฐ ์ด๋ฏธ์ง์ ์คํ์ผ์ ์ ์กํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "flux_schnell": "FLUX Schnell fp8 ์์ํ ๋ฒ์ ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํฉ๋๋ค. ์ ์ฌ์ ํ๋์จ์ด์ ์ด์์ ์ด๋ฉฐ, 4๋จ๊ณ๋ง์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.",
+ "flux_schnell_full_text_to_image": "FLUX Schnell Full ๋ฒ์ ์ ์ด์ฉํด ์ด๋ฏธ์ง๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํฉ๋๋ค. Apache2.0 ๋ผ์ด์ ์ค๋ฅผ ์ฌ์ฉํ๋ฉฐ, 4๋จ๊ณ๋ง์ผ๋ก ์ข์ ํ์ง์ ์ ์งํฉ๋๋ค."
},
"Image": {
"hidream_e1_full": "HiDream E1 - ์ ๋ฌธ์ ์ธ ์์ฐ์ด ์ด๋ฏธ์ง ํธ์ง ๋ชจ๋ธ๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
"hidream_i1_dev": "HiDream I1 Dev - 28 ์คํ
์ ๊ท ํ ์กํ ๋ฒ์ ์ผ๋ก, ์ค๊ฐ๊ธ ํ๋์จ์ด์ ์ ํฉํฉ๋๋ค.",
"hidream_i1_fast": "HiDream I1 Fast - 16 ์คํ
์ ๊ฒฝ๋ ๋ฒ์ ์ผ๋ก, ์ ์ฌ์ ํ๋์จ์ด์์ ๋น ๋ฅธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ์ ์ ํฉํฉ๋๋ค.",
"hidream_i1_full": "HiDream I1 Full - 50 ์คํ
์ ์์ ๋ฒ์ ์ผ๋ก, ์ต๊ณ ์ ํ์ง์ ์ ๊ณตํฉ๋๋ค.",
- "image_chroma_text_to_image": "Chroma๋ flux์์ ์์ ๋ ๋ชจ๋ธ๋ก, ์ํคํ
์ฒ์ ์ผ๋ถ ๋ณํ๊ฐ ์์ต๋๋ค.",
+ "image_chroma_text_to_image": "Chroma๋ FLUX์์ ์์ ๋ ๋ชจ๋ธ๋ก, ์ํคํ
์ฒ์ ์ผ๋ถ ๋ณํ๊ฐ ์์ต๋๋ค.",
"image_cosmos_predict2_2B_t2i": "Cosmos-Predict2 2B T2I๋ก ๋ฌผ๋ฆฌ์ ์ผ๋ก ์ ํํ๊ณ ๊ณ ํด์๋, ๋ํ
์ผ์ด ํ๋ถํ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"image_lotus_depth_v1_1": "Lotus Depth๋ก ๊ณ ํจ์จ ๋จ์ ๊น์ด ์ถ์ ๋ฐ ๋ํ
์ผ ๋ณด์กด์ด ๋ฐ์ด๋ zero-shot ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"image_omnigen2_image_edit": "OmniGen2์ ๊ณ ๊ธ ์ด๋ฏธ์ง ํธ์ง ๊ธฐ๋ฅ๊ณผ ํ
์คํธ ๋ ๋๋ง ์ง์์ผ๋ก ์์ฐ์ด ์ง์๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
"image_omnigen2_t2i": "OmniGen2์ ํตํฉ 7B ๋ฉํฐ๋ชจ๋ฌ ๋ชจ๋ธ๊ณผ ๋์ผ ํจ์ค ์ํคํ
์ฒ๋ก ํ
์คํธ ํ๋กฌํํธ์์ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sd3_5_large_blur": "SD 3.5๋ก ํ๋ฆฟํ ์ฐธ์กฐ ์ด๋ฏธ์ง๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "sd3_5_large_canny_controlnet_example": "SD 3.5 Canny ControlNet์ผ๋ก ์์ง ๊ฐ์ง์ ๋ฐ๋ผ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
+ "sd3_5_large_canny_controlnet_example": "SD 3.5 ์บ๋ ์ปจํธ๋กค๋ท์ผ๋ก ์์ง ๊ฐ์ง์ ๋ฐ๋ผ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sd3_5_large_depth": "SD 3.5๋ก ๊น์ด ์ ๋ณด๋ฅผ ํ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sd3_5_simple_example": "SD 3.5๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
- "sdxl_refiner_prompt_example": "SDXL ๋ฆฌํ์ด๋ ๋ชจ๋ธ๋ก ์ด๋ฏธ์ง๋ฅผ ํฅ์์ํต๋๋ค.",
+ "sdxl_refiner_prompt_example": "SDXL Refiner ๋ชจ๋ธ๋ก ์ด๋ฏธ์ง๋ฅผ ํฅ์์ํต๋๋ค.",
"sdxl_revision_text_prompts": "SDXL Revision์ผ๋ก ์ฐธ์กฐ ์ด๋ฏธ์ง์ ๊ฐ๋
์ ์ ์กํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sdxl_revision_zero_positive": "SDXL Revision์ผ๋ก ํ
์คํธ ํ๋กฌํํธ์ ์ฐธ์กฐ ์ด๋ฏธ์ง๋ฅผ ํจ๊ป ์ฌ์ฉํด ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sdxl_simple_example": "SDXL๋ก ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"sdxlturbo_example": "SDXL Turbo๋ก ํ ๋ฒ์ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค."
},
"Image API": {
- "api_bfl_flux_1_kontext_max_image": "Flux.1 Kontext ๋งฅ์ค ์ด๋ฏธ์ง๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
- "api_bfl_flux_1_kontext_multiple_images_input": "์ฌ๋ฌ ์ด๋ฏธ์ง๋ฅผ ์
๋ ฅํ๊ณ Flux.1 Kontext๋ก ํธ์งํฉ๋๋ค.",
- "api_bfl_flux_1_kontext_pro_image": "Flux.1 Kontext ํ๋ก ์ด๋ฏธ์ง๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
+ "api_bfl_flux_1_kontext_max_image": "FLUX.1 Kontext ๋งฅ์ค ์ด๋ฏธ์ง๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
+ "api_bfl_flux_1_kontext_multiple_images_input": "์ฌ๋ฌ ์ด๋ฏธ์ง๋ฅผ ์
๋ ฅํ๊ณ FLUX.1 Kontext๋ก ํธ์งํฉ๋๋ค.",
+ "api_bfl_flux_1_kontext_pro_image": "FLUX.1 Kontext ํ๋ก ์ด๋ฏธ์ง๋ก ์ด๋ฏธ์ง๋ฅผ ํธ์งํฉ๋๋ค.",
"api_bfl_flux_pro_t2i": "FLUX.1 Pro๋ก ๋ฐ์ด๋ ํ๋กฌํํธ ๋ฐ์๊ณผ ์๊ฐ์ ํ์ง๋ก ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"api_ideogram_v3_t2i": "Ideogram V3๋ก ๋ฐ์ด๋ ํ๋กฌํํธ ์ผ์น, ํฌํ ๋ฆฌ์ผ๋ฆฌ์ฆ, ํ
์คํธ ๋ ๋๋ง์ผ๋ก ์ ๋ฌธ๊ฐ ์์ค์ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"api_luma_photon_i2i": "์ด๋ฏธ์ง์ ํ๋กฌํํธ๋ฅผ ์กฐํฉํ์ฌ ์ด๋ฏธ์ง ์์ฑ์ ๊ฐ์ด๋ํฉ๋๋ค.",
@@ -1469,9 +1496,9 @@
"api_runway_reference_to_image": "Runway์ AI๋ก ์ฐธ์กฐ ์คํ์ผ๊ณผ ๊ตฌ์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ์ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"api_runway_text_to_image": "Runway์ AI ๋ชจ๋ธ๋ก ํ
์คํธ ํ๋กฌํํธ์์ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.",
"api_stability_ai_i2i": "Stability AI๋ก ๊ณ ํ์ง ์ด๋ฏธ์ง ๋ณํ ๋ฐ ์คํ์ผ ์ ํ์ ์ง์ํฉ๋๋ค.",
- "api_stability_ai_sd3_5_i2i": "1๋ฉ๊ฐํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค.",
- "api_stability_ai_sd3_5_t2i": "1๋ฉ๊ฐํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค.",
- "api_stability_ai_stable_image_ultra_t2i": "1๋ฉ๊ฐํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค."
+ "api_stability_ai_sd3_5_i2i": "1M ํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค.",
+ "api_stability_ai_sd3_5_t2i": "1M ํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค.",
+ "api_stability_ai_stable_image_ultra_t2i": "1M ํฝ์
ํด์๋์์ ์ ๋ฌธ๊ฐ์ฉ ๊ณ ํ์ง ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค. ํ๋กฌํํธ ๋ฐ์์ด ์ฐ์ํฉ๋๋ค."
},
"LLM API": {
"api_google_gemini": "Google Gemini์ ๋ฉํฐ๋ชจ๋ฌ AI์ ์ถ๋ก ๋ฅ๋ ฅ์ ๊ฒฝํํ์ธ์.",
@@ -1479,9 +1506,9 @@
},
"Upscaling": {
"esrgan_example": "ESRGAN ๋ชจ๋ธ๋ก ์ด๋ฏธ์ง ํ์ง์ ํฅ์ํฉ๋๋ค.",
- "hiresfix_esrgan_workflow": "์ค๊ฐ ์์ฑ ๋จ๊ณ์์ ESRGAN ๋ชจ๋ธ๋ก ์
์ค์ผ์ผํฉ๋๋ค.",
- "hiresfix_latent_workflow": "Latent ๊ณต๊ฐ์์ ์ด๋ฏธ์ง ํ์ง์ ํฅ์ํฉ๋๋ค.",
- "latent_upscale_different_prompt_model": "์ฌ๋ฌ ๋ฒ์ ์์ฑ ํจ์ค์์ ํ๋กฌํํธ๋ฅผ ๋ณ๊ฒฝํ๋ฉฐ ์
์ค์ผ์ผํฉ๋๋ค."
+ "hiresfix_esrgan_workflow": "์ค๊ฐ ์์ฑ ๋จ๊ณ์์ ESRGAN ๋ชจ๋ธ๋ก ์ด๋ฏธ์ง๋ฅผ ํ๋ํฉ๋๋ค.",
+ "hiresfix_latent_workflow": "์ ์ฌ ์ด๋ฏธ์ง์ ํ๋ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ์ง ํ์ง์ ํฅ์ํฉ๋๋ค.",
+ "latent_upscale_different_prompt_model": "์ฌ๋ฌ ๋ฒ์ ์์ฑ ํจ์ค์์ ํ๋กฌํํธ๋ฅผ ๋ณ๊ฒฝํ๋ฉฐ ์ด๋ฏธ์ง๋ฅผ ํ๋ํฉ๋๋ค."
},
"Video": {
"hunyuan_video_text_to_video": "Hunyuan ๋ชจ๋ธ๋ก ํ
์คํธ ํ๋กฌํํธ์์ ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค.",
@@ -1502,7 +1529,7 @@
"video_wan_vace_inpainting": "ํน์ ์์ญ์ ํธ์งํ๋ฉด์ ์ฃผ๋ณ ๋ด์ฉ์ ๋ณด์กดํ๋ ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค. ๊ฐ์ฒด ์ ๊ฑฐ ๋๋ ๊ต์ฒด์ ์ ํฉํฉ๋๋ค.",
"video_wan_vace_outpainting": "Wan VACE ์์ํ์ธํ
์ผ๋ก ๋น๋์ค ํฌ๊ธฐ๋ฅผ ํ์ฅํ์ฌ ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค.",
"wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V๋ก ์ฒซ ํ๋ ์๊ณผ ๋ง์ง๋ง ํ๋ ์์ ์ ์ดํ์ฌ ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค.",
- "wan2_1_fun_control": "Wan 2.1 ControlNet์ผ๋ก ํฌ์ฆ, ๊น์ด, ์์ง ์ ์ด๋ก ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค.",
+ "wan2_1_fun_control": "Wan 2.1 ์ปจํธ๋กค๋ท์ผ๋ก ํฌ์ฆ, ๊น์ด, ์์ง ์ ์ด๋ก ์ ์ฉํด ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค.",
"wan2_1_fun_inp": "Wan 2.1 ์ธํ์ธํ
์ผ๋ก ์์ ๋ฐ ์ข
๋ฃ ํ๋ ์์์ ๋น๋์ค๋ฅผ ์์ฑํฉ๋๋ค."
},
"Video API": {
@@ -1546,7 +1573,7 @@
"failedToFetchLogs": "์๋ฒ ๋ก๊ทธ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ์คํจํ์ต๋๋ค",
"failedToInitiateCreditPurchase": "ํฌ๋ ๋ง ๊ตฌ๋งค๋ฅผ ์์ํ์ง ๋ชปํ์ต๋๋ค: {error}",
"failedToPurchaseCredits": "ํฌ๋ ๋ง ๊ตฌ๋งค์ ์คํจํ์ต๋๋ค: {error}",
- "fileLoadError": "{fileName}์์ ์ํฌํ๋ก์ฐ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค",
+ "fileLoadError": "{fileName}์์ ์ํฌํ๋ก๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค",
"fileUploadFailed": "ํ์ผ ์
๋ก๋์ ์คํจํ์ต๋๋ค",
"interrupted": "์คํ์ด ์ค๋จ๋์์ต๋๋ค",
"migrateToLitegraphReroute": "ํฅํ ๋ฒ์ ์์๋ Reroute ๋
ธ๋๊ฐ ์ ๊ฑฐ๋ฉ๋๋ค. LiteGraph ์์ ์์ฒด ์ ๊ณตํ๋ ๊ฒฝ์ ์ ์ผ๋ก ๋ณํํ๋ ค๋ฉด ํด๋ฆญํ์ธ์.",
@@ -1599,6 +1626,13 @@
"prefix": "{prefix}(์ผ)๋ก ์์ํด์ผ ํฉ๋๋ค",
"required": "ํ์"
},
+ "versionMismatchWarning": {
+ "dismiss": "๋ซ๊ธฐ",
+ "frontendNewer": "ํ๋ก ํธ์๋ ๋ฒ์ {frontendVersion}์ด(๊ฐ) ๋ฐฑ์๋ ๋ฒ์ {backendVersion}๊ณผ(์) ํธํ๋์ง ์์ ์ ์์ต๋๋ค.",
+ "frontendOutdated": "ํ๋ก ํธ์๋ ๋ฒ์ {frontendVersion}์ด(๊ฐ) ์ค๋๋์์ต๋๋ค. ๋ฐฑ์๋๋ {requiredVersion} ์ด์ ๋ฒ์ ์ ํ์๋ก ํฉ๋๋ค.",
+ "title": "๋ฒ์ ํธํ์ฑ ๊ฒฝ๊ณ ",
+ "updateFrontend": "ํ๋ก ํธ์๋ ์
๋ฐ์ดํธ"
+ },
"welcome": {
"getStarted": "์์ํ๊ธฐ",
"title": "ComfyUI์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค"
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index c8d30a412..321704a20 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -29,6 +29,13 @@
"name": "์บ๋ฒ์ค ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง",
"tooltip": "์บ๋ฒ์ค ๋ฐฐ๊ฒฝ์ ์ฌ์ฉํ ์ด๋ฏธ์ง URL์
๋๋ค. ์ถ๋ ฅ ํจ๋์์ ์ด๋ฏธ์ง๋ฅผ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ผ๋ก ํด๋ฆญํ ํ \"๋ฐฐ๊ฒฝ์ผ๋ก ์ค์ \"์ ์ ํํด ์ฌ์ฉํ ์ ์์ต๋๋ค."
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "์บ๋ฒ์ค ๋ด๋น๊ฒ์ด์
๋ชจ๋",
+ "options": {
+ "Left-Click Pan (Legacy)": "์ผ์ชฝ ํด๋ฆญ ์ด๋(๋ ๊ฑฐ์)",
+ "Standard (New)": "ํ์ค(์ ๊ท)"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "์ ํ ๋๊ตฌ ์์ ํ์"
},
@@ -329,10 +336,6 @@
},
"tooltip": "๋ฉ๋ด ๋ฐ ์์น์
๋๋ค. ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์๋ ๋ฉ๋ด๊ฐ ํญ์ ์๋จ์ ํ์๋ฉ๋๋ค."
},
- "Comfy_Validation_NodeDefs": {
- "name": "๋
ธ๋ ์ ์ ์ ํจ์ฑ ๊ฒ์ฌ (๋๋ฆผ)",
- "tooltip": "๋
ธ๋ ๊ฐ๋ฐ์์๊ฒ ๊ถ์ฅ๋ฉ๋๋ค. ์์ ์ ๋ชจ๋ ๋
ธ๋ ์ ์๋ฅผ ์ ํจ์ฑ ๊ฒ์ฌํฉ๋๋ค."
- },
"Comfy_Validation_Workflows": {
"name": "์ํฌํ๋ก ์ ํจ์ฑ ๊ฒ์ฌ"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "ํดํ ์ง์ฐ"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "ํธ๋ํจ๋ ์ ์ค์ฒ ํ์ฑํ",
- "tooltip": "์ด ์ค์ ์ ์ผ๋ฉด ์บ๋ฒ์ค์์ ํธ๋ํจ๋ ๋ชจ๋๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ๋ ์๊ฐ๋ฝ์ผ๋ก ํ๋/์ถ์ ๋ฐ ์ด๋์ด ๊ฐ๋ฅํฉ๋๋ค."
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "๊ฒฝ์ ์ ์คํ๋ผ์ธ ์คํ์
",
"tooltip": "๊ฒฝ์ ์ ์ค์ฌ์์ ๋ฒ ์ง์ด ์ ์ด์ ๊น์ง์ ์คํ์
"
diff --git a/src/locales/ru/commands.json b/src/locales/ru/commands.json
index ca88c4b6b..1970fa8d0 100644
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "ะะตัะตะบะปััะธัั ะฑะปะพะบะธัะพะฒะบั ั
ะพะปััะฐ"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "ะะพะปะพัะฝะพ: ะฟะตัะตะบะปััะธัั ะผะธะฝะธะบะฐััั"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "ะะฑั
ะพะด/ะะตะพะฑั
ะพะด ะฒัะฑัะฐะฝะฝัั
ะฝะพะด"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "ะะตัะตะบะปััะธัั ะดะธะฐะปะพะณะพะฒะพะต ะพะบะฝะพ ะฟัะพะณัะตััะฐ"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "ะฃะผะตะฝััะธัั ัะฐะทะผะตั ะบะธััะธ ะฒ MaskEditor"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "ะฃะฒะตะปะธัะธัั ัะฐะทะผะตั ะบะธััะธ ะฒ MaskEditor"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "ะัะบัััั ัะตะดะฐะบัะพั ะผะฐัะพะบ ะดะปั ะฒัะฑัะฐะฝะฝะพะน ะฝะพะดั"
},
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 869d25f82..31400756a 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -82,6 +82,12 @@
"title": "ะกะพะทะดะฐัั ะฐะบะบะฐัะฝั"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "ะัะธััะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั",
+ "deleteWorkflow": "ะฃะดะฐะปะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั",
+ "duplicate": "ะัะฑะปะธัะพะฒะฐัั",
+ "enterNewName": "ะะฒะตะดะธัะต ะฝะพะฒะพะต ะธะผั"
+ },
"chatHistory": {
"cancelEdit": "ะัะผะตะฝะฐ",
"cancelEditTooltip": "ะัะผะตะฝะธัั ัะตะดะฐะบัะธัะพะฒะฐะฝะธะต",
@@ -291,6 +297,7 @@
"devices": "ะฃัััะพะนััะฒะฐ",
"disableAll": "ะัะบะปััะธัั ะฒัะต",
"disabling": "ะัะบะปััะตะฝะธะต",
+ "dismiss": "ะะฐะบัััั",
"download": "ะกะบะฐัะฐัั",
"edit": "ะ ะตะดะฐะบัะธัะพะฒะฐัั",
"empty": "ะัััะพ",
@@ -305,6 +312,8 @@
"filter": "ะคะธะปััั",
"findIssues": "ะะฐะนัะธ ะฟัะพะฑะปะตะผั",
"firstTimeUIMessage": "ะั ะฒะฟะตัะฒัะต ะธัะฟะพะปัะทัะตัะต ะฝะพะฒัะน ะธะฝัะตััะตะนั. ะัะฑะตัะธัะต \"ะะตะฝั > ะัะฟะพะปัะทะพะฒะฐัั ะฝะพะฒะพะต ะผะตะฝั > ะัะบะปััะตะฝะพ\", ััะพะฑั ะฒะพัััะฐะฝะพะฒะธัั ััะฐััะน ะธะฝัะตััะตะนั.",
+ "frontendNewer": "ะะตััะธั ะธะฝัะตััะตะนัะฐ {frontendVersion} ะผะพะถะตั ะฑััั ะฝะตัะพะฒะผะตััะธะผะฐ ั ะฒะตััะธะตะน ัะตัะฒะตัะฐ {backendVersion}.",
+ "frontendOutdated": "ะะตััะธั ะธะฝัะตััะตะนัะฐ {frontendVersion} ัััะฐัะตะปะฐ. ะขัะตะฑัะตััั ะฒะตััะธั ะฝะต ะฝะธะถะต {requiredVersion} ะดะปั ัะฐะฑะพัั ั ัะตัะฒะตัะพะผ.",
"goToNode": "ะะตัะตะนัะธ ะบ ะฝะพะดะต",
"help": "ะะพะผะพัั",
"icon": "ะะบะพะฝะบะฐ",
@@ -326,17 +335,20 @@
"loadingPanel": "ะะฐะณััะทะบะฐ ะฟะฐะฝะตะปะธ {panel}...",
"login": "ะั
ะพะด",
"logs": "ะะพะณะธ",
+ "micPermissionDenied": "ะะพัััะฟ ะบ ะผะธะบัะพัะพะฝั ะทะฐะฟัะตััะฝ",
"migrate": "ะะธะณัะธัะพะฒะฐัั",
"missing": "ะััััััะฒัะตั",
"name": "ะะผั",
"newFolder": "ะะพะฒะฐั ะฟะฐะฟะบะฐ",
"next": "ะะฐะปะตะต",
"no": "ะะตั",
+ "noAudioRecorded": "ะัะดะธะพ ะฝะต ะทะฐะฟะธัะฐะฝะพ",
"noResultsFound": "ะ ะตะทัะปััะฐัะพะฒ ะฝะต ะฝะฐะนะดะตะฝะพ",
"noTasksFound": "ะะฐะดะฐัะธ ะฝะต ะฝะฐะนะดะตะฝั",
"noTasksFoundMessage": "ะ ะพัะตัะตะดะธ ะฝะตั ะทะฐะดะฐั.",
"noWorkflowsFound": "ะ ะฐะฑะพัะธะต ะฟัะพัะตััั ะฝะต ะฝะฐะนะดะตะฝั.",
"nodes": "ะฃะทะปั",
+ "nodesRunning": "ะทะฐะฟััะตะฝะพ ัะทะปะพะฒ",
"ok": "ะะ",
"openNewIssue": "ะัะบัััั ะฝะพะฒัั ะฟัะพะฑะปะตะผั",
"overwrite": "ะะตัะตะทะฐะฟะธัะฐัั",
@@ -370,7 +382,9 @@
"showReport": "ะะพะบะฐะทะฐัั ะพัััั",
"sort": "ะกะพััะธัะพะฒะฐัั",
"source": "ะััะพัะฝะธะบ",
+ "startRecording": "ะะฐัะฐัั ะทะฐะฟะธัั",
"status": "ะกัะฐััั",
+ "stopRecording": "ะััะฐะฝะพะฒะธัั ะทะฐะฟะธัั",
"success": "ะฃัะฟะตั
",
"systemInfo": "ะะฝัะพัะผะฐัะธั ะพ ัะธััะตะผะต",
"terminal": "ะขะตัะผะธะฝะฐะป",
@@ -379,11 +393,14 @@
"unknownError": "ะะตะธะทะฒะตััะฝะฐั ะพัะธะฑะบะฐ",
"update": "ะะฑะฝะพะฒะธัั",
"updateAvailable": "ะะพัััะฟะฝะพ ะพะฑะฝะพะฒะปะตะฝะธะต",
+ "updateFrontend": "ะะฑะฝะพะฒะธัั ะธะฝัะตััะตะนั",
"updated": "ะะฑะฝะพะฒะปะตะฝะพ",
"updating": "ะะฑะฝะพะฒะปะตะฝะธะต",
"upload": "ะะฐะณััะทะธัั",
"usageHint": "ะะพะดัะบะฐะทะบะฐ ะฟะพ ะธัะฟะพะปัะทะพะฒะฐะฝะธั",
"user": "ะะพะปัะทะพะฒะฐัะตะปั",
+ "versionMismatchWarning": "ะัะตะดัะฟัะตะถะดะตะฝะธะต ะพ ะฝะตัะพะฒะผะตััะธะผะพััะธ ะฒะตััะธะน",
+ "versionMismatchWarningMessage": "{warning}: {detail} ะะพัะตัะธัะต https://docs.comfy.org/installation/update_comfyui#common-update-issues ะดะปั ะธะฝััััะบัะธะน ะฟะพ ะพะฑะฝะพะฒะปะตะฝะธั.",
"videoFailedToLoad": "ะะต ัะดะฐะปะพัั ะทะฐะณััะทะธัั ะฒะธะดะตะพ",
"workflow": "ะ ะฐะฑะพัะธะน ะฟัะพัะตัั"
},
@@ -393,6 +410,7 @@
"resetView": "ะกะฑัะพัะธัั ะฒะธะด",
"selectMode": "ะัะฑัะฐัั ัะตะถะธะผ",
"toggleLinkVisibility": "ะะตัะตะบะปััะธัั ะฒะธะดะธะผะพััั ัััะปะพะบ",
+ "toggleMinimap": "ะะพะบะฐะทะฐัั/ัะบัััั ะผะธะฝะธะบะฐััั",
"zoomIn": "ะฃะฒะตะปะธัะธัั",
"zoomOut": "ะฃะผะตะฝััะธัั"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "ะะพะปะธัะตััะฒะพ ัะฐะท, ะบะพะณะดะฐ ะณะตะฝะตัะฐัะธั ัะฐะฑะพัะตะณะพ ะฟัะพัะตััะฐ ะดะพะปะถะฝะฐ ะฑััั ะฟะพะผะตัะตะฝะฐ ะฒ ะพัะตัะตะดั",
"clear": "ะัะธััะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั",
"clipspace": "ะัะบัััั Clipspace",
+ "dark": "ะขัะผะฝะฐั",
"disabled": "ะัะบะปััะตะฝะพ",
"disabledTooltip": "ะ ะฐะฑะพัะธะน ะฟัะพัะตัั ะฝะต ะฑัะดะตั ะฐะฒัะพะผะฐัะธัะตัะบะธ ะฟะพะผะตััะฝ ะฒ ะพัะตัะตะดั",
"execute": "ะัะฟะพะปะฝะธัั",
+ "help": "ะกะฟัะฐะฒะบะฐ",
"hideMenu": "ะกะบัััั ะผะตะฝั",
"instant": "ะะณะฝะพะฒะตะฝะฝะพ",
"instantTooltip": "ะ ะฐะฑะพัะธะน ะฟัะพัะตัั ะฑัะดะตั ะฟะพะผะตััะฝ ะฒ ะพัะตัะตะดั ััะฐะทั ะถะต ะฟะพัะปะต ะทะฐะฒะตััะตะฝะธั ะณะตะฝะตัะฐัะธะธ",
"interrupt": "ะัะผะตะฝะธัั ัะตะบััะตะต ะฒัะฟะพะปะฝะตะฝะธะต",
+ "light": "ะกะฒะตัะปะฐั",
+ "manageExtensions": "ะฃะฟัะฐะฒะปะตะฝะธะต ัะฐััะธัะตะฝะธัะผะธ",
"onChange": "ะัะธ ะธะทะผะตะฝะตะฝะธะธ",
"onChangeTooltip": "ะ ะฐะฑะพัะธะน ะฟัะพัะตัั ะฑัะดะตั ะฟะพััะฐะฒะปะตะฝ ะฒ ะพัะตัะตะดั ะฟะพัะปะต ะฒะฝะตัะตะฝะธั ะธะทะผะตะฝะตะฝะธะน",
"refresh": "ะะฑะฝะพะฒะธัั ะพะฟัะตะดะตะปะตะฝะธั ะฝะพะด",
@@ -721,7 +743,9 @@
"run": "ะะฐะฟัััะธัั",
"runWorkflow": "ะะฐะฟัััะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั (Shift ะดะปั ะพัะตัะตะดะธ ะฒ ะฝะฐัะฐะปะต)",
"runWorkflowFront": "ะะฐะฟัััะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั (ะัะตัะตะดั ะฒ ะฝะฐัะฐะปะต)",
+ "settings": "ะะฐัััะพะนะบะธ",
"showMenu": "ะะพะบะฐะทะฐัั ะผะตะฝั",
+ "theme": "ะขะตะผะฐ",
"toggleBottomPanel": "ะะตัะตะบะปััะธัั ะฝะธะถะฝัั ะฟะฐะฝะตะปั"
},
"menuLabels": {
@@ -731,8 +755,9 @@
"Bypass/Unbypass Selected Nodes": "ะะฑะพะนัะธ/ะฒะพัััะฐะฝะพะฒะธัั ะฒัะฑัะฐะฝะฝัะต ะฝะพะดั",
"Canvas Toggle Link Visibility": "ะะตัะตะบะปััะตะฝะธะต ะฒะธะดะธะผะพััะธ ัััะปะบะธ ะฝะฐ ั
ะพะปัั",
"Canvas Toggle Lock": "ะะตัะตะบะปััะตะฝะธะต ะฑะปะพะบะธัะพะฒะบะธ ั
ะพะปััะฐ",
+ "Canvas Toggle Minimap": "ะะพะบะฐะทะฐัั/ัะบัััั ะผะธะฝะธะบะฐััั ะฝะฐ ั
ะพะปััะต",
"Check for Custom Node Updates": "ะัะพะฒะตัะธัั ะพะฑะฝะพะฒะปะตะฝะธั ะฟะพะปัะทะพะฒะฐัะตะปััะบะธั
ัะทะปะพะฒ",
- "Check for Updates": "ะัะพะฒะตัะธัั ะะฑะฝะพะฒะปะตะฝะธั",
+ "Check for Updates": "ะัะพะฒะตัะธัั ะฝะฐะปะธัะธะต ะพะฑะฝะพะฒะปะตะฝะธะน",
"Clear Pending Tasks": "ะัะธััะธัั ะพะถะธะดะฐััะธะต ะทะฐะดะฐัะธ",
"Clear Workflow": "ะัะธััะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั",
"Clipspace": "ะะปะธะฟะฟัะพัััะฐะฝััะฒะพ",
@@ -746,6 +771,8 @@
"Convert Selection to Subgraph": "ะัะตะพะฑัะฐะทะพะฒะฐัั ะฒัะดะตะปะตะฝะฝะพะต ะฒ ะฟะพะดะณัะฐั",
"Convert selected nodes to group node": "ะัะตะพะฑัะฐะทะพะฒะฐัั ะฒัะฑัะฐะฝะฝัะต ะฝะพะดั ะฒ ะณััะฟะฟะพะฒัั ะฝะพะดั",
"Custom Nodes (Legacy)": "ะะพะปัะทะพะฒะฐัะตะปััะบะธะต ัะทะปั (ัััะฐัะตะฒัะธะต)",
+ "Custom Nodes Manager": "ะะตะฝะตะดะถะตั ะะพะปัะทะพะฒะฐัะตะปััะบะธั
ะฃะทะปะพะฒ",
+ "Decrease Brush Size in MaskEditor": "ะฃะผะตะฝััะธัั ัะฐะทะผะตั ะบะธััะธ ะฒ MaskEditor",
"Delete Selected Items": "ะฃะดะฐะปะธัั ะฒัะฑัะฐะฝะฝัะต ัะปะตะผะตะฝัั",
"Desktop User Guide": "ะ ัะบะพะฒะพะดััะฒะพ ะฟะพะปัะทะพะฒะฐัะตะปั ะดะปั ะฝะฐััะพะปัะฝัั
ะะ",
"Duplicate Current Workflow": "ะัะฑะปะธัะพะฒะฐัั ัะตะบััะธะน ัะฐะฑะพัะธะน ะฟัะพัะตัั",
@@ -757,6 +784,7 @@
"Give Feedback": "ะััะฐะฒะธัั ะพัะทัะฒ",
"Group Selected Nodes": "ะกะณััะฟะฟะธัะพะฒะฐัั ะฒัะฑัะฐะฝะฝัะต ะฝะพะดั",
"Help": "ะะพะผะพัั",
+ "Increase Brush Size in MaskEditor": "ะฃะฒะตะปะธัะธัั ัะฐะทะผะตั ะบะธััะธ ะฒ MaskEditor",
"Install Missing Custom Nodes": "ะฃััะฐะฝะพะฒะธัั ะพััััััะฒัััะธะต ะฟะพะปัะทะพะฒะฐัะตะปััะบะธะต ัะทะปั",
"Interrupt": "ะัะตัะฒะฐัั",
"Load Default Workflow": "ะะฐะณััะทะธัั ััะฐะฝะดะฐััะฝัะน ัะฐะฑะพัะธะน ะฟัะพัะตัั",
@@ -1175,7 +1203,6 @@
},
"showFlatList": "ะะพะบะฐะทะฐัั ะฟะปะพัะบะธะน ัะฟะธัะพะบ"
},
- "themeToggle": "ะะตัะตะบะปััะธัั ัะตะผั",
"workflowTab": {
"confirmDelete": "ะั ัะฒะตัะตะฝั, ััะพ ั
ะพัะธัะต ัะดะฐะปะธัั ััะพั ัะฐะฑะพัะธะน ะฟัะพัะตัั?",
"confirmDeleteTitle": "ะฃะดะฐะปะธัั ัะฐะฑะพัะธะน ะฟัะพัะตัั?",
@@ -1599,6 +1626,13 @@
"prefix": "ะะพะปะถะฝะพ ะฝะฐัะธะฝะฐัััั ั {prefix}",
"required": "ะะฑัะทะฐัะตะปัะฝะพ"
},
+ "versionMismatchWarning": {
+ "dismiss": "ะะฐะบัััั",
+ "frontendNewer": "ะะตััะธั ะธะฝัะตััะตะนัะฐ {frontendVersion} ะผะพะถะตั ะฑััั ะฝะตัะพะฒะผะตััะธะผะฐ ั ะฒะตััะธะตะน ัะตัะฒะตัะฐ {backendVersion}.",
+ "frontendOutdated": "ะะตััะธั ะธะฝัะตััะตะนัะฐ {frontendVersion} ัััะฐัะตะปะฐ. ะะปั ัะฐะฑะพัั ั ัะตัะฒะตัะพะผ ััะตะฑัะตััั ะฒะตััะธั {requiredVersion} ะธะปะธ ะฝะพะฒะตะต.",
+ "title": "ะัะตะดัะฟัะตะถะดะตะฝะธะต ะพ ะฝะตัะพะฒะผะตััะธะผะพััะธ ะฒะตััะธะน",
+ "updateFrontend": "ะะฑะฝะพะฒะธัั ะธะฝัะตััะตะนั"
+ },
"welcome": {
"getStarted": "ะะฐัะฐัั",
"title": "ะะพะฑัะพ ะฟะพะถะฐะปะพะฒะฐัั ะฒ ComfyUI"
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index f75b429d1..14aad22be 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -29,6 +29,13 @@
"name": "ะคะพะฝะพะฒะพะต ะธะทะพะฑัะฐะถะตะฝะธะต ั
ะพะปััะฐ",
"tooltip": "URL ะธะทะพะฑัะฐะถะตะฝะธั ะดะปั ัะพะฝะฐ ั
ะพะปััะฐ. ะั ะผะพะถะตัะต ะบะปะธะบะฝััั ะฟัะฐะฒะพะน ะบะฝะพะฟะบะพะน ะผััะธ ะฝะฐ ะธะทะพะฑัะฐะถะตะฝะธะธ ะฒ ะฟะฐะฝะตะปะธ ัะตะทัะปััะฐัะพะฒ ะธ ะฒัะฑัะฐัั ยซะฃััะฐะฝะพะฒะธัั ะบะฐะบ ัะพะฝยป, ััะพะฑั ะธัะฟะพะปัะทะพะฒะฐัั ะตะณะพ."
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "ะ ะตะถะธะผ ะฝะฐะฒะธะณะฐัะธะธ ะฟะพ ั
ะพะปััั",
+ "options": {
+ "Left-Click Pan (Legacy)": "ะะตัะตะผะตัะตะฝะธะต ะปะตะฒะพะน ะบะฝะพะฟะบะพะน (ัััะฐัะตะฒัะธะน)",
+ "Standard (New)": "ะกัะฐะฝะดะฐััะฝัะน (ะฝะพะฒัะน)"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "ะะพะบะฐะทะฐัั ะฟะฐะฝะตะปั ะธะฝััััะผะตะฝัะพะฒ ะฒัะฑะพัะฐ"
},
@@ -329,10 +336,6 @@
},
"tooltip": "ะ ะฐัะฟะพะปะพะถะตะฝะธะต ะฟะฐะฝะตะปะธ ะผะตะฝั. ะะฐ ะผะพะฑะธะปัะฝัั
ััััะพะนััะฒะฐั
ะผะตะฝั ะฒัะตะณะดะฐ ะพัะพะฑัะฐะถะฐะตััั ะฒะฒะตัั
ั."
},
- "Comfy_Validation_NodeDefs": {
- "name": "ะัะพะฒะตัะบะฐ ะพะฟัะตะดะตะปะตะฝะธะน ะฝะพะด (ะผะตะดะปะตะฝะฝะพ)",
- "tooltip": "ะ ะตะบะพะผะตะฝะดัะตััั ะดะปั ัะฐะทัะฐะฑะพััะธะบะพะฒ ะฝะพะด. ะญัะพ ะฟัะพะฒะตัะธั ะฒัะต ะพะฟัะตะดะตะปะตะฝะธั ะฝะพะด ะฟัะธ ะทะฐะฟััะบะต."
- },
"Comfy_Validation_Workflows": {
"name": "ะัะพะฒะตัะบะฐ ัะฐะฑะพัะธั
ะฟัะพัะตััะพะฒ"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "ะะฐะดะตัะถะบะฐ ะฒัะฟะปัะฒะฐััะตะน ะฟะพะดัะบะฐะทะบะธ"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "ะะบะปััะธัั ะถะตััั ััะตะบะฟะฐะดะฐ",
- "tooltip": "ะญัะฐ ะฝะฐัััะพะนะบะฐ ะฒะบะปััะฐะตั ัะตะถะธะผ ััะตะบะฟะฐะดะฐ ะดะปั ั
ะพะปััะฐ, ะฟะพะทะฒะพะปัั ะธัะฟะพะปัะทะพะฒะฐัั ะผะฐัััะฐะฑะธัะพะฒะฐะฝะธะต ัะธะฟะบะพะผ ะธ ะฟะฐะฝะพัะฐะผะธัะพะฒะฐะฝะธะต ะดะฒัะผั ะฟะฐะปััะฐะผะธ."
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "ะะตัะตัะฐัะฟัะตะดะตะปะตะฝะธะต ัะผะตัะตะฝะธั ัะฟะปะฐะนะฝะฐ",
"tooltip": "ะกะผะตัะตะฝะธะต ะบะพะฝััะพะปัะฝะพะน ัะพัะบะธ ะะตะทัะต ะพั ัะตะฝััะฐะปัะฝะพะน ัะพัะบะธ ะฟะตัะตัะฐัะฟัะตะดะตะปะตะฝะธั"
diff --git a/src/locales/zh-TW/commands.json b/src/locales/zh-TW/commands.json
index 2f81dc6b9..01af3518d 100644
--- a/src/locales/zh-TW/commands.json
+++ b/src/locales/zh-TW/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "็ซๅธๅๆ้ๅฎ"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "็ซๅธๅๆๅฐๅฐๅ"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "็ฅ้/ๅๆถ็ฅ้้ธๅ็็ฏ้ป"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "ๅๆ่ช่จ็ฏ้ป็ฎก็ๅจ้ฒๅบฆๆข"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "ๆธๅฐ MaskEditor ็ซ็ญๅคงๅฐ"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "ๅขๅ MaskEditor ็ซ็ญๅคงๅฐ"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "็บ้ธๅ็็ฏ้ป้ๅ Mask ็ทจ่ผฏๅจ"
},
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index 8aaa8d541..8f6219b9e 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -82,6 +82,12 @@
"title": "ๅปบ็ซๅธณๆถ"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "ๆธ
้คๅทฅไฝๆต็จ",
+ "deleteWorkflow": "ๅช้คๅทฅไฝๆต็จ",
+ "duplicate": "่ค่ฃฝ",
+ "enterNewName": "่ผธๅ
ฅๆฐๅ็จฑ"
+ },
"chatHistory": {
"cancelEdit": "ๅๆถ",
"cancelEditTooltip": "ๅๆถ็ทจ่ผฏ",
@@ -291,6 +297,7 @@
"devices": "่ฃ็ฝฎ",
"disableAll": "ๅ
จ้จๅ็จ",
"disabling": "ๅ็จไธญ",
+ "dismiss": "้้",
"download": "ไธ่ผ",
"edit": "็ทจ่ผฏ",
"empty": "็ฉบ",
@@ -305,6 +312,8 @@
"filter": "็ฏฉ้ธ",
"findIssues": "ๅฐๆพๅ้ก",
"firstTimeUIMessage": "้ๆฏๆจ็ฌฌไธๆฌกไฝฟ็จๆฐไป้ขใ่ฅ่ฆ่ฟๅ่ไป้ข๏ผ่ซๅๅพใ้ธๅฎใ>ใไฝฟ็จๆฐไป้ขใ>ใ้้ใใ",
+ "frontendNewer": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅฏ่ฝ่ๅพ็ซฏ็ๆฌ {backendVersion} ไธ็ธๅฎนใ",
+ "frontendOutdated": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅทฒ้ๆใๅพ็ซฏ้่ฆ {requiredVersion} ๆๆด้ซ็ๆฌใ",
"goToNode": "ๅๅพ็ฏ้ป",
"help": "่ชชๆ",
"icon": "ๅ็คบ",
@@ -326,17 +335,20 @@
"loadingPanel": "ๆญฃๅจ่ผๅ
ฅ{panel}้ขๆฟ...",
"login": "็ปๅ
ฅ",
"logs": "ๆฅ่ช",
+ "micPermissionDenied": "้บฅๅ
้ขจๆฌ้่ขซๆ็ต",
"migrate": "้ท็งป",
"missing": "็ผบๅฐ",
"name": "ๅ็จฑ",
"newFolder": "ๆฐ่ณๆๅคพ",
"next": "ไธไธๆญฅ",
"no": "ๅฆ",
+ "noAudioRecorded": "ๆฒๆ้่ฃฝๅฐ้ณ่จ",
"noResultsFound": "ๆพไธๅฐ็ตๆ",
"noTasksFound": "ๆพไธๅฐไปปๅ",
"noTasksFoundMessage": "ไฝๅไธญๆฒๆไปปๅใ",
"noWorkflowsFound": "ๆพไธๅฐๅทฅไฝๆต็จใ",
"nodes": "็ฏ้ป",
+ "nodesRunning": "็ฏ้ปๅท่กไธญ",
"ok": "็ขบๅฎ",
"openNewIssue": "้ๅๆฐๅ้ก",
"overwrite": "่ฆ่",
@@ -370,7 +382,9 @@
"showReport": "้กฏ็คบๅ ฑๅ",
"sort": "ๆๅบ",
"source": "ไพๆบ",
+ "startRecording": "้ๅง้้ณ",
"status": "็ๆ
",
+ "stopRecording": "ๅๆญข้้ณ",
"success": "ๆๅ",
"systemInfo": "็ณป็ตฑ่ณ่จ",
"terminal": "็ต็ซฏๆฉ",
@@ -379,11 +393,14 @@
"unknownError": "ๆช็ฅ้ฏ่ชค",
"update": "ๆดๆฐ",
"updateAvailable": "ๆๅฏ็จๆดๆฐ",
+ "updateFrontend": "ๆดๆฐๅ็ซฏ",
"updated": "ๅทฒๆดๆฐ",
"updating": "ๆดๆฐไธญ",
"upload": "ไธๅณ",
"usageHint": "ไฝฟ็จๆ็คบ",
"user": "ไฝฟ็จ่
",
+ "versionMismatchWarning": "็ๆฌ็ธๅฎนๆง่ญฆๅ",
+ "versionMismatchWarningMessage": "{warning}๏ผ{detail} ่ซๅ้ฑ https://docs.comfy.org/installation/update_comfyui#common-update-issues ไปฅๅๅพๆดๆฐ่ชชๆใ",
"videoFailedToLoad": "็กๆณ่ผๅ
ฅๅฝฑ็",
"workflow": "ๅทฅไฝๆต็จ"
},
@@ -393,6 +410,7 @@
"resetView": "้่จญ่ฆๅ",
"selectMode": "้ธๅๆจกๅผ",
"toggleLinkVisibility": "ๅๆ้ฃ็ต้กฏ็คบ",
+ "toggleMinimap": "ๅๆๅฐๅฐๅ",
"zoomIn": "ๆพๅคง",
"zoomOut": "็ธฎๅฐ"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "ๅทฅไฝๆต็จ็ข็ๆๆๅ
ฅไฝๅ็ๆฌกๆธ",
"clear": "ๆธ
้คๅทฅไฝๆต็จ",
"clipspace": "้ๅ Clipspace",
+ "dark": "ๆทฑ่ฒ",
"disabled": "ๅทฒๅ็จ",
"disabledTooltip": "ๅทฅไฝๆต็จๅฐไธๆ่ชๅๆๅ
ฅไฝๅ",
"execute": "ๅท่ก",
+ "help": "่ชชๆ",
"hideMenu": "้ฑ่้ธๅฎ",
"instant": "็ซๅณ",
"instantTooltip": "ๆฏๆฌก็ข็ๅฎๆๅพ๏ผๅทฅไฝๆต็จๆ็ซๅณๆๅ
ฅไฝๅ",
"interrupt": "ๅๆถ็ฎๅๅท่ก",
+ "light": "ๆทบ่ฒ",
+ "manageExtensions": "็ฎก็ๆดๅ
ๅ่ฝ",
"onChange": "่ฎๆดๆ",
"onChangeTooltip": "ๆฏ็ถๆ่ฎๆดๆ๏ผๅทฅไฝๆต็จๆๆๅ
ฅไฝๅ",
"refresh": "้ๆฐๆด็็ฏ้ปๅฎ็พฉ",
@@ -721,7 +743,9 @@
"run": "ๅท่ก",
"runWorkflow": "ๅท่กๅทฅไฝๆต็จ๏ผShift ๆผๅๆนๆ้๏ผ",
"runWorkflowFront": "ๅท่กๅทฅไฝๆต็จ๏ผๅๆนๆ้๏ผ",
+ "settings": "่จญๅฎ",
"showMenu": "้กฏ็คบ้ธๅฎ",
+ "theme": "ไธป้ก",
"toggleBottomPanel": "ๅๆไธๆน้ขๆฟ"
},
"menuLabels": {
@@ -731,6 +755,7 @@
"Bypass/Unbypass Selected Nodes": "็น้/ๅๆถ็น้้ธๅ็ฏ้ป",
"Canvas Toggle Link Visibility": "ๅๆ้ฃ็ตๅฏ่ฆๆง",
"Canvas Toggle Lock": "ๅๆ็ซๅธ้ๅฎ",
+ "Canvas Toggle Minimap": "็ซๅธๅๆๅฐๅฐๅ",
"Check for Custom Node Updates": "ๆชขๆฅ่ช่จ็ฏ้ปๆดๆฐ",
"Check for Updates": "ๆชขๆฅๆดๆฐ",
"Clear Pending Tasks": "ๆธ
้คๅพ
่็ไปปๅ",
@@ -746,6 +771,8 @@
"Convert Selection to Subgraph": "ๅฐ้ธๅๅ
งๅฎน่ฝ็บๅญๅ",
"Convert selected nodes to group node": "ๅฐ้ธๅ็ฏ้ป่ฝ็บ็พค็ต็ฏ้ป",
"Custom Nodes (Legacy)": "่ช่จ็ฏ้ป๏ผ่็๏ผ",
+ "Custom Nodes Manager": "่ช่จ็ฏ้ป็ฎก็ๅก",
+ "Decrease Brush Size in MaskEditor": "ๅจ MaskEditor ไธญๆธๅฐ็ญๅทๅคงๅฐ",
"Delete Selected Items": "ๅช้ค้ธๅ้
็ฎ",
"Desktop User Guide": "ๆก้ขๆ็จ็จๅผไฝฟ็จๆๅ",
"Duplicate Current Workflow": "่ค่ฃฝ็ฎๅๅทฅไฝๆต็จ",
@@ -757,6 +784,7 @@
"Give Feedback": "ๆไพๆ่ฆๅ้ฅ",
"Group Selected Nodes": "็พค็ต้ธๅ็ฏ้ป",
"Help": "่ชชๆ",
+ "Increase Brush Size in MaskEditor": "ๅจ MaskEditor ไธญๅขๅคง็ญๅทๅคงๅฐ",
"Install Missing Custom Nodes": "ๅฎ่ฃ็ผบๅฐ็่ช่จ็ฏ้ป",
"Interrupt": "ไธญๆท",
"Load Default Workflow": "่ผๅ
ฅ้ ่จญๅทฅไฝๆต็จ",
@@ -1175,7 +1203,6 @@
},
"showFlatList": "้กฏ็คบๅนณ้ขๆธ
ๅฎ"
},
- "themeToggle": "ๅๆไธป้ก",
"workflowTab": {
"confirmDelete": "ๆจ็ขบๅฎ่ฆๅช้ค้ๅๅทฅไฝๆต็จๅ๏ผ",
"confirmDeleteTitle": "ๅช้คๅทฅไฝๆต็จ๏ผ",
@@ -1599,6 +1626,13 @@
"prefix": "ๅฟ
้ ไปฅ {prefix} ้้ ญ",
"required": "ๅฟ
ๅกซ"
},
+ "versionMismatchWarning": {
+ "dismiss": "้้",
+ "frontendNewer": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅฏ่ฝ่ๅพ็ซฏ็ๆฌ {backendVersion} ไธ็ธๅฎนใ",
+ "frontendOutdated": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅทฒ้ๆใๅพ็ซฏ้่ฆ็ๆฌ {requiredVersion} ๆๆด้ซ็ๆฌใ",
+ "title": "็ๆฌ็ธๅฎนๆง่ญฆๅ",
+ "updateFrontend": "ๆดๆฐๅ็ซฏ"
+ },
"welcome": {
"getStarted": "้ๅงไฝฟ็จ",
"title": "ๆญก่ฟไฝฟ็จ ComfyUI"
diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json
index c0cc900d3..1bd661a1b 100644
--- a/src/locales/zh-TW/settings.json
+++ b/src/locales/zh-TW/settings.json
@@ -29,6 +29,13 @@
"name": "็ซๅธ่ๆฏๅ็",
"tooltip": "็ซๅธ่ๆฏ็ๅ็็ถฒๅใไฝ ๅฏไปฅๅจ่ผธๅบ้ขๆฟไธญๅณ้ต้ปๆๅ็ไธฆ้ธๆใ่จญ็บ่ๆฏใไพไฝฟ็จ๏ผๆๆฏไฝฟ็จไธๅณๆ้ไธๅณไฝ ่ชๅทฑ็ๅ็ใ"
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "็ซๅธๅฐ่ชๆจกๅผ",
+ "options": {
+ "Left-Click Pan (Legacy)": "ๅทฆ้ตๆๆณๅนณ็งป๏ผ่็๏ผ",
+ "Standard (New)": "ๆจๆบ๏ผๆฐ๏ผ"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "้กฏ็คบ้ธๅๅทฅๅ
ท็ฎฑ"
},
@@ -329,10 +336,6 @@
},
"tooltip": "้ธๅฎๅไฝ็ฝฎใๅจ่กๅ่ฃ็ฝฎไธ๏ผ้ธๅฎๆฐธ้ ้กฏ็คบๅจ้ ้จใ"
},
- "Comfy_Validation_NodeDefs": {
- "name": "้ฉ่ญ็ฏ้ปๅฎ็พฉ๏ผ่ผๆ
ข๏ผ",
- "tooltip": "ๅปบ่ญฐ็ฏ้ป้็ผ่
ไฝฟ็จใ้ๆๅจๅๅๆ้ฉ่ญๆๆ็ฏ้ปๅฎ็พฉใ"
- },
"Comfy_Validation_Workflows": {
"name": "้ฉ่ญๅทฅไฝๆต็จ"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "ๆ็คบๅปถ้ฒ"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "ๅ็จ่งธๆงๆฟๆๅข",
- "tooltip": "ๆญค่จญๅฎๅฏ็บ็ซๅธๅ็จ่งธๆงๆฟๆจกๅผ๏ผๅ
่จฑไฝฟ็จๅ
ฉๆ็ธฎๆพ่ๅนณ็งปใ"
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "้ๅฐๆจฃๆขๅ็งป",
"tooltip": "่ฒ่ฒๆงๅถ้ป็ธๅฐๆผ้ๅฐไธญๅฟ้ป็ๅ็งป้"
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index f7c65dc9c..70cfcd3d9 100644
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -71,6 +71,9 @@
"Comfy_Canvas_ToggleLock": {
"label": "้ๅฎ่งๅพ"
},
+ "Comfy_Canvas_ToggleMinimap": {
+ "label": "็ซๅธๅๆๅฐๅฐๅ"
+ },
"Comfy_Canvas_ToggleSelectedNodes_Bypass": {
"label": "ๅฟฝ็ฅ/ๅๆถๅฟฝ็ฅ้ไธญ่็น"
},
@@ -170,6 +173,12 @@
"Comfy_Manager_ToggleManagerProgressDialog": {
"label": "ๅๆข่ฟๅบฆๅฏน่ฏๆก"
},
+ "Comfy_MaskEditor_BrushSize_Decrease": {
+ "label": "ๆธๅฐ MaskEditor ไธญ็็ญๅทๅคงๅฐ"
+ },
+ "Comfy_MaskEditor_BrushSize_Increase": {
+ "label": "ๅขๅ MaskEditor ็ซ็ญๅคงๅฐ"
+ },
"Comfy_MaskEditor_OpenMaskEditor": {
"label": "ๆๅผ้ไธญ่็น็้ฎ็ฝฉ็ผ่พๅจ"
},
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index b1f154c35..9c1c8c48a 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -82,6 +82,12 @@
"title": "ๅๅปบไธไธช่ดฆๆท"
}
},
+ "breadcrumbsMenu": {
+ "clearWorkflow": "ๆธ
้คๅทฅไฝๆต็จ",
+ "deleteWorkflow": "ๅช้คๅทฅไฝๆต็จ",
+ "duplicate": "่ค่ฃฝ",
+ "enterNewName": "่ผธๅ
ฅๆฐๅ็จฑ"
+ },
"chatHistory": {
"cancelEdit": "ๅๆถ",
"cancelEditTooltip": "ๅๆถ็ผ่พ",
@@ -291,6 +297,7 @@
"devices": "่ฎพๅค",
"disableAll": "็ฆ็จๅ
จ้จ",
"disabling": "็ฆ็จไธญ",
+ "dismiss": "้้",
"download": "ไธ่ฝฝ",
"edit": "็ผ่พ",
"empty": "็ฉบ",
@@ -305,6 +312,8 @@
"filter": "่ฟๆปค",
"findIssues": "ๆฅๆพ้ฎ้ข",
"firstTimeUIMessage": "่ฟๆฏๆจ็ฌฌไธๆฌกไฝฟ็จๆฐ็้ขใ้ๆฉ \"่ๅ > ไฝฟ็จๆฐ่ๅ > ็ฆ็จ\" ๆฅๆขๅคๆง็้ขใ",
+ "frontendNewer": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅฏ่ฝ่ๅพ็ซฏ็ๆฌ {backendVersion} ไธ็ธๅฎนใ",
+ "frontendOutdated": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅทฒ้ๆใๅพ็ซฏ้่ฆ {requiredVersion} ๆๆด้ซ็ๆฌใ",
"goToNode": "่ฝฌๅฐ่็น",
"help": "ๅธฎๅฉ",
"icon": "ๅพๆ ",
@@ -326,17 +335,20 @@
"loadingPanel": "ๆญฃๅจๅ ่ฝฝ{panel}้ขๆฟ...",
"login": "็ปๅฝ",
"logs": "ๆฅๅฟ",
+ "micPermissionDenied": "้บฆๅ
้ฃๆ้่ขซๆ็ป",
"migrate": "่ฟ็งป",
"missing": "็ผบๅคฑ",
"name": "ๅ็งฐ",
"newFolder": "ๆฐๆไปถๅคน",
"next": "ไธไธไธช",
"no": "ๅฆ",
+ "noAudioRecorded": "ๆชๅฝๅถ้ณ้ข",
"noResultsFound": "ๆชๆพๅฐ็ปๆ",
"noTasksFound": "ๆชๆพๅฐไปปๅก",
"noTasksFoundMessage": "้ๅไธญๆฒกๆไปปๅกใ",
"noWorkflowsFound": "ๆชๆพๅฐๅทฅไฝๆตใ",
"nodes": "่็น",
+ "nodesRunning": "่็นๆญฃๅจ่ฟ่ก",
"ok": "็กฎๅฎ",
"openNewIssue": "ๆๅผๆฐ้ฎ้ข",
"overwrite": "่ฆ็",
@@ -370,7 +382,9 @@
"showReport": "ๆพ็คบๆฅๅ",
"sort": "ๆๅบ",
"source": "ๆฅๆบ",
+ "startRecording": "ๅผๅงๅฝ้ณ",
"status": "็ถๆ",
+ "stopRecording": "ๅๆญขๅฝ้ณ",
"success": "ๆๅ",
"systemInfo": "็ณป็ปไฟกๆฏ",
"terminal": "็ป็ซฏ",
@@ -379,11 +393,14 @@
"unknownError": "ๆช็ฅ้่ฏฏ",
"update": "ๆดๆฐ",
"updateAvailable": "ๆๆดๆฐๅฏ็จ",
+ "updateFrontend": "ๆดๆฐๅ็ซฏ",
"updated": "ๅทฒๆดๆฐ",
"updating": "ๆดๆฐไธญ",
"upload": "ไธไผ ",
"usageHint": "ไฝฟ็จๆ็คบ",
"user": "็จๆท",
+ "versionMismatchWarning": "็ๆฌ็ธๅฎนๆง่ญฆๅ",
+ "versionMismatchWarningMessage": "{warning}๏ผ{detail} ่ซๅ้ฑ https://docs.comfy.org/installation/update_comfyui#common-update-issues ไปฅๅๅพๆดๆฐ่ชชๆใ",
"videoFailedToLoad": "่ง้ขๅ ่ฝฝๅคฑ่ดฅ",
"workflow": "ๅทฅไฝๆต"
},
@@ -393,6 +410,7 @@
"resetView": "้็ฝฎ่งๅพ",
"selectMode": "้ๆฉๆจกๅผ",
"toggleLinkVisibility": "ๅๆข่ฟ็บฟๅฏ่งๆง",
+ "toggleMinimap": "ๅๆๅฐๅฐๅ",
"zoomIn": "ๆพๅคง",
"zoomOut": "็ผฉๅฐ"
},
@@ -707,13 +725,17 @@
"batchCountTooltip": "ๅทฅไฝๆต็ๆๆฌกๆฐ",
"clear": "ๆธ
็ฉบๅทฅไฝๆต",
"clipspace": "ๆๅผๅช่ดดๆฟ",
+ "dark": "ๆทฑ่ฒ",
"disabled": "็ฆ็จ",
"disabledTooltip": "ๅทฅไฝๆตๅฐไธไผ่ชๅจๆง่ก",
"execute": "ๆง่ก",
+ "help": "่ชชๆ",
"hideMenu": "้่่ๅ",
"instant": "ๅฎๆถ",
"instantTooltip": "ๅทฅไฝๆตๅฐไผๅจ็ๆๅฎๆๅ็ซๅณๆง่ก",
"interrupt": "ๅๆถๅฝๅไปปๅก",
+ "light": "ๆทบ่ฒ",
+ "manageExtensions": "็ฎก็ๆดๅ
ๅ่ฝ",
"onChange": "ๆดๆนๆถ",
"onChangeTooltip": "ไธๆฆ่ฟ่กๆดๆน๏ผๅทฅไฝๆตๅฐๆทปๅ ๅฐๆง่ก้ๅ",
"refresh": "ๅทๆฐ่็น",
@@ -721,7 +743,9 @@
"run": "่ฟ่ก",
"runWorkflow": "่ฟ่กๅทฅไฝๆต็จ๏ผShiftๆๅจๅ้ข๏ผ",
"runWorkflowFront": "่ฟ่กๅทฅไฝๆต็จ๏ผๆๅจๅ้ข๏ผ",
+ "settings": "่จญๅฎ",
"showMenu": "ๆพ็คบ่ๅ",
+ "theme": "ไธป้ก",
"toggleBottomPanel": "ๅบ้จ้ขๆฟ"
},
"menuLabels": {
@@ -732,6 +756,8 @@
"Canvas Toggle Link Visibility": "ๅๆข่ฟ็บฟๅฏ่งๆง",
"Canvas Toggle Lock": "ๅๆข่งๅพ้ๅฎ",
"Check for Custom Node Updates": "ๆฃๆฅ่ชๅฎไน่็นๆดๆฐ",
+ "Canvas Toggle Minimap": "็ซๅธๅๆๅฐๅฐๅ",
+ "Check for Custom Node Updates": "ๆชขๆฅ่ช่จ็ฏ้ปๆดๆฐ",
"Check for Updates": "ๆฃๆฅๆดๆฐ",
"Clear Pending Tasks": "ๆธ
้คๅพ
ๅค็ไปปๅก",
"Clear Workflow": "ๆธ
้คๅทฅไฝๆต",
@@ -745,7 +771,9 @@
"Contact Support": "่็ณปๆฏๆ",
"Convert Selection to Subgraph": "ๅฐ้ไธญๅ
ๅฎน่ฝฌๆขไธบๅญๅพ",
"Convert selected nodes to group node": "ๅฐ้ไธญ่็น่ฝฌๆขไธบ็ป่็น",
- "Custom Nodes (Legacy)": "่ชๅฎไน่็น๏ผๆง็๏ผ",
+ "Custom Nodes (Legacy)": "่ช่จ็ฏ้ป๏ผ่็๏ผ",
+ "Custom Nodes Manager": "่ชๅฎไน่็น็ฎก็ๅจ",
+ "Decrease Brush Size in MaskEditor": "ๅจ MaskEditor ไธญๆธๅฐ็ญๅทๅคงๅฐ",
"Delete Selected Items": "ๅ ้ค้ๅฎ็้กน็ฎ",
"Desktop User Guide": "ๆก้ข็ซฏ็จๆทๆๅ",
"Duplicate Current Workflow": "ๅคๅถๅฝๅๅทฅไฝๆต",
@@ -757,7 +785,8 @@
"Give Feedback": "ๆไพๅ้ฆ",
"Group Selected Nodes": "ๅฐ้ไธญ่็น่ฝฌๆขไธบ็ป่็น",
"Help": "ๅธฎๅฉ",
- "Install Missing Custom Nodes": "ๅฎ่ฃ
็ผบๅคฑ็่ชๅฎไน่็น",
+ "Increase Brush Size in MaskEditor": "ๅจ MaskEditor ไธญๅขๅคง็ญๅทๅคงๅฐ",
+ "Install Missing Custom Nodes": "ๅฎ่ฃ็ผบๅฐ็่ช่จ็ฏ้ป",
"Interrupt": "ไธญๆญ",
"Load Default Workflow": "ๅ ่ฝฝ้ป่ฎคๅทฅไฝๆต",
"Manage group nodes": "็ฎก็็ป่็น",
@@ -801,13 +830,13 @@
"Toggle Bottom Panel": "ๅๆขๅบ้จ้ขๆฟ",
"Toggle Focus Mode": "ๅๆขไธๆณจๆจกๅผ",
"Toggle Logs Bottom Panel": "ๅๆขๆฅๅฟๅบ้จ้ขๆฟ",
- "Toggle Model Library Sidebar": "ๅๆขๆจกๅๅบไพง่พนๆ ",
- "Toggle Node Library Sidebar": "ๅๆข่็นๅบไพง่พนๆ ",
- "Toggle Queue Sidebar": "ๅๆข้ๅไพง่พนๆ ",
+ "Toggle Model Library Sidebar": "ๅๆๆจกๅๅบซๅด้ๆฌ",
+ "Toggle Node Library Sidebar": "ๅๆ็ฏ้ปๅบซๅด้ๆฌ",
+ "Toggle Queue Sidebar": "ๅๆไฝๅๅด้ๆฌ",
"Toggle Search Box": "ๅๆขๆ็ดขๆก",
"Toggle Terminal Bottom Panel": "ๅๆข็ป็ซฏๅบ้จ้ขๆฟ",
"Toggle Theme (Dark/Light)": "ๅๆขไธป้ข๏ผๆ/ไบฎ๏ผ",
- "Toggle Workflows Sidebar": "ๅๆขๅทฅไฝๆตไพง่พนๆ ",
+ "Toggle Workflows Sidebar": "ๅๆๅทฅไฝๆต็จๅด้ๆฌ",
"Toggle the Custom Nodes Manager Progress Bar": "ๅๆข่ชๅฎไน่็น็ฎก็ๅจ่ฟๅบฆๆก",
"Undo": "ๆค้",
"Ungroup selected group nodes": "่งฃๆฃ้ไธญ็ป่็น",
@@ -1175,7 +1204,6 @@
},
"showFlatList": "ๅนณ้บ็ปๆ"
},
- "themeToggle": "ไธป้ขๅๆข",
"workflowTab": {
"confirmDelete": "ๆจ็กฎๅฎ่ฆๅ ้คๆญคๅทฅไฝๆตๅ๏ผ",
"confirmDeleteTitle": "ๅ ้คๅทฅไฝๆต๏ผ",
@@ -1599,6 +1627,13 @@
"prefix": "ๅฟ
้กปไปฅ {prefix} ๅผๅคด",
"required": "ๅฟ
ๅกซ"
},
+ "versionMismatchWarning": {
+ "dismiss": "้้",
+ "frontendNewer": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅฏ่ฝ่ๅพ็ซฏ็ๆฌ {backendVersion} ไธ็ธๅฎนใ",
+ "frontendOutdated": "ๅ็ซฏ็ๆฌ {frontendVersion} ๅทฒ้ๆใๅพ็ซฏ้่ฆ {requiredVersion} ็ๆๆด้ซ็ๆฌใ",
+ "title": "็ๆฌ็ธๅฎนๆง่ญฆๅ",
+ "updateFrontend": "ๆดๆฐๅ็ซฏ"
+ },
"welcome": {
"getStarted": "ๅผๅงไฝฟ็จ",
"title": "ๆฌข่ฟไฝฟ็จ ComfyUI"
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index cbb7de4f3..12ecbb5ed 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -29,6 +29,13 @@
"name": "็ปๅธ่ๆฏๅพๅ",
"tooltip": "็ปๅธ่ๆฏ็ๅพๅ URLใไฝ ๅฏไปฅๅจ่พๅบ้ขๆฟไธญๅณ้ฎ็นๅปไธๅผ ๅพ็๏ผๅนถ้ๆฉโ่ฎพไธบ่ๆฏโๆฅไฝฟ็จๅฎใ"
},
+ "Comfy_Canvas_NavigationMode": {
+ "name": "็ซๅธๅฐ่ชๆจกๅผ",
+ "options": {
+ "Left-Click Pan (Legacy)": "ๅทฆ้ตๆๆณ๏ผ่็๏ผ",
+ "Standard (New)": "ๆจๆบ๏ผๆฐ๏ผ"
+ }
+ },
"Comfy_Canvas_SelectionToolbox": {
"name": "ๆพ็คบ้ๆฉๅทฅๅ
ท็ฎฑ"
},
@@ -329,10 +336,6 @@
},
"tooltip": "้ธๅฎๅไฝ็ฝฎใๅจ่กๅ่ฃ็ฝฎไธ๏ผ้ธๅฎๅง็ต้กฏ็คบๆผ้ ็ซฏใ"
},
- "Comfy_Validation_NodeDefs": {
- "name": "ๆ ก้ช่็นๅฎไน๏ผๆ
ข๏ผ",
- "tooltip": "ๆจ่็ป่็นๅผๅ่
ใๅผๅฏๅไผๅจ ComfyUI ๅฏๅจๆถๆ ก้ชๅ
จ้จ่็นๅฎไนใ"
- },
"Comfy_Validation_Workflows": {
"name": "ๆ ก้ชๅทฅไฝๆต"
},
@@ -399,10 +402,6 @@
"LiteGraph_Node_TooltipDelay": {
"name": "ๅทฅๅ
ทๆ็คบๅปถ่ฟ"
},
- "LiteGraph_Pointer_TrackpadGestures": {
- "name": "ๅฏ็จ่งฆๆงๆฟๆๅฟ",
- "tooltip": "ๆญค่ฎพ็ฝฎไธบ็ปๅธๅฏ็จ่งฆๆงๆฟๆจกๅผ๏ผๅ
่ฎธไฝฟ็จๅๆๆๅ็ผฉๆพๅๆๅจใ"
- },
"LiteGraph_Reroute_SplineOffset": {
"name": "้ๆฐ่ทฏ็ฑๆ ทๆกๅ็งป",
"tooltip": "่ดๅกๅฐๆงๅถ็นไป้ๆฐ่ทฏ็ฑไธญๅฟ็น็ๅ็งป"
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 0d2709d53..9fe4bc26f 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -48,6 +48,22 @@ const zProgressWsMessage = z.object({
node: zNodeId
})
+const zNodeProgressState = z.object({
+ value: z.number(),
+ max: z.number(),
+ state: z.enum(['pending', 'running', 'finished', 'error']),
+ node_id: zNodeId,
+ prompt_id: zPromptId,
+ display_node_id: zNodeId.optional(),
+ parent_node_id: zNodeId.optional(),
+ real_node_id: zNodeId.optional()
+})
+
+const zProgressStateWsMessage = z.object({
+ prompt_id: zPromptId,
+ nodes: z.record(zNodeId, zNodeProgressState)
+})
+
const zExecutingWsMessage = z.object({
node: zNodeId,
display_node: zNodeId,
@@ -134,6 +150,8 @@ export type ProgressTextWsMessage = z.infer
export type DisplayComponentWsMessage = z.infer<
typeof zDisplayComponentWsMessage
>
+export type NodeProgressState = z.infer
+export type ProgressStateWsMessage = z.infer
export type FeatureFlagsWsMessage = z.infer
// End of ws messages
@@ -320,6 +338,7 @@ export const zSystemStats = z.object({
embedded_python: z.boolean(),
comfyui_version: z.string(),
pytorch_version: z.string(),
+ required_frontend_version: z.string().optional(),
argv: z.array(z.string()),
ram_total: z.number(),
ram_free: z.number()
@@ -449,7 +468,6 @@ const zSettings = z.object({
'LiteGraph.Canvas.LowQualityRenderingZoomThreshold': z.number(),
'Comfy.Canvas.SelectionToolbox': z.boolean(),
'LiteGraph.Node.TooltipDelay': z.number(),
- 'Comfy.ComfirmClear': z.boolean(),
'LiteGraph.ContextMenu.Scaling': z.boolean(),
'LiteGraph.Reroute.SplineOffset': z.number(),
'Comfy.Toast.DisableReconnectingToast': z.boolean(),
@@ -457,6 +475,8 @@ const zSettings = z.object({
'Comfy.TutorialCompleted': z.boolean(),
'Comfy.InstalledVersion': z.string().nullable(),
'Comfy.Node.AllowImageSizeDraw': z.boolean(),
+ 'Comfy.Minimap.Visible': z.boolean(),
+ 'Comfy.Canvas.NavigationMode': z.string(),
'Comfy-Desktop.AutoUpdate': z.boolean(),
'Comfy-Desktop.SendStatistics': z.boolean(),
'Comfy-Desktop.WindowStyle': z.string(),
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index fa884a8e5..8ac138c5d 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -15,6 +15,7 @@ import type {
LogsRawResponse,
LogsWsMessage,
PendingTaskItem,
+ ProgressStateWsMessage,
ProgressTextWsMessage,
ProgressWsMessage,
PromptResponse,
@@ -31,10 +32,7 @@ import type {
ComfyWorkflowJSON,
NodeId
} from '@/schemas/comfyWorkflowSchema'
-import {
- type ComfyNodeDef,
- validateComfyNodeDef
-} from '@/schemas/nodeDefSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
import { useToastStore } from '@/stores/toastStore'
import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
@@ -104,7 +102,17 @@ interface BackendApiCalls {
logs: LogsWsMessage
/** Binary preview/progress data */
b_preview: Blob
+ /** Binary preview with metadata (node_id, prompt_id) */
+ b_preview_with_metadata: {
+ blob: Blob
+ nodeId: string
+ parentNodeId: string
+ displayNodeId: string
+ realNodeId: string
+ promptId: string
+ }
progress_text: ProgressTextWsMessage
+ progress_state: ProgressStateWsMessage
display_component: DisplayComponentWsMessage
}
@@ -433,6 +441,33 @@ export class ComfyApi extends EventTarget {
})
this.dispatchCustomEvent('b_preview', imageBlob)
break
+ case 4:
+ // PREVIEW_IMAGE_WITH_METADATA
+ const decoder4 = new TextDecoder()
+ const metadataLength = view.getUint32(4)
+ const metadataBytes = event.data.slice(8, 8 + metadataLength)
+ const metadata = JSON.parse(decoder4.decode(metadataBytes))
+ const imageData4 = event.data.slice(8 + metadataLength)
+
+ let imageMime4 = metadata.image_type
+
+ const imageBlob4 = new Blob([imageData4], {
+ type: imageMime4
+ })
+
+ // Dispatch enhanced preview event with metadata
+ this.dispatchCustomEvent('b_preview_with_metadata', {
+ blob: imageBlob4,
+ nodeId: metadata.node_id,
+ displayNodeId: metadata.display_node_id,
+ parentNodeId: metadata.parent_node_id,
+ realNodeId: metadata.real_node_id,
+ promptId: metadata.prompt_id
+ })
+
+ // Also dispatch legacy b_preview for backward compatibility
+ this.dispatchCustomEvent('b_preview', imageBlob4)
+ break
default:
throw new Error(
`Unknown binary websocket message of type ${eventType}`
@@ -462,6 +497,7 @@ export class ComfyApi extends EventTarget {
case 'execution_cached':
case 'execution_success':
case 'progress':
+ case 'progress_state':
case 'executed':
case 'graphChanged':
case 'promptQueued':
@@ -534,31 +570,9 @@ export class ComfyApi extends EventTarget {
* Loads node object definitions for the graph
* @returns The node definitions
*/
- async getNodeDefs({ validate = false }: { validate?: boolean } = {}): Promise<
- Record
- > {
+ async getNodeDefs(): Promise> {
const resp = await this.fetchApi('/object_info', { cache: 'no-store' })
- const objectInfoUnsafe = await resp.json()
- if (!validate) {
- return objectInfoUnsafe
- }
- // Validate node definitions against zod schema. (slow)
- const objectInfo: Record = {}
- for (const key in objectInfoUnsafe) {
- const validatedDef = validateComfyNodeDef(
- objectInfoUnsafe[key],
- /* onError=*/ (errorMessage: string) => {
- console.warn(
- `Skipping invalid node definition: ${key}. See debug log for more information.`
- )
- console.debug(errorMessage)
- }
- )
- if (validatedDef !== null) {
- objectInfo[key] = validatedDef
- }
- }
- return objectInfo
+ return await resp.json()
}
/**
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 7744ae757..19f51c270 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -47,6 +47,7 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
import { useExecutionStore } from '@/stores/executionStore'
import { useExtensionStore } from '@/stores/extensionStore'
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
import { useModelStore } from '@/stores/modelStore'
import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
@@ -60,6 +61,10 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
import { ExtensionManager } from '@/types/extensionTypes'
import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
import { graphToPrompt } from '@/utils/executionUtil'
+import {
+ getNodeByExecutionId,
+ triggerCallbackOnAllNodes
+} from '@/utils/graphTraversalUtil'
import {
executeWidgetsCallback,
fixLinkInputSlots,
@@ -75,6 +80,7 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
import { type ComfyApi, PromptExecutionError, api } from './api'
import { defaultGraph } from './defaultGraph'
import {
+ getAvifMetadata,
getFlacMetadata,
getLatentMetadata,
getPngMetadata,
@@ -110,6 +116,8 @@ type Clipspace = {
images?: any[] | null
selectedIndex: number
img_paste_mode: string
+ paintedIndex: number
+ combinedIndex: number
}
export class ComfyApp {
@@ -194,6 +202,8 @@ export class ComfyApp {
/**
* @deprecated Use useExecutionStore().executingNodeId instead
+ * TODO: Update to support multiple executing nodes. This getter returns only the first executing node.
+ * Consider updating consumers to handle multiple nodes or use executingNodeIds array.
*/
get runningNodeId(): NodeId | null {
return useExecutionStore().executingNodeId
@@ -349,13 +359,18 @@ export class ComfyApp {
selectedIndex = node.imageIndex
}
+ const paintedIndex = selectedIndex + 1
+ const combinedIndex = selectedIndex + 2
+
ComfyApp.clipspace = {
widgets: widgets,
imgs: imgs,
original_imgs: orig_imgs,
images: node.images,
selectedIndex: selectedIndex,
- img_paste_mode: 'selected' // reset to default im_paste_mode state on copy action
+ img_paste_mode: 'selected', // reset to default im_paste_mode state on copy action
+ paintedIndex: paintedIndex,
+ combinedIndex: combinedIndex
}
ComfyApp.clipspace_return_node = null
@@ -368,6 +383,8 @@ export class ComfyApp {
static pasteFromClipspace(node: LGraphNode) {
if (ComfyApp.clipspace) {
// image paste
+ const combinedImgSrc =
+ ComfyApp.clipspace.imgs?.[ComfyApp.clipspace.combinedIndex].src
if (ComfyApp.clipspace.imgs && node.imgs) {
if (node.images && ComfyApp.clipspace.images) {
if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
@@ -401,6 +418,28 @@ export class ComfyApp {
}
}
+ // Paste the RGB canvas if paintedindex exists
+ if (
+ ComfyApp.clipspace.imgs?.[ComfyApp.clipspace.paintedIndex] &&
+ node.imgs
+ ) {
+ const paintedImg = new Image()
+ paintedImg.src =
+ ComfyApp.clipspace.imgs[ComfyApp.clipspace.paintedIndex].src
+ node.imgs.push(paintedImg) // Add the RGB canvas to the node's images
+ }
+
+ // Store only combined image inside the node if it exists
+ if (
+ ComfyApp.clipspace.imgs?.[ComfyApp.clipspace.combinedIndex] &&
+ node.imgs &&
+ combinedImgSrc
+ ) {
+ const combinedImg = new Image()
+ combinedImg.src = combinedImgSrc
+ node.imgs = [combinedImg]
+ }
+
if (node.widgets) {
if (ComfyApp.clipspace.images) {
const clip_image =
@@ -635,36 +674,24 @@ export class ComfyApp {
api.addEventListener('executing', () => {
this.graph.setDirtyCanvas(true, false)
- // @ts-expect-error fixme ts strict error
- this.revokePreviews(this.runningNodeId)
- // @ts-expect-error fixme ts strict error
- delete this.nodePreviewImages[this.runningNodeId]
})
api.addEventListener('executed', ({ detail }) => {
- const output = this.nodeOutputs[detail.display_node || detail.node]
- if (detail.merge && output) {
- for (const k in detail.output ?? {}) {
- const v = output[k]
- if (v instanceof Array) {
- output[k] = v.concat(detail.output[k])
- } else {
- output[k] = detail.output[k]
- }
- }
- } else {
- this.nodeOutputs[detail.display_node || detail.node] = detail.output
- }
- const node = this.graph.getNodeById(detail.display_node || detail.node)
- if (node) {
- if (node.onExecuted) node.onExecuted(detail.output)
+ const nodeOutputStore = useNodeOutputStore()
+ const executionId = String(detail.display_node || detail.node)
+
+ nodeOutputStore.setNodeOutputsByExecutionId(executionId, detail.output, {
+ merge: detail.merge
+ })
+
+ const node = getNodeByExecutionId(this.graph, executionId)
+ if (node && node.onExecuted) {
+ node.onExecuted(detail.output)
}
})
api.addEventListener('execution_start', () => {
- this.graph.nodes.forEach((node) => {
- if (node.onExecutionStart) node.onExecutionStart()
- })
+ triggerCallbackOnAllNodes(this.graph, 'onExecutionStart')
})
api.addEventListener('execution_error', ({ detail }) => {
@@ -689,15 +716,16 @@ export class ComfyApp {
this.canvas.draw(true, true)
})
- api.addEventListener('b_preview', ({ detail }) => {
- const id = this.runningNodeId
- if (id == null) return
-
- const blob = detail
- const blobUrl = URL.createObjectURL(blob)
+ api.addEventListener('b_preview_with_metadata', ({ detail }) => {
+ // Enhanced preview with explicit node context
+ const { blob, displayNodeId } = detail
+ const { setNodePreviewsByExecutionId, revokePreviewsByExecutionId } =
+ useNodeOutputStore()
// Ensure clean up if `executing` event is missed.
- this.revokePreviews(id)
- this.nodePreviewImages[id] = [blobUrl]
+ revokePreviewsByExecutionId(displayNodeId)
+ const blobUrl = URL.createObjectURL(blob)
+ // Preview cleanup is handled in progress_state event to support multiple concurrent previews
+ setNodePreviewsByExecutionId(displayNodeId, [blobUrl])
})
api.init()
@@ -724,16 +752,12 @@ export class ComfyApp {
fixLinkInputSlots(this)
// Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
- for (const node of graph.nodes) {
- node.onGraphConfigured?.()
- }
+ triggerCallbackOnAllNodes(this, 'onGraphConfigured')
const r = onConfigure?.apply(this, args)
// Fire after onConfigure, used by primitives to generate widget using input nodes config
- for (const node of graph.nodes) {
- node.onAfterGraphConfigured?.()
- }
+ triggerCallbackOnAllNodes(this, 'onAfterGraphConfigured')
return r
}
@@ -859,26 +883,33 @@ export class ComfyApp {
private updateVueAppNodeDefs(defs: Record) {
// Frontend only nodes registered by custom nodes.
// Example: https://github.com/rgthree/rgthree-comfy/blob/dd534e5384be8cf0c0fa35865afe2126ba75ac55/src_web/comfyui/fast_groups_bypasser.ts#L10
- const rawDefs: Record = Object.fromEntries(
- Object.entries(LiteGraph.registered_node_types).map(([name, node]) => [
+
+ // Only create frontend_only definitions for nodes that don't have backend definitions
+ const frontendOnlyDefs: Record = {}
+ for (const [name, node] of Object.entries(
+ LiteGraph.registered_node_types
+ )) {
+ // Skip if we already have a backend definition or system definition
+ if (name in defs || name in SYSTEM_NODE_DEFS) {
+ continue
+ }
+
+ frontendOnlyDefs[name] = {
name,
- {
- name,
- display_name: name,
- category: node.category || '__frontend_only__',
- input: { required: {}, optional: {} },
- output: [],
- output_name: [],
- output_is_list: [],
- output_node: false,
- python_module: 'custom_nodes.frontend_only',
- description: `Frontend only node for ${name}`
- } as ComfyNodeDefV1
- ])
- )
+ display_name: name,
+ category: node.category || '__frontend_only__',
+ input: { required: {}, optional: {} },
+ output: [],
+ output_name: [],
+ output_is_list: [],
+ output_node: false,
+ python_module: 'custom_nodes.frontend_only',
+ description: `Frontend only node for ${name}`
+ } as ComfyNodeDefV1
+ }
const allNodeDefs = {
- ...rawDefs,
+ ...frontendOnlyDefs,
...defs,
...SYSTEM_NODE_DEFS
}
@@ -909,12 +940,7 @@ export class ComfyApp {
.join('/')
})
- return _.mapValues(
- await api.getNodeDefs({
- validate: useSettingStore().get('Comfy.Validation.NodeDefs')
- }),
- (def) => translateNodeDef(def)
- )
+ return _.mapValues(await api.getNodeDefs(), (def) => translateNodeDef(def))
}
/**
@@ -1355,6 +1381,16 @@ export class ComfyApp {
} else {
this.showErrorOnFileLoad(file)
}
+ } else if (file.type === 'image/avif') {
+ const { workflow, prompt } = await getAvifMetadata(file)
+
+ if (workflow) {
+ this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+ } else if (prompt) {
+ this.loadApiJson(JSON.parse(prompt), fileName)
+ } else {
+ this.showErrorOnFileLoad(file)
+ }
} else if (file.type === 'image/webp') {
const pngInfo = await getWebpMetadata(file)
// Support loading workflows from that webp custom node.
@@ -1676,25 +1712,13 @@ export class ComfyApp {
}
}
- /**
- * Frees memory allocated to image preview blobs for a specific node, by revoking the URLs associated with them.
- * @param nodeId ID of the node to revoke all preview images of
- */
- revokePreviews(nodeId: NodeId) {
- if (!this.nodePreviewImages[nodeId]?.[Symbol.iterator]) return
- for (const url of this.nodePreviewImages[nodeId]) {
- URL.revokeObjectURL(url)
- }
- }
/**
* Clean current state
*/
clean() {
this.nodeOutputs = {}
- for (const id of Object.keys(this.nodePreviewImages)) {
- this.revokePreviews(id)
- }
- this.nodePreviewImages = {}
+ const { revokeAllPreviews } = useNodeOutputStore()
+ revokeAllPreviews()
const executionStore = useExecutionStore()
executionStore.lastNodeErrors = null
executionStore.lastExecutionError = null
diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index 9846234fc..a24b2619d 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -44,12 +44,30 @@ export interface DOMWidget
inputEl?: T
}
+/**
+ * Additional props that can be passed to component widgets.
+ * These are in addition to the standard props that are always provided:
+ * - modelValue: The widget's value (handled by v-model)
+ * - widget: Reference to the widget instance
+ * - onUpdate:modelValue: The update handler for v-model
+ */
+export type ComponentWidgetCustomProps = Record
+
+/**
+ * Standard props that are handled separately by DomWidget.vue and should be
+ * omitted when defining custom props for component widgets
+ */
+export type ComponentWidgetStandardProps =
+ | 'modelValue'
+ | 'widget'
+ | 'onUpdate:modelValue'
+
/**
* A DOM widget that wraps a Vue component as a litegraph widget.
*/
export interface ComponentWidget<
V extends object | string,
- P = Record
+ P extends ComponentWidgetCustomProps = ComponentWidgetCustomProps
> extends BaseDOMWidget {
readonly component: Component
readonly inputSpec: InputSpec
@@ -158,6 +176,21 @@ abstract class BaseDOMWidgetImpl
override onRemove(): void {
useDomWidgetStore().unregisterWidget(this.id)
}
+
+ override createCopyForNode(node: LGraphNode): this {
+ // @ts-expect-error
+ const cloned: this = new (this.constructor as typeof this)({
+ node: node,
+ name: this.name,
+ type: this.type,
+ options: this.options
+ })
+ cloned.value = this.value
+ // Preserve the Y position from the original widget to maintain proper positioning
+ // when widgets are promoted through subgraph nesting
+ cloned.y = this.y
+ return cloned
+ }
}
export class DOMWidgetImpl
@@ -177,6 +210,22 @@ export class DOMWidgetImpl
this.element = obj.element
}
+ override createCopyForNode(node: LGraphNode): this {
+ // @ts-expect-error
+ const cloned: this = new (this.constructor as typeof this)({
+ node: node,
+ name: this.name,
+ type: this.type,
+ element: this.element, // Include the element!
+ options: this.options
+ })
+ cloned.value = this.value
+ // Preserve the Y position from the original widget to maintain proper positioning
+ // when widgets are promoted through subgraph nesting
+ cloned.y = this.y
+ return cloned
+ }
+
/** Extract DOM widget size info */
override computeLayoutSize(node: LGraphNode) {
if (this.type === 'hidden') {
@@ -222,7 +271,7 @@ export class DOMWidgetImpl
export class ComponentWidgetImpl<
V extends object | string,
- P = Record
+ P extends ComponentWidgetCustomProps = ComponentWidgetCustomProps
>
extends BaseDOMWidgetImpl
implements ComponentWidget
diff --git a/src/scripts/metadata/avif.ts b/src/scripts/metadata/avif.ts
new file mode 100644
index 000000000..d23adf4bb
--- /dev/null
+++ b/src/scripts/metadata/avif.ts
@@ -0,0 +1,412 @@
+import {
+ type AvifIinfBox,
+ type AvifIlocBox,
+ type AvifInfeBox,
+ ComfyMetadata,
+ ComfyMetadataTags,
+ type IsobmffBoxContentRange
+} from '@/types/metadataTypes'
+
+const readNullTerminatedString = (
+ dataView: DataView,
+ start: number,
+ end: number
+): { str: string; length: number } => {
+ let length = 0
+ while (start + length < end && dataView.getUint8(start + length) !== 0) {
+ length++
+ }
+ const str = new TextDecoder('utf-8').decode(
+ new Uint8Array(dataView.buffer, dataView.byteOffset + start, length)
+ )
+ return { str, length: length + 1 } // Include null terminator
+}
+
+const parseInfeBox = (dataView: DataView, start: number): AvifInfeBox => {
+ const version = dataView.getUint8(start)
+ const flags = dataView.getUint32(start) & 0xffffff
+ let offset = start + 4
+
+ let item_ID: number, item_protection_index: number, item_type: string
+
+ if (version >= 2) {
+ if (version === 2) {
+ item_ID = dataView.getUint16(offset)
+ offset += 2
+ } else {
+ item_ID = dataView.getUint32(offset)
+ offset += 4
+ }
+
+ item_protection_index = dataView.getUint16(offset)
+ offset += 2
+ item_type = String.fromCharCode(
+ ...new Uint8Array(dataView.buffer, dataView.byteOffset + offset, 4)
+ )
+ offset += 4
+
+ const { str: item_name, length: name_len } = readNullTerminatedString(
+ dataView,
+ offset,
+ dataView.byteLength
+ )
+ offset += name_len
+
+ const content_type = readNullTerminatedString(
+ dataView,
+ offset,
+ dataView.byteLength
+ ).str
+
+ return {
+ box_header: { size: 0, type: 'infe' }, // Size is dynamic
+ version,
+ flags,
+ item_ID,
+ item_protection_index,
+ item_type,
+ item_name,
+ content_type
+ }
+ }
+ throw new Error(`Unsupported infe box version: ${version}`)
+}
+
+const parseIinfBox = (
+ dataView: DataView,
+ range: IsobmffBoxContentRange
+): AvifIinfBox => {
+ if (!range) throw new Error('iinf box not found')
+
+ const version = dataView.getUint8(range.start)
+ const flags = dataView.getUint32(range.start) & 0xffffff
+ let offset = range.start + 4
+
+ const entry_count =
+ version === 0 ? dataView.getUint16(offset) : dataView.getUint32(offset)
+ offset += version === 0 ? 2 : 4
+
+ const entries: AvifInfeBox[] = []
+ for (let i = 0; i < entry_count; i++) {
+ const boxSize = dataView.getUint32(offset)
+ const boxType = String.fromCharCode(
+ ...new Uint8Array(dataView.buffer, dataView.byteOffset + offset + 4, 4)
+ )
+
+ if (boxType === 'infe') {
+ const infe = parseInfeBox(dataView, offset + 8)
+ infe.box_header.size = boxSize
+ entries.push(infe)
+ }
+ offset += boxSize
+ }
+
+ return {
+ box_header: { size: range.end - range.start + 8, type: 'iinf' },
+ version,
+ flags,
+ entry_count,
+ entries
+ }
+}
+
+const parseIlocBox = (
+ dataView: DataView,
+ range: IsobmffBoxContentRange
+): AvifIlocBox => {
+ if (!range) throw new Error('iloc box not found')
+
+ const version = dataView.getUint8(range.start)
+ const flags = dataView.getUint32(range.start) & 0xffffff
+ let offset = range.start + 4
+
+ const sizes = dataView.getUint8(offset++)
+ const offset_size = (sizes >> 4) & 0x0f
+ const length_size = sizes & 0x0f
+
+ const base_offset_size = (dataView.getUint8(offset) >> 4) & 0x0f
+ const index_size =
+ version === 1 || version === 2 ? dataView.getUint8(offset) & 0x0f : 0
+ offset++
+
+ const item_count =
+ version < 2 ? dataView.getUint16(offset) : dataView.getUint32(offset)
+ offset += version < 2 ? 2 : 4
+
+ const items = []
+ for (let i = 0; i < item_count; i++) {
+ const item_ID =
+ version < 2 ? dataView.getUint16(offset) : dataView.getUint32(offset)
+ offset += version < 2 ? 2 : 4
+
+ if (version === 1 || version === 2) {
+ offset += 2 // construction_method
+ }
+
+ const data_reference_index = dataView.getUint16(offset)
+ offset += 2
+
+ const base_offset = base_offset_size > 0 ? dataView.getUint32(offset) : 0 // Simplified
+ offset += base_offset_size
+
+ const extent_count = dataView.getUint16(offset)
+ offset += 2
+
+ const extents = []
+ for (let j = 0; j < extent_count; j++) {
+ if ((version === 1 || version === 2) && index_size > 0) {
+ offset += index_size
+ }
+ const extent_offset = dataView.getUint32(offset) // Simplified
+ offset += offset_size
+ const extent_length = dataView.getUint32(offset) // Simplified
+ offset += length_size
+ extents.push({ extent_offset, extent_length })
+ }
+ items.push({
+ item_ID,
+ data_reference_index,
+ base_offset,
+ extent_count,
+ extents
+ })
+ }
+
+ return {
+ box_header: { size: range.end - range.start + 8, type: 'iloc' },
+ version,
+ flags,
+ offset_size,
+ length_size,
+ base_offset_size,
+ index_size,
+ item_count,
+ items
+ }
+}
+
+function findBox(
+ dataView: DataView,
+ start: number,
+ end: number,
+ type: string
+): IsobmffBoxContentRange {
+ let offset = start
+ while (offset < end) {
+ if (offset + 8 > end) break
+ const boxLength = dataView.getUint32(offset)
+ const boxType = String.fromCharCode(
+ ...new Uint8Array(dataView.buffer, dataView.byteOffset + offset + 4, 4)
+ )
+
+ if (boxLength === 0) break
+
+ if (boxType === type) {
+ return { start: offset + 8, end: offset + boxLength }
+ }
+ if (offset + boxLength > end) break
+ offset += boxLength
+ }
+ return null
+}
+
+function parseAvifMetadata(buffer: ArrayBuffer): ComfyMetadata {
+ const metadata: ComfyMetadata = {}
+ const dataView = new DataView(buffer)
+
+ if (
+ dataView.getUint32(4) !== 0x66747970 ||
+ dataView.getUint32(8) !== 0x61766966
+ ) {
+ console.error('Not a valid AVIF file')
+ return {}
+ }
+
+ const metaBox = findBox(dataView, 0, dataView.byteLength, 'meta')
+ if (!metaBox) return {}
+
+ const metaBoxContentStart = metaBox.start + 4 // Skip version and flags
+
+ const iinfBoxRange = findBox(
+ dataView,
+ metaBoxContentStart,
+ metaBox.end,
+ 'iinf'
+ )
+ const iinf = parseIinfBox(dataView, iinfBoxRange)
+
+ const exifInfe = iinf.entries.find((e) => e.item_type === 'Exif')
+ if (!exifInfe) return {}
+
+ const ilocBoxRange = findBox(
+ dataView,
+ metaBoxContentStart,
+ metaBox.end,
+ 'iloc'
+ )
+ const iloc = parseIlocBox(dataView, ilocBoxRange)
+
+ const exifIloc = iloc.items.find((i) => i.item_ID === exifInfe.item_ID)
+ if (!exifIloc || exifIloc.extents.length === 0) return {}
+
+ const exifExtent = exifIloc.extents[0]
+ const itemData = new Uint8Array(
+ buffer,
+ exifExtent.extent_offset,
+ exifExtent.extent_length
+ )
+
+ let tiffHeaderOffset = -1
+ for (let i = 0; i < itemData.length - 4; i++) {
+ if (
+ (itemData[i] === 0x4d &&
+ itemData[i + 1] === 0x4d &&
+ itemData[i + 2] === 0x00 &&
+ itemData[i + 3] === 0x2a) || // MM*
+ (itemData[i] === 0x49 &&
+ itemData[i + 1] === 0x49 &&
+ itemData[i + 2] === 0x2a &&
+ itemData[i + 3] === 0x00) // II*
+ ) {
+ tiffHeaderOffset = i
+ break
+ }
+ }
+
+ if (tiffHeaderOffset !== -1) {
+ const exifData = itemData.subarray(tiffHeaderOffset)
+ const data: Record = parseExifData(exifData)
+ for (const key in data) {
+ const value = data[key]
+ if (typeof value === 'string') {
+ if (key === 'usercomment') {
+ try {
+ const metadataJson = JSON.parse(value)
+ if (metadataJson.prompt) {
+ metadata[ComfyMetadataTags.PROMPT] = metadataJson.prompt
+ }
+ if (metadataJson.workflow) {
+ metadata[ComfyMetadataTags.WORKFLOW] = metadataJson.workflow
+ }
+ } catch (e) {
+ console.error('Failed to parse usercomment JSON', e)
+ }
+ } else {
+ const [metadataKey, ...metadataValueParts] = value.split(':')
+ const metadataValue = metadataValueParts.join(':').trim()
+ if (
+ metadataKey.toLowerCase() ===
+ ComfyMetadataTags.PROMPT.toLowerCase() ||
+ metadataKey.toLowerCase() ===
+ ComfyMetadataTags.WORKFLOW.toLowerCase()
+ ) {
+ try {
+ const jsonValue = JSON.parse(metadataValue)
+ metadata[metadataKey.toLowerCase() as keyof ComfyMetadata] =
+ jsonValue
+ } catch (e) {
+ console.error(`Failed to parse JSON for ${metadataKey}`, e)
+ }
+ }
+ }
+ }
+ }
+ } else {
+ console.log('Warning: TIFF header not found in EXIF data.')
+ }
+
+ return metadata
+}
+
+// @ts-expect-error fixme ts strict error
+export function parseExifData(exifData) {
+ // Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
+ const isLittleEndian = String.fromCharCode(...exifData.slice(0, 2)) === 'II'
+
+ // Function to read 16-bit and 32-bit integers from binary data
+ // @ts-expect-error fixme ts strict error
+ function readInt(offset, isLittleEndian, length) {
+ let arr = exifData.slice(offset, offset + length)
+ if (length === 2) {
+ return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint16(
+ 0,
+ isLittleEndian
+ )
+ } else if (length === 4) {
+ return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint32(
+ 0,
+ isLittleEndian
+ )
+ }
+ }
+
+ // Read the offset to the first IFD (Image File Directory)
+ const ifdOffset = readInt(4, isLittleEndian, 4)
+
+ // @ts-expect-error fixme ts strict error
+ function parseIFD(offset) {
+ const numEntries = readInt(offset, isLittleEndian, 2)
+ const result = {}
+
+ // @ts-expect-error fixme ts strict error
+ for (let i = 0; i < numEntries; i++) {
+ const entryOffset = offset + 2 + i * 12
+ const tag = readInt(entryOffset, isLittleEndian, 2)
+ const type = readInt(entryOffset + 2, isLittleEndian, 2)
+ const numValues = readInt(entryOffset + 4, isLittleEndian, 4)
+ const valueOffset = readInt(entryOffset + 8, isLittleEndian, 4)
+
+ // Read the value(s) based on the data type
+ let value
+ if (type === 2) {
+ // ASCII string
+ value = new TextDecoder('utf-8').decode(
+ // @ts-expect-error fixme ts strict error
+ exifData.subarray(valueOffset, valueOffset + numValues - 1)
+ )
+ }
+
+ // @ts-expect-error fixme ts strict error
+ result[tag] = value
+ }
+
+ return result
+ }
+
+ // Parse the first IFD
+ const ifdData = parseIFD(ifdOffset)
+ return ifdData
+}
+
+export function getFromAvifFile(file: File): Promise> {
+ return new Promise>((resolve) => {
+ const reader = new FileReader()
+ reader.onload = (event) => {
+ const buffer = event.target?.result as ArrayBuffer
+ if (!buffer) {
+ resolve({})
+ return
+ }
+
+ try {
+ const comfyMetadata = parseAvifMetadata(buffer)
+ const result: Record = {}
+ if (comfyMetadata.prompt) {
+ result.prompt = JSON.stringify(comfyMetadata.prompt)
+ }
+ if (comfyMetadata.workflow) {
+ result.workflow = JSON.stringify(comfyMetadata.workflow)
+ }
+ resolve(result)
+ } catch (e) {
+ console.error('Parser: Error parsing AVIF metadata:', e)
+ resolve({})
+ }
+ }
+ reader.onerror = (err) => {
+ console.error('FileReader: Error reading AVIF file:', err)
+ resolve({})
+ }
+ reader.readAsArrayBuffer(file)
+ })
+}
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 7c7f6f597..689537f7e 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -1,6 +1,7 @@
import { LiteGraph } from '@comfyorg/litegraph'
import { api } from './api'
+import { getFromAvifFile } from './metadata/avif'
import { getFromFlacFile } from './metadata/flac'
import { getFromPngFile } from './metadata/png'
@@ -13,6 +14,10 @@ export function getFlacMetadata(file: File): Promise> {
return getFromFlacFile(file)
}
+export function getAvifMetadata(file: File): Promise> {
+ return getFromAvifFile(file)
+}
+
// @ts-expect-error fixme ts strict error
function parseExifData(exifData) {
// Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index 9cb5a2113..778b712d9 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -21,7 +21,7 @@ export function clone(obj: T): T {
* There are external callers to this function, so we need to keep it for now
*/
export function applyTextReplacements(app: ComfyApp, value: string): string {
- return _applyTextReplacements(app.graph.nodes, value)
+ return _applyTextReplacements(app.graph, value)
}
export async function addStylesheet(
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
new file mode 100644
index 000000000..7621e3037
--- /dev/null
+++ b/src/services/audioService.ts
@@ -0,0 +1,84 @@
+import { register } from 'extendable-media-recorder'
+import { connect } from 'extendable-media-recorder-wav-encoder'
+
+import { api } from '@/scripts/api'
+import { useToastStore } from '@/stores/toastStore'
+
+export interface AudioRecordingError {
+ type: 'permission' | 'not_supported' | 'encoder' | 'recording' | 'unknown'
+ message: string
+ originalError?: unknown
+}
+
+let isEncoderRegistered: boolean = false
+
+export const useAudioService = () => {
+ const handleError = (
+ type: AudioRecordingError['type'],
+ message: string,
+ originalError?: unknown
+ ) => {
+ console.error(`Audio Service Error (${type}):`, message, originalError)
+ }
+
+ const stopAllTracks = (currentStream: MediaStream | null) => {
+ if (currentStream) {
+ currentStream.getTracks().forEach((track) => {
+ track.stop()
+ })
+ currentStream = null
+ }
+ }
+
+ const registerWavEncoder = async (): Promise => {
+ if (isEncoderRegistered) {
+ return
+ }
+
+ try {
+ await register(await connect())
+ isEncoderRegistered = true
+ } catch (err) {
+ if (
+ err instanceof Error &&
+ err.message.includes('already an encoder stored')
+ ) {
+ isEncoderRegistered = true
+ } else {
+ handleError('encoder', 'Failed to register WAV encoder', err)
+ }
+ }
+ }
+
+ const convertBlobToFileAndSubmit = async (blob: Blob): Promise => {
+ const name = `recording-${Date.now()}.wav`
+ const file = new File([blob], name, { type: blob.type || 'audio/wav' })
+
+ const body = new FormData()
+ body.append('image', file)
+ body.append('subfolder', 'audio')
+ body.append('type', 'temp')
+
+ const resp = await api.fetchApi('/upload/image', {
+ method: 'POST',
+ body
+ })
+
+ if (resp.status !== 200) {
+ const err = `Error uploading temp file: ${resp.status} - ${resp.statusText}`
+ useToastStore().addAlert(err)
+ throw new Error(err)
+ }
+
+ const tempAudio = await resp.json()
+
+ return `audio/${tempAudio.name} [temp]`
+ }
+
+ return {
+ // Methods
+ convertBlobToFileAndSubmit,
+ registerWavEncoder,
+ stopAllTracks
+ }
+}
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 171629c82..6510ae7ec 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -279,7 +279,7 @@ export const useDialogService = () => {
onSuccess: () => resolve(true)
},
dialogComponentProps: {
- closable: false,
+ closable: true,
onClose: () => resolve(false)
}
})
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index afd31d83b..4a53ed448 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -32,7 +32,10 @@ import type {
} from '@/schemas/nodeDef/nodeDefSchemaV2'
import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
import { ComfyApp, app } from '@/scripts/app'
+import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
import { $el } from '@/scripts/ui'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useExecutionStore } from '@/stores/executionStore'
import { useCanvasStore } from '@/stores/graphStore'
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -87,6 +90,37 @@ export const useLitegraphService = () => {
constructor() {
super(app.graph, subgraph, instanceData)
+ // Set up event listener for promoted widget registration
+ subgraph.events.addEventListener('widget-promoted', (event) => {
+ const { widget } = event.detail
+ // Only handle DOM widgets
+ if (!isDOMWidget(widget) && !isComponentWidget(widget)) return
+
+ const domWidgetStore = useDomWidgetStore()
+ if (!domWidgetStore.widgetStates.has(widget.id)) {
+ domWidgetStore.registerWidget(widget)
+ // Set initial visibility based on whether the widget's node is in the current graph
+ const widgetState = domWidgetStore.widgetStates.get(widget.id)
+ if (widgetState) {
+ const currentGraph = canvasStore.getCanvas().graph
+ widgetState.visible =
+ currentGraph?.nodes.includes(widget.node) ?? false
+ }
+ }
+ })
+
+ // Set up event listener for promoted widget removal
+ subgraph.events.addEventListener('widget-demoted', (event) => {
+ const { widget } = event.detail
+ // Only handle DOM widgets
+ if (!isDOMWidget(widget) && !isComponentWidget(widget)) return
+
+ const domWidgetStore = useDomWidgetStore()
+ if (domWidgetStore.widgetStates.has(widget.id)) {
+ domWidgetStore.unregisterWidget(widget.id)
+ }
+ })
+
this.#setupStrokeStyles()
this.#addInputs(ComfyNode.nodeData.inputs)
this.#addOutputs(ComfyNode.nodeData.outputs)
@@ -95,9 +129,15 @@ export const useLitegraphService = () => {
void extensionService.invokeExtensionsAsync('nodeCreated', this)
this.badges.push(
new LGraphBadge({
- text: 'โ',
- fgColor: '#dad0de',
- bgColor: '#b3b'
+ text: '',
+ iconOptions: {
+ unicode: '\ue96e',
+ fontFamily: 'PrimeIcons',
+ color: '#ffffff',
+ fontSize: 12
+ },
+ fgColor: '#ffffff',
+ bgColor: '#3b82f6'
})
)
}
@@ -107,7 +147,11 @@ export const useLitegraphService = () => {
*/
#setupStrokeStyles() {
this.strokeStyles['running'] = function (this: LGraphNode) {
- if (this.id == app.runningNodeId) {
+ const nodeId = String(this.id)
+ const nodeLocatorId = useWorkflowStore().nodeIdToNodeLocatorId(nodeId)
+ const state =
+ useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
+ if (state === 'running') {
return { color: '#0f0' }
}
}
@@ -362,7 +406,11 @@ export const useLitegraphService = () => {
*/
#setupStrokeStyles() {
this.strokeStyles['running'] = function (this: LGraphNode) {
- if (this.id == app.runningNodeId) {
+ const nodeId = String(this.id)
+ const nodeLocatorId = useWorkflowStore().nodeIdToNodeLocatorId(nodeId)
+ const state =
+ useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
+ if (state === 'running') {
return { color: '#0f0' }
}
}
@@ -745,7 +793,7 @@ export const useLitegraphService = () => {
if (isImageNode(this)) {
options.push({
- content: 'Open in MaskEditor',
+ content: 'Open in MaskEditor | Image Canvas',
callback: () => {
ComfyApp.copyToClipspace(this)
// @ts-expect-error fixme ts strict error
diff --git a/src/stores/README.md b/src/stores/README.md
index 3a61d7ae6..de45fdc71 100644
--- a/src/stores/README.md
+++ b/src/stores/README.md
@@ -135,6 +135,7 @@ The following table lists ALL stores in the system as of 2025-01-30:
| toastStore.ts | Manages toast notifications | UI |
| userFileStore.ts | Manages user file operations | Files |
| userStore.ts | Manages user data and preferences | User |
+| versionCompatibilityStore.ts | Manages frontend/backend version compatibility warnings | Core |
| widgetStore.ts | Manages widget configurations | Widgets |
| workflowStore.ts | Handles workflow data and operations | Workflows |
| workflowTemplatesStore.ts | Manages workflow templates | Workflows |
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index 67a4805b7..1ad8f3f24 100644
--- a/src/stores/dialogStore.ts
+++ b/src/stores/dialogStore.ts
@@ -26,6 +26,8 @@ interface CustomDialogComponentProps {
modal?: boolean
position?: DialogPosition
pt?: DialogPassThroughOptions
+ closeOnEscape?: boolean
+ dismissableMask?: boolean
}
export type DialogComponentProps = InstanceType['$props'] &
@@ -64,6 +66,12 @@ export interface ShowDialogOptions {
export const useDialogStore = defineStore('dialog', () => {
const dialogStack = ref([])
+ /**
+ * The key of the currently active (top-most) dialog.
+ * Only the active dialog can be closed with the ESC key.
+ */
+ const activeKey = ref(null)
+
const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
/**
@@ -89,17 +97,27 @@ export const useDialogStore = defineStore('dialog', () => {
if (index !== -1) {
const [dialog] = dialogStack.value.splice(index, 1)
insertDialogByPriority(dialog)
+ activeKey.value = dialogKey
+ updateCloseOnEscapeStates()
}
}
function closeDialog(options?: { key: string }) {
const targetDialog = options
? dialogStack.value.find((d) => d.key === options.key)
- : dialogStack.value[0]
+ : dialogStack.value.find((d) => d.key === activeKey.value)
if (!targetDialog) return
targetDialog.dialogComponentProps?.onClose?.()
- dialogStack.value.splice(dialogStack.value.indexOf(targetDialog), 1)
+ const index = dialogStack.value.indexOf(targetDialog)
+ dialogStack.value.splice(index, 1)
+
+ activeKey.value =
+ dialogStack.value.length > 0
+ ? dialogStack.value[dialogStack.value.length - 1].key
+ : null
+
+ updateCloseOnEscapeStates()
}
function createDialog(options: {
@@ -117,7 +135,7 @@ export const useDialogStore = defineStore('dialog', () => {
dialogStack.value.shift()
}
- const dialog: DialogInstance = {
+ const dialog = {
key: options.key,
visible: true,
title: options.title,
@@ -139,7 +157,6 @@ export const useDialogStore = defineStore('dialog', () => {
dismissableMask: true,
...options.dialogComponentProps,
maximized: false,
- // @ts-expect-error TODO: fix this
onMaximize: () => {
dialog.dialogComponentProps.maximized = true
},
@@ -160,10 +177,29 @@ export const useDialogStore = defineStore('dialog', () => {
}
insertDialogByPriority(dialog)
+ activeKey.value = options.key
+ updateCloseOnEscapeStates()
return dialog
}
+ /**
+ * Ensures only the top-most dialog in the stack can be closed with the Escape key.
+ * This is necessary because PrimeVue Dialogs do not handle `closeOnEscape` prop
+ * correctly when multiple dialogs are open.
+ */
+ function updateCloseOnEscapeStates() {
+ const topDialog = dialogStack.value.find((d) => d.key === activeKey.value)
+ const topClosable = topDialog?.dialogComponentProps.closable
+
+ dialogStack.value.forEach((dialog) => {
+ dialog.dialogComponentProps = {
+ ...dialog.dialogComponentProps,
+ closeOnEscape: dialog === topDialog && !!topClosable
+ }
+ })
+ }
+
function showDialog(options: ShowDialogOptions) {
const dialogKey = options.key || genDialogKey()
@@ -210,6 +246,7 @@ export const useDialogStore = defineStore('dialog', () => {
showDialog,
closeDialog,
showExtensionDialog,
- isDialogOpen
+ isDialogOpen,
+ activeKey
}
})
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index a8667da0d..bc33b75cd 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -12,6 +12,8 @@ import type {
ExecutionErrorWsMessage,
ExecutionStartWsMessage,
NodeError,
+ NodeProgressState,
+ ProgressStateWsMessage,
ProgressTextWsMessage,
ProgressWsMessage
} from '@/schemas/apiSchema'
@@ -21,6 +23,10 @@ import type {
NodeId
} from '@/schemas/comfyWorkflowSchema'
import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import type { NodeLocatorId } from '@/types/nodeIdentification'
+import { createNodeLocatorId } from '@/types/nodeIdentification'
import { useCanvasStore } from './graphStore'
import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
@@ -46,7 +52,97 @@ export const useExecutionStore = defineStore('execution', () => {
const queuedPrompts = ref>({})
const lastNodeErrors = ref | null>(null)
const lastExecutionError = ref(null)
- const executingNodeId = ref(null)
+ // This is the progress of all nodes in the currently executing workflow
+ const nodeProgressStates = ref>({})
+
+ /**
+ * Convert execution context node IDs to NodeLocatorIds
+ * @param nodeId The node ID from execution context (could be execution ID)
+ * @returns The NodeLocatorId
+ */
+ const executionIdToNodeLocatorId = (
+ nodeId: string | number
+ ): NodeLocatorId => {
+ const nodeIdStr = String(nodeId)
+
+ if (!nodeIdStr.includes(':')) {
+ // It's a top-level node ID
+ return nodeIdStr
+ }
+
+ // It's an execution node ID
+ const parts = nodeIdStr.split(':')
+ const localNodeId = parts[parts.length - 1]
+ const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
+ const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
+ return nodeLocatorId
+ }
+
+ const mergeExecutionProgressStates = (
+ currentState: NodeProgressState | undefined,
+ newState: NodeProgressState
+ ): NodeProgressState => {
+ if (currentState === undefined) {
+ return newState
+ }
+
+ const mergedState = { ...currentState }
+ if (mergedState.state === 'error') {
+ return mergedState
+ } else if (newState.state === 'running') {
+ const newPerc = newState.max > 0 ? newState.value / newState.max : 0.0
+ const oldPerc =
+ mergedState.max > 0 ? mergedState.value / mergedState.max : 0.0
+ if (
+ mergedState.state !== 'running' ||
+ oldPerc === 0.0 ||
+ newPerc < oldPerc
+ ) {
+ mergedState.value = newState.value
+ mergedState.max = newState.max
+ }
+ mergedState.state = 'running'
+ }
+
+ return mergedState
+ }
+
+ const nodeLocationProgressStates = computed<
+ Record
+ >(() => {
+ const result: Record = {}
+
+ const states = nodeProgressStates.value // Apparently doing this inside `Object.entries` causes issues
+ for (const state of Object.values(states)) {
+ const parts = String(state.display_node_id).split(':')
+ for (let i = 0; i < parts.length; i++) {
+ const executionId = parts.slice(0, i + 1).join(':')
+ const locatorId = executionIdToNodeLocatorId(executionId)
+ if (!locatorId) continue
+
+ result[locatorId] = mergeExecutionProgressStates(
+ result[locatorId],
+ state
+ )
+ }
+ }
+
+ return result
+ })
+
+ // Easily access all currently executing node IDs
+ const executingNodeIds = computed(() => {
+ return Object.entries(nodeProgressStates)
+ .filter(([_, state]) => state.state === 'running')
+ .map(([nodeId, _]) => nodeId)
+ })
+
+ // @deprecated For backward compatibility - stores the primary executing node ID
+ const executingNodeId = computed(() => {
+ return executingNodeIds.value.length > 0 ? executingNodeIds.value[0] : null
+ })
+
+ // For backward compatibility - returns the primary executing node
const executingNode = computed(() => {
if (!executingNodeId.value) return null
@@ -93,30 +189,7 @@ export const useExecutionStore = defineStore('execution', () => {
return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
}
- const executionIdToCurrentId = (id: string) => {
- const subgraph = workflowStore.activeSubgraph
-
- // Short-circuit: ID belongs to the parent workflow / no active subgraph
- if (!id.includes(':')) {
- return !subgraph ? id : undefined
- } else if (!subgraph) {
- return
- }
-
- // Parse the hierarchical ID (e.g., "123:456:789")
- const subgraphNodeIds = id.split(':')
-
- // If the last subgraph is the active subgraph, return the node ID
- const subgraphs = getSubgraphsFromInstanceIds(
- subgraph.rootGraph,
- subgraphNodeIds
- )
- if (subgraphs.at(-1) === subgraph) {
- return subgraphNodeIds.at(-1)
- }
- }
-
- // This is the progress of the currently executing node, if any
+ // This is the progress of the currently executing node (for backward compatibility)
const _executingNodeProgress = ref(null)
const executingNodeProgress = computed(() =>
_executingNodeProgress.value
@@ -150,24 +223,29 @@ export const useExecutionStore = defineStore('execution', () => {
function bindExecutionEvents() {
api.addEventListener('execution_start', handleExecutionStart)
api.addEventListener('execution_cached', handleExecutionCached)
+ api.addEventListener('execution_interrupted', handleExecutionInterrupted)
api.addEventListener('executed', handleExecuted)
api.addEventListener('executing', handleExecuting)
api.addEventListener('progress', handleProgress)
+ api.addEventListener('progress_state', handleProgressState)
api.addEventListener('status', handleStatus)
api.addEventListener('execution_error', handleExecutionError)
+ api.addEventListener('progress_text', handleProgressText)
+ api.addEventListener('display_component', handleDisplayComponent)
}
- api.addEventListener('progress_text', handleProgressText)
- api.addEventListener('display_component', handleDisplayComponent)
function unbindExecutionEvents() {
api.removeEventListener('execution_start', handleExecutionStart)
api.removeEventListener('execution_cached', handleExecutionCached)
+ api.removeEventListener('execution_interrupted', handleExecutionInterrupted)
api.removeEventListener('executed', handleExecuted)
api.removeEventListener('executing', handleExecuting)
api.removeEventListener('progress', handleProgress)
+ api.removeEventListener('progress_state', handleProgressState)
api.removeEventListener('status', handleStatus)
api.removeEventListener('execution_error', handleExecutionError)
api.removeEventListener('progress_text', handleProgressText)
+ api.removeEventListener('display_component', handleDisplayComponent)
}
function handleExecutionStart(e: CustomEvent) {
@@ -183,6 +261,10 @@ export const useExecutionStore = defineStore('execution', () => {
}
}
+ function handleExecutionInterrupted() {
+ nodeProgressStates.value = {}
+ }
+
function handleExecuted(e: CustomEvent) {
if (!activePrompt.value) return
activePrompt.value.nodes[e.detail.node] = true
@@ -194,19 +276,42 @@ export const useExecutionStore = defineStore('execution', () => {
if (!activePrompt.value) return
- if (executingNodeId.value && activePrompt.value) {
- // Seems sometimes nodes that are cached fire executing but not executed
- activePrompt.value.nodes[executingNodeId.value] = true
+ // Update the executing nodes list
+ if (typeof e.detail !== 'string') {
+ if (activePromptId.value) {
+ delete queuedPrompts.value[activePromptId.value]
+ }
+ activePromptId.value = null
}
- if (typeof e.detail === 'string') {
- executingNodeId.value = executionIdToCurrentId(e.detail) ?? null
- } else {
- executingNodeId.value = e.detail
- if (executingNodeId.value === null) {
- if (activePromptId.value) {
- delete queuedPrompts.value[activePromptId.value]
- }
- activePromptId.value = null
+ }
+
+ function handleProgressState(e: CustomEvent) {
+ const { nodes } = e.detail
+
+ // Revoke previews for nodes that are starting to execute
+ for (const nodeId in nodes) {
+ const nodeState = nodes[nodeId]
+ if (nodeState.state === 'running' && !nodeProgressStates.value[nodeId]) {
+ // This node just started executing, revoke its previews
+ // Note that we're doing the *actual* node id instead of the display node id
+ // here intentionally. That way, we don't clear the preview every time a new node
+ // within an expanded graph starts executing.
+ const { revokePreviewsByExecutionId } = useNodeOutputStore()
+ revokePreviewsByExecutionId(nodeId)
+ }
+ }
+
+ // Update the progress states for all nodes
+ nodeProgressStates.value = nodes
+
+ // If we have progress for the currently executing node, update it for backwards compatibility
+ if (executingNodeId.value && nodes[executingNodeId.value]) {
+ const nodeState = nodes[executingNodeId.value]
+ _executingNodeProgress.value = {
+ value: nodeState.value,
+ max: nodeState.max,
+ prompt_id: nodeState.prompt_id,
+ node: nodeState.display_node_id || nodeState.node_id
}
}
}
@@ -239,7 +344,7 @@ export const useExecutionStore = defineStore('execution', () => {
const { nodeId, text } = e.detail
if (!text || !nodeId) return
- // Handle hierarchical node IDs for subgraphs
+ // Handle execution node IDs for subgraphs
const currentId = getNodeIdIfExecuting(nodeId)
const node = canvasStore.getCanvas().graph?.getNodeById(currentId)
if (!node) return
@@ -250,7 +355,7 @@ export const useExecutionStore = defineStore('execution', () => {
function handleDisplayComponent(e: CustomEvent) {
const { node_id: nodeId, component, props = {} } = e.detail
- // Handle hierarchical node IDs for subgraphs
+ // Handle execution node IDs for subgraphs
const currentId = getNodeIdIfExecuting(nodeId)
const node = canvasStore.getCanvas().graph?.getNodeById(currentId)
if (!node) return
@@ -290,6 +395,18 @@ export const useExecutionStore = defineStore('execution', () => {
)
}
+ /**
+ * Convert a NodeLocatorId to an execution context ID
+ * @param locatorId The NodeLocatorId
+ * @returns The execution ID or null if conversion fails
+ */
+ const nodeLocatorIdToExecutionId = (
+ locatorId: NodeLocatorId | string
+ ): string | null => {
+ const executionId = workflowStore.nodeLocatorIdToNodeExecutionId(locatorId)
+ return executionId
+ }
+
return {
isIdle,
clientId,
@@ -310,9 +427,13 @@ export const useExecutionStore = defineStore('execution', () => {
*/
lastExecutionError,
/**
- * The id of the node that is currently being executed
+ * The id of the node that is currently being executed (backward compatibility)
*/
executingNodeId,
+ /**
+ * The list of all nodes that are currently executing
+ */
+ executingNodeIds,
/**
* The prompt that is currently being executed
*/
@@ -330,17 +451,25 @@ export const useExecutionStore = defineStore('execution', () => {
*/
executionProgress,
/**
- * The node that is currently being executed
+ * The node that is currently being executed (backward compatibility)
*/
executingNode,
/**
- * The progress of the executing node (if the node reports progress)
+ * The progress of the executing node (backward compatibility)
*/
executingNodeProgress,
+ /**
+ * All node progress states from progress_state events
+ */
+ nodeProgressStates,
+ nodeLocationProgressStates,
bindExecutionEvents,
unbindExecutionEvents,
storePrompt,
// Raw executing progress data for backward compatibility in ComfyApp.
- _executingNodeProgress
+ _executingNodeProgress,
+ // NodeLocatorId conversion helpers
+ executionIdToNodeLocatorId,
+ nodeLocatorIdToExecutionId
}
})
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index b6d88c9bb..b2c19b8f9 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -8,6 +8,9 @@ import {
} from '@/schemas/apiSchema'
import { api } from '@/scripts/api'
import { app } from '@/scripts/app'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+import type { NodeLocatorId } from '@/types/nodeIdentification'
import { parseFilePath } from '@/utils/formatUtil'
import { isVideoNode } from '@/utils/litegraphUtil'
@@ -22,17 +25,22 @@ const createOutputs = (
}
}
+interface SetOutputOptions {
+ merge?: boolean
+}
+
export const useNodeOutputStore = defineStore('nodeOutput', () => {
- const getNodeId = (node: LGraphNode): string => node.id.toString()
+ const { nodeIdToNodeLocatorId } = useWorkflowStore()
+ const { executionIdToNodeLocatorId } = useExecutionStore()
function getNodeOutputs(
node: LGraphNode
): ExecutedWsMessage['output'] | undefined {
- return app.nodeOutputs[getNodeId(node)]
+ return app.nodeOutputs[nodeIdToNodeLocatorId(node.id)]
}
function getNodePreviews(node: LGraphNode): string[] | undefined {
- return app.nodePreviewImages[getNodeId(node)]
+ return app.nodePreviewImages[nodeIdToNodeLocatorId(node.id)]
}
/**
@@ -86,6 +94,35 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
})
}
+ /**
+ * Internal function to set outputs by NodeLocatorId.
+ * Handles the merge logic when needed.
+ */
+ function setOutputsByLocatorId(
+ nodeLocatorId: NodeLocatorId,
+ outputs: ExecutedWsMessage['output'] | ResultItem,
+ options: SetOutputOptions = {}
+ ) {
+ if (options.merge) {
+ const existingOutput = app.nodeOutputs[nodeLocatorId]
+ if (existingOutput && outputs) {
+ for (const k in outputs) {
+ const existingValue = existingOutput[k]
+ const newValue = (outputs as Record)[k]
+
+ if (Array.isArray(existingValue) && Array.isArray(newValue)) {
+ existingOutput[k] = existingValue.concat(newValue)
+ } else {
+ existingOutput[k] = newValue
+ }
+ }
+ return
+ }
+ }
+
+ app.nodeOutputs[nodeLocatorId] = outputs
+ }
+
function setNodeOutputs(
node: LGraphNode,
filenames: string | string[] | ResultItem,
@@ -96,24 +133,149 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
) {
if (!filenames || !node) return
- const nodeId = getNodeId(node)
-
if (typeof filenames === 'string') {
- app.nodeOutputs[nodeId] = createOutputs([filenames], folder, isAnimated)
+ setNodeOutputsByNodeId(
+ node.id,
+ createOutputs([filenames], folder, isAnimated)
+ )
} else if (!Array.isArray(filenames)) {
- app.nodeOutputs[nodeId] = filenames
+ setNodeOutputsByNodeId(node.id, filenames)
} else {
const resultItems = createOutputs(filenames, folder, isAnimated)
if (!resultItems?.images?.length) return
- app.nodeOutputs[nodeId] = resultItems
+ setNodeOutputsByNodeId(node.id, resultItems)
}
}
+ /**
+ * Set node outputs by execution ID (hierarchical ID from backend).
+ * Converts the execution ID to a NodeLocatorId before storing.
+ *
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @param outputs - The outputs to store
+ * @param options - Options for setting outputs
+ * @param options.merge - If true, merge with existing outputs (arrays are concatenated)
+ */
+ function setNodeOutputsByExecutionId(
+ executionId: string,
+ outputs: ExecutedWsMessage['output'] | ResultItem,
+ options: SetOutputOptions = {}
+ ) {
+ const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+ if (!nodeLocatorId) return
+
+ setOutputsByLocatorId(nodeLocatorId, outputs, options)
+ }
+
+ /**
+ * Set node outputs by node ID.
+ * Uses the current graph context to create the appropriate NodeLocatorId.
+ *
+ * @param nodeId - The node ID
+ * @param outputs - The outputs to store
+ * @param options - Options for setting outputs
+ * @param options.merge - If true, merge with existing outputs (arrays are concatenated)
+ */
+ function setNodeOutputsByNodeId(
+ nodeId: string | number,
+ outputs: ExecutedWsMessage['output'] | ResultItem,
+ options: SetOutputOptions = {}
+ ) {
+ const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+ if (!nodeLocatorId) return
+
+ setOutputsByLocatorId(nodeLocatorId, outputs, options)
+ }
+
+ /**
+ * Set node preview images by execution ID (hierarchical ID from backend).
+ * Converts the execution ID to a NodeLocatorId before storing.
+ *
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @param previewImages - Array of preview image URLs to store
+ */
+ function setNodePreviewsByExecutionId(
+ executionId: string,
+ previewImages: string[]
+ ) {
+ const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+ if (!nodeLocatorId) return
+
+ app.nodePreviewImages[nodeLocatorId] = previewImages
+ }
+
+ /**
+ * Set node preview images by node ID.
+ * Uses the current graph context to create the appropriate NodeLocatorId.
+ *
+ * @param nodeId - The node ID
+ * @param previewImages - Array of preview image URLs to store
+ */
+ function setNodePreviewsByNodeId(
+ nodeId: string | number,
+ previewImages: string[]
+ ) {
+ const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+ app.nodePreviewImages[nodeLocatorId] = previewImages
+ }
+
+ /**
+ * Revoke preview images by execution ID.
+ * Frees memory allocated to image preview blobs by revoking the URLs.
+ *
+ * @param executionId - The execution ID
+ */
+ function revokePreviewsByExecutionId(executionId: string) {
+ const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+ if (!nodeLocatorId) return
+
+ revokePreviewsByLocatorId(nodeLocatorId)
+ }
+
+ /**
+ * Revoke preview images by node locator ID.
+ * Frees memory allocated to image preview blobs by revoking the URLs.
+ *
+ * @param nodeLocatorId - The node locator ID
+ */
+ function revokePreviewsByLocatorId(nodeLocatorId: NodeLocatorId) {
+ const previews = app.nodePreviewImages[nodeLocatorId]
+ if (!previews?.[Symbol.iterator]) return
+
+ for (const url of previews) {
+ URL.revokeObjectURL(url)
+ }
+
+ delete app.nodePreviewImages[nodeLocatorId]
+ }
+
+ /**
+ * Revoke all preview images.
+ * Frees memory allocated to all image preview blobs.
+ */
+ function revokeAllPreviews() {
+ for (const nodeLocatorId of Object.keys(app.nodePreviewImages)) {
+ const previews = app.nodePreviewImages[nodeLocatorId]
+ if (!previews?.[Symbol.iterator]) continue
+
+ for (const url of previews) {
+ URL.revokeObjectURL(url)
+ }
+ }
+ app.nodePreviewImages = {}
+ }
+
return {
getNodeOutputs,
getNodeImageUrls,
getNodePreviews,
setNodeOutputs,
+ setNodeOutputsByExecutionId,
+ setNodeOutputsByNodeId,
+ setNodePreviewsByExecutionId,
+ setNodePreviewsByNodeId,
+ revokePreviewsByExecutionId,
+ revokeAllPreviews,
getPreviewParam
}
})
diff --git a/src/stores/menuItemStore.ts b/src/stores/menuItemStore.ts
index 432976ec9..a1502e14a 100644
--- a/src/stores/menuItemStore.ts
+++ b/src/stores/menuItemStore.ts
@@ -23,6 +23,7 @@ export const useMenuItemStore = defineStore('menuItem', () => {
// Create a new node if it doesn't exist
found = {
label: segment,
+ key: segment,
items: []
}
currentLevel.push(found)
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index aaa6d000b..8a5a46ade 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -251,11 +251,41 @@ export function createDummyFolderNodeDef(folderPath: string): ComfyNodeDefImpl {
} as ComfyNodeDefV1)
}
+/**
+ * Defines a filter for node definitions in the node library.
+ * Filters are applied in a single pass to determine node visibility.
+ */
+export interface NodeDefFilter {
+ /**
+ * Unique identifier for the filter.
+ * Convention: Use dot notation like 'core.deprecated' or 'extension.myfilter'
+ */
+ id: string
+
+ /**
+ * Display name for the filter (used in UI/debugging).
+ */
+ name: string
+
+ /**
+ * Optional description explaining what the filter does.
+ */
+ description?: string
+
+ /**
+ * The filter function that returns true if the node should be visible.
+ * @param nodeDef - The node definition to evaluate
+ * @returns true if the node should be visible, false to hide it
+ */
+ predicate: (nodeDef: ComfyNodeDefImpl) => boolean
+}
+
export const useNodeDefStore = defineStore('nodeDef', () => {
const nodeDefsByName = ref>({})
const nodeDefsByDisplayName = ref>({})
const showDeprecated = ref(false)
const showExperimental = ref(false)
+ const nodeDefFilters = ref([])
const nodeDefs = computed(() => Object.values(nodeDefsByName.value))
const nodeDataTypes = computed(() => {
@@ -270,13 +300,11 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
}
return types
})
- const visibleNodeDefs = computed(() =>
- nodeDefs.value.filter(
- (nodeDef: ComfyNodeDefImpl) =>
- (showDeprecated.value || !nodeDef.deprecated) &&
- (showExperimental.value || !nodeDef.experimental)
+ const visibleNodeDefs = computed(() => {
+ return nodeDefs.value.filter((nodeDef) =>
+ nodeDefFilters.value.every((filter) => filter.predicate(nodeDef))
)
- )
+ })
const nodeSearchService = computed(
() => new NodeSearchService(visibleNodeDefs.value)
)
@@ -306,15 +334,74 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
}
function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
// Frontend-only nodes don't have nodeDef
- // @ts-expect-error Optional chaining used in index
- return nodeDefsByName.value[node.constructor?.nodeData?.name] ?? null
+ const nodeTypeName = node.constructor?.nodeData?.name
+ if (!nodeTypeName) return null
+ const nodeDef = nodeDefsByName.value[nodeTypeName] ?? null
+ return nodeDef
}
+ /**
+ * Registers a node definition filter.
+ * @param filter - The filter to register
+ */
+ function registerNodeDefFilter(filter: NodeDefFilter) {
+ nodeDefFilters.value = [...nodeDefFilters.value, filter]
+ }
+
+ /**
+ * Unregisters a node definition filter by ID.
+ * @param id - The ID of the filter to remove
+ */
+ function unregisterNodeDefFilter(id: string) {
+ nodeDefFilters.value = nodeDefFilters.value.filter((f) => f.id !== id)
+ }
+
+ /**
+ * Register the core node definition filters.
+ */
+ function registerCoreNodeDefFilters() {
+ // Deprecated nodes filter
+ registerNodeDefFilter({
+ id: 'core.deprecated',
+ name: 'Hide Deprecated Nodes',
+ description: 'Hides nodes marked as deprecated unless explicitly enabled',
+ predicate: (nodeDef) => showDeprecated.value || !nodeDef.deprecated
+ })
+
+ // Experimental nodes filter
+ registerNodeDefFilter({
+ id: 'core.experimental',
+ name: 'Hide Experimental Nodes',
+ description:
+ 'Hides nodes marked as experimental unless explicitly enabled',
+ predicate: (nodeDef) => showExperimental.value || !nodeDef.experimental
+ })
+
+ // Subgraph nodes filter
+ // @todo Remove this filter when subgraph v2 is released
+ registerNodeDefFilter({
+ id: 'core.subgraph',
+ name: 'Hide Subgraph Nodes',
+ description:
+ 'Temporarily hides subgraph nodes from node library and search',
+ predicate: (nodeDef) => {
+ // Hide subgraph nodes (identified by category='subgraph' and python_module='nodes')
+ return !(
+ nodeDef.category === 'subgraph' && nodeDef.python_module === 'nodes'
+ )
+ }
+ })
+ }
+
+ // Register core filters on store initialization
+ registerCoreNodeDefFilters()
+
return {
nodeDefsByName,
nodeDefsByDisplayName,
showDeprecated,
showExperimental,
+ nodeDefFilters,
nodeDefs,
nodeDataTypes,
@@ -324,7 +411,9 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
updateNodeDefs,
addNodeDef,
- fromLGraphNode
+ fromLGraphNode,
+ registerNodeDefFilter,
+ unregisterNodeDefFilter
}
})
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 376063958..316c3564a 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -14,6 +14,8 @@ import type {
import type { ComfyWorkflowJSON, NodeId } from '@/schemas/comfyWorkflowSchema'
import { api } from '@/scripts/api'
import type { ComfyApp } from '@/scripts/app'
+import { useExtensionService } from '@/services/extensionService'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
// Task type used in the API.
export type APITaskType = 'queue' | 'history'
@@ -377,7 +379,18 @@ export class TaskItemImpl {
}
await app.loadGraphData(toRaw(this.workflow))
if (this.outputs) {
- app.nodeOutputs = toRaw(this.outputs)
+ const nodeOutputsStore = useNodeOutputStore()
+ const rawOutputs = toRaw(this.outputs)
+ for (const nodeExecutionId in rawOutputs) {
+ nodeOutputsStore.setNodeOutputsByExecutionId(
+ nodeExecutionId,
+ rawOutputs[nodeExecutionId]
+ )
+ }
+ useExtensionService().invokeExtensions(
+ 'onNodeOutputsUpdated',
+ app.nodeOutputs
+ )
}
}
diff --git a/src/stores/versionCompatibilityStore.ts b/src/stores/versionCompatibilityStore.ts
new file mode 100644
index 000000000..da483846e
--- /dev/null
+++ b/src/stores/versionCompatibilityStore.ts
@@ -0,0 +1,138 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import * as semver from 'semver'
+import { computed } from 'vue'
+
+import config from '@/config'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+const DISMISSAL_DURATION_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
+
+export const useVersionCompatibilityStore = defineStore(
+ 'versionCompatibility',
+ () => {
+ const systemStatsStore = useSystemStatsStore()
+
+ const frontendVersion = computed(() => config.app_version)
+ const backendVersion = computed(
+ () => systemStatsStore.systemStats?.system?.comfyui_version ?? ''
+ )
+ const requiredFrontendVersion = computed(
+ () =>
+ systemStatsStore.systemStats?.system?.required_frontend_version ?? ''
+ )
+
+ const isFrontendOutdated = computed(() => {
+ if (
+ !frontendVersion.value ||
+ !requiredFrontendVersion.value ||
+ !semver.valid(frontendVersion.value) ||
+ !semver.valid(requiredFrontendVersion.value)
+ ) {
+ return false
+ }
+ // Returns true if required version is greater than frontend version
+ return semver.gt(requiredFrontendVersion.value, frontendVersion.value)
+ })
+
+ const isFrontendNewer = computed(() => {
+ // We don't warn about frontend being newer than backend
+ // Only warn when frontend is outdated (behind required version)
+ return false
+ })
+
+ const hasVersionMismatch = computed(() => {
+ return isFrontendOutdated.value
+ })
+
+ const versionKey = computed(() => {
+ if (
+ !frontendVersion.value ||
+ !backendVersion.value ||
+ !requiredFrontendVersion.value
+ ) {
+ return null
+ }
+ return `${frontendVersion.value}-${backendVersion.value}-${requiredFrontendVersion.value}`
+ })
+
+ // Use reactive storage for dismissals - creates a reactive ref that syncs with localStorage
+ // All version mismatch dismissals are stored in a single object for clean localStorage organization
+ const dismissalStorage = useStorage(
+ 'comfy.versionMismatch.dismissals',
+ {} as Record,
+ localStorage,
+ {
+ serializer: {
+ read: (value: string) => {
+ try {
+ return JSON.parse(value)
+ } catch {
+ return {}
+ }
+ },
+ write: (value: Record) => JSON.stringify(value)
+ }
+ }
+ )
+
+ const isDismissed = computed(() => {
+ if (!versionKey.value) return false
+
+ const dismissedUntil = dismissalStorage.value[versionKey.value]
+ if (!dismissedUntil) return false
+
+ // Check if dismissal has expired
+ return Date.now() < dismissedUntil
+ })
+
+ const shouldShowWarning = computed(() => {
+ return hasVersionMismatch.value && !isDismissed.value
+ })
+
+ const warningMessage = computed(() => {
+ if (isFrontendOutdated.value) {
+ return {
+ type: 'outdated' as const,
+ frontendVersion: frontendVersion.value,
+ requiredVersion: requiredFrontendVersion.value
+ }
+ }
+ return null
+ })
+
+ async function checkVersionCompatibility() {
+ if (!systemStatsStore.systemStats) {
+ await systemStatsStore.fetchSystemStats()
+ }
+ }
+
+ function dismissWarning() {
+ if (!versionKey.value) return
+
+ const dismissUntil = Date.now() + DISMISSAL_DURATION_MS
+ dismissalStorage.value = {
+ ...dismissalStorage.value,
+ [versionKey.value]: dismissUntil
+ }
+ }
+
+ async function initialize() {
+ await checkVersionCompatibility()
+ }
+
+ return {
+ frontendVersion,
+ backendVersion,
+ requiredFrontendVersion,
+ hasVersionMismatch,
+ shouldShowWarning,
+ warningMessage,
+ isFrontendOutdated,
+ isFrontendNewer,
+ checkVersionCompatibility,
+ dismissWarning,
+ initialize
+ }
+ }
+)
diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts
index 6b0044e9a..f11068852 100644
--- a/src/stores/workflowStore.ts
+++ b/src/stores/workflowStore.ts
@@ -4,10 +4,18 @@ import { defineStore } from 'pinia'
import { type Raw, computed, markRaw, ref, shallowRef, watch } from 'vue'
import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
import { api } from '@/scripts/api'
import { app as comfyApp } from '@/scripts/app'
import { ChangeTracker } from '@/scripts/changeTracker'
import { defaultGraphJSON } from '@/scripts/defaultGraph'
+import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
+import {
+ createNodeExecutionId,
+ createNodeLocatorId,
+ parseNodeExecutionId,
+ parseNodeLocatorId
+} from '@/types/nodeIdentification'
import { getPathDetails } from '@/utils/formatUtil'
import { syncEntities } from '@/utils/syncUtil'
import { isSubgraph } from '@/utils/typeGuardUtil'
@@ -163,6 +171,15 @@ export interface WorkflowStore {
/** Updates the {@link subgraphNamePath} and {@link isSubgraphActive} values. */
updateActiveGraph: () => void
executionIdToCurrentId: (id: string) => any
+ nodeIdToNodeLocatorId: (nodeId: NodeId, subgraph?: Subgraph) => NodeLocatorId
+ nodeExecutionIdToNodeLocatorId: (
+ nodeExecutionId: NodeExecutionId | string
+ ) => NodeLocatorId | null
+ nodeLocatorIdToNodeId: (locatorId: NodeLocatorId | string) => NodeId | null
+ nodeLocatorIdToNodeExecutionId: (
+ locatorId: NodeLocatorId | string,
+ targetSubgraph?: Subgraph
+ ) => NodeExecutionId | null
}
export const useWorkflowStore = defineStore('workflow', () => {
@@ -473,7 +490,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
return
}
- // Parse the hierarchical ID (e.g., "123:456:789")
+ // Parse the execution ID (e.g., "123:456:789")
const subgraphNodeIds = id.split(':')
// Start from the root graph
@@ -488,6 +505,136 @@ export const useWorkflowStore = defineStore('workflow', () => {
watch(activeWorkflow, updateActiveGraph)
+ /**
+ * Convert a node ID to a NodeLocatorId
+ * @param nodeId The local node ID
+ * @param subgraph The subgraph containing the node (defaults to active subgraph)
+ * @returns The NodeLocatorId (for root graph nodes, returns the node ID as-is)
+ */
+ const nodeIdToNodeLocatorId = (
+ nodeId: NodeId,
+ subgraph?: Subgraph
+ ): NodeLocatorId => {
+ const targetSubgraph = subgraph ?? activeSubgraph.value
+ if (!targetSubgraph) {
+ // Node is in the root graph, return the node ID as-is
+ return String(nodeId)
+ }
+
+ return createNodeLocatorId(targetSubgraph.id, nodeId)
+ }
+
+ /**
+ * Convert an execution ID to a NodeLocatorId
+ * @param nodeExecutionId The execution node ID (e.g., "123:456:789")
+ * @returns The NodeLocatorId or null if conversion fails
+ */
+ const nodeExecutionIdToNodeLocatorId = (
+ nodeExecutionId: NodeExecutionId | string
+ ): NodeLocatorId | null => {
+ // Handle simple node IDs (root graph - no colons)
+ if (!nodeExecutionId.includes(':')) {
+ return nodeExecutionId
+ }
+
+ const parts = parseNodeExecutionId(nodeExecutionId)
+ if (!parts || parts.length === 0) return null
+
+ const nodeId = parts[parts.length - 1]
+ const subgraphNodeIds = parts.slice(0, -1)
+
+ if (subgraphNodeIds.length === 0) {
+ // Node is in root graph, return the node ID as-is
+ return String(nodeId)
+ }
+
+ try {
+ const subgraphs = getSubgraphsFromInstanceIds(
+ comfyApp.graph,
+ subgraphNodeIds.map((id) => String(id))
+ )
+ const immediateSubgraph = subgraphs[subgraphs.length - 1]
+ return createNodeLocatorId(immediateSubgraph.id, nodeId)
+ } catch {
+ return null
+ }
+ }
+
+ /**
+ * Extract the node ID from a NodeLocatorId
+ * @param locatorId The NodeLocatorId
+ * @returns The local node ID or null if invalid
+ */
+ const nodeLocatorIdToNodeId = (
+ locatorId: NodeLocatorId | string
+ ): NodeId | null => {
+ const parsed = parseNodeLocatorId(locatorId)
+ return parsed?.localNodeId ?? null
+ }
+
+ /**
+ * Convert a NodeLocatorId to an execution ID for a specific context
+ * @param locatorId The NodeLocatorId
+ * @param targetSubgraph The subgraph context (defaults to active subgraph)
+ * @returns The execution ID or null if the node is not accessible from the target context
+ */
+ const nodeLocatorIdToNodeExecutionId = (
+ locatorId: NodeLocatorId | string,
+ targetSubgraph?: Subgraph
+ ): NodeExecutionId | null => {
+ const parsed = parseNodeLocatorId(locatorId)
+ if (!parsed) return null
+
+ const { subgraphUuid, localNodeId } = parsed
+
+ // If no subgraph UUID, this is a root graph node
+ if (!subgraphUuid) {
+ return String(localNodeId)
+ }
+
+ // Find the path from root to the subgraph with this UUID
+ const findSubgraphPath = (
+ graph: LGraph | Subgraph,
+ targetUuid: string,
+ path: NodeId[] = []
+ ): NodeId[] | null => {
+ if (isSubgraph(graph) && graph.id === targetUuid) {
+ return path
+ }
+
+ for (const node of graph._nodes) {
+ if (node.isSubgraphNode() && node.subgraph) {
+ const result = findSubgraphPath(node.subgraph, targetUuid, [
+ ...path,
+ node.id
+ ])
+ if (result) return result
+ }
+ }
+
+ return null
+ }
+
+ const path = findSubgraphPath(comfyApp.graph, subgraphUuid)
+ if (!path) return null
+
+ // If we have a target subgraph, check if the path goes through it
+ if (
+ targetSubgraph &&
+ !path.some((_, idx) => {
+ const subgraphs = getSubgraphsFromInstanceIds(
+ comfyApp.graph,
+ path.slice(0, idx + 1).map((id) => String(id))
+ )
+ return subgraphs[subgraphs.length - 1] === targetSubgraph
+ })
+ ) {
+ return null
+ }
+
+ return createNodeExecutionId([...path, localNodeId])
+ }
+
return {
activeWorkflow,
isActive,
@@ -514,7 +661,11 @@ export const useWorkflowStore = defineStore('workflow', () => {
isSubgraphActive,
activeSubgraph,
updateActiveGraph,
- executionIdToCurrentId
+ executionIdToCurrentId,
+ nodeIdToNodeLocatorId,
+ nodeExecutionIdToNodeLocatorId,
+ nodeLocatorIdToNodeId,
+ nodeLocatorIdToNodeExecutionId
}
}) satisfies () => WorkflowStore
diff --git a/src/types/index.ts b/src/types/index.ts
index 20d38a345..377581465 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -31,6 +31,16 @@ export type { ComfyApi } from '@/scripts/api'
export type { ComfyApp } from '@/scripts/app'
export type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
export type { InputSpec } from '@/schemas/nodeDefSchema'
+export type {
+ NodeLocatorId,
+ NodeExecutionId,
+ isNodeLocatorId,
+ isNodeExecutionId,
+ parseNodeLocatorId,
+ createNodeLocatorId,
+ parseNodeExecutionId,
+ createNodeExecutionId
+} from './nodeIdentification'
export type {
EmbeddingsResponse,
ExtensionsResponse,
diff --git a/src/types/metadataTypes.ts b/src/types/metadataTypes.ts
index 9170ef6d4..c63324196 100644
--- a/src/types/metadataTypes.ts
+++ b/src/types/metadataTypes.ts
@@ -85,3 +85,57 @@ export type GltfJsonData = {
* Null if the box was not found.
*/
export type IsobmffBoxContentRange = { start: number; end: number } | null
+
+export type AvifInfeBox = {
+ box_header: {
+ size: number
+ type: 'infe'
+ }
+ version: number
+ flags: number
+ item_ID: number
+ item_protection_index: number
+ item_type: string
+ item_name: string
+ content_type?: string
+ content_encoding?: string
+}
+
+export type AvifIinfBox = {
+ box_header: {
+ size: number
+ type: 'iinf'
+ }
+ version: number
+ flags: number
+ entry_count: number
+ entries: AvifInfeBox[]
+}
+
+export type AvifIlocItemExtent = {
+ extent_offset: number
+ extent_length: number
+}
+
+export type AvifIlocItem = {
+ item_ID: number
+ data_reference_index: number
+ base_offset: number
+ extent_count: number
+ extents: AvifIlocItemExtent[]
+}
+
+export type AvifIlocBox = {
+ box_header: {
+ size: number
+ type: 'iloc'
+ }
+ version: number
+ flags: number
+ offset_size: number
+ length_size: number
+ base_offset_size: number
+ index_size: number
+ item_count: number
+ items: AvifIlocItem[]
+}
diff --git a/src/types/nodeIdentification.ts b/src/types/nodeIdentification.ts
new file mode 100644
index 000000000..038f28449
--- /dev/null
+++ b/src/types/nodeIdentification.ts
@@ -0,0 +1,123 @@
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+
+/**
+ * A globally unique identifier for nodes that maintains consistency across
+ * multiple instances of the same subgraph.
+ *
+ * Format:
+ * - For subgraph nodes: `:`
+ * - For root graph nodes: ``
+ *
+ * Examples:
+ * - "a1b2c3d4-e5f6-7890-abcd-ef1234567890:123" (node in subgraph)
+ * - "456" (node in root graph)
+ *
+ * Unlike execution IDs which change based on the instance path,
+ * NodeLocatorId remains the same for all instances of a particular node.
+ */
+export type NodeLocatorId = string
+
+/**
+ * An execution identifier representing a node's position in nested subgraphs.
+ * Also known as ExecutionId in some contexts.
+ *
+ * Format: Colon-separated path of node IDs
+ * Example: "123:456:789" (node 789 in subgraph 456 in subgraph 123)
+ */
+export type NodeExecutionId = string
+
+/**
+ * Type guard to check if a value is a NodeLocatorId
+ */
+export function isNodeLocatorId(value: unknown): value is NodeLocatorId {
+ if (typeof value !== 'string') return false
+
+ // Check if it's a simple node ID (root graph node)
+ const parts = value.split(':')
+ if (parts.length === 1) {
+ // Simple node ID - must be non-empty
+ return value.length > 0
+ }
+
+ // Check for UUID:nodeId format
+ if (parts.length !== 2) return false
+
+ // Check that node ID part is not empty
+ if (!parts[1]) return false
+
+ // Basic UUID format check (8-4-4-4-12 hex characters)
+ const uuidPattern =
+ /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+ return uuidPattern.test(parts[0])
+}
+
+/**
+ * Type guard to check if a value is a NodeExecutionId
+ */
+export function isNodeExecutionId(value: unknown): value is NodeExecutionId {
+ if (typeof value !== 'string') return false
+ // Must contain at least one colon to be an execution ID
+ return value.includes(':')
+}
+
+/**
+ * Parse a NodeLocatorId into its components
+ * @param id The NodeLocatorId to parse
+ * @returns The subgraph UUID and local node ID, or null if invalid
+ */
+export function parseNodeLocatorId(
+ id: string
+): { subgraphUuid: string | null; localNodeId: NodeId } | null {
+ if (!isNodeLocatorId(id)) return null
+
+ const parts = id.split(':')
+
+ if (parts.length === 1) {
+ // Simple node ID (root graph)
+ return {
+ subgraphUuid: null,
+ localNodeId: isNaN(Number(id)) ? id : Number(id)
+ }
+ }
+
+ const [subgraphUuid, localNodeId] = parts
+ return {
+ subgraphUuid,
+ localNodeId: isNaN(Number(localNodeId)) ? localNodeId : Number(localNodeId)
+ }
+}
+
+/**
+ * Create a NodeLocatorId from components
+ * @param subgraphUuid The UUID of the immediate containing subgraph
+ * @param localNodeId The local node ID within that subgraph
+ * @returns A properly formatted NodeLocatorId
+ */
+export function createNodeLocatorId(
+ subgraphUuid: string,
+ localNodeId: NodeId
+): NodeLocatorId {
+ return `${subgraphUuid}:${localNodeId}`
+}
+
+/**
+ * Parse a NodeExecutionId into its component node IDs
+ * @param id The NodeExecutionId to parse
+ * @returns Array of node IDs from root to target, or null if not an execution ID
+ */
+export function parseNodeExecutionId(id: string): NodeId[] | null {
+ if (!isNodeExecutionId(id)) return null
+
+ return id
+ .split(':')
+ .map((part) => (isNaN(Number(part)) ? part : Number(part)))
+}
+
+/**
+ * Create a NodeExecutionId from an array of node IDs
+ * @param nodeIds Array of node IDs from root to target
+ * @returns A properly formatted NodeExecutionId
+ */
+export function createNodeExecutionId(nodeIds: NodeId[]): NodeExecutionId {
+ return nodeIds.join(':')
+}
diff --git a/src/utils/colorUtil.ts b/src/utils/colorUtil.ts
index 75e8622a4..c57bc14ad 100644
--- a/src/utils/colorUtil.ts
+++ b/src/utils/colorUtil.ts
@@ -40,7 +40,7 @@ function rgbToHsl({ r, g, b }: RGB): HSL {
return { h, s, l }
}
-function hexToRgb(hex: string): RGB {
+export function hexToRgb(hex: string): RGB {
let r = 0,
g = 0,
b = 0
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index 7b7966394..da933d3ec 100644
--- a/src/utils/formatUtil.ts
+++ b/src/utils/formatUtil.ts
@@ -39,7 +39,11 @@ export function trimJsonExt(path?: string) {
export function highlightQuery(text: string, query: string) {
if (!query) return text
- const regex = new RegExp(`(${query})`, 'gi')
+
+ // Escape special regex characters in the query string
+ const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+ const regex = new RegExp(`(${escapedQuery})`, 'gi')
return text.replace(regex, '$1')
}
diff --git a/src/utils/graphTraversalUtil.ts b/src/utils/graphTraversalUtil.ts
new file mode 100644
index 000000000..5fcf0b369
--- /dev/null
+++ b/src/utils/graphTraversalUtil.ts
@@ -0,0 +1,353 @@
+import type { LGraph, LGraphNode, Subgraph } from '@comfyorg/litegraph'
+
+import type { NodeLocatorId } from '@/types/nodeIdentification'
+import { parseNodeLocatorId } from '@/types/nodeIdentification'
+
+import { isSubgraphIoNode } from './typeGuardUtil'
+
+/**
+ * Parses an execution ID into its component parts.
+ *
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @returns Array of node IDs in the path, or null if invalid
+ */
+export function parseExecutionId(executionId: string): string[] | null {
+ if (!executionId || typeof executionId !== 'string') return null
+ return executionId.split(':').filter((part) => part.length > 0)
+}
+
+/**
+ * Extracts the local node ID from an execution ID.
+ *
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @returns The local node ID or null if invalid
+ */
+export function getLocalNodeIdFromExecutionId(
+ executionId: string
+): string | null {
+ const parts = parseExecutionId(executionId)
+ return parts ? parts[parts.length - 1] : null
+}
+
+/**
+ * Extracts the subgraph path from an execution ID.
+ *
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @returns Array of subgraph node IDs (excluding the final node ID), or empty array
+ */
+export function getSubgraphPathFromExecutionId(executionId: string): string[] {
+ const parts = parseExecutionId(executionId)
+ return parts ? parts.slice(0, -1) : []
+}
+
+/**
+ * Visits each node in a graph (non-recursive, single level).
+ *
+ * @param graph - The graph to visit nodes from
+ * @param visitor - Function called for each node
+ */
+export function visitGraphNodes(
+ graph: LGraph | Subgraph,
+ visitor: (node: LGraphNode) => void
+): void {
+ for (const node of graph.nodes) {
+ visitor(node)
+ }
+}
+
+/**
+ * Traverses a path of subgraphs to reach a target graph.
+ *
+ * @param startGraph - The graph to start from
+ * @param path - Array of subgraph node IDs to traverse
+ * @returns The target graph or null if path is invalid
+ */
+export function traverseSubgraphPath(
+ startGraph: LGraph | Subgraph,
+ path: string[]
+): LGraph | Subgraph | null {
+ let currentGraph: LGraph | Subgraph = startGraph
+
+ for (const nodeId of path) {
+ const node = currentGraph.getNodeById(nodeId)
+ if (!node?.isSubgraphNode?.() || !node.subgraph) return null
+ currentGraph = node.subgraph
+ }
+
+ return currentGraph
+}
+
+/**
+ * Traverses all nodes in a graph hierarchy (including subgraphs) and invokes
+ * a callback on each node that has the specified property.
+ *
+ * @param graph - The root graph to start traversal from
+ * @param callbackProperty - The name of the callback property to invoke on each node
+ */
+export function triggerCallbackOnAllNodes(
+ graph: LGraph | Subgraph,
+ callbackProperty: keyof LGraphNode
+): void {
+ forEachNode(graph, (node) => {
+ const callback = node[callbackProperty]
+ if (typeof callback === 'function') {
+ callback.call(node)
+ }
+ })
+}
+
+/**
+ * Maps a function over all nodes in a graph hierarchy (including subgraphs).
+ * This is a pure functional traversal that doesn't mutate the graph.
+ *
+ * @param graph - The root graph to traverse
+ * @param mapFn - Function to apply to each node
+ * @returns Array of mapped results (excluding undefined values)
+ */
+export function mapAllNodes(
+ graph: LGraph | Subgraph,
+ mapFn: (node: LGraphNode) => T | undefined
+): T[] {
+ const results: T[] = []
+
+ visitGraphNodes(graph, (node) => {
+ // Recursively map over subgraphs first
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ results.push(...mapAllNodes(node.subgraph, mapFn))
+ }
+
+ // Apply map function to current node
+ const result = mapFn(node)
+ if (result !== undefined) {
+ results.push(result)
+ }
+ })
+
+ return results
+}
+
+/**
+ * Executes a side-effect function on all nodes in a graph hierarchy.
+ * This is for operations that modify nodes or perform side effects.
+ *
+ * @param graph - The root graph to traverse
+ * @param fn - Function to execute on each node
+ */
+export function forEachNode(
+ graph: LGraph | Subgraph,
+ fn: (node: LGraphNode) => void
+): void {
+ visitGraphNodes(graph, (node) => {
+ // Recursively process subgraphs first
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ forEachNode(node.subgraph, fn)
+ }
+
+ // Execute function on current node
+ fn(node)
+ })
+}
+
+/**
+ * Collects all nodes in a graph hierarchy (including subgraphs) into a flat array.
+ *
+ * @param graph - The root graph to collect nodes from
+ * @param filter - Optional filter function to include only specific nodes
+ * @returns Array of all nodes in the graph hierarchy
+ */
+export function collectAllNodes(
+ graph: LGraph | Subgraph,
+ filter?: (node: LGraphNode) => boolean
+): LGraphNode[] {
+ return mapAllNodes(graph, (node) => {
+ if (!filter || filter(node)) {
+ return node
+ }
+ return undefined
+ })
+}
+
+/**
+ * Finds a node by ID anywhere in the graph hierarchy.
+ *
+ * @param graph - The root graph to search
+ * @param nodeId - The ID of the node to find
+ * @returns The node if found, null otherwise
+ */
+export function findNodeInHierarchy(
+ graph: LGraph | Subgraph,
+ nodeId: string | number
+): LGraphNode | null {
+ // Check current graph
+ const node = graph.getNodeById(nodeId)
+ if (node) return node
+
+ // Search in subgraphs
+ for (const node of graph.nodes) {
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ const found = findNodeInHierarchy(node.subgraph, nodeId)
+ if (found) return found
+ }
+ }
+
+ return null
+}
+
+/**
+ * Find a subgraph by its UUID anywhere in the graph hierarchy.
+ *
+ * @param graph - The root graph to search
+ * @param targetUuid - The UUID of the subgraph to find
+ * @returns The subgraph if found, null otherwise
+ */
+export function findSubgraphByUuid(
+ graph: LGraph | Subgraph,
+ targetUuid: string
+): Subgraph | null {
+ // Check all nodes in the current graph
+ for (const node of graph._nodes) {
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ if (node.subgraph.id === targetUuid) {
+ return node.subgraph
+ }
+ // Recursively search in nested subgraphs
+ const found = findSubgraphByUuid(node.subgraph, targetUuid)
+ if (found) return found
+ }
+ }
+ return null
+}
+
+/**
+ * Get a node by its execution ID from anywhere in the graph hierarchy.
+ * Execution IDs use hierarchical format like "123:456:789" for nested nodes.
+ *
+ * @param rootGraph - The root graph to search from
+ * @param executionId - The execution ID (e.g., "123:456:789" or "789")
+ * @returns The node if found, null otherwise
+ */
+export function getNodeByExecutionId(
+ rootGraph: LGraph,
+ executionId: string
+): LGraphNode | null {
+ if (!rootGraph) return null
+
+ const localNodeId = getLocalNodeIdFromExecutionId(executionId)
+ if (!localNodeId) return null
+
+ const subgraphPath = getSubgraphPathFromExecutionId(executionId)
+
+ // If no subgraph path, it's in the root graph
+ if (subgraphPath.length === 0) {
+ return rootGraph.getNodeById(localNodeId) || null
+ }
+
+ // Traverse to the target subgraph
+ const targetGraph = traverseSubgraphPath(rootGraph, subgraphPath)
+ if (!targetGraph) return null
+
+ // Get the node from the target graph
+ return targetGraph.getNodeById(localNodeId) || null
+}
+
+/**
+ * Get a node by its locator ID from anywhere in the graph hierarchy.
+ * Locator IDs use UUID format like "uuid:nodeId" for subgraph nodes.
+ *
+ * @param rootGraph - The root graph to search from
+ * @param locatorId - The locator ID (e.g., "uuid:123" or "123")
+ * @returns The node if found, null otherwise
+ */
+export function getNodeByLocatorId(
+ rootGraph: LGraph,
+ locatorId: NodeLocatorId | string
+): LGraphNode | null {
+ if (!rootGraph) return null
+
+ const parsedIds = parseNodeLocatorId(locatorId)
+ if (!parsedIds) return null
+
+ const { subgraphUuid, localNodeId } = parsedIds
+
+ // If no subgraph UUID, it's in the root graph
+ if (!subgraphUuid) {
+ return rootGraph.getNodeById(localNodeId) || null
+ }
+
+ // Find the subgraph with the matching UUID
+ const targetSubgraph = findSubgraphByUuid(rootGraph, subgraphUuid)
+ if (!targetSubgraph) return null
+
+ return targetSubgraph.getNodeById(localNodeId) || null
+}
+
+/**
+ * Finds the root graph from any graph in the hierarchy.
+ *
+ * @param graph - Any graph or subgraph in the hierarchy
+ * @returns The root graph
+ */
+export function getRootGraph(graph: LGraph | Subgraph): LGraph | Subgraph {
+ let current: LGraph | Subgraph = graph
+ while ('rootGraph' in current && current.rootGraph) {
+ current = current.rootGraph
+ }
+ return current
+}
+
+/**
+ * Applies a function to all nodes whose type matches a subgraph ID.
+ * Operates on the entire graph hierarchy starting from the root.
+ *
+ * @param rootGraph - The root graph to search in
+ * @param subgraphId - The ID/type of the subgraph to match nodes against
+ * @param fn - Function to apply to each matching node
+ */
+export function forEachSubgraphNode(
+ rootGraph: LGraph | Subgraph | null | undefined,
+ subgraphId: string | null | undefined,
+ fn: (node: LGraphNode) => void
+): void {
+ if (!rootGraph || !subgraphId) return
+
+ forEachNode(rootGraph, (node) => {
+ if (node.type === subgraphId) {
+ fn(node)
+ }
+ })
+}
+
+/**
+ * Maps a function over all nodes whose type matches a subgraph ID.
+ * Operates on the entire graph hierarchy starting from the root.
+ *
+ * @param rootGraph - The root graph to search in
+ * @param subgraphId - The ID/type of the subgraph to match nodes against
+ * @param mapFn - Function to apply to each matching node
+ * @returns Array of mapped results
+ */
+export function mapSubgraphNodes(
+ rootGraph: LGraph | Subgraph | null | undefined,
+ subgraphId: string | null | undefined,
+ mapFn: (node: LGraphNode) => T
+): T[] {
+ if (!rootGraph || !subgraphId) return []
+
+ return mapAllNodes(rootGraph, (node) => {
+ if (node.type === subgraphId) {
+ return mapFn(node)
+ }
+ return undefined
+ })
+}
+
+/**
+ * Gets all non-IO nodes from a subgraph (excludes SubgraphInputNode and SubgraphOutputNode).
+ * These are the user-created nodes that can be safely removed when clearing a subgraph.
+ *
+ * @param subgraph - The subgraph to get non-IO nodes from
+ * @returns Array of non-IO nodes (user-created nodes)
+ */
+export function getAllNonIoNodesInSubgraph(subgraph: Subgraph): LGraphNode[] {
+ return subgraph.nodes.filter((node) => !isSubgraphIoNode(node))
+}
diff --git a/src/utils/litegraphUtil.ts b/src/utils/litegraphUtil.ts
index 738fbd7ca..5f147b99b 100644
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -153,7 +153,10 @@ export function migrateWidgetsValues(
* @param graph - The graph to fix links for.
*/
export function fixLinkInputSlots(graph: LGraph) {
+ // Note: We can't use forEachNode here because we need access to the graph's
+ // links map at each level. Links are stored in their respective graph/subgraph.
for (const node of graph.nodes) {
+ // Fix links for the current node
for (const [inputIndex, input] of node.inputs.entries()) {
const linkId = input.link
if (!linkId) continue
@@ -163,6 +166,11 @@ export function fixLinkInputSlots(graph: LGraph) {
link.target_slot = inputIndex
}
+
+ // Recursively fix links in subgraphs
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ fixLinkInputSlots(node.subgraph)
+ }
}
}
diff --git a/src/utils/mouseDownUtil.ts b/src/utils/mouseDownUtil.ts
new file mode 100644
index 000000000..4c6140359
--- /dev/null
+++ b/src/utils/mouseDownUtil.ts
@@ -0,0 +1,27 @@
+import { useEventListener } from '@vueuse/core'
+
+export const whileMouseDown = (
+ elementOrEvent: HTMLElement | Event,
+ callback: (iteration: number) => void,
+ interval: number = 30
+) => {
+ const element =
+ elementOrEvent instanceof HTMLElement
+ ? elementOrEvent
+ : (elementOrEvent.target as HTMLElement)
+
+ let iteration = 0
+
+ const intervalId = setInterval(() => {
+ callback(iteration++)
+ }, interval)
+
+ const dispose = useEventListener(element, 'mouseup', () => {
+ clearInterval(intervalId)
+ dispose()
+ })
+
+ return {
+ dispose
+ }
+}
diff --git a/src/utils/nodeDefUtil.ts b/src/utils/nodeDefUtil.ts
index 8b130ff2d..cb8a7125b 100644
--- a/src/utils/nodeDefUtil.ts
+++ b/src/utils/nodeDefUtil.ts
@@ -15,6 +15,7 @@ import {
isFloatInputSpec,
isIntInputSpec
} from '@/schemas/nodeDefSchema'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
import { lcm } from './mathUtil'
@@ -138,3 +139,11 @@ export const mergeInputSpec = (
return mergeCommonInputSpec(spec1, spec2)
}
+
+/**
+ * Checks if a node definition represents a subgraph node.
+ * Subgraph nodes are created with category='subgraph' and python_module='nodes'.
+ */
+export const isSubgraphNode = (nodeDef: ComfyNodeDefImpl): boolean => {
+ return nodeDef.category === 'subgraph' && nodeDef.python_module === 'nodes'
+}
diff --git a/src/utils/searchAndReplace.ts b/src/utils/searchAndReplace.ts
index 8023b4882..395d96406 100644
--- a/src/utils/searchAndReplace.ts
+++ b/src/utils/searchAndReplace.ts
@@ -1,11 +1,14 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
+import type { LGraph, Subgraph } from '@comfyorg/litegraph'
import { formatDate } from '@/utils/formatUtil'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
export function applyTextReplacements(
- allNodes: LGraphNode[],
+ graph: LGraph | Subgraph,
value: string
): string {
+ const allNodes = collectAllNodes(graph)
+
return value.replace(/%([^%]+)%/g, function (match, text) {
const split = text.split('.')
if (split.length !== 2) {
diff --git a/src/utils/typeGuardUtil.ts b/src/utils/typeGuardUtil.ts
index c35a9716b..a3bcb5f3d 100644
--- a/src/utils/typeGuardUtil.ts
+++ b/src/utils/typeGuardUtil.ts
@@ -27,3 +27,16 @@ export const isSubgraph = (
*/
export const isNonNullish = (item: T | undefined | null): item is T =>
item != null
+
+/**
+ * Type guard to check if a node is a subgraph input/output node.
+ * These nodes are essential to subgraph structure and should not be removed.
+ */
+export const isSubgraphIoNode = (
+ node: LGraphNode
+): node is LGraphNode & {
+ constructor: { comfyClass: 'SubgraphInputNode' | 'SubgraphOutputNode' }
+} => {
+ const nodeClass = node.constructor?.comfyClass
+ return nodeClass === 'SubgraphInputNode' || nodeClass === 'SubgraphOutputNode'
+}
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index f21cf1b61..f5e299294 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -23,7 +23,14 @@
import { useBreakpoints, useEventListener } from '@vueuse/core'
import type { ToastMessageOptions } from 'primevue/toast'
import { useToast } from 'primevue/usetoast'
-import { computed, onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
+import {
+ computed,
+ nextTick,
+ onBeforeUnmount,
+ onMounted,
+ watch,
+ watchEffect
+} from 'vue'
import { useI18n } from 'vue-i18n'
import MenuHamburger from '@/components/MenuHamburger.vue'
@@ -35,6 +42,7 @@ import TopMenubar from '@/components/topbar/TopMenubar.vue'
import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
import { useCoreCommands } from '@/composables/useCoreCommands'
import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useFrontendVersionMismatchWarning } from '@/composables/useFrontendVersionMismatchWarning'
import { useProgressFavicon } from '@/composables/useProgressFavicon'
import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
import { i18n } from '@/i18n'
@@ -54,6 +62,7 @@ import {
} from '@/stores/queueStore'
import { useServerConfigStore } from '@/stores/serverConfigStore'
import { useSettingStore } from '@/stores/settingStore'
+import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -70,6 +79,8 @@ const settingStore = useSettingStore()
const executionStore = useExecutionStore()
const colorPaletteStore = useColorPaletteStore()
const queueStore = useQueueStore()
+const versionCompatibilityStore = useVersionCompatibilityStore()
+
const breakpoints = useBreakpoints({ md: 961 })
const isMobile = breakpoints.smaller('md')
const showTopMenu = computed(() => isMobile.value || useNewMenu.value === 'Top')
@@ -224,6 +235,17 @@ onBeforeUnmount(() => {
useEventListener(window, 'keydown', useKeybindingService().keybindHandler)
const { wrapWithErrorHandling, wrapWithErrorHandlingAsync } = useErrorHandling()
+
+// Initialize version mismatch warning in setup context
+// It will be triggered automatically when the store is ready
+useFrontendVersionMismatchWarning({ immediate: true })
+
+void nextTick(() => {
+ versionCompatibilityStore.initialize().catch((error) => {
+ console.warn('Version compatibility check failed:', error)
+ })
+})
+
const onGraphReady = () => {
requestIdleCallback(
() => {
diff --git a/tests-ui/tests/audioService.test.ts b/tests-ui/tests/audioService.test.ts
new file mode 100644
index 000000000..68f37680b
--- /dev/null
+++ b/tests-ui/tests/audioService.test.ts
@@ -0,0 +1,332 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+ type AudioRecordingError,
+ useAudioService
+} from '@/services/audioService'
+
+const mockRegister = vi.hoisted(() => vi.fn())
+const mockConnect = vi.hoisted(() => vi.fn())
+
+const mockApi = vi.hoisted(() => ({
+ fetchApi: vi.fn()
+}))
+
+const mockToastStore = vi.hoisted(() => ({
+ addAlert: vi.fn()
+}))
+
+vi.mock('extendable-media-recorder', () => ({
+ register: mockRegister
+}))
+
+vi.mock('extendable-media-recorder-wav-encoder', () => ({
+ connect: mockConnect
+}))
+
+vi.mock('@/scripts/api', () => ({
+ api: mockApi
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+ useToastStore: vi.fn(() => mockToastStore)
+}))
+
+describe('useAudioService', () => {
+ let service: ReturnType
+
+ const mockBlob = new Blob(['test audio data'], { type: 'audio/wav' })
+ const mockUploadResponse = {
+ name: 'test-audio-123.wav'
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ vi.spyOn(console, 'error').mockImplementation(() => {})
+
+ mockConnect.mockResolvedValue('mock-encoder')
+ mockRegister.mockResolvedValue(undefined)
+ mockApi.fetchApi.mockResolvedValue({
+ status: 200,
+ json: () => Promise.resolve(mockUploadResponse)
+ })
+
+ service = useAudioService()
+ })
+
+ describe('initialization', () => {
+ it('should initialize service with required methods', () => {
+ expect(service).toHaveProperty('registerWavEncoder')
+ expect(service).toHaveProperty('stopAllTracks')
+ expect(service).toHaveProperty('convertBlobToFileAndSubmit')
+ expect(typeof service.registerWavEncoder).toBe('function')
+ expect(typeof service.stopAllTracks).toBe('function')
+ expect(typeof service.convertBlobToFileAndSubmit).toBe('function')
+ })
+ })
+
+ describe('registerWavEncoder', () => {
+ it('should register WAV encoder successfully on first call', async () => {
+ await service.registerWavEncoder()
+
+ expect(mockConnect).toHaveBeenCalledTimes(1)
+ expect(mockRegister).toHaveBeenCalledWith('mock-encoder')
+ })
+
+ it('should not register again if already registered', async () => {
+ await service.registerWavEncoder()
+
+ mockConnect.mockClear()
+ mockRegister.mockClear()
+
+ await service.registerWavEncoder()
+
+ expect(mockConnect).not.toHaveBeenCalled()
+ expect(mockRegister).not.toHaveBeenCalled()
+ })
+
+ it('should handle "already an encoder stored" error gracefully', async () => {
+ const error = new Error(
+ 'There is already an encoder stored which handles exactly the same mime types.'
+ )
+ mockRegister.mockRejectedValueOnce(error)
+
+ await service.registerWavEncoder()
+
+ expect(mockConnect).toHaveBeenCalledTimes(0)
+ expect(mockRegister).toHaveBeenCalledTimes(0)
+ expect(console.error).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('stopAllTracks', () => {
+ it('should stop all tracks in a stream', () => {
+ const mockTrack1 = { stop: vi.fn() }
+ const mockTrack2 = { stop: vi.fn() }
+ const mockStream = {
+ getTracks: vi.fn().mockReturnValue([mockTrack1, mockTrack2])
+ } as unknown as MediaStream
+
+ service.stopAllTracks(mockStream)
+
+ expect(mockStream.getTracks).toHaveBeenCalledTimes(1)
+ expect(mockTrack1.stop).toHaveBeenCalledTimes(1)
+ expect(mockTrack2.stop).toHaveBeenCalledTimes(1)
+ })
+
+ it('should handle null stream gracefully', () => {
+ expect(() => service.stopAllTracks(null)).not.toThrow()
+ })
+
+ it('should handle stream with no tracks', () => {
+ const mockStream = {
+ getTracks: vi.fn().mockReturnValue([])
+ } as unknown as MediaStream
+
+ expect(() => service.stopAllTracks(mockStream)).not.toThrow()
+ expect(mockStream.getTracks).toHaveBeenCalledTimes(1)
+ })
+
+ it('should handle tracks that throw on stop', () => {
+ const mockTrack1 = { stop: vi.fn() }
+ const mockTrack2 = {
+ stop: vi.fn().mockImplementation(() => {
+ throw new Error('Stop failed')
+ })
+ }
+ const mockStream = {
+ getTracks: vi.fn().mockReturnValue([mockTrack1, mockTrack2])
+ } as unknown as MediaStream
+
+ expect(() => service.stopAllTracks(mockStream)).toThrow()
+ expect(mockTrack1.stop).toHaveBeenCalledTimes(1)
+ expect(mockTrack2.stop).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('convertBlobToFileAndSubmit', () => {
+ it('should convert blob to file and upload successfully', async () => {
+ const result = await service.convertBlobToFileAndSubmit(mockBlob)
+
+ expect(mockApi.fetchApi).toHaveBeenCalledWith('/upload/image', {
+ method: 'POST',
+ body: expect.any(FormData)
+ })
+
+ expect(result).toBe('audio/test-audio-123.wav [temp]')
+ })
+
+ it('should create file with correct name and type', async () => {
+ const mockTimestamp = 1640995200000
+ vi.spyOn(Date, 'now').mockReturnValue(mockTimestamp)
+
+ await service.convertBlobToFileAndSubmit(mockBlob)
+
+ const formDataCall = mockApi.fetchApi.mock.calls[0][1].body as FormData
+ const uploadedFile = formDataCall.get('image') as File
+
+ expect(uploadedFile).toBeInstanceOf(File)
+ expect(uploadedFile.name).toBe(`recording-${mockTimestamp}.wav`)
+ expect(uploadedFile.type).toBe('audio/wav')
+ })
+
+ it('should set correct form data fields', async () => {
+ await service.convertBlobToFileAndSubmit(mockBlob)
+
+ const formDataCall = mockApi.fetchApi.mock.calls[0][1].body as FormData
+
+ expect(formDataCall.get('subfolder')).toBe('audio')
+ expect(formDataCall.get('type')).toBe('temp')
+ expect(formDataCall.get('image')).toBeInstanceOf(File)
+ })
+
+ it('should handle blob with different type', async () => {
+ const customBlob = new Blob(['test'], { type: 'audio/ogg' })
+
+ await service.convertBlobToFileAndSubmit(customBlob)
+
+ const formDataCall = mockApi.fetchApi.mock.calls[0][1].body as FormData
+ const uploadedFile = formDataCall.get('image') as File
+
+ expect(uploadedFile.type).toBe('audio/ogg')
+ })
+
+ it('should handle blob with no type', async () => {
+ const customBlob = new Blob(['test'])
+
+ await service.convertBlobToFileAndSubmit(customBlob)
+
+ const formDataCall = mockApi.fetchApi.mock.calls[0][1].body as FormData
+ const uploadedFile = formDataCall.get('image') as File
+
+ expect(uploadedFile.type).toBe('audio/wav') // Should default to audio/wav
+ })
+
+ it('should handle upload failure with error status', async () => {
+ mockApi.fetchApi.mockResolvedValueOnce({
+ status: 500,
+ statusText: 'Internal Server Error'
+ })
+
+ await expect(
+ service.convertBlobToFileAndSubmit(mockBlob)
+ ).rejects.toThrow(
+ 'Error uploading temp file: 500 - Internal Server Error'
+ )
+
+ expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+ 'Error uploading temp file: 500 - Internal Server Error'
+ )
+ })
+
+ it('should handle network errors', async () => {
+ const networkError = new Error('Network Error')
+ mockApi.fetchApi.mockRejectedValueOnce(networkError)
+
+ await expect(
+ service.convertBlobToFileAndSubmit(mockBlob)
+ ).rejects.toThrow('Network Error')
+ })
+
+ it('should handle different status codes', async () => {
+ const testCases = [
+ { status: 400, statusText: 'Bad Request' },
+ { status: 403, statusText: 'Forbidden' },
+ { status: 404, statusText: 'Not Found' },
+ { status: 413, statusText: 'Payload Too Large' }
+ ]
+
+ for (const testCase of testCases) {
+ mockApi.fetchApi.mockResolvedValueOnce(testCase)
+
+ await expect(
+ service.convertBlobToFileAndSubmit(mockBlob)
+ ).rejects.toThrow(
+ `Error uploading temp file: ${testCase.status} - ${testCase.statusText}`
+ )
+
+ expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+ `Error uploading temp file: ${testCase.status} - ${testCase.statusText}`
+ )
+
+ mockToastStore.addAlert.mockClear()
+ }
+ })
+
+ it('should handle malformed response JSON', async () => {
+ mockApi.fetchApi.mockResolvedValueOnce({
+ status: 200,
+ json: () => Promise.reject(new Error('Invalid JSON'))
+ })
+
+ await expect(
+ service.convertBlobToFileAndSubmit(mockBlob)
+ ).rejects.toThrow('Invalid JSON')
+ })
+
+ it('should handle empty response', async () => {
+ mockApi.fetchApi.mockResolvedValueOnce({
+ status: 200,
+ json: () => Promise.resolve({})
+ })
+
+ const result = await service.convertBlobToFileAndSubmit(mockBlob)
+
+ expect(result).toBe('audio/undefined [temp]')
+ })
+ })
+
+ describe('error handling', () => {
+ it('should handle AudioRecordingError interface correctly', () => {
+ const error: AudioRecordingError = {
+ type: 'permission',
+ message: 'Microphone access denied',
+ originalError: new Error('Permission denied')
+ }
+
+ expect(error.type).toBe('permission')
+ expect(error.message).toBe('Microphone access denied')
+ expect(error.originalError).toBeInstanceOf(Error)
+ })
+
+ it('should support all error types', () => {
+ const errorTypes = [
+ 'permission',
+ 'not_supported',
+ 'encoder',
+ 'recording',
+ 'unknown'
+ ] as const
+
+ errorTypes.forEach((type) => {
+ const error: AudioRecordingError = {
+ type,
+ message: `Test error for ${type}`
+ }
+
+ expect(error.type).toBe(type)
+ })
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle very large blobs', async () => {
+ const largeData = new Array(1000000).fill('a').join('')
+ const largeBlob = new Blob([largeData], { type: 'audio/wav' })
+
+ const result = await service.convertBlobToFileAndSubmit(largeBlob)
+
+ expect(result).toBe('audio/test-audio-123.wav [temp]')
+ expect(mockApi.fetchApi).toHaveBeenCalledTimes(1)
+ })
+
+ it('should handle empty blob', async () => {
+ const emptyBlob = new Blob([], { type: 'audio/wav' })
+
+ const result = await service.convertBlobToFileAndSubmit(emptyBlob)
+
+ expect(result).toBe('audio/test-audio-123.wav [temp]')
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/BrowserTabTitle.spec.ts b/tests-ui/tests/composables/BrowserTabTitle.spec.ts
index 328f41e80..dd88fb1cd 100644
--- a/tests-ui/tests/composables/BrowserTabTitle.spec.ts
+++ b/tests-ui/tests/composables/BrowserTabTitle.spec.ts
@@ -3,12 +3,20 @@ import { nextTick, reactive } from 'vue'
import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
+// Mock i18n module
+vi.mock('@/i18n', () => ({
+ t: (key: string, fallback: string) =>
+ key === 'g.nodesRunning' ? 'nodes running' : fallback
+}))
+
// Mock the execution store
const executionStore = reactive({
isIdle: true,
executionProgress: 0,
executingNode: null as any,
- executingNodeProgress: 0
+ executingNodeProgress: 0,
+ nodeProgressStates: {} as any,
+ activePrompt: null as any
})
vi.mock('@/stores/executionStore', () => ({
useExecutionStore: () => executionStore
@@ -37,6 +45,8 @@ describe('useBrowserTabTitle', () => {
executionStore.executionProgress = 0
executionStore.executingNode = null as any
executionStore.executingNodeProgress = 0
+ executionStore.nodeProgressStates = {}
+ executionStore.activePrompt = null
// reset setting and workflow stores
;(settingStore.get as any).mockReturnValue('Enabled')
@@ -97,13 +107,41 @@ describe('useBrowserTabTitle', () => {
expect(document.title).toBe('[30%]ComfyUI')
})
- it('shows node execution title when executing a node', async () => {
+ it('shows node execution title when executing a node using nodeProgressStates', async () => {
executionStore.isIdle = false
executionStore.executionProgress = 0.4
- executionStore.executingNodeProgress = 0.5
- executionStore.executingNode = { type: 'Foo' }
+ executionStore.nodeProgressStates = {
+ '1': { state: 'running', value: 5, max: 10, node: '1', prompt_id: 'test' }
+ }
+ executionStore.activePrompt = {
+ workflow: {
+ changeTracker: {
+ activeState: {
+ nodes: [{ id: 1, type: 'Foo' }]
+ }
+ }
+ }
+ }
useBrowserTabTitle()
await nextTick()
expect(document.title).toBe('[40%][50%] Foo')
})
+
+ it('shows multiple nodes running when multiple nodes are executing', async () => {
+ executionStore.isIdle = false
+ executionStore.executionProgress = 0.4
+ executionStore.nodeProgressStates = {
+ '1': {
+ state: 'running',
+ value: 5,
+ max: 10,
+ node: '1',
+ prompt_id: 'test'
+ },
+ '2': { state: 'running', value: 8, max: 10, node: '2', prompt_id: 'test' }
+ }
+ useBrowserTabTitle()
+ await nextTick()
+ expect(document.title).toBe('[40%][2 nodes running]')
+ })
})
diff --git a/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts
new file mode 100644
index 000000000..09eb10bca
--- /dev/null
+++ b/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts
@@ -0,0 +1,129 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
+
+// Mock canvas store
+let mockGetCanvas = vi.fn()
+vi.mock('@/stores/graphStore', () => ({
+ useCanvasStore: vi.fn(() => ({
+ getCanvas: mockGetCanvas
+ }))
+}))
+
+describe('useCanvasTransformSync', () => {
+ let mockCanvas: { ds: { scale: number; offset: [number, number] } }
+ let syncFn: ReturnType
+
+ beforeEach(() => {
+ mockCanvas = {
+ ds: {
+ scale: 1,
+ offset: [0, 0]
+ }
+ }
+ syncFn = vi.fn()
+ mockGetCanvas = vi.fn(() => mockCanvas)
+ vi.clearAllMocks()
+ })
+
+ it('should not call syncFn when transform has not changed', async () => {
+ const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
+
+ startSync()
+ await nextTick()
+
+ // Should call once initially
+ expect(syncFn).toHaveBeenCalledTimes(1)
+
+ // Wait for next RAF cycle
+ await new Promise((resolve) => requestAnimationFrame(resolve))
+
+ // Should not call again since transform didn't change
+ expect(syncFn).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call syncFn when scale changes', async () => {
+ const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
+
+ startSync()
+ await nextTick()
+
+ expect(syncFn).toHaveBeenCalledTimes(1)
+
+ // Change scale
+ mockCanvas.ds.scale = 2
+
+ // Wait for next RAF cycle
+ await new Promise((resolve) => requestAnimationFrame(resolve))
+
+ expect(syncFn).toHaveBeenCalledTimes(2)
+ })
+
+ it('should call syncFn when offset changes', async () => {
+ const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
+
+ startSync()
+ await nextTick()
+
+ expect(syncFn).toHaveBeenCalledTimes(1)
+
+ // Change offset
+ mockCanvas.ds.offset = [10, 20]
+
+ // Wait for next RAF cycles
+ await new Promise((resolve) => requestAnimationFrame(resolve))
+
+ expect(syncFn).toHaveBeenCalledTimes(2)
+ })
+
+ it('should stop calling syncFn after stopSync is called', async () => {
+ const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
+ autoStart: false
+ })
+
+ startSync()
+ await nextTick()
+
+ expect(syncFn).toHaveBeenCalledTimes(1)
+
+ stopSync()
+
+ // Change transform after stopping
+ mockCanvas.ds.scale = 2
+
+ // Wait for RAF cycle
+ await new Promise((resolve) => requestAnimationFrame(resolve))
+
+ // Should not call again
+ expect(syncFn).toHaveBeenCalledTimes(1)
+ })
+
+ it('should handle null canvas gracefully', async () => {
+ mockGetCanvas.mockReturnValue(null)
+ const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
+
+ startSync()
+ await nextTick()
+
+ // Should not call syncFn with null canvas
+ expect(syncFn).not.toHaveBeenCalled()
+ })
+
+ it('should call onStart and onStop callbacks', () => {
+ const onStart = vi.fn()
+ const onStop = vi.fn()
+
+ const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
+ autoStart: false,
+ onStart,
+ onStop
+ })
+
+ startSync()
+ expect(onStart).toHaveBeenCalledTimes(1)
+
+ stopSync()
+ expect(onStop).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts b/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
new file mode 100644
index 000000000..589b3d171
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import { app } from '@/scripts/app'
+import * as settingStore from '@/stores/settingStore'
+
+// Mock the app and canvas
+vi.mock('@/scripts/app', () => ({
+ app: {
+ canvas: {
+ canvas: null as HTMLCanvasElement | null
+ }
+ }
+}))
+
+// Mock the setting store
+vi.mock('@/stores/settingStore', () => ({
+ useSettingStore: vi.fn()
+}))
+
+describe('useCanvasInteractions', () => {
+ let mockCanvas: HTMLCanvasElement
+ let mockSettingStore: { get: ReturnType }
+ let canvasInteractions: ReturnType
+
+ beforeEach(() => {
+ // Clear mocks
+ vi.clearAllMocks()
+
+ // Create mock canvas element
+ mockCanvas = document.createElement('canvas')
+ mockCanvas.dispatchEvent = vi.fn()
+ app.canvas!.canvas = mockCanvas
+
+ // Mock setting store
+ mockSettingStore = { get: vi.fn() }
+ vi.mocked(settingStore.useSettingStore).mockReturnValue(
+ mockSettingStore as any
+ )
+
+ canvasInteractions = useCanvasInteractions()
+ })
+
+ describe('handleWheel', () => {
+ it('should check navigation mode from settings', () => {
+ mockSettingStore.get.mockReturnValue('standard')
+
+ const wheelEvent = new WheelEvent('wheel', {
+ ctrlKey: true,
+ deltaY: -100
+ })
+
+ canvasInteractions.handleWheel(wheelEvent)
+
+ expect(mockSettingStore.get).toHaveBeenCalledWith(
+ 'Comfy.Canvas.NavigationMode'
+ )
+ })
+
+ it('should not forward regular wheel events in standard mode', () => {
+ mockSettingStore.get.mockReturnValue('standard')
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100
+ })
+
+ canvasInteractions.handleWheel(wheelEvent)
+
+ expect(mockCanvas.dispatchEvent).not.toHaveBeenCalled()
+ })
+
+ it('should forward all wheel events to canvas in legacy mode', () => {
+ mockSettingStore.get.mockReturnValue('legacy')
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100,
+ cancelable: true
+ })
+
+ canvasInteractions.handleWheel(wheelEvent)
+
+ expect(mockCanvas.dispatchEvent).toHaveBeenCalled()
+ })
+
+ it('should handle missing canvas gracefully', () => {
+ ;(app.canvas as any).canvas = null
+ mockSettingStore.get.mockReturnValue('standard')
+
+ const wheelEvent = new WheelEvent('wheel', {
+ ctrlKey: true,
+ deltaY: -100
+ })
+
+ expect(() => {
+ canvasInteractions.handleWheel(wheelEvent)
+ }).not.toThrow()
+ })
+ })
+
+ describe('forwardEventToCanvas', () => {
+ it('should dispatch event to canvas element', () => {
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100,
+ ctrlKey: true
+ })
+
+ canvasInteractions.forwardEventToCanvas(wheelEvent)
+
+ expect(mockCanvas.dispatchEvent).toHaveBeenCalledWith(
+ expect.any(WheelEvent)
+ )
+ })
+
+ it('should handle missing canvas gracefully', () => {
+ ;(app.canvas as any).canvas = null
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100
+ })
+
+ expect(() => {
+ canvasInteractions.forwardEventToCanvas(wheelEvent)
+ }).not.toThrow()
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 189ae3034..67f78d7d3 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -603,7 +603,7 @@ describe('useNodePricing', () => {
])
const price = getNodeDisplayPrice(node)
- expect(price).toBe('$0.25/Run')
+ expect(price).toBe('$0.4/Run')
})
it('should return range when widgets are missing', () => {
@@ -771,14 +771,14 @@ describe('useNodePricing', () => {
const { getRelevantWidgetNames } = useNodePricing()
const widgetNames = getRelevantWidgetNames('IdeogramV1')
- expect(widgetNames).toEqual(['num_images'])
+ expect(widgetNames).toEqual(['num_images', 'turbo'])
})
it('should return correct widget names for IdeogramV2', () => {
const { getRelevantWidgetNames } = useNodePricing()
const widgetNames = getRelevantWidgetNames('IdeogramV2')
- expect(widgetNames).toEqual(['num_images'])
+ expect(widgetNames).toEqual(['num_images', 'turbo'])
})
it('should return correct widget names for IdeogramV3', () => {
@@ -832,7 +832,7 @@ describe('useNodePricing', () => {
const node = createMockNode('IdeogramV1', [])
const price = getNodeDisplayPrice(node)
- expect(price).toBe('$0.06 x num_images/Run')
+ expect(price).toBe('$0.02-0.06 x num_images/Run')
})
it('should fall back to static display when num_images widget is missing for IdeogramV2', () => {
@@ -840,7 +840,7 @@ describe('useNodePricing', () => {
const node = createMockNode('IdeogramV2', [])
const price = getNodeDisplayPrice(node)
- expect(price).toBe('$0.08 x num_images/Run')
+ expect(price).toBe('$0.05-0.08 x num_images/Run')
})
it('should handle edge case when num_images value is 1 for IdeogramV1', () => {
@@ -850,7 +850,7 @@ describe('useNodePricing', () => {
])
const price = getNodeDisplayPrice(node)
- expect(price).toBe('$0.06/Run') // 0.06 * 1
+ expect(price).toBe('$0.06/Run') // 0.06 * 1 (turbo=false by default)
})
})
@@ -1022,5 +1022,517 @@ describe('useNodePricing', () => {
getRelevantWidgetNames('RecraftGenerateColorFromImageNode')
).toEqual(['n'])
})
+
+ it('should include relevant widget names for new nodes', () => {
+ const { getRelevantWidgetNames } = useNodePricing()
+
+ expect(getRelevantWidgetNames('RunwayImageToVideoNodeGen3a')).toEqual([
+ 'duration'
+ ])
+ expect(getRelevantWidgetNames('RunwayImageToVideoNodeGen4')).toEqual([
+ 'duration'
+ ])
+ expect(getRelevantWidgetNames('RunwayFirstLastFrameNode')).toEqual([
+ 'duration'
+ ])
+ expect(getRelevantWidgetNames('TripoTextToModelNode')).toEqual([
+ 'quad',
+ 'style',
+ 'texture',
+ 'texture_quality'
+ ])
+ expect(getRelevantWidgetNames('TripoImageToModelNode')).toEqual([
+ 'quad',
+ 'style',
+ 'texture',
+ 'texture_quality'
+ ])
+ })
+ })
+
+ describe('New API nodes pricing', () => {
+ describe('RunwayML nodes', () => {
+ it('should return static price for RunwayTextToImageNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayTextToImageNode')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.08/Run')
+ })
+
+ it('should calculate dynamic pricing for RunwayImageToVideoNodeGen3a', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [
+ { name: 'duration', value: 10 }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.50/Run') // 0.05 * 10
+ })
+
+ it('should return fallback for RunwayImageToVideoNodeGen3a without duration', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.05/second')
+ })
+
+ it('should handle zero duration for RunwayImageToVideoNodeGen3a', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [
+ { name: 'duration', value: 0 }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.00/Run') // 0.05 * 0 = 0
+ })
+
+ it('should handle NaN duration for RunwayImageToVideoNodeGen3a', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [
+ { name: 'duration', value: 'invalid' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.25/Run') // Falls back to 5 seconds: 0.05 * 5
+ })
+ })
+
+ describe('Rodin nodes', () => {
+ it('should return base price for Rodin3D_Regular', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('Rodin3D_Regular')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.4/Run')
+ })
+
+ it('should return addon price for Rodin3D_Detail', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('Rodin3D_Detail')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.4/Run')
+ })
+
+ it('should return addon price for Rodin3D_Smooth', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('Rodin3D_Smooth')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.4/Run')
+ })
+ })
+
+ describe('Tripo nodes', () => {
+ it('should return v2.5 standard pricing for TripoTextToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [
+ { name: 'quad', value: false },
+ { name: 'style', value: 'any style' },
+ { name: 'texture', value: false },
+ { name: 'texture_quality', value: 'standard' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.15/Run') // any style, no quad, no texture
+ })
+
+ it('should return v2.5 detailed pricing for TripoTextToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [
+ { name: 'quad', value: true },
+ { name: 'style', value: 'any style' },
+ { name: 'texture', value: false },
+ { name: 'texture_quality', value: 'detailed' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.35/Run') // any style, quad, no texture, detailed
+ })
+
+ it('should return v2.0 detailed pricing for TripoImageToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoImageToModelNode', [
+ { name: 'quad', value: true },
+ { name: 'style', value: 'any style' },
+ { name: 'texture', value: false },
+ { name: 'texture_quality', value: 'detailed' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.45/Run') // any style, quad, no texture, detailed
+ })
+
+ it('should return legacy pricing for TripoTextToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [
+ { name: 'quad', value: false },
+ { name: 'style', value: 'none' },
+ { name: 'texture', value: false },
+ { name: 'texture_quality', value: 'standard' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.10/Run') // none style, no quad, no texture
+ })
+
+ it('should return static price for TripoRefineNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoRefineNode')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.3/Run')
+ })
+
+ it('should return fallback for TripoTextToModelNode without model', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe(
+ '$0.1-0.4/Run (varies with quad, style, texture & quality)'
+ )
+ })
+
+ it('should return texture-based pricing for TripoTextureNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const standardNode = createMockNode('TripoTextureNode', [
+ { name: 'texture_quality', value: 'standard' }
+ ])
+ const detailedNode = createMockNode('TripoTextureNode', [
+ { name: 'texture_quality', value: 'detailed' }
+ ])
+
+ expect(getNodeDisplayPrice(standardNode)).toBe('$0.1/Run')
+ expect(getNodeDisplayPrice(detailedNode)).toBe('$0.2/Run')
+ })
+
+ it('should handle various Tripo parameter combinations', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ // Test different parameter combinations
+ const testCases = [
+ { quad: false, style: 'none', texture: false, expected: '$0.10/Run' },
+ {
+ quad: false,
+ style: 'any style',
+ texture: false,
+ expected: '$0.15/Run'
+ },
+ { quad: true, style: 'none', texture: false, expected: '$0.20/Run' },
+ {
+ quad: true,
+ style: 'any style',
+ texture: false,
+ expected: '$0.25/Run'
+ }
+ ]
+
+ testCases.forEach(({ quad, style, texture, expected }) => {
+ const node = createMockNode('TripoTextToModelNode', [
+ { name: 'quad', value: quad },
+ { name: 'style', value: style },
+ { name: 'texture', value: texture },
+ { name: 'texture_quality', value: 'standard' }
+ ])
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+
+ it('should return static price for TripoConvertModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoConvertModelNode')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.10/Run')
+ })
+
+ it('should return static price for TripoRetargetRiggedModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoRetargetRiggedModelNode')
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.10/Run')
+ })
+
+ it('should return dynamic pricing for TripoMultiviewToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ // Test basic case - no style, no quad, no texture
+ const basicNode = createMockNode('TripoMultiviewToModelNode', [
+ { name: 'quad', value: false },
+ { name: 'style', value: 'none' },
+ { name: 'texture', value: false },
+ { name: 'texture_quality', value: 'standard' }
+ ])
+ expect(getNodeDisplayPrice(basicNode)).toBe('$0.20/Run')
+
+ // Test high-end case - any style, quad, texture, detailed
+ const highEndNode = createMockNode('TripoMultiviewToModelNode', [
+ { name: 'quad', value: true },
+ { name: 'style', value: 'stylized' },
+ { name: 'texture', value: true },
+ { name: 'texture_quality', value: 'detailed' }
+ ])
+ expect(getNodeDisplayPrice(highEndNode)).toBe('$0.50/Run')
+ })
+
+ it('should return fallback for TripoMultiviewToModelNode without widgets', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoMultiviewToModelNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe(
+ '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+ )
+ })
+ })
+
+ describe('Gemini and OpenAI Chat nodes', () => {
+ it('should return specific pricing for supported Gemini models', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ const testCases = [
+ {
+ model: 'gemini-2.5-pro-preview-05-06',
+ expected: '$0.00016/$0.0006 per 1K tokens'
+ },
+ {
+ model: 'gemini-2.5-flash-preview-04-17',
+ expected: '$0.00125/$0.01 per 1K tokens'
+ },
+ { model: 'unknown-gemini-model', expected: 'Token-based' }
+ ]
+
+ testCases.forEach(({ model, expected }) => {
+ const node = createMockNode('GeminiNode', [
+ { name: 'model', value: model }
+ ])
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+
+ it('should return per-second pricing for Gemini Veo models', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('GeminiNode', [
+ { name: 'model', value: 'veo-2.0-generate-001' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('$0.5/second')
+ })
+
+ it('should return fallback for GeminiNode without model widget', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('GeminiNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('Token-based')
+ })
+
+ it('should return token-based pricing for OpenAIChatNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('OpenAIChatNode', [
+ { name: 'model', value: 'unknown-model' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('Token-based')
+ })
+
+ it('should return correct pricing for all exposed OpenAI models', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ const testCases = [
+ { model: 'o4-mini', expected: '$0.0011/$0.0044 per 1K tokens' },
+ { model: 'o1-pro', expected: '$0.15/$0.60 per 1K tokens' },
+ { model: 'o1', expected: '$0.015/$0.06 per 1K tokens' },
+ { model: 'o3-mini', expected: '$0.0011/$0.0044 per 1K tokens' },
+ { model: 'o3', expected: '$0.01/$0.04 per 1K tokens' },
+ { model: 'gpt-4o', expected: '$0.0025/$0.01 per 1K tokens' },
+ { model: 'gpt-4.1-nano', expected: '$0.0001/$0.0004 per 1K tokens' },
+ { model: 'gpt-4.1-mini', expected: '$0.0004/$0.0016 per 1K tokens' },
+ { model: 'gpt-4.1', expected: '$0.002/$0.008 per 1K tokens' }
+ ]
+
+ testCases.forEach(({ model, expected }) => {
+ const node = createMockNode('OpenAIChatNode', [
+ { name: 'model', value: model }
+ ])
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+
+ it('should handle model ordering correctly (specific before general)', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ // Test that more specific patterns are matched before general ones
+ const testCases = [
+ {
+ model: 'gpt-4.1-nano-test',
+ expected: '$0.0001/$0.0004 per 1K tokens'
+ },
+ {
+ model: 'gpt-4.1-mini-test',
+ expected: '$0.0004/$0.0016 per 1K tokens'
+ },
+ { model: 'gpt-4.1-test', expected: '$0.002/$0.008 per 1K tokens' },
+ { model: 'o1-pro-test', expected: '$0.15/$0.60 per 1K tokens' },
+ { model: 'o1-test', expected: '$0.015/$0.06 per 1K tokens' },
+ { model: 'o3-mini-test', expected: '$0.0011/$0.0044 per 1K tokens' },
+ { model: 'unknown-model', expected: 'Token-based' }
+ ]
+
+ testCases.forEach(({ model, expected }) => {
+ const node = createMockNode('OpenAIChatNode', [
+ { name: 'model', value: model }
+ ])
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+
+ it('should return fallback for OpenAIChatNode without model widget', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('OpenAIChatNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe('Token-based')
+ })
+ })
+
+ describe('Additional RunwayML edge cases', () => {
+ it('should handle edge cases for RunwayML duration-based pricing', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ // Test edge cases
+ const testCases = [
+ { duration: 0, expected: '$0.00/Run' }, // Now correctly handles 0 duration
+ { duration: 1, expected: '$0.05/Run' },
+ { duration: 30, expected: '$1.50/Run' }
+ ]
+
+ testCases.forEach(({ duration, expected }) => {
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [
+ { name: 'duration', value: duration }
+ ])
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+
+ it('should handle invalid duration values gracefully', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('RunwayImageToVideoNodeGen3a', [
+ { name: 'duration', value: 'invalid-string' }
+ ])
+ // When Number('invalid-string') returns NaN, it falls back to 5 seconds
+ expect(getNodeDisplayPrice(node)).toBe('$0.25/Run')
+ })
+
+ it('should handle missing duration widget gracefully', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const nodes = [
+ 'RunwayImageToVideoNodeGen3a',
+ 'RunwayImageToVideoNodeGen4',
+ 'RunwayFirstLastFrameNode'
+ ]
+
+ nodes.forEach((nodeType) => {
+ const node = createMockNode(nodeType, [])
+ expect(getNodeDisplayPrice(node)).toBe('$0.05/second')
+ })
+ })
+ })
+
+ describe('Complete Rodin node coverage', () => {
+ it('should return correct pricing for all Rodin variants', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ const testCases = [
+ { nodeType: 'Rodin3D_Regular', expected: '$0.4/Run' },
+ { nodeType: 'Rodin3D_Sketch', expected: '$0.4/Run' },
+ { nodeType: 'Rodin3D_Detail', expected: '$0.4/Run' },
+ { nodeType: 'Rodin3D_Smooth', expected: '$0.4/Run' }
+ ]
+
+ testCases.forEach(({ nodeType, expected }) => {
+ const node = createMockNode(nodeType)
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ })
+ })
+ })
+
+ describe('Comprehensive Tripo edge case testing', () => {
+ it('should handle TripoImageToModelNode with various parameter combinations', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+
+ const testCases = [
+ { quad: false, style: 'none', texture: false, expected: '$0.20/Run' },
+ { quad: false, style: 'none', texture: true, expected: '$0.25/Run' },
+ {
+ quad: true,
+ style: 'any style',
+ texture: true,
+ textureQuality: 'detailed',
+ expected: '$0.50/Run'
+ },
+ {
+ quad: true,
+ style: 'any style',
+ texture: false,
+ textureQuality: 'standard',
+ expected: '$0.35/Run'
+ }
+ ]
+
+ testCases.forEach(
+ ({ quad, style, texture, textureQuality, expected }) => {
+ const widgets = [
+ { name: 'quad', value: quad },
+ { name: 'style', value: style },
+ { name: 'texture', value: texture }
+ ]
+ if (textureQuality) {
+ widgets.push({ name: 'texture_quality', value: textureQuality })
+ }
+ const node = createMockNode('TripoImageToModelNode', widgets)
+ expect(getNodeDisplayPrice(node)).toBe(expected)
+ }
+ )
+ })
+
+ it('should return correct fallback for TripoImageToModelNode', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoImageToModelNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe(
+ '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+ )
+ })
+
+ it('should handle missing texture quality widget', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe(
+ '$0.1-0.4/Run (varies with quad, style, texture & quality)'
+ )
+ })
+
+ it('should handle missing model version widget', () => {
+ const { getNodeDisplayPrice } = useNodePricing()
+ const node = createMockNode('TripoTextToModelNode', [
+ { name: 'texture_quality', value: 'detailed' }
+ ])
+
+ const price = getNodeDisplayPrice(node)
+ expect(price).toBe(
+ '$0.1-0.4/Run (varies with quad, style, texture & quality)'
+ )
+ })
+ })
})
})
diff --git a/tests-ui/tests/composables/useCoreCommands.test.ts b/tests-ui/tests/composables/useCoreCommands.test.ts
new file mode 100644
index 000000000..a9e801858
--- /dev/null
+++ b/tests-ui/tests/composables/useCoreCommands.test.ts
@@ -0,0 +1,187 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useCoreCommands } from '@/composables/useCoreCommands'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
+
+vi.mock('@/scripts/app', () => ({
+ app: {
+ clean: vi.fn(),
+ canvas: {
+ subgraph: null
+ },
+ graph: {
+ clear: vi.fn()
+ }
+ }
+}))
+
+vi.mock('@/scripts/api', () => ({
+ api: {
+ dispatchCustomEvent: vi.fn(),
+ apiURL: vi.fn(() => 'http://localhost:8188')
+ }
+}))
+
+vi.mock('@/stores/settingStore')
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+ useFirebaseAuthStore: vi.fn(() => ({}))
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuth', () => ({
+ useFirebaseAuth: vi.fn(() => null)
+}))
+
+vi.mock('firebase/auth', () => ({
+ setPersistence: vi.fn(),
+ browserLocalPersistence: {},
+ onAuthStateChanged: vi.fn()
+}))
+
+vi.mock('@/services/workflowService', () => ({
+ useWorkflowService: vi.fn(() => ({}))
+}))
+
+vi.mock('@/services/dialogService', () => ({
+ useDialogService: vi.fn(() => ({}))
+}))
+
+vi.mock('@/services/litegraphService', () => ({
+ useLitegraphService: vi.fn(() => ({}))
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+ useExecutionStore: vi.fn(() => ({}))
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+ useToastStore: vi.fn(() => ({}))
+}))
+
+vi.mock('@/stores/workflowStore', () => ({
+ useWorkflowStore: vi.fn(() => ({}))
+}))
+
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+ useColorPaletteStore: vi.fn(() => ({}))
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+ useFirebaseAuthActions: vi.fn(() => ({}))
+}))
+
+describe('useCoreCommands', () => {
+ const mockSubgraph = {
+ nodes: [
+ // Mock input node
+ {
+ constructor: { comfyClass: 'SubgraphInputNode' },
+ id: 'input1'
+ },
+ // Mock output node
+ {
+ constructor: { comfyClass: 'SubgraphOutputNode' },
+ id: 'output1'
+ },
+ // Mock user node
+ {
+ constructor: { comfyClass: 'SomeUserNode' },
+ id: 'user1'
+ },
+ // Another mock user node
+ {
+ constructor: { comfyClass: 'AnotherUserNode' },
+ id: 'user2'
+ }
+ ],
+ remove: vi.fn()
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ // Set up Pinia
+ setActivePinia(createPinia())
+
+ // Reset app state
+ app.canvas.subgraph = undefined
+
+ // Mock settings store
+ vi.mocked(useSettingStore).mockReturnValue({
+ get: vi.fn().mockReturnValue(false) // Skip confirmation dialog
+ } as any)
+
+ // Mock global confirm
+ global.confirm = vi.fn().mockReturnValue(true)
+ })
+
+ describe('ClearWorkflow command', () => {
+ it('should clear main graph when not in subgraph', async () => {
+ const commands = useCoreCommands()
+ const clearCommand = commands.find(
+ (cmd) => cmd.id === 'Comfy.ClearWorkflow'
+ )!
+
+ // Execute the command
+ await clearCommand.function()
+
+ expect(app.clean).toHaveBeenCalled()
+ expect(app.graph.clear).toHaveBeenCalled()
+ expect(api.dispatchCustomEvent).toHaveBeenCalledWith('graphCleared')
+ })
+
+ it('should preserve input/output nodes when clearing subgraph', async () => {
+ // Set up subgraph context
+ app.canvas.subgraph = mockSubgraph as any
+
+ const commands = useCoreCommands()
+ const clearCommand = commands.find(
+ (cmd) => cmd.id === 'Comfy.ClearWorkflow'
+ )!
+
+ // Execute the command
+ await clearCommand.function()
+
+ expect(app.clean).toHaveBeenCalled()
+ expect(app.graph.clear).not.toHaveBeenCalled()
+
+ // Should only remove user nodes, not input/output nodes
+ expect(mockSubgraph.remove).toHaveBeenCalledTimes(2)
+ expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[2]) // user1
+ expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[3]) // user2
+ expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
+ mockSubgraph.nodes[0]
+ ) // input1
+ expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
+ mockSubgraph.nodes[1]
+ ) // output1
+
+ expect(api.dispatchCustomEvent).toHaveBeenCalledWith('graphCleared')
+ })
+
+ it('should respect confirmation setting', async () => {
+ // Mock confirmation required
+ vi.mocked(useSettingStore).mockReturnValue({
+ get: vi.fn().mockReturnValue(true) // Require confirmation
+ } as any)
+
+ global.confirm = vi.fn().mockReturnValue(false) // User cancels
+
+ const commands = useCoreCommands()
+ const clearCommand = commands.find(
+ (cmd) => cmd.id === 'Comfy.ClearWorkflow'
+ )!
+
+ // Execute the command
+ await clearCommand.function()
+
+ // Should not clear anything when user cancels
+ expect(app.clean).not.toHaveBeenCalled()
+ expect(app.graph.clear).not.toHaveBeenCalled()
+ expect(api.dispatchCustomEvent).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts b/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts
new file mode 100644
index 000000000..b8b4fceac
--- /dev/null
+++ b/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts
@@ -0,0 +1,234 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useFrontendVersionMismatchWarning } from '@/composables/useFrontendVersionMismatchWarning'
+import { useToastStore } from '@/stores/toastStore'
+import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+
+// Mock globals
+//@ts-expect-error Define global for the test
+global.__COMFYUI_FRONTEND_VERSION__ = '1.0.0'
+
+// Mock config first - this needs to be before any imports
+vi.mock('@/config', () => ({
+ default: {
+ app_title: 'ComfyUI',
+ app_version: '1.0.0'
+ }
+}))
+
+// Mock app
+vi.mock('@/scripts/app', () => ({
+ app: {
+ ui: {
+ settings: {
+ dispatchChange: vi.fn()
+ }
+ }
+ }
+}))
+
+// Mock api
+vi.mock('@/scripts/api', () => ({
+ api: {
+ getSettings: vi.fn(() => Promise.resolve({})),
+ storeSetting: vi.fn(() => Promise.resolve(undefined))
+ }
+}))
+
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+ useI18n: () => ({
+ t: (key: string, params?: any) => {
+ if (key === 'g.versionMismatchWarning')
+ return 'Version Compatibility Warning'
+ if (key === 'g.versionMismatchWarningMessage' && params) {
+ return `${params.warning}: ${params.detail} Visit https://docs.comfy.org/installation/update_comfyui#common-update-issues for update instructions.`
+ }
+ if (key === 'g.frontendOutdated' && params) {
+ return `Frontend version ${params.frontendVersion} is outdated. Backend requires ${params.requiredVersion} or higher.`
+ }
+ if (key === 'g.frontendNewer' && params) {
+ return `Frontend version ${params.frontendVersion} may not be compatible with backend version ${params.backendVersion}.`
+ }
+ return key
+ }
+ }),
+ createI18n: vi.fn(() => ({
+ global: {
+ locale: { value: 'en' },
+ t: vi.fn()
+ }
+ }))
+}))
+
+// Mock lifecycle hooks to track their calls
+const mockOnMounted = vi.fn()
+vi.mock('vue', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ onMounted: (fn: () => void) => {
+ mockOnMounted()
+ fn()
+ }
+ }
+})
+
+describe('useFrontendVersionMismatchWarning', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ setActivePinia(createPinia())
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ it('should not show warning when there is no version mismatch', () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+
+ // Mock no version mismatch
+ vi.spyOn(versionStore, 'shouldShowWarning', 'get').mockReturnValue(false)
+
+ useFrontendVersionMismatchWarning()
+
+ expect(addAlertSpy).not.toHaveBeenCalled()
+ })
+
+ it('should show warning immediately when immediate option is true and there is a mismatch', async () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+ const dismissWarningSpy = vi.spyOn(versionStore, 'dismissWarning')
+
+ // Mock version mismatch
+ vi.spyOn(versionStore, 'shouldShowWarning', 'get').mockReturnValue(true)
+ vi.spyOn(versionStore, 'warningMessage', 'get').mockReturnValue({
+ type: 'outdated',
+ frontendVersion: '1.0.0',
+ requiredVersion: '2.0.0'
+ })
+
+ useFrontendVersionMismatchWarning({ immediate: true })
+
+ // For immediate: true, the watcher should fire immediately in onMounted
+ await nextTick()
+
+ expect(addAlertSpy).toHaveBeenCalledWith(
+ expect.stringContaining('Version Compatibility Warning')
+ )
+ expect(addAlertSpy).toHaveBeenCalledWith(
+ expect.stringContaining('Frontend version 1.0.0 is outdated')
+ )
+ // Should automatically dismiss the warning
+ expect(dismissWarningSpy).toHaveBeenCalled()
+ })
+
+ it('should not show warning immediately when immediate option is false', async () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+
+ // Mock version mismatch
+ vi.spyOn(versionStore, 'shouldShowWarning', 'get').mockReturnValue(true)
+ vi.spyOn(versionStore, 'warningMessage', 'get').mockReturnValue({
+ type: 'outdated',
+ frontendVersion: '1.0.0',
+ requiredVersion: '2.0.0'
+ })
+
+ const result = useFrontendVersionMismatchWarning({ immediate: false })
+ await nextTick()
+
+ // Should not show automatically
+ expect(addAlertSpy).not.toHaveBeenCalled()
+
+ // But should show when called manually
+ result.showWarning()
+ expect(addAlertSpy).toHaveBeenCalledOnce()
+ })
+
+ it('should call showWarning method manually', () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+ const dismissWarningSpy = vi.spyOn(versionStore, 'dismissWarning')
+
+ vi.spyOn(versionStore, 'warningMessage', 'get').mockReturnValue({
+ type: 'outdated',
+ frontendVersion: '1.0.0',
+ requiredVersion: '2.0.0'
+ })
+
+ const { showWarning } = useFrontendVersionMismatchWarning()
+ showWarning()
+
+ expect(addAlertSpy).toHaveBeenCalledOnce()
+ expect(dismissWarningSpy).toHaveBeenCalled()
+ })
+
+ it('should expose store methods and computed values', () => {
+ const versionStore = useVersionCompatibilityStore()
+
+ const mockDismissWarning = vi.fn()
+ vi.spyOn(versionStore, 'dismissWarning').mockImplementation(
+ mockDismissWarning
+ )
+ vi.spyOn(versionStore, 'shouldShowWarning', 'get').mockReturnValue(true)
+ vi.spyOn(versionStore, 'hasVersionMismatch', 'get').mockReturnValue(true)
+
+ const result = useFrontendVersionMismatchWarning()
+
+ expect(result.shouldShowWarning.value).toBe(true)
+ expect(result.hasVersionMismatch.value).toBe(true)
+
+ void result.dismissWarning()
+ expect(mockDismissWarning).toHaveBeenCalled()
+ })
+
+ it('should register onMounted hook', () => {
+ useFrontendVersionMismatchWarning()
+
+ expect(mockOnMounted).toHaveBeenCalledOnce()
+ })
+
+ it('should not show warning when warningMessage is null', () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+
+ vi.spyOn(versionStore, 'warningMessage', 'get').mockReturnValue(null)
+
+ const { showWarning } = useFrontendVersionMismatchWarning()
+ showWarning()
+
+ expect(addAlertSpy).not.toHaveBeenCalled()
+ })
+
+ it('should only show warning once even if called multiple times', () => {
+ const toastStore = useToastStore()
+ const versionStore = useVersionCompatibilityStore()
+ const addAlertSpy = vi.spyOn(toastStore, 'addAlert')
+
+ vi.spyOn(versionStore, 'warningMessage', 'get').mockReturnValue({
+ type: 'outdated',
+ frontendVersion: '1.0.0',
+ requiredVersion: '2.0.0'
+ })
+
+ const { showWarning } = useFrontendVersionMismatchWarning()
+
+ // Call showWarning multiple times
+ showWarning()
+ showWarning()
+ showWarning()
+
+ // Should only have been called once
+ expect(addAlertSpy).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/tests-ui/tests/composables/useMinimap.test.ts b/tests-ui/tests/composables/useMinimap.test.ts
new file mode 100644
index 000000000..800b87b0e
--- /dev/null
+++ b/tests-ui/tests/composables/useMinimap.test.ts
@@ -0,0 +1,815 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const mockPause = vi.fn()
+const mockResume = vi.fn()
+
+vi.mock('@vueuse/core', () => {
+ const callbacks: Record void> = {}
+ let callbackId = 0
+
+ return {
+ useRafFn: vi.fn((callback, options) => {
+ const id = callbackId++
+ callbacks[id] = callback
+
+ if (options?.immediate !== false) {
+ void Promise.resolve().then(() => callback())
+ }
+
+ return {
+ pause: mockPause,
+ resume: vi.fn(() => {
+ mockResume()
+ void Promise.resolve().then(() => callbacks[id]?.())
+ })
+ }
+ }),
+ useThrottleFn: vi.fn((callback) => {
+ return (...args: any[]) => {
+ return callback(...args)
+ }
+ })
+ }
+})
+
+let mockCanvas: any
+let mockGraph: any
+
+const setupMocks = () => {
+ const mockNodes = [
+ {
+ id: 'node1',
+ pos: [0, 0],
+ size: [100, 50],
+ color: '#ff0000',
+ constructor: { color: '#666' },
+ outputs: [
+ {
+ links: ['link1']
+ }
+ ]
+ },
+ {
+ id: 'node2',
+ pos: [200, 100],
+ size: [150, 75],
+ constructor: { color: '#666' },
+ outputs: []
+ }
+ ]
+
+ mockGraph = {
+ _nodes: mockNodes,
+ links: {
+ link1: {
+ id: 'link1',
+ target_id: 'node2'
+ }
+ },
+ getNodeById: vi.fn((id) => mockNodes.find((n) => n.id === id)),
+ setDirtyCanvas: vi.fn(),
+ onNodeAdded: null,
+ onNodeRemoved: null,
+ onConnectionChange: null
+ }
+
+ mockCanvas = {
+ graph: mockGraph,
+ canvas: {
+ width: 1000,
+ height: 800,
+ clientWidth: 1000,
+ clientHeight: 800
+ },
+ ds: {
+ scale: 1,
+ offset: [0, 0]
+ },
+ setDirty: vi.fn()
+ }
+}
+
+setupMocks()
+
+const defaultCanvasStore = {
+ canvas: mockCanvas,
+ getCanvas: () => defaultCanvasStore.canvas
+}
+
+const defaultSettingStore = {
+ get: vi.fn().mockReturnValue(true),
+ set: vi.fn().mockResolvedValue(undefined)
+}
+
+vi.mock('@/stores/graphStore', () => ({
+ useCanvasStore: vi.fn(() => defaultCanvasStore)
+}))
+
+vi.mock('@/stores/settingStore', () => ({
+ useSettingStore: vi.fn(() => defaultSettingStore)
+}))
+
+vi.mock('@/scripts/api', () => ({
+ api: {
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn()
+ }
+}))
+
+const { useMinimap } = await import('@/composables/useMinimap')
+const { api } = await import('@/scripts/api')
+
+describe('useMinimap', () => {
+ let mockCanvas: any
+ let mockGraph: any
+ let mockCanvasElement: any
+ let mockContainerElement: any
+ let mockContext2D: any
+
+ const createAndInitializeMinimap = async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+ await minimap.init()
+ await nextTick()
+ await flushPromises()
+ return minimap
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ mockPause.mockClear()
+ mockResume.mockClear()
+
+ mockContext2D = {
+ clearRect: vi.fn(),
+ fillRect: vi.fn(),
+ strokeRect: vi.fn(),
+ beginPath: vi.fn(),
+ moveTo: vi.fn(),
+ lineTo: vi.fn(),
+ stroke: vi.fn(),
+ arc: vi.fn(),
+ fill: vi.fn(),
+ fillStyle: '',
+ strokeStyle: '',
+ lineWidth: 0
+ }
+
+ mockCanvasElement = {
+ getContext: vi.fn().mockReturnValue(mockContext2D),
+ width: 250,
+ height: 200,
+ clientWidth: 250,
+ clientHeight: 200
+ }
+
+ const mockRect = {
+ left: 100,
+ top: 100,
+ width: 250,
+ height: 200,
+ right: 350,
+ bottom: 300,
+ x: 100,
+ y: 100
+ }
+
+ mockContainerElement = {
+ getBoundingClientRect: vi.fn(() => ({ ...mockRect }))
+ }
+
+ const mockNodes = [
+ {
+ id: 'node1',
+ pos: [0, 0],
+ size: [100, 50],
+ color: '#ff0000',
+ constructor: { color: '#666' },
+ outputs: [
+ {
+ links: ['link1']
+ }
+ ]
+ },
+ {
+ id: 'node2',
+ pos: [200, 100],
+ size: [150, 75],
+ constructor: { color: '#666' },
+ outputs: []
+ }
+ ]
+
+ mockGraph = {
+ _nodes: mockNodes,
+ links: {
+ link1: {
+ id: 'link1',
+ target_id: 'node2'
+ }
+ },
+ getNodeById: vi.fn((id) => mockNodes.find((n) => n.id === id)),
+ setDirtyCanvas: vi.fn(),
+ onNodeAdded: null,
+ onNodeRemoved: null,
+ onConnectionChange: null
+ }
+
+ mockCanvas = {
+ graph: mockGraph,
+ canvas: {
+ width: 1000,
+ height: 800,
+ clientWidth: 1000,
+ clientHeight: 800
+ },
+ ds: {
+ scale: 1,
+ offset: [0, 0]
+ },
+ setDirty: vi.fn()
+ }
+
+ defaultCanvasStore.canvas = mockCanvas
+
+ defaultSettingStore.get = vi.fn().mockReturnValue(true)
+ defaultSettingStore.set = vi.fn().mockResolvedValue(undefined)
+
+ Object.defineProperty(window, 'devicePixelRatio', {
+ writable: true,
+ configurable: true,
+ value: 1
+ })
+
+ window.addEventListener = vi.fn()
+ window.removeEventListener = vi.fn()
+ })
+
+ describe('initialization', () => {
+ it('should initialize with default values', () => {
+ const originalCanvas = defaultCanvasStore.canvas
+ defaultCanvasStore.canvas = null
+
+ const minimap = useMinimap()
+
+ expect(minimap.width).toBe(250)
+ expect(minimap.height).toBe(200)
+ expect(minimap.visible.value).toBe(true)
+ expect(minimap.initialized.value).toBe(false)
+
+ defaultCanvasStore.canvas = originalCanvas
+ })
+
+ it('should initialize minimap when canvas is available', async () => {
+ const minimap = useMinimap()
+
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ expect(minimap.initialized.value).toBe(true)
+ expect(defaultSettingStore.get).toHaveBeenCalledWith(
+ 'Comfy.Minimap.Visible'
+ )
+ expect(api.addEventListener).toHaveBeenCalledWith(
+ 'graphChanged',
+ expect.any(Function)
+ )
+
+ if (minimap.visible.value) {
+ expect(mockResume).toHaveBeenCalled()
+ }
+ })
+
+ it('should not initialize without canvas and graph', async () => {
+ const originalCanvas = defaultCanvasStore.canvas
+ defaultCanvasStore.canvas = null
+
+ const minimap = useMinimap()
+ await minimap.init()
+
+ expect(minimap.initialized.value).toBe(false)
+ expect(api.addEventListener).not.toHaveBeenCalled()
+
+ defaultCanvasStore.canvas = originalCanvas
+ })
+
+ it('should setup event listeners on graph', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ expect(mockGraph.onNodeAdded).toBeDefined()
+ expect(mockGraph.onNodeRemoved).toBeDefined()
+ expect(mockGraph.onConnectionChange).toBeDefined()
+ })
+
+ it('should handle visibility from settings', async () => {
+ defaultSettingStore.get.mockReturnValue(false)
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ expect(minimap.visible.value).toBe(false)
+ expect(mockResume).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('destroy', () => {
+ it('should cleanup all resources', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+ minimap.destroy()
+
+ expect(mockPause).toHaveBeenCalled()
+ expect(api.removeEventListener).toHaveBeenCalledWith(
+ 'graphChanged',
+ expect.any(Function)
+ )
+ expect(window.removeEventListener).toHaveBeenCalled()
+ expect(minimap.initialized.value).toBe(false)
+ })
+
+ it('should restore original graph callbacks', async () => {
+ const originalCallbacks = {
+ onNodeAdded: vi.fn(),
+ onNodeRemoved: vi.fn(),
+ onConnectionChange: vi.fn()
+ }
+
+ mockGraph.onNodeAdded = originalCallbacks.onNodeAdded
+ mockGraph.onNodeRemoved = originalCallbacks.onNodeRemoved
+ mockGraph.onConnectionChange = originalCallbacks.onConnectionChange
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+ minimap.destroy()
+
+ expect(mockGraph.onNodeAdded).toBe(originalCallbacks.onNodeAdded)
+ expect(mockGraph.onNodeRemoved).toBe(originalCallbacks.onNodeRemoved)
+ expect(mockGraph.onConnectionChange).toBe(
+ originalCallbacks.onConnectionChange
+ )
+ })
+ })
+
+ describe('toggle', () => {
+ it('should toggle visibility and save to settings', async () => {
+ const minimap = useMinimap()
+ const initialVisibility = minimap.visible.value
+
+ await minimap.toggle()
+
+ expect(minimap.visible.value).toBe(!initialVisibility)
+ expect(defaultSettingStore.set).toHaveBeenCalledWith(
+ 'Comfy.Minimap.Visible',
+ !initialVisibility
+ )
+
+ await minimap.toggle()
+
+ expect(minimap.visible.value).toBe(initialVisibility)
+ expect(defaultSettingStore.set).toHaveBeenCalledWith(
+ 'Comfy.Minimap.Visible',
+ initialVisibility
+ )
+ })
+ })
+
+ describe('rendering', () => {
+ it('should verify context is obtained during render', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ const getContextSpy = vi.spyOn(mockCanvasElement, 'getContext')
+
+ await minimap.init()
+
+ await new Promise((resolve) => setTimeout(resolve, 100))
+
+ expect(getContextSpy).toHaveBeenCalled()
+ expect(getContextSpy).toHaveBeenCalledWith('2d')
+ })
+
+ it('should render at least once after initialization', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ await new Promise((resolve) => setTimeout(resolve, 100))
+
+ const renderingOccurred =
+ mockContext2D.clearRect.mock.calls.length > 0 ||
+ mockContext2D.fillRect.mock.calls.length > 0
+
+ if (!renderingOccurred) {
+ console.log('Minimap visible:', minimap.visible.value)
+ console.log('Minimap initialized:', minimap.initialized.value)
+ console.log('Canvas exists:', !!defaultCanvasStore.canvas)
+ console.log('Graph exists:', !!defaultCanvasStore.canvas?.graph)
+ }
+
+ expect(renderingOccurred).toBe(true)
+ })
+
+ it('should not render when context is null', async () => {
+ mockCanvasElement.getContext = vi.fn().mockReturnValue(null)
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+ await new Promise((resolve) => setTimeout(resolve, 100))
+
+ expect(mockContext2D.clearRect).not.toHaveBeenCalled()
+
+ mockCanvasElement.getContext = vi.fn().mockReturnValue(mockContext2D)
+ })
+
+ it('should handle empty graph', async () => {
+ const originalNodes = [...mockGraph._nodes]
+ mockGraph._nodes = []
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+ await new Promise((resolve) => setTimeout(resolve, 100))
+
+ expect(minimap.initialized.value).toBe(true)
+
+ expect(mockContext2D.fillRect).not.toHaveBeenCalled()
+
+ mockGraph._nodes = originalNodes
+ })
+ })
+
+ describe('mouse interactions', () => {
+ it('should handle mouse down and start dragging', async () => {
+ const minimap = await createAndInitializeMinimap()
+
+ const mouseEvent = new MouseEvent('mousedown', {
+ clientX: 150,
+ clientY: 150
+ })
+
+ minimap.handleMouseDown(mouseEvent)
+
+ expect(mockContainerElement.getBoundingClientRect).toHaveBeenCalled()
+ expect(mockCanvas.setDirty).toHaveBeenCalledWith(true, true)
+ })
+
+ it('should handle mouse move while dragging', async () => {
+ const minimap = await createAndInitializeMinimap()
+
+ const mouseDownEvent = new MouseEvent('mousedown', {
+ clientX: 150,
+ clientY: 150
+ })
+ minimap.handleMouseDown(mouseDownEvent)
+
+ const mouseMoveEvent = new MouseEvent('mousemove', {
+ clientX: 200,
+ clientY: 200
+ })
+ minimap.handleMouseMove(mouseMoveEvent)
+
+ expect(mockCanvas.setDirty).toHaveBeenCalledWith(true, true)
+ expect(mockCanvas.ds.offset).toBeDefined()
+ })
+
+ it('should not move when not dragging', async () => {
+ const minimap = await createAndInitializeMinimap()
+
+ mockCanvas.setDirty.mockClear()
+
+ const mouseMoveEvent = new MouseEvent('mousemove', {
+ clientX: 200,
+ clientY: 200
+ })
+ minimap.handleMouseMove(mouseMoveEvent)
+
+ expect(mockCanvas.setDirty).not.toHaveBeenCalled()
+ })
+
+ it('should handle mouse up to stop dragging', async () => {
+ const minimap = await createAndInitializeMinimap()
+
+ const mouseDownEvent = new MouseEvent('mousedown', {
+ clientX: 150,
+ clientY: 150
+ })
+ minimap.handleMouseDown(mouseDownEvent)
+
+ minimap.handleMouseUp()
+
+ mockCanvas.setDirty.mockClear()
+
+ const mouseMoveEvent = new MouseEvent('mousemove', {
+ clientX: 200,
+ clientY: 200
+ })
+ minimap.handleMouseMove(mouseMoveEvent)
+
+ expect(mockCanvas.setDirty).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('wheel interactions', () => {
+ it('should handle wheel zoom in', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100,
+ clientX: 150,
+ clientY: 150
+ })
+
+ const preventDefault = vi.fn()
+ Object.defineProperty(wheelEvent, 'preventDefault', {
+ value: preventDefault
+ })
+
+ minimap.handleWheel(wheelEvent)
+
+ expect(preventDefault).toHaveBeenCalled()
+ expect(mockCanvas.ds.scale).toBeCloseTo(1.1)
+ expect(mockCanvas.setDirty).toHaveBeenCalledWith(true, true)
+ })
+
+ it('should handle wheel zoom out', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: 100,
+ clientX: 150,
+ clientY: 150
+ })
+
+ const preventDefault = vi.fn()
+ Object.defineProperty(wheelEvent, 'preventDefault', {
+ value: preventDefault
+ })
+
+ minimap.handleWheel(wheelEvent)
+
+ expect(preventDefault).toHaveBeenCalled()
+ expect(mockCanvas.ds.scale).toBeCloseTo(0.9)
+ expect(mockCanvas.setDirty).toHaveBeenCalledWith(true, true)
+ })
+
+ it('should respect zoom limits', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ mockCanvas.ds.scale = 0.1
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: 100,
+ clientX: 150,
+ clientY: 150
+ })
+
+ const preventDefault = vi.fn()
+ Object.defineProperty(wheelEvent, 'preventDefault', {
+ value: preventDefault
+ })
+
+ minimap.handleWheel(wheelEvent)
+
+ expect(mockCanvas.ds.scale).toBe(0.1)
+ })
+
+ it('should update container rect if needed', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const wheelEvent = new WheelEvent('wheel', {
+ deltaY: -100,
+ clientX: 150,
+ clientY: 150
+ })
+
+ const preventDefault = vi.fn()
+ Object.defineProperty(wheelEvent, 'preventDefault', {
+ value: preventDefault
+ })
+
+ minimap.handleWheel(wheelEvent)
+
+ expect(mockContainerElement.getBoundingClientRect).toHaveBeenCalled()
+ })
+ })
+
+ describe('viewport updates', () => {
+ it('should update viewport transform correctly', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+ await nextTick()
+
+ const viewportStyles = minimap.viewportStyles.value
+
+ expect(viewportStyles).toBeDefined()
+ expect(viewportStyles.transform).toMatch(
+ /translate\(-?\d+(\.\d+)?px, -?\d+(\.\d+)?px\)/
+ )
+ expect(viewportStyles.width).toMatch(/\d+(\.\d+)?px/)
+ expect(viewportStyles.height).toMatch(/\d+(\.\d+)?px/)
+ expect(viewportStyles.border).toBe('2px solid #FFF')
+ })
+
+ it('should handle canvas dimension updates', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ mockCanvas.canvas.clientWidth = 1200
+ mockCanvas.canvas.clientHeight = 900
+
+ const resizeHandler = (window.addEventListener as any).mock.calls.find(
+ (call: any) => call[0] === 'resize'
+ )?.[1]
+
+ if (resizeHandler) {
+ resizeHandler()
+ }
+
+ await nextTick()
+
+ expect(minimap.viewportStyles.value).toBeDefined()
+ })
+ })
+
+ describe('graph change handling', () => {
+ it('should handle node addition', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const newNode = {
+ id: 'node3',
+ pos: [300, 200],
+ size: [100, 100],
+ constructor: { color: '#666' }
+ }
+
+ mockGraph._nodes.push(newNode)
+ if (mockGraph.onNodeAdded) {
+ mockGraph.onNodeAdded(newNode)
+ }
+
+ await new Promise((resolve) => setTimeout(resolve, 600))
+ })
+
+ it('should handle node removal', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const removedNode = mockGraph._nodes[0]
+ mockGraph._nodes.splice(0, 1)
+
+ if (mockGraph.onNodeRemoved) {
+ mockGraph.onNodeRemoved(removedNode)
+ }
+
+ await new Promise((resolve) => setTimeout(resolve, 600))
+ })
+
+ it('should handle connection changes', async () => {
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ if (mockGraph.onConnectionChange) {
+ mockGraph.onConnectionChange(mockGraph._nodes[0])
+ }
+
+ await new Promise((resolve) => setTimeout(resolve, 600))
+ })
+ })
+
+ describe('container styles', () => {
+ it('should provide correct container styles', () => {
+ const minimap = useMinimap()
+ const styles = minimap.containerStyles.value
+
+ expect(styles.width).toBe('250px')
+ expect(styles.height).toBe('200px')
+ expect(styles.backgroundColor).toBe('#15161C')
+ expect(styles.border).toBe('1px solid #333')
+ expect(styles.borderRadius).toBe('8px')
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle missing node outputs', async () => {
+ mockGraph._nodes[0].outputs = null
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await expect(minimap.init()).resolves.not.toThrow()
+ expect(minimap.initialized.value).toBe(true)
+ })
+
+ it('should handle invalid link references', async () => {
+ mockGraph.links.link1.target_id = 'invalid-node'
+ mockGraph.getNodeById.mockReturnValue(null)
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await expect(minimap.init()).resolves.not.toThrow()
+ expect(minimap.initialized.value).toBe(true)
+ })
+
+ it('should handle high DPI displays', async () => {
+ window.devicePixelRatio = 2
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ expect(minimap.initialized.value).toBe(true)
+ })
+
+ it('should handle nodes without color', async () => {
+ mockGraph._nodes[0].color = undefined
+
+ const minimap = useMinimap()
+ minimap.containerRef.value = mockContainerElement
+ minimap.canvasRef.value = mockCanvasElement
+
+ await minimap.init()
+
+ const renderMinimap = (minimap as any).renderMinimap
+ if (renderMinimap) {
+ renderMinimap()
+ }
+
+ expect(mockContext2D.fillRect).toHaveBeenCalled()
+ expect(mockContext2D.fillStyle).toBeDefined()
+ })
+ })
+
+ describe('setMinimapRef', () => {
+ it('should set minimap reference', () => {
+ const minimap = useMinimap()
+ const ref = { value: 'test-ref' }
+
+ minimap.setMinimapRef(ref)
+
+ expect(() => minimap.setMinimapRef(ref)).not.toThrow()
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/useMissingNodes.test.ts b/tests-ui/tests/composables/useMissingNodes.test.ts
index ec60626ab..9dc0b08e5 100644
--- a/tests-ui/tests/composables/useMissingNodes.test.ts
+++ b/tests-ui/tests/composables/useMissingNodes.test.ts
@@ -7,6 +7,7 @@ import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
import { app } from '@/scripts/app'
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
// Mock Vue's onMounted to execute immediately for testing
vi.mock('vue', async () => {
@@ -38,9 +39,14 @@ vi.mock('@/scripts/app', () => ({
}
}))
+vi.mock('@/utils/graphTraversalUtil', () => ({
+ collectAllNodes: vi.fn()
+}))
+
const mockUseWorkflowPacks = vi.mocked(useWorkflowPacks)
const mockUseComfyManagerStore = vi.mocked(useComfyManagerStore)
const mockUseNodeDefStore = vi.mocked(useNodeDefStore)
+const mockCollectAllNodes = vi.mocked(collectAllNodes)
describe('useMissingNodes', () => {
const mockWorkflowPacks = [
@@ -95,6 +101,9 @@ describe('useMissingNodes', () => {
// Reset app.graph.nodes
// @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
app.graph.nodes = []
+
+ // Default mock for collectAllNodes - returns empty array
+ mockCollectAllNodes.mockReturnValue([])
})
describe('core filtering logic', () => {
@@ -286,14 +295,9 @@ describe('useMissingNodes', () => {
it('identifies missing core nodes not in nodeDefStore', () => {
const coreNode1 = createMockNode('CoreNode1', 'comfy-core', '1.2.0')
const coreNode2 = createMockNode('CoreNode2', 'comfy-core', '1.2.0')
- const registeredNode = createMockNode(
- 'RegisteredNode',
- 'comfy-core',
- '1.0.0'
- )
- // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
- app.graph.nodes = [coreNode1, coreNode2, registeredNode]
+ // Mock collectAllNodes to return only the filtered nodes (missing core nodes)
+ mockCollectAllNodes.mockReturnValue([coreNode1, coreNode2])
mockUseNodeDefStore.mockReturnValue({
nodeDefsByName: {
@@ -316,8 +320,8 @@ describe('useMissingNodes', () => {
const node130 = createMockNode('Node130', 'comfy-core', '1.3.0')
const nodeNoVer = createMockNode('NodeNoVer', 'comfy-core')
- // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
- app.graph.nodes = [node120, node130, nodeNoVer]
+ // Mock collectAllNodes to return these nodes
+ mockCollectAllNodes.mockReturnValue([node120, node130, nodeNoVer])
// @ts-expect-error - Mocking partial NodeDefStore for testing.
mockUseNodeDefStore.mockReturnValue({
@@ -334,11 +338,9 @@ describe('useMissingNodes', () => {
it('ignores non-core nodes', () => {
const coreNode = createMockNode('CoreNode', 'comfy-core', '1.2.0')
- const customNode = createMockNode('CustomNode', 'custom-pack', '1.0.0')
- const noPackNode = createMockNode('NoPackNode')
- // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
- app.graph.nodes = [coreNode, customNode, noPackNode]
+ // Mock collectAllNodes to return only the filtered nodes (core nodes only)
+ mockCollectAllNodes.mockReturnValue([coreNode])
// @ts-expect-error - Mocking partial NodeDefStore for testing.
mockUseNodeDefStore.mockReturnValue({
@@ -353,19 +355,8 @@ describe('useMissingNodes', () => {
})
it('returns empty object when no core nodes are missing', () => {
- const registeredNode1 = createMockNode(
- 'RegisteredNode1',
- 'comfy-core',
- '1.0.0'
- )
- const registeredNode2 = createMockNode(
- 'RegisteredNode2',
- 'comfy-core',
- '1.1.0'
- )
-
- // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
- app.graph.nodes = [registeredNode1, registeredNode2]
+ // Mock collectAllNodes to return empty array (no missing nodes after filtering)
+ mockCollectAllNodes.mockReturnValue([])
mockUseNodeDefStore.mockReturnValue({
nodeDefsByName: {
@@ -382,4 +373,200 @@ describe('useMissingNodes', () => {
expect(Object.keys(missingCoreNodes.value)).toHaveLength(0)
})
})
+
+ describe('subgraph support', () => {
+ const createMockNode = (
+ type: string,
+ packId?: string,
+ version?: string
+ ): LGraphNode =>
+ // @ts-expect-error - Creating a partial mock of LGraphNode for testing.
+ // We only need specific properties for our tests, not the full LGraphNode interface.
+ ({
+ type,
+ properties: { cnr_id: packId, ver: version },
+ id: 1,
+ title: type,
+ pos: [0, 0],
+ size: [100, 100],
+ flags: {},
+ graph: null,
+ mode: 0,
+ inputs: [],
+ outputs: []
+ })
+
+ it('detects missing core nodes from subgraphs via collectAllNodes', () => {
+ const mainNode = createMockNode('MainNode', 'comfy-core', '1.0.0')
+ const subgraphNode1 = createMockNode(
+ 'SubgraphNode1',
+ 'comfy-core',
+ '1.0.0'
+ )
+ const subgraphNode2 = createMockNode(
+ 'SubgraphNode2',
+ 'comfy-core',
+ '1.1.0'
+ )
+
+ // Mock collectAllNodes to return all nodes including subgraph nodes
+ mockCollectAllNodes.mockReturnValue([
+ mainNode,
+ subgraphNode1,
+ subgraphNode2
+ ])
+
+ // Mock none of the nodes as registered
+ // @ts-expect-error - Mocking partial NodeDefStore for testing.
+ mockUseNodeDefStore.mockReturnValue({
+ nodeDefsByName: {}
+ })
+
+ const { missingCoreNodes } = useMissingNodes()
+
+ // Should detect all 3 nodes as missing
+ expect(Object.keys(missingCoreNodes.value)).toHaveLength(2) // 2 versions: 1.0.0, 1.1.0
+ expect(missingCoreNodes.value['1.0.0']).toHaveLength(2) // MainNode + SubgraphNode1
+ expect(missingCoreNodes.value['1.1.0']).toHaveLength(1) // SubgraphNode2
+ })
+
+ it('calls collectAllNodes with the app graph and filter function', () => {
+ const mockGraph = { nodes: [], subgraphs: new Map() }
+ // @ts-expect-error - Mocking app.graph for testing
+ app.graph = mockGraph
+
+ const { missingCoreNodes } = useMissingNodes()
+ // Access the computed to trigger the function
+ void missingCoreNodes.value
+
+ expect(mockCollectAllNodes).toHaveBeenCalledWith(
+ mockGraph,
+ expect.any(Function)
+ )
+ })
+
+ it('handles collectAllNodes returning empty array', () => {
+ mockCollectAllNodes.mockReturnValue([])
+
+ const { missingCoreNodes } = useMissingNodes()
+
+ expect(Object.keys(missingCoreNodes.value)).toHaveLength(0)
+ })
+
+ it('filter function correctly identifies missing core nodes', () => {
+ const mockGraph = { nodes: [], subgraphs: new Map() }
+ // @ts-expect-error - Mocking app.graph for testing
+ app.graph = mockGraph
+
+ mockUseNodeDefStore.mockReturnValue({
+ nodeDefsByName: {
+ // @ts-expect-error - Creating minimal mock of ComfyNodeDefImpl for testing.
+ RegisteredCore: { name: 'RegisteredCore' }
+ }
+ })
+
+ let capturedFilterFunction: ((node: LGraphNode) => boolean) | undefined
+
+ mockCollectAllNodes.mockImplementation((_graph, filter) => {
+ capturedFilterFunction = filter
+ return []
+ })
+
+ const { missingCoreNodes } = useMissingNodes()
+ void missingCoreNodes.value
+
+ expect(capturedFilterFunction).toBeDefined()
+
+ if (capturedFilterFunction) {
+ const missingCoreNode = createMockNode(
+ 'MissingCore',
+ 'comfy-core',
+ '1.0.0'
+ )
+ const registeredCoreNode = createMockNode(
+ 'RegisteredCore',
+ 'comfy-core',
+ '1.0.0'
+ )
+ const customNode = createMockNode('CustomNode', 'custom-pack', '1.0.0')
+ const nodeWithoutPack = createMockNode('NodeWithoutPack')
+
+ expect(capturedFilterFunction(missingCoreNode)).toBe(true)
+ expect(capturedFilterFunction(registeredCoreNode)).toBe(false)
+ expect(capturedFilterFunction(customNode)).toBe(false)
+ expect(capturedFilterFunction(nodeWithoutPack)).toBe(false)
+ }
+ })
+
+ it('integrates with collectAllNodes to find nodes from subgraphs', () => {
+ mockCollectAllNodes.mockImplementation((graph, filter) => {
+ const allNodes: LGraphNode[] = []
+
+ for (const node of graph.nodes) {
+ if (node.isSubgraphNode?.() && node.subgraph) {
+ for (const subNode of node.subgraph.nodes) {
+ if (!filter || filter(subNode)) {
+ allNodes.push(subNode)
+ }
+ }
+ }
+
+ if (!filter || filter(node)) {
+ allNodes.push(node)
+ }
+ }
+
+ return allNodes
+ })
+
+ const mainMissingNode = createMockNode(
+ 'MainMissing',
+ 'comfy-core',
+ '1.0.0'
+ )
+ const subgraphMissingNode = createMockNode(
+ 'SubgraphMissing',
+ 'comfy-core',
+ '1.1.0'
+ )
+ const subgraphRegisteredNode = createMockNode(
+ 'SubgraphRegistered',
+ 'comfy-core',
+ '1.0.0'
+ )
+
+ const mockSubgraph = {
+ nodes: [subgraphMissingNode, subgraphRegisteredNode]
+ }
+
+ const mockSubgraphNode = {
+ isSubgraphNode: () => true,
+ subgraph: mockSubgraph,
+ type: 'SubgraphContainer',
+ properties: { cnr_id: 'custom-pack' }
+ }
+
+ const mockMainGraph = {
+ nodes: [mainMissingNode, mockSubgraphNode]
+ }
+
+ // @ts-expect-error - Mocking app.graph for testing
+ app.graph = mockMainGraph
+
+ mockUseNodeDefStore.mockReturnValue({
+ nodeDefsByName: {
+ // @ts-expect-error - Creating minimal mock of ComfyNodeDefImpl for testing.
+ SubgraphRegistered: { name: 'SubgraphRegistered' }
+ }
+ })
+
+ const { missingCoreNodes } = useMissingNodes()
+
+ expect(Object.keys(missingCoreNodes.value)).toHaveLength(2)
+ expect(missingCoreNodes.value['1.0.0']).toHaveLength(1)
+ expect(missingCoreNodes.value['1.1.0']).toHaveLength(1)
+ expect(missingCoreNodes.value['1.0.0'][0].type).toBe('MainMissing')
+ expect(missingCoreNodes.value['1.1.0'][0].type).toBe('SubgraphMissing')
+ })
+ })
})
diff --git a/tests-ui/tests/domWidgetStore.test.ts b/tests-ui/tests/domWidgetStore.test.ts
new file mode 100644
index 000000000..21a83f7c6
--- /dev/null
+++ b/tests-ui/tests/domWidgetStore.test.ts
@@ -0,0 +1,151 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+
+// Mock DOM widget for testing
+const createMockDOMWidget = (id: string) => {
+ const element = document.createElement('input')
+ return {
+ id,
+ element,
+ node: {
+ id: 'node-1',
+ title: 'Test Node',
+ pos: [0, 0],
+ size: [200, 100]
+ } as any,
+ name: 'test_widget',
+ type: 'text',
+ value: 'test',
+ options: {},
+ y: 0,
+ margin: 10,
+ isVisible: () => true,
+ containerNode: undefined as any
+ }
+}
+
+describe('domWidgetStore', () => {
+ let store: ReturnType
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ store = useDomWidgetStore()
+ })
+
+ describe('widget registration', () => {
+ it('should register a widget with default state', () => {
+ const widget = createMockDOMWidget('widget-1')
+
+ store.registerWidget(widget)
+
+ expect(store.widgetStates.has('widget-1')).toBe(true)
+ const state = store.widgetStates.get('widget-1')
+ expect(state).toBeDefined()
+ expect(state!.widget).toBe(widget)
+ expect(state!.visible).toBe(true)
+ expect(state!.active).toBe(true)
+ expect(state!.readonly).toBe(false)
+ expect(state!.zIndex).toBe(0)
+ expect(state!.pos).toEqual([0, 0])
+ expect(state!.size).toEqual([0, 0])
+ })
+
+ it('should not register the same widget twice', () => {
+ const widget = createMockDOMWidget('widget-1')
+
+ store.registerWidget(widget)
+ store.registerWidget(widget)
+
+ // Should still only have one entry
+ const states = Array.from(store.widgetStates.values())
+ expect(states.length).toBe(1)
+ })
+ })
+
+ describe('widget unregistration', () => {
+ it('should unregister a widget by id', () => {
+ const widget = createMockDOMWidget('widget-1')
+
+ store.registerWidget(widget)
+ expect(store.widgetStates.has('widget-1')).toBe(true)
+
+ store.unregisterWidget('widget-1')
+ expect(store.widgetStates.has('widget-1')).toBe(false)
+ })
+
+ it('should handle unregistering non-existent widget gracefully', () => {
+ // Should not throw
+ expect(() => {
+ store.unregisterWidget('non-existent')
+ }).not.toThrow()
+ })
+ })
+
+ describe('widget state management', () => {
+ it('should activate a widget', () => {
+ const widget = createMockDOMWidget('widget-1')
+ store.registerWidget(widget)
+
+ // Set to inactive first
+ const state = store.widgetStates.get('widget-1')!
+ state.active = false
+
+ store.activateWidget('widget-1')
+ expect(state.active).toBe(true)
+ })
+
+ it('should deactivate a widget', () => {
+ const widget = createMockDOMWidget('widget-1')
+ store.registerWidget(widget)
+
+ store.deactivateWidget('widget-1')
+ const state = store.widgetStates.get('widget-1')
+ expect(state!.active).toBe(false)
+ })
+
+ it('should handle activating non-existent widget gracefully', () => {
+ expect(() => {
+ store.activateWidget('non-existent')
+ }).not.toThrow()
+ })
+ })
+
+ describe('computed states', () => {
+ it('should separate active and inactive widget states', () => {
+ const widget1 = createMockDOMWidget('widget-1')
+ const widget2 = createMockDOMWidget('widget-2')
+
+ store.registerWidget(widget1)
+ store.registerWidget(widget2)
+
+ // Deactivate widget2
+ store.deactivateWidget('widget-2')
+
+ expect(store.activeWidgetStates.length).toBe(1)
+ expect(store.activeWidgetStates[0].widget.id).toBe('widget-1')
+
+ expect(store.inactiveWidgetStates.length).toBe(1)
+ expect(store.inactiveWidgetStates[0].widget.id).toBe('widget-2')
+ })
+ })
+
+ describe('clear functionality', () => {
+ it('should clear all widget states', () => {
+ const widget1 = createMockDOMWidget('widget-1')
+ const widget2 = createMockDOMWidget('widget-2')
+
+ store.registerWidget(widget1)
+ store.registerWidget(widget2)
+
+ expect(store.widgetStates.size).toBe(2)
+
+ store.clear()
+
+ expect(store.widgetStates.size).toBe(0)
+ expect(store.activeWidgetStates.length).toBe(0)
+ expect(store.inactiveWidgetStates.length).toBe(0)
+ })
+ })
+})
diff --git a/tests-ui/tests/maskeditor.test.ts b/tests-ui/tests/maskeditor.test.ts
new file mode 100644
index 000000000..d3fad6e33
--- /dev/null
+++ b/tests-ui/tests/maskeditor.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+
+import { imageLayerFilenamesIfApplicable } from '@/extensions/core/maskEditorLayerFilenames'
+
+describe('imageLayerFilenamesIfApplicable', () => {
+ // In case the naming scheme changes, this test will ensure CI fails if developers forget to support the old naming scheme. (Causing MaskEditor to lose layer data for previously-saved images.)
+ it('should support all past layer naming schemes to preserve backward compatibility', async () => {
+ const dummyTimestamp = 1234567890
+ const inputToSupport = `clipspace-painted-masked-${dummyTimestamp}.png`
+ const expectedOutput = {
+ maskedImage: `clipspace-mask-${dummyTimestamp}.png`,
+ paint: `clipspace-paint-${dummyTimestamp}.png`,
+ paintedImage: `clipspace-painted-${dummyTimestamp}.png`,
+ paintedMaskedImage: inputToSupport
+ }
+ const actualOutput = imageLayerFilenamesIfApplicable(inputToSupport)
+ expect(actualOutput).toEqual(expectedOutput)
+ })
+})
diff --git a/tests-ui/tests/store/dialogStore.test.ts b/tests-ui/tests/store/dialogStore.test.ts
index 6d76d9bb1..3d21ff695 100644
--- a/tests-ui/tests/store/dialogStore.test.ts
+++ b/tests-ui/tests/store/dialogStore.test.ts
@@ -172,4 +172,58 @@ describe('dialogStore', () => {
expect(store.dialogStack[0].title).toBe('Original Title')
})
})
+
+ describe('ESC key behavior with multiple dialogs', () => {
+ it('should only allow the active dialog to close with ESC key', () => {
+ const store = useDialogStore()
+
+ // Create dialogs with different priorities
+ store.showDialog({
+ key: 'dialog-1',
+ component: MockComponent,
+ priority: 1
+ })
+
+ store.showDialog({
+ key: 'dialog-2',
+ component: MockComponent,
+ priority: 2
+ })
+
+ store.showDialog({
+ key: 'dialog-3',
+ component: MockComponent,
+ priority: 3
+ })
+
+ // Only the active dialog should be closable with ESC
+ const activeDialog = store.dialogStack.find(
+ (d) => d.key === store.activeKey
+ )
+ const inactiveDialogs = store.dialogStack.filter(
+ (d) => d.key !== store.activeKey
+ )
+
+ expect(activeDialog?.dialogComponentProps.closeOnEscape).toBe(true)
+ inactiveDialogs.forEach((dialog) => {
+ expect(dialog.dialogComponentProps.closeOnEscape).toBe(false)
+ })
+
+ // Close the active dialog
+ store.closeDialog({ key: store.activeKey! })
+
+ // The new active dialog should now be closable with ESC
+ const newActiveDialog = store.dialogStack.find(
+ (d) => d.key === store.activeKey
+ )
+ const newInactiveDialogs = store.dialogStack.filter(
+ (d) => d.key !== store.activeKey
+ )
+
+ expect(newActiveDialog?.dialogComponentProps.closeOnEscape).toBe(true)
+ newInactiveDialogs.forEach((dialog) => {
+ expect(dialog.dialogComponentProps.closeOnEscape).toBe(false)
+ })
+ })
+ })
})
diff --git a/tests-ui/tests/store/executionStore.test.ts b/tests-ui/tests/store/executionStore.test.ts
index 590ce6955..d34bf4867 100644
--- a/tests-ui/tests/store/executionStore.test.ts
+++ b/tests-ui/tests/store/executionStore.test.ts
@@ -1,11 +1,22 @@
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { app } from '@/scripts/app'
import { useExecutionStore } from '@/stores/executionStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+
+// Mock the workflowStore
+vi.mock('@/stores/workflowStore', () => ({
+ useWorkflowStore: vi.fn(() => ({
+ nodeExecutionIdToNodeLocatorId: vi.fn(),
+ nodeIdToNodeLocatorId: vi.fn(),
+ nodeLocatorIdToNodeExecutionId: vi.fn()
+ }))
+}))
// Remove any previous global types
declare global {
- // Empty interface to override any previous declarations
+ // eslint-disable-next-line @typescript-eslint/no-empty-object-type
interface Window {}
}
@@ -22,12 +33,16 @@ vi.mock('@/composables/node/useNodeProgressText', () => ({
})
}))
-// Create a local mock instead of using global to avoid conflicts
-const mockApp = {
- graph: {
- getNodeById: vi.fn()
+// Mock the app import with proper implementation
+vi.mock('@/scripts/app', () => ({
+ app: {
+ graph: {
+ getNodeById: vi.fn()
+ },
+ revokePreviews: vi.fn(),
+ nodePreviewImages: {}
}
-}
+}))
describe('executionStore - display_component handling', () => {
function createDisplayComponentEvent(
@@ -47,7 +62,7 @@ describe('executionStore - display_component handling', () => {
function handleDisplayComponentMessage(event: CustomEvent) {
const { node_id, component } = event.detail
- const node = mockApp.graph.getNodeById(node_id)
+ const node = vi.mocked(app.graph.getNodeById)(node_id)
if (node && component === 'ChatHistoryWidget') {
mockShowChatHistory(node)
}
@@ -60,23 +75,121 @@ describe('executionStore - display_component handling', () => {
})
it('handles ChatHistoryWidget display_component messages', () => {
- const mockNode = { id: '123' }
- mockApp.graph.getNodeById.mockReturnValue(mockNode)
+ const mockNode = { id: '123' } as any
+ vi.mocked(app.graph.getNodeById).mockReturnValue(mockNode)
const event = createDisplayComponentEvent('123')
handleDisplayComponentMessage(event)
- expect(mockApp.graph.getNodeById).toHaveBeenCalledWith('123')
+ expect(app.graph.getNodeById).toHaveBeenCalledWith('123')
expect(mockShowChatHistory).toHaveBeenCalledWith(mockNode)
})
it('does nothing if node is not found', () => {
- mockApp.graph.getNodeById.mockReturnValue(null)
+ vi.mocked(app.graph.getNodeById).mockReturnValue(null)
const event = createDisplayComponentEvent('non-existent')
handleDisplayComponentMessage(event)
- expect(mockApp.graph.getNodeById).toHaveBeenCalledWith('non-existent')
+ expect(app.graph.getNodeById).toHaveBeenCalledWith('non-existent')
expect(mockShowChatHistory).not.toHaveBeenCalled()
})
})
+
+describe('useExecutionStore - NodeLocatorId conversions', () => {
+ let store: ReturnType
+ let workflowStore: ReturnType
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+
+ // Create the mock workflowStore instance
+ const mockWorkflowStore = {
+ nodeExecutionIdToNodeLocatorId: vi.fn(),
+ nodeIdToNodeLocatorId: vi.fn(),
+ nodeLocatorIdToNodeExecutionId: vi.fn()
+ }
+
+ // Mock the useWorkflowStore function to return our mock
+ vi.mocked(useWorkflowStore).mockReturnValue(mockWorkflowStore as any)
+
+ workflowStore = mockWorkflowStore as any
+ store = useExecutionStore()
+ vi.clearAllMocks()
+ })
+
+ describe('executionIdToNodeLocatorId', () => {
+ it('should convert execution ID to NodeLocatorId', () => {
+ // Mock subgraph structure
+ const mockSubgraph = {
+ id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ _nodes: []
+ }
+
+ const mockNode = {
+ id: 123,
+ isSubgraphNode: () => true,
+ subgraph: mockSubgraph
+ } as any
+
+ // Mock app.graph.getNodeById to return the mock node
+ vi.mocked(app.graph.getNodeById).mockReturnValue(mockNode)
+
+ const result = store.executionIdToNodeLocatorId('123:456')
+
+ expect(result).toBe('a1b2c3d4-e5f6-7890-abcd-ef1234567890:456')
+ })
+
+ it('should convert simple node ID to NodeLocatorId', () => {
+ const result = store.executionIdToNodeLocatorId('123')
+
+ // For simple node IDs, it should return the ID as-is
+ expect(result).toBe('123')
+ })
+
+ it('should handle numeric node IDs', () => {
+ const result = store.executionIdToNodeLocatorId(123)
+
+ // For numeric IDs, it should convert to string and return as-is
+ expect(result).toBe('123')
+ })
+
+ it('should return null when conversion fails', () => {
+ // Mock app.graph.getNodeById to return null (node not found)
+ vi.mocked(app.graph.getNodeById).mockReturnValue(null)
+
+ // This should throw an error as the node is not found
+ expect(() => store.executionIdToNodeLocatorId('999:456')).toThrow(
+ 'Subgraph not found: 999'
+ )
+ })
+ })
+
+ describe('nodeLocatorIdToExecutionId', () => {
+ it('should convert NodeLocatorId to execution ID', () => {
+ const mockExecutionId = '123:456'
+ vi.spyOn(workflowStore, 'nodeLocatorIdToNodeExecutionId').mockReturnValue(
+ mockExecutionId as any
+ )
+
+ const result = store.nodeLocatorIdToExecutionId(
+ 'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
+ )
+
+ expect(workflowStore.nodeLocatorIdToNodeExecutionId).toHaveBeenCalledWith(
+ 'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
+ )
+ expect(result).toBe(mockExecutionId)
+ })
+
+ it('should return null when conversion fails', () => {
+ vi.spyOn(workflowStore, 'nodeLocatorIdToNodeExecutionId').mockReturnValue(
+ null
+ )
+
+ const result = store.nodeLocatorIdToExecutionId('invalid:format')
+
+ expect(result).toBeNull()
+ })
+ })
+})
diff --git a/tests-ui/tests/store/nodeDefStore.test.ts b/tests-ui/tests/store/nodeDefStore.test.ts
new file mode 100644
index 000000000..071565a6c
--- /dev/null
+++ b/tests-ui/tests/store/nodeDefStore.test.ts
@@ -0,0 +1,308 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { type NodeDefFilter, useNodeDefStore } from '@/stores/nodeDefStore'
+
+describe('useNodeDefStore', () => {
+ let store: ReturnType
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ store = useNodeDefStore()
+ })
+
+ const createMockNodeDef = (
+ overrides: Partial = {}
+ ): ComfyNodeDef => ({
+ name: 'TestNode',
+ display_name: 'Test Node',
+ category: 'test',
+ python_module: 'test_module',
+ description: 'Test node',
+ input: {},
+ output: [],
+ output_is_list: [],
+ output_name: [],
+ output_node: false,
+ deprecated: false,
+ experimental: false,
+ ...overrides
+ })
+
+ describe('filter registry', () => {
+ it('should register a new filter', () => {
+ const filter: NodeDefFilter = {
+ id: 'test.filter',
+ name: 'Test Filter',
+ predicate: () => true
+ }
+
+ store.registerNodeDefFilter(filter)
+ expect(store.nodeDefFilters).toContainEqual(filter)
+ })
+
+ it('should unregister a filter by id', () => {
+ const filter: NodeDefFilter = {
+ id: 'test.filter',
+ name: 'Test Filter',
+ predicate: () => true
+ }
+
+ store.registerNodeDefFilter(filter)
+ store.unregisterNodeDefFilter('test.filter')
+ expect(store.nodeDefFilters).not.toContainEqual(filter)
+ })
+
+ it('should register core filters on initialization', () => {
+ const deprecatedFilter = store.nodeDefFilters.find(
+ (f) => f.id === 'core.deprecated'
+ )
+ const experimentalFilter = store.nodeDefFilters.find(
+ (f) => f.id === 'core.experimental'
+ )
+
+ expect(deprecatedFilter).toBeDefined()
+ expect(experimentalFilter).toBeDefined()
+ })
+ })
+
+ describe('filter application', () => {
+ beforeEach(() => {
+ // Clear existing filters for isolated tests
+ store.nodeDefFilters.splice(0)
+ })
+
+ it('should apply single filter to visible nodes', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ deprecated: false
+ })
+ const deprecatedNode = createMockNodeDef({
+ name: 'deprecated',
+ deprecated: true
+ })
+
+ store.updateNodeDefs([normalNode, deprecatedNode])
+
+ // Register filter that hides deprecated nodes
+ store.registerNodeDefFilter({
+ id: 'test.no-deprecated',
+ name: 'Hide Deprecated',
+ predicate: (node) => !node.deprecated
+ })
+
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ expect(store.visibleNodeDefs[0].name).toBe('normal')
+ })
+
+ it('should apply multiple filters with AND logic', () => {
+ const node1 = createMockNodeDef({
+ name: 'node1',
+ deprecated: false,
+ experimental: false
+ })
+ const node2 = createMockNodeDef({
+ name: 'node2',
+ deprecated: true,
+ experimental: false
+ })
+ const node3 = createMockNodeDef({
+ name: 'node3',
+ deprecated: false,
+ experimental: true
+ })
+ const node4 = createMockNodeDef({
+ name: 'node4',
+ deprecated: true,
+ experimental: true
+ })
+
+ store.updateNodeDefs([node1, node2, node3, node4])
+
+ // Register filters
+ store.registerNodeDefFilter({
+ id: 'test.no-deprecated',
+ name: 'Hide Deprecated',
+ predicate: (node) => !node.deprecated
+ })
+
+ store.registerNodeDefFilter({
+ id: 'test.no-experimental',
+ name: 'Hide Experimental',
+ predicate: (node) => !node.experimental
+ })
+
+ // Only node1 should be visible (not deprecated AND not experimental)
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ expect(store.visibleNodeDefs[0].name).toBe('node1')
+ })
+
+ it('should show all nodes when no filters are registered', () => {
+ const nodes = [
+ createMockNodeDef({ name: 'node1' }),
+ createMockNodeDef({ name: 'node2' }),
+ createMockNodeDef({ name: 'node3' })
+ ]
+
+ store.updateNodeDefs(nodes)
+ expect(store.visibleNodeDefs).toHaveLength(3)
+ })
+
+ it('should update visibility when filter is removed', () => {
+ const deprecatedNode = createMockNodeDef({
+ name: 'deprecated',
+ deprecated: true
+ })
+ store.updateNodeDefs([deprecatedNode])
+
+ const filter: NodeDefFilter = {
+ id: 'test.no-deprecated',
+ name: 'Hide Deprecated',
+ predicate: (node) => !node.deprecated
+ }
+
+ // Add filter - node should be hidden
+ store.registerNodeDefFilter(filter)
+ expect(store.visibleNodeDefs).toHaveLength(0)
+
+ // Remove filter - node should be visible
+ store.unregisterNodeDefFilter('test.no-deprecated')
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ })
+ })
+
+ describe('core filters behavior', () => {
+ it('should hide deprecated nodes by default', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ deprecated: false
+ })
+ const deprecatedNode = createMockNodeDef({
+ name: 'deprecated',
+ deprecated: true
+ })
+
+ store.updateNodeDefs([normalNode, deprecatedNode])
+
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ expect(store.visibleNodeDefs[0].name).toBe('normal')
+ })
+
+ it('should show deprecated nodes when showDeprecated is true', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ deprecated: false
+ })
+ const deprecatedNode = createMockNodeDef({
+ name: 'deprecated',
+ deprecated: true
+ })
+
+ store.updateNodeDefs([normalNode, deprecatedNode])
+ store.showDeprecated = true
+
+ expect(store.visibleNodeDefs).toHaveLength(2)
+ })
+
+ it('should hide experimental nodes by default', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ experimental: false
+ })
+ const experimentalNode = createMockNodeDef({
+ name: 'experimental',
+ experimental: true
+ })
+
+ store.updateNodeDefs([normalNode, experimentalNode])
+
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ expect(store.visibleNodeDefs[0].name).toBe('normal')
+ })
+
+ it('should show experimental nodes when showExperimental is true', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ experimental: false
+ })
+ const experimentalNode = createMockNodeDef({
+ name: 'experimental',
+ experimental: true
+ })
+
+ store.updateNodeDefs([normalNode, experimentalNode])
+ store.showExperimental = true
+
+ expect(store.visibleNodeDefs).toHaveLength(2)
+ })
+
+ it('should hide subgraph nodes by default', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ category: 'conditioning',
+ python_module: 'nodes'
+ })
+ const subgraphNode = createMockNodeDef({
+ name: 'MySubgraph',
+ category: 'subgraph',
+ python_module: 'nodes'
+ })
+
+ store.updateNodeDefs([normalNode, subgraphNode])
+
+ expect(store.visibleNodeDefs).toHaveLength(1)
+ expect(store.visibleNodeDefs[0].name).toBe('normal')
+ })
+
+ it('should show non-subgraph nodes with subgraph category', () => {
+ const normalNode = createMockNodeDef({
+ name: 'normal',
+ category: 'conditioning',
+ python_module: 'custom_extension'
+ })
+ const fakeSubgraphNode = createMockNodeDef({
+ name: 'FakeSubgraph',
+ category: 'subgraph',
+ python_module: 'custom_extension' // Different python_module
+ })
+
+ store.updateNodeDefs([normalNode, fakeSubgraphNode])
+
+ expect(store.visibleNodeDefs).toHaveLength(2)
+ expect(store.visibleNodeDefs.map((n) => n.name)).toEqual([
+ 'normal',
+ 'FakeSubgraph'
+ ])
+ })
+ })
+
+ describe('performance', () => {
+ it('should perform single traversal for multiple filters', () => {
+ let filterCallCount = 0
+
+ // Register multiple filters that count their calls
+ for (let i = 0; i < 5; i++) {
+ store.registerNodeDefFilter({
+ id: `test.counter-${i}`,
+ name: `Counter ${i}`,
+ predicate: () => {
+ filterCallCount++
+ return true
+ }
+ })
+ }
+
+ const nodes = Array.from({ length: 10 }, (_, i) =>
+ createMockNodeDef({ name: `node${i}` })
+ )
+ store.updateNodeDefs(nodes)
+
+ // Force recomputation by accessing visibleNodeDefs
+ expect(store.visibleNodeDefs).toBeDefined()
+
+ // Each node (10) should be checked by each filter (5 test + 2 core = 7 total)
+ expect(filterCallCount).toBe(10 * 5)
+ })
+ })
+})
diff --git a/tests-ui/tests/store/subgraphNavigationStore.test.ts b/tests-ui/tests/store/subgraphNavigationStore.test.ts
new file mode 100644
index 000000000..4ee63353b
--- /dev/null
+++ b/tests-ui/tests/store/subgraphNavigationStore.test.ts
@@ -0,0 +1,113 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+import type { ComfyWorkflow } from '@/stores/workflowStore'
+
+vi.mock('@/scripts/app', () => ({
+ app: {
+ graph: {
+ subgraphs: new Map(),
+ getNodeById: vi.fn()
+ },
+ canvas: {
+ subgraph: null
+ }
+ }
+}))
+
+describe('useSubgraphNavigationStore', () => {
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ })
+
+ it('should not clear navigation stack when workflow internal state changes', async () => {
+ const navigationStore = useSubgraphNavigationStore()
+ const workflowStore = useWorkflowStore()
+
+ // Mock a workflow
+ const mockWorkflow = {
+ path: 'test-workflow.json',
+ filename: 'test-workflow.json',
+ changeTracker: null
+ } as ComfyWorkflow
+
+ // Set the active workflow (cast to bypass TypeScript check in test)
+ workflowStore.activeWorkflow = mockWorkflow as any
+
+ // Simulate being in a subgraph by restoring state
+ navigationStore.restoreState(['subgraph-1', 'subgraph-2'])
+
+ expect(navigationStore.exportState()).toHaveLength(2)
+
+ // Simulate a change to the workflow's internal state
+ // (e.g., changeTracker.activeState being reassigned)
+ mockWorkflow.changeTracker = { activeState: {} } as any
+
+ // The navigation stack should NOT be cleared because the path hasn't changed
+ expect(navigationStore.exportState()).toHaveLength(2)
+ expect(navigationStore.exportState()).toEqual(['subgraph-1', 'subgraph-2'])
+ })
+
+ it('should clear navigation stack when switching to a different workflow', async () => {
+ const navigationStore = useSubgraphNavigationStore()
+ const workflowStore = useWorkflowStore()
+
+ // Mock first workflow
+ const workflow1 = {
+ path: 'workflow1.json',
+ filename: 'workflow1.json'
+ } as ComfyWorkflow
+
+ // Set the active workflow
+ workflowStore.activeWorkflow = workflow1 as any
+
+ // Simulate being in a subgraph
+ navigationStore.restoreState(['subgraph-1', 'subgraph-2'])
+
+ expect(navigationStore.exportState()).toHaveLength(2)
+
+ // Switch to a different workflow
+ const workflow2 = {
+ path: 'workflow2.json',
+ filename: 'workflow2.json'
+ } as ComfyWorkflow
+
+ workflowStore.activeWorkflow = workflow2 as any
+
+ // Wait for Vue's reactivity to process the change
+ await nextTick()
+
+ // The navigation stack SHOULD be cleared because we switched workflows
+ expect(navigationStore.exportState()).toHaveLength(0)
+ })
+
+ it('should handle null workflow gracefully', async () => {
+ const navigationStore = useSubgraphNavigationStore()
+ const workflowStore = useWorkflowStore()
+
+ // First set an active workflow
+ const mockWorkflow = {
+ path: 'test-workflow.json',
+ filename: 'test-workflow.json'
+ } as ComfyWorkflow
+
+ workflowStore.activeWorkflow = mockWorkflow as any
+ await nextTick()
+
+ // Add some items to the navigation stack
+ navigationStore.restoreState(['subgraph-1'])
+ expect(navigationStore.exportState()).toHaveLength(1)
+
+ // Set workflow to null
+ workflowStore.activeWorkflow = null
+
+ // Wait for Vue's reactivity to process the change
+ await nextTick()
+
+ // Stack should be cleared when workflow becomes null
+ expect(navigationStore.exportState()).toHaveLength(0)
+ })
+})
diff --git a/tests-ui/tests/store/systemStatsStore.test.ts b/tests-ui/tests/store/systemStatsStore.test.ts
index 3376a19c0..84e84ec44 100644
--- a/tests-ui/tests/store/systemStatsStore.test.ts
+++ b/tests-ui/tests/store/systemStatsStore.test.ts
@@ -41,6 +41,7 @@ describe('useSystemStatsStore', () => {
embedded_python: false,
comfyui_version: '1.0.0',
pytorch_version: '2.0.0',
+ required_frontend_version: '1.24.0',
argv: [],
ram_total: 16000000000,
ram_free: 8000000000
@@ -92,6 +93,32 @@ describe('useSystemStatsStore', () => {
expect(store.isLoading).toBe(false)
})
+
+ it('should handle system stats updates', async () => {
+ const updatedStats = {
+ system: {
+ os: 'Windows',
+ python_version: '3.11.0',
+ embedded_python: false,
+ comfyui_version: '1.1.0',
+ pytorch_version: '2.1.0',
+ required_frontend_version: '1.25.0',
+ argv: [],
+ ram_total: 16000000000,
+ ram_free: 7000000000
+ },
+ devices: []
+ }
+
+ vi.mocked(api.getSystemStats).mockResolvedValue(updatedStats)
+
+ await store.fetchSystemStats()
+
+ expect(store.systemStats).toEqual(updatedStats)
+ expect(store.isLoading).toBe(false)
+ expect(store.error).toBeNull()
+ expect(api.getSystemStats).toHaveBeenCalled()
+ })
})
describe('getFormFactor', () => {
diff --git a/tests-ui/tests/store/versionCompatibilityStore.test.ts b/tests-ui/tests/store/versionCompatibilityStore.test.ts
new file mode 100644
index 000000000..e3d3ceca9
--- /dev/null
+++ b/tests-ui/tests/store/versionCompatibilityStore.test.ts
@@ -0,0 +1,321 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+
+vi.mock('@/config', () => ({
+ default: {
+ app_version: '1.24.0'
+ }
+}))
+
+vi.mock('@/stores/systemStatsStore')
+
+// Mock useStorage from VueUse
+const mockDismissalStorage = ref({} as Record)
+vi.mock('@vueuse/core', () => ({
+ useStorage: vi.fn(() => mockDismissalStorage)
+}))
+
+describe('useVersionCompatibilityStore', () => {
+ let store: ReturnType
+ let mockSystemStatsStore: any
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+
+ // Clear the mock dismissal storage
+ mockDismissalStorage.value = {}
+
+ mockSystemStatsStore = {
+ systemStats: null,
+ fetchSystemStats: vi.fn()
+ }
+
+ vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore)
+
+ store = useVersionCompatibilityStore()
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('version compatibility detection', () => {
+ it('should detect frontend is outdated when required version is higher', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(true)
+ expect(store.isFrontendNewer).toBe(false)
+ expect(store.hasVersionMismatch).toBe(true)
+ })
+
+ it('should not warn when frontend is newer than backend', async () => {
+ // Frontend: 1.24.0, Backend: 1.23.0, Required: 1.23.0
+ // Frontend meets required version, no warning needed
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.23.0',
+ required_frontend_version: '1.23.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(false)
+ expect(store.isFrontendNewer).toBe(false)
+ expect(store.hasVersionMismatch).toBe(false)
+ })
+
+ it('should not detect mismatch when versions are compatible', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.24.0',
+ required_frontend_version: '1.24.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(false)
+ expect(store.isFrontendNewer).toBe(false)
+ expect(store.hasVersionMismatch).toBe(false)
+ })
+
+ it('should handle missing version information gracefully', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '',
+ required_frontend_version: ''
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(false)
+ expect(store.isFrontendNewer).toBe(false)
+ expect(store.hasVersionMismatch).toBe(false)
+ })
+
+ it('should not detect mismatch when versions are not valid semver', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be', // git hash
+ required_frontend_version: 'not-a-version' // invalid semver format
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(false)
+ expect(store.isFrontendNewer).toBe(false)
+ expect(store.hasVersionMismatch).toBe(false)
+ })
+
+ it('should not warn when frontend exceeds required version', async () => {
+ // Frontend: 1.24.0 (from mock config)
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.22.0', // Backend is older
+ required_frontend_version: '1.23.0' // Required is 1.23.0, frontend 1.24.0 meets this
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.isFrontendOutdated).toBe(false) // Frontend 1.24.0 >= Required 1.23.0
+ expect(store.isFrontendNewer).toBe(false) // Never warns about being newer
+ expect(store.hasVersionMismatch).toBe(false)
+ })
+ })
+
+ describe('warning display logic', () => {
+ it('should show warning when there is a version mismatch and not dismissed', async () => {
+ // No dismissals in storage
+ mockDismissalStorage.value = {}
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.shouldShowWarning).toBe(true)
+ })
+
+ it('should not show warning when dismissed', async () => {
+ const futureTime = Date.now() + 1000000
+ // Set dismissal in reactive storage
+ mockDismissalStorage.value = {
+ '1.24.0-1.25.0-1.25.0': futureTime
+ }
+
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.shouldShowWarning).toBe(false)
+ })
+
+ it('should not show warning when no version mismatch', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.24.0',
+ required_frontend_version: '1.24.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.shouldShowWarning).toBe(false)
+ })
+ })
+
+ describe('warning messages', () => {
+ it('should generate outdated message when frontend is outdated', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.warningMessage).toEqual({
+ type: 'outdated',
+ frontendVersion: '1.24.0',
+ requiredVersion: '1.25.0'
+ })
+ })
+
+ it('should return null when no mismatch', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.24.0',
+ required_frontend_version: '1.24.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+
+ expect(store.warningMessage).toBeNull()
+ })
+ })
+
+ describe('dismissal persistence', () => {
+ it('should save dismissal to reactive storage with expiration', async () => {
+ const mockNow = 1000000
+ vi.spyOn(Date, 'now').mockReturnValue(mockNow)
+
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.checkVersionCompatibility()
+ store.dismissWarning()
+
+ // Check that the dismissal was added to reactive storage
+ expect(mockDismissalStorage.value).toEqual({
+ '1.24.0-1.25.0-1.25.0': mockNow + 7 * 24 * 60 * 60 * 1000
+ })
+ })
+
+ it('should check dismissal state from reactive storage', async () => {
+ const futureTime = Date.now() + 1000000 // Still valid
+ mockDismissalStorage.value = {
+ '1.24.0-1.25.0-1.25.0': futureTime
+ }
+
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.initialize()
+
+ expect(store.shouldShowWarning).toBe(false)
+ })
+
+ it('should show warning if dismissal has expired', async () => {
+ const pastTime = Date.now() - 1000 // Expired
+ mockDismissalStorage.value = {
+ '1.24.0-1.25.0-1.25.0': pastTime
+ }
+
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.25.0',
+ required_frontend_version: '1.25.0'
+ }
+ }
+
+ await store.initialize()
+
+ expect(store.shouldShowWarning).toBe(true)
+ })
+
+ it('should show warning for different version combinations even if previous was dismissed', async () => {
+ const futureTime = Date.now() + 1000000
+ // Dismissed for different version combination (1.25.0) but current is 1.26.0
+ mockDismissalStorage.value = {
+ '1.24.0-1.25.0-1.25.0': futureTime // Different version was dismissed
+ }
+
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.26.0',
+ required_frontend_version: '1.26.0'
+ }
+ }
+
+ await store.initialize()
+
+ expect(store.shouldShowWarning).toBe(true)
+ })
+ })
+
+ describe('initialization', () => {
+ it('should fetch system stats if not available', async () => {
+ mockSystemStatsStore.systemStats = null
+
+ await store.initialize()
+
+ expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+ })
+
+ it('should not fetch system stats if already available', async () => {
+ mockSystemStatsStore.systemStats = {
+ system: {
+ comfyui_version: '1.24.0',
+ required_frontend_version: '1.24.0'
+ }
+ }
+
+ await store.initialize()
+
+ expect(mockSystemStatsStore.fetchSystemStats).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/tests-ui/tests/store/workflowStore.test.ts b/tests-ui/tests/store/workflowStore.test.ts
index 4c5668c8f..579f330ff 100644
--- a/tests-ui/tests/store/workflowStore.test.ts
+++ b/tests-ui/tests/store/workflowStore.test.ts
@@ -1,3 +1,4 @@
+import type { Subgraph } from '@comfyorg/litegraph'
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
@@ -11,6 +12,7 @@ import {
useWorkflowBookmarkStore,
useWorkflowStore
} from '@/stores/workflowStore'
+import { isSubgraph } from '@/utils/typeGuardUtil'
// Add mock for api at the top of the file
vi.mock('@/scripts/api', () => ({
@@ -26,10 +28,15 @@ vi.mock('@/scripts/api', () => ({
// Mock comfyApp globally for the store setup
vi.mock('@/scripts/app', () => ({
app: {
- canvas: null // Start with canvas potentially undefined or null
+ canvas: {} // Start with empty canvas object
}
}))
+// Mock isSubgraph
+vi.mock('@/utils/typeGuardUtil', () => ({
+ isSubgraph: vi.fn(() => false)
+}))
+
describe('useWorkflowStore', () => {
let store: ReturnType
let bookmarkStore: ReturnType
@@ -518,8 +525,13 @@ describe('useWorkflowStore', () => {
{ name: 'Level 1 Subgraph' },
{ name: 'Level 2 Subgraph' }
]
- }
- vi.mocked(comfyApp.canvas).subgraph = mockSubgraph as any
+ } as any
+ vi.mocked(comfyApp.canvas).subgraph = mockSubgraph
+
+ // Mock isSubgraph to return true for our mockSubgraph
+ vi.mocked(isSubgraph).mockImplementation(
+ (obj): obj is Subgraph => obj === mockSubgraph
+ )
// Act: Trigger the update
store.updateActiveGraph()
@@ -536,8 +548,13 @@ describe('useWorkflowStore', () => {
name: 'Initial Subgraph',
pathToRootGraph: [{ name: 'Root' }, { name: 'Initial Subgraph' }],
isRootGraph: false
- }
- vi.mocked(comfyApp.canvas).subgraph = initialSubgraph as any
+ } as any
+ vi.mocked(comfyApp.canvas).subgraph = initialSubgraph
+
+ // Mock isSubgraph to return true for our initialSubgraph
+ vi.mocked(isSubgraph).mockImplementation(
+ (obj): obj is Subgraph => obj === initialSubgraph
+ )
// Trigger initial update based on the *first* workflow opened in beforeEach
store.updateActiveGraph()
@@ -561,6 +578,11 @@ describe('useWorkflowStore', () => {
// This ensures the watcher *does* cause a state change we can assert
vi.mocked(comfyApp.canvas).subgraph = undefined
+ // Mock isSubgraph to return false for undefined
+ vi.mocked(isSubgraph).mockImplementation(
+ (_obj): _obj is Subgraph => false
+ )
+
await store.openWorkflow(workflow2) // This changes activeWorkflow and triggers the watch
await nextTick() // Allow watcher and potential async operations in updateActiveGraph to complete
@@ -569,4 +591,131 @@ describe('useWorkflowStore', () => {
expect(store.activeSubgraph).toBeUndefined()
})
})
+
+ describe('NodeLocatorId conversions', () => {
+ beforeEach(() => {
+ // Setup mock graph structure with subgraphs
+ const mockSubgraph = {
+ id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ _nodes: []
+ }
+
+ const mockNode = {
+ id: 123,
+ isSubgraphNode: () => true,
+ subgraph: mockSubgraph
+ }
+
+ const mockRootGraph = {
+ _nodes: [mockNode],
+ subgraphs: new Map([[mockSubgraph.id, mockSubgraph]]),
+ getNodeById: (id: string | number) => {
+ if (String(id) === '123') return mockNode
+ return null
+ }
+ }
+
+ vi.mocked(comfyApp).graph = mockRootGraph as any
+ vi.mocked(comfyApp.canvas).subgraph = mockSubgraph as any
+ store.activeSubgraph = mockSubgraph as any
+ })
+
+ describe('nodeIdToNodeLocatorId', () => {
+ it('should convert node ID to NodeLocatorId for subgraph nodes', () => {
+ const result = store.nodeIdToNodeLocatorId(456)
+ expect(result).toBe('a1b2c3d4-e5f6-7890-abcd-ef1234567890:456')
+ })
+
+ it('should return simple node ID for root graph nodes', () => {
+ store.activeSubgraph = undefined
+ const result = store.nodeIdToNodeLocatorId(123)
+ expect(result).toBe('123')
+ })
+
+ it('should use provided subgraph instead of active one', () => {
+ const customSubgraph = {
+ id: 'custom-uuid-1234-5678-90ab-cdef12345678'
+ } as any
+ const result = store.nodeIdToNodeLocatorId(789, customSubgraph)
+ expect(result).toBe('custom-uuid-1234-5678-90ab-cdef12345678:789')
+ })
+ })
+
+ describe('nodeExecutionIdToNodeLocatorId', () => {
+ it('should convert execution ID to NodeLocatorId', () => {
+ const result = store.nodeExecutionIdToNodeLocatorId('123:456')
+ expect(result).toBe('a1b2c3d4-e5f6-7890-abcd-ef1234567890:456')
+ })
+
+ it('should return simple node ID for root level nodes', () => {
+ const result = store.nodeExecutionIdToNodeLocatorId('123')
+ expect(result).toBe('123')
+ })
+
+ it('should return null for invalid execution IDs', () => {
+ const result = store.nodeExecutionIdToNodeLocatorId('999:456')
+ expect(result).toBeNull()
+ })
+ })
+
+ describe('nodeLocatorIdToNodeId', () => {
+ it('should extract node ID from NodeLocatorId', () => {
+ const result = store.nodeLocatorIdToNodeId(
+ 'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
+ )
+ expect(result).toBe(456)
+ })
+
+ it('should handle string node IDs', () => {
+ const result = store.nodeLocatorIdToNodeId(
+ 'a1b2c3d4-e5f6-7890-abcd-ef1234567890:node_1'
+ )
+ expect(result).toBe('node_1')
+ })
+
+ it('should handle simple node IDs (root graph)', () => {
+ const result = store.nodeLocatorIdToNodeId('123')
+ expect(result).toBe(123)
+
+ const stringResult = store.nodeLocatorIdToNodeId('node_1')
+ expect(stringResult).toBe('node_1')
+ })
+
+ it('should return null for invalid NodeLocatorId', () => {
+ const result = store.nodeLocatorIdToNodeId('invalid:format')
+ expect(result).toBeNull()
+ })
+ })
+
+ describe('nodeLocatorIdToNodeExecutionId', () => {
+ it('should convert NodeLocatorId to execution ID', () => {
+ // Need to mock isSubgraph to identify our mockSubgraph
+ vi.mocked(isSubgraph).mockImplementation((obj): obj is Subgraph => {
+ return obj === store.activeSubgraph
+ })
+
+ const result = store.nodeLocatorIdToNodeExecutionId(
+ 'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
+ )
+ expect(result).toBe('123:456')
+ })
+
+ it('should handle simple node IDs (root graph)', () => {
+ const result = store.nodeLocatorIdToNodeExecutionId('123')
+ expect(result).toBe('123')
+ })
+
+ it('should return null for unknown subgraph UUID', () => {
+ const result = store.nodeLocatorIdToNodeExecutionId(
+ 'unknown-uuid-1234-5678-90ab-cdef12345678:456'
+ )
+ expect(result).toBeNull()
+ })
+
+ it('should return null for invalid NodeLocatorId', () => {
+ const result = store.nodeLocatorIdToNodeExecutionId('invalid:format')
+ expect(result).toBeNull()
+ })
+ })
+ })
})
diff --git a/tests-ui/tests/types/nodeIdentification.test.ts b/tests-ui/tests/types/nodeIdentification.test.ts
new file mode 100644
index 000000000..0d9aa647b
--- /dev/null
+++ b/tests-ui/tests/types/nodeIdentification.test.ts
@@ -0,0 +1,207 @@
+import { describe, expect, it } from 'vitest'
+
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import {
+ type NodeLocatorId,
+ createNodeExecutionId,
+ createNodeLocatorId,
+ isNodeExecutionId,
+ isNodeLocatorId,
+ parseNodeExecutionId,
+ parseNodeLocatorId
+} from '@/types/nodeIdentification'
+
+describe('nodeIdentification', () => {
+ describe('NodeLocatorId', () => {
+ const validUuid = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'
+ const validNodeId = '123'
+ const validNodeLocatorId = `${validUuid}:${validNodeId}` as NodeLocatorId
+
+ describe('isNodeLocatorId', () => {
+ it('should return true for valid NodeLocatorId', () => {
+ expect(isNodeLocatorId(validNodeLocatorId)).toBe(true)
+ expect(isNodeLocatorId(`${validUuid}:456`)).toBe(true)
+ expect(isNodeLocatorId(`${validUuid}:node_1`)).toBe(true)
+ // Simple node IDs (root graph)
+ expect(isNodeLocatorId('123')).toBe(true)
+ expect(isNodeLocatorId('node_1')).toBe(true)
+ expect(isNodeLocatorId('5')).toBe(true)
+ })
+
+ it('should return false for invalid formats', () => {
+ expect(isNodeLocatorId('123:456')).toBe(false) // No UUID in first part
+ expect(isNodeLocatorId('not-a-uuid:123')).toBe(false)
+ expect(isNodeLocatorId('')).toBe(false) // Empty string
+ expect(isNodeLocatorId(':123')).toBe(false) // Empty UUID
+ expect(isNodeLocatorId(`${validUuid}:`)).toBe(false) // Empty node ID
+ expect(isNodeLocatorId(`${validUuid}:123:456`)).toBe(false) // Too many parts
+ expect(isNodeLocatorId(123)).toBe(false) // Not a string
+ expect(isNodeLocatorId(null)).toBe(false)
+ expect(isNodeLocatorId(undefined)).toBe(false)
+ })
+
+ it('should validate UUID format correctly', () => {
+ // Valid UUID formats
+ expect(
+ isNodeLocatorId('00000000-0000-0000-0000-000000000000:123')
+ ).toBe(true)
+ expect(
+ isNodeLocatorId('A1B2C3D4-E5F6-7890-ABCD-EF1234567890:123')
+ ).toBe(true)
+
+ // Invalid UUID formats
+ expect(isNodeLocatorId('00000000-0000-0000-0000-00000000000:123')).toBe(
+ false
+ ) // Too short
+ expect(
+ isNodeLocatorId('00000000-0000-0000-0000-0000000000000:123')
+ ).toBe(false) // Too long
+ expect(
+ isNodeLocatorId('00000000_0000_0000_0000_000000000000:123')
+ ).toBe(false) // Wrong separator
+ expect(
+ isNodeLocatorId('g0000000-0000-0000-0000-000000000000:123')
+ ).toBe(false) // Invalid hex
+ })
+ })
+
+ describe('parseNodeLocatorId', () => {
+ it('should parse valid NodeLocatorId', () => {
+ const result = parseNodeLocatorId(validNodeLocatorId)
+ expect(result).toEqual({
+ subgraphUuid: validUuid,
+ localNodeId: 123
+ })
+ })
+
+ it('should handle string node IDs', () => {
+ const stringNodeId = `${validUuid}:node_1`
+ const result = parseNodeLocatorId(stringNodeId)
+ expect(result).toEqual({
+ subgraphUuid: validUuid,
+ localNodeId: 'node_1'
+ })
+ })
+
+ it('should handle simple node IDs (root graph)', () => {
+ const result = parseNodeLocatorId('123')
+ expect(result).toEqual({
+ subgraphUuid: null,
+ localNodeId: 123
+ })
+
+ const stringResult = parseNodeLocatorId('node_1')
+ expect(stringResult).toEqual({
+ subgraphUuid: null,
+ localNodeId: 'node_1'
+ })
+ })
+
+ it('should return null for invalid formats', () => {
+ expect(parseNodeLocatorId('123:456')).toBeNull() // No UUID in first part
+ expect(parseNodeLocatorId('')).toBeNull()
+ })
+ })
+
+ describe('createNodeLocatorId', () => {
+ it('should create NodeLocatorId from components', () => {
+ const result = createNodeLocatorId(validUuid, 123)
+ expect(result).toBe(validNodeLocatorId)
+ expect(isNodeLocatorId(result)).toBe(true)
+ })
+
+ it('should handle string node IDs', () => {
+ const result = createNodeLocatorId(validUuid, 'node_1')
+ expect(result).toBe(`${validUuid}:node_1`)
+ expect(isNodeLocatorId(result)).toBe(true)
+ })
+ })
+ })
+
+ describe('NodeExecutionId', () => {
+ describe('isNodeExecutionId', () => {
+ it('should return true for execution IDs', () => {
+ expect(isNodeExecutionId('123:456')).toBe(true)
+ expect(isNodeExecutionId('123:456:789')).toBe(true)
+ expect(isNodeExecutionId('node_1:node_2')).toBe(true)
+ })
+
+ it('should return false for non-execution IDs', () => {
+ expect(isNodeExecutionId('123')).toBe(false)
+ expect(isNodeExecutionId('node_1')).toBe(false)
+ expect(isNodeExecutionId('')).toBe(false)
+ expect(isNodeExecutionId(123)).toBe(false)
+ expect(isNodeExecutionId(null)).toBe(false)
+ expect(isNodeExecutionId(undefined)).toBe(false)
+ })
+ })
+
+ describe('parseNodeExecutionId', () => {
+ it('should parse execution IDs correctly', () => {
+ expect(parseNodeExecutionId('123:456')).toEqual([123, 456])
+ expect(parseNodeExecutionId('123:456:789')).toEqual([123, 456, 789])
+ expect(parseNodeExecutionId('node_1:node_2')).toEqual([
+ 'node_1',
+ 'node_2'
+ ])
+ expect(parseNodeExecutionId('123:node_2:456')).toEqual([
+ 123,
+ 'node_2',
+ 456
+ ])
+ })
+
+ it('should return null for non-execution IDs', () => {
+ expect(parseNodeExecutionId('123')).toBeNull()
+ expect(parseNodeExecutionId('')).toBeNull()
+ })
+ })
+
+ describe('createNodeExecutionId', () => {
+ it('should create execution IDs from node arrays', () => {
+ expect(createNodeExecutionId([123, 456])).toBe('123:456')
+ expect(createNodeExecutionId([123, 456, 789])).toBe('123:456:789')
+ expect(createNodeExecutionId(['node_1', 'node_2'])).toBe(
+ 'node_1:node_2'
+ )
+ expect(createNodeExecutionId([123, 'node_2', 456])).toBe(
+ '123:node_2:456'
+ )
+ })
+
+ it('should handle single node ID', () => {
+ const result = createNodeExecutionId([123])
+ expect(result).toBe('123')
+ // Single node IDs are not execution IDs
+ expect(isNodeExecutionId(result)).toBe(false)
+ })
+
+ it('should handle empty array', () => {
+ expect(createNodeExecutionId([])).toBe('')
+ })
+ })
+ })
+
+ describe('Integration tests', () => {
+ it('should round-trip NodeLocatorId correctly', () => {
+ const uuid = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'
+ const nodeId: NodeId = 123
+
+ const locatorId = createNodeLocatorId(uuid, nodeId)
+ const parsed = parseNodeLocatorId(locatorId)
+
+ expect(parsed).toBeTruthy()
+ expect(parsed!.subgraphUuid).toBe(uuid)
+ expect(parsed!.localNodeId).toBe(nodeId)
+ })
+
+ it('should round-trip NodeExecutionId correctly', () => {
+ const nodeIds: NodeId[] = [123, 'node_2', 456]
+
+ const executionId = createNodeExecutionId(nodeIds)
+ const parsed = parseNodeExecutionId(executionId)
+
+ expect(parsed).toEqual(nodeIds)
+ })
+ })
+})
diff --git a/tests-ui/tests/utils/graphTraversalUtil.test.ts b/tests-ui/tests/utils/graphTraversalUtil.test.ts
new file mode 100644
index 000000000..b3b3dd23a
--- /dev/null
+++ b/tests-ui/tests/utils/graphTraversalUtil.test.ts
@@ -0,0 +1,811 @@
+import type { LGraph, LGraphNode, Subgraph } from '@comfyorg/litegraph'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+ collectAllNodes,
+ findNodeInHierarchy,
+ findSubgraphByUuid,
+ forEachNode,
+ forEachSubgraphNode,
+ getAllNonIoNodesInSubgraph,
+ getLocalNodeIdFromExecutionId,
+ getNodeByExecutionId,
+ getNodeByLocatorId,
+ getRootGraph,
+ getSubgraphPathFromExecutionId,
+ mapAllNodes,
+ mapSubgraphNodes,
+ parseExecutionId,
+ traverseSubgraphPath,
+ triggerCallbackOnAllNodes,
+ visitGraphNodes
+} from '@/utils/graphTraversalUtil'
+
+// Mock node factory
+function createMockNode(
+ id: string | number,
+ options: {
+ isSubgraph?: boolean
+ subgraph?: Subgraph
+ callback?: () => void
+ } = {}
+): LGraphNode {
+ return {
+ id,
+ isSubgraphNode: options.isSubgraph ? () => true : undefined,
+ subgraph: options.subgraph,
+ onExecutionStart: options.callback
+ } as unknown as LGraphNode
+}
+
+// Mock graph factory
+function createMockGraph(nodes: LGraphNode[]): LGraph {
+ return {
+ _nodes: nodes,
+ nodes: nodes,
+ getNodeById: (id: string | number) =>
+ nodes.find((n) => String(n.id) === String(id)) || null
+ } as unknown as LGraph
+}
+
+// Mock subgraph factory
+function createMockSubgraph(id: string, nodes: LGraphNode[]): Subgraph {
+ return {
+ id,
+ _nodes: nodes,
+ nodes: nodes,
+ getNodeById: (nodeId: string | number) =>
+ nodes.find((n) => String(n.id) === String(nodeId)) || null
+ } as unknown as Subgraph
+}
+
+describe('graphTraversalUtil', () => {
+ describe('Pure utility functions', () => {
+ describe('parseExecutionId', () => {
+ it('should parse simple execution ID', () => {
+ expect(parseExecutionId('123')).toEqual(['123'])
+ })
+
+ it('should parse complex execution ID', () => {
+ expect(parseExecutionId('123:456:789')).toEqual(['123', '456', '789'])
+ })
+
+ it('should handle empty parts', () => {
+ expect(parseExecutionId('123::789')).toEqual(['123', '789'])
+ })
+
+ it('should return null for invalid input', () => {
+ expect(parseExecutionId('')).toBeNull()
+ expect(parseExecutionId(null as any)).toBeNull()
+ expect(parseExecutionId(undefined as any)).toBeNull()
+ })
+ })
+
+ describe('getLocalNodeIdFromExecutionId', () => {
+ it('should extract local node ID from simple ID', () => {
+ expect(getLocalNodeIdFromExecutionId('123')).toBe('123')
+ })
+
+ it('should extract local node ID from complex ID', () => {
+ expect(getLocalNodeIdFromExecutionId('123:456:789')).toBe('789')
+ })
+
+ it('should return null for invalid input', () => {
+ expect(getLocalNodeIdFromExecutionId('')).toBeNull()
+ })
+ })
+
+ describe('getSubgraphPathFromExecutionId', () => {
+ it('should return empty array for root node', () => {
+ expect(getSubgraphPathFromExecutionId('123')).toEqual([])
+ })
+
+ it('should return subgraph path for nested node', () => {
+ expect(getSubgraphPathFromExecutionId('123:456:789')).toEqual([
+ '123',
+ '456'
+ ])
+ })
+
+ it('should return empty array for invalid input', () => {
+ expect(getSubgraphPathFromExecutionId('')).toEqual([])
+ })
+ })
+
+ describe('visitGraphNodes', () => {
+ it('should visit all nodes in graph', () => {
+ const visited: number[] = []
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+ const graph = createMockGraph(nodes)
+
+ visitGraphNodes(graph, (node) => {
+ visited.push(node.id as number)
+ })
+
+ expect(visited).toEqual([1, 2, 3])
+ })
+
+ it('should handle empty graph', () => {
+ const visited: number[] = []
+ const graph = createMockGraph([])
+
+ visitGraphNodes(graph, (node) => {
+ visited.push(node.id as number)
+ })
+
+ expect(visited).toEqual([])
+ })
+ })
+
+ describe('traverseSubgraphPath', () => {
+ it('should return start graph for empty path', () => {
+ const graph = createMockGraph([])
+ const result = traverseSubgraphPath(graph, [])
+ expect(result).toBe(graph)
+ })
+
+ it('should traverse single level', () => {
+ const subgraph = createMockSubgraph('sub-uuid', [])
+ const node = createMockNode('1', { isSubgraph: true, subgraph })
+ const graph = createMockGraph([node])
+
+ const result = traverseSubgraphPath(graph, ['1'])
+ expect(result).toBe(subgraph)
+ })
+
+ it('should traverse multiple levels', () => {
+ const deepSubgraph = createMockSubgraph('deep-uuid', [])
+ const midNode = createMockNode('2', {
+ isSubgraph: true,
+ subgraph: deepSubgraph
+ })
+ const midSubgraph = createMockSubgraph('mid-uuid', [midNode])
+ const topNode = createMockNode('1', {
+ isSubgraph: true,
+ subgraph: midSubgraph
+ })
+ const graph = createMockGraph([topNode])
+
+ const result = traverseSubgraphPath(graph, ['1', '2'])
+ expect(result).toBe(deepSubgraph)
+ })
+
+ it('should return null for invalid path', () => {
+ const graph = createMockGraph([createMockNode('1')])
+ const result = traverseSubgraphPath(graph, ['999'])
+ expect(result).toBeNull()
+ })
+ })
+ })
+
+ describe('Main functions', () => {
+ describe('triggerCallbackOnAllNodes', () => {
+ it('should trigger callbacks on all nodes in a flat graph', () => {
+ const callback1 = vi.fn()
+ const callback2 = vi.fn()
+
+ const node1 = createMockNode(1, { callback: callback1 })
+ const node2 = createMockNode(2, { callback: callback2 })
+ const node3 = createMockNode(3) // No callback
+
+ const graph = createMockGraph([node1, node2, node3])
+
+ triggerCallbackOnAllNodes(graph, 'onExecutionStart')
+
+ expect(callback1).toHaveBeenCalledOnce()
+ expect(callback2).toHaveBeenCalledOnce()
+ })
+
+ it('should trigger callbacks on nodes in subgraphs', () => {
+ const callback1 = vi.fn()
+ const callback2 = vi.fn()
+ const callback3 = vi.fn()
+
+ // Create a subgraph with one node
+ const subNode = createMockNode(100, { callback: callback3 })
+ const subgraph = createMockSubgraph('sub-uuid', [subNode])
+
+ // Create main graph with two nodes, one being a subgraph
+ const node1 = createMockNode(1, { callback: callback1 })
+ const node2 = createMockNode(2, {
+ isSubgraph: true,
+ subgraph,
+ callback: callback2
+ })
+
+ const graph = createMockGraph([node1, node2])
+
+ triggerCallbackOnAllNodes(graph, 'onExecutionStart')
+
+ expect(callback1).toHaveBeenCalledOnce()
+ expect(callback2).toHaveBeenCalledOnce()
+ expect(callback3).toHaveBeenCalledOnce()
+ })
+
+ it('should handle nested subgraphs', () => {
+ const callbacks = [vi.fn(), vi.fn(), vi.fn(), vi.fn()]
+
+ // Create deeply nested structure
+ const deepNode = createMockNode(300, { callback: callbacks[3] })
+ const deepSubgraph = createMockSubgraph('deep-uuid', [deepNode])
+
+ const midNode1 = createMockNode(200, { callback: callbacks[2] })
+ const midNode2 = createMockNode(201, {
+ isSubgraph: true,
+ subgraph: deepSubgraph
+ })
+ const midSubgraph = createMockSubgraph('mid-uuid', [midNode1, midNode2])
+
+ const node1 = createMockNode(1, { callback: callbacks[0] })
+ const node2 = createMockNode(2, {
+ isSubgraph: true,
+ subgraph: midSubgraph,
+ callback: callbacks[1]
+ })
+
+ const graph = createMockGraph([node1, node2])
+
+ triggerCallbackOnAllNodes(graph, 'onExecutionStart')
+
+ callbacks.forEach((cb) => expect(cb).toHaveBeenCalledOnce())
+ })
+ })
+
+ describe('collectAllNodes', () => {
+ it('should collect all nodes from a flat graph', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+
+ const graph = createMockGraph(nodes)
+ const collected = collectAllNodes(graph)
+
+ expect(collected).toHaveLength(3)
+ expect(collected.map((n) => n.id)).toEqual([1, 2, 3])
+ })
+
+ it('should collect nodes from subgraphs', () => {
+ const subNode = createMockNode(100)
+ const subgraph = createMockSubgraph('sub-uuid', [subNode])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+ const collected = collectAllNodes(graph)
+
+ expect(collected).toHaveLength(3)
+ expect(collected.map((n) => n.id)).toContain(100)
+ })
+
+ it('should filter nodes when filter function provided', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+
+ const graph = createMockGraph(nodes)
+ const collected = collectAllNodes(graph, (node) => Number(node.id) > 1)
+
+ expect(collected).toHaveLength(2)
+ expect(collected.map((n) => n.id)).toEqual([2, 3])
+ })
+ })
+
+ describe('mapAllNodes', () => {
+ it('should map over all nodes in a flat graph', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+ const graph = createMockGraph(nodes)
+
+ const results = mapAllNodes(graph, (node) => node.id)
+
+ expect(results).toEqual([1, 2, 3])
+ })
+
+ it('should map over nodes in subgraphs', () => {
+ const subNode = createMockNode(100)
+ const subgraph = createMockSubgraph('sub-uuid', [subNode])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+ const results = mapAllNodes(graph, (node) => node.id)
+
+ expect(results).toHaveLength(3)
+ expect(results).toContain(100)
+ })
+
+ it('should exclude undefined results', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+ const graph = createMockGraph(nodes)
+
+ const results = mapAllNodes(graph, (node) => {
+ return Number(node.id) > 1 ? node.id : undefined
+ })
+
+ expect(results).toEqual([2, 3])
+ })
+
+ it('should handle deeply nested structures', () => {
+ const deepNode = createMockNode(300)
+ const deepSubgraph = createMockSubgraph('deep-uuid', [deepNode])
+
+ const midNode = createMockNode(200)
+ const midSubgraphNode = createMockNode(201, {
+ isSubgraph: true,
+ subgraph: deepSubgraph
+ })
+ const midSubgraph = createMockSubgraph('mid-uuid', [
+ midNode,
+ midSubgraphNode
+ ])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph: midSubgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+ const results = mapAllNodes(graph, (node) => `node-${node.id}`)
+
+ expect(results).toHaveLength(5)
+ expect(results).toContain('node-300')
+ })
+ })
+
+ describe('forEachNode', () => {
+ it('should execute function on all nodes in a flat graph', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+ const graph = createMockGraph(nodes)
+
+ const visited: number[] = []
+ forEachNode(graph, (node) => {
+ visited.push(node.id as number)
+ })
+
+ expect(visited).toHaveLength(3)
+ expect(visited).toContain(1)
+ expect(visited).toContain(2)
+ expect(visited).toContain(3)
+ })
+
+ it('should execute function on nodes in subgraphs', () => {
+ const subNode = createMockNode(100)
+ const subgraph = createMockSubgraph('sub-uuid', [subNode])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+
+ const visited: number[] = []
+ forEachNode(graph, (node) => {
+ visited.push(node.id as number)
+ })
+
+ expect(visited).toHaveLength(3)
+ expect(visited).toContain(100)
+ })
+
+ it('should allow node mutations', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+ const graph = createMockGraph(nodes)
+
+ // Add a title property to each node
+ forEachNode(graph, (node) => {
+ ;(node as any).title = `Node ${node.id}`
+ })
+
+ expect(nodes[0]).toHaveProperty('title', 'Node 1')
+ expect(nodes[1]).toHaveProperty('title', 'Node 2')
+ expect(nodes[2]).toHaveProperty('title', 'Node 3')
+ })
+
+ it('should handle node type matching for subgraph references', () => {
+ const subgraphId = 'my-subgraph-123'
+ const nodes = [
+ createMockNode(1),
+ { ...createMockNode(2), type: subgraphId } as LGraphNode,
+ createMockNode(3),
+ { ...createMockNode(4), type: subgraphId } as LGraphNode
+ ]
+ const graph = createMockGraph(nodes)
+
+ const matchingNodes: number[] = []
+ forEachNode(graph, (node) => {
+ if (node.type === subgraphId) {
+ matchingNodes.push(node.id as number)
+ }
+ })
+
+ expect(matchingNodes).toEqual([2, 4])
+ })
+ })
+
+ describe('findNodeInHierarchy', () => {
+ it('should find node in root graph', () => {
+ const nodes = [createMockNode(1), createMockNode(2), createMockNode(3)]
+
+ const graph = createMockGraph(nodes)
+ const found = findNodeInHierarchy(graph, 2)
+
+ expect(found).toBeTruthy()
+ expect(found?.id).toBe(2)
+ })
+
+ it('should find node in subgraph', () => {
+ const subNode = createMockNode(100)
+ const subgraph = createMockSubgraph('sub-uuid', [subNode])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+ const found = findNodeInHierarchy(graph, 100)
+
+ expect(found).toBeTruthy()
+ expect(found?.id).toBe(100)
+ })
+
+ it('should return null for non-existent node', () => {
+ const nodes = [createMockNode(1), createMockNode(2)]
+ const graph = createMockGraph(nodes)
+
+ const found = findNodeInHierarchy(graph, 999)
+ expect(found).toBeNull()
+ })
+ })
+
+ describe('findSubgraphByUuid', () => {
+ it('should find subgraph by UUID', () => {
+ const targetUuid = 'target-uuid'
+ const subgraph = createMockSubgraph(targetUuid, [])
+
+ const nodes = [
+ createMockNode(1),
+ createMockNode(2, { isSubgraph: true, subgraph })
+ ]
+
+ const graph = createMockGraph(nodes)
+ const found = findSubgraphByUuid(graph, targetUuid)
+
+ expect(found).toBe(subgraph)
+ expect(found?.id).toBe(targetUuid)
+ })
+
+ it('should find nested subgraph', () => {
+ const targetUuid = 'deep-uuid'
+ const deepSubgraph = createMockSubgraph(targetUuid, [])
+
+ const midSubgraph = createMockSubgraph('mid-uuid', [
+ createMockNode(200, { isSubgraph: true, subgraph: deepSubgraph })
+ ])
+
+ const graph = createMockGraph([
+ createMockNode(1, { isSubgraph: true, subgraph: midSubgraph })
+ ])
+
+ const found = findSubgraphByUuid(graph, targetUuid)
+
+ expect(found).toBe(deepSubgraph)
+ expect(found?.id).toBe(targetUuid)
+ })
+
+ it('should return null for non-existent UUID', () => {
+ const subgraph = createMockSubgraph('some-uuid', [])
+ const graph = createMockGraph([
+ createMockNode(1, { isSubgraph: true, subgraph })
+ ])
+
+ const found = findSubgraphByUuid(graph, 'non-existent-uuid')
+ expect(found).toBeNull()
+ })
+ })
+
+ describe('getNodeByExecutionId', () => {
+ it('should find node in root graph', () => {
+ const nodes = [createMockNode('123'), createMockNode('456')]
+
+ const graph = createMockGraph(nodes)
+ const found = getNodeByExecutionId(graph, '123')
+
+ expect(found).toBeTruthy()
+ expect(found?.id).toBe('123')
+ })
+
+ it('should find node in subgraph using execution path', () => {
+ const targetNode = createMockNode('789')
+ const subgraph = createMockSubgraph('sub-uuid', [targetNode])
+
+ const subgraphNode = createMockNode('456', {
+ isSubgraph: true,
+ subgraph
+ })
+
+ const graph = createMockGraph([createMockNode('123'), subgraphNode])
+
+ const found = getNodeByExecutionId(graph, '456:789')
+
+ expect(found).toBe(targetNode)
+ expect(found?.id).toBe('789')
+ })
+
+ it('should handle deeply nested execution paths', () => {
+ const targetNode = createMockNode('999')
+ const deepSubgraph = createMockSubgraph('deep-uuid', [targetNode])
+
+ const midNode = createMockNode('456', {
+ isSubgraph: true,
+ subgraph: deepSubgraph
+ })
+ const midSubgraph = createMockSubgraph('mid-uuid', [midNode])
+
+ const topNode = createMockNode('123', {
+ isSubgraph: true,
+ subgraph: midSubgraph
+ })
+
+ const graph = createMockGraph([topNode])
+
+ const found = getNodeByExecutionId(graph, '123:456:999')
+
+ expect(found).toBe(targetNode)
+ expect(found?.id).toBe('999')
+ })
+
+ it('should return null for invalid path', () => {
+ const subgraph = createMockSubgraph('sub-uuid', [createMockNode('789')])
+ const graph = createMockGraph([
+ createMockNode('456', { isSubgraph: true, subgraph })
+ ])
+
+ // Wrong path - node 123 doesn't exist
+ const found = getNodeByExecutionId(graph, '123:789')
+ expect(found).toBeNull()
+ })
+
+ it('should return null for invalid execution ID', () => {
+ const graph = createMockGraph([createMockNode('123')])
+ const found = getNodeByExecutionId(graph, '')
+ expect(found).toBeNull()
+ })
+ })
+
+ describe('getNodeByLocatorId', () => {
+ it('should find node in root graph', () => {
+ const nodes = [createMockNode('123'), createMockNode('456')]
+
+ const graph = createMockGraph(nodes)
+ const found = getNodeByLocatorId(graph, '123')
+
+ expect(found).toBeTruthy()
+ expect(found?.id).toBe('123')
+ })
+
+ it('should find node in subgraph using UUID format', () => {
+ const targetUuid = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'
+ const targetNode = createMockNode('789')
+ const subgraph = createMockSubgraph(targetUuid, [targetNode])
+
+ const graph = createMockGraph([
+ createMockNode('123'),
+ createMockNode('456', { isSubgraph: true, subgraph })
+ ])
+
+ const locatorId = `${targetUuid}:789`
+ const found = getNodeByLocatorId(graph, locatorId)
+
+ expect(found).toBe(targetNode)
+ expect(found?.id).toBe('789')
+ })
+
+ it('should return null for invalid locator ID', () => {
+ const graph = createMockGraph([createMockNode('123')])
+
+ const found = getNodeByLocatorId(graph, 'invalid:::format')
+ expect(found).toBeNull()
+ })
+
+ it('should return null when subgraph UUID not found', () => {
+ const subgraph = createMockSubgraph('some-uuid', [
+ createMockNode('789')
+ ])
+ const graph = createMockGraph([
+ createMockNode('456', { isSubgraph: true, subgraph })
+ ])
+
+ const locatorId = 'non-existent-uuid:789'
+ const found = getNodeByLocatorId(graph, locatorId)
+ expect(found).toBeNull()
+ })
+ })
+
+ describe('getRootGraph', () => {
+ it('should return the same graph if it is already root', () => {
+ const graph = createMockGraph([])
+ expect(getRootGraph(graph)).toBe(graph)
+ })
+
+ it('should return root graph from subgraph', () => {
+ const rootGraph = createMockGraph([])
+ const subgraph = createMockSubgraph('sub-uuid', [])
+ ;(subgraph as any).rootGraph = rootGraph
+
+ expect(getRootGraph(subgraph)).toBe(rootGraph)
+ })
+
+ it('should return root graph from deeply nested subgraph', () => {
+ const rootGraph = createMockGraph([])
+ const midSubgraph = createMockSubgraph('mid-uuid', [])
+ const deepSubgraph = createMockSubgraph('deep-uuid', [])
+
+ ;(midSubgraph as any).rootGraph = rootGraph
+ ;(deepSubgraph as any).rootGraph = midSubgraph
+
+ expect(getRootGraph(deepSubgraph)).toBe(rootGraph)
+ })
+ })
+
+ describe('forEachSubgraphNode', () => {
+ it('should apply function to all nodes matching subgraph type', () => {
+ const subgraphId = 'my-subgraph-123'
+ const nodes = [
+ createMockNode(1),
+ { ...createMockNode(2), type: subgraphId } as LGraphNode,
+ createMockNode(3),
+ { ...createMockNode(4), type: subgraphId } as LGraphNode
+ ]
+ const graph = createMockGraph(nodes)
+
+ const matchingIds: number[] = []
+ forEachSubgraphNode(graph, subgraphId, (node) => {
+ matchingIds.push(node.id as number)
+ })
+
+ expect(matchingIds).toEqual([2, 4])
+ })
+
+ it('should work with root graph directly', () => {
+ const subgraphId = 'target-subgraph'
+ const rootNodes = [
+ { ...createMockNode(1), type: subgraphId } as LGraphNode,
+ createMockNode(2),
+ { ...createMockNode(3), type: subgraphId } as LGraphNode
+ ]
+ const rootGraph = createMockGraph(rootNodes)
+
+ const matchingIds: number[] = []
+ forEachSubgraphNode(rootGraph, subgraphId, (node) => {
+ matchingIds.push(node.id as number)
+ })
+
+ expect(matchingIds).toEqual([1, 3])
+ })
+
+ it('should handle null inputs gracefully', () => {
+ const fn = vi.fn()
+
+ forEachSubgraphNode(null, 'id', fn)
+ forEachSubgraphNode(createMockGraph([]), null, fn)
+ forEachSubgraphNode(null, null, fn)
+
+ expect(fn).not.toHaveBeenCalled()
+ })
+
+ it('should allow node mutations like title updates', () => {
+ const subgraphId = 'my-subgraph'
+ const nodes = [
+ { ...createMockNode(1), type: subgraphId } as LGraphNode,
+ { ...createMockNode(2), type: subgraphId } as LGraphNode,
+ createMockNode(3)
+ ]
+ const graph = createMockGraph(nodes)
+
+ forEachSubgraphNode(graph, subgraphId, (node) => {
+ ;(node as any).title = 'Updated Title'
+ })
+
+ expect(nodes[0]).toHaveProperty('title', 'Updated Title')
+ expect(nodes[1]).toHaveProperty('title', 'Updated Title')
+ expect(nodes[2]).not.toHaveProperty('title', 'Updated Title')
+ })
+ })
+
+ describe('mapSubgraphNodes', () => {
+ it('should map over nodes matching subgraph type', () => {
+ const subgraphId = 'my-subgraph-123'
+ const nodes = [
+ createMockNode(1),
+ { ...createMockNode(2), type: subgraphId } as LGraphNode,
+ createMockNode(3),
+ { ...createMockNode(4), type: subgraphId } as LGraphNode
+ ]
+ const graph = createMockGraph(nodes)
+
+ const results = mapSubgraphNodes(graph, subgraphId, (node) => node.id)
+
+ expect(results).toEqual([2, 4])
+ })
+
+ it('should return empty array for null inputs', () => {
+ expect(mapSubgraphNodes(null, 'id', (n) => n.id)).toEqual([])
+ expect(
+ mapSubgraphNodes(createMockGraph([]), null, (n) => n.id)
+ ).toEqual([])
+ })
+
+ it('should work with complex transformations', () => {
+ const subgraphId = 'target'
+ const nodes = [
+ { ...createMockNode(1), type: subgraphId } as LGraphNode,
+ { ...createMockNode(2), type: 'other' } as LGraphNode,
+ { ...createMockNode(3), type: subgraphId } as LGraphNode
+ ]
+ const graph = createMockGraph(nodes)
+
+ const results = mapSubgraphNodes(graph, subgraphId, (node) => ({
+ id: node.id,
+ isTarget: true
+ }))
+
+ expect(results).toEqual([
+ { id: 1, isTarget: true },
+ { id: 3, isTarget: true }
+ ])
+ })
+ })
+
+ describe('getAllNonIoNodesInSubgraph', () => {
+ it('should filter out SubgraphInputNode and SubgraphOutputNode', () => {
+ const nodes = [
+ { id: 'input', constructor: { comfyClass: 'SubgraphInputNode' } },
+ { id: 'output', constructor: { comfyClass: 'SubgraphOutputNode' } },
+ { id: 'user1', constructor: { comfyClass: 'CLIPTextEncode' } },
+ { id: 'user2', constructor: { comfyClass: 'KSampler' } }
+ ] as LGraphNode[]
+
+ const subgraph = createMockSubgraph('sub-uuid', nodes)
+ const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+
+ expect(nonIoNodes).toHaveLength(2)
+ expect(nonIoNodes.map((n) => n.id)).toEqual(['user1', 'user2'])
+ })
+
+ it('should handle subgraph with only IO nodes', () => {
+ const nodes = [
+ { id: 'input', constructor: { comfyClass: 'SubgraphInputNode' } },
+ { id: 'output', constructor: { comfyClass: 'SubgraphOutputNode' } }
+ ] as LGraphNode[]
+
+ const subgraph = createMockSubgraph('sub-uuid', nodes)
+ const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+
+ expect(nonIoNodes).toHaveLength(0)
+ })
+
+ it('should handle subgraph with only user nodes', () => {
+ const nodes = [
+ { id: 'user1', constructor: { comfyClass: 'CLIPTextEncode' } },
+ { id: 'user2', constructor: { comfyClass: 'KSampler' } }
+ ] as LGraphNode[]
+
+ const subgraph = createMockSubgraph('sub-uuid', nodes)
+ const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+
+ expect(nonIoNodes).toHaveLength(2)
+ expect(nonIoNodes).toEqual(nodes)
+ })
+
+ it('should handle empty subgraph', () => {
+ const subgraph = createMockSubgraph('sub-uuid', [])
+ const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+
+ expect(nonIoNodes).toHaveLength(0)
+ })
+ })
+ })
+})
diff --git a/tests-ui/tests/utils/serachAndReplace.test.ts b/tests-ui/tests/utils/serachAndReplace.test.ts
index 2c61df1c7..2a8515369 100644
--- a/tests-ui/tests/utils/serachAndReplace.test.ts
+++ b/tests-ui/tests/utils/serachAndReplace.test.ts
@@ -1,3 +1,4 @@
+import { LGraph } from '@comfyorg/litegraph'
import type { LGraphNode } from '@comfyorg/litegraph'
import { describe, expect, it } from 'vitest'
@@ -21,7 +22,11 @@ describe('applyTextReplacements', () => {
} as LGraphNode
]
- const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+ const mockGraph = new LGraph()
+ for (const node of mockNodes) {
+ mockGraph.add(node)
+ }
+ const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
// The expected result should have all invalid characters replaced with underscores
expect(result).toBe('file_name_with_invalid_chars_____control_chars__')
@@ -51,7 +56,11 @@ describe('applyTextReplacements', () => {
} as LGraphNode
]
- const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+ const mockGraph = new LGraph()
+ for (const node of mockNodes) {
+ mockGraph.add(node)
+ }
+ const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
expect(result).toBe(expected)
}
})
@@ -66,7 +75,11 @@ describe('applyTextReplacements', () => {
} as LGraphNode
]
- const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+ const mockGraph = new LGraph()
+ for (const node of mockNodes) {
+ mockGraph.add(node)
+ }
+ const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
expect(result).toBe(validChars)
})
})
diff --git a/tests-ui/tests/utils/typeGuardUtil.test.ts b/tests-ui/tests/utils/typeGuardUtil.test.ts
new file mode 100644
index 000000000..9c0689271
--- /dev/null
+++ b/tests-ui/tests/utils/typeGuardUtil.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+
+import { isSubgraphIoNode } from '@/utils/typeGuardUtil'
+
+describe('typeGuardUtil', () => {
+ describe('isSubgraphIoNode', () => {
+ it('should identify SubgraphInputNode as IO node', () => {
+ const node = {
+ constructor: { comfyClass: 'SubgraphInputNode' }
+ } as any
+
+ expect(isSubgraphIoNode(node)).toBe(true)
+ })
+
+ it('should identify SubgraphOutputNode as IO node', () => {
+ const node = {
+ constructor: { comfyClass: 'SubgraphOutputNode' }
+ } as any
+
+ expect(isSubgraphIoNode(node)).toBe(true)
+ })
+
+ it('should not identify regular nodes as IO nodes', () => {
+ const node = {
+ constructor: { comfyClass: 'CLIPTextEncode' }
+ } as any
+
+ expect(isSubgraphIoNode(node)).toBe(false)
+ })
+
+ it('should handle nodes without constructor', () => {
+ const node = {} as any
+
+ expect(isSubgraphIoNode(node)).toBe(false)
+ })
+
+ it('should handle nodes without comfyClass', () => {
+ const node = {
+ constructor: {}
+ } as any
+
+ expect(isSubgraphIoNode(node)).toBe(false)
+ })
+ })
+})
diff --git a/tests-ui/tests/widgets/domWidget.test.ts b/tests-ui/tests/widgets/domWidget.test.ts
new file mode 100644
index 000000000..8c5695f33
--- /dev/null
+++ b/tests-ui/tests/widgets/domWidget.test.ts
@@ -0,0 +1,82 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+import { describe, expect, test, vi } from 'vitest'
+
+import { ComponentWidgetImpl, DOMWidgetImpl } from '@/scripts/domWidget'
+
+// Mock dependencies
+vi.mock('@/stores/domWidgetStore', () => ({
+ useDomWidgetStore: () => ({
+ unregisterWidget: vi.fn()
+ })
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+ generateUUID: () => 'test-uuid'
+}))
+
+describe('DOMWidget Y Position Preservation', () => {
+ test('BaseDOMWidgetImpl createCopyForNode preserves Y position', () => {
+ const mockNode = new LGraphNode('test-node')
+ const originalWidget = new ComponentWidgetImpl({
+ node: mockNode,
+ name: 'test-widget',
+ component: { template: '' },
+ inputSpec: { name: 'test', type: 'string' },
+ options: {}
+ })
+
+ // Set a specific Y position
+ originalWidget.y = 66
+
+ const newNode = new LGraphNode('new-node')
+ const clonedWidget = originalWidget.createCopyForNode(newNode)
+
+ // Verify Y position is preserved
+ expect(clonedWidget.y).toBe(66)
+ expect(clonedWidget.node).toBe(newNode)
+ expect(clonedWidget.name).toBe('test-widget')
+ })
+
+ test('DOMWidgetImpl createCopyForNode preserves Y position', () => {
+ const mockNode = new LGraphNode('test-node')
+ const mockElement = document.createElement('div')
+
+ const originalWidget = new DOMWidgetImpl({
+ node: mockNode,
+ name: 'test-dom-widget',
+ type: 'test',
+ element: mockElement,
+ options: {}
+ })
+
+ // Set a specific Y position
+ originalWidget.y = 42
+
+ const newNode = new LGraphNode('new-node')
+ const clonedWidget = originalWidget.createCopyForNode(newNode)
+
+ // Verify Y position is preserved
+ expect(clonedWidget.y).toBe(42)
+ expect(clonedWidget.node).toBe(newNode)
+ expect(clonedWidget.element).toBe(mockElement)
+ expect(clonedWidget.name).toBe('test-dom-widget')
+ })
+
+ test('Y position defaults to 0 when not set', () => {
+ const mockNode = new LGraphNode('test-node')
+ const originalWidget = new ComponentWidgetImpl({
+ node: mockNode,
+ name: 'test-widget',
+ component: { template: '' },
+ inputSpec: { name: 'test', type: 'string' },
+ options: {}
+ })
+
+ // Don't explicitly set Y (should be 0 by default)
+ const newNode = new LGraphNode('new-node')
+ const clonedWidget = originalWidget.createCopyForNode(newNode)
+
+ // Verify Y position is preserved (should be 0)
+ expect(clonedWidget.y).toBe(0)
+ })
+})
diff --git a/vite.config.mts b/vite.config.mts
index c866656a0..f7d527981 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,5 +1,6 @@
import vue from '@vitejs/plugin-vue'
import dotenv from 'dotenv'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'
@@ -120,12 +121,19 @@ export default defineConfig({
]),
Icons({
- compiler: 'vue3'
+ compiler: 'vue3',
+ customCollections: {
+ comfy: FileSystemIconLoader('src/assets/icons/custom')
+ }
}),
Components({
dts: true,
- resolvers: [IconsResolver()],
+ resolvers: [
+ IconsResolver({
+ customCollections: ['comfy']
+ })
+ ],
dirs: ['src/components', 'src/layout', 'src/views'],
deep: true,
extensions: ['vue']
-
-
-
-
+
+
+
+
+