diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json index 28933b69bf..0a97a595d1 100644 --- a/src/locales/en/settings.json +++ b/src/locales/en/settings.json @@ -335,11 +335,11 @@ "name": "Validate workflows" }, "Comfy_VueNodes_AutoScaleLayout": { - "name": "Auto-scale layout (Vue nodes)", + "name": "Auto-scale layout (Nodes 2.0)", "tooltip": "Automatically scale node positions when switching to Vue rendering to prevent overlap" }, "Comfy_VueNodes_Enabled": { - "name": "Modern Node Design (Vue Nodes)", + "name": "Modern Node Design (Nodes 2.0)", "tooltip": "Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering." }, "Comfy_WidgetControlMode": { diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue index 820262b1a6..13da104375 100644 --- a/src/platform/settings/components/SettingDialogContent.vue +++ b/src/platform/settings/components/SettingDialogContent.vue @@ -107,10 +107,17 @@ const { const authActions = useFirebaseAuthActions() +// Get max sortOrder from settings in a group +const getGroupSortOrder = (group: SettingTreeNode): number => + Math.max(0, ...flattenTree(group).map((s) => s.sortOrder ?? 0)) + // Sort groups for a category const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => { return [...(category.children ?? [])] - .sort((a, b) => a.label.localeCompare(b.label)) + .sort((a, b) => { + const orderDiff = getGroupSortOrder(b) - getGroupSortOrder(a) + return orderDiff !== 0 ? orderDiff : a.label.localeCompare(b.label) + }) .map((group) => ({ label: group.label, settings: flattenTree(group).sort((a, b) => { diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts index c76381d76a..0493f2f00d 100644 --- a/src/platform/settings/constants/coreSettings.ts +++ b/src/platform/settings/constants/coreSettings.ts @@ -1082,24 +1082,28 @@ export const CORE_SETTINGS: SettingParams[] = [ }, /** - * Vue Node System Settings + * Nodes 2.0 Settings */ { id: 'Comfy.VueNodes.Enabled', - name: 'Modern Node Design (Vue Nodes)', + category: ['Comfy', 'Nodes 2.0', 'VueNodesEnabled'], + name: 'Modern Node Design (Nodes 2.0)', type: 'boolean', tooltip: 'Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering.', defaultValue: false, + sortOrder: 100, experimental: true, versionAdded: '1.27.1' }, { id: 'Comfy.VueNodes.AutoScaleLayout', - name: 'Auto-scale layout (Vue nodes)', + category: ['Comfy', 'Nodes 2.0', 'AutoScaleLayout'], + name: 'Auto-scale layout (Nodes 2.0)', tooltip: 'Automatically scale node positions when switching to Vue rendering to prevent overlap', type: 'boolean', + sortOrder: 50, experimental: true, defaultValue: true, versionAdded: '1.30.3'