Merge branch 'patternfly:main' into main

wise-king-sullyman · web-flow · commit 553dcda3a5ef · 2025-03-14T10:16:22.000-04:00
diff --git a/packages/demo-app-ts/src/demos/DragDrop.tsx b/packages/demo-app-ts/src/demos/DragDrop.tsx
@@ -14,7 +14,10 @@ import {
   useModel,
   useComponentFactory,
   ComponentFactory,
-  GraphElement
+  GraphElement,
+  DefaultEdge,
+  Edge,
+  isEdge
 } from '@patternfly/react-topology';
 import defaultComponentFactory from '../components/defaultComponentFactory';
 import DemoDefaultNode from '../components/DemoDefaultNode';
@@ -254,6 +257,166 @@ export const DndShiftRegroup = withTopologySetup(() => {
   return null;
 });
 
+export const DndEdges = withTopologySetup(() => {
+  useComponentFactory(defaultComponentFactory);
+  // support pan zoom and drag
+  useComponentFactory(
+    React.useCallback<ComponentFactory>((kind, type) => {
+      if (kind === ModelKind.graph) {
+        return withPanZoom()(GraphComponent);
+      }
+      if (type === 'group-drop') {
+        return withDndDrop<
+          GraphElement,
+          any,
+          { droppable?: boolean; hover?: boolean; canDrop?: boolean },
+          ElementProps
+        >({
+          accept: 'test',
+          canDrop: (item, monitor, props) => !!props && (item as Node).getParent() !== props.element,
+          collect: (monitor) => ({
+            droppable: monitor.isDragging(),
+            hover: monitor.isOver(),
+            canDrop: monitor.canDrop()
+          })
+        })(GroupHull);
+      }
+      if (type === 'node-drag') {
+        return withDndDrag<DragObjectWithType, Node, {}, ElementProps>({
+          item: { type: 'test' },
+          begin: (monitor, props) => {
+            props.element.raise();
+            return props.element;
+          },
+          drag: (event, monitor, props) => {
+            const nodeElement = props.element as Node;
+            nodeElement.setPosition(nodeElement.getPosition().clone().translate(event.dx, event.dy));
+          },
+          end: (dropResult, monitor, props) => {
+            if (monitor.didDrop() && dropResult && props) {
+              if (isEdge(dropResult)) {
+                const droppedEdge = dropResult as Edge;
+                const newEdge1 = {
+                  type: droppedEdge.getType(),
+                  id: `${droppedEdge.getSource().getId()}-${props.element.getId()}`,
+                  source: droppedEdge.getSource().getId(),
+                  target: props.element.getId()
+                };
+                const newEdge2 = {
+                  type: droppedEdge.getType(),
+                  id: `${props.element.getId()}-${droppedEdge.getTarget().getId()}`,
+                  source: props.element.getId(),
+                  target: droppedEdge.getTarget().getId()
+                };
+                const model = droppedEdge.getController().toModel();
+                const updateModel: Model = { edges: [newEdge1, newEdge2], nodes: model.nodes };
+                droppedEdge.getController().fromModel(updateModel, true);
+              } else {
+                dropResult.appendChild(props.element);
+              }
+            }
+          }
+        })(DemoDefaultNode);
+      }
+      if (type === 'edge') {
+        return withDndDrop<Node, any, { droppable?: boolean; hover?: boolean; canDrop?: boolean }, ElementProps>({
+          accept: 'test',
+          canDrop: (item, monitor, props) =>
+            !!props &&
+            (props.element as Edge).getSource().getId() !== item.getId() &&
+            (props.element as Edge).getTarget().getId() !== item.getId(),
+          collect: (monitor) => ({
+            droppable: monitor.isDragging(),
+            dropTarget: monitor.isOver(),
+            canDrop: monitor.canDrop()
+          })
+        })(DefaultEdge);
+      }
+      return undefined;
+    }, [])
+  );
+  useModel(
+    React.useMemo(
+      (): Model => ({
+        graph: {
+          id: 'g1',
+          type: 'graph'
+        },
+        nodes: [
+          {
+            id: 'gr1',
+            type: 'group-drop',
+            group: true,
+            children: ['n2', 'n3'],
+            style: {
+              padding: 10
+            }
+          },
+          {
+            id: 'gr2',
+            type: 'group-drop',
+            group: true,
+            children: ['n4', 'n5'],
+            style: {
+              padding: 10
+            }
+          },
+          {
+            id: 'n1',
+            type: 'node-drag',
+            x: 50,
+            y: 50,
+            width: 30,
+            height: 30
+          },
+          {
+            id: 'n2',
+            type: 'node',
+            x: 200,
+            y: 20,
+            width: 10,
+            height: 10
+          },
+          {
+            id: 'n3',
+            type: 'node',
+            x: 150,
+            y: 100,
+            width: 20,
+            height: 20
+          },
+          {
+            id: 'n4',
+            type: 'node',
+            x: 300,
+            y: 250,
+            width: 30,
+            height: 30
+          },
+          {
+            id: 'n5',
+            type: 'node',
+            x: 350,
+            y: 370,
+            width: 15,
+            height: 15
+          }
+        ],
+        edges: [
+          {
+            id: 'e1',
+            type: 'edge',
+            source: 'n2',
+            target: 'n4'
+          }
+        ]
+      }),
+      []
+    )
+  );
+  return null;
+});
+
 export const DragAndDrop: React.FunctionComponent = () => {
   const [activeKey, setActiveKey] = React.useState<string | number>(0);
 
@@ -270,6 +433,9 @@ export const DragAndDrop: React.FunctionComponent = () => {
         <Tab eventKey={1} title={<TabTitleText>Dnd Shift Regroup</TabTitleText>}>
           <DndShiftRegroup />
         </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Dnd Edges</TabTitleText>}>
+          <DndEdges />
+        </Tab>
       </Tabs>
     </div>
   );
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
@@ -25,7 +25,14 @@ import {
   groupDropTargetSpec,
   graphDropTargetSpec,
   NODE_DRAG_TYPE,
-  CREATE_CONNECTOR_DROP_TYPE
+  CREATE_CONNECTOR_DROP_TYPE,
+  edgeDropTargetSpec,
+  DragSourceSpec,
+  DragSpecOperationType,
+  EditableDragOperationType,
+  GraphElementProps,
+  isEdge,
+  Model
 } from '@patternfly/react-topology';
 import CustomPathNode from '../../components/CustomPathNode';
 import CustomPolygonNode from '../../components/CustomPolygonNode';
