diff --git a/web/app/components/workflow/nodes/_base/components/node-position.tsx b/web/app/components/workflow/nodes/_base/components/node-position.tsx index e4f0fde200..4fa689916e 100644 --- a/web/app/components/workflow/nodes/_base/components/node-position.tsx +++ b/web/app/components/workflow/nodes/_base/components/node-position.tsx @@ -1,23 +1,25 @@ 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' type NodePositionProps = { - nodeId: string + position: XYPosition, + width?: number | null, + height?: number | null, } const NodePosition = ({ - nodeId, + position, + width, + height, }: NodePositionProps) => { const { t } = useTranslation() const reactflow = useReactFlow() const store = useStoreApi() - if (!nodeId) return null - - const node = reactflow.getNode(nodeId) - if (node == null) return null + if (!position || !width || !height) return null const workflowContainer = document.getElementById('workflow-container') const { transform } = store.getState() @@ -25,18 +27,17 @@ const NodePosition = ({ 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, + x: (clientWidth - 400 - width * zoom) / 2 - position.x * zoom, + y: (clientHeight - height * zoom) / 2 - position.y * zoom, zoom: transform[2], }) }} diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx index 307b3fec7b..fbb0ef84a2 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/web/app/components/workflow/nodes/_base/panel.tsx @@ -56,6 +56,9 @@ const BasePanel: FC = ({ id, data, children, + position, + width, + height, }) => { const { t } = useTranslation() const { showMessageLogModal } = useAppStore(useShallow(state => ({ @@ -151,7 +154,7 @@ const BasePanel: FC = ({ ) } - +