Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 06a8a5e2 by heheer Committed by GitHub
Options

fix: simple mode variables dnd (#3767) 

* fix: simple mode variables dnd

* optimize dnd drag
parent c42deab6
Showing with 37 additions and 51 deletions
packages/web/components/common/DndDrag/index.tsx
import { Box, Tbody } from '@chakra-ui/react'; import { Box, Tbody } from '@chakra-ui/react';
import React, { ReactNode, useState } from 'react'; import React, { ReactElement, ReactNode, useState } from 'react';
import { import {
DragDropContext, DragDropContext,
Droppable, Droppable,
...@@ -14,22 +14,19 @@ export * from 'react-beautiful-dnd'; ...@@ -14,22 +14,19 @@ export * from 'react-beautiful-dnd';
type Props<T = any> = { type Props<T = any> = {
onDragEndCb: (result: T[]) => void; onDragEndCb: (result: T[]) => void;
renderClone?: DraggableChildrenFn; renderClone?: DraggableChildrenFn;
children: children: ({
| ((provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ReactNode) provided,
| ReactNode; snapshot,
draggingItemHeight
}: {
provided: DroppableProvided;
snapshot: DroppableStateSnapshot;
draggingItemHeight: number;
}) => ReactElement<HTMLElement, string>;
dataList: T[]; dataList: T[];
isTable?: boolean;
zoom?: number;
}; };
function DndDrag<T>({ function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>) {
children,
renderClone,
onDragEndCb,
dataList,
isTable = false,
zoom = 1
}: Props<T>) {
const [draggingItemHeight, setDraggingItemHeight] = useState(0); const [draggingItemHeight, setDraggingItemHeight] = useState(0);
const onDragStart = (start: DragStart) => { const onDragStart = (start: DragStart) => {
...@@ -56,19 +53,7 @@ function DndDrag<T>({ ...@@ -56,19 +53,7 @@ function DndDrag<T>({
return ( return (
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}> <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" renderClone={renderClone}> <Droppable droppableId="droppable" renderClone={renderClone}>
{(provided, snapshot) => { {(provided, snapshot) => children({ provided, snapshot, draggingItemHeight })}
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>
);
}}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
); );
......
projects/app/src/components/core/app/VariableEdit.tsx
...@@ -9,7 +9,8 @@ import { ...@@ -9,7 +9,8 @@ import {
Th, Th,
Td, Td,
TableContainer, TableContainer,
Stack Stack,
Tbody
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { SmallAddIcon } from '@chakra-ui/icons'; import { SmallAddIcon } from '@chakra-ui/icons';
import { import {
...@@ -30,7 +31,6 @@ import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel'; ...@@ -30,7 +31,6 @@ import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip'; import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import InputTypeConfig from '@/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig'; import InputTypeConfig from '@/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig';
import MyIconButton from '@fastgpt/web/components/common/Icon/button'; import MyIconButton from '@fastgpt/web/components/common/Icon/button';
import { useReactFlow, useViewport } from 'reactflow';
import DndDrag, { import DndDrag, {
Draggable, Draggable,
DraggableProvided, DraggableProvided,
...@@ -60,14 +60,15 @@ export const addVariable = () => { ...@@ -60,14 +60,15 @@ export const addVariable = () => {
const VariableEdit = ({ const VariableEdit = ({
variables = [], variables = [],
onChange onChange,
zoom = 1
}: { }: {
variables?: VariableItemType[]; variables?: VariableItemType[];
onChange: (data: VariableItemType[]) => void; onChange: (data: VariableItemType[]) => void;
zoom?: number;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const { zoom } = useViewport();
const form = useForm<VariableItemType>(); const form = useForm<VariableItemType>();
const { setValue, reset, watch, getValues } = form; const { setValue, reset, watch, getValues } = form;
...@@ -222,9 +223,9 @@ const VariableEdit = ({ ...@@ -222,9 +223,9 @@ const VariableEdit = ({
variables={variables} variables={variables}
/> />
)} )}
isTable
zoom={zoom}
> >
{({ provided, snapshot, draggingItemHeight }) => (
<Tbody {...provided.droppableProps} ref={provided.innerRef}>
{formatVariables.map((item, index) => ( {formatVariables.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}> <Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
...@@ -240,6 +241,9 @@ const VariableEdit = ({ ...@@ -240,6 +241,9 @@ const VariableEdit = ({
)} )}
</Draggable> </Draggable>
))} ))}
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
</Tbody>
)}
</DndDrag> </DndDrag>
</Table> </Table>
</TableContainer> </TableContainer>
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx
...@@ -209,9 +209,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => { ...@@ -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) => { {inputs.map((item, index) => {
const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon; const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
return ( return (
...@@ -230,6 +230,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => { ...@@ -230,6 +230,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
</Draggable> </Draggable>
); );
})} })}
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
</Tbody>
)}
</DndDrag> </DndDrag>
</Table> </Table>
</TableContainer> </TableContainer>
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
...@@ -64,9 +64,8 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => { ...@@ -64,9 +64,8 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
nodeId={nodeId} nodeId={nodeId}
/> />
)} )}
zoom={zoom}
> >
{(provided) => ( {({ provided, snapshot, draggingItemHeight }) => (
<Box {...provided.droppableProps} ref={provided.innerRef}> <Box {...provided.droppableProps} ref={provided.innerRef}>
{ifElseList.map((conditionItem, conditionIndex) => ( {ifElseList.map((conditionItem, conditionIndex) => (
<Draggable <Draggable
...@@ -87,6 +86,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => { ...@@ -87,6 +86,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
)} )}
</Draggable> </Draggable>
))} ))}
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
</Box> </Box>
)} )}
</DndDrag> </DndDrag>
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
...@@ -417,7 +417,7 @@ const InputTypeConfig = ({ ...@@ -417,7 +417,7 @@ const InputTypeConfig = ({
); );
}} }}
> >
{(provided) => ( {({ provided, snapshot, draggingItemHeight }) => (
<Box <Box
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}
...@@ -487,9 +487,7 @@ const InputTypeConfig = ({ ...@@ -487,9 +487,7 @@ const InputTypeConfig = ({
)} )}
</Draggable> </Draggable>
))} ))}
<Box h="0" w="0"> {snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
{provided.placeholder}
</Box>
</Box> </Box>
)} )}
</DndDrag> </DndDrag>
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
import React, { Dispatch, useMemo } from 'react'; import React, { Dispatch, useMemo } from 'react';
import { NodeProps } from 'reactflow'; import { NodeProps, useViewport } from 'reactflow';
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node.d'; import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node.d';
...@@ -13,12 +13,7 @@ import NodeCard from './render/NodeCard'; ...@@ -13,12 +13,7 @@ import NodeCard from './render/NodeCard';
import ScheduledTriggerConfig from '@/components/core/app/ScheduledTriggerConfig'; import ScheduledTriggerConfig from '@/components/core/app/ScheduledTriggerConfig';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context'; import { WorkflowContext } from '../../context';
import { import { AppChatConfigType, AppDetailType, VariableItemType } from '@fastgpt/global/core/app/type';
AppChatConfigType,
AppDetailType,
AppQGConfigType,
VariableItemType
} from '@fastgpt/global/core/app/type';
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import VariableEdit from '@/components/core/app/VariableEdit'; import VariableEdit from '@/components/core/app/VariableEdit';
import { AppContext } from '@/pageComponents/app/detail/context'; import { AppContext } from '@/pageComponents/app/detail/context';
...@@ -133,8 +128,9 @@ function ChatStartVariable({ chatConfig: { variables = [] }, setAppDetail }: Com ...@@ -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) { 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>) => { ...@@ -62,9 +62,8 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
index={rubric.source.index} index={rubric.source.index}
/> />
)} )}
zoom={zoom}
> >
{(provided) => ( {({ provided, snapshot, draggingItemHeight }) => (
<Box ref={provided.innerRef} {...provided.droppableProps}> <Box ref={provided.innerRef} {...provided.droppableProps}>
{options.map((item, i) => ( {options.map((item, i) => (
<Draggable key={item.key} index={i} draggableId={item.key}> <Draggable key={item.key} index={i} draggableId={item.key}>
...@@ -81,6 +80,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => { ...@@ -81,6 +80,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
)} )}
</Draggable> </Draggable>
))} ))}
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
</Box> </Box>
)} )}
</DndDrag> </DndDrag>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment