feat(update): cherry pick missing v5 updates onto main (#262)

* fix(context menu): Fix for context menu use when zoomed out (#249) * feat(graph): Add selection based zoom (#248) * feat(context menu): add prop to hide the context menu kebab (#250)
patternfly · Dec 4, 2024 · c7304db · c7304db
1 parent c6dd2c4
commit c7304db
Show file tree

Hide file tree

Showing 20 changed files with 509 additions and 85 deletions.
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
@@ -72,7 +72,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
   };
 
   return (
-    <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
+    <Layer id={detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen) ? TOP_LAYER : DEFAULT_LAYER}>
       <g ref={hoverRef}>
         <TaskNode
           element={element}

diff --git a/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx b/packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx
@@ -135,6 +135,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
   const data = element.getData();
   const detailsLevel = element.getGraph().getDetailsLevel();
   const [hover, hoverRef] = useHover();
+  const focused = hover || contextMenuOpen;
 
   const passedData = React.useMemo(() => {
     const newData = { ...data };
@@ -154,18 +155,19 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
 
   const LabelIcon = passedData.labelIcon;
   return (
-    <Layer id={hover ? TOP_LAYER : DEFAULT_LAYER}>
+    <Layer id={focused ? TOP_LAYER : DEFAULT_LAYER}>
       <g ref={hoverRef}>
         <DefaultNode
           element={element}
           scaleLabel={detailsLevel !== ScaleDetailsLevel.low}
-          scaleNode={hover && detailsLevel === ScaleDetailsLevel.low}
+          scaleNode={focused && detailsLevel === ScaleDetailsLevel.low}
+          raiseLabelOnHover={false}
           {...rest}
           {...passedData}
           dragging={dragging}
           regrouping={regrouping}
-          showLabel={hover || (detailsLevel !== ScaleDetailsLevel.low && showLabel)}
-          showStatusBackground={!hover && detailsLevel === ScaleDetailsLevel.low}
+          showLabel={focused || (detailsLevel !== ScaleDetailsLevel.low && showLabel)}
+          showStatusBackground={!focused && detailsLevel === ScaleDetailsLevel.low}
           showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && passedData.showStatusDecorator}
           statusDecoratorTooltip={nodeElement.getNodeStatus()}
           onContextMenu={data.showContextMenu ? onContextMenu : undefined}
@@ -174,11 +176,11 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
           onHideCreateConnector={onHideCreateConnector}
           labelIcon={LabelIcon && <LabelIcon noVerticalAlign />}
           attachments={
-            (hover || detailsLevel === ScaleDetailsLevel.high) &&
+            (focused || detailsLevel === ScaleDetailsLevel.high) &&
             renderDecorators(nodeElement, passedData, rest.getShapeDecoratorCenter)
           }
         >
-          {(hover || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(passedData, nodeElement)}
+          {(focused || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(passedData, nodeElement)}
         </DefaultNode>
       </g>
     </Layer>

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.css b/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.css
@@ -0,0 +1,43 @@
+.area-drag-hint__hint-container {
+    justify-content: center;
+    display: flex;
+    pointer-events: none;
+    position: absolute;
+    top: var(--pf-t--global--spacer--sm);
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+.area-drag-hint__hint-background {
+    background-color: var(--pf-t--global--background--color--primary--default);
+    border: 1px solid var(--pf-t--global--border--color--nonstatus--gray--default);
+    border-radius: 8px;
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
+    pointer-events: none;
+}
+
+.area-drag-hint {
+    align-items: center;
+    display: flex;
+}
+.area-drag-hint__icon {
+    color: var(--pf-t--global--icon--color--status--info--default);
+}
+.area-drag-hint__text {
+    margin-left: var(--pf-t--global--spacer--sm);
+}
+.area-drag-hint-shortcut__cell {
+    padding-left: var(--pf-t--global--spacer--sm);
+}
+
+.area-drag-hint-shortcut__command:not(:last-child):after {
+    content: ' + ';
+}
+
+.area-drag-hint-shortcut__kbd {
+    border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--nonstatus--gray--default);
+    border-radius: 3px;
+    color: var(--pf-t--global--text--color--subtle);
+    font-size: var(--pf-t--global--font--size--sm);
+    padding: 1px 3px;
+}
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { InfoCircleIcon, MouseIcon } from '@patternfly/react-icons';
+
+import './AreaDragHint.css';
+
+const AreaDragHint: React.FC = () => {
+  return (
+    <div className="area-drag-hint__hint-container">
+      <div className="area-drag-hint__hint-background">
+        <div className="area-drag-hint">
+          <InfoCircleIcon className="area-drag-hint__icon" />
+          <span className="area-drag-hint__text">
+            <table>
+              <tbody>
+                <tr>
+                  <td className="area-drag-hint-shortcut__cell">
+                    <span className="area-drag-hint-shortcut__command">
+                      <kbd className="area-drag-hint-shortcut__kbd">Shift</kbd>
+                    </span>
+                    <span className="area-drag-hint-shortcut__command">
+                      <kbd className="area-drag-hint-shortcut__kbd">
+                        <MouseIcon /> Drag
+                      </kbd>
+                    </span>
+                  </td>
+                  <td className="area-drag-hint-shortcut__cell">Select nodes in area</td>
+                </tr>
+                <tr>
+                  <td className="area-drag-hint-shortcut__cell">
+                    <span className="area-drag-hint-shortcut__command">
+                      <kbd className="area-drag-hint-shortcut__kbd">Ctrl</kbd>
+                    </span>
+                    <span className="area-drag-hint-shortcut__command">
+                      <kbd className="area-drag-hint-shortcut__kbd">
+                        <MouseIcon /> Drag
+                      </kbd>
+                    </span>
+                  </td>
+                  <td className="area-drag-hint-shortcut__cell">Zoom to selected area</td>
+                </tr>
+              </tbody>
+            </table>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AreaDragHint;
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx
@@ -147,12 +147,13 @@ const getShapeComponent = (shape: NodeShape): React.FunctionComponent<ShapeProps
 };
 
 const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
-  ({ element, onContextMenu, dragging, onShowCreateConnector, onHideCreateConnector, ...rest }) => {
+  ({ element, onContextMenu, dragging, contextMenuOpen, onShowCreateConnector, onHideCreateConnector, ...rest }) => {
     const options = React.useContext(DemoContext).nodeOptions;
     const nodeElement = element as Node;
     const data = element.getData() as GeneratedNodeData;
     const detailsLevel = element.getGraph().getDetailsLevel();
     const [hover, hoverRef] = useHover();
+    const focused = hover || contextMenuOpen;
 
     React.useEffect(() => {
       if (detailsLevel === ScaleDetailsLevel.low) {
@@ -164,19 +165,22 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
     const LabelIcon = data.index % 2 === 1 ? (SignOutAltIcon as any) : undefined;
 
     return (
-      <Layer id={hover ? TOP_LAYER : DEFAULT_LAYER}>
+      <Layer id={focused ? TOP_LAYER : DEFAULT_LAYER}>
         <g ref={hoverRef}>
           <DefaultNode
             element={element}
             scaleLabel={detailsLevel !== ScaleDetailsLevel.low}
-            scaleNode={hover && detailsLevel === ScaleDetailsLevel.low}
+            scaleNode={focused && detailsLevel === ScaleDetailsLevel.low}
+            contextMenuOpen={contextMenuOpen}
             {...rest}
             dragging={dragging}
-            showLabel={hover || (detailsLevel !== ScaleDetailsLevel.low && options.labels)}
-            showStatusBackground={!hover && detailsLevel === ScaleDetailsLevel.low}
+            showLabel={focused || (detailsLevel !== ScaleDetailsLevel.low && options.labels)}
+            raiseLabelOnHover={false}
+            showStatusBackground={!focused && detailsLevel === ScaleDetailsLevel.low}
             showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus}
             statusDecoratorTooltip={nodeElement.getNodeStatus()}
             onContextMenu={options.contextMenus ? onContextMenu : undefined}
+            hideContextMenuKebab={options.hideKebabMenu}
             onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined}
             onHideCreateConnector={onHideCreateConnector}
             labelIcon={options.icons && LabelIcon && <LabelIcon noVerticalAlign />}
@@ -186,12 +190,12 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
             getCustomShape={options.showShapes ? () => getShapeComponent(data.shape) : undefined}
             badge={options.badges ? data.objectType : undefined}
             attachments={
-              (hover || detailsLevel === ScaleDetailsLevel.high) &&
+              (focused || detailsLevel === ScaleDetailsLevel.high) &&
               options.showDecorators &&
               renderDecorators(options, nodeElement, rest.getShapeDecoratorCenter)
             }
           >
-            {(hover || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(data, nodeElement)}
+            {(focused || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(data, nodeElement)}
           </DefaultNode>
         </g>
       </Layer>

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => {
           >
             Context Menus
           </SelectOption>
+          <SelectOption
+            hasCheckbox
+            value="Hide context kebab menu"
+            isSelected={options.nodeOptions.hideKebabMenu}
+            isDisabled={!options.nodeOptions.contextMenus}
+            onClick={() =>
+              options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu })
+            }
+          >
+            Hide kebab for context menu
+          </SelectOption>
           <SelectOption
             hasCheckbox
             value="Rectangle Groups"

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
@@ -12,7 +12,11 @@ import {
   Visualization,
   VisualizationProvider,
   VisualizationSurface,
-  observer
+  observer,
+  GraphAreaSelectedEventListener,
+  GRAPH_AREA_SELECTED_EVENT,
+  GraphAreaDraggingEvent,
+  GRAPH_AREA_DRAGGING_EVENT
 } from '@patternfly/react-topology';
 import defaultLayoutFactory from '../../layouts/defaultLayoutFactory';
 import defaultComponentFactory from '../../components/defaultComponentFactory';
@@ -23,6 +27,7 @@ import { DemoContext } from './DemoContext';
 import demoComponentFactory from './demoComponentFactory';
 import { graphPositionChangeListener, layoutEndListener } from './listeners';
 import DemoControlBar from '../DemoControlBar';
+import AreaDragHint from './AreaDragHint';
 
 interface TopologyViewComponentProps {
   useSidebar: boolean;
@@ -32,6 +37,7 @@ interface TopologyViewComponentProps {
 const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = observer(
   ({ useSidebar, sideBarResizable = false }) => {
     const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+    const [showAreaDragHint, setShowAreaDragHint] = React.useState<boolean>(false);
     const controller = useVisualizationController();
     const options = React.useContext(DemoContext);
 
@@ -59,6 +65,31 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       setSelectedIds(ids);
     });
 
+    useEventListener<GraphAreaSelectedEventListener>(
+      GRAPH_AREA_SELECTED_EVENT,
+      ({ graph, modifier, startPoint, endPoint }) => {
+        if (modifier === 'ctrlKey') {
+          graph.zoomToSelection(startPoint, endPoint);
+          return;
+        }
+        if (modifier === 'shiftKey') {
+          const selections = graph.nodesInSelection(startPoint, endPoint);
+          setSelectedIds(
+            selections.reduce((acc, node) => {
+              if (!node.isGroup()) {
+                acc.push(node.getId());
+              }
+              return acc;
+            }, [])
+          );
+        }
+      }
+    );
+
+    useEventListener<GraphAreaDraggingEvent>(GRAPH_AREA_DRAGGING_EVENT, ({ isDragging }) => {
+      setShowAreaDragHint(isDragging);
+    });
+
     React.useEffect(() => {
       let resizeTimeout: NodeJS.Timeout;
 
@@ -111,6 +142,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
         sideBarOpen={useSidebar && !!selectedIds?.length}
         sideBarResizable={sideBarResizable}
       >
+        {showAreaDragHint ? <AreaDragHint /> : null}
         <VisualizationSurface state={{ selectedIds }} />
       </TopologyView>
     );

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
@@ -10,8 +10,9 @@ import {
   ModelKind,
   DragObjectWithType,
   Node,
-  withPanZoom,
   GraphComponent,
+  withPanZoom,
+  withAreaSelection,
   withCreateConnector,
   Graph,
   isNode,
@@ -60,7 +61,9 @@ const demoComponentFactory: ComponentFactory = (
   type: string
 ): React.ComponentType<{ element: GraphElement }> | undefined => {
   if (kind === ModelKind.graph) {
-    return withDndDrop(graphDropTargetSpec([NODE_DRAG_TYPE]))(withPanZoom()(GraphComponent));
+    return withDndDrop(graphDropTargetSpec([NODE_DRAG_TYPE]))(
+      withPanZoom()(withAreaSelection(['ctrlKey', 'shiftKey'])(GraphComponent))
+    );
   }
   switch (type) {
     case 'node':

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/generator.ts b/packages/demo-app-ts/src/demos/topologyPackageDemo/generator.ts
@@ -88,6 +88,7 @@ export interface GeneratorNodeOptions {
   badges?: boolean;
   icons?: boolean;
   contextMenus?: boolean;
+  hideKebabMenu?: boolean;
   hulledOutline?: boolean;
 }
 

diff --git a/packages/module/src/behavior/index.ts b/packages/module/src/behavior/index.ts
@@ -6,6 +6,7 @@ export * from './useDndDrop';
 export * from './useDndManager';
 export * from './useDragNode';
 export * from './usePanZoom';
+export * from './useAreaSelection';
 export * from './useReconnect';
 export * from './useSelection';
 export * from './usePolygonAnchor';