From 627911d4ff032d0d3f88aed036ec47b863678606 Mon Sep 17 00:00:00 2001 From: wellCh4n Date: Wed, 21 May 2025 11:29:24 +0800 Subject: [PATCH] feat: Move to node in workflow panel and fix help link hover style (#19998) --- .../nodes/_base/components/help-link.tsx | 2 +- .../nodes/_base/components/node-position.tsx | 54 +++++++++++++++++++ .../components/workflow/nodes/_base/panel.tsx | 5 ++ 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 | 1 + 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, 80 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..404648dfa6 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/node-position.tsx @@ -0,0 +1,54 @@ +import { memo } from 'react' +import { useTranslation } from 'react-i18next' +import { RiCrosshairLine } from '@remixicon/react' +import type { XYPosition } from 'reactflow' +import { useReactFlow, useStoreApi } from 'reactflow' +import TooltipPlus from '@/app/components/base/tooltip' +import { useNodesSyncDraft } from '@/app/components/workflow-app/hooks' + +type NodePositionProps = { + nodePosition: XYPosition, + nodeWidth?: number | null, + nodeHeight?: number | null, +} +const NodePosition = ({ + nodePosition, + nodeWidth, + nodeHeight, +}: NodePositionProps) => { + const { t } = useTranslation() + const reactflow = useReactFlow() + const store = useStoreApi() + const { doSyncWorkflowDraft } = useNodesSyncDraft() + + if (!nodePosition || !nodeWidth || !nodeHeight) return null + + const workflowContainer = document.getElementById('workflow-container') + const { transform } = store.getState() + const zoom = transform[2] + + const { clientWidth, clientHeight } = workflowContainer! + const { setViewport } = reactflow + + return ( + +
{ + setViewport({ + x: (clientWidth - 400 - nodeWidth * zoom) / 2 - nodePosition.x * zoom, + y: (clientHeight - nodeHeight * zoom) / 2 - nodePosition.y * zoom, + zoom: transform[2], + }) + doSyncWorkflowDraft() + }} + > + +
+ + ) +} + +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..49c61b3416 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, @@ -55,6 +56,9 @@ const BasePanel: FC = ({ id, data, children, + position, + width, + height, }) => { const { t } = useTranslation() const { showMessageLogModal } = useAppStore(useShallow(state => ({ @@ -150,6 +154,7 @@ const BasePanel: FC = ({ ) } +
diff --git a/web/i18n/de-DE/workflow.ts b/web/i18n/de-DE/workflow.ts index e229506706..177467df78 100644 --- a/web/i18n/de-DE/workflow.ts +++ b/web/i18n/de-DE/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Blöcke organisieren', change: 'Ändern', optional: '(optional)', + moveToThisNode: 'Bewege zu diesem Knoten', }, nodes: { common: { 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..c7690f3ff4 100644 --- a/web/i18n/es-ES/workflow.ts +++ b/web/i18n/es-ES/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Organizar bloques', change: 'Cambiar', optional: '(opcional)', + moveToThisNode: 'Mueve a este nodo', }, nodes: { common: { diff --git a/web/i18n/fa-IR/workflow.ts b/web/i18n/fa-IR/workflow.ts index 6b887b1739..0f235012f9 100644 --- a/web/i18n/fa-IR/workflow.ts +++ b/web/i18n/fa-IR/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'سازماندهی بلوک‌ها', change: 'تغییر', optional: '(اختیاری)', + moveToThisNode: 'به این گره بروید', }, nodes: { common: { diff --git a/web/i18n/fr-FR/workflow.ts b/web/i18n/fr-FR/workflow.ts index f6ae2a9ee2..ec360c2352 100644 --- a/web/i18n/fr-FR/workflow.ts +++ b/web/i18n/fr-FR/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Organiser les blocs', change: 'Modifier', optional: '(facultatif)', + moveToThisNode: 'Déplacer vers ce nœud', }, nodes: { common: { diff --git a/web/i18n/hi-IN/workflow.ts b/web/i18n/hi-IN/workflow.ts index 17d33a0325..6b764b33f8 100644 --- a/web/i18n/hi-IN/workflow.ts +++ b/web/i18n/hi-IN/workflow.ts @@ -314,6 +314,7 @@ const translation = { organizeBlocks: 'ब्लॉक्स को व्यवस्थित करें', change: 'बदलें', optional: '(वैकल्पिक)', + moveToThisNode: 'इस नोड पर जाएं', }, nodes: { common: { diff --git a/web/i18n/it-IT/workflow.ts b/web/i18n/it-IT/workflow.ts index 35d3ba1267..20f948888e 100644 --- a/web/i18n/it-IT/workflow.ts +++ b/web/i18n/it-IT/workflow.ts @@ -317,6 +317,7 @@ const translation = { organizeBlocks: 'Organizza blocchi', change: 'Cambia', optional: '(opzionale)', + moveToThisNode: 'Sposta a questo nodo', }, nodes: { common: { diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts index 066a5581d7..7dc3175391 100644 --- a/web/i18n/ja-JP/workflow.ts +++ b/web/i18n/ja-JP/workflow.ts @@ -307,6 +307,7 @@ const translation = { organizeBlocks: 'ノード整理', change: '変更', optional: '（任意）', + moveToThisNode: 'このノードに移動する', }, nodes: { common: { diff --git a/web/i18n/ko-KR/workflow.ts b/web/i18n/ko-KR/workflow.ts index a3496b7a23..7e7c9b74e4 100644 --- a/web/i18n/ko-KR/workflow.ts +++ b/web/i18n/ko-KR/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: '블록 정리', change: '변경', optional: '(선택사항)', + moveToThisNode: '이 노드로 이동', }, nodes: { common: { diff --git a/web/i18n/pl-PL/workflow.ts b/web/i18n/pl-PL/workflow.ts index ebf1f47d2b..c518c1587c 100644 --- a/web/i18n/pl-PL/workflow.ts +++ b/web/i18n/pl-PL/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Organizuj bloki', change: 'Zmień', optional: '(opcjonalne)', + moveToThisNode: 'Przenieś do tego węzła', }, nodes: { common: { diff --git a/web/i18n/pt-BR/workflow.ts b/web/i18n/pt-BR/workflow.ts index e64240a06d..be8a8cd11c 100644 --- a/web/i18n/pt-BR/workflow.ts +++ b/web/i18n/pt-BR/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Organizar blocos', change: 'Mudar', optional: '(opcional)', + moveToThisNode: 'Mova-se para este nó', }, nodes: { common: { diff --git a/web/i18n/ro-RO/workflow.ts b/web/i18n/ro-RO/workflow.ts index 2978565bfc..176bbf9f97 100644 --- a/web/i18n/ro-RO/workflow.ts +++ b/web/i18n/ro-RO/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Organizează blocurile', change: 'Schimbă', optional: '(opțional)', + moveToThisNode: 'Mutați la acest nod', }, nodes: { common: { diff --git a/web/i18n/ru-RU/workflow.ts b/web/i18n/ru-RU/workflow.ts index 8a292ff0a9..05894568db 100644 --- a/web/i18n/ru-RU/workflow.ts +++ b/web/i18n/ru-RU/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Организовать блоки', change: 'Изменить', optional: '(необязательно)', + moveToThisNode: 'Перейдите к этому узлу', }, nodes: { common: { diff --git a/web/i18n/sl-SI/workflow.ts b/web/i18n/sl-SI/workflow.ts index 1376bc833f..0af5fa6b65 100644 --- a/web/i18n/sl-SI/workflow.ts +++ b/web/i18n/sl-SI/workflow.ts @@ -739,6 +739,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..77e1eee79d 100644 --- a/web/i18n/th-TH/workflow.ts +++ b/web/i18n/th-TH/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'จัดระเบียบบล็อก', change: 'เปลี่ยน', optional: '(ไม่บังคับ)', + moveToThisNode: 'ย้ายไปที่โหนดนี้', }, nodes: { common: { diff --git a/web/i18n/tr-TR/workflow.ts b/web/i18n/tr-TR/workflow.ts index 999456f1cf..313eae66dd 100644 --- a/web/i18n/tr-TR/workflow.ts +++ b/web/i18n/tr-TR/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Blokları Düzenle', change: 'Değiştir', optional: '(isteğe bağlı)', + moveToThisNode: 'Bu düğüme geç', }, nodes: { common: { diff --git a/web/i18n/uk-UA/workflow.ts b/web/i18n/uk-UA/workflow.ts index c2d0b137fb..3f2e24b232 100644 --- a/web/i18n/uk-UA/workflow.ts +++ b/web/i18n/uk-UA/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Організувати блоки', change: 'Змінити', optional: '(необов\'язково)', + moveToThisNode: 'Перемістіть до цього вузла', }, nodes: { common: { diff --git a/web/i18n/vi-VN/workflow.ts b/web/i18n/vi-VN/workflow.ts index 18ae72022e..55efe7b3e8 100644 --- a/web/i18n/vi-VN/workflow.ts +++ b/web/i18n/vi-VN/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: 'Tổ chức các khối', change: 'Thay đổi', optional: '(tùy chọn)', + moveToThisNode: 'Di chuyển đến nút này', }, nodes: { common: { diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index ab77e0ef8d..612bd754ab 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -307,6 +307,7 @@ const translation = { organizeBlocks: '整理节点', change: '更改', optional: '（选填）', + moveToThisNode: '定位至此节点', }, nodes: { common: { diff --git a/web/i18n/zh-Hant/workflow.ts b/web/i18n/zh-Hant/workflow.ts index 9a4d7f25d8..cfa9e320eb 100644 --- a/web/i18n/zh-Hant/workflow.ts +++ b/web/i18n/zh-Hant/workflow.ts @@ -302,6 +302,7 @@ const translation = { organizeBlocks: '整理節點', change: '更改', optional: '(選擇性)', + moveToThisNode: '定位至此節點', }, nodes: { common: {