mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
## Summary Adds an additional dialog after setting the default view of the workflow to let users pick their next step ## Screenshots (if applicable) <img width="479" height="332" alt="image" src="https://github.com/user-attachments/assets/1ea40b10-d7d3-49ff-9ea2-27b9e907c923" /> <img width="478" height="343" alt="image" src="https://github.com/user-attachments/assets/21674998-5ce2-496d-97e6-ef8f2f2d7dd7" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9374-feat-App-builder-confirmation-dialog-after-setting-default-view-mode-3196d73d36508192a45ee8ba0a7f74a6) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { computed } from 'vue'
|
|
|
|
import { useAppMode } from '@/composables/useAppMode'
|
|
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
|
import { app } from '@/scripts/app'
|
|
import { useDialogService } from '@/services/dialogService'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
import BuilderDefaultModeAppliedDialogContent from './BuilderDefaultModeAppliedDialogContent.vue'
|
|
import DefaultViewDialogContent from './DefaultViewDialogContent.vue'
|
|
|
|
const DIALOG_KEY = 'builder-default-view'
|
|
const APPLIED_DIALOG_KEY = 'builder-default-view-applied'
|
|
|
|
export function useAppSetDefaultView() {
|
|
const workflowStore = useWorkflowStore()
|
|
const dialogService = useDialogService()
|
|
const dialogStore = useDialogStore()
|
|
const { setMode } = useAppMode()
|
|
|
|
const settingView = computed(() => dialogStore.isDialogOpen(DIALOG_KEY))
|
|
|
|
function showDialog() {
|
|
dialogService.showLayoutDialog({
|
|
key: DIALOG_KEY,
|
|
component: DefaultViewDialogContent,
|
|
props: {
|
|
initialOpenAsApp: workflowStore.activeWorkflow?.initialMode !== 'graph',
|
|
onApply: handleApply,
|
|
onClose: closeDialog
|
|
}
|
|
})
|
|
}
|
|
|
|
function handleApply(openAsApp: boolean) {
|
|
const workflow = workflowStore.activeWorkflow
|
|
if (!workflow) return
|
|
|
|
workflow.initialMode = openAsApp ? 'app' : 'graph'
|
|
const extra = (app.rootGraph.extra ??= {})
|
|
extra.linearMode = openAsApp
|
|
workflow.changeTracker?.checkState()
|
|
closeDialog()
|
|
showAppliedDialog(openAsApp)
|
|
}
|
|
|
|
function showAppliedDialog(appliedAsApp: boolean) {
|
|
dialogService.showLayoutDialog({
|
|
key: APPLIED_DIALOG_KEY,
|
|
component: BuilderDefaultModeAppliedDialogContent,
|
|
props: {
|
|
appliedAsApp,
|
|
onViewApp: () => {
|
|
closeAppliedDialog()
|
|
setMode('app')
|
|
},
|
|
onClose: closeAppliedDialog
|
|
}
|
|
})
|
|
}
|
|
|
|
function closeDialog() {
|
|
dialogStore.closeDialog({ key: DIALOG_KEY })
|
|
}
|
|
|
|
function closeAppliedDialog() {
|
|
dialogStore.closeDialog({ key: APPLIED_DIALOG_KEY })
|
|
}
|
|
|
|
return { settingView, showDialog }
|
|
}
|