mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-09 15:10:17 +00:00
## Summary This PR redesigns the graph canvas interface components including minimap, toolbox, and menu systems with updated spacing, colors, and interaction patterns - using the design tokens directly from Figma, which can be used elsewhere going forward. There are some other changes to the designs, outlined [here](https://www.notion.so/comfy-org/Update-Minimap-Menu-v2-2886d73d365080e88e12f8df027019c0): - [x] Update/standardize the padding between viewport and toolbox - [x] Update toolbox component’s style to match the other floating menus style (border radius, height, padding and follow theme colors) - [x] Expose the minimap button - [x] Remove the focus button and delete it’s keybinding - [x] Group the hand and the default cursor buttons https://github.com/user-attachments/assets/92542e60-c32d-4a21-a6f6-e72837a70b17 ## Review Focus New CSS variables for cross-component theming consistency and CanvasModeSelector component extraction for improved code organization. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6038-rework-minimap-toolbox-and-menu-designs-with-unified-theming-28b6d73d36508191a0c6cf8036d965c4) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
126 lines
4.2 KiB
TypeScript
126 lines
4.2 KiB
TypeScript
import { createPinia, setActivePinia } from 'pinia'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import { useMinimapSettings } from '@/renderer/extensions/minimap/composables/useMinimapSettings'
|
|
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
|
|
|
|
vi.mock('@/platform/settings/settingStore')
|
|
vi.mock('@/stores/workspace/colorPaletteStore')
|
|
|
|
describe('useMinimapSettings', () => {
|
|
beforeEach(() => {
|
|
setActivePinia(createPinia())
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
it('should return all minimap settings as computed refs', () => {
|
|
const mockSettingStore = {
|
|
get: vi.fn((key: string) => {
|
|
const settings: Record<string, any> = {
|
|
'Comfy.Minimap.NodeColors': true,
|
|
'Comfy.Minimap.ShowLinks': false,
|
|
'Comfy.Minimap.ShowGroups': true,
|
|
'Comfy.Minimap.RenderBypassState': false,
|
|
'Comfy.Minimap.RenderErrorState': true
|
|
}
|
|
return settings[key]
|
|
})
|
|
}
|
|
|
|
vi.mocked(useSettingStore).mockReturnValue(mockSettingStore as any)
|
|
vi.mocked(useColorPaletteStore).mockReturnValue({
|
|
completedActivePalette: { light_theme: false }
|
|
} as any)
|
|
|
|
const settings = useMinimapSettings()
|
|
|
|
expect(settings.nodeColors.value).toBe(true)
|
|
expect(settings.showLinks.value).toBe(false)
|
|
expect(settings.showGroups.value).toBe(true)
|
|
expect(settings.renderBypass.value).toBe(false)
|
|
expect(settings.renderError.value).toBe(true)
|
|
})
|
|
|
|
it('should generate container styles based on theme', () => {
|
|
const mockColorPaletteStore = {
|
|
completedActivePalette: { light_theme: false }
|
|
}
|
|
|
|
vi.mocked(useSettingStore).mockReturnValue({ get: vi.fn() } as any)
|
|
vi.mocked(useColorPaletteStore).mockReturnValue(
|
|
mockColorPaletteStore as any
|
|
)
|
|
|
|
const settings = useMinimapSettings()
|
|
const styles = settings.containerStyles.value
|
|
|
|
expect(styles.width).toBe('253px')
|
|
expect(styles.height).toBe('200px')
|
|
expect(styles.border).toBe('1px solid var(--interface-stroke)')
|
|
expect(styles.borderRadius).toBe('8px')
|
|
})
|
|
|
|
it('should generate light theme container styles', () => {
|
|
const mockColorPaletteStore = {
|
|
completedActivePalette: { light_theme: true }
|
|
}
|
|
|
|
vi.mocked(useSettingStore).mockReturnValue({ get: vi.fn() } as any)
|
|
vi.mocked(useColorPaletteStore).mockReturnValue(
|
|
mockColorPaletteStore as any
|
|
)
|
|
|
|
const settings = useMinimapSettings()
|
|
const styles = settings.containerStyles.value
|
|
|
|
expect(styles.width).toBe('253px')
|
|
expect(styles.height).toBe('200px')
|
|
expect(styles.border).toBe('1px solid var(--interface-stroke)')
|
|
expect(styles.borderRadius).toBe('8px')
|
|
})
|
|
|
|
it('should generate panel styles based on theme', () => {
|
|
const mockColorPaletteStore = {
|
|
completedActivePalette: { light_theme: false }
|
|
}
|
|
|
|
vi.mocked(useSettingStore).mockReturnValue({ get: vi.fn() } as any)
|
|
vi.mocked(useColorPaletteStore).mockReturnValue(
|
|
mockColorPaletteStore as any
|
|
)
|
|
|
|
const settings = useMinimapSettings()
|
|
const styles = settings.panelStyles.value
|
|
|
|
expect(styles.width).toBe('210px')
|
|
expect(styles.height).toBe('200px')
|
|
expect(styles.border).toBe('1px solid var(--interface-stroke)')
|
|
expect(styles.borderRadius).toBe('8px')
|
|
})
|
|
|
|
it('should create computed properties that call the store getter', () => {
|
|
const mockGet = vi.fn((key: string) => {
|
|
if (key === 'Comfy.Minimap.NodeColors') return true
|
|
if (key === 'Comfy.Minimap.ShowLinks') return false
|
|
return true
|
|
})
|
|
const mockSettingStore = { get: mockGet }
|
|
|
|
vi.mocked(useSettingStore).mockReturnValue(mockSettingStore as any)
|
|
vi.mocked(useColorPaletteStore).mockReturnValue({
|
|
completedActivePalette: { light_theme: false }
|
|
} as any)
|
|
|
|
const settings = useMinimapSettings()
|
|
|
|
// Access the computed properties
|
|
expect(settings.nodeColors.value).toBe(true)
|
|
expect(settings.showLinks.value).toBe(false)
|
|
|
|
// Verify the store getter was called with the correct keys
|
|
expect(mockGet).toHaveBeenCalledWith('Comfy.Minimap.NodeColors')
|
|
expect(mockGet).toHaveBeenCalledWith('Comfy.Minimap.ShowLinks')
|
|
})
|
|
})
|