fix: simple mode variables dnd (#3767)

* fix: simple mode variables dnd

* optimize dnd drag

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,24 +223,27 @@ const VariableEdit = ({
                   variables={variables}
                 />
               )}
-              isTable
-              zoom={zoom}
             >
-              {formatVariables.map((item, index) => (
-                <Draggable key={item.id} draggableId={item.id} index={index}>
-                  {(provided, snapshot) => (
-                    <TableItem
-                      provided={provided}
-                      snapshot={snapshot}
-                      item={item}
-                      reset={reset}
-                      onChange={onChange}
-                      variables={variables}
-                      key={item.id}
-                    />
-                  )}
-                </Draggable>
-              ))}
+              {({ provided, snapshot, draggingItemHeight }) => (
+                <Tbody {...provided.droppableProps} ref={provided.innerRef}>
+                  {formatVariables.map((item, index) => (
+                    <Draggable key={item.id} draggableId={item.id} index={index}>
+                      {(provided, snapshot) => (
+                        <TableItem
+                          provided={provided}
+                          snapshot={snapshot}
+                          item={item}
+                          reset={reset}
+                          onChange={onChange}
+                          variables={variables}
+                          key={item.id}
+                        />
+                      )}
+                    </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,27 +209,30 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                       />
                     );
                   }}
-                  isTable
-                  zoom={zoom}
                 >
-                  {inputs.map((item, index) => {
-                    const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
-                    return (
-                      <Draggable key={item.key} draggableId={item.key} index={index}>
-                        {(provided, snapshot) => (
-                          <TableItem
-                            provided={provided}
-                            snapshot={snapshot}
-                            key={item.key}
-                            item={item}
-                            icon={icon}
-                            setEditField={setEditField}
-                            onDelete={onDelete}
-                          />
-                        )}
-                      </Draggable>
-                    );
-                  })}
+                  {({ provided, snapshot, draggingItemHeight }) => (
+                    <Tbody {...provided.droppableProps} ref={provided.innerRef}>
+                      {inputs.map((item, index) => {
+                        const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
+                        return (
+                          <Draggable key={item.key} draggableId={item.key} index={index}>
+                            {(provided, snapshot) => (
+                              <TableItem
+                                provided={provided}
+                                snapshot={snapshot}
+                                key={item.key}
+                                item={item}
+                                icon={icon}
+                                setEditField={setEditField}
+                                onDelete={onDelete}
+                              />
+                            )}
+                          </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>