fix: simple mode variables dnd (#3767)

* fix: simple mode variables dnd

* optimize dnd drag

packages/web/components/common/DndDrag/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Tbody } from '@chakra-ui/react';
-import React, { ReactNode, useState } from 'react';
+import React, { ReactElement, ReactNode, useState } from 'react';
 import {
   DragDropContext,
   Droppable,
@@ -14,22 +14,19 @@ export * from 'react-beautiful-dnd';
 type Props<T = any> = {
   onDragEndCb: (result: T[]) => void;
   renderClone?: DraggableChildrenFn;
-  children:
-    | ((provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ReactNode)
-    | ReactNode;
+  children: ({
+    provided,
+    snapshot,
+    draggingItemHeight
+  }: {
+    provided: DroppableProvided;
+    snapshot: DroppableStateSnapshot;
+    draggingItemHeight: number;
+  }) => ReactElement<HTMLElement, string>;
   dataList: T[];
-  isTable?: boolean;
-  zoom?: number;
 };
 
-function DndDrag<T>({
-  children,
-  renderClone,
-  onDragEndCb,
-  dataList,
-  isTable = false,
-  zoom = 1
-}: Props<T>) {
+function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>) {
   const [draggingItemHeight, setDraggingItemHeight] = useState(0);
 
   const onDragStart = (start: DragStart) => {
@@ -56,19 +53,7 @@ function DndDrag<T>({
   return (
     <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable" renderClone={renderClone}>
-        {(provided, snapshot) => {
-          return isTable ? (
-            <Tbody {...provided.droppableProps} ref={provided.innerRef}>
-              {typeof children !== 'function' && children}
-              {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
-            </Tbody>
-          ) : (
-            <Box {...provided.droppableProps} ref={provided.innerRef}>
-              {typeof children === 'function' && children(provided, snapshot)}
-              {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
-            </Box>
-          );
-        }}
+        {(provided, snapshot) => children({ provided, snapshot, draggingItemHeight })}
       </Droppable>
     </DragDropContext>
   );

projects/app/src/components/core/app/VariableEdit.tsx

@@ -9,7 +9,8 @@ import {
   Th,
   Td,
   TableContainer,
-  Stack
+  Stack,
+  Tbody
 } from '@chakra-ui/react';
 import { SmallAddIcon } from '@chakra-ui/icons';
 import {
@@ -30,7 +31,6 @@ import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import InputTypeConfig from '@/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig';
 import MyIconButton from '@fastgpt/web/components/common/Icon/button';
-import { useReactFlow, useViewport } from 'reactflow';
 import DndDrag, {
   Draggable,
   DraggableProvided,
@@ -60,14 +60,15 @@ export const addVariable = () => {
 
 const VariableEdit = ({
   variables = [],
-  onChange
+  onChange,
+  zoom = 1
 }: {
   variables?: VariableItemType[];
   onChange: (data: VariableItemType[]) => void;
+  zoom?: number;
 }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
-  const { zoom } = useViewport();
 
   const form = useForm<VariableItemType>();
   const { setValue, reset, watch, getValues } = form;
@@ -222,9 +223,9 @@ const VariableEdit = ({
                   variables={variables}
                 />
               )}
-              isTable
-              zoom={zoom}
             >
+              {({ provided, snapshot, draggingItemHeight }) => (
+                <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                   {formatVariables.map((item, index) => (
                     <Draggable key={item.id} draggableId={item.id} index={index}>
                       {(provided, snapshot) => (
@@ -240,6 +241,9 @@ const VariableEdit = ({
                       )}
                     </Draggable>
                   ))}
+                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
+                </Tbody>
+              )}
             </DndDrag>
           </Table>
         </TableContainer>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx

@@ -209,9 +209,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                       />
                     );
                   }}
-                  isTable
-                  zoom={zoom}
                 >
+                  {({ provided, snapshot, draggingItemHeight }) => (
+                    <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                       {inputs.map((item, index) => {
                         const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
                         return (
@@ -230,6 +230,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                           </Draggable>
                         );
                       })}
+                      {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
+                    </Tbody>
+                  )}
                 </DndDrag>
               </Table>
             </TableContainer>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx

@@ -64,9 +64,8 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
               nodeId={nodeId}
             />
           )}
-          zoom={zoom}
         >
-          {(provided) => (
+          {({ provided, snapshot, draggingItemHeight }) => (
             <Box {...provided.droppableProps} ref={provided.innerRef}>
               {ifElseList.map((conditionItem, conditionIndex) => (
                 <Draggable
@@ -87,6 +86,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                   )}
                 </Draggable>
               ))}
+              {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
             </Box>
           )}
         </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx

@@ -417,7 +417,7 @@ const InputTypeConfig = ({
                 );
               }}
             >
-              {(provided) => (
+              {({ provided, snapshot, draggingItemHeight }) => (
                 <Box
                   {...provided.droppableProps}
                   ref={provided.innerRef}
@@ -487,9 +487,7 @@ const InputTypeConfig = ({
                       )}
                     </Draggable>
                   ))}
-                  <Box h="0" w="0">
-                    {provided.placeholder}
-                  </Box>
+                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
                 </Box>
               )}
             </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, useMemo } from 'react';
-import { NodeProps } from 'reactflow';
+import { NodeProps, useViewport } from 'reactflow';
 import { Box } from '@chakra-ui/react';
 import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node.d';
 
@@ -13,12 +13,7 @@ import NodeCard from './render/NodeCard';
 import ScheduledTriggerConfig from '@/components/core/app/ScheduledTriggerConfig';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../context';
-import {
-  AppChatConfigType,
-  AppDetailType,
-  AppQGConfigType,
-  VariableItemType
-} from '@fastgpt/global/core/app/type';
+import { AppChatConfigType, AppDetailType, VariableItemType } from '@fastgpt/global/core/app/type';
 import { useMemoizedFn } from 'ahooks';
 import VariableEdit from '@/components/core/app/VariableEdit';
 import { AppContext } from '@/pageComponents/app/detail/context';
@@ -133,8 +128,9 @@ function ChatStartVariable({ chatConfig: { variables = [] }, setAppDetail }: Com
       }
     }));
   });
+  const { zoom } = useViewport();
 
-  return <VariableEdit variables={variables} onChange={(e) => updateVariables(e)} />;
+  return <VariableEdit variables={variables} onChange={(e) => updateVariables(e)} zoom={zoom} />;
 }
 
 function AutoExecute({ chatConfig: { autoExecute }, setAppDetail }: ComponentProps) {

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx

@@ -62,9 +62,8 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                   index={rubric.source.index}
                 />
               )}
-              zoom={zoom}
             >
-              {(provided) => (
+              {({ provided, snapshot, draggingItemHeight }) => (
                 <Box ref={provided.innerRef} {...provided.droppableProps}>
                   {options.map((item, i) => (
                     <Draggable key={item.key} index={i} draggableId={item.key}>
@@ -81,6 +80,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                       )}
                     </Draggable>
                   ))}
+                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
                 </Box>
               )}
             </DndDrag>