ComfyUI_frontend/src/components/rightSidePanel/shared.ts

import type { InjectionKey, MaybeRefOrGetter } from 'vue'
import { computed, toValue } from 'vue'

import type { Positionable } from '@/lib/litegraph/src/interfaces'
import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'

export const GetNodeParentGroupKey: InjectionKey<
  (node: LGraphNode) => LGraphGroup | null
> = Symbol('getNodeParentGroup')

export type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
export type NodeWidgetsListList = Array<{
  node: LGraphNode
  widgets: NodeWidgetsList
}>

/**
 * 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
}

/**
 * Searches widgets and nodes in a list and returns search results.
 * First checks if the node title matches the query (if so, keeps entire node).
 * Otherwise, filters widgets using searchWidgets.
 * Performs basic tokenization of the query string.
 */
export function searchWidgetsAndNodes(
  list: NodeWidgetsListList,
  query: string
): NodeWidgetsListList {
  if (query.trim() === '') {
    return list
  }
  const words = query.trim().toLowerCase().split(' ')
  return list
    .map((item) => {
      const { node } = item
      const title = node.getTitle().toLowerCase()
      if (words.every((word) => title.includes(word))) {
        return { ...item, keep: true }
      }
      return {
        ...item,
        keep: false,
        widgets: searchWidgets(item.widgets, query)
      }
    })
    .filter((item) => item.keep || item.widgets.length > 0)
}

type MixedSelectionItem = LGraphGroup | LGraphNode
type FlatAndCategorizeSelectedItemsResult = {
  all: MixedSelectionItem[]
  nodes: LGraphNode[]
  groups: LGraphGroup[]
  others: Positionable[]
  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
}

type FlatItemsContext = {
  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
  depth: number
  parentGroup?: LGraphGroup
}

/**
 * The selected items may contain "Group" nodes, which can include child nodes.
 * This function flattens such structures and categorizes items into:
 * - all: all categorizable nodes (does not include nodes in "others")
 * - nodes: node items
 * - groups: group items
 * - others: items not currently supported
 * - nodeToParentGroup: a map from each node to its direct parent group (if any)
 * @param items The selected items to flatten and categorize
 * @returns An object containing arrays: all, nodes, groups, others, and nodeToParentGroup map
 */
export function flatAndCategorizeSelectedItems(
  items: Positionable[]
): FlatAndCategorizeSelectedItemsResult {
  const ctx: FlatItemsContext = {
    nodeToParentGroup: new Map<LGraphNode, LGraphGroup>(),
    depth: 0
  }
  const { all, nodes, groups, others } = flatItems(items, ctx)
  return {
    all: repeatItems(all),
    nodes: repeatItems(nodes),
    groups: repeatItems(groups),
    others: repeatItems(others),
    nodeToParentGroup: ctx.nodeToParentGroup
  }
}

export function useFlatAndCategorizeSelectedItems(
  items: MaybeRefOrGetter<Positionable[]>
) {
  const result = computed(() => flatAndCategorizeSelectedItems(toValue(items)))

  return {
    flattedItems: computed(() => result.value.all),
    selectedNodes: computed(() => result.value.nodes),
    selectedGroups: computed(() => result.value.groups),
    selectedOthers: computed(() => result.value.others),
    nodeToParentGroup: computed(() => result.value.nodeToParentGroup)
  }
}

function flatItems(
  items: Positionable[],
  ctx: FlatItemsContext
): Omit<FlatAndCategorizeSelectedItemsResult, 'nodeToParentGroup'> {
  const result: MixedSelectionItem[] = []
  const nodes: LGraphNode[] = []
  const groups: LGraphGroup[] = []
  const others: Positionable[] = []

  if (ctx.depth > 1000) {
    return {
      all: [],
      nodes: [],
      groups: [],
      others: []
    }
  }

  for (let i = 0; i < items.length; i++) {
    const item = items[i] as Positionable

    if (isLGraphGroup(item)) {
      result.push(item)
      groups.push(item)

      const children = Array.from(item.children)
      const childCtx: FlatItemsContext = {
        nodeToParentGroup: ctx.nodeToParentGroup,
        depth: ctx.depth + 1,
        parentGroup: item
      }
      const {
        all: childAll,
        nodes: childNodes,
        groups: childGroups,
        others: childOthers
      } = flatItems(children, childCtx)
      result.push(...childAll)
      nodes.push(...childNodes)
      groups.push(...childGroups)
      others.push(...childOthers)
    } else if (isLGraphNode(item)) {
      result.push(item)
      nodes.push(item)
      if (ctx.parentGroup) {
        ctx.nodeToParentGroup.set(item, ctx.parentGroup)
      }
    } else {
      // Other types of items are not supported yet
      // Do not add to all
      others.push(item)
    }
  }
  return {
    all: result,
    nodes,
    groups,
    others
  }
}

function repeatItems<T>(items: T[]): T[] {
  const itemSet = new Set<T>()
  const result: T[] = []
  for (const item of items) {
    if (itemSet.has(item)) continue
    itemSet.add(item)
    result.push(item)
  }
  return result
}