diff --git a/src/components/selectionbar/SubgraphNode.vue b/src/components/selectionbar/SubgraphNode.vue index 3da178acd..96d5ead1a 100644 --- a/src/components/selectionbar/SubgraphNode.vue +++ b/src/components/selectionbar/SubgraphNode.vue @@ -5,6 +5,7 @@ import { watchDebounced } from '@vueuse/core' import { useI18n } from 'vue-i18n' import draggable from 'vuedraggable' +import SearchBox from '@/components/common/SearchBox.vue' import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue' import SubgraphNodeWidget from '@/components/selectionbar/SubgraphNodeWidget.vue' import { useDomWidgetStore } from '@/stores/domWidgetStore' @@ -14,6 +15,7 @@ const { t } = useI18n() const canvasStore = useCanvasStore() const expandedKeys = ref>({}) +const searchQuery = ref('') const triggerUpdate = ref(0) @@ -72,8 +74,9 @@ function toggleVisibility(nodeId, widgetName, isShown) { useCanvasStore().canvas.setDirty(true) } -const candidateWidgets = computed(() =>{ +const candidateWidgets = computed(() => { const node = canvasStore.selectedItems[0] ?? {} + if(!node) return [] triggerUpdate.value//mark dependent const pw = node.properties.proxyWidgets ?? [] const interiorNodes = node?.subgraph?.nodes ?? [] @@ -88,36 +91,69 @@ const candidateWidgets = computed(() =>{ //TODO: filter enabled/disabled items while keeping order return intn }) +const filteredCandidates = computed(() => { + const query = searchQuery.value.toLowerCase() + if (!query) return candidateWidgets.value + return candidateWidgets.value.filter(([n,w]) => + n.title.toLowerCase().includes(query) + || w.name.toLowerCase().includes(query) + ) +}) +const filteredActive = computed(() => { + const query = searchQuery.value.toLowerCase() + if (!query) { + console.error("displaying filtered widgets with no search query") + return activeWidgets.value + } + return activeWidgets.value.filter(([n,w]) => + n.title.toLowerCase().includes(query) + || w.name.toLowerCase().includes(query) + ) +})