added property to set whether the outline is hull or rect

packages/demo-app-ts/src/components/StyleGroup.tsx

@@ -84,6 +84,7 @@ const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
       collapsedWidth={collapsedWidth}
       collapsedHeight={collapsedHeight}
       showLabel={detailsLevel === ScaleDetailsLevel.high}
+      hulledOutline={true}
       {...rest}
       {...passedData}
     >

packages/module/src/components/groups/DefaultGroup.tsx

@@ -77,6 +77,8 @@ interface DefaultGroupProps {
   onContextMenu?: (e: React.MouseEvent) => void;
   /** Flag indicating that the context menu for the node is currently open  */
   contextMenuOpen?: boolean;
+  /** Flag indicating whether to use hull layout or rect layout for expanded groups. Defaults to hull (true) */
+  hulledOutline?: boolean;
 }
 
 type DefaultGroupInnerProps = Omit<DefaultGroupProps, 'element'> & { element: Node };

packages/module/src/components/groups/DefaultGroupExpanded.tsx

@@ -19,6 +19,7 @@ import {
   WithSelectionProps
 } from '../../behavior';
 import { CollapsibleGroupProps } from './types';
+import Rect from '../../geom/Rect';
 
 type DefaultGroupExpandedProps = {
   className?: string;
@@ -41,6 +42,7 @@ type DefaultGroupExpandedProps = {
   labelIconClass?: string; // Icon to show in label
   labelIcon?: string;
   labelIconPadding?: number;
+  hulledOutline?: boolean;
 } & CollapsibleGroupProps & WithDragNodeProps & WithSelectionProps & WithDndDropProps & WithContextMenuProps;
 
 type PointWithSize = [number, number, number];
@@ -96,7 +98,8 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   labelIconClass,
   labelIcon,
   labelIconPadding,
-  onCollapseChange
+  onCollapseChange,
+  hulledOutline,
 }) => {
   const [hovered, hoverRef] = useHover();
   const [labelHover, labelHoverRef] = useHover();
@@ -107,6 +110,8 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   const outlineRef = useCombineRefs(dndDropRef, anchorRef);
   const labelLocation = React.useRef<PointWithSize>();
   const pathRef = React.useRef<string>();
+  const boxRef = React.useRef<Rect | null>(null);
+  const nodeElement = element as Node;
 
   let parent = element.getParent();
   let altGroup = false;
@@ -141,17 +146,23 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
         points.push([x + width, y + height, 0] as PointWithSize);
       }
     });
-    const hullPoints: (PointWithSize | PointTuple)[] =
-      points.length > 2 ? polygonHull(points as PointTuple[]) : (points as PointTuple[]);
-    if (!hullPoints) {
-      return null;
-    }
 
-    // change the box only when not dragging
-    pathRef.current = hullPath(hullPoints as PointTuple[], hullPadding);
+    if (hulledOutline) {
+      const hullPoints: (PointWithSize | PointTuple)[] =
+        points.length > 2 ? polygonHull(points as PointTuple[]) : (points as PointTuple[]);
+      if (!hullPoints) {
+        return null;
+      }
 
-    // Compute the location of the group label.
-    labelLocation.current = computeLabelLocation(hullPoints as PointWithSize[]);
+      // change the box only when not dragging
+      pathRef.current = hullPath(hullPoints as PointTuple[], hullPadding);
+
+      // Compute the location of the group label.
+      labelLocation.current = computeLabelLocation(hullPoints as PointWithSize[]);
+    } else {
+      boxRef.current = nodeElement.getBounds();
+      labelLocation.current = [boxRef.current.x + boxRef.current.width / 2, boxRef.current.y + boxRef.current.height, 0];
+    }
   }
 
   const groupClassName = css(
@@ -177,14 +188,18 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
     <g ref={labelHoverRef} onContextMenu={onContextMenu} onClick={onSelect} className={groupClassName}>
       <Layer id={GROUPS_LAYER}>
         <g ref={refs} onContextMenu={onContextMenu} onClick={onSelect} className={innerGroupClassName}>
-          <path ref={outlineRef} className={styles.topologyGroupBackground} d={pathRef.current} />
+          {hulledOutline ? (
+            <path ref={outlineRef} className={styles.topologyGroupBackground} d={pathRef.current} />
+          ) : (
+            <rect ref={outlineRef} className={styles.topologyGroupBackground} x={boxRef.current.x} y={boxRef.current.y} width={boxRef.current.width} height={boxRef.current.height}/>
+          )}
         </g>
       </Layer>
       {showLabel && (label || element.getLabel()) && (
         <NodeLabel
           className={styles.topologyGroupLabel}
           x={labelLocation.current[0]}
-          y={labelLocation.current[1] + hullPadding(labelLocation.current) + 24}
+          y={labelLocation.current[1] + (hulledOutline ? hullPadding(labelLocation.current) : 0) + 24}
           paddingX={8}
           paddingY={5}
           dragRef={dragNodeRef ? dragLabelRef : undefined}