feat(workflow): position node in panel

web/app/components/workflow/nodes/_base/components/help-link.tsx

@@ -24,7 +24,7 @@ const HelpLink = ({
       <a
         href={link}
         target='_blank'
-        className='mr-1 flex h-6 w-6 items-center justify-center'
+        className='mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-base-hover'
       >
         <RiBookOpenLine className='h-4 w-4 text-gray-500' />
       </a>

web/app/components/workflow/nodes/_base/components/node-position.tsx

@@ -0,0 +1,50 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCrosshairLine } from '@remixicon/react'
+import { useReactFlow, useStoreApi } from 'reactflow'
+import TooltipPlus from '@/app/components/base/tooltip'
+
+type NodePositionProps = {
+  nodeId: string
+}
+const NodePosition = ({
+  nodeId,
+}: NodePositionProps) => {
+  const { t } = useTranslation()
+  const reactflow = useReactFlow()
+  const store = useStoreApi()
+
+  if (!nodeId) return null
+
+  const node = reactflow.getNode(nodeId)
+  if (node == null) return null
+
+  const workflowContainer = document.getElementById('workflow-container')
+  const { transform } = store.getState()
+  const zoom = transform[2]
+
+  const { clientWidth, clientHeight } = workflowContainer!
+  const { setViewport } = reactflow
+  const position = node.position
+
+  return (
+    <TooltipPlus
+      popupContent={t('workflow.panel.moveToThisNode')}
+    >
+      <div
+        className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center  rounded-md hover:bg-state-base-hover'
+        onClick={() => {
+          setViewport({
+            x: (clientWidth - 400 - node.width! * zoom) / 2 - position.x * zoom,
+            y: (clientHeight - node.height! * zoom) / 2 - position.y * zoom,
+            zoom: transform[2],
+          })
+        }}
+      >
+        <RiCrosshairLine className='h-4 w-4 text-text-tertiary' />
+      </div>
+    </TooltipPlus>
+  )
+}
+
+export default memo(NodePosition)

web/app/components/workflow/nodes/_base/panel.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next'
 import NextStep from './components/next-step'
 import PanelOperator from './components/panel-operator'
 import HelpLink from './components/help-link'
+import NodePosition from './components/node-position'
 import {
   DescriptionInput,
   TitleInput,
@@ -150,6 +151,7 @@ const BasePanel: FC<BasePanelProps> = ({
                   </Tooltip>
                 )
               }
+              <NodePosition nodeId={id}></NodePosition>
               <HelpLink nodeType={data.type} />
               <PanelOperator id={id} data={data} showHelpLink={false} />
               <div className='mx-3 h-3.5 w-[1px] bg-divider-regular' />

web/i18n/de-DE/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Fügen Sie den nächsten Block in diesem Workflow hinzu',
     selectNextStep: 'Nächsten Block auswählen',
     runThisStep: 'Diesen Schritt ausführen',
+    moveToThisNode: '定位至此节点',
     checklist: 'Checkliste',
     checklistTip: 'Stellen Sie sicher, dass alle Probleme vor der Veröffentlichung gelöst sind',
     checklistResolved: 'Alle Probleme wurden gelöst',

web/i18n/en-US/workflow.ts

@@ -300,6 +300,7 @@ const translation = {
     addNextStep: 'Add the next block in this workflow',
     selectNextStep: 'Select Next Block',
     runThisStep: 'Run this step',
+    moveToThisNode: 'Move to this node',
     checklist: 'Checklist',
     checklistTip: 'Make sure all issues are resolved before publishing',
     checklistResolved: 'All issues are resolved',

web/i18n/es-ES/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Agregar el siguiente bloque en este flujo de trabajo',
     selectNextStep: 'Seleccionar siguiente bloque',
     runThisStep: 'Ejecutar este paso',
+    moveToThisNode: '定位至该节点',
     checklist: 'Lista de verificación',
     checklistTip: 'Asegúrate de resolver todos los problemas antes de publicar',
     checklistResolved: 'Se resolvieron todos los problemas',

web/i18n/fa-IR/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'افزودن بلوک بعدی به این جریان کار',
     selectNextStep: 'انتخاب بلوک بعدی',
     runThisStep: 'اجرا کردن این مرحله',
+    moveToThisNode: '定位至该节点',
     checklist: 'چک‌لیست',
     checklistTip: 'اطمینان حاصل کنید که همه مسائل قبل از انتشار حل شده‌اند',
     checklistResolved: 'تمام مسائل حل شده‌اند',

web/i18n/fr-FR/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Ajouter le prochain bloc dans ce flux de travail',
     selectNextStep: 'Sélectionner le prochain bloc',
     runThisStep: 'Exécuter cette étape',
+    moveToThisNode: '定位至该节点',
     checklist: 'Liste de contrôle',
     checklistTip: 'Assurez-vous que tous les problèmes sont résolus avant de publier',
     checklistResolved: 'Tous les problèmes ont été résolus',

web/i18n/hi-IN/workflow.ts

@@ -307,6 +307,7 @@ const translation = {
     addNextStep: 'इस वर्कफ़्लो में अगला ब्लॉक जोड़ें',
     selectNextStep: 'अगला ब्लॉक चुनें',
     runThisStep: 'इस कदम को चलाएं',
+    moveToThisNode: '定位至该节点',
     checklist: 'चेकलिस्ट',
     checklistTip:
       'प्रकाशित करने से पहले सुनिश्चित करें कि सभी समस्याएं हल हो गई हैं',

web/i18n/it-IT/workflow.ts

@@ -310,6 +310,7 @@ const translation = {
     addNextStep: 'Aggiungi il prossimo blocco in questo flusso di lavoro',
     selectNextStep: 'Seleziona Prossimo Blocco',
     runThisStep: 'Esegui questo passo',
+    moveToThisNode: '定位至该节点',
     checklist: 'Checklist',
     checklistTip:
       'Assicurati che tutti i problemi siano risolti prima di pubblicare',

web/i18n/ja-JP/workflow.ts

@@ -301,6 +301,7 @@ const translation = {
     addNextStep: 'このワークフローで次ノードを追加',
     selectNextStep: '次ノード選択',
     runThisStep: 'このステップ実行',
+    moveToThisNode: '定位至该节点',
     checklist: 'チェックリスト',
     checklistTip: '公開前に全ての項目を確認してください',
     checklistResolved: '全てのチェックが完了しました',

web/i18n/ko-KR/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: '이 워크플로우의 다음 블록 추가',
     selectNextStep: '다음 블록 선택',
     runThisStep: '이 단계 실행',
+    moveToThisNode: '定位至该节点',
     checklist: '체크리스트',
     checklistTip: '게시하기 전에 모든 문제가 해결되었는지 확인하세요',
     checklistResolved: '모든 문제가 해결되었습니다',

web/i18n/pl-PL/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Dodaj następny blok w tym przepływie pracy',
     selectNextStep: 'Wybierz następny blok',
     runThisStep: 'Uruchom ten krok',
+    moveToThisNode: '定位至该节点',
     checklist: 'Lista kontrolna',
     checklistTip: 'Upewnij się, że wszystkie problemy zostały rozwiązane przed opublikowaniem',
     checklistResolved: 'Wszystkie problemy zostały rozwiązane',

web/i18n/pt-BR/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Adicionar o próximo bloco neste fluxo de trabalho',
     selectNextStep: 'Selecionar próximo bloco',
     runThisStep: 'Executar este passo',
+    moveToThisNode: '定位至该节点',
     checklist: 'Lista de verificação',
     checklistTip: 'Certifique-se de que todos os problemas foram resolvidos antes de publicar',
     checklistResolved: 'Todos os problemas foram resolvidos',

web/i18n/ro-RO/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Adăugați următorul bloc în acest flux de lucru',
     selectNextStep: 'Selectați următorul bloc',
     runThisStep: 'Rulează acest pas',
+    moveToThisNode: '定位至该节点',
     checklist: 'Lista de verificare',
     checklistTip: 'Asigurați-vă că toate problemele sunt rezolvate înainte de publicare',
     checklistResolved: 'Toate problemele au fost rezolvate',

web/i18n/ru-RU/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Добавить следующий блок в этот рабочий процесс',
     selectNextStep: 'Выбрать следующий блок',
     runThisStep: 'Выполнить этот шаг',
+    moveToThisNode: '定位至该节点',
     checklist: 'Контрольный список',
     checklistTip: 'Убедитесь, что все проблемы решены перед публикацией',
     checklistResolved: 'Все проблемы решены',

web/i18n/sl-SI/workflow.ts

@@ -278,6 +278,7 @@ const translation = {
       addNextStep: 'Dodaj naslednji blok v tem delovnem toku',
       selectNextStep: 'Izberi naslednji blok',
       runThisStep: 'Zaženi ta korak',
+      moveToThisNode: '定位至该节点',
       checklist: 'Kontrolni seznam',
       checklistTip: 'Poskrbite, da so vsi problemi rešeni pred objavo',
       checklistResolved: 'Vsi problemi so rešeni',
@@ -739,6 +740,7 @@ const translation = {
     checklistResolved: 'Vse težave so odpravljene',
     addNextStep: 'Dodajanje naslednjega bloka v ta potek dela',
     change: 'Spremeniti',
+    moveToThisNode: 'Premakni se na to vozlišče',
   },
   nodes: {
     common: {

web/i18n/th-TH/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'เพิ่มบล็อกถัดไปในเวิร์กโฟลว์นี้',
     selectNextStep: 'เลือกบล็อกถัดไป',
     runThisStep: 'เรียกใช้ขั้นตอนนี้',
+    moveToThisNode: '定位至该节点',
     checklist: 'ตรวจ สอบ',
     checklistTip: 'ตรวจสอบให้แน่ใจว่าปัญหาทั้งหมดได้รับการแก้ไขแล้วก่อนที่จะเผยแพร่',
     checklistResolved: 'ปัญหาทั้งหมดได้รับการแก้ไขแล้ว',

web/i18n/tr-TR/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Bu iş akışında sonraki bloğu ekleyin',
     selectNextStep: 'Sonraki Bloğu Seç',
     runThisStep: 'Bu adımı çalıştır',
+    moveToThisNode: '定位至该节点',
     checklist: 'Kontrol Listesi',
     checklistTip: 'Yayınlamadan önce tüm sorunların çözüldüğünden emin olun',
     checklistResolved: 'Tüm sorunlar çözüldü',

web/i18n/uk-UA/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Додати наступний блок у цей робочий потік',
     selectNextStep: 'Вибрати наступний блок',
     runThisStep: 'Запустити цей крок',
+    moveToThisNode: '定位至该节点',
     checklist: 'Контрольний список',
     checklistTip: 'Переконайтеся, що всі проблеми вирішені перед публікацією',
     checklistResolved: 'Всі проблеми вирішені',

web/i18n/vi-VN/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: 'Thêm khối tiếp theo trong quy trình làm việc này',
     selectNextStep: 'Chọn khối tiếp theo',
     runThisStep: 'Chạy bước này',
+    moveToThisNode: '定位至此节点',
     checklist: 'Danh sách kiểm tra',
     checklistTip: 'Đảm bảo rằng tất cả các vấn đề đã được giải quyết trước khi xuất bản',
     checklistResolved: 'Tất cả các vấn đề đã được giải quyết',

web/i18n/zh-Hans/workflow.ts

@@ -301,6 +301,7 @@ const translation = {
     addNextStep: '添加此工作流程中的下一个节点',
     selectNextStep: '选择下一个节点',
     runThisStep: '运行此步骤',
+    moveToThisNode: '定位至此节点',
     checklist: '检查清单',
     checklistTip: '发布前确保所有问题均已解决',
     checklistResolved: '所有问题均已解决',

web/i18n/zh-Hant/workflow.ts

@@ -296,6 +296,7 @@ const translation = {
     addNextStep: '添加此工作流程中的下一個節點',
     selectNextStep: '選擇下一個節點',
     runThisStep: '運行此步驟',
+    moveToThisNode: '定位至此節點',
     checklist: '檢查清單',
     checklistTip: '發佈前確保所有問題均已解決',
     checklistResolved: '所有問題均已解決',