mirror of
https://github.com/hanzo-studio/studio-frontend.git
synced 2026-10-30 18:55:56 +00:00
15ee3ced8c
## Summary Fixed Vue node opacity calculation to properly combine global opacity setting with muted/bypassed state opacity. **Root Cause**: When global opacity setting was added as inline style (481aa8252), it began overriding CSS `opacity-50` classes due to higher specificity. **Solution**: Modified `nodeOpacity` computed property to calculate effective opacity as `globalOpacity * 0.5` for muted/bypassed states, removing conflicting CSS classes. ## Changes - **What**: Fixed [CSS specificity conflict](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) where inline `opacity` style overrode `opacity-50` classes for muted/bypassed nodes - **Breaking**: None - restores intended opacity behavior ## Review Focus Multiplicative opacity calculation ensuring muted/bypassed nodes apply 0.5 opacity on top of global opacity setting rather than being overridden by it. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6022-fix-Vue-node-opacity-conditions-user-node-opacity-bypass-state-muted-state-2896d73d365081c290f1da37c195c2f5) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import {
|
|
comfyExpect as expect,
|
|
comfyPageFixture as test
|
|
} from '../../../fixtures/ComfyPage'
|
|
|
|
const MUTE_HOTKEY = 'Control+m'
|
|
const MUTE_OPACITY = '0.5'
|
|
|
|
test.describe('Vue Node Mute', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
|
|
test('should allow toggling mute on a selected node with hotkey', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.page.getByText('Load Checkpoint').click()
|
|
await comfyPage.page.keyboard.press(MUTE_HOTKEY)
|
|
|
|
const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
|
|
await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('vue-node-muted-state.png')
|
|
|
|
await comfyPage.page.keyboard.press(MUTE_HOTKEY)
|
|
await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
|
|
})
|
|
|
|
test('should allow toggling mute on multiple selected nodes with hotkey', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.page.getByText('Load Checkpoint').click()
|
|
await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
|
|
|
|
const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
|
|
const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
|
|
|
|
await comfyPage.page.keyboard.press(MUTE_HOTKEY)
|
|
await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
|
|
await expect(ksamplerNode).toHaveCSS('opacity', MUTE_OPACITY)
|
|
|
|
await comfyPage.page.keyboard.press(MUTE_HOTKEY)
|
|
await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
|
|
await expect(ksamplerNode).not.toHaveCSS('opacity', MUTE_OPACITY)
|
|
})
|
|
})
|