Feat/vue nodes preview (#5747)

## Summary

Create a LGraphNodePreview.vue component to use Vue Nodes for preview
when hovering over search results / sidebar tree list.

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<img width="3024" height="1642" alt="image"
src="https://github.com/user-attachments/assets/d102b08e-2970-407b-aff8-3fa6333d5e38"
/>
<img width="3024" height="1646" alt="image (1)"
src="https://github.com/user-attachments/assets/b5d378d5-3cf6-4cca-9fa1-741647e8d72c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5747-Feat-vue-nodes-preview-2786d73d3650817dbf9af458bd5dda8c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: JakeSchroeder <jake@axiom.co>
Co-authored-by: AustinMroz <AustinMroz@users.noreply.github.com>
This commit is contained in:
Simula_r
2025-09-24 13:02:47 -07:00
committed by GitHub
parent b0f81b2245
commit 0919856a05
4 changed files with 129 additions and 4 deletions

View File

@@ -1,9 +1,9 @@
<!-- Reference:
https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
-->
<template>
<div class="_sb_node_preview">
<LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
<div v-else class="_sb_node_preview">
<div class="_sb_table">
<div
class="node_header text-ellipsis mr-4"
@@ -85,6 +85,8 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
import _ from 'es-toolkit/compat'
import { computed } from 'vue'
import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
import { useWidgetStore } from '@/stores/widgetStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -94,6 +96,8 @@ const { nodeDef } = defineProps<{
nodeDef: ComfyNodeDefV2
}>()
const { shouldRenderVueNodes } = useVueFeatureFlags()
const colorPaletteStore = useColorPaletteStore()
const litegraphColors = computed(
() => colorPaletteStore.completedActivePalette.colors.litegraph_base