From dc13ed102bea042214092082c4ee3cf252e7bf76 Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Thu, 25 Jul 2024 22:20:38 -0400 Subject: [PATCH] Reverse init order (#227) --- src/App.vue | 11 ++++---- src/assets/css/style.css | 2 +- src/components/sidebar/SideToolBar.vue | 12 +------- src/main.ts | 39 +++++++++++++------------- src/scripts/app.ts | 16 ++++++----- 5 files changed, 36 insertions(+), 44 deletions(-) diff --git a/src/App.vue b/src/App.vue index dab6387d4..3ede732a2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,8 +2,8 @@
- - + + @@ -21,7 +21,6 @@ import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue' import ProgressSpinner from 'primevue/progressspinner' import { app } from './scripts/app' import { useSettingStore } from './stores/settingStore' -import { useNodeDefStore } from './stores/nodeDefStore' import { ExtensionManagerImpl } from './scripts/extensionManager' import { useI18n } from 'vue-i18n' @@ -45,13 +44,15 @@ watch( }, { immediate: true } ) +const betaMenuEnabled = computed( + () => useSettingStore().get('Comfy.UseNewMenu') !== 'Disabled' +) const { t } = useI18n() const init = () => { - useNodeDefStore().addNodeDefs(Object.values(app.nodeDefs)) useSettingStore().addSettings(app.ui.settings) app.vueAppReady = true - // Late init as extension manager needs to access pinia store. + // lazy init as extension manager needs to access pinia store. app.extensionManager = new ExtensionManagerImpl() app.extensionManager.registerSidebarTab({ id: 'queue', diff --git a/src/assets/css/style.css b/src/assets/css/style.css index c05db376f..8c338280b 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -90,7 +90,7 @@ body { display: flex; } -#graph-canvas-container { +.graph-canvas-container { width: 100%; height: 100%; order: -3; diff --git a/src/components/sidebar/SideToolBar.vue b/src/components/sidebar/SideToolBar.vue index 010653e4d..a338d8491 100644 --- a/src/components/sidebar/SideToolBar.vue +++ b/src/components/sidebar/SideToolBar.vue @@ -38,8 +38,7 @@ import SideBarIcon from './SideBarIcon.vue' import SideBarThemeToggleIcon from './SideBarThemeToggleIcon.vue' import SideBarSettingsToggleIcon from './SideBarSettingsToggleIcon.vue' -import { computed, onBeforeUnmount, watch } from 'vue' -import { useSettingStore } from '@/stores/settingStore' +import { computed, onBeforeUnmount } from 'vue' import { app } from '@/scripts/app' import { useWorkspaceStore } from '@/stores/workspaceStateStore' import { @@ -61,15 +60,6 @@ const onTabClick = (item: SidebarTabExtension) => { workspaceStateStore.activeSidebarTab === item.id ? null : item.id ) } - -const betaMenuEnabled = computed( - () => useSettingStore().get('Comfy.UseNewMenu') !== 'Disabled' -) -watch(betaMenuEnabled, (newValue) => { - if (!newValue) { - workspaceStateStore.updateActiveSidebarTab(null) - } -}) onBeforeUnmount(() => { tabs.value.forEach((tab) => { if (tab.type === 'custom' && tab.destroy) { diff --git a/src/main.ts b/src/main.ts index 5a119f1fe..d7ba0033d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -21,28 +21,27 @@ const ComfyUIPreset = definePreset(Aura, { const app = createApp(App) const pinia = createPinia() +app.directive('tooltip', Tooltip) +app + .use(PrimeVue, { + theme: { + preset: ComfyUIPreset, + options: { + prefix: 'p', + cssLayer: false, + // This is a workaround for the issue with the dark mode selector + // https://github.com/primefaces/primevue/issues/5515 + darkModeSelector: '.dark-theme, :root:has(.dark-theme)' + } + } + }) + .use(ConfirmationService) + .use(ToastService) + .use(pinia) + .use(i18n) + .mount('#vue-app') comfyApp.setup().then(() => { window['app'] = comfyApp window['graph'] = comfyApp.graph - - app.directive('tooltip', Tooltip) - app - .use(PrimeVue, { - theme: { - preset: ComfyUIPreset, - options: { - prefix: 'p', - cssLayer: false, - // This is a workaround for the issue with the dark mode selector - // https://github.com/primefaces/primevue/issues/5515 - darkModeSelector: '.dark-theme, :root:has(.dark-theme)' - } - } - }) - .use(ConfirmationService) - .use(ToastService) - .use(pinia) - .use(i18n) - .mount('#vue-app') }) diff --git a/src/scripts/app.ts b/src/scripts/app.ts index fc8f9e4f5..6f25ab8b4 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -36,6 +36,7 @@ import { StorageLocation } from '@/types/settingTypes' import '@comfyorg/litegraph/css/litegraph.css' import '../assets/css/style.css' import { ExtensionManager } from '@/types/extensionTypes' +import { useNodeDefStore } from '@/stores/nodeDefStore' export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview' @@ -117,8 +118,8 @@ export class ComfyApp { bodyLeft: HTMLElement bodyRight: HTMLElement bodyBottom: HTMLElement + canvasContainer: HTMLElement menu: ComfyAppMenu - nodeDefs: Record constructor() { this.vueAppReady = false @@ -129,6 +130,9 @@ export class ComfyApp { this.bodyLeft = $el('div.comfyui-body-left', { parent: document.body }) this.bodyRight = $el('div.comfyui-body-right', { parent: document.body }) this.bodyBottom = $el('div.comfyui-body-bottom', { parent: document.body }) + this.canvasContainer = $el('div.graph-canvas-container', { + parent: document.body + }) this.menu = new ComfyAppMenu(this) /** @@ -1847,17 +1851,13 @@ export class ComfyApp { await this.#setUser() // Create and mount the LiteGraph in the DOM - const canvasContainer = document.createElement('div') - canvasContainer.id = 'graph-canvas-container' - const mainCanvas = document.createElement('canvas') mainCanvas.style.touchAction = 'none' const canvasEl = (this.canvasEl = Object.assign(mainCanvas, { id: 'graph-canvas' })) canvasEl.tabIndex = 1 - canvasContainer.prepend(canvasEl) - document.body.prepend(canvasContainer) + this.canvasContainer.prepend(canvasEl) this.resizeCanvas() @@ -1965,7 +1965,9 @@ export class ComfyApp { async registerNodes() { // Load node definitions from the backend const defs = await api.getNodeDefs() - this.nodeDefs = defs + if (this.vueAppReady) { + useNodeDefStore().addNodeDefs(Object.values(defs)) + } await this.registerNodesFromDefs(defs) await this.#invokeExtensionsAsync('registerCustomNodes') }