Merge branch 'patternfly:main' into main

patternfly-extension-testing · Jan 2, 2024 · 9252a56 · 9252a56
2 parents 35a958e + 4f416c8
commit 9252a56
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 24 deletions.
diff --git a/packages/demo-app-ts/src/components/DemoFinallyNode.tsx b/packages/demo-app-ts/src/components/DemoFinallyNode.tsx
@@ -7,7 +7,6 @@ import {
   Layer,
   ScaleDetailsLevel,
   TOP_LAYER,
-  useDetailsLevel,
   useHover,
   WithContextMenuProps,
   WithSelectionProps
@@ -19,7 +18,7 @@ type DemoFinallyNodeProps = {
 
 const DemoFinallyNode: React.FunctionComponent<DemoFinallyNodeProps> = ({ ...props }) => {
   const [hover, hoverRef] = useHover();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = props.element.getGraph().getDetailsLevel();
 
   return (
     <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>

diff --git a/packages/demo-app-ts/src/components/DemoTaskNode.tsx b/packages/demo-app-ts/src/components/DemoTaskNode.tsx
@@ -9,7 +9,6 @@ import {
   ScaleDetailsLevel,
   TaskNode,
   TOP_LAYER,
-  useDetailsLevel,
   useHover,
   WhenDecorator,
   WithContextMenuProps,
@@ -33,7 +32,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
   const nodeElement = element as Node;
   const data = element.getData();
   const [hover, hoverRef] = useHover();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   const passedData = React.useMemo(() => {
     const newData = { ...data };

diff --git a/packages/demo-app-ts/src/components/StyleGroup.tsx b/packages/demo-app-ts/src/components/StyleGroup.tsx
@@ -12,7 +12,6 @@ import {
 } from '@patternfly/react-topology';
 import AlternateIcon from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import DefaultIcon from '@patternfly/react-icons/dist/esm/icons/builder-image-icon';
-import useDetailsLevel from '@patternfly/react-topology/dist/esm/hooks/useDetailsLevel';
 
 const ICON_PADDING = 20;
 
@@ -43,7 +42,7 @@ const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
 }) => {
   const groupElement = element as Node;
   const data = element.getData();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   const getTypeIcon = (dataType?: DataTypes): any => {
     switch (dataType) {

diff --git a/packages/demo-app-ts/src/components/StyleNode.tsx b/packages/demo-app-ts/src/components/StyleNode.tsx
@@ -27,7 +27,6 @@ import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-i
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import PauseCircle from '@patternfly/react-icons/dist/esm/icons/pause-circle-icon';
 import Thumbtack from '@patternfly/react-icons/dist/esm/icons/thumbtack-icon';
-import useDetailsLevel from '@patternfly/react-topology/dist/esm/hooks/useDetailsLevel';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 
 export enum DataTypes {
@@ -134,7 +133,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
 }) => {
   const nodeElement = element as Node;
   const data = element.getData();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
   const [hover, hoverRef] = useHover();
 
   const passedData = React.useMemo(() => {

diff --git a/packages/demo-app-ts/src/utils/useDemoPipelineNodes.tsx b/packages/demo-app-ts/src/utils/useDemoPipelineNodes.tsx
@@ -262,7 +262,7 @@ export const useDemoPipelineNodes = (
       taskIconTooltip: showIcons ? 'Environment' : undefined,
       showContextMenu,
       columnGroup: TASK_STATUSES.length % STATUS_PER_ROW + 1,
-      showStatusState: false,
+      showStatusState: true,
       leadIcon: <ExternalLinkAltIcon width={16} height={16} />,
     };
 

diff --git a/packages/module/src/components/edges/DefaultEdge.tsx b/packages/module/src/components/edges/DefaultEdge.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { observer } from 'mobx-react';
-import { Edge, EdgeTerminalType, GraphElement, isEdge, isNode, NodeStatus } from '../../types';
+import { Edge, EdgeTerminalType, GraphElement, isEdge, isNode, NodeStatus, ScaleDetailsLevel } from '../../types';
 import { ConnectDragSource, OnSelect } from '../../behavior';
 import { getClosestVisibleParent, useHover } from '../../utils';
 import { Layer } from '../layers';
@@ -112,6 +112,8 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
     return null;
   }
 
+  const detailsLevel = element.getGraph().getDetailsLevel();
+
   const groupClassName = css(
     styles.topologyEdge,
     className,
@@ -126,9 +128,8 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
 
   const bendpoints = element.getBendpoints();
 
-  const d = `M${startPoint.x} ${startPoint.y} ${bendpoints.map((b: Point) => `L${b.x} ${b.y} `).join('')}L${
-    endPoint.x
-  } ${endPoint.y}`;
+  const d = `M${startPoint.x} ${startPoint.y} ${bendpoints.map((b: Point) => `L${b.x} ${b.y} `).join('')}L${endPoint.x
+    } ${endPoint.y}`;
 
   const bgStartPoint =
     !startTerminalType || startTerminalType === EdgeTerminalType.none
@@ -141,6 +142,11 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
   const backgroundPath = `M${bgStartPoint[0]} ${bgStartPoint[1]} ${bendpoints
     .map((b: Point) => `L${b.x} ${b.y} `)
     .join('')}L${bgEndPoint[0]} ${bgEndPoint[1]}`;
+
+  const showTag = tag && (detailsLevel === ScaleDetailsLevel.high || hover);
+  const scale = element.getGraph().getScale();
+  const tagScale = hover && !(detailsLevel === ScaleDetailsLevel.high) ? Math.max(1, 1 / scale) : 1;
+  const tagPositionScale = hover && !(detailsLevel === ScaleDetailsLevel.high) ? Math.min(1, scale) : 1;
 
   return (
     <Layer id={dragging || hover ? TOP_LAYER : undefined}>
@@ -158,14 +164,16 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
           onMouseLeave={onHideRemoveConnector}
         />
         <path className={linkClassName} d={d} style={{ animationDuration: `${edgeAnimationDuration}s` }} />
-        {tag && (
-          <DefaultConnectorTag
-            className={tagClass}
-            startPoint={element.getStartPoint()}
-            endPoint={element.getEndPoint()}
-            tag={tag}
-            status={tagStatus}
-          />
+        {showTag && (
+          <g transform={`scale(${hover ? tagScale : 1})`}>
+            <DefaultConnectorTag
+              className={tagClass}
+              startPoint={element.getStartPoint().scale(tagPositionScale)}
+              endPoint={element.getEndPoint().scale(tagPositionScale)}
+              tag={tag}
+              status={tagStatus}
+            />
+          </g>
         )}
         <DefaultConnectorTerminal
           className={startTerminalClass}
@@ -193,7 +201,7 @@ const DefaultEdgeInner: React.FunctionComponent<DefaultEdgeInnerProps> = observe
   );
 });
 
-const DefaultEdge: React.FunctionComponent<DefaultEdgeProps>= ({
+const DefaultEdge: React.FunctionComponent<DefaultEdgeProps> = ({
   element,
   startTerminalType = EdgeTerminalType.none,
   startTerminalSize = 14,

diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx
@@ -22,7 +22,6 @@ import NodeShadows, {
 } from '../../../components/nodes/NodeShadows';
 import LabelBadge from '../../../components/nodes/labels/LabelBadge';
 import LabelIcon from '../../../components/nodes/labels/LabelIcon';
-import useDetailsLevel from '../../../hooks/useDetailsLevel';
 import { useScaleNode } from '../../../hooks';
 
 const STATUS_ICON_SIZE = 16;
@@ -169,7 +168,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(({
   const badgeLabelTriggerRef = React.useRef();
   const [actionSize, actionRef] = useSize([actionIcon, paddingX]);
   const [contextSize, contextRef] = useSize([onContextMenu, paddingX]);
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   if (badgePopoverProps) {
     // eslint-disable-next-line no-console