fix: Don't display edges inside collapsed groups

patternfly · Apr 5, 2023 · 5bf67c9 · 5bf67c9
1 parent 2418be1
commit 5bf67c9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/packages/module/src/components/edges/DefaultEdge.tsx b/packages/module/src/components/edges/DefaultEdge.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { observer } from 'mobx-react';
-import { Edge, EdgeTerminalType, NodeStatus } from '../../types';
+import { Edge, EdgeTerminalType, isNode, NodeStatus } from '../../types';
 import { ConnectDragSource, OnSelect } from '../../behavior';
-import { useHover } from '../../utils';
+import { getClosestVisibleParent, useHover } from '../../utils';
 import { Layer } from '../layers';
 import { css } from '@patternfly/react-styles';
 import styles from '../../css/topology-components';
@@ -103,6 +103,13 @@ const DefaultEdge: React.FunctionComponent<DefaultEdgeProps> = ({
     }
   }, [hover, dragging, onShowRemoveConnector, onHideRemoveConnector]);
 
+  // If the edge connects to nodes in a collapsed group don't draw
+  const sourceParent = getClosestVisibleParent(element.getSource());
+  const targetParent = getClosestVisibleParent(element.getTarget());
+  if (isNode(sourceParent) && sourceParent.isCollapsed() && sourceParent === targetParent) {
+    return null;
+  }
+
   const groupClassName = css(
     styles.topologyEdge,
     className,

diff --git a/packages/module/src/components/factories/components/componentUtils.ts b/packages/module/src/components/factories/components/componentUtils.ts
@@ -215,25 +215,33 @@ const graphDropTargetSpec = (
   dropHint: 'create'
 });
 
+const isChildOfGroup = (group: Node, node: Node): boolean =>
+  group
+    ?.getAllNodeChildren?.()
+    .map((n: Node) => n.getId())
+    .includes(node.getId());
+
 const groupDropTargetSpec: DropTargetSpec<
   any,
   any,
   { droppable: boolean; dropTarget: boolean; canDrop: boolean },
   any
-> = {
+  > = {
   accept: [NODE_DRAG_TYPE, EDGE_DRAG_TYPE, CREATE_CONNECTOR_DROP_TYPE],
-  canDrop: (item, monitor) =>
+  canDrop: (item, monitor, props) =>
     monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }) &&
-    (monitor.getOperation()?.type === REGROUP_OPERATION || monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
-  collect: monitor => ({
+    (monitor.getOperation()?.type === REGROUP_OPERATION ||
+      (monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE && !isChildOfGroup(props?.element, item))),
+  collect: (monitor, props) => ({
     droppable: monitor.isDragging() && monitor.getOperation()?.type === REGROUP_OPERATION,
     dropTarget: monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }),
     canDrop:
       monitor.isDragging() &&
-      (monitor.getOperation()?.type === REGROUP_OPERATION || monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
-    dragRegroupable: monitor.isDragging() && monitor.getItem()?.allowRegroup
-  }),
-  dropHint: 'create'
+      (monitor.getOperation()?.type === REGROUP_OPERATION ||
+        (monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE && !isChildOfGroup(props?.element, monitor?.getItem()))),
+    dragRegroupable: monitor.isDragging() && monitor.getItem()?.allowRegroup,
+    dropHint: 'create'
+  })
 };
 
 const edgeDragSourceSpec = (