Feat(DND): Enable Simple DND

packages/ui/src/components/Visualization/Canvas/controller.service.ts

@@ -12,7 +12,7 @@ import {
   withPanZoom,
 } from '@patternfly/react-topology';
 import { CustomGroupWithSelection, CustomNodeWithSelection, NoBendpointsEdge } from '../Custom';
-import { PlaceholderNode } from '../Custom/Node/PlaceholderNode';
+import { PlaceholderNodeDroppable } from '../Custom/Node/PlaceholderNode';
 import { LayoutType } from './canvas.models';
 import { CustomEdge } from '../Custom/Edge/CustomEdge';
 
@@ -52,7 +52,7 @@ export class ControllerService {
       case 'group':
         return CustomGroupWithSelection;
       case 'node-placeholder':
-        return PlaceholderNode;
+        return PlaceholderNodeDroppable;
       default:
         switch (kind) {
           case ModelKind.graph:

packages/ui/src/components/Visualization/Custom/Group/CustomGroupCollapsible.tsx

@@ -2,7 +2,7 @@ import { isNode, observer } from '@patternfly/react-topology';
 import { FunctionComponent } from 'react';
 import { useCollapseStep } from '../hooks/collapse-step.hook';
 import { CustomNodeWithSelection } from '../Node/CustomNode';
-import { CustomGroupExpanded } from './CustomGroupExpanded';
+import { CustomGroupExpendedWithDndDrop } from './CustomGroupExpanded';
 import { CustomGroupProps } from './Group.models';
 
 export const CustomGroupCollapsible: FunctionComponent<CustomGroupProps> = observer(
@@ -26,7 +26,7 @@ export const CustomGroupCollapsible: FunctionComponent<CustomGroupProps> = obser
     }
 
     return (
-      <CustomGroupExpanded
+      <CustomGroupExpendedWithDndDrop
         {...rest}
         element={element}
         onCollapseToggle={() => {

packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx

@@ -2,7 +2,10 @@ import { Icon } from '@patternfly/react-core';
 import { ArrowDownIcon, ArrowRightIcon, BanIcon } from '@patternfly/react-icons';
 import {
   AnchorEnd,
+  DropTargetSpec,
   GROUPS_LAYER,
+  GraphElement,
+  GraphElementProps,
   Layer,
   Node,
   Rect,
@@ -12,6 +15,7 @@ import {
   useAnchor,
   useHover,
   useSelection,
+  withDndDrop,
 } from '@patternfly/react-topology';
 import { FunctionComponent, useContext, useRef } from 'react';
 import { AddStepMode, IVisualizationNode, NodeToolbarTrigger } from '../../../../models';
@@ -25,7 +29,7 @@ import './CustomGroupExpanded.scss';
 import { CustomGroupProps } from './Group.models';
 
 export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer(
-  ({ element, onContextMenu, onCollapseToggle }) => {
+  ({ element, onContextMenu, onCollapseToggle, dndDropRef, droppable }) => {
     if (!isNode(element)) {
       throw new Error('CustomGroupExpanded must be used only on Node elements');
     }
@@ -41,7 +45,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
       CanvasDefaults.HOVER_DELAY_IN,
       CanvasDefaults.HOVER_DELAY_OUT,
     );
-    const boxRef = useRef<Rect>(element.getBounds());
+    const boxRef = useRef<Rect | null>(null);
     const shouldShowToolbar =
       settingsAdapter.getSettings().nodeToolbarTrigger === NodeToolbarTrigger.onHover
         ? isGHover || isToolbarHover || isSelected
@@ -58,7 +62,9 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
       return null;
     }
 
-    boxRef.current = element.getBounds();
+    if (!droppable || !boxRef.current) {
+      boxRef.current = element.getBounds();
+    }
     const toolbarWidth = Math.max(CanvasDefaults.STEP_TOOLBAR_WIDTH, boxRef.current.width);
     const toolbarX = boxRef.current.x + (boxRef.current.width - toolbarWidth) / 2;
     const toolbarY = boxRef.current.y - CanvasDefaults.STEP_TOOLBAR_HEIGHT;
@@ -83,6 +89,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
           onContextMenu={onContextMenu}
         >
           <foreignObject
+            ref={dndDropRef}
             data-nodelabel={label}
             x={boxRef.current.x}
             y={boxRef.current.y}
@@ -145,3 +152,15 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
     );
   },
 );
+
+const groupDropTargetSpec: DropTargetSpec<GraphElement, unknown, object, GraphElementProps> = {
+  accept: ['#node#'],
+  canDrop: () => {
+    return false;
+  },
+  collect: (monitor) => ({
+    droppable: monitor.isDragging(),
+  }),
+};
+
+export const CustomGroupExpendedWithDndDrop = withDndDrop(groupDropTargetSpec)(CustomGroupExpanded);

packages/ui/src/components/Visualization/Custom/Group/Group.models.ts

@@ -1,9 +1,15 @@
-import type { ElementModel, GraphElement, DefaultGroup as TopologyDefaultGroup } from '@patternfly/react-topology';
+import type {
+  ElementModel,
+  GraphElement,
+  DefaultGroup as TopologyDefaultGroup,
+  WithDndDropProps,
+} from '@patternfly/react-topology';
 import { CanvasNode } from '../../Canvas';
 
 type DefaultGroupProps = Parameters<typeof TopologyDefaultGroup>[0];
-export interface CustomGroupProps extends DefaultGroupProps {
+export interface CustomGroupProps extends DefaultGroupProps, WithDndDropProps {
   element: GraphElement<ElementModel, CanvasNode['data']>;
   /** Toggle node collapse / expand */
   onCollapseToggle?: () => void;
+  droppable?: boolean;
 }

packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss

@@ -9,6 +9,11 @@
       flex-flow: column nowrap;
       justify-content: space-around;
 
+      &__dropTarget {
+        border: 3px dashed var(--custom-node-dropTarget-BorderColor);
+        border-radius: 5px;
+      }
+
       &__image {
         position: relative;
         display: flex;