From de4b05d050ae97e0109e48811ff495ac70669c16 Mon Sep 17 00:00:00 2001 From: wellCh4n Date: Tue, 20 May 2025 18:50:38 +0800 Subject: [PATCH] feat(workflow): position node in panel --- .../nodes/_base/components/help-link.tsx | 2 +- .../nodes/_base/components/node-position.tsx | 50 +++++++++++++++++++ .../components/workflow/nodes/_base/panel.tsx | 2 + web/i18n/de-DE/workflow.ts | 1 + web/i18n/en-US/workflow.ts | 1 + web/i18n/es-ES/workflow.ts | 1 + web/i18n/fa-IR/workflow.ts | 1 + web/i18n/fr-FR/workflow.ts | 1 + web/i18n/hi-IN/workflow.ts | 1 + web/i18n/it-IT/workflow.ts | 1 + web/i18n/ja-JP/workflow.ts | 1 + web/i18n/ko-KR/workflow.ts | 1 + web/i18n/pl-PL/workflow.ts | 1 + web/i18n/pt-BR/workflow.ts | 1 + web/i18n/ro-RO/workflow.ts | 1 + web/i18n/ru-RU/workflow.ts | 1 + web/i18n/sl-SI/workflow.ts | 2 + web/i18n/th-TH/workflow.ts | 1 + web/i18n/tr-TR/workflow.ts | 1 + web/i18n/uk-UA/workflow.ts | 1 + web/i18n/vi-VN/workflow.ts | 1 + web/i18n/zh-Hans/workflow.ts | 1 + web/i18n/zh-Hant/workflow.ts | 1 + 23 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 web/app/components/workflow/nodes/_base/components/node-position.tsx diff --git a/web/app/components/workflow/nodes/_base/components/help-link.tsx b/web/app/components/workflow/nodes/_base/components/help-link.tsx index 2e7552001b..8bf74529f1 100644 --- a/web/app/components/workflow/nodes/_base/components/help-link.tsx +++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx @@ -24,7 +24,7 @@ const HelpLink = ({ diff --git a/web/app/components/workflow/nodes/_base/components/node-position.tsx b/web/app/components/workflow/nodes/_base/components/node-position.tsx new file mode 100644 index 0000000000..e4f0fde200 --- /dev/null +++ b/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 ( + +
{ + setViewport({ + x: (clientWidth - 400 - node.width! * zoom) / 2 - position.x * zoom, + y: (clientHeight - node.height! * zoom) / 2 - position.y * zoom, + zoom: transform[2], + }) + }} + > + +
+ + ) +} + +export default memo(NodePosition) diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx index 2ee39a3b06..307b3fec7b 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/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 = ({ ) } +
diff --git a/web/i18n/de-DE/workflow.ts b/web/i18n/de-DE/workflow.ts index e229506706..44e6b2e973 100644 --- a/web/i18n/de-DE/workflow.ts +++ b/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', diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index f7121a7a8a..f9a58d42e8 100644 --- a/web/i18n/en-US/workflow.ts +++ b/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', diff --git a/web/i18n/es-ES/workflow.ts b/web/i18n/es-ES/workflow.ts index 5a2d02bc0d..c795e24984 100644 --- a/web/i18n/es-ES/workflow.ts +++ b/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', diff --git a/web/i18n/fa-IR/workflow.ts b/web/i18n/fa-IR/workflow.ts index 6b887b1739..09a38b32c5 100644 --- a/web/i18n/fa-IR/workflow.ts +++ b/web/i18n/fa-IR/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: 'افزودن بلوک بعدی به این جریان کار', selectNextStep: 'انتخاب بلوک بعدی', runThisStep: 'اجرا کردن این مرحله', + moveToThisNode: '定位至该节点', checklist: 'چک‌لیست', checklistTip: 'اطمینان حاصل کنید که همه مسائل قبل از انتشار حل شده‌اند', checklistResolved: 'تمام مسائل حل شده‌اند', diff --git a/web/i18n/fr-FR/workflow.ts b/web/i18n/fr-FR/workflow.ts index f6ae2a9ee2..9418ab118d 100644 --- a/web/i18n/fr-FR/workflow.ts +++ b/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', diff --git a/web/i18n/hi-IN/workflow.ts b/web/i18n/hi-IN/workflow.ts index 17d33a0325..ddf12ba892 100644 --- a/web/i18n/hi-IN/workflow.ts +++ b/web/i18n/hi-IN/workflow.ts @@ -307,6 +307,7 @@ const translation = { addNextStep: 'इस वर्कफ़्लो में अगला ब्लॉक जोड़ें', selectNextStep: 'अगला ब्लॉक चुनें', runThisStep: 'इस कदम को चलाएं', + moveToThisNode: '定位至该节点', checklist: 'चेकलिस्ट', checklistTip: 'प्रकाशित करने से पहले सुनिश्चित करें कि सभी समस्याएं हल हो गई हैं', diff --git a/web/i18n/it-IT/workflow.ts b/web/i18n/it-IT/workflow.ts index 35d3ba1267..f5b530be2e 100644 --- a/web/i18n/it-IT/workflow.ts +++ b/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', diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts index 066a5581d7..1f5525d6da 100644 --- a/web/i18n/ja-JP/workflow.ts +++ b/web/i18n/ja-JP/workflow.ts @@ -301,6 +301,7 @@ const translation = { addNextStep: 'このワークフローで次ノードを追加', selectNextStep: '次ノード選択', runThisStep: 'このステップ実行', + moveToThisNode: '定位至该节点', checklist: 'チェックリスト', checklistTip: '公開前に全ての項目を確認してください', checklistResolved: '全てのチェックが完了しました', diff --git a/web/i18n/ko-KR/workflow.ts b/web/i18n/ko-KR/workflow.ts index a3496b7a23..c5f82365a7 100644 --- a/web/i18n/ko-KR/workflow.ts +++ b/web/i18n/ko-KR/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: '이 워크플로우의 다음 블록 추가', selectNextStep: '다음 블록 선택', runThisStep: '이 단계 실행', + moveToThisNode: '定位至该节点', checklist: '체크리스트', checklistTip: '게시하기 전에 모든 문제가 해결되었는지 확인하세요', checklistResolved: '모든 문제가 해결되었습니다', diff --git a/web/i18n/pl-PL/workflow.ts b/web/i18n/pl-PL/workflow.ts index ebf1f47d2b..a5dae5159e 100644 --- a/web/i18n/pl-PL/workflow.ts +++ b/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', diff --git a/web/i18n/pt-BR/workflow.ts b/web/i18n/pt-BR/workflow.ts index e64240a06d..e95dc5bd87 100644 --- a/web/i18n/pt-BR/workflow.ts +++ b/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', diff --git a/web/i18n/ro-RO/workflow.ts b/web/i18n/ro-RO/workflow.ts index 2978565bfc..ee37d3b105 100644 --- a/web/i18n/ro-RO/workflow.ts +++ b/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', diff --git a/web/i18n/ru-RU/workflow.ts b/web/i18n/ru-RU/workflow.ts index 8a292ff0a9..7a9231426d 100644 --- a/web/i18n/ru-RU/workflow.ts +++ b/web/i18n/ru-RU/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: 'Добавить следующий блок в этот рабочий процесс', selectNextStep: 'Выбрать следующий блок', runThisStep: 'Выполнить этот шаг', + moveToThisNode: '定位至该节点', checklist: 'Контрольный список', checklistTip: 'Убедитесь, что все проблемы решены перед публикацией', checklistResolved: 'Все проблемы решены', diff --git a/web/i18n/sl-SI/workflow.ts b/web/i18n/sl-SI/workflow.ts index 1376bc833f..7b68b50d3b 100644 --- a/web/i18n/sl-SI/workflow.ts +++ b/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: { diff --git a/web/i18n/th-TH/workflow.ts b/web/i18n/th-TH/workflow.ts index 6b91a03a41..997a45749b 100644 --- a/web/i18n/th-TH/workflow.ts +++ b/web/i18n/th-TH/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: 'เพิ่มบล็อกถัดไปในเวิร์กโฟลว์นี้', selectNextStep: 'เลือกบล็อกถัดไป', runThisStep: 'เรียกใช้ขั้นตอนนี้', + moveToThisNode: '定位至该节点', checklist: 'ตรวจ สอบ', checklistTip: 'ตรวจสอบให้แน่ใจว่าปัญหาทั้งหมดได้รับการแก้ไขแล้วก่อนที่จะเผยแพร่', checklistResolved: 'ปัญหาทั้งหมดได้รับการแก้ไขแล้ว', diff --git a/web/i18n/tr-TR/workflow.ts b/web/i18n/tr-TR/workflow.ts index 999456f1cf..72124e74d9 100644 --- a/web/i18n/tr-TR/workflow.ts +++ b/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ü', diff --git a/web/i18n/uk-UA/workflow.ts b/web/i18n/uk-UA/workflow.ts index c2d0b137fb..debf9b6721 100644 --- a/web/i18n/uk-UA/workflow.ts +++ b/web/i18n/uk-UA/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: 'Додати наступний блок у цей робочий потік', selectNextStep: 'Вибрати наступний блок', runThisStep: 'Запустити цей крок', + moveToThisNode: '定位至该节点', checklist: 'Контрольний список', checklistTip: 'Переконайтеся, що всі проблеми вирішені перед публікацією', checklistResolved: 'Всі проблеми вирішені', diff --git a/web/i18n/vi-VN/workflow.ts b/web/i18n/vi-VN/workflow.ts index 18ae72022e..e3a4f283e2 100644 --- a/web/i18n/vi-VN/workflow.ts +++ b/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', diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index ab77e0ef8d..e732468b32 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -301,6 +301,7 @@ const translation = { addNextStep: '添加此工作流程中的下一个节点', selectNextStep: '选择下一个节点', runThisStep: '运行此步骤', + moveToThisNode: '定位至此节点', checklist: '检查清单', checklistTip: '发布前确保所有问题均已解决', checklistResolved: '所有问题均已解决', diff --git a/web/i18n/zh-Hant/workflow.ts b/web/i18n/zh-Hant/workflow.ts index 9a4d7f25d8..66a4419f34 100644 --- a/web/i18n/zh-Hant/workflow.ts +++ b/web/i18n/zh-Hant/workflow.ts @@ -296,6 +296,7 @@ const translation = { addNextStep: '添加此工作流程中的下一個節點', selectNextStep: '選擇下一個節點', runThisStep: '運行此步驟', + moveToThisNode: '定位至此節點', checklist: '檢查清單', checklistTip: '發佈前確保所有問題均已解決', checklistResolved: '所有問題均已解決',