Skip to content

fix(Drag&Drop): Enabled container drag and drop support #2877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
shivamG640 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(Drag&Drop): Enabled container drag and drop support #2877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/ui/src/components/Visualization/Custom/Edge/AddStepIcon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,8 @@
color: var(--pf-topology__edge--Stroke);
}
}

&__icon__validDropTarget &__icon {
border: 3px dashed var(--custom-component-dropTarget);
}
}
8 changes: 6 additions & 2 deletions packages/ui/src/components/Visualization/Custom/Edge/CustomEdge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,16 @@ describe('CustomEdge', () => {
it('should render without error', () => {
const parentElement = new BaseGraph();
const element = new BaseEdge();
const edgeSource = new BaseNode();
const edgeTarget = new BaseNode();
edgeSource.setParent(parentElement);
edgeTarget.setParent(parentElement);
element.setSource(edgeSource);
element.setTarget(edgeTarget);
const controller = ControllerService.createController();
parentElement.setController(controller);
element.setController(controller);
element.setParent(parentElement);
element.setSource(new BaseNode());
element.setTarget(new BaseNode());
element.setStartPoint(0, 0);
element.setEndPoint(100, 100);

Expand Down
117 changes: 84 additions & 33 deletions packages/ui/src/components/Visualization/Custom/Edge/CustomEdge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ import {
GraphElement,
GraphElementProps,
isEdge,
Layer,
observer,
Point,
TOP_LAYER,
useDndDrop,
} from '@patternfly/react-topology';
import { clsx } from 'clsx';
Expand All @@ -23,7 +25,7 @@ import { useEntityContext } from '../../../../hooks/useEntityContext/useEntityCo
import { AddStepMode, IVisualizationNode } from '../../../../models';
import { LayoutType } from '../../Canvas';
import { CanvasDefaults } from '../../Canvas/canvas.defaults';
import { canDropOnEdge, NODE_DRAG_TYPE } from '../customComponentUtils';
import { canDropOnEdge, GROUP_DRAG_TYPE, NODE_DRAG_TYPE } from '../customComponentUtils';
import { AddStepIcon } from './AddStepIcon';

type DefaultEdgeProps = Parameters<typeof DefaultEdge>[0];
Expand All @@ -46,15 +48,23 @@ export const CustomEdge: FunctionComponent<CustomEdgeProps> = observer(({ elemen
const customNodeDropTargetSpec: DropTargetSpec<
GraphElement,
unknown,
{ droppable: boolean; hover: boolean; canDrop: boolean },
{
droppable: boolean;
hover: boolean;
canDrop: boolean;
dragItemType: string | undefined;
dragItem: GraphElement | undefined;
},
GraphElementProps
> = useMemo(
() => ({
accept: [NODE_DRAG_TYPE],
accept: [NODE_DRAG_TYPE, GROUP_DRAG_TYPE],
canDrop: (item, _monitor, _props) =>
canDropOnEdge(item.getData().vizNode, element, entitiesContext.camelResource, catalogModalContext),
collect: (monitor) => ({
droppable: monitor.isDragging(),
dragItemType: monitor.getItemType(),
dragItem: monitor.getItem(),
hover: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
Expand All @@ -63,6 +73,14 @@ export const CustomEdge: FunctionComponent<CustomEdgeProps> = observer(({ elemen
);

const [dndDropProps, dndDropRef] = useDndDrop(customNodeDropTargetSpec);
const dragItemType = dndDropProps.dragItemType;
const dragItem = dndDropProps.dragItem;
const edgeSourceParent = element.getSource().getParent()?.getId();
const edgeTargetParent = element.getTarget().getParent()?.getId();
const refreshEdge =
dragItemType === GROUP_DRAG_TYPE &&
edgeSourceParent.slice(0, dragItem?.getId().length) === dragItem?.getId() &&
edgeTargetParent.slice(0, dragItem?.getId().length) === dragItem?.getId();

/* If the edge connects to nodes in a collapsed group don't draw */
const sourceParent = getClosestVisibleParent(element.getSource());
Expand Down Expand Up @@ -104,37 +122,70 @@ export const CustomEdge: FunctionComponent<CustomEdgeProps> = observer(({ elemen
}

return (
<g className="custom-edge" ref={dndDropRef}>
<path className="custom-edge__background" d={edgeDRef.current} />
<path
className={clsx('custom-edge__body', {
'custom-edge__body__validDropTarget': dndDropProps.hover && dndDropProps.canDrop,
})}
d={edgeDRef.current}
/>
<ConnectorArrow
isTarget
className={clsx('custom-edge__connector', {
'custom-edge__connector__validDropTarget': dndDropProps.hover && dndDropProps.canDrop,
})}
startPoint={startPointRef.current}
endPoint={endPointRef.current}
/>
<Layer id={refreshEdge ? TOP_LAYER : undefined}>
<g className="custom-edge" ref={dndDropRef}>
<path className="custom-edge__background" d={edgeDRef.current} />
<path
className={clsx('custom-edge__body', {
'custom-edge__body__validDropTarget': dndDropProps.hover && dndDropProps.canDrop,
})}
d={edgeDRef.current}
/>
<ConnectorArrow
isTarget
className={clsx('custom-edge__connector', {
'custom-edge__connector__validDropTarget': dndDropProps.hover && dndDropProps.canDrop,
})}
startPoint={startPointRef.current}
endPoint={endPointRef.current}
/>

{!dndDropProps.droppable && shouldShowPrepend && (
<foreignObject x={x} y={y} width={CanvasDefaults.ADD_STEP_ICON_SIZE} height={CanvasDefaults.ADD_STEP_ICON_SIZE}>
<AddStepIcon
className="custom-edge__add-step"
title="Add step"
vizNode={vizNode}
mode={AddStepMode.PrependStep}
{!dndDropProps.droppable && shouldShowPrepend && (
<foreignObject
x={x}
y={y}
width={CanvasDefaults.ADD_STEP_ICON_SIZE}
height={CanvasDefaults.ADD_STEP_ICON_SIZE}
>
<Icon size="lg">
<PlusCircleIcon />
</Icon>
</AddStepIcon>
</foreignObject>
)}
</g>
<AddStepIcon
className="custom-edge__add-step"
title="Add step"
vizNode={vizNode}
mode={AddStepMode.PrependStep}
>
<Icon size="lg">
<PlusCircleIcon />
</Icon>
</AddStepIcon>
</foreignObject>
)}

{dndDropProps.droppable && shouldShowPrepend && dndDropProps.hover && dndDropProps.canDrop && (
<foreignObject
x={
startPointRef.current.x +
(endPointRef.current.x - startPointRef.current.x - CanvasDefaults.ADD_STEP_ICON_SIZE) / 2
}
y={
startPointRef.current.y +
(endPointRef.current.y - startPointRef.current.y - CanvasDefaults.ADD_STEP_ICON_SIZE) / 2
}
width={CanvasDefaults.ADD_STEP_ICON_SIZE}
height={CanvasDefaults.ADD_STEP_ICON_SIZE}
>
<AddStepIcon
className="add-step-icon__icon__validDropTarget"
title="Add step"
vizNode={vizNode}
mode={AddStepMode.PrependStep}
>
<Icon size="lg">
<PlusCircleIcon />
</Icon>
</AddStepIcon>
</foreignObject>
)}
</g>
</Layer>
);
});
12 changes: 12 additions & 0 deletions packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,18 @@
border-color: var(--pf-topology__node--m-danger--Background--Fill);
box-shadow: var(--custom-node-Shadow);
}

&__draggedGroup {
@include custom.drag-group;
}

&__dropTarget-right {
border-right: var(--custom-group-border-dropTarget);
}

&__dropTarget-left {
border-left: var(--custom-group-border-dropTarget);
}
}

&__disabled-icon {
Expand Down
Loading
Loading