File size: 2,372 Bytes
4114d85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import { getBezierPath, EdgeText } from 'reactflow'
import PropTypes from 'prop-types'
import { useDispatch } from 'react-redux'
import { useContext } from 'react'
import { SET_DIRTY } from 'store/actions'
import { flowContext } from 'store/context/ReactFlowContext'
import './index.css'
const foreignObjectSize = 40
const ButtonEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, markerEnd }) => {
const [edgePath, edgeCenterX, edgeCenterY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition
})
const { deleteEdge } = useContext(flowContext)
const dispatch = useDispatch()
const onEdgeClick = (evt, id) => {
evt.stopPropagation()
deleteEdge(id)
dispatch({ type: SET_DIRTY })
}
return (
<>
<path id={id} style={style} className='react-flow__edge-path' d={edgePath} markerEnd={markerEnd} />
{data && data.label && (
<EdgeText
x={sourceX + 10}
y={sourceY + 10}
label={data.label}
labelStyle={{ fill: 'black' }}
labelBgStyle={{ fill: 'transparent' }}
labelBgPadding={[2, 4]}
labelBgBorderRadius={2}
/>
)}
<foreignObject
width={foreignObjectSize}
height={foreignObjectSize}
x={edgeCenterX - foreignObjectSize / 2}
y={edgeCenterY - foreignObjectSize / 2}
className='edgebutton-foreignobject'
requiredExtensions='http://www.w3.org/1999/xhtml'
>
<div>
<button className='edgebutton' onClick={(event) => onEdgeClick(event, id)}>
×
</button>
</div>
</foreignObject>
</>
)
}
ButtonEdge.propTypes = {
id: PropTypes.string,
sourceX: PropTypes.number,
sourceY: PropTypes.number,
targetX: PropTypes.number,
targetY: PropTypes.number,
sourcePosition: PropTypes.any,
targetPosition: PropTypes.any,
style: PropTypes.object,
data: PropTypes.object,
markerEnd: PropTypes.any
}
export default ButtonEdge
|