Add Workspace.SearchBox.Toggle command (#1814)

* Add Workspace.SearchBox.Toggle command

* Update locales [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -37,26 +37,31 @@ import { app } from '@/scripts/app'
 import { computed, ref, toRaw, watchEffect } from 'vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 import Dialog from 'primevue/dialog'
-import { ConnectingLink } from '@comfyorg/litegraph'
 import { FilterAndValue } from '@/services/nodeSearchService'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { ConnectingLinkImpl } from '@/types/litegraphTypes'
 import { useSettingStore } from '@/stores/settingStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import { useCanvasStore } from '@/stores/graphStore'
-import { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
 import { LiteGraph } from '@comfyorg/litegraph'
 import type { OriginalEvent } from '@comfyorg/litegraph/dist/types/events'
+import type {
+  Vector2,
+  LiteGraphCanvasEvent,
+  ConnectingLink
+} from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
+import { storeToRefs } from 'pinia'
 
 const settingStore = useSettingStore()
 
-const visible = ref(false)
+const { visible } = storeToRefs(useSearchBoxStore())
 const dismissable = ref(true)
 const triggerEvent = ref<LiteGraphCanvasEvent | null>(null)
-const getNewNodeLocation = (): [number, number] => {
-  if (triggerEvent.value === null) {
-    return [100, 100]
+const getNewNodeLocation = (): Vector2 => {
+  if (!triggerEvent.value) {
+    return app.getCanvasCenter()
   }
 
   const originalEvent = (triggerEvent.value.detail as OriginalEvent)
@@ -82,8 +87,8 @@ const closeDialog = () => {
 const addNode = (nodeDef: ComfyNodeDefImpl) => {
   const node = app.addNodeOnGraph(nodeDef, { pos: getNewNodeLocation() })
 
-  const eventDetail = triggerEvent.value.detail
-  if (eventDetail.subType === 'empty-release') {
+  const eventDetail = triggerEvent.value?.detail
+  if (eventDetail && eventDetail.subType === 'empty-release') {
     eventDetail.linkReleaseContext.links.forEach((link: ConnectingLink) => {
       ConnectingLinkImpl.createFromPlainObject(link).connectTo(node)
     })

src/hooks/coreCommandHooks.ts

@@ -19,6 +19,7 @@ import {
   LGraphNode,
   LGraphGroup
 } from '@comfyorg/litegraph'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 
 export function useCoreCommands(): ComfyCommand[] {
   const getTracker = () => useWorkflowStore()?.activeWorkflow?.changeTracker
@@ -477,6 +478,15 @@ export function useCoreCommands(): ComfyCommand[] {
       function: () => {
         window.open('https://www.comfy.org/discord', '_blank')
       }
+    },
+    {
+      id: 'Workspace.SearchBox.Toggle',
+      icon: 'pi pi-search',
+      label: 'Toggle Search Box',
+      versionAdded: '1.5.7',
+      function: () => {
+        useSearchBoxStore().toggleVisible()
+      }
     }
   ]
 }

src/locales/en.json

@@ -572,6 +572,7 @@
     "ComfyUI Issues": "ComfyUI Issues",
     "ComfyUI Docs": "ComfyUI Docs",
     "Comfy-Org Discord": "Comfy-Org Discord",
+    "Toggle Search Box": "Toggle Search Box",
     "Queue": "Queue",
     "Node Library": "Node Library",
     "Model Library": "Model Library",

src/locales/ja.json

@@ -181,6 +181,7 @@
     "Toggle Focus Mode": "フォーカスモードの切り替え",
     "Toggle Link Visibility": "リンクの表示/非表示を切り替え",
     "Toggle Lock": "ロックの切り替え",
+    "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Theme": "テーマの切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",

src/locales/ru.json

@@ -181,6 +181,7 @@
     "Toggle Focus Mode": "Переключить режим фокуса",
     "Toggle Link Visibility": "Переключить видимость ссылок",
     "Toggle Lock": "Переключить блокировку",
+    "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Theme": "Переключить тему",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые узлы",

src/locales/zh.json

@@ -181,6 +181,7 @@
     "Toggle Focus Mode": "切换专注模式",
     "Toggle Link Visibility": "切换链接可见性",
     "Toggle Lock": "切换锁定",
+    "Toggle Search Box": "切换搜索框",
     "Toggle Theme": "切换主题",
     "Undo": "撤销",
     "Ungroup selected group nodes": "取消选定组节点的分组",

src/stores/workspace/searchBoxStore.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSearchBoxStore = defineStore('searchBox', () => {
+  const visible = ref(false)
+  function toggleVisible() {
+    visible.value = !visible.value
+  }
+
+  return {
+    visible,
+    toggleVisible
+  }
+})