feat: freeze edges while dragging associated nodes#310
feat: freeze edges while dragging associated nodes#310jeff-phillips-18 merged 1 commit intopatternfly:mainfrom
Conversation
jeff-phillips-18
left a comment
jeff-phillips-18
left a comment
There was a problem hiding this comment.
Thanks @shivamG640! Looking really good. A few comments.
| /** A ref to add to the node for dropping. Part of WithDndDropProps */ | ||
| dndDropRef?: ConnectDropTarget; | ||
| /** Flag if the current drag operation is dragging something that can be dropped on the edge */ | ||
| droppable?: boolean; |
There was a problem hiding this comment.
I think we should add a new property like endpointDragging which would indicate either the source or target node is being dragged. Applications that allow dropping on an edge may need to differentiate.
This would require the new property and for endpointDragging to be determined in edgeDropTargetSpec.
Here is what I came up with for determining this value:
const edgeEndpointIsDragging = (monitor: any, props: EdgeComponentProps) => {
if (!monitor.isDragging()) {
return false;
}
if (monitor.getItemType() === NODE_DRAG_TYPE) {
return (
monitor.getItem().element.id === props.element.getSource().getId() ||
monitor.getItem().element.id === props.element.getTarget().getId()
);
}
return false;
};
const edgeDropTargetSpec =
...
collect: (monitor, props) => ({
droppable: monitor.isDragging(),
dropTarget: monitor.isOver(),
canDrop: monitor.canDrop(),
endpointDragging: edgeEndpointIsDragging(monitor, { element: props.element as Edge })
})
| terminalType={endTerminalType} | ||
| status={endTerminalStatus} | ||
| highlight={dragging || hover} | ||
| startPoint={bendpoints[bendpoints.length - 1] || startPointRef.current} |
There was a problem hiding this comment.
I think we need to set startPoint and endPoint for both terminals to the frozen values when shouldFreeze is true. This means determining them each time (based on bendpoints) and saving a ref to use when frozen.
|
@jeff-phillips-18, Thanks for taking the time to review and share your feedback. |
jeff-phillips-18
left a comment
jeff-phillips-18
left a comment
There was a problem hiding this comment.
LGTM! Thanks @shivamG640. Yes, please squash the commits.
shivamG640
force-pushed
the
freeze-edge-during-node-drag
branch
from
80538fa to
8e45bd4
Compare
|
Ready to merge. Thanks again for your help on this! @jeff-phillips-18 |
|
🎉 This PR is included in version 6.5.0-prerelease.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
3 participants
What
Closes #304
Description
When a node is dragged, its associated edges currently move along with it, which can result in an undesirable UX in scenarios where nodes need to be dropped onto edges. This PR enables an optional static behavior for
DefaultEdgeduring node drag operations, allowing edges to remain fixed while the node is being moved.Type of change
Screen shots / Gifs for design review
Screencast.From.2026-03-17.16-32-21.mp4