Fixes for arrow alignments

patternfly-extension-testing · Mar 19, 2024 · 6480e46 · 6480e46
1 parent 1aec98f
commit 6480e46
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 28 deletions.
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
@@ -82,9 +82,8 @@ 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}
+          whenOffset={data.whenStatus ? DEFAULT_WHEN_OFFSET : 0}
+          whenSize={data.whenStatus ? DEFAULT_WHEN_SIZE : 0}
           {...rest}
         >
           {whenDecorator}

diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx
@@ -23,16 +23,17 @@ import {
   DEFAULT_EDGE_TYPE,
   DEFAULT_FINALLY_EDGE_TYPE
 } from '@patternfly/react-topology';
-import pipelineComponentFactory, { GROUPED_EDGE_TYPE } from './pipelineComponentFactory';
+import pipelineComponentFactory, {
+  GROUPED_EDGE_TYPE,
+  SPACER_EDGE_TYPE
+} from './pipelineComponentFactory';
 import { useDemoPipelineNodes } from './useDemoPipelineNodes';
 import { GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL } from './DemoTaskGroupEdge';
 import { PipelineDemoContext, PipelineDemoModel } from './PipelineDemoContext';
 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';
@@ -58,7 +59,7 @@ const TopologyPipelineLayout: React.FC = observer(() => {
       nodes.filter((n) => !n.group),
       DEFAULT_SPACER_NODE_TYPE,
       edgeType,
-      edgeType,
+      SPACER_EDGE_TYPE,
       [DEFAULT_FINALLY_NODE_TYPE],
       DEFAULT_FINALLY_EDGE_TYPE
     );

diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/pipelineComponentFactory.tsx
@@ -15,15 +15,16 @@ import {
   withSelection,
   withPanZoom,
   GraphComponent,
-  DEFAULT_FINALLY_EDGE_TYPE
+  DEFAULT_FINALLY_EDGE_TYPE,
+  TaskEdge
 } from '@patternfly/react-topology';
 import DemoTaskNode from './DemoTaskNode';
 import DemoFinallyNode from './DemoFinallyNode';
 import DemoTaskGroupEdge from './DemoTaskGroupEdge';
-import DemoFinallyTaskEdge from './DemoFinallyTaskEdge';
 import DemoTaskEdge from './DemoTaskEdge';
 
 export const GROUPED_EDGE_TYPE = 'GROUPED_EDGE';
+export const SPACER_EDGE_TYPE = 'spacer-edge';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
@@ -59,11 +60,11 @@ const pipelineComponentFactory: ComponentFactory = (
       return DefaultTaskGroup;
     case DEFAULT_SPACER_NODE_TYPE:
       return SpacerNode;
-    case 'finally-spacer-edge':
+    case SPACER_EDGE_TYPE:
+      return TaskEdge;
+    case DEFAULT_FINALLY_EDGE_TYPE:
     case DEFAULT_EDGE_TYPE:
       return DemoTaskEdge;
-    case DEFAULT_FINALLY_EDGE_TYPE:
-      return DemoFinallyTaskEdge;
     case GROUPED_EDGE_TYPE:
       return DemoTaskGroupEdge;
     default:

diff --git a/packages/module/src/pipelines/components/anchors/TaskNodeTargetAnchor.ts b/packages/module/src/pipelines/components/anchors/TaskNodeTargetAnchor.ts
@@ -28,8 +28,8 @@ export default class TaskNodeTargetAnchor<E extends Node = Node> extends Abstrac
         const scale = this.owner.getGraph().getScale();
         return new Point(bounds.x + (this.lowDetailsStatusIconSize / 2 + 2) * (1 / scale), bounds.y);
       }
-      return new Point(bounds.x + bounds.width / 2, bounds.y);
+      return new Point(bounds.x + bounds.width / 2, bounds.y - this.whenOffset);
     }
-    return new Point(bounds.x + this.whenOffset, bounds.y + bounds.height / 2);
+    return new Point(bounds.x, bounds.y + bounds.height / 2);
   }
 }
diff --git a/packages/module/src/pipelines/utils/utils.ts b/packages/module/src/pipelines/utils/utils.ts
@@ -185,7 +185,7 @@ export const getEdgesFromNodes = (
     finallyNodes.forEach(finallyNode => {
       edges.push({
         id: `${finallyId}-${finallyNode.id}`,
-        type: spacerEdgeType,
+        type: finallyEdgeType,
         source: finallyId,
         target: finallyNode.id
       });