80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
import { EdgeLabelRenderer, getStraightPath } from 'reactflow';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import { useMutation } from '@apollo/client';
|
|
import { CREATE_STEP } from 'graphql/mutations/create-step';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export default function Edge({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
source,
|
|
data: { flowId, setCurrentStepId, flowActive, layouted },
|
|
}) {
|
|
const [createStep, { loading: creationInProgress }] =
|
|
useMutation(CREATE_STEP);
|
|
const queryClient = useQueryClient();
|
|
const [edgePath, labelX, labelY] = getStraightPath({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
});
|
|
|
|
const addStep = async (previousStepId) => {
|
|
const mutationInput = {
|
|
previousStep: {
|
|
id: previousStepId,
|
|
},
|
|
flow: {
|
|
id: flowId,
|
|
},
|
|
};
|
|
|
|
const createdStep = await createStep({
|
|
variables: { input: mutationInput },
|
|
});
|
|
|
|
const createdStepId = createdStep.data.createStep.id;
|
|
setCurrentStepId(createdStepId);
|
|
await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<EdgeLabelRenderer>
|
|
<IconButton
|
|
onClick={() => addStep(source)}
|
|
color="primary"
|
|
sx={{
|
|
position: 'absolute',
|
|
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
pointerEvents: 'all',
|
|
visibility: layouted ? 'visible' : 'hidden',
|
|
}}
|
|
disabled={creationInProgress || flowActive}
|
|
>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</EdgeLabelRenderer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Edge.propTypes = {
|
|
sourceX: PropTypes.number.isRequired,
|
|
sourceY: PropTypes.number.isRequired,
|
|
targetX: PropTypes.number.isRequired,
|
|
targetY: PropTypes.number.isRequired,
|
|
source: PropTypes.string.isRequired,
|
|
data: PropTypes.shape({
|
|
flowId: PropTypes.string.isRequired,
|
|
setCurrentStepId: PropTypes.func.isRequired,
|
|
flowActive: PropTypes.bool.isRequired,
|
|
layouted: PropTypes.bool,
|
|
}).isRequired,
|
|
};
|