@@ -40,6 +47,55 @@ interface EdgeProps {
   element: Edge;
 }
 
+/* Extend the util 'nodeDragSourceSpec' to also handle dropping a node on an edge to split the edge */
+const nodeDragSourceEdgeExtensionSpec = (
+  type: string,
+  allowRegroup: boolean = true,
+  canEdit: boolean = false
+): DragSourceSpec<
+  DragObjectWithType,
+  DragSpecOperationType<EditableDragOperationType>,
+  GraphElement,
+  {
+    dragging?: boolean;
+    regrouping?: boolean;
+  },
+  GraphElementProps & { canEdit?: boolean }
+> => {
+  const standardSpec = nodeDragSourceSpec(type, allowRegroup, canEdit);
+  return {
+    ...standardSpec,
+    end: async (dropResult, monitor, props) => {
+      if (!monitor.isCancelled() && isEdge(dropResult) && props && monitor.didDrop()) {
+        const droppedEdge = dropResult as Edge;
+        const model = droppedEdge.getController().toModel();
+
+        const newEdge1 = {
+          type: droppedEdge.getType(),
+          id: `${droppedEdge.getSource().getId()}--${props.element.getId()}`,
+          source: droppedEdge.getSource().getId(),
+          target: props.element.getId(),
+          data: droppedEdge.getData()
+        };
+        const newEdge2 = {
+          type: droppedEdge.getType(),
+          id: `${props.element.getId()}--${droppedEdge.getTarget().getId()}`,
+          source: props.element.getId(),
+          target: droppedEdge.getTarget().getId(),
+          data: droppedEdge.getData()
+        };
+        const updateModel: Model = {
+          edges: [...model.edges.filter((e) => e.id !== droppedEdge.getId()), newEdge1, newEdge2],
+          nodes: model.nodes
+        };
+        droppedEdge.getController().fromModel(updateModel, true);
+        return undefined;
+      }
+      return standardSpec.end(dropResult, monitor, props);
+    }
+  };
+};
+
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
     return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
@@ -89,7 +145,7 @@ const demoComponentFactory: ComponentFactory = (
       })(
         withDndDrop(nodeDropTargetSpec([CONNECTOR_SOURCE_DROP, CONNECTOR_TARGET_DROP, CREATE_CONNECTOR_DROP_TYPE]))(
           withContextMenu(() => defaultMenu)(
-            withDragNode(nodeDragSourceSpec('node', true, true))(withSelection()(DemoNode))
+            withDragNode(nodeDragSourceEdgeExtensionSpec('node', true, true))(withSelection()(DemoNode))
           )
         )
       );
