Reverse init order (#227)

src/App.vue

@@ -2,8 +2,8 @@
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
   <div v-else>
     <NodeSearchboxPopover v-if="nodeSearchEnabled" />
-    <teleport to="#graph-canvas-container">
-      <LiteGraphCanvasSplitterOverlay>
+    <teleport to=".graph-canvas-container">
+      <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
         <template #side-bar-panel>
           <SideToolBar />
         </template>
@@ -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',

src/assets/css/style.css

@@ -90,7 +90,7 @@ body {
   display: flex;
 }
 
-#graph-canvas-container {
+.graph-canvas-container {
   width: 100%;
   height: 100%;
   order: -3;

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) {

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')
 })

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<string, ComfyNodeDef>
 
   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')
   }