mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-11 08:00:21 +00:00
[refactor] Improve settings domain organization (#5550)
* refactor: move settingStore to platform/settings Move src/stores/settingStore.ts to src/platform/settings/settingStore.ts to separate platform infrastructure from domain logic following DDD principles. Updates all import references across ~70 files to maintain compatibility. * fix: update remaining settingStore imports after rebase * fix: complete remaining settingStore import updates * fix: update vi.mock paths for settingStore in tests Update all test files to mock the new settingStore location at @/platform/settings/settingStore instead of @/stores/settingStore * fix: resolve remaining settingStore imports and unused imports after rebase * fix: update settingStore mock path in SelectionToolbox test Fix vi.mock path from @/stores/settingStore to @/platform/settings/settingStore to resolve failing Load3D viewer button test. * refactor: complete comprehensive settings migration to platform layer This commit completes the migration of all settings-related code to the platform layer as part of the Domain-Driven Design (DDD) architecture refactoring. - constants/coreSettings.ts → platform/settings/constants/coreSettings.ts - types/settingTypes.ts → platform/settings/types.ts - stores/settingStore.ts → platform/settings/settingStore.ts (already moved) - composables/setting/useSettingUI.ts → platform/settings/composables/useSettingUI.ts - composables/setting/useSettingSearch.ts → platform/settings/composables/useSettingSearch.ts - composables/useLitegraphSettings.ts → platform/settings/composables/useLitegraphSettings.ts - components/dialog/content/SettingDialogContent.vue → platform/settings/components/SettingDialogContent.vue - components/dialog/content/setting/SettingItem.vue → platform/settings/components/SettingItem.vue - components/dialog/content/setting/SettingGroup.vue → platform/settings/components/SettingGroup.vue - components/dialog/content/setting/SettingsPanel.vue → platform/settings/components/SettingsPanel.vue - components/dialog/content/setting/ColorPaletteMessage.vue → platform/settings/components/ColorPaletteMessage.vue - components/dialog/content/setting/ExtensionPanel.vue → platform/settings/components/ExtensionPanel.vue - components/dialog/content/setting/ServerConfigPanel.vue → platform/settings/components/ServerConfigPanel.vue - ~100+ import statements updated across the codebase - Test file imports corrected - Component imports fixed in dialog service and command menubar - Composable imports updated in GraphCanvas.vue ``` src/platform/settings/ ├── components/ # All settings UI components ├── composables/ # Settings-related composables ├── constants/ # Core settings definitions ├── types.ts # Settings type definitions └── settingStore.ts # Central settings state management ``` ✅ TypeScript compilation successful ✅ All tests passing (settings store, search functionality, UI components) ✅ Production build successful ✅ Domain boundaries properly established This migration consolidates all settings functionality into a cohesive platform domain, improving maintainability and following DDD principles for better code organization. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: format and lint after rebase conflict resolution * fix: update remaining import paths to platform settings - Fix browser test import: extensionAPI.spec.ts - Fix script import: collect-i18n-general.ts - Complete settings migration import path updates 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Byrne
61
src/platform/settings/components/ColorPaletteMessage.vue
Normal file
61
src/platform/settings/components/ColorPaletteMessage.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<Message severity="info" icon="pi pi-palette" pt:text="w-full">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
{{ $t('settingsCategories.ColorPalette') }}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<Select
|
||||
v-model="activePaletteId"
|
||||
class="w-44"
|
||||
:options="palettes"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-file-export"
|
||||
text
|
||||
:title="$t('g.export')"
|
||||
@click="colorPaletteService.exportColorPalette(activePaletteId)"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-file-import"
|
||||
text
|
||||
:title="$t('g.import')"
|
||||
@click="importCustomPalette"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
severity="danger"
|
||||
text
|
||||
:title="$t('g.delete')"
|
||||
:disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
|
||||
@click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Message>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import Button from 'primevue/button'
|
||||
import Message from 'primevue/message'
|
||||
import Select from 'primevue/select'
|
||||
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useColorPaletteService } from '@/services/colorPaletteService'
|
||||
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
const colorPaletteStore = useColorPaletteStore()
|
||||
const colorPaletteService = useColorPaletteService()
|
||||
const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
|
||||
|
||||
const importCustomPalette = async () => {
|
||||
const palette = await colorPaletteService.importColorPalette()
|
||||
if (palette) {
|
||||
await settingStore.set('Comfy.ColorPalette', palette.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
238
src/platform/settings/components/ExtensionPanel.vue
Normal file
238
src/platform/settings/components/ExtensionPanel.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<PanelTemplate value="Extension" class="extension-panel">
|
||||
<template #header>
|
||||
<SearchBox
|
||||
v-model="filters['global'].value"
|
||||
:placeholder="$t('g.searchExtensions') + '...'"
|
||||
/>
|
||||
<Message
|
||||
v-if="hasChanges"
|
||||
severity="info"
|
||||
pt:text="w-full"
|
||||
class="max-h-96 overflow-y-auto"
|
||||
>
|
||||
<ul>
|
||||
<li v-for="ext in changedExtensions" :key="ext.name">
|
||||
<span>
|
||||
{{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
|
||||
</span>
|
||||
{{ ext.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-end">
|
||||
<Button
|
||||
:label="$t('g.reloadToApplyChanges')"
|
||||
outlined
|
||||
severity="danger"
|
||||
@click="applyChanges"
|
||||
/>
|
||||
</div>
|
||||
</Message>
|
||||
</template>
|
||||
<div class="mb-3 flex gap-2">
|
||||
<SelectButton v-model="filterType" :options="filterTypes" />
|
||||
</div>
|
||||
<DataTable
|
||||
v-model:selection="selectedExtensions"
|
||||
:value="filteredExtensions"
|
||||
striped-rows
|
||||
size="small"
|
||||
:filters="filters"
|
||||
selection-mode="multiple"
|
||||
data-key="name"
|
||||
>
|
||||
<Column selection-mode="multiple" :frozen="true" style="width: 3rem" />
|
||||
<Column :header="$t('g.extensionName')" sortable field="name">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.name }}
|
||||
<Tag
|
||||
v-if="extensionStore.isCoreExtension(slotProps.data.name)"
|
||||
value="Core"
|
||||
/>
|
||||
<Tag v-else value="Custom" severity="info" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column
|
||||
:pt="{
|
||||
headerCell: 'flex items-center justify-end',
|
||||
bodyCell: 'flex items-center justify-end'
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<Button
|
||||
icon="pi pi-ellipsis-h"
|
||||
text
|
||||
severity="secondary"
|
||||
@click="menu?.show($event)"
|
||||
/>
|
||||
<ContextMenu ref="menu" :model="contextMenuItems" />
|
||||
</template>
|
||||
<template #body="slotProps">
|
||||
<ToggleSwitch
|
||||
v-model="editingEnabledExtensions[slotProps.data.name]"
|
||||
:disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
|
||||
@change="updateExtensionStatus"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</PanelTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FilterMatchMode } from '@primevue/core/api'
|
||||
import Button from 'primevue/button'
|
||||
import Column from 'primevue/column'
|
||||
import ContextMenu from 'primevue/contextmenu'
|
||||
import DataTable from 'primevue/datatable'
|
||||
import Message from 'primevue/message'
|
||||
import SelectButton from 'primevue/selectbutton'
|
||||
import Tag from 'primevue/tag'
|
||||
import ToggleSwitch from 'primevue/toggleswitch'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import SearchBox from '@/components/common/SearchBox.vue'
|
||||
import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useExtensionStore } from '@/stores/extensionStore'
|
||||
|
||||
const filterTypes = ['All', 'Core', 'Custom']
|
||||
const filterType = ref('All')
|
||||
const selectedExtensions = ref<Array<any>>([])
|
||||
|
||||
const filters = ref({
|
||||
global: { value: '', matchMode: FilterMatchMode.CONTAINS }
|
||||
})
|
||||
|
||||
const extensionStore = useExtensionStore()
|
||||
const settingStore = useSettingStore()
|
||||
|
||||
const editingEnabledExtensions = ref<Record<string, boolean>>({})
|
||||
|
||||
const filteredExtensions = computed(() => {
|
||||
const extensions = extensionStore.extensions
|
||||
switch (filterType.value) {
|
||||
case 'Core':
|
||||
return extensions.filter((ext) =>
|
||||
extensionStore.isCoreExtension(ext.name)
|
||||
)
|
||||
case 'Custom':
|
||||
return extensions.filter(
|
||||
(ext) => !extensionStore.isCoreExtension(ext.name)
|
||||
)
|
||||
default:
|
||||
return extensions
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
extensionStore.extensions.forEach((ext) => {
|
||||
editingEnabledExtensions.value[ext.name] =
|
||||
extensionStore.isExtensionEnabled(ext.name)
|
||||
})
|
||||
})
|
||||
|
||||
const changedExtensions = computed(() => {
|
||||
return extensionStore.extensions.filter(
|
||||
(ext) =>
|
||||
editingEnabledExtensions.value[ext.name] !==
|
||||
extensionStore.isExtensionEnabled(ext.name)
|
||||
)
|
||||
})
|
||||
|
||||
const hasChanges = computed(() => {
|
||||
return changedExtensions.value.length > 0
|
||||
})
|
||||
|
||||
const updateExtensionStatus = async () => {
|
||||
const editingDisabledExtensionNames = Object.entries(
|
||||
editingEnabledExtensions.value
|
||||
)
|
||||
.filter(([_, enabled]) => !enabled)
|
||||
.map(([name]) => name)
|
||||
|
||||
await settingStore.set('Comfy.Extension.Disabled', [
|
||||
...extensionStore.inactiveDisabledExtensionNames,
|
||||
...editingDisabledExtensionNames
|
||||
])
|
||||
}
|
||||
|
||||
const enableAllExtensions = async () => {
|
||||
extensionStore.extensions.forEach((ext) => {
|
||||
if (extensionStore.isExtensionReadOnly(ext.name)) return
|
||||
|
||||
editingEnabledExtensions.value[ext.name] = true
|
||||
})
|
||||
await updateExtensionStatus()
|
||||
}
|
||||
|
||||
const disableAllExtensions = async () => {
|
||||
extensionStore.extensions.forEach((ext) => {
|
||||
if (extensionStore.isExtensionReadOnly(ext.name)) return
|
||||
|
||||
editingEnabledExtensions.value[ext.name] = false
|
||||
})
|
||||
await updateExtensionStatus()
|
||||
}
|
||||
|
||||
const disableThirdPartyExtensions = async () => {
|
||||
extensionStore.extensions.forEach((ext) => {
|
||||
if (extensionStore.isCoreExtension(ext.name)) return
|
||||
|
||||
editingEnabledExtensions.value[ext.name] = false
|
||||
})
|
||||
await updateExtensionStatus()
|
||||
}
|
||||
|
||||
const applyChanges = () => {
|
||||
// Refresh the page to apply changes
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
const menu = ref<InstanceType<typeof ContextMenu>>()
|
||||
const contextMenuItems = [
|
||||
{
|
||||
label: 'Enable Selected',
|
||||
icon: 'pi pi-check',
|
||||
command: async () => {
|
||||
selectedExtensions.value.forEach((ext) => {
|
||||
if (!extensionStore.isExtensionReadOnly(ext.name)) {
|
||||
editingEnabledExtensions.value[ext.name] = true
|
||||
}
|
||||
})
|
||||
await updateExtensionStatus()
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Disable Selected',
|
||||
icon: 'pi pi-times',
|
||||
command: async () => {
|
||||
selectedExtensions.value.forEach((ext) => {
|
||||
if (!extensionStore.isExtensionReadOnly(ext.name)) {
|
||||
editingEnabledExtensions.value[ext.name] = false
|
||||
}
|
||||
})
|
||||
await updateExtensionStatus()
|
||||
}
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Enable All',
|
||||
icon: 'pi pi-check',
|
||||
command: enableAllExtensions
|
||||
},
|
||||
{
|
||||
label: 'Disable All',
|
||||
icon: 'pi pi-times',
|
||||
command: disableAllExtensions
|
||||
},
|
||||
{
|
||||
label: 'Disable 3rd Party',
|
||||
icon: 'pi pi-times',
|
||||
command: disableThirdPartyExtensions,
|
||||
disabled: !extensionStore.hasThirdPartyExtensions
|
||||
}
|
||||
]
|
||||
</script>
|
||||
126
src/platform/settings/components/ServerConfigPanel.vue
Normal file
126
src/platform/settings/components/ServerConfigPanel.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<PanelTemplate value="Server-Config" class="server-config-panel">
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Message
|
||||
v-if="modifiedConfigs.length > 0"
|
||||
severity="info"
|
||||
pt:text="w-full"
|
||||
>
|
||||
<p>
|
||||
{{ $t('serverConfig.modifiedConfigs') }}
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="config in modifiedConfigs" :key="config.id">
|
||||
{{ config.name }}: {{ config.initialValue }} → {{ config.value }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
:label="$t('serverConfig.revertChanges')"
|
||||
outlined
|
||||
@click="revertChanges"
|
||||
/>
|
||||
<Button
|
||||
:label="$t('serverConfig.restart')"
|
||||
outlined
|
||||
severity="danger"
|
||||
@click="restartApp"
|
||||
/>
|
||||
</div>
|
||||
</Message>
|
||||
<Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
|
||||
<template #icon>
|
||||
<i-lucide:terminal class="text-xl font-bold" />
|
||||
</template>
|
||||
<div class="flex items-center justify-between">
|
||||
<p>{{ commandLineArgs }}</p>
|
||||
<Button
|
||||
icon="pi pi-clipboard"
|
||||
severity="secondary"
|
||||
text
|
||||
@click="copyCommandLineArgs"
|
||||
/>
|
||||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
|
||||
:key="label"
|
||||
>
|
||||
<Divider v-if="i > 0" />
|
||||
<h3>{{ $t(`serverConfigCategories.${label}`, label) }}</h3>
|
||||
<div v-for="item in items" :key="item.name" class="mb-4">
|
||||
<FormItem
|
||||
:id="item.id"
|
||||
v-model:formValue="item.value"
|
||||
:item="translateItem(item)"
|
||||
:label-class="{
|
||||
'text-highlight': item.initialValue !== item.value
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PanelTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import Button from 'primevue/button'
|
||||
import Divider from 'primevue/divider'
|
||||
import Message from 'primevue/message'
|
||||
import { watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import FormItem from '@/components/common/FormItem.vue'
|
||||
import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
|
||||
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
|
||||
import type { ServerConfig } from '@/constants/serverConfig'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import type { FormItem as FormItemType } from '@/platform/settings/types'
|
||||
import { useServerConfigStore } from '@/stores/serverConfigStore'
|
||||
import { electronAPI } from '@/utils/envUtil'
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
const serverConfigStore = useServerConfigStore()
|
||||
const {
|
||||
serverConfigsByCategory,
|
||||
serverConfigValues,
|
||||
launchArgs,
|
||||
commandLineArgs,
|
||||
modifiedConfigs
|
||||
} = storeToRefs(serverConfigStore)
|
||||
|
||||
const revertChanges = () => {
|
||||
serverConfigStore.revertChanges()
|
||||
}
|
||||
|
||||
const restartApp = async () => {
|
||||
await electronAPI().restartApp()
|
||||
}
|
||||
|
||||
watch(launchArgs, async (newVal) => {
|
||||
await settingStore.set('Comfy.Server.LaunchArgs', newVal)
|
||||
})
|
||||
|
||||
watch(serverConfigValues, async (newVal) => {
|
||||
await settingStore.set('Comfy.Server.ServerConfigValues', newVal)
|
||||
})
|
||||
|
||||
const { copyToClipboard } = useCopyToClipboard()
|
||||
const copyCommandLineArgs = async () => {
|
||||
await copyToClipboard(commandLineArgs.value)
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const translateItem = (item: ServerConfig<any>): FormItemType => {
|
||||
return {
|
||||
...item,
|
||||
name: t(`serverConfigItems.${item.id}.name`, item.name),
|
||||
tooltip: item.tooltip
|
||||
? t(`serverConfigItems.${item.id}.tooltip`, item.tooltip)
|
||||
: undefined
|
||||
}
|
||||
}
|
||||
</script>
|
||||
189
src/platform/settings/components/SettingDialogContent.vue
Normal file
189
src/platform/settings/components/SettingDialogContent.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="settings-container">
|
||||
<ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
|
||||
<SearchBox
|
||||
v-model:modelValue="searchQuery"
|
||||
class="settings-search-box w-full mb-2"
|
||||
:placeholder="$t('g.searchSettings') + '...'"
|
||||
:debounce-time="128"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<Listbox
|
||||
v-model="activeCategory"
|
||||
:options="groupedMenuTreeNodes"
|
||||
option-label="translatedLabel"
|
||||
option-group-label="label"
|
||||
option-group-children="children"
|
||||
scroll-height="100%"
|
||||
:option-disabled="
|
||||
(option: SettingTreeNode) =>
|
||||
!queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
|
||||
"
|
||||
class="border-none w-full"
|
||||
>
|
||||
<template #optiongroup>
|
||||
<Divider class="my-0" />
|
||||
</template>
|
||||
</Listbox>
|
||||
</ScrollPanel>
|
||||
<Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
|
||||
<Divider layout="horizontal" class="flex md:hidden" />
|
||||
<Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
|
||||
<TabPanels class="settings-tab-panels h-full w-full pr-0">
|
||||
<PanelTemplate value="Search Results">
|
||||
<SettingsPanel :setting-groups="searchResults" />
|
||||
</PanelTemplate>
|
||||
|
||||
<PanelTemplate
|
||||
v-for="category in settingCategories"
|
||||
:key="category.key"
|
||||
:value="category.label ?? ''"
|
||||
>
|
||||
<template #header>
|
||||
<CurrentUserMessage v-if="tabValue === 'Comfy'" />
|
||||
<ColorPaletteMessage v-if="tabValue === 'Appearance'" />
|
||||
</template>
|
||||
<SettingsPanel :setting-groups="sortedGroups(category)" />
|
||||
</PanelTemplate>
|
||||
|
||||
<Suspense v-for="panel in panels" :key="panel.node.key">
|
||||
<component :is="panel.component" />
|
||||
<template #fallback>
|
||||
<div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
|
||||
</template>
|
||||
</Suspense>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Divider from 'primevue/divider'
|
||||
import Listbox from 'primevue/listbox'
|
||||
import ScrollPanel from 'primevue/scrollpanel'
|
||||
import TabPanels from 'primevue/tabpanels'
|
||||
import Tabs from 'primevue/tabs'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
import SearchBox from '@/components/common/SearchBox.vue'
|
||||
import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
|
||||
import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
|
||||
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
|
||||
import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
|
||||
import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
|
||||
import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
|
||||
import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
|
||||
import { SettingTreeNode } from '@/platform/settings/settingStore'
|
||||
import { ISettingGroup, SettingParams } from '@/platform/settings/types'
|
||||
import { flattenTree } from '@/utils/treeUtil'
|
||||
|
||||
const { defaultPanel } = defineProps<{
|
||||
defaultPanel?:
|
||||
| 'about'
|
||||
| 'keybinding'
|
||||
| 'extension'
|
||||
| 'server-config'
|
||||
| 'user'
|
||||
| 'credits'
|
||||
}>()
|
||||
|
||||
const {
|
||||
activeCategory,
|
||||
defaultCategory,
|
||||
settingCategories,
|
||||
groupedMenuTreeNodes,
|
||||
panels
|
||||
} = useSettingUI(defaultPanel)
|
||||
|
||||
const {
|
||||
searchQuery,
|
||||
searchResultsCategories,
|
||||
queryIsEmpty,
|
||||
inSearch,
|
||||
handleSearch: handleSearchBase,
|
||||
getSearchResults
|
||||
} = useSettingSearch()
|
||||
|
||||
const authActions = useFirebaseAuthActions()
|
||||
|
||||
// Sort groups for a category
|
||||
const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
|
||||
return [...(category.children ?? [])]
|
||||
.sort((a, b) => a.label.localeCompare(b.label))
|
||||
.map((group) => ({
|
||||
label: group.label,
|
||||
settings: flattenTree<SettingParams>(group).sort((a, b) => {
|
||||
const sortOrderA = a.sortOrder ?? 0
|
||||
const sortOrderB = b.sortOrder ?? 0
|
||||
|
||||
return sortOrderB - sortOrderA
|
||||
})
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSearch = (query: string) => {
|
||||
handleSearchBase(query.trim())
|
||||
activeCategory.value = query ? null : defaultCategory.value
|
||||
}
|
||||
|
||||
// Get search results
|
||||
const searchResults = computed<ISettingGroup[]>(() =>
|
||||
getSearchResults(activeCategory.value)
|
||||
)
|
||||
|
||||
const tabValue = computed<string>(() =>
|
||||
inSearch.value ? 'Search Results' : activeCategory.value?.label ?? ''
|
||||
)
|
||||
|
||||
// Don't allow null category to be set outside of search.
|
||||
// In search mode, the active category can be null to show all search results.
|
||||
watch(activeCategory, (_, oldValue) => {
|
||||
if (!tabValue.value) {
|
||||
activeCategory.value = oldValue
|
||||
}
|
||||
if (activeCategory.value?.key === 'credits') {
|
||||
void authActions.fetchBalance()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.settings-tab-panels {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.settings-container {
|
||||
display: flex;
|
||||
height: 70vh;
|
||||
width: 60vw;
|
||||
max-width: 64rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the first group separator */
|
||||
.settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
33
src/platform/settings/components/SettingGroup.vue
Normal file
33
src/platform/settings/components/SettingGroup.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="setting-group">
|
||||
<Divider v-if="divider" />
|
||||
<h3>
|
||||
{{
|
||||
$t(`settingsCategories.${normalizeI18nKey(group.label)}`, group.label)
|
||||
}}
|
||||
</h3>
|
||||
<div
|
||||
v-for="setting in group.settings.filter((s) => !s.deprecated)"
|
||||
:key="setting.id"
|
||||
class="setting-item mb-4"
|
||||
>
|
||||
<SettingItem :setting="setting" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Divider from 'primevue/divider'
|
||||
|
||||
import SettingItem from '@/platform/settings/components/SettingItem.vue'
|
||||
import { SettingParams } from '@/platform/settings/types'
|
||||
import { normalizeI18nKey } from '@/utils/formatUtil'
|
||||
|
||||
defineProps<{
|
||||
group: {
|
||||
label: string
|
||||
settings: SettingParams[]
|
||||
}
|
||||
divider?: boolean
|
||||
}>()
|
||||
</script>
|
||||
81
src/platform/settings/components/SettingItem.vue
Normal file
81
src/platform/settings/components/SettingItem.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<FormItem
|
||||
:id="setting.id"
|
||||
:item="formItem"
|
||||
:form-value="settingValue"
|
||||
@update:form-value="updateSettingValue"
|
||||
>
|
||||
<template #name-prefix>
|
||||
<Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />
|
||||
<Tag
|
||||
v-if="setting.experimental"
|
||||
v-tooltip="{
|
||||
value: $t('g.experimental'),
|
||||
showDelay: 600
|
||||
}"
|
||||
>
|
||||
<template #icon>
|
||||
<i-material-symbols:experiment-outline />
|
||||
</template>
|
||||
</Tag>
|
||||
</template>
|
||||
</FormItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tag from 'primevue/tag'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import FormItem from '@/components/common/FormItem.vue'
|
||||
import { st } from '@/i18n'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import type { SettingOption, SettingParams } from '@/platform/settings/types'
|
||||
import { normalizeI18nKey } from '@/utils/formatUtil'
|
||||
|
||||
const props = defineProps<{
|
||||
setting: SettingParams
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
function translateOptions(options: (SettingOption | string)[]) {
|
||||
if (typeof options === 'function') {
|
||||
// @ts-expect-error: Audit and deprecate usage of legacy options type:
|
||||
// (value) => [string | {text: string, value: string}]
|
||||
return translateOptions(options(props.setting.value ?? ''))
|
||||
}
|
||||
|
||||
return options.map((option) => {
|
||||
const optionLabel = typeof option === 'string' ? option : option.text
|
||||
const optionValue = typeof option === 'string' ? option : option.value
|
||||
|
||||
return {
|
||||
text: t(
|
||||
`settings.${normalizeI18nKey(props.setting.id)}.options.${normalizeI18nKey(optionLabel)}`,
|
||||
optionLabel
|
||||
),
|
||||
value: optionValue
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const formItem = computed(() => {
|
||||
const normalizedId = normalizeI18nKey(props.setting.id)
|
||||
return {
|
||||
...props.setting,
|
||||
name: t(`settings.${normalizedId}.name`, props.setting.name),
|
||||
tooltip: props.setting.tooltip
|
||||
? st(`settings.${normalizedId}.tooltip`, props.setting.tooltip)
|
||||
: undefined,
|
||||
options: props.setting.options
|
||||
? translateOptions(props.setting.options)
|
||||
: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
const settingValue = computed(() => settingStore.get(props.setting.id))
|
||||
const updateSettingValue = async (value: any) => {
|
||||
await settingStore.set(props.setting.id, value)
|
||||
}
|
||||
</script>
|
||||
26
src/platform/settings/components/SettingsPanel.vue
Normal file
26
src/platform/settings/components/SettingsPanel.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div v-if="props.settingGroups.length > 0">
|
||||
<SettingGroup
|
||||
v-for="(group, i) in props.settingGroups"
|
||||
:key="group.label"
|
||||
:divider="i !== 0"
|
||||
:group="group"
|
||||
/>
|
||||
</div>
|
||||
<NoResultsPlaceholder
|
||||
v-else
|
||||
icon="pi pi-search"
|
||||
:title="$t('g.noResultsFound')"
|
||||
:message="$t('g.searchFailedMessage')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
|
||||
import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
|
||||
import { ISettingGroup } from '@/platform/settings/types'
|
||||
|
||||
const props = defineProps<{
|
||||
settingGroups: ISettingGroup[]
|
||||
}>()
|
||||
</script>
|
||||
144
src/platform/settings/composables/useLitegraphSettings.ts
Normal file
144
src/platform/settings/composables/useLitegraphSettings.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { watchEffect } from 'vue'
|
||||
|
||||
import {
|
||||
CanvasPointer,
|
||||
LGraphNode,
|
||||
LiteGraph
|
||||
} from '@/lib/litegraph/src/litegraph'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
|
||||
/**
|
||||
* Watch for changes in the setting store and update the LiteGraph settings accordingly.
|
||||
*/
|
||||
export const useLitegraphSettings = () => {
|
||||
const settingStore = useSettingStore()
|
||||
const canvasStore = useCanvasStore()
|
||||
|
||||
watchEffect(() => {
|
||||
const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
|
||||
if (canvasStore.canvas) {
|
||||
canvasStore.canvas.show_info = canvasInfoEnabled
|
||||
canvasStore.canvas.draw(false, true)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const zoomSpeed = settingStore.get('Comfy.Graph.ZoomSpeed')
|
||||
if (canvasStore.canvas) {
|
||||
canvasStore.canvas.zoom_speed = zoomSpeed
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.snaps_for_comfy = settingStore.get(
|
||||
'Comfy.Node.AutoSnapLinkToSlot'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.snap_highlights_node = settingStore.get(
|
||||
'Comfy.Node.SnapHighlightsNode'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LGraphNode.keepAllLinksOnBypass = settingStore.get(
|
||||
'Comfy.Node.BypassAllLinksOnDelete'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.middle_click_slot_add_default_node = settingStore.get(
|
||||
'Comfy.Node.MiddleClickRerouteNode'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const linkRenderMode = settingStore.get('Comfy.LinkRenderMode')
|
||||
if (canvasStore.canvas) {
|
||||
canvasStore.canvas.links_render_mode = linkRenderMode
|
||||
canvasStore.canvas.setDirty(/* fg */ false, /* bg */ true)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const minFontSizeForLOD = settingStore.get(
|
||||
'LiteGraph.Canvas.MinFontSizeForLOD'
|
||||
)
|
||||
if (canvasStore.canvas) {
|
||||
canvasStore.canvas.min_font_size_for_lod = minFontSizeForLOD
|
||||
canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
|
||||
const { canvas } = canvasStore
|
||||
if (canvas) {
|
||||
canvas.linkMarkerShape = linkMarkerShape
|
||||
canvas.setDirty(false, true)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
|
||||
const { canvas } = canvasStore
|
||||
if (canvas) canvas.maximumFps = maximumFps
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
|
||||
const { canvas } = canvasStore
|
||||
if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
CanvasPointer.doubleClickTime = settingStore.get(
|
||||
'Comfy.Pointer.DoubleClickTime'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.context_menu_scaling = settingStore.get(
|
||||
'LiteGraph.ContextMenu.Scaling'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.Reroute.maxSplineOffset = settingStore.get(
|
||||
'LiteGraph.Reroute.SplineOffset'
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode') as
|
||||
| 'standard'
|
||||
| 'legacy'
|
||||
|
||||
LiteGraph.canvasNavigationMode = navigationMode
|
||||
LiteGraph.macTrackpadGestures = navigationMode === 'standard'
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
LiteGraph.saveViewportWithGraph = settingStore.get(
|
||||
'Comfy.EnableWorkflowViewRestore'
|
||||
)
|
||||
})
|
||||
}
|
||||
127
src/platform/settings/composables/useSettingSearch.ts
Normal file
127
src/platform/settings/composables/useSettingSearch.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import { st } from '@/i18n'
|
||||
import {
|
||||
SettingTreeNode,
|
||||
getSettingInfo,
|
||||
useSettingStore
|
||||
} from '@/platform/settings/settingStore'
|
||||
import { ISettingGroup, SettingParams } from '@/platform/settings/types'
|
||||
import { normalizeI18nKey } from '@/utils/formatUtil'
|
||||
|
||||
export function useSettingSearch() {
|
||||
const settingStore = useSettingStore()
|
||||
|
||||
const searchQuery = ref<string>('')
|
||||
const filteredSettingIds = ref<string[]>([])
|
||||
const searchInProgress = ref<boolean>(false)
|
||||
|
||||
watch(searchQuery, () => (searchInProgress.value = true))
|
||||
|
||||
/**
|
||||
* Settings categories that contains at least one setting in search results.
|
||||
*/
|
||||
const searchResultsCategories = computed<Set<string>>(() => {
|
||||
return new Set(
|
||||
filteredSettingIds.value.map(
|
||||
(id) => getSettingInfo(settingStore.settingsById[id]).category
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
/**
|
||||
* Check if the search query is empty
|
||||
*/
|
||||
const queryIsEmpty = computed(() => searchQuery.value.length === 0)
|
||||
|
||||
/**
|
||||
* Check if we're in search mode
|
||||
*/
|
||||
const inSearch = computed(
|
||||
() => !queryIsEmpty.value && !searchInProgress.value
|
||||
)
|
||||
|
||||
/**
|
||||
* Handle search functionality
|
||||
*/
|
||||
const handleSearch = (query: string) => {
|
||||
if (!query) {
|
||||
filteredSettingIds.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const queryLower = query.toLocaleLowerCase()
|
||||
const allSettings = Object.values(settingStore.settingsById)
|
||||
const filteredSettings = allSettings.filter((setting) => {
|
||||
// Filter out hidden and deprecated settings, just like in normal settings tree
|
||||
if (setting.type === 'hidden' || setting.deprecated) {
|
||||
return false
|
||||
}
|
||||
|
||||
const idLower = setting.id.toLowerCase()
|
||||
const nameLower = setting.name.toLowerCase()
|
||||
const translatedName = st(
|
||||
`settings.${normalizeI18nKey(setting.id)}.name`,
|
||||
setting.name
|
||||
).toLocaleLowerCase()
|
||||
const info = getSettingInfo(setting)
|
||||
const translatedCategory = st(
|
||||
`settingsCategories.${normalizeI18nKey(info.category)}`,
|
||||
info.category
|
||||
).toLocaleLowerCase()
|
||||
const translatedSubCategory = st(
|
||||
`settingsCategories.${normalizeI18nKey(info.subCategory)}`,
|
||||
info.subCategory
|
||||
).toLocaleLowerCase()
|
||||
|
||||
return (
|
||||
idLower.includes(queryLower) ||
|
||||
nameLower.includes(queryLower) ||
|
||||
translatedName.includes(queryLower) ||
|
||||
translatedCategory.includes(queryLower) ||
|
||||
translatedSubCategory.includes(queryLower)
|
||||
)
|
||||
})
|
||||
|
||||
filteredSettingIds.value = filteredSettings.map((x) => x.id)
|
||||
searchInProgress.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Get search results grouped by category
|
||||
*/
|
||||
const getSearchResults = (
|
||||
activeCategory: SettingTreeNode | null
|
||||
): ISettingGroup[] => {
|
||||
const groupedSettings: { [key: string]: SettingParams[] } = {}
|
||||
|
||||
filteredSettingIds.value.forEach((id) => {
|
||||
const setting = settingStore.settingsById[id]
|
||||
const info = getSettingInfo(setting)
|
||||
const groupLabel = info.subCategory
|
||||
|
||||
if (activeCategory === null || activeCategory.label === info.category) {
|
||||
if (!groupedSettings[groupLabel]) {
|
||||
groupedSettings[groupLabel] = []
|
||||
}
|
||||
groupedSettings[groupLabel].push(setting)
|
||||
}
|
||||
})
|
||||
|
||||
return Object.entries(groupedSettings).map(([label, settings]) => ({
|
||||
label,
|
||||
settings
|
||||
}))
|
||||
}
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
filteredSettingIds,
|
||||
searchInProgress,
|
||||
searchResultsCategories,
|
||||
queryIsEmpty,
|
||||
inSearch,
|
||||
handleSearch,
|
||||
getSearchResults
|
||||
}
|
||||
}
|
||||
204
src/platform/settings/composables/useSettingUI.ts
Normal file
204
src/platform/settings/composables/useSettingUI.ts
Normal file
@@ -0,0 +1,204 @@
|
||||
import {
|
||||
type Component,
|
||||
computed,
|
||||
defineAsyncComponent,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
||||
import {
|
||||
SettingTreeNode,
|
||||
useSettingStore
|
||||
} from '@/platform/settings/settingStore'
|
||||
import type { SettingParams } from '@/platform/settings/types'
|
||||
import { isElectron } from '@/utils/envUtil'
|
||||
import { normalizeI18nKey } from '@/utils/formatUtil'
|
||||
import { buildTree } from '@/utils/treeUtil'
|
||||
|
||||
interface SettingPanelItem {
|
||||
node: SettingTreeNode
|
||||
component: Component
|
||||
}
|
||||
|
||||
export function useSettingUI(
|
||||
defaultPanel?:
|
||||
| 'about'
|
||||
| 'keybinding'
|
||||
| 'extension'
|
||||
| 'server-config'
|
||||
| 'user'
|
||||
| 'credits'
|
||||
) {
|
||||
const { t } = useI18n()
|
||||
const { isLoggedIn } = useCurrentUser()
|
||||
const settingStore = useSettingStore()
|
||||
const activeCategory = ref<SettingTreeNode | null>(null)
|
||||
|
||||
const settingRoot = computed<SettingTreeNode>(() => {
|
||||
const root = buildTree(
|
||||
Object.values(settingStore.settingsById).filter(
|
||||
(setting: SettingParams) => setting.type !== 'hidden'
|
||||
),
|
||||
(setting: SettingParams) => setting.category || setting.id.split('.')
|
||||
)
|
||||
|
||||
const floatingSettings = (root.children ?? []).filter((node) => node.leaf)
|
||||
if (floatingSettings.length) {
|
||||
root.children = (root.children ?? []).filter((node) => !node.leaf)
|
||||
root.children.push({
|
||||
key: 'Other',
|
||||
label: 'Other',
|
||||
leaf: false,
|
||||
children: floatingSettings
|
||||
})
|
||||
}
|
||||
|
||||
return root
|
||||
})
|
||||
|
||||
const settingCategories = computed<SettingTreeNode[]>(
|
||||
() => settingRoot.value.children ?? []
|
||||
)
|
||||
|
||||
// Define panel items
|
||||
const aboutPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'about',
|
||||
label: 'About',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/AboutPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const creditsPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'credits',
|
||||
label: 'Credits',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/CreditsPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const userPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'user',
|
||||
label: 'User',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/UserPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const keybindingPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'keybinding',
|
||||
label: 'Keybinding',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/KeybindingPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const extensionPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'extension',
|
||||
label: 'Extension',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/platform/settings/components/ExtensionPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const serverConfigPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'server-config',
|
||||
label: 'Server-Config',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/platform/settings/components/ServerConfigPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const panels = computed<SettingPanelItem[]>(() =>
|
||||
[
|
||||
aboutPanel,
|
||||
creditsPanel,
|
||||
userPanel,
|
||||
keybindingPanel,
|
||||
extensionPanel,
|
||||
...(isElectron() ? [serverConfigPanel] : [])
|
||||
].filter((panel) => panel.component)
|
||||
)
|
||||
|
||||
/**
|
||||
* The default category to show when the dialog is opened.
|
||||
*/
|
||||
const defaultCategory = computed<SettingTreeNode>(() => {
|
||||
if (!defaultPanel) return settingCategories.value[0]
|
||||
// Search through all groups in groupedMenuTreeNodes
|
||||
for (const group of groupedMenuTreeNodes.value) {
|
||||
const found = group.children?.find((node) => node.key === defaultPanel)
|
||||
if (found) return found
|
||||
}
|
||||
return settingCategories.value[0]
|
||||
})
|
||||
|
||||
const translateCategory = (node: SettingTreeNode) => ({
|
||||
...node,
|
||||
translatedLabel: t(
|
||||
`settingsCategories.${normalizeI18nKey(node.label)}`,
|
||||
node.label
|
||||
)
|
||||
})
|
||||
|
||||
const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
|
||||
// Account settings - only show credits when user is authenticated
|
||||
{
|
||||
key: 'account',
|
||||
label: 'Account',
|
||||
children: [
|
||||
userPanel.node,
|
||||
...(isLoggedIn.value ? [creditsPanel.node] : [])
|
||||
].map(translateCategory)
|
||||
},
|
||||
// Normal settings stored in the settingStore
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Application Settings',
|
||||
children: settingCategories.value.map(translateCategory)
|
||||
},
|
||||
// Special settings such as about, keybinding, extension, server-config
|
||||
{
|
||||
key: 'specialSettings',
|
||||
label: 'Special Settings',
|
||||
children: [
|
||||
keybindingPanel.node,
|
||||
extensionPanel.node,
|
||||
aboutPanel.node,
|
||||
...(isElectron() ? [serverConfigPanel.node] : [])
|
||||
].map(translateCategory)
|
||||
}
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
activeCategory.value = defaultCategory.value
|
||||
})
|
||||
|
||||
return {
|
||||
panels,
|
||||
activeCategory,
|
||||
defaultCategory,
|
||||
groupedMenuTreeNodes,
|
||||
settingCategories
|
||||
}
|
||||
}
|
||||
984
src/platform/settings/constants/coreSettings.ts
Normal file
984
src/platform/settings/constants/coreSettings.ts
Normal file
@@ -0,0 +1,984 @@
|
||||
import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
|
||||
import type { SettingParams } from '@/platform/settings/types'
|
||||
import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
|
||||
import type { Keybinding } from '@/schemas/keyBindingSchema'
|
||||
import { NodeBadgeMode } from '@/types/nodeSource'
|
||||
import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
|
||||
|
||||
/**
|
||||
* Core settings are essential configuration parameters required for ComfyUI's basic functionality.
|
||||
* These settings must be present in the settings store and cannot be omitted.
|
||||
*
|
||||
* IMPORTANT: To prevent ID conflicts, settings should be marked as deprecated rather than removed
|
||||
* when they are no longer needed.
|
||||
*/
|
||||
export const CORE_SETTINGS: SettingParams[] = [
|
||||
{
|
||||
id: 'Comfy.Memory.AllowManualUnload',
|
||||
name: 'Allow manual unload of models and execution cache via user command',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.18.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Validation.Workflows',
|
||||
name: 'Validate workflows',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeSearchBoxImpl',
|
||||
category: ['Comfy', 'Node Search Box', 'Implementation'],
|
||||
experimental: true,
|
||||
name: 'Node search box implementation',
|
||||
type: 'combo',
|
||||
options: ['default', 'litegraph (legacy)'],
|
||||
defaultValue: 'default'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.LinkRelease.Action',
|
||||
category: ['LiteGraph', 'LinkRelease', 'Action'],
|
||||
name: 'Action on link release (No modifier)',
|
||||
type: 'combo',
|
||||
options: Object.values(LinkReleaseTriggerAction),
|
||||
defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
|
||||
defaultsByInstallVersion: {
|
||||
'1.24.1': LinkReleaseTriggerAction.SEARCH_BOX
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.LinkRelease.ActionShift',
|
||||
category: ['LiteGraph', 'LinkRelease', 'ActionShift'],
|
||||
name: 'Action on link release (Shift)',
|
||||
type: 'combo',
|
||||
options: Object.values(LinkReleaseTriggerAction),
|
||||
defaultValue: LinkReleaseTriggerAction.SEARCH_BOX,
|
||||
defaultsByInstallVersion: {
|
||||
'1.24.1': LinkReleaseTriggerAction.CONTEXT_MENU
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeSearchBoxImpl.NodePreview',
|
||||
category: ['Comfy', 'Node Search Box', 'NodePreview'],
|
||||
name: 'Node preview',
|
||||
tooltip: 'Only applies to the default implementation',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeSearchBoxImpl.ShowCategory',
|
||||
category: ['Comfy', 'Node Search Box', 'ShowCategory'],
|
||||
name: 'Show node category in search results',
|
||||
tooltip: 'Only applies to the default implementation',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeSearchBoxImpl.ShowIdName',
|
||||
category: ['Comfy', 'Node Search Box', 'ShowIdName'],
|
||||
name: 'Show node id name in search results',
|
||||
tooltip: 'Only applies to the default implementation',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeSearchBoxImpl.ShowNodeFrequency',
|
||||
category: ['Comfy', 'Node Search Box', 'ShowNodeFrequency'],
|
||||
name: 'Show node frequency in search results',
|
||||
tooltip: 'Only applies to the default implementation',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Sidebar.Location',
|
||||
category: ['Appearance', 'Sidebar', 'Location'],
|
||||
name: 'Sidebar location',
|
||||
type: 'combo',
|
||||
options: ['left', 'right'],
|
||||
defaultValue: 'left'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Sidebar.Size',
|
||||
category: ['Appearance', 'Sidebar', 'Size'],
|
||||
name: 'Sidebar size',
|
||||
type: 'combo',
|
||||
options: ['normal', 'small'],
|
||||
// Default to small if the window is less than 1536px(2xl) wide.
|
||||
defaultValue: () => (window.innerWidth < 1536 ? 'small' : 'normal')
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Sidebar.UnifiedWidth',
|
||||
category: ['Appearance', 'Sidebar', 'UnifiedWidth'],
|
||||
name: 'Unified sidebar width',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.18.1'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.TextareaWidget.FontSize',
|
||||
category: ['Appearance', 'Node Widget', 'TextareaWidget', 'FontSize'],
|
||||
name: 'Textarea widget font size',
|
||||
type: 'slider',
|
||||
defaultValue: 10,
|
||||
attrs: {
|
||||
min: 8,
|
||||
max: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.TextareaWidget.Spellcheck',
|
||||
category: ['Comfy', 'Node Widget', 'TextareaWidget', 'Spellcheck'],
|
||||
name: 'Textarea widget spellcheck',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.SortNodeIdOnSave',
|
||||
name: 'Sort node IDs when saving workflow',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Graph.CanvasInfo',
|
||||
category: ['LiteGraph', 'Canvas', 'CanvasInfo'],
|
||||
name: 'Show canvas info on bottom left corner (fps, etc.)',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.ShowDeprecated',
|
||||
name: 'Show deprecated nodes in search',
|
||||
tooltip:
|
||||
'Deprecated nodes are hidden by default in the UI, but remain functional in existing workflows that use them.',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.ShowExperimental',
|
||||
name: 'Show experimental nodes in search',
|
||||
tooltip:
|
||||
'Experimental nodes are marked as such in the UI and may be subject to significant changes or removal in future versions. Use with caution in production workflows',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.Opacity',
|
||||
category: ['Appearance', 'Node', 'Opacity'],
|
||||
name: 'Node opacity',
|
||||
type: 'slider',
|
||||
defaultValue: 1,
|
||||
attrs: {
|
||||
min: 0.01,
|
||||
max: 1,
|
||||
step: 0.01
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.ShowMissingNodesWarning',
|
||||
name: 'Show missing nodes warning',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.ShowMissingModelsWarning',
|
||||
name: 'Show missing models warning',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
experimental: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.WarnBlueprintOverwrite',
|
||||
name: 'Require confirmation to overwrite an existing subgraph blueprint',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Graph.ZoomSpeed',
|
||||
category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],
|
||||
name: 'Canvas zoom speed',
|
||||
type: 'slider',
|
||||
defaultValue: 1.1,
|
||||
attrs: {
|
||||
min: 1.01,
|
||||
max: 2.5,
|
||||
step: 0.01
|
||||
}
|
||||
},
|
||||
// Bookmarks are stored in the settings store.
|
||||
// Bookmarks are in format of category/display_name. e.g. "conditioning/CLIPTextEncode"
|
||||
{
|
||||
id: 'Comfy.NodeLibrary.Bookmarks',
|
||||
name: 'Node library bookmarks with display name (deprecated)',
|
||||
type: 'hidden',
|
||||
defaultValue: [],
|
||||
deprecated: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeLibrary.Bookmarks.V2',
|
||||
name: 'Node library bookmarks v2 with unique name',
|
||||
type: 'hidden',
|
||||
defaultValue: []
|
||||
},
|
||||
// Stores mapping from bookmark folder name to its customization.
|
||||
{
|
||||
id: 'Comfy.NodeLibrary.BookmarksCustomization',
|
||||
name: 'Node library bookmarks customization',
|
||||
type: 'hidden',
|
||||
defaultValue: {}
|
||||
},
|
||||
// Hidden setting used by the queue for how to fit images
|
||||
{
|
||||
id: 'Comfy.Queue.ImageFit',
|
||||
name: 'Queue image fit',
|
||||
type: 'hidden',
|
||||
defaultValue: 'cover'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.GroupSelectedNodes.Padding',
|
||||
category: ['LiteGraph', 'Group', 'Padding'],
|
||||
name: 'Group selected nodes padding',
|
||||
type: 'slider',
|
||||
defaultValue: 10,
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.DoubleClickTitleToEdit',
|
||||
category: ['LiteGraph', 'Node', 'DoubleClickTitleToEdit'],
|
||||
name: 'Double click node title to edit',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.AllowImageSizeDraw',
|
||||
category: ['LiteGraph', 'Node Widget', 'AllowImageSizeDraw'],
|
||||
name: 'Show width × height below the image preview',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Group.DoubleClickTitleToEdit',
|
||||
category: ['LiteGraph', 'Group', 'DoubleClickTitleToEdit'],
|
||||
name: 'Double click group title to edit',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Window.UnloadConfirmation',
|
||||
name: 'Show confirmation when closing window',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionModified: '1.7.12'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.TreeExplorer.ItemPadding',
|
||||
category: ['Appearance', 'Tree Explorer', 'ItemPadding'],
|
||||
name: 'Tree explorer item padding',
|
||||
type: 'slider',
|
||||
defaultValue: 2,
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 8,
|
||||
step: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.ModelLibrary.AutoLoadAll',
|
||||
name: 'Automatically load all model folders',
|
||||
tooltip:
|
||||
'If true, all folders will load as soon as you open the model library (this may cause delays while it loads). If false, root level model folders will only load once you click on them.',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.ModelLibrary.NameFormat',
|
||||
name: 'What name to display in the model library tree view',
|
||||
tooltip:
|
||||
'Select "filename" to render a simplified view of the raw filename (without directory or ".safetensors" extension) in the model list. Select "title" to display the configurable model metadata title.',
|
||||
type: 'combo',
|
||||
options: ['filename', 'title'],
|
||||
defaultValue: 'title'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Locale',
|
||||
name: 'Language',
|
||||
type: 'combo',
|
||||
options: [
|
||||
{ value: 'en', text: 'English' },
|
||||
{ value: 'zh', text: '中文' },
|
||||
{ value: 'zh-TW', text: '繁體中文' },
|
||||
{ value: 'ru', text: 'Русский' },
|
||||
{ value: 'ja', text: '日本語' },
|
||||
{ value: 'ko', text: '한국어' },
|
||||
{ value: 'fr', text: 'Français' },
|
||||
{ value: 'es', text: 'Español' },
|
||||
{ value: 'ar', text: 'عربي' }
|
||||
],
|
||||
defaultValue: () => navigator.language.split('-')[0] || 'en'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeBadge.NodeSourceBadgeMode',
|
||||
category: ['LiteGraph', 'Node', 'NodeSourceBadgeMode'],
|
||||
name: 'Node source badge mode',
|
||||
type: 'combo',
|
||||
options: Object.values(NodeBadgeMode),
|
||||
defaultValue: NodeBadgeMode.HideBuiltIn
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeBadge.NodeIdBadgeMode',
|
||||
category: ['LiteGraph', 'Node', 'NodeIdBadgeMode'],
|
||||
name: 'Node ID badge mode',
|
||||
type: 'combo',
|
||||
options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
|
||||
defaultValue: NodeBadgeMode.None
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeBadge.NodeLifeCycleBadgeMode',
|
||||
category: ['LiteGraph', 'Node', 'NodeLifeCycleBadgeMode'],
|
||||
name: 'Node life cycle badge mode',
|
||||
type: 'combo',
|
||||
options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
|
||||
defaultValue: NodeBadgeMode.ShowAll
|
||||
},
|
||||
{
|
||||
id: 'Comfy.NodeBadge.ShowApiPricing',
|
||||
category: ['Comfy', 'API Nodes'],
|
||||
name: 'Show API node pricing badge',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.20.3'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Notification.ShowVersionUpdates',
|
||||
category: ['Comfy', 'Notification Preferences'],
|
||||
name: 'Show version updates',
|
||||
tooltip: 'Show updates for new models, and major new features.',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.ConfirmClear',
|
||||
category: ['Comfy', 'Workflow', 'ConfirmClear'],
|
||||
name: 'Require confirmation when clearing workflow',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.PromptFilename',
|
||||
category: ['Comfy', 'Workflow', 'PromptFilename'],
|
||||
name: 'Prompt for filename when saving workflow',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
/**
|
||||
* file format for preview
|
||||
*
|
||||
* format;quality
|
||||
*
|
||||
* ex)
|
||||
* webp;50 -> webp, quality 50
|
||||
* jpeg;80 -> rgb, jpeg, quality 80
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
{
|
||||
id: 'Comfy.PreviewFormat',
|
||||
category: ['LiteGraph', 'Node Widget', 'PreviewFormat'],
|
||||
name: 'Preview image format',
|
||||
tooltip:
|
||||
'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
|
||||
type: 'text',
|
||||
defaultValue: ''
|
||||
},
|
||||
{
|
||||
id: 'Comfy.DisableSliders',
|
||||
category: ['LiteGraph', 'Node Widget', 'DisableSliders'],
|
||||
name: 'Disable node widget sliders',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.DisableFloatRounding',
|
||||
category: ['LiteGraph', 'Node Widget', 'DisableFloatRounding'],
|
||||
name: 'Disable default float widget rounding.',
|
||||
tooltip:
|
||||
'(requires page reload) Cannot disable round when round is set by the node in the backend.',
|
||||
type: 'boolean',
|
||||
defaultValue: false
|
||||
},
|
||||
{
|
||||
id: 'Comfy.FloatRoundingPrecision',
|
||||
category: ['LiteGraph', 'Node Widget', 'FloatRoundingPrecision'],
|
||||
name: 'Float widget rounding decimal places [0 = auto].',
|
||||
tooltip: '(requires page reload)',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 6,
|
||||
step: 1
|
||||
},
|
||||
defaultValue: 0
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.Node.TooltipDelay',
|
||||
name: 'Tooltip Delay',
|
||||
type: 'number',
|
||||
attrs: {
|
||||
min: 100,
|
||||
max: 3000,
|
||||
step: 50
|
||||
},
|
||||
defaultValue: 500,
|
||||
versionAdded: '1.9.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.EnableTooltips',
|
||||
category: ['LiteGraph', 'Node', 'EnableTooltips'],
|
||||
name: 'Enable Tooltips',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.DevMode',
|
||||
name: 'Enable dev mode options (API save, etc.)',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
onChange: (value) => {
|
||||
const element = document.getElementById('comfy-dev-save-api-button')
|
||||
if (element) {
|
||||
element.style.display = value ? 'flex' : 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.UseNewMenu',
|
||||
category: ['Comfy', 'Menu', 'UseNewMenu'],
|
||||
defaultValue: 'Top',
|
||||
name: 'Use new menu',
|
||||
type: 'combo',
|
||||
options: ['Disabled', 'Top', 'Bottom'],
|
||||
tooltip:
|
||||
'Menu bar position. On mobile devices, the menu is always shown at the top.',
|
||||
migrateDeprecatedValue: (value: string) => {
|
||||
// Floating is now supported by dragging the docked actionbar off.
|
||||
if (value === 'Floating') {
|
||||
return 'Top'
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.WorkflowTabsPosition',
|
||||
name: 'Opened workflows position',
|
||||
type: 'combo',
|
||||
options: ['Sidebar', 'Topbar', 'Topbar (2nd-row)'],
|
||||
// Default to topbar (2nd-row) if the window is less than 1536px(2xl) wide.
|
||||
defaultValue: () =>
|
||||
window.innerWidth < 1536 ? 'Topbar (2nd-row)' : 'Topbar'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Graph.CanvasMenu',
|
||||
category: ['LiteGraph', 'Canvas', 'CanvasMenu'],
|
||||
name: 'Show graph canvas menu',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.QueueButton.BatchCountLimit',
|
||||
name: 'Batch count limit',
|
||||
tooltip:
|
||||
'The maximum number of tasks added to the queue at one button click',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
versionAdded: '1.3.5'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Keybinding.UnsetBindings',
|
||||
name: 'Keybindings unset by the user',
|
||||
type: 'hidden',
|
||||
defaultValue: [] as Keybinding[],
|
||||
versionAdded: '1.3.7',
|
||||
versionModified: '1.7.3',
|
||||
migrateDeprecatedValue: (value: any[]) => {
|
||||
return value.map((keybinding) => {
|
||||
if (keybinding['targetSelector'] === '#graph-canvas') {
|
||||
keybinding['targetElementId'] = 'graph-canvas'
|
||||
}
|
||||
return keybinding
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Keybinding.NewBindings',
|
||||
name: 'Keybindings set by the user',
|
||||
type: 'hidden',
|
||||
defaultValue: [] as Keybinding[],
|
||||
versionAdded: '1.3.7'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Extension.Disabled',
|
||||
name: 'Disabled extension names',
|
||||
type: 'hidden',
|
||||
defaultValue: [] as string[],
|
||||
versionAdded: '1.3.11'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.LinkRenderMode',
|
||||
category: ['LiteGraph', 'Graph', 'LinkRenderMode'],
|
||||
name: 'Link Render Mode',
|
||||
defaultValue: 2,
|
||||
type: 'combo',
|
||||
options: [
|
||||
{ value: LiteGraph.STRAIGHT_LINK, text: 'Straight' },
|
||||
{ value: LiteGraph.LINEAR_LINK, text: 'Linear' },
|
||||
{ value: LiteGraph.SPLINE_LINK, text: 'Spline' },
|
||||
{ value: LiteGraph.HIDDEN_LINK, text: 'Hidden' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.AutoSnapLinkToSlot',
|
||||
category: ['LiteGraph', 'Node', 'AutoSnapLinkToSlot'],
|
||||
name: 'Auto snap link to node slot',
|
||||
tooltip:
|
||||
'When dragging a link over a node, the link automatically snap to a viable input slot on the node',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.3.29'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.SnapHighlightsNode',
|
||||
category: ['LiteGraph', 'Node', 'SnapHighlightsNode'],
|
||||
name: 'Snap highlights node',
|
||||
tooltip:
|
||||
'When dragging a link over a node with viable input slot, highlight the node',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.3.29'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.BypassAllLinksOnDelete',
|
||||
category: ['LiteGraph', 'Node', 'BypassAllLinksOnDelete'],
|
||||
name: 'Keep all links when deleting nodes',
|
||||
tooltip:
|
||||
'When deleting a node, attempt to reconnect all of its input and output links (bypassing the deleted node)',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.3.40'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Node.MiddleClickRerouteNode',
|
||||
category: ['LiteGraph', 'Node', 'MiddleClickRerouteNode'],
|
||||
name: 'Middle-click creates a new Reroute node',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.3.42'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Graph.LinkMarkers',
|
||||
category: ['LiteGraph', 'Link', 'LinkMarkers'],
|
||||
name: 'Link midpoint markers',
|
||||
defaultValue: LinkMarkerShape.Circle,
|
||||
type: 'combo',
|
||||
options: [
|
||||
{ value: LinkMarkerShape.None, text: 'None' },
|
||||
{ value: LinkMarkerShape.Circle, text: 'Circle' },
|
||||
{ value: LinkMarkerShape.Arrow, text: 'Arrow' }
|
||||
],
|
||||
versionAdded: '1.3.42'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.DOMClippingEnabled',
|
||||
category: ['LiteGraph', 'Node', 'DOMClippingEnabled'],
|
||||
name: 'Enable DOM element clipping (enabling may reduce performance)',
|
||||
type: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Graph.CtrlShiftZoom',
|
||||
category: ['LiteGraph', 'Canvas', 'CtrlShiftZoom'],
|
||||
name: 'Enable fast-zoom shortcut (Ctrl + Shift + Drag)',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.4.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Pointer.ClickDrift',
|
||||
category: ['LiteGraph', 'Pointer', 'ClickDrift'],
|
||||
name: 'Pointer click drift (maximum distance)',
|
||||
tooltip:
|
||||
'If the pointer moves more than this distance while holding a button down, it is considered dragging (rather than clicking).\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
|
||||
experimental: true,
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 1
|
||||
},
|
||||
defaultValue: 6,
|
||||
versionAdded: '1.4.3'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Pointer.ClickBufferTime',
|
||||
category: ['LiteGraph', 'Pointer', 'ClickBufferTime'],
|
||||
name: 'Pointer click drift delay',
|
||||
tooltip:
|
||||
'After pressing a pointer button down, this is the maximum time (in milliseconds) that pointer movement can be ignored for.\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
|
||||
experimental: true,
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 25
|
||||
},
|
||||
defaultValue: 150,
|
||||
versionAdded: '1.4.3'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Pointer.DoubleClickTime',
|
||||
category: ['LiteGraph', 'Pointer', 'DoubleClickTime'],
|
||||
name: 'Double click interval (maximum)',
|
||||
tooltip:
|
||||
'The maximum time in milliseconds between the two clicks of a double-click. Increasing this value may assist if double-clicks are sometimes not registered.',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 100,
|
||||
max: 1000,
|
||||
step: 50
|
||||
},
|
||||
defaultValue: 300,
|
||||
versionAdded: '1.4.3'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.SnapToGrid.GridSize',
|
||||
category: ['LiteGraph', 'Canvas', 'GridSize'],
|
||||
name: 'Snap to grid size',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 1,
|
||||
max: 500
|
||||
},
|
||||
tooltip:
|
||||
'When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.',
|
||||
defaultValue: LiteGraph.CANVAS_GRID_SIZE
|
||||
},
|
||||
// Keep the 'pysssss.SnapToGrid' setting id so we don't need to migrate setting values.
|
||||
// Using a new setting id can cause existing users to lose their existing settings.
|
||||
{
|
||||
id: 'pysssss.SnapToGrid',
|
||||
category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
|
||||
name: 'Always snap to grid',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
versionAdded: '1.3.13'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Server.ServerConfigValues',
|
||||
name: 'Server config values for frontend display',
|
||||
tooltip: 'Server config values used for frontend display only',
|
||||
type: 'hidden',
|
||||
// Mapping from server config id to value.
|
||||
defaultValue: {} as Record<string, any>,
|
||||
versionAdded: '1.4.8'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Server.LaunchArgs',
|
||||
name: 'Server launch arguments',
|
||||
tooltip:
|
||||
'These are the actual arguments that are passed to the server when it is launched.',
|
||||
type: 'hidden',
|
||||
defaultValue: {} as Record<string, string>,
|
||||
versionAdded: '1.4.8'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Queue.MaxHistoryItems',
|
||||
name: 'Queue history size',
|
||||
tooltip: 'The maximum number of tasks that show in the queue history.',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 2,
|
||||
max: 256,
|
||||
step: 2
|
||||
},
|
||||
defaultValue: 64,
|
||||
versionAdded: '1.4.12'
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.Canvas.MaximumFps',
|
||||
name: 'Maximum FPS',
|
||||
tooltip:
|
||||
'The maximum frames per second that the canvas is allowed to render. Caps GPU usage at the cost of smoothness. If 0, the screen refresh rate is used. Default: 0',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 120
|
||||
},
|
||||
defaultValue: 0,
|
||||
versionAdded: '1.5.1'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.EnableWorkflowViewRestore',
|
||||
category: ['Comfy', 'Workflow', 'EnableWorkflowViewRestore'],
|
||||
name: 'Save and restore canvas position and zoom level in workflows',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionModified: '1.5.4'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.ConfirmDelete',
|
||||
name: 'Show confirmation when deleting workflows',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.5.6'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.ColorPalette',
|
||||
name: 'The active color palette id',
|
||||
type: 'hidden',
|
||||
defaultValue: 'dark',
|
||||
versionModified: '1.6.7',
|
||||
migrateDeprecatedValue(value: string) {
|
||||
// Legacy custom palettes were prefixed with 'custom_'
|
||||
return value.startsWith('custom_') ? value.replace('custom_', '') : value
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.CustomColorPalettes',
|
||||
name: 'Custom color palettes',
|
||||
type: 'hidden',
|
||||
defaultValue: {} as ColorPalettes,
|
||||
versionModified: '1.6.7'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.WidgetControlMode',
|
||||
category: ['Comfy', 'Node Widget', 'WidgetControlMode'],
|
||||
name: 'Widget control mode',
|
||||
tooltip:
|
||||
'Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.',
|
||||
type: 'combo',
|
||||
defaultValue: 'after',
|
||||
options: ['before', 'after'],
|
||||
versionModified: '1.6.10'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.TutorialCompleted',
|
||||
name: 'Tutorial completed',
|
||||
type: 'hidden',
|
||||
defaultValue: false,
|
||||
versionAdded: '1.8.7'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.InstalledVersion',
|
||||
name: 'The frontend version that was running when the user first installed ComfyUI',
|
||||
type: 'hidden',
|
||||
defaultValue: null,
|
||||
versionAdded: '1.24.0'
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.ContextMenu.Scaling',
|
||||
name: 'Scale node combo widget menus (lists) when zoomed in',
|
||||
defaultValue: false,
|
||||
type: 'boolean',
|
||||
versionAdded: '1.8.8'
|
||||
},
|
||||
|
||||
{
|
||||
id: 'LiteGraph.Canvas.LowQualityRenderingZoomThreshold',
|
||||
type: 'hidden',
|
||||
deprecated: true,
|
||||
name: 'Low quality rendering zoom threshold (deprecated)',
|
||||
tooltip:
|
||||
'Zoom level threshold for performance mode. Lower values (0.1) = quality at all zoom levels. Higher values (1.0) = performance mode even when zoomed in. Performance mode simplifies rendering by hiding text labels, shadows, and details.',
|
||||
attrs: {
|
||||
min: 0.1,
|
||||
max: 1,
|
||||
step: 0.01
|
||||
},
|
||||
defaultValue: 0.6,
|
||||
versionAdded: '1.9.1',
|
||||
versionModified: '1.26.7'
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.Canvas.MinFontSizeForLOD',
|
||||
name: 'Zoom Node Level of Detail - font size threshold',
|
||||
tooltip:
|
||||
'Controls when the nodes switch to low quality LOD rendering. Uses font size in pixels to determine when to switch. Set to 0 to disable. Values 1-24 set the minimum font size threshold for LOD - higher values (24px) = switch nodes to simplified rendering sooner when zooming out, lower values (1px) = maintain full node quality longer.',
|
||||
type: 'slider',
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 24,
|
||||
step: 1
|
||||
},
|
||||
defaultValue: 8,
|
||||
versionAdded: '1.26.7'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Canvas.NavigationMode',
|
||||
category: ['LiteGraph', 'Canvas', 'CanvasNavigationMode'],
|
||||
name: 'Canvas Navigation Mode',
|
||||
defaultValue: 'legacy',
|
||||
type: 'combo',
|
||||
options: [
|
||||
{ value: 'standard', text: 'Standard (New)' },
|
||||
{ value: 'legacy', text: 'Drag Navigation' }
|
||||
],
|
||||
versionAdded: '1.25.0',
|
||||
defaultsByInstallVersion: {
|
||||
'1.25.0': 'legacy'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Canvas.SelectionToolbox',
|
||||
category: ['LiteGraph', 'Canvas', 'SelectionToolbox'],
|
||||
name: 'Show selection toolbox',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.10.5'
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.Reroute.SplineOffset',
|
||||
name: 'Reroute spline offset',
|
||||
tooltip: 'The bezier control point offset from the reroute centre point',
|
||||
type: 'slider',
|
||||
defaultValue: 20,
|
||||
attrs: {
|
||||
min: 0,
|
||||
max: 400
|
||||
},
|
||||
versionAdded: '1.15.7'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Toast.DisableReconnectingToast',
|
||||
name: 'Disable toasts when reconnecting or reconnected',
|
||||
type: 'hidden',
|
||||
defaultValue: false,
|
||||
versionAdded: '1.15.12'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.Visible',
|
||||
name: 'Display minimap on canvas',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.25.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.NodeColors',
|
||||
name: 'Display node with its original color on minimap',
|
||||
type: 'hidden',
|
||||
defaultValue: false,
|
||||
versionAdded: '1.26.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.ShowLinks',
|
||||
name: 'Display links on minimap',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.26.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.ShowGroups',
|
||||
name: 'Display node groups on minimap',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.26.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.RenderBypassState',
|
||||
name: 'Render bypass state on minimap',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.26.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Minimap.RenderErrorState',
|
||||
name: 'Render error state on minimap',
|
||||
type: 'hidden',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.26.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.AutoSaveDelay',
|
||||
name: 'Auto Save Delay (ms)',
|
||||
defaultValue: 1000,
|
||||
type: 'number',
|
||||
tooltip: 'Only applies if Auto Save is set to "after delay".',
|
||||
versionAdded: '1.16.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.AutoSave',
|
||||
name: 'Auto Save',
|
||||
type: 'combo',
|
||||
options: ['off', 'after delay'], // Room for other options like on focus change, tab change, window change
|
||||
defaultValue: 'off', // Popular requst by users (https://github.com/Comfy-Org/ComfyUI_frontend/issues/1584#issuecomment-2536610154)
|
||||
versionAdded: '1.16.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Workflow.Persist',
|
||||
name: 'Persist workflow state and restore on page (re)load',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
versionAdded: '1.16.1'
|
||||
},
|
||||
{
|
||||
id: 'LiteGraph.Node.DefaultPadding',
|
||||
name: 'Always shrink new nodes',
|
||||
tooltip:
|
||||
'Resize nodes to the smallest possible size when created. When disabled, a newly added node will be widened slightly to show widget values.',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
versionAdded: '1.18.0'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Canvas.BackgroundImage',
|
||||
category: ['Appearance', 'Canvas', 'Background'],
|
||||
name: 'Canvas background image',
|
||||
type: 'backgroundImage',
|
||||
tooltip:
|
||||
'Image URL for the canvas background. You can right-click an image in the outputs panel and select "Set as Background" to use it, or upload your own image using the upload button.',
|
||||
defaultValue: '',
|
||||
versionAdded: '1.20.4',
|
||||
versionModified: '1.20.5'
|
||||
},
|
||||
// Release data stored in settings
|
||||
{
|
||||
id: 'Comfy.Release.Version',
|
||||
name: 'Last seen release version',
|
||||
type: 'hidden',
|
||||
defaultValue: ''
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Release.Status',
|
||||
name: 'Release status',
|
||||
type: 'hidden',
|
||||
defaultValue: 'skipped'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Release.Timestamp',
|
||||
name: 'Release seen timestamp',
|
||||
type: 'hidden',
|
||||
defaultValue: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* Vue Node System Settings
|
||||
*/
|
||||
{
|
||||
id: 'Comfy.VueNodes.Enabled',
|
||||
name: 'Enable Vue node rendering (hidden)',
|
||||
type: 'hidden',
|
||||
tooltip:
|
||||
'Render nodes as Vue components instead of canvas. Hidden; toggle via Experimental keybinding.',
|
||||
defaultValue: false,
|
||||
experimental: true,
|
||||
versionAdded: '1.27.1'
|
||||
},
|
||||
{
|
||||
id: 'Comfy.Assets.UseAssetAPI',
|
||||
name: 'Use Asset API for model library',
|
||||
type: 'boolean',
|
||||
tooltip: 'Use new Asset API for model browsing',
|
||||
defaultValue: false,
|
||||
experimental: true
|
||||
}
|
||||
]
|
||||
245
src/platform/settings/settingStore.ts
Normal file
245
src/platform/settings/settingStore.ts
Normal file
@@ -0,0 +1,245 @@
|
||||
import _ from 'es-toolkit/compat'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import type { SettingParams } from '@/platform/settings/types'
|
||||
import type { Settings } from '@/schemas/apiSchema'
|
||||
import { api } from '@/scripts/api'
|
||||
import { app } from '@/scripts/app'
|
||||
import type { TreeNode } from '@/types/treeExplorerTypes'
|
||||
import { compareVersions, isSemVer } from '@/utils/formatUtil'
|
||||
|
||||
export const getSettingInfo = (setting: SettingParams) => {
|
||||
const parts = setting.category || setting.id.split('.')
|
||||
return {
|
||||
category: parts[0] ?? 'Other',
|
||||
subCategory: parts[1] ?? 'Other'
|
||||
}
|
||||
}
|
||||
|
||||
export interface SettingTreeNode extends TreeNode {
|
||||
data?: SettingParams
|
||||
}
|
||||
|
||||
function tryMigrateDeprecatedValue(
|
||||
setting: SettingParams | undefined,
|
||||
value: unknown
|
||||
) {
|
||||
return setting?.migrateDeprecatedValue?.(value) ?? value
|
||||
}
|
||||
|
||||
function onChange(
|
||||
setting: SettingParams | undefined,
|
||||
newValue: unknown,
|
||||
oldValue: unknown
|
||||
) {
|
||||
if (setting?.onChange) {
|
||||
setting.onChange(newValue, oldValue)
|
||||
}
|
||||
// Backward compatibility with old settings dialog.
|
||||
// Some extensions still listens event emitted by the old settings dialog.
|
||||
// @ts-expect-error 'setting' is possibly 'undefined'.ts(18048)
|
||||
app.ui.settings.dispatchChange(setting.id, newValue, oldValue)
|
||||
}
|
||||
|
||||
export const useSettingStore = defineStore('setting', () => {
|
||||
const settingValues = ref<Record<string, any>>({})
|
||||
const settingsById = ref<Record<string, SettingParams>>({})
|
||||
|
||||
/**
|
||||
* Check if a setting's value exists, i.e. if the user has set it manually.
|
||||
* @param key - The key of the setting to check.
|
||||
* @returns Whether the setting exists.
|
||||
*/
|
||||
function exists(key: string) {
|
||||
return settingValues.value[key] !== undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a setting value.
|
||||
* @param key - The key of the setting to set.
|
||||
* @param value - The value to set.
|
||||
*/
|
||||
async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
|
||||
// Clone the incoming value to prevent external mutations
|
||||
const clonedValue = _.cloneDeep(value)
|
||||
const newValue = tryMigrateDeprecatedValue(
|
||||
settingsById.value[key],
|
||||
clonedValue
|
||||
)
|
||||
const oldValue = get(key)
|
||||
if (newValue === oldValue) return
|
||||
|
||||
onChange(settingsById.value[key], newValue, oldValue)
|
||||
settingValues.value[key] = newValue
|
||||
await api.storeSetting(key, newValue)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a setting value.
|
||||
* @param key - The key of the setting to get.
|
||||
* @returns The value of the setting.
|
||||
*/
|
||||
function get<K extends keyof Settings>(key: K): Settings[K] {
|
||||
// Clone the value when returning to prevent external mutations
|
||||
return _.cloneDeep(settingValues.value[key] ?? getDefaultValue(key))
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the setting params, asserting the type that is intentionally left off
|
||||
* of {@link settingsById}.
|
||||
* @param key The key of the setting to get.
|
||||
* @returns The setting.
|
||||
*/
|
||||
function getSettingById<K extends keyof Settings>(
|
||||
key: K
|
||||
): SettingParams<Settings[K]> | undefined {
|
||||
return settingsById.value[key] as SettingParams<Settings[K]> | undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the default value of a setting.
|
||||
* @param key - The key of the setting to get.
|
||||
* @returns The default value of the setting.
|
||||
*/
|
||||
function getDefaultValue<K extends keyof Settings>(
|
||||
key: K
|
||||
): Settings[K] | undefined {
|
||||
// Assertion: settingsById is not typed.
|
||||
const param = getSettingById(key)
|
||||
|
||||
if (param === undefined) return
|
||||
|
||||
const versionedDefault = getVersionedDefaultValue(key, param)
|
||||
|
||||
if (versionedDefault) {
|
||||
return versionedDefault
|
||||
}
|
||||
|
||||
return typeof param.defaultValue === 'function'
|
||||
? param.defaultValue()
|
||||
: param.defaultValue
|
||||
}
|
||||
|
||||
function getVersionedDefaultValue<
|
||||
K extends keyof Settings,
|
||||
TValue = Settings[K]
|
||||
>(key: K, param: SettingParams<TValue> | undefined): TValue | null {
|
||||
// get default versioned value, skipping if the key is 'Comfy.InstalledVersion' to prevent infinite loop
|
||||
const defaultsByInstallVersion = param?.defaultsByInstallVersion
|
||||
if (defaultsByInstallVersion && key !== 'Comfy.InstalledVersion') {
|
||||
const installedVersion = get('Comfy.InstalledVersion')
|
||||
|
||||
if (installedVersion) {
|
||||
const sortedVersions = Object.keys(defaultsByInstallVersion).sort(
|
||||
(a, b) => compareVersions(b, a)
|
||||
)
|
||||
|
||||
for (const version of sortedVersions) {
|
||||
// Ensure the version is in a valid format before comparing
|
||||
if (!isSemVer(version)) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (compareVersions(installedVersion, version) >= 0) {
|
||||
const versionedDefault = defaultsByInstallVersion[version]
|
||||
return typeof versionedDefault === 'function'
|
||||
? versionedDefault()
|
||||
: versionedDefault
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a setting.
|
||||
* @param setting - The setting to register.
|
||||
*/
|
||||
function addSetting(setting: SettingParams) {
|
||||
if (!setting.id) {
|
||||
throw new Error('Settings must have an ID')
|
||||
}
|
||||
if (setting.id in settingsById.value) {
|
||||
throw new Error(`Setting ${setting.id} must have a unique ID.`)
|
||||
}
|
||||
|
||||
settingsById.value[setting.id] = setting
|
||||
|
||||
if (settingValues.value[setting.id] !== undefined) {
|
||||
settingValues.value[setting.id] = tryMigrateDeprecatedValue(
|
||||
setting,
|
||||
settingValues.value[setting.id]
|
||||
)
|
||||
}
|
||||
onChange(setting, get(setting.id), undefined)
|
||||
}
|
||||
|
||||
/*
|
||||
* Load setting values from server.
|
||||
* This needs to be called before any setting is registered.
|
||||
*/
|
||||
async function loadSettingValues() {
|
||||
if (Object.keys(settingsById.value).length) {
|
||||
throw new Error(
|
||||
'Setting values must be loaded before any setting is registered.'
|
||||
)
|
||||
}
|
||||
settingValues.value = await api.getSettings()
|
||||
|
||||
// Migrate old zoom threshold setting to new font size setting
|
||||
await migrateZoomThresholdToFontSize()
|
||||
}
|
||||
|
||||
/**
|
||||
* Migrate the old zoom threshold setting to the new font size setting.
|
||||
* Preserves the exact zoom threshold behavior by converting it to equivalent font size.
|
||||
*/
|
||||
async function migrateZoomThresholdToFontSize() {
|
||||
const oldKey = 'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
|
||||
const newKey = 'LiteGraph.Canvas.MinFontSizeForLOD'
|
||||
|
||||
// Only migrate if old setting exists and new setting doesn't
|
||||
if (
|
||||
settingValues.value[oldKey] !== undefined &&
|
||||
settingValues.value[newKey] === undefined
|
||||
) {
|
||||
const oldValue = settingValues.value[oldKey] as number
|
||||
|
||||
// Convert zoom threshold to equivalent font size to preserve exact behavior
|
||||
// The threshold formula is: threshold = font_size / (14 * sqrt(DPR))
|
||||
// For DPR=1: threshold = font_size / 14
|
||||
// Therefore: font_size = threshold * 14
|
||||
//
|
||||
// Examples:
|
||||
// - Old 0.6 threshold → 0.6 * 14 = 8.4px → rounds to 8px (preserves ~60% zoom threshold)
|
||||
// - Old 0.5 threshold → 0.5 * 14 = 7px (preserves 50% zoom threshold)
|
||||
// - Old 1.0 threshold → 1.0 * 14 = 14px (preserves 100% zoom threshold)
|
||||
const mappedFontSize = Math.round(oldValue * 14)
|
||||
const clampedFontSize = Math.max(1, Math.min(24, mappedFontSize))
|
||||
|
||||
// Set the new value
|
||||
settingValues.value[newKey] = clampedFontSize
|
||||
|
||||
// Remove the old setting to prevent confusion
|
||||
delete settingValues.value[oldKey]
|
||||
|
||||
// Store the migrated setting
|
||||
await api.storeSetting(newKey, clampedFontSize)
|
||||
await api.storeSetting(oldKey, undefined)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
settingValues,
|
||||
settingsById,
|
||||
addSetting,
|
||||
loadSettingValues,
|
||||
set,
|
||||
get,
|
||||
exists,
|
||||
getDefaultValue
|
||||
}
|
||||
})
|
||||
66
src/platform/settings/types.ts
Normal file
66
src/platform/settings/types.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import type { Settings } from '@/schemas/apiSchema'
|
||||
|
||||
type SettingInputType =
|
||||
| 'boolean'
|
||||
| 'number'
|
||||
| 'slider'
|
||||
| 'knob'
|
||||
| 'combo'
|
||||
| 'radio'
|
||||
| 'text'
|
||||
| 'image'
|
||||
| 'color'
|
||||
| 'url'
|
||||
| 'hidden'
|
||||
| 'backgroundImage'
|
||||
|
||||
type SettingCustomRenderer = (
|
||||
name: string,
|
||||
setter: (v: any) => void,
|
||||
value: any,
|
||||
attrs: any
|
||||
) => HTMLElement
|
||||
|
||||
export interface SettingOption {
|
||||
text: string
|
||||
value?: any
|
||||
}
|
||||
|
||||
export interface SettingParams<TValue = unknown> extends FormItem {
|
||||
id: keyof Settings
|
||||
defaultValue: any | (() => any)
|
||||
defaultsByInstallVersion?: Record<`${number}.${number}.${number}`, TValue>
|
||||
onChange?: (newValue: any, oldValue?: any) => void
|
||||
// By default category is id.split('.'). However, changing id to assign
|
||||
// new category has poor backward compatibility. Use this field to overwrite
|
||||
// default category from id.
|
||||
// Note: Like id, category value need to be unique.
|
||||
category?: string[]
|
||||
experimental?: boolean
|
||||
deprecated?: boolean
|
||||
// Deprecated values are mapped to new values.
|
||||
migrateDeprecatedValue?: (value: any) => any
|
||||
// Version of the setting when it was added
|
||||
versionAdded?: string
|
||||
// Version of the setting when it was last modified
|
||||
versionModified?: string
|
||||
// sortOrder for sorting settings within a group. Higher values appear first.
|
||||
// Default is 0 if not specified.
|
||||
sortOrder?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* The base form item for rendering in a form.
|
||||
*/
|
||||
export interface FormItem {
|
||||
name: string
|
||||
type: SettingInputType | SettingCustomRenderer
|
||||
tooltip?: string
|
||||
attrs?: Record<string, any>
|
||||
options?: Array<string | SettingOption>
|
||||
}
|
||||
|
||||
export interface ISettingGroup {
|
||||
label: string
|
||||
settings: SettingParams[]
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { toRaw } from 'vue'
|
||||
import { t } from '@/i18n'
|
||||
import { LGraph, LGraphCanvas } from '@/lib/litegraph/src/litegraph'
|
||||
import type { SerialisableGraph, Vector2 } from '@/lib/litegraph/src/litegraph'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import {
|
||||
ComfyWorkflow,
|
||||
useWorkflowStore
|
||||
@@ -14,7 +15,6 @@ import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
|
||||
import { downloadBlob } from '@/scripts/utils'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
import { useDomWidgetStore } from '@/stores/domWidgetStore'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
import { useToastStore } from '@/stores/toastStore'
|
||||
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
||||
import { appendJsonExt, generateUUID } from '@/utils/formatUtil'
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { markRaw } from 'vue'
|
||||
|
||||
import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
import type { SidebarTabExtension } from '@/types/extensionTypes'
|
||||
|
||||
export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { computed, onUnmounted, watch } from 'vue'
|
||||
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
|
||||
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
||||
import { api } from '@/scripts/api'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
|
||||
export function useWorkflowAutoSave() {
|
||||
const workflowStore = useWorkflowStore()
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { tryOnScopeDispose } from '@vueuse/core'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
|
||||
import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
|
||||
import { api } from '@/scripts/api'
|
||||
import { app as comfyApp } from '@/scripts/app'
|
||||
import { getStorageValue, setStorageValue } from '@/scripts/utils'
|
||||
import { useCommandStore } from '@/stores/commandStore'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
|
||||
export function useWorkflowPersistence() {
|
||||
const workflowStore = useWorkflowStore()
|
||||
|
||||
Reference in New Issue
Block a user