diff --git a/README.md b/README.md index e6d1ad4cc..0416355f0 100644 --- a/README.md +++ b/README.md @@ -195,6 +195,29 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d ### Developer APIs +
+ v1.3.22: Register bottom panel tabs + +```js +app.registerExtension({ + name: 'TestExtension', + bottomPanelTabs: [ + { + id: 'TestTab', + title: 'Test Tab', + type: 'custom', + render: (el) => { + el.innerHTML = '
Custom tab
' + } + } + ] +}) +``` + +![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64) + +
+
v1.3.22: New settings API diff --git a/src/stores/extensionStore.ts b/src/stores/extensionStore.ts index dc02284f4..c7760ce0e 100644 --- a/src/stores/extensionStore.ts +++ b/src/stores/extensionStore.ts @@ -6,6 +6,7 @@ import { useCommandStore } from './commandStore' import { useSettingStore } from './settingStore' import { app } from '@/scripts/app' import { useMenuItemStore } from './menuItemStore' +import { useBottomPanelStore } from './workspace/bottomPanelStore' export const useExtensionStore = defineStore('extension', () => { // For legacy reasons, the name uniquely identifies an extension @@ -48,7 +49,7 @@ export const useExtensionStore = defineStore('extension', () => { useCommandStore().loadExtensionCommands(extension) useMenuItemStore().loadExtensionMenuCommands(extension) useSettingStore().loadExtensionSettings(extension) - + useBottomPanelStore().registerExtensionBottomPanelTabs(extension) /* * Extensions are currently stored in both extensionStore and app.extensions. * Legacy jest tests still depend on app.extensions being populated. diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts index 08acaa2ca..62a3c8575 100644 --- a/src/stores/workspace/bottomPanelStore.ts +++ b/src/stores/workspace/bottomPanelStore.ts @@ -3,6 +3,7 @@ import { defineStore } from 'pinia' import { computed, ref } from 'vue' import { useCommandStore } from '@/stores/commandStore' import { useIntegratedTerminalTab } from '@/hooks/bottomPanelTabs/integratedTerminalTab' +import { ComfyExtension } from '@/types/comfy' export const useBottomPanelStore = defineStore('bottomPanel', () => { const bottomPanelVisible = ref(false) @@ -51,6 +52,12 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { registerBottomPanelTab(useIntegratedTerminalTab()) } + const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => { + if (extension.bottomPanelTabs) { + extension.bottomPanelTabs.forEach(registerBottomPanelTab) + } + } + return { bottomPanelVisible, toggleBottomPanel, @@ -60,6 +67,7 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { setActiveTab, toggleBottomPanelTab, registerBottomPanelTab, - registerCoreBottomPanelTabs + registerCoreBottomPanelTabs, + registerExtensionBottomPanelTabs } }) diff --git a/src/types/comfy.d.ts b/src/types/comfy.d.ts index 2e3b9c46b..6f44b5f45 100644 --- a/src/types/comfy.d.ts +++ b/src/types/comfy.d.ts @@ -4,6 +4,7 @@ import type { ComfyNodeDef } from '@/types/apiTypes' import type { Keybinding } from '@/types/keyBindingTypes' import type { ComfyCommand } from '@/stores/commandStore' import { SettingParams } from './settingTypes' +import type { BottomPanelExtension } from './extensionTypes' export type Widgets = Record< string, @@ -48,6 +49,10 @@ export interface ComfyExtension { * Settings to add to the settings menu */ settings?: SettingParams[] + /** + * Bottom panel tabs to add to the bottom panel + */ + bottomPanelTabs?: BottomPanelExtension[] /** * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added * @param app The ComfyUI app instance