mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
dee494f019
## Summary We've had some reports of issues selecting inputs/nodes when trying to use the builder in LiteGraph mode and due to the complexity of the canvas system, we're going to enable Nodes 2.0 when entering the builder to ensure the best experience. ## Changes - **What**: - When entering builder select mode automatically switch to Nodes 2.0 - Extract reusable component from features toast - Show popup telling user the mode was changed - Add hidden setting for storing "don't show again" on the switch popup ## Review Focus - I have not removed the LiteGraph selection code in case someone still manages to enter the builder in LiteGraph mode, this should be cleaned up in future ## Screenshots (if applicable) <img width="423" height="224" alt="image" src="https://github.com/user-attachments/assets/cc2591bc-e5dc-47ef-a3c6-91ca7b6066ff" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10337-feat-App-mode-Switch-to-Nodes-2-0-when-entering-builder-3296d73d3650818e9f3cdaac59d15609) by [Unito](https://www.unito.io)
56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<NotificationPopup
|
|
v-if="appModeStore.showVueNodeSwitchPopup"
|
|
:title="$t('appBuilder.vueNodeSwitch.title')"
|
|
show-close
|
|
position="bottom-left"
|
|
@close="dismiss"
|
|
>
|
|
{{ $t('appBuilder.vueNodeSwitch.content') }}
|
|
|
|
<template #footer-start>
|
|
<label
|
|
class="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
|
|
>
|
|
<input
|
|
v-model="dontShowAgain"
|
|
type="checkbox"
|
|
class="accent-primary-background"
|
|
/>
|
|
{{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
|
|
</label>
|
|
</template>
|
|
|
|
<template #footer-end>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
class="font-normal"
|
|
@click="dismiss"
|
|
>
|
|
{{ $t('appBuilder.vueNodeSwitch.dismiss') }}
|
|
</Button>
|
|
</template>
|
|
</NotificationPopup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import NotificationPopup from '@/components/common/NotificationPopup.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import { useAppModeStore } from '@/stores/appModeStore'
|
|
|
|
const appModeStore = useAppModeStore()
|
|
const settingStore = useSettingStore()
|
|
const dontShowAgain = ref(false)
|
|
|
|
function dismiss() {
|
|
if (dontShowAgain.value) {
|
|
void settingStore.set('Comfy.AppBuilder.VueNodeSwitchDismissed', true)
|
|
}
|
|
appModeStore.showVueNodeSwitchPopup = false
|
|
}
|
|
</script>
|