mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
549ef79e02
Update minimap and graph canvas menu (bottom right) to use menu tokens. Change canvas BG color on default dark theme. <img width="3840" height="2029" alt="image" src="https://github.com/user-attachments/assets/6d168981-df27-40c0-829c-59150b8a6a12" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6589-wip-Style-graph-canvas-color-2a26d73d365081cb88c4c4bdb2b6d3a5) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<div
|
|
class="minimap-panel mr-2 flex flex-col gap-2 bg-comfy-menu-bg p-3 text-sm shadow-interface"
|
|
:style="panelStyles"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
input-id="node-colors"
|
|
name="node-colors"
|
|
:model-value="nodeColors"
|
|
binary
|
|
@update:model-value="
|
|
(value) => $emit('updateOption', 'Comfy.Minimap.NodeColors', value)
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--palette]" />
|
|
<label for="node-colors">{{ $t('minimap.nodeColors') }}</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
input-id="show-links"
|
|
name="show-links"
|
|
:model-value="showLinks"
|
|
binary
|
|
@update:model-value="
|
|
(value) => $emit('updateOption', 'Comfy.Minimap.ShowLinks', value)
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--route]" />
|
|
<label for="show-links">{{ $t('minimap.showLinks') }}</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
input-id="show-groups"
|
|
name="show-groups"
|
|
:model-value="showGroups"
|
|
binary
|
|
@update:model-value="
|
|
(value) => $emit('updateOption', 'Comfy.Minimap.ShowGroups', value)
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--frame]" />
|
|
<label for="show-groups">{{ $t('minimap.showGroups') }}</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
input-id="render-bypass"
|
|
name="render-bypass"
|
|
:model-value="renderBypass"
|
|
binary
|
|
@update:model-value="
|
|
(value) =>
|
|
$emit('updateOption', 'Comfy.Minimap.RenderBypassState', value)
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--circle-slash-2]" />
|
|
<label for="render-bypass">{{ $t('minimap.renderBypassState') }}</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
input-id="render-error"
|
|
name="render-error"
|
|
:model-value="renderError"
|
|
binary
|
|
@update:model-value="
|
|
(value) =>
|
|
$emit('updateOption', 'Comfy.Minimap.RenderErrorState', value)
|
|
"
|
|
/>
|
|
<i class="icon-[lucide--message-circle-warning]" />
|
|
<label for="render-error">{{ $t('minimap.renderErrorState') }}</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Checkbox from 'primevue/checkbox'
|
|
|
|
import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
|
|
|
|
defineProps<{
|
|
panelStyles: any
|
|
nodeColors: boolean
|
|
showLinks: boolean
|
|
showGroups: boolean
|
|
renderBypass: boolean
|
|
renderError: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
updateOption: [key: MinimapSettingsKey, value: boolean]
|
|
}>()
|
|
</script>
|