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