feat: right side panel favorites, no selection state, and more...

src/components/rightSidePanel/RightSidePanel.vue

@@ -16,7 +16,10 @@ import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import TabInfo from './info/TabInfo.vue'
+import TabGlobalParameters from './parameters/TabGlobalParameters.vue'
+import TabNodes from './parameters/TabNodes.vue'
 import TabParameters from './parameters/TabParameters.vue'
+import TabGlobalSettings from './settings/TabGlobalSettings.vue'
 import TabSettings from './settings/TabSettings.vue'
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 
@@ -45,10 +48,17 @@ const selectedNode = computed(() => {
 
 const selectionCount = computed(() => selectedItems.value.length)
 
+const rootLevelNodes = computed((): LGraphNode[] => {
+  return (canvasStore.canvas?.graph?._nodes ?? []) as LGraphNode[]
+})
+
 const panelTitle = computed(() => {
   if (isSingleNodeSelected.value && selectedNode.value) {
     return selectedNode.value.title || selectedNode.value.type || 'Node'
   }
+  if (selectionCount.value === 0) {
+    return t('rightSidePanel.workflowOverview')
+  }
   return t('rightSidePanel.title', { count: selectionCount.value })
 })
 
@@ -62,25 +72,37 @@ type RightSidePanelTabList = Array<{
 }>
 
 const tabs = computed<RightSidePanelTabList>(() => {
-  const list: RightSidePanelTabList = [
-    {
-      label: () => t('rightSidePanel.parameters'),
-      value: 'parameters'
-    },
-    {
-      label: () => t('g.settings'),
-      value: 'settings'
-    }
-  ]
-  if (
-    !hasSelection.value ||
-    (isSingleNodeSelected.value && !isSubgraphNode.value)
-  ) {
+  const list: RightSidePanelTabList = []
+
+  list.push({
+    label: () => t('rightSidePanel.parameters'),
+    value: 'parameters'
+  })
+
+  if (!hasSelection.value) {
     list.push({
-      label: () => t('rightSidePanel.info'),
-      value: 'info'
+      label: () => t('rightSidePanel.nodes'),
+      value: 'nodes'
     })
   }
+
+  if (hasSelection.value) {
+    if (isSingleNodeSelected.value && !isSubgraphNode.value) {
+      list.push({
+        label: () => t('rightSidePanel.info'),
+        value: 'info'
+      })
+    }
+  }
+
+  list.push({
+    label: () =>
+      hasSelection.value
+        ? t('g.settings')
+        : t('rightSidePanel.globalSettings.title'),
+    value: 'settings'
+  })
+
   return list
 })
 
@@ -164,7 +186,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
+      <nav class="px-4 pb-2 pt-1">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -187,12 +209,11 @@ function handleTitleCancel() {
 
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
-      <div
-        v-if="!hasSelection"
-        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
-      >
-        {{ $t('rightSidePanel.noSelection') }}
-      </div>
+      <template v-if="!hasSelection">
+        <TabGlobalParameters v-if="activeTab === 'parameters'" />
+        <TabNodes v-else-if="activeTab === 'nodes'" :nodes="rootLevelNodes" />
+        <TabGlobalSettings v-else-if="activeTab === 'settings'" />
+      </template>
       <SubgraphEditor
         v-else-if="isSubgraphNode && isEditingSubgraph"
         :node="selectedNode"
@@ -205,7 +226,7 @@ function handleTitleCancel() {
         <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
         <TabSettings
           v-else-if="activeTab === 'settings'"
-          :nodes="selectedNodes"
+          :nodes="selectedItems"
         />
       </template>
     </div>

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -1,11 +1,22 @@
 <script lang="ts" setup>
+import { watch } from 'vue'
+
 import { cn } from '@/utils/tailwindUtil'
 
-defineProps<{
+const props = defineProps<{
   isEmpty?: boolean
+  defaultCollapse?: boolean
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
+
+if (props.defaultCollapse) {
+  isCollapse.value = true
+}
+watch(
+  () => props.defaultCollapse,
+  (value) => (isCollapse.value = value)
+)
 </script>
 
 <template>
@@ -32,7 +43,7 @@ const isCollapse = defineModel<boolean>('collapse', { default: false })
         :disabled="isEmpty"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2">
+        <span class="text-sm font-semibold line-clamp-2 flex-1">
           <slot name="label" />
         </span>
 

src/components/rightSidePanel/layout/index.ts

@@ -0,0 +1,29 @@
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+/**
+ * Searches widgets in a list and returns search results.
+ * Filters by name, localized label, type, and user-input value.
+ * Performs basic tokenization of the query string.
+ */
+export function searchWidgets<T extends { widget: IBaseWidget }[]>(
+  list: T,
+  query: string
+): T {
+  if (query.trim() === '') {
+    return list
+  }
+  const words = query.trim().toLowerCase().split(' ')
+  return list.filter(({ widget }) => {
+    const label = widget.label?.toLowerCase()
+    const name = widget.name.toLowerCase()
+    const type = widget.type.toLowerCase()
+    const value = widget.value?.toString().toLowerCase()
+    return words.every(
+      (word) =>
+        name.includes(word) ||
+        label?.includes(word) ||
+        type?.includes(word) ||
+        value?.includes(word)
+    )
+  }) as T
+}

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,34 +1,56 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import {
+  computed,
+  provide,
+  ref,
+  shallowRef,
+  triggerRef,
+  watchEffect
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import Button from '@/components/ui/button/Button.vue'
+import type { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
-import {
-  getComponent,
-  shouldExpand
-} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import { cn } from '@/utils/tailwindUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import WidgetItem from './WidgetItem.vue'
 
-const { label, widgets } = defineProps<{
+const {
+  label,
+  widgets: widgetsProp,
+  showLocateButton = false,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  defaultCollapse = false,
+  parents = [],
+  isShownOnParents = false
+} = defineProps<{
   label?: string
+  parents?: SubgraphNode[]
   widgets: { widget: IBaseWidget; node: LGraphNode }[]
+  showLocateButton?: boolean
+  isDraggable?: boolean
+  hiddenFavoriteIndicator?: boolean
+  showNodeName?: boolean
+  defaultCollapse?: boolean
+  isShownOnParents?: boolean
 }>()
 
+const collapse = defineModel<boolean>('collapse')
+
+const widgetsContainer = ref<HTMLElement>()
+
+const widgets = shallowRef(widgetsProp)
+watchEffect(() => (widgets.value = widgetsProp))
+
 provide('hideLayoutField', true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()
 
-function getWidgetComponent(widget: IBaseWidget) {
-  const component = getComponent(widget.type, widget.name)
-  return component || WidgetLegacy
-}
-
 function onWidgetValueChange(
   widget: IBaseWidget,
   value: string | number | boolean | object
@@ -38,7 +60,11 @@ function onWidgetValueChange(
   canvasStore.canvas?.setDirty(true, true)
 }
 
-const isEmpty = computed(() => widgets.length === 0)
+function onWidgetUpdate() {
+  triggerRef(widgets)
+}
+
+const isEmpty = computed(() => widgets.value.length === 0)
 
 const displayLabel = computed(
   () =>
@@ -47,40 +73,78 @@ const displayLabel = computed(
       ? t('rightSidePanel.inputsNone')
       : t('rightSidePanel.inputs'))
 )
+
+const targetNode = computed<LGraphNode | null>(() => {
+  if (!showLocateButton || isEmpty.value) return null
+
+  const firstNodeId = widgets.value[0]?.node.id
+  const allSameNode = widgets.value.every(({ node }) => node.id === firstNodeId)
+
+  return allSameNode ? widgets.value[0].node : null
+})
+
+const canShowLocateButton = computed(
+  () => showLocateButton && targetNode.value !== null
+)
+
+function handleLocateNode() {
+  if (!targetNode.value || !canvasStore.canvas) return
+
+  const graphNode = canvasStore.canvas.graph?.getNodeById(targetNode.value.id)
+  if (graphNode) {
+    canvasStore.canvas.animateToBounds(graphNode.boundingRect)
+  }
+}
+
+defineExpose({
+  widgetsContainer
+})
 </script>
 
 <template>
-  <PropertiesAccordionItem :is-empty>
+  <PropertiesAccordionItem
+    v-model:collapse="collapse"
+    :is-empty
+    :default-collapse="defaultCollapse"
+  >
     <template #label>
-      <slot name="label">
-        {{ displayLabel }}
-      </slot>
+      <div class="flex items-center gap-2 flex-1 min-w-0">
+        <span class="truncate flex-1">
+          <slot name="label">
+            {{ displayLabel }}
+          </slot>
+        </span>
+        <Button
+          v-if="canShowLocateButton"
+          variant="textonly"
+          size="icon-sm"
+          class="shrink-0 mr-3"
+          :title="t('rightSidePanel.locateNode')"
+          @click.stop="handleLocateNode"
+        >
+          <i class="icon-[lucide--locate] size-4 text-muted-foreground" />
+        </Button>
+      </div>
     </template>
 
-    <div v-if="!isEmpty" class="space-y-4 rounded-lg bg-interface-surface px-4">
-      <div
+    <div
+      v-if="!isEmpty"
+      ref="widgetsContainer"
+      class="space-y-2 rounded-lg px-4 pt-1"
+    >
+      <WidgetItem
         v-for="({ widget, node }, index) in widgets"
         :key="`widget-${index}-${widget.name}`"
-        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
-      >
-        <div class="min-h-8">
-          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
-            {{ widget.label || widget.name }}
-          </p>
-        </div>
-        <component
-          :is="getWidgetComponent(widget)"
-          :widget="widget"
-          :model-value="widget.value"
-          :node-id="String(node.id)"
-          :node-type="node.type"
-          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
-          @update:model-value="
-            (value: string | number | boolean | object) =>
-              onWidgetValueChange(widget, value)
-          "
-        />
-      </div>
+        :widget="widget"
+        :node="node"
+        :is-draggable="isDraggable"
+        :hidden-favorite-indicator="hiddenFavoriteIndicator"
+        :show-node-name="showNodeName"
+        :parents="parents"
+        :is-shown-on-parents="isShownOnParents"
+        @value-change="onWidgetValueChange"
+        @widget-update="onWidgetUpdate"
+      />
     </div>
   </PropertiesAccordionItem>
 </template>