@@ -136,7 +192,11 @@ const demoComponentFactory: ComponentFactory = (
           collect: (monitor) => ({
             dragging: monitor.isDragging()
           })
-        })(withContextMenu(() => defaultMenu)(withSelection()(DemoEdge)))
+        })(
+          withDndDrop<Node, any, { droppable?: boolean; hover?: boolean; canDrop?: boolean }, EdgeProps>(
+            edgeDropTargetSpec
+          )(withContextMenu(() => defaultMenu)(withSelection()(DemoEdge)))
+        )
       );
     default:
       return undefined;
diff --git a/packages/module/src/components/edges/DefaultEdge.tsx b/packages/module/src/components/edges/DefaultEdge.tsx
@@ -10,8 +10,8 @@ import {
   NodeStatus,
   ScaleDetailsLevel
 } from '../../types';
-import { ConnectDragSource, OnSelect } from '../../behavior';
-import { getClosestVisibleParent, useHover } from '../../utils';
+import { ConnectDragSource, ConnectDropTarget, OnSelect } from '../../behavior';
+import { getClosestVisibleParent, useCombineRefs, useHover } from '../../utils';
 import { Layer } from '../layers';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-components';
@@ -65,6 +65,12 @@ interface DefaultEdgeProps {
   sourceDragRef?: ConnectDragSource;
   /** Ref to use to start the drag of the end of the edge. Part of WithTargetDragProps */
   targetDragRef?: ConnectDragSource;
+  /** A ref to add to the node for dropping. Part of WithDndDropProps */
+  dndDropRef?: ConnectDropTarget;
+  /** Flag if the current drag operation can be dropped on the edge */
+  canDrop?: boolean;
+  /** Flag if the node is the current drop target */
+  dropTarget?: boolean;
   /** Flag indicating if the element is selected. Part of WithSelectionProps */
   selected?: boolean;
   /** Function to call when the element should become selected (or deselected). Part of WithSelectionProps */
@@ -83,6 +89,9 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     dragging,
     sourceDragRef,
     targetDragRef,
+    dndDropRef,
+    canDrop,
+    dropTarget,
     edgeStyle,
     animationDuration,
     onShowRemoveConnector,
@@ -105,10 +114,10 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     onContextMenu
   }) => {
     const [hover, hoverRef] = useHover();
+    const edgeRef = useCombineRefs(hoverRef, dndDropRef);
     const startPoint = element.getStartPoint();
     const endPoint = element.getEndPoint();
 
-    // eslint-disable-next-line patternfly-react/no-layout-effect
     React.useLayoutEffect(() => {
       if (hover && !dragging) {
         onShowRemoveConnector && onShowRemoveConnector();
@@ -136,7 +145,12 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     );
 
     const edgeAnimationDuration = animationDuration ?? getEdgeAnimationDuration(element.getEdgeAnimationSpeed());
-    const linkClassName = css(styles.topologyEdgeLink, getEdgeStyleClassModifier(edgeStyle || element.getEdgeStyle()));
+    const linkClassName = css(
+      styles.topologyEdgeLink,
+      canDrop && 'pf-m-highlight',
+      canDrop && dropTarget && 'pf-m-drop-target',
+      getEdgeStyleClassModifier(edgeStyle || element.getEdgeStyle())
+    );
 
     const bendpoints = element.getBendpoints();
 
@@ -164,7 +178,7 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     return (
       <Layer id={dragging || hover ? TOP_LAYER : undefined}>
         <g
-          ref={hoverRef}
+          ref={edgeRef}
           data-test-id="edge-handler"
           className={groupClassName}
           onClick={onSelect}
diff --git a/packages/module/src/components/factories/components/componentUtils.ts b/packages/module/src/components/factories/components/componentUtils.ts
@@ -278,6 +278,20 @@ const edgeDragSourceSpec = (
   })
 });
 
+const edgeDropTargetSpec: DropTargetSpec<any, any, { droppable: boolean; dropTarget: boolean; canDrop: boolean }, any> =
+  {
+    accept: [NODE_DRAG_TYPE],
+    canDrop: (item, monitor, props) =>
+      !!props &&
+      (props.element as Edge).getSource().getId() !== item.id &&
+      (props.element as Edge).getTarget().getId() !== item.id,
+    collect: (monitor) => ({
+      droppable: monitor.isDragging(),
+      dropTarget: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  };
+
 const noDropTargetSpec: DropTargetSpec<GraphElement, any, {}, { element: GraphElement }> = {
   accept: [NODE_DRAG_TYPE, EDGE_DRAG_TYPE, CREATE_CONNECTOR_DROP_TYPE],
   canDrop: () => false
@@ -291,6 +305,7 @@ export {
   graphDropTargetSpec,
   groupDropTargetSpec,
   edgeDragSourceSpec,
+  edgeDropTargetSpec,
   noDropTargetSpec,
   REGROUP_OPERATION,
   MOVE_CONNECTOR_DROP_TYPE,
diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css
