diff --git a/README.md b/README.md index e48f66a6f..62626073f 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,14 @@ pause Empty white screen (Fixed by https://github.com/comfyanonymous/ComfyUI/pull/4211) ### Behavior - After you enable the new frontend in commandline, and open ComfyUI in the browser, you see a blank screen. If you toggle dev tools with F12, you can observe `litegraph.core.js:1` 404 in console messages. + After you enable the new frontend in the command line, and open ComfyUI in the browser, you see a blank screen. If you toggle dev tools with F12, you can observe `litegraph.core.js:1` 404 in console messages. ### Cause The browser is caching the `index.html` file previously served from `localhost:8188`. ### How to fix Step 1: Disable cache in devtools - + ![image](https://github.com/user-attachments/assets/c0cec519-93b7-49f8-aea1-7adb0aa5b073) Step 2: Refresh your browser @@ -67,7 +67,7 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
v1.2.7: **Litegraph** drags multiple links with shift pressed - + https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d @@ -92,9 +92,9 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d ### Node developers API
- v1.2.4: Extension API to register custom side bar tab + v1.2.4: Extension API to register custom sidebar tab - Extensions now can call following API to register a sidebar tab. + Extensions now can call the following API to register a sidebar tab. ```js app.extensionManager.registerSidebarTab({ @@ -109,9 +109,9 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d }); ``` -The list of supported icons can be find here: https://primevue.org/icons/#list +The list of supported icons can be found here: -We will support custom icon later. +We will support custom icons later. ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
@@ -122,7 +122,7 @@ We will support custom icon later. ### What has been done - Migrate all code to TypeScript with minimal change modification to the original logic. -- Bundle all code with vite's rollup build. +- Bundle all code with Vite's rollup build. - Added a shim layer to be backward compatible with the existing extension system. - Front-end dev server. - Zod schema for input validation on ComfyUI workflow. diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index 38404fab9..3b666dd39 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -37,7 +37,7 @@ class ComfyNodeSearchBox { } } -class NodeLibrarySideBarTab { +class NodeLibrarySidebarTab { public readonly tabId: string = 'node-library' constructor(public readonly page: Page) {} @@ -74,16 +74,16 @@ class NodeLibrarySideBarTab { } class ComfyMenu { - public readonly sideToolBar: Locator + public readonly sideToolbar: Locator public readonly themeToggleButton: Locator constructor(public readonly page: Page) { - this.sideToolBar = page.locator('.side-tool-bar-container') + this.sideToolbar = page.locator('.side-tool-bar-container') this.themeToggleButton = page.locator('.comfy-vue-theme-toggle') } get nodeLibraryTab() { - return new NodeLibrarySideBarTab(this.page) + return new NodeLibrarySidebarTab(this.page) } async toggleTheme() { diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts index 0ab6cefa2..35bc21cf7 100644 --- a/browser_tests/menu.spec.ts +++ b/browser_tests/menu.spec.ts @@ -44,7 +44,7 @@ test.describe('Menu', () => { }) test('Can register sidebar tab', async ({ comfyPage }) => { - const initialChildrenCount = await comfyPage.menu.sideToolBar.evaluate( + const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate( (el) => el.children.length ) @@ -62,7 +62,7 @@ test.describe('Menu', () => { }) await comfyPage.nextFrame() - const newChildrenCount = await comfyPage.menu.sideToolBar.evaluate( + const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate( (el) => el.children.length ) expect(newChildrenCount).toBe(initialChildrenCount + 1) diff --git a/src/App.vue b/src/App.vue index 8190494bb..5bcff252a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,12 +10,12 @@ import { computed, markRaw, onMounted, onUnmounted, watch } from 'vue' import BlockUI from 'primevue/blockui' import ProgressSpinner from 'primevue/progressspinner' import GraphCanvas from '@/components/graph/GraphCanvas.vue' -import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue' +import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue' import { app } from './scripts/app' import { useSettingStore } from './stores/settingStore' import { useI18n } from 'vue-i18n' import { useWorkspaceStore } from './stores/workspaceStateStore' -import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue' +import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue' import GlobalDialog from './components/dialog/GlobalDialog.vue' import { api } from './scripts/api' import { StatusWsMessageStatus } from './types/apiTypes' @@ -50,17 +50,17 @@ const init = () => { const value = useQueuePendingTaskCountStore().count.toString() return value === '0' ? null : value }, - title: t('sideToolBar.queue'), - tooltip: t('sideToolBar.queue'), - component: markRaw(QueueSideBarTab), + title: t('sideToolbar.queue'), + tooltip: t('sideToolbar.queue'), + component: markRaw(QueueSidebarTab), type: 'vue' }) app.extensionManager.registerSidebarTab({ id: 'node-library', icon: 'pi pi-book', - title: t('sideToolBar.nodeLibrary'), - tooltip: t('sideToolBar.nodeLibrary'), - component: markRaw(NodeLibrarySideBarTab), + title: t('sideToolbar.nodeLibrary'), + tooltip: t('sideToolbar.nodeLibrary'), + component: markRaw(NodeLibrarySidebarTab), type: 'vue' }) } diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue index c280d73e2..f91663fd8 100644 --- a/src/components/LiteGraphCanvasSplitterOverlay.vue +++ b/src/components/LiteGraphCanvasSplitterOverlay.vue @@ -4,8 +4,8 @@ class="side-bar-panel" :minSize="10" :size="20" - v-show="sideBarPanelVisible" - v-if="sideBarLocation === 'left'" + v-show="sidebarPanelVisible" + v-if="sidebarLocation === 'left'" > @@ -16,8 +16,8 @@ class="side-bar-panel" :minSize="10" :size="20" - v-show="sideBarPanelVisible" - v-if="sideBarLocation === 'right'" + v-show="sidebarPanelVisible" + v-if="sidebarLocation === 'right'" > @@ -32,15 +32,15 @@ import SplitterPanel from 'primevue/splitterpanel' import { computed } from 'vue' const settingStore = useSettingStore() -const sideBarLocation = computed<'left' | 'right'>(() => - settingStore.get('Comfy.SideBar.Location') +const sidebarLocation = computed<'left' | 'right'>(() => + settingStore.get('Comfy.Sidebar.Location') ) -const sideBarPanelVisible = computed( +const sidebarPanelVisible = computed( () => useWorkspaceStore().activeSidebarTab !== null ) const gutterClass = computed(() => { - return sideBarPanelVisible.value ? '' : 'gutter-hidden' + return sidebarPanelVisible.value ? '' : 'gutter-hidden' }) diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index 8f99c439c..e5f74ea90 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -2,7 +2,7 @@ @@ -12,7 +12,7 @@