Skip to content

Commit

Permalink
fix: Don't display edges inside collapsed groups
Browse files Browse the repository at this point in the history
  • Loading branch information
jeff-phillips-18 committed Apr 5, 2023
1 parent 2418be1 commit 5bf67c9
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 10 deletions.
11 changes: 9 additions & 2 deletions packages/module/src/components/edges/DefaultEdge.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down

0 comments on commit 5bf67c9

Please sign in to comment.