Merge pull request #6 from jeff-phillips-18/expand-collapse-fixes

Handle expand/collapse groups

packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import {
   AnchorEnd,
   DagreLayoutOptions,
-  PipelinesDefaultGroup,
+  DefaultTaskGroup,
   GraphElement,
   isNode,
   LabelPosition,
@@ -14,6 +14,7 @@ import {
   WithSelectionProps,
   ShapeProps,
   WithDragNodeProps,
+  EdgeCreationTypes,
 } from '@patternfly/react-topology';
 import TaskGroupSourceAnchor from './TaskGroupSourceAnchor';
 import TaskGroupTargetAnchor from './TaskGroupTargetAnchor';
@@ -30,7 +31,15 @@ type DemoTaskGroupProps = {
   WithDragNodeProps &
   WithSelectionProps;
 
-const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, collapsedWidth, collapsedHeight, ...rest }) => {
+export const DEFAULT_TASK_WIDTH = 180;
+export const DEFAULT_TASK_HEIGHT = 32;
+
+const getEdgeCreationTypes = (): EdgeCreationTypes => ({
+  edgeType: 'edge',
+  spacerEdgeType: 'edge'
+});
+
+const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, ...rest }) => {
   const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
 
   useAnchor(
@@ -45,13 +54,14 @@ const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, c
     return null;
   }
   return (
-    <PipelinesDefaultGroup
-      hulledOutline={false}
+    <DefaultTaskGroup
       labelPosition={verticalLayout ? LabelPosition.top : LabelPosition.bottom}
       collapsible
-      collapsedWidth={collapsedWidth}
-      collapsedHeight={collapsedHeight}
+      collapsedWidth={DEFAULT_TASK_WIDTH}
+      collapsedHeight={DEFAULT_TASK_HEIGHT}
       element={element as Node}
+      recreateLayoutOnCollapseChange
+      getEdgeCreationTypes={getEdgeCreationTypes}
       {...rest}
     />
   );

packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx

@@ -25,6 +25,8 @@ import { createDemoPipelineGroupsNodes } from './createDemoPipelineGroupsNodes';
 import { PipelineGroupsDemoContext, PipelineGroupsDemoModel } from './PipelineGroupsDemoContext';
 import OptionsBar from './OptionsBar';
 import DemoControlBar from '../DemoControlBar';
+import pipelineElementFactory
+  from '@patternfly/react-topology/dist/esm/pipelines/elements/pipelineElementFactory';
 
 const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observer(({ nodes }) => {
   const controller = useVisualizationController();
@@ -64,6 +66,7 @@ TopologyPipelineGroups.displayName = 'TopologyPipelineLayout';
 
 export const PipelineGroupsDemo = observer(() => {
   const controller = new Visualization();
+  controller.registerElementFactory(pipelineElementFactory);
   controller.registerComponentFactory(pipelineGroupsComponentFactory);
   controller.registerLayoutFactory(
     (type: string, graph: Graph): Layout | undefined =>

packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx

@@ -1,78 +1,34 @@
 import * as React from 'react';
 import {
+  DefaultTaskGroup,
   GraphElement,
-  Node,
+  LabelPosition,
+  observer,
   ScaleDetailsLevel,
-  ShapeProps,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps,
-  PipelinesDefaultGroup,
-  AnchorEnd,
-  DagreLayoutOptions,
-  TOP_TO_BOTTOM,
-  useAnchor,
-  Dimensions
 } from '@patternfly/react-topology';
 
-export enum DataTypes {
-  Default,
-  Alternate
-}
-
 type DemoPipelinesGroupProps = {
   element: GraphElement;
-  collapsible?: boolean;
-  collapsedWidth?: number;
-  collapsedHeight?: number;
-  onCollapseChange?: (group: Node, collapsed: boolean) => void;
-  getCollapsedShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
-  collapsedShadowOffset?: number; // defaults to 10
 } & WithContextMenuProps &
   WithDragNodeProps &
   WithSelectionProps;
 
-import TaskGroupSourceAnchor from '../pipelineGroupsDemo/TaskGroupSourceAnchor';
-import TaskGroupTargetAnchor from '../pipelineGroupsDemo/TaskGroupTargetAnchor';
-
-export const DemoPipelinesGroup: React.FunctionComponent<DemoPipelinesGroupProps> = ({
-  element,
-  onCollapseChange,
-  ...rest
-}) => {
+const DemoPipelinesGroup: React.FunctionComponent<DemoPipelinesGroupProps> = ({ element }) => {
   const data = element.getData();
-  const detailsLevel = element.getGraph().getDetailsLevel();
-  const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
-
-  const handleCollapse = (group: Node, collapsed: boolean): void => {
-    if (collapsed && rest.collapsedWidth !== undefined && rest.collapsedHeight !== undefined) {
-      group.setDimensions(new Dimensions(rest.collapsedWidth, rest.collapsedHeight));
-    }
-    group.setCollapsed(collapsed);
-    onCollapseChange && onCollapseChange(group, collapsed);
-  };
-
-  useAnchor(
-    React.useCallback((node: Node) => new TaskGroupSourceAnchor(node, verticalLayout), [verticalLayout]),
-    AnchorEnd.source
-  );
-
-  useAnchor(
-    React.useCallback((node: Node) => new TaskGroupTargetAnchor(node, verticalLayout), [verticalLayout]),
-    AnchorEnd.target
-  );
+  const detailsLevel = element.getGraph().getDetailsLevel()
 
   return (
-    <PipelinesDefaultGroup
+    <DefaultTaskGroup
       element={element}
-      collapsible
-      collapsedWidth={75}
-      collapsedHeight={75}
-      // TODO: labels don't render until clicked
+      collapsible={false}
       showLabel={detailsLevel === ScaleDetailsLevel.high}
+      labelPosition={LabelPosition.top}
       badge={data?.badge}
-      onCollapseChange={handleCollapse}
-      {...rest}
     />
   );
 };
+
+export default observer(DemoPipelinesGroup);

packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx

@@ -82,7 +82,6 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
           badge={pipelineOptions.showBadges ? data.taskProgress : undefined}
           badgePopoverParams={pipelineOptions.showBadgeTooltips ? undefined : badgePopoverParams}
           badgeTooltip={pipelineOptions.showBadgeTooltips ? DEMO_TIP_TEXT : undefined}
-          hasWhenExpression={!!data.whenStatus}
           whenOffset={DEFAULT_WHEN_OFFSET}
           whenSize={DEFAULT_WHEN_SIZE}
           {...rest}

packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx

@@ -30,8 +30,6 @@ import PipelineOptionsBar from './PipelineOptionsBar';
 
 export const PIPELINE_NODE_SEPARATION_VERTICAL = 65;
 
-export const LAYOUT_TITLE = 'Layout';
-
 const GROUP_PREFIX = 'Grouped_';
 const VERTICAL_SUFFIX = '_Vertical';
 const PIPELINE_LAYOUT = 'PipelineLayout';

packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx

@@ -20,7 +20,7 @@ import {
 import DemoTaskNode from './DemoTaskNode';
 import DemoFinallyNode from './DemoFinallyNode';
 import DemoTaskGroupEdge from './DemoTaskGroupEdge';
-import { DemoPipelinesGroup } from "./DemoPipelinesGroup";
+import DemoPipelinesGroup from './DemoPipelinesGroup';
 
 export const GROUPED_EDGE_TYPE = 'GROUPED_EDGE';
 

packages/module/src/elements/BaseNode.ts

@@ -168,6 +168,23 @@ export default class BaseNode<E extends NodeModel = NodeModel, D = any> extends
     }, []);
   }
 
+  getPositionableChildren(): Node[] {
+    return super.getChildren().reduce((total, nexChild) => {
+      if (isNode(nexChild)) {
+        if (nexChild.isGroup() && !nexChild.isCollapsed()) {
+          return total.concat(nexChild.getAllNodeChildren());
+        }
+        total.push(nexChild);
+      }
+      return total;
+    }, []);
+  }
+
+  // Return all children regardless of collapse status
+  protected getAllChildren(): GraphElement[] {
+    return super.getChildren();
+  }
+
   getKind(): ModelKind {
     return ModelKind.node;
   }
@@ -202,7 +219,7 @@ export default class BaseNode<E extends NodeModel = NodeModel, D = any> extends
   updateChildrenPositions(point: Point, prevLocation: Point): void {
     const xOffset = point.x - prevLocation.x;
     const yOffset = point.y - prevLocation.y;
-    this.getAllNodeChildren().forEach(child => {
+    this.getPositionableChildren().forEach(child => {
       if (isNode(child)) {
         const node = child as Node;
         const position = node.getPosition();