mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
Compare commits
2 Commits
cloud/1.40
...
graph-mode
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c30e1faa22 | ||
|
|
8bb1d5724b |
@@ -13,5 +13,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Button from 'primevue/button'
|
import Button from 'primevue/button'
|
||||||
|
|
||||||
import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
|
import { showSubgraphNodeDialog } from '@/workbench/graph/subgraph/useSubgraphNodeDialog'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,8 +5,7 @@ import {
|
|||||||
DEFAULT_DARK_COLOR_PALETTE,
|
DEFAULT_DARK_COLOR_PALETTE,
|
||||||
DEFAULT_LIGHT_COLOR_PALETTE
|
DEFAULT_LIGHT_COLOR_PALETTE
|
||||||
} from '@/constants/coreColorPalettes'
|
} from '@/constants/coreColorPalettes'
|
||||||
import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils'
|
import { showSubgraphNodeDialog } from '@/workbench/graph/subgraph/useSubgraphNodeDialog'
|
||||||
import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
|
|
||||||
import { t } from '@/i18n'
|
import { t } from '@/i18n'
|
||||||
import {
|
import {
|
||||||
LGraphEventMode,
|
LGraphEventMode,
|
||||||
@@ -37,6 +36,7 @@ import { api } from '@/scripts/api'
|
|||||||
import { app } from '@/scripts/app'
|
import { app } from '@/scripts/app'
|
||||||
import { useDialogService } from '@/services/dialogService'
|
import { useDialogService } from '@/services/dialogService'
|
||||||
import { useLitegraphService } from '@/services/litegraphService'
|
import { useLitegraphService } from '@/services/litegraphService'
|
||||||
|
import { invokeToggleWidgetPromotion } from '@/services/widgetPromotionHandlers'
|
||||||
import type { ComfyCommand } from '@/stores/commandStore'
|
import type { ComfyCommand } from '@/stores/commandStore'
|
||||||
import { useExecutionStore } from '@/stores/executionStore'
|
import { useExecutionStore } from '@/stores/executionStore'
|
||||||
import { useHelpCenterStore } from '@/stores/helpCenterStore'
|
import { useHelpCenterStore } from '@/stores/helpCenterStore'
|
||||||
@@ -1027,7 +1027,7 @@ export function useCoreCommands(): ComfyCommand[] {
|
|||||||
icon: 'icon-[lucide--arrow-left-right]',
|
icon: 'icon-[lucide--arrow-left-right]',
|
||||||
label: 'Toggle promotion of hovered widget',
|
label: 'Toggle promotion of hovered widget',
|
||||||
versionAdded: '1.30.1',
|
versionAdded: '1.30.1',
|
||||||
function: tryToggleWidgetPromotion
|
function: () => invokeToggleWidgetPromotion()
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'Comfy.OpenManagerDialog',
|
id: 'Comfy.OpenManagerDialog',
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
demoteWidget,
|
demoteWidget,
|
||||||
promoteRecommendedWidgets
|
promoteRecommendedWidgets
|
||||||
} from '@/core/graph/subgraph/proxyWidgetUtils'
|
} from '@/renderer/graph/subgraph/proxyWidgetUtils'
|
||||||
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
||||||
import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
|
import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
|
||||||
import type {
|
import type {
|
||||||
@@ -3,7 +3,7 @@ import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
|
|||||||
import {
|
import {
|
||||||
isProxyWidget,
|
isProxyWidget,
|
||||||
isDisconnectedWidget
|
isDisconnectedWidget
|
||||||
} from '@/core/graph/subgraph/proxyWidget'
|
} from '@/renderer/graph/subgraph/proxyWidget'
|
||||||
import { t } from '@/i18n'
|
import { t } from '@/i18n'
|
||||||
import type {
|
import type {
|
||||||
IContextMenuValue,
|
IContextMenuValue,
|
||||||
@@ -14,6 +14,7 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
|
|||||||
import { useToastStore } from '@/platform/updates/common/toastStore'
|
import { useToastStore } from '@/platform/updates/common/toastStore'
|
||||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||||
import { useLitegraphService } from '@/services/litegraphService'
|
import { useLitegraphService } from '@/services/litegraphService'
|
||||||
|
import { registerWidgetPromotionHandlers } from '@/services/widgetPromotionHandlers'
|
||||||
import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
|
import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
|
||||||
|
|
||||||
type PartialNode = Pick<LGraphNode, 'title' | 'id' | 'type'>
|
type PartialNode = Pick<LGraphNode, 'title' | 'id' | 'type'>
|
||||||
@@ -86,7 +87,7 @@ function getParentNodes(): SubgraphNode[] {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addWidgetPromotionOptions(
|
function addWidgetPromotionOptions(
|
||||||
options: (IContextMenuValue<unknown> | null)[],
|
options: (IContextMenuValue<unknown> | null)[],
|
||||||
widget: IBaseWidget,
|
widget: IBaseWidget,
|
||||||
node: LGraphNode
|
node: LGraphNode
|
||||||
@@ -111,7 +112,7 @@ export function addWidgetPromotionOptions(
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export function tryToggleWidgetPromotion() {
|
function tryToggleWidgetPromotion() {
|
||||||
const canvas = useCanvasStore().getCanvas()
|
const canvas = useCanvasStore().getCanvas()
|
||||||
const [x, y] = canvas.graph_mouse
|
const [x, y] = canvas.graph_mouse
|
||||||
const node = canvas.graph?.getNodeOnPos(x, y, canvas.visible_nodes)
|
const node = canvas.graph?.getNodeOnPos(x, y, canvas.visible_nodes)
|
||||||
@@ -174,3 +175,8 @@ export function pruneDisconnected(subgraphNode: SubgraphNode) {
|
|||||||
.filter((w) => !isDisconnectedWidget(w))
|
.filter((w) => !isDisconnectedWidget(w))
|
||||||
.map((w) => [w._overlay.nodeId, w._overlay.widgetName])
|
.map((w) => [w._overlay.nodeId, w._overlay.widgetName])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
registerWidgetPromotionHandlers({
|
||||||
|
addWidgetPromotionOptions,
|
||||||
|
tryToggleWidgetPromotion
|
||||||
|
})
|
||||||
@@ -5,7 +5,7 @@ import { reactive, unref } from 'vue'
|
|||||||
import { shallowRef } from 'vue'
|
import { shallowRef } from 'vue'
|
||||||
|
|
||||||
import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
|
import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
|
||||||
import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
|
import { registerProxyWidgets } from '@/renderer/graph/subgraph/proxyWidget'
|
||||||
import { st, t } from '@/i18n'
|
import { st, t } from '@/i18n'
|
||||||
import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
|
import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
|
||||||
import {
|
import {
|
||||||
|
|||||||
@@ -5,8 +5,7 @@ import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteG
|
|||||||
import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
|
import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
|
||||||
import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImagePreview'
|
import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImagePreview'
|
||||||
import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
|
import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
|
||||||
import { addWidgetPromotionOptions } from '@/core/graph/subgraph/proxyWidgetUtils'
|
import { showSubgraphNodeDialog } from '@/workbench/graph/subgraph/useSubgraphNodeDialog'
|
||||||
import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
|
|
||||||
import { st, t } from '@/i18n'
|
import { st, t } from '@/i18n'
|
||||||
import {
|
import {
|
||||||
LGraphCanvas,
|
LGraphCanvas,
|
||||||
@@ -58,6 +57,7 @@ import {
|
|||||||
import { getOrderedInputSpecs } from '@/utils/nodeDefOrderingUtil'
|
import { getOrderedInputSpecs } from '@/utils/nodeDefOrderingUtil'
|
||||||
|
|
||||||
import { useExtensionService } from './extensionService'
|
import { useExtensionService } from './extensionService'
|
||||||
|
import { addWidgetPromotionOptions as invokeAddWidgetPromotionOptions } from './widgetPromotionHandlers'
|
||||||
|
|
||||||
export const CONFIG = Symbol()
|
export const CONFIG = Symbol()
|
||||||
export const GET_CONFIG = Symbol()
|
export const GET_CONFIG = Symbol()
|
||||||
@@ -826,7 +826,7 @@ export const useLitegraphService = () => {
|
|||||||
const [x, y] = canvas.graph_mouse
|
const [x, y] = canvas.graph_mouse
|
||||||
const overWidget = this.getWidgetOnPos(x, y, true)
|
const overWidget = this.getWidgetOnPos(x, y, true)
|
||||||
if (overWidget) {
|
if (overWidget) {
|
||||||
addWidgetPromotionOptions(options, overWidget, this)
|
invokeAddWidgetPromotionOptions(options, overWidget, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
41
src/services/widgetPromotionHandlers.ts
Normal file
41
src/services/widgetPromotionHandlers.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { shallowRef } from 'vue'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
IContextMenuValue,
|
||||||
|
LGraphNode
|
||||||
|
} from '@/lib/litegraph/src/litegraph'
|
||||||
|
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
|
||||||
|
|
||||||
|
type WidgetPromotionHandlers = {
|
||||||
|
addWidgetPromotionOptions?: (
|
||||||
|
options: (IContextMenuValue<unknown> | null)[],
|
||||||
|
widget: IBaseWidget,
|
||||||
|
node: LGraphNode
|
||||||
|
) => void
|
||||||
|
tryToggleWidgetPromotion?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlersRef = shallowRef<WidgetPromotionHandlers>({})
|
||||||
|
|
||||||
|
export const registerWidgetPromotionHandlers = (
|
||||||
|
handlers: WidgetPromotionHandlers
|
||||||
|
) => {
|
||||||
|
handlersRef.value = handlers
|
||||||
|
return () => {
|
||||||
|
if (handlersRef.value === handlers) {
|
||||||
|
handlersRef.value = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const invokeToggleWidgetPromotion = () => {
|
||||||
|
handlersRef.value.tryToggleWidgetPromotion?.()
|
||||||
|
}
|
||||||
|
|
||||||
|
export const addWidgetPromotionOptions = (
|
||||||
|
options: (IContextMenuValue<unknown> | null)[],
|
||||||
|
widget: IBaseWidget,
|
||||||
|
node: LGraphNode
|
||||||
|
) => {
|
||||||
|
handlersRef.value.addWidgetPromotionOptions?.(options, widget, node)
|
||||||
|
}
|
||||||
@@ -10,7 +10,12 @@ import {
|
|||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
import SearchBox from '@/components/common/SearchBox.vue'
|
import SearchBox from '@/components/common/SearchBox.vue'
|
||||||
import SubgraphNodeWidget from '@/core/graph/subgraph/SubgraphNodeWidget.vue'
|
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
||||||
|
import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
|
||||||
|
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
||||||
|
import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
|
||||||
|
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
|
||||||
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||||
import {
|
import {
|
||||||
demoteWidget,
|
demoteWidget,
|
||||||
isRecommendedWidget,
|
isRecommendedWidget,
|
||||||
@@ -19,17 +24,12 @@ import {
|
|||||||
promoteWidget,
|
promoteWidget,
|
||||||
pruneDisconnected,
|
pruneDisconnected,
|
||||||
widgetItemToProperty
|
widgetItemToProperty
|
||||||
} from '@/core/graph/subgraph/proxyWidgetUtils'
|
} from '@/renderer/graph/subgraph/proxyWidgetUtils'
|
||||||
import type { WidgetItem } from '@/core/graph/subgraph/proxyWidgetUtils'
|
import type { WidgetItem } from '@/renderer/graph/subgraph/proxyWidgetUtils'
|
||||||
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
|
||||||
import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
|
|
||||||
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
|
||||||
import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
|
|
||||||
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
|
|
||||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
|
||||||
import { DraggableList } from '@/scripts/ui/draggableList'
|
import { DraggableList } from '@/scripts/ui/draggableList'
|
||||||
import { useLitegraphService } from '@/services/litegraphService'
|
import { useLitegraphService } from '@/services/litegraphService'
|
||||||
import { useDialogStore } from '@/stores/dialogStore'
|
import { useDialogStore } from '@/stores/dialogStore'
|
||||||
|
import SubgraphNodeWidget from '@/workbench/graph/subgraph/SubgraphNodeWidget.vue'
|
||||||
|
|
||||||
const canvasStore = useCanvasStore()
|
const canvasStore = useCanvasStore()
|
||||||
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import SubgraphNode from '@/core/graph/subgraph/SubgraphNode.vue'
|
import SubgraphNode from '@/workbench/graph/subgraph/SubgraphNode.vue'
|
||||||
import { useDialogStore } from '@/stores/dialogStore'
|
import { useDialogStore } from '@/stores/dialogStore'
|
||||||
import type { DialogComponentProps } from '@/stores/dialogStore'
|
import type { DialogComponentProps } from '@/stores/dialogStore'
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { describe, expect, test, vi } from 'vitest'
|
import { describe, expect, test, vi } from 'vitest'
|
||||||
|
|
||||||
import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
|
import { registerProxyWidgets } from '@/renderer/graph/subgraph/proxyWidget'
|
||||||
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
|
||||||
import { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
import { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
||||||
import type { LGraphCanvas, SubgraphNode } from '@/lib/litegraph/src/litegraph'
|
import type { LGraphCanvas, SubgraphNode } from '@/lib/litegraph/src/litegraph'
|
||||||
|
|||||||
Reference in New Issue
Block a user