Merge pull request #2 from jeff-phillips-18/outline-type

Fix for dragging out of rect group, adds option to Node Options for rectangle groups
patternfly-extension-testing · Nov 10, 2023 · 26887b5 · 26887b5
2 parents e294bba + 8e26e7a
commit 26887b5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/packages/demo-app-ts/src/data/generator.ts b/packages/demo-app-ts/src/data/generator.ts
@@ -33,6 +33,7 @@ export interface GeneratorNodeOptions {
   nodeIcons?: boolean;
   smallNodes?: boolean;
   contextMenus?: boolean;
+  hulledOutline?: boolean;
 }
 
 export interface GeneratorEdgeOptions {
@@ -53,7 +54,8 @@ export const DefaultNodeOptions: GeneratorNodeOptions = {
   nodeBadges: false,
   nodeIcons: false,
   smallNodes: false,
-  contextMenus: false
+  contextMenus: false,
+  hulledOutline: true
 };
 
 export const DefaultEdgeOptions: GeneratorEdgeOptions = {
@@ -76,6 +78,7 @@ export const getNodeOptions = (
   showStatusDecorator?: boolean;
   showDecorators?: boolean;
   showContextMenu?: boolean;
+  hulledOutline?: boolean;
   labelIconClass?: string;
   labelIcon?: React.ComponentClass<SVGIconProps>;
 } => {
@@ -91,6 +94,7 @@ export const getNodeOptions = (
     showStatusDecorator: nodeCreationOptions.statusDecorators,
     showDecorators: nodeCreationOptions.showDecorators,
     showContextMenu: nodeCreationOptions.contextMenus,
+    hulledOutline: nodeCreationOptions.hulledOutline,
     labelIconClass,
     labelIcon
   };
@@ -129,6 +133,23 @@ export const generateEdge = (
     tagStatus: options.edgeStatuses[index % options.edgeStatuses.length]
   });
 
+export const updateGroup = (group: NodeModel, nodeCreationOptions: GeneratorNodeOptions): NodeModel => {
+  return {
+    ...group,
+    data: {
+      badge: nodeCreationOptions.nodeBadges ? 'GN' : undefined,
+      badgeColor: '#F2F0FC',
+      badgeTextColor: '#5752d1',
+      badgeBorderColor: '#CBC1FF',
+      collapsedWidth: 75,
+      collapsedHeight: 75,
+      showContextMenu: nodeCreationOptions.contextMenus,
+      collapsible: true,
+      hulledOutline: nodeCreationOptions.hulledOutline
+    }
+  };
+};
+
 export const generateDataModel = (
   numNodes: number,
   numGroups: number,
@@ -167,7 +188,8 @@ export const generateDataModel = (
         collapsedWidth: 75,
         collapsedHeight: 75,
         showContextMenu: nodeCreationOptions.contextMenus,
-        collapsible: true
+        collapsible: true,
+        hulledOutline: nodeOptions.hulledOutline
       }
     };
     if (level === groupDepth) {

diff --git a/packages/demo-app-ts/src/demos/TopologyPackage.tsx b/packages/demo-app-ts/src/demos/TopologyPackage.tsx
@@ -26,7 +26,7 @@ import {
 import stylesComponentFactory from '../components/stylesComponentFactory';
 import defaultLayoutFactory from '../layouts/defaultLayoutFactory';
 import defaultComponentFactory from '../components/defaultComponentFactory';
-import { generateDataModel, generateEdge, generateNode } from '../data/generator';
+import { generateDataModel, generateEdge, generateNode, updateGroup } from '../data/generator';
 import { useTopologyOptions } from '../utils/useTopologyOptions';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
@@ -157,7 +157,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
     if (nodes.length) {
       const updatedNodes: NodeModel[] = nodes.map((node, index) => {
         if (node.group) {
-          return node;
+          return updateGroup(node, nodeOptions);
         }
         return {
           ...node,

diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx
@@ -177,6 +177,14 @@ export const useTopologyOptions = (
         >
           Context Menus
         </SelectOption>
+        <SelectOption
+          hasCheckbox
+          value="Rectangle Groups"
+          isSelected={!nodeOptions.hulledOutline}
+          onClick={() => setNodeOptions((prev) => ({ ...prev, hulledOutline: !prev.hulledOutline }))}
+        >
+          Rectangle Groups
+        </SelectOption>
       </SelectList>
     );
 

diff --git a/packages/module/src/components/groups/DefaultGroupExpanded.tsx b/packages/module/src/components/groups/DefaultGroupExpanded.tsx
@@ -123,7 +123,7 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   const padding = maxPadding(element.getStyle<NodeStyle>().padding ?? 17);
   const hullPadding = (point: PointWithSize | PointTuple) => (point[2] || 0) + padding;
 
-  if (!droppable || !pathRef.current || !labelLocation.current) {
+  if (!droppable || (hulledOutline && !pathRef.current) || (!hulledOutline && !boxRef.current) || !labelLocation.current) {
     const children = element.getNodes().filter(c => c.isVisible());
     if (children.length === 0) {
       return null;