From 6480e465683bc48c083f00bd8efe766e2eb19e13 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Tue, 19 Mar 2024 08:30:01 -0400 Subject: [PATCH] Fixes for arrow alignments --- .../src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx | 13 ------------- .../src/demos/pipelinesDemo/DemoTaskNode.tsx | 5 ++--- .../src/demos/pipelinesDemo/PipelineLayoutDemo.tsx | 9 +++++---- .../pipelinesDemo/pipelineComponentFactory.tsx | 11 ++++++----- .../components/anchors/TaskNodeTargetAnchor.ts | 4 ++-- packages/module/src/pipelines/utils/utils.ts | 2 +- 6 files changed, 16 insertions(+), 28 deletions(-) delete mode 100644 packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx deleted file mode 100644 index 46f40bf2..00000000 --- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoFinallyTaskEdge.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { EdgeTerminalType, GraphElement, TaskEdge } from '@patternfly/react-topology'; - -interface DemoFinallyTaskEdgeProps { - element: GraphElement; -} - -const DemoFinallyTaskEdge: React.FunctionComponent = (props) => ( - -); - -export default observer(DemoFinallyTaskEdge); diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx index b65815df..cadf46c7 100644 --- 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 = ({ 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 index 8bcf6855..31ba093e 100644 --- a/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx +++ b/packages/demo-app-ts/src/demos/pipelinesDemo/PipelineLayoutDemo.tsx @@ -23,7 +23,10 @@ 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'; @@ -31,8 +34,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'; @@ -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 index 90dca5e7..970dca11 100644 --- 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 index 3894b65f..3a585a84 100644 --- 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 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 index d7a96ff8..4c60fb34 100644 --- 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 });