diff --git a/src/App.vue b/src/App.vue index 044a44459..5fd5760ae 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,6 +36,7 @@ import type { ToastMessageOptions } from 'primevue/toast' import { useToast } from 'primevue/usetoast' import { i18n } from './i18n' import { useExecutionStore } from './stores/executionStore' +import { useWorkflowStore } from './stores/workflowStore' const isLoading = computed(() => useWorkspaceStore().spinner) const theme = computed(() => @@ -131,6 +132,8 @@ app.workflowManager.executionStore = executionStore watchEffect(() => { app.menu.workflows.buttonProgress.style.width = `${executionStore.executionProgress}%` }) +const workflowStore = useWorkflowStore() +app.workflowManager.workflowStore = workflowStore onMounted(() => { api.addEventListener('status', onStatus) diff --git a/src/scripts/workflows.ts b/src/scripts/workflows.ts index 124f2315a..0ef2927ff 100644 --- a/src/scripts/workflows.ts +++ b/src/scripts/workflows.ts @@ -6,19 +6,29 @@ import { getStorageValue, setStorageValue } from './utils' import { LGraphCanvas, LGraph } from '@comfyorg/litegraph' import { appendJsonExt, trimJsonExt } from '@/utils/formatUtil' import { useWorkflowStore } from '@/stores/workflowStore' +import { useExecutionStore } from '@/stores/executionStore' import { markRaw, toRaw } from 'vue' export class ComfyWorkflowManager extends EventTarget { - executionStore: any = null + executionStore: ReturnType | null + workflowStore: ReturnType | null + app: ComfyApp #unsavedCount = 0 - workflowLookup: Record = {} - workflows: Array = [] - openWorkflows: Array = [] - app: ComfyApp + get workflowLookup(): Record { + return this.workflowStore?.workflowLookup ?? {} + } - get _activeWorkflow() { + get workflows(): ComfyWorkflow[] { + return this.workflowStore?.workflows ?? [] + } + + get openWorkflows(): ComfyWorkflow[] { + return (this.workflowStore?.openWorkflows ?? []) as ComfyWorkflow[] + } + + get _activeWorkflow(): ComfyWorkflow | null { if (!this.app.vueAppReady) return null return toRaw(useWorkflowStore().activeWorkflow) as ComfyWorkflow | null } @@ -28,7 +38,7 @@ export class ComfyWorkflowManager extends EventTarget { useWorkflowStore().activeWorkflow = workflow ? markRaw(workflow) : null } - get activeWorkflow() { + get activeWorkflow(): ComfyWorkflow | null { return this._activeWorkflow ?? this.openWorkflows[0] } @@ -68,16 +78,13 @@ export class ComfyWorkflowManager extends EventTarget { w.slice(1), favorites.has(w[0]) ) - this.workflowLookup[workflow.path] = workflow + this.workflowLookup[workflow.path] = markRaw(workflow) } return workflow } ) - - this.workflows = workflows } catch (error) { alert('Error loading workflows: ' + (error.message ?? error)) - this.workflows = [] } } @@ -117,7 +124,7 @@ export class ComfyWorkflowManager extends EventTarget { const index = this.openWorkflows.indexOf(workflow) if (index === -1) { // Opening a new workflow - this.openWorkflows.push(workflow) + this.openWorkflows.push(markRaw(workflow)) } this._activeWorkflow = workflow diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts index 4e34342ba..7dd7dd761 100644 --- a/src/stores/workflowStore.ts +++ b/src/stores/workflowStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { ref } from 'vue' +import { computed, ref } from 'vue' import { ComfyWorkflow } from '@/scripts/workflows' import { getStorageValue } from '@/scripts/utils' @@ -9,8 +9,15 @@ export const useWorkflowStore = defineStore('workflow', () => { Boolean(getStorageValue('Comfy.PreviousWorkflowUnsaved')) ) + const workflowLookup = ref>({}) + const workflows = computed(() => Object.values(workflowLookup.value)) + const openWorkflows = ref([]) + return { activeWorkflow, - previousWorkflowUnsaved + previousWorkflowUnsaved, + workflows, + openWorkflows, + workflowLookup } })