Flowchart Orientation #2251
Flowchart Orientation #2251
Conversation
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
Signed-off-by: rashidakanchwala <[email protected]>
There was a problem hiding this comment.
Awesome work @rashidakanchwala, tested it manually and looks great!
| ariaLabel="Change flowchart orientation" | ||
| className={'pipeline-menu-button--orientation'} | ||
| dataTest={'sidebar-flowchart-orientation-btn'} | ||
| icon={orientation === 'vertical' ? TopBottomIcon : LeftRightIcon} |
There was a problem hiding this comment.
should this be opposite ? Like when vertical we show LeftRightIcon to change, similar to expand/collapse pipelines ?
| ? (node.width + 20) / -2 | ||
| : -(node.width / 2) + 10 | ||
| ) | ||
| .attr('y', (node) => (orientation === 'vertical' ? -6 : -node.height + 12)); |
There was a problem hiding this comment.
Will it be possible to add some comments on these calculations for future ref ? Thank you
| const { chartSize, layers, orientation } = this.props; | ||
|
|
||
| const layerNamePosition = | ||
| orientation === 'vertical' ? chartSize.sidebarWidth || 0 : 100 || 0; |
There was a problem hiding this comment.
Will it be possible to add some comments on these calculations for future ref ? Thank you
| width: Math.max(end - start, 0), | ||
| height: rectSize, | ||
| }; | ||
| } |
There was a problem hiding this comment.
No need for else I guess, you can just do return { ?
| const rectSize = Math.max(width, height) * 5; | ||
|
|
||
| if (orientation === 'vertical') { | ||
| // Vertical layout when orientation is true |
There was a problem hiding this comment.
| // Vertical layout when orientation is true | |
| // Vertical layout when orientation is vertical |
| width: rectSize, | ||
| }; | ||
| } else { | ||
| // Horizontal layout when orientation is false |
There was a problem hiding this comment.
| // Horizontal layout when orientation is false | |
| // Horizontal layout when orientation is horizontal |
| @@ -33,12 +33,19 @@ export const snap = (value, unit) => Math.round(value / unit) * unit; | |||
| export const distance1d = (a, b) => Math.abs(a - b); | |||
|
|
|||
| /** | |||
| * Returns the angle in radians between the points a and b relative to the X-axis about the origin | |||
| * Returns the angle in radians between the points a and b based on the given orientation | |||
There was a problem hiding this comment.
Not a review comment but curious to know how did you find all the locations in the codebase which needed recalculation for the orientation ?
Description
Resolves #2159
Development notes
For first PR review, pls QA it and look through the code. I will add dev notes when i am back from PTO
QA notes
Checklist
RELEASE.mdfile