mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 09:00:05 +00:00
d142893244
* Add bottom panel * Bottom panel store * Extract ExtensionSlot component * Tab rendering * Add toggle button on top menu bar * nit * Add toggle button tooltip * Add command
93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<template>
|
|
<Splitter
|
|
class="splitter-overlay-root splitter-overlay"
|
|
:pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
|
|
>
|
|
<SplitterPanel
|
|
class="side-bar-panel"
|
|
:minSize="10"
|
|
:size="20"
|
|
v-show="sidebarPanelVisible"
|
|
v-if="sidebarLocation === 'left'"
|
|
>
|
|
<slot name="side-bar-panel"></slot>
|
|
</SplitterPanel>
|
|
|
|
<SplitterPanel :size="100">
|
|
<Splitter
|
|
class="splitter-overlay"
|
|
layout="vertical"
|
|
:pt:gutter="bottomPanelVisible ? '' : 'hidden'"
|
|
>
|
|
<SplitterPanel class="graph-canvas-panel relative">
|
|
<slot name="graph-canvas-panel"></slot>
|
|
</SplitterPanel>
|
|
<SplitterPanel class="bottom-panel" v-show="bottomPanelVisible">
|
|
<slot name="bottom-panel"></slot>
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
</SplitterPanel>
|
|
|
|
<SplitterPanel
|
|
class="side-bar-panel"
|
|
:minSize="10"
|
|
:size="20"
|
|
v-show="sidebarPanelVisible"
|
|
v-if="sidebarLocation === 'right'"
|
|
>
|
|
<slot name="side-bar-panel"></slot>
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSettingStore } from '@/stores/settingStore'
|
|
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
|
|
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
|
|
import Splitter from 'primevue/splitter'
|
|
import SplitterPanel from 'primevue/splitterpanel'
|
|
import { computed } from 'vue'
|
|
|
|
const settingStore = useSettingStore()
|
|
const sidebarLocation = computed<'left' | 'right'>(() =>
|
|
settingStore.get('Comfy.Sidebar.Location')
|
|
)
|
|
|
|
const sidebarPanelVisible = computed(
|
|
() => useSidebarTabStore().activeSidebarTab !== null
|
|
)
|
|
const bottomPanelVisible = computed(
|
|
() => useBottomPanelStore().bottomPanelVisible
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.p-splitter-gutter) {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.side-bar-panel {
|
|
background-color: var(--bg-color);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.bottom-panel {
|
|
background-color: var(--bg-color);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.splitter-overlay {
|
|
@apply bg-transparent pointer-events-none border-none;
|
|
}
|
|
|
|
.splitter-overlay-root {
|
|
@apply w-full h-full absolute top-0 left-0;
|
|
|
|
/* Set it the same as the ComfyUI menu */
|
|
/* Note: Lite-graph DOM widgets have the same z-index as the node id, so
|
|
999 should be sufficient to make sure splitter overlays on node's DOM
|
|
widgets */
|
|
z-index: 999;
|
|
}
|
|
</style>
|