In order to be able to display dependencies betwen tasks on a Roadmap/Gantt chart, we need nice looking arrows. When a task A depends on another task B, we will display the following arrow between the end of A and the start of B: A -> B However that is not that simple, because, task bars are not on the same line and B may start before A is finished… We can have those types of arrow: ``` +-------------+-------------+ | Down | Up | +-------+-------------+-------------+ | | | | | Right | A ━┓ | ┏━▶ B | | | ┗━▶ B | A ━┛ | | | | | +-------+-------------+-------------+ | | | | | | A ━┓ | ┏━▶ B | | Left | ┏━━━━━━━━━┛ | ┗━━━━━━━━━┓ | | | ┗━▶ B | A ━┛ | | | | | +-------+-------------+-------------+ ``` Furthermore if end of A is very close to start of B, then we have to make zigzags with the arrow. For example: ``` ,------- ┏━▶| B ┃ `------- ┗━━┓ -------. ┃ A |━┛ -------` ``` (This is determined by a thresold that depends on arrow radius, offset, …) An arrow is provided by a svg that will be absolutely (like task bar) positionned to match the end of a bar and the start of its dependency. The (width, height) of the svg arrow depends on the position and width of the bars. And in order to take account possible zigzags, radius, offsets, …, we add a safety gap: ``` svg ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ ┃ ┃ ┌──────────────────┐━┓ ┃ ┃ │ │ ┃ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ | gap ┃ ┃ │ │ ┃ v ┃ ┗━▶└──────────────────┘---------+- ┃ | ┃ | ┃ | ┃ | ┗━━━━━━━━━━━━━━━━━━━━━━━|━━━━┛----+- | | gap | | ----->+----+ | | ``` In order to not produce a too big review, the display of dependencies is split in relatively small commits. This one focus on the arrows. To be able to review, you will need to use a standalone mini app that displays all possible arrows. This has been extremely valuable during the development of it. And I believe it will be useful if we have to tweak later the parameters of the arrow path: Need a smaller radius or smaller arrows? Adjust variables in `path.ts` and observe in realtime the consequences. It is the only way I can currently propose to the reviewer in order to check the display of arrows, without having to play with artifact dates which can be cumbersome. In order to use it, you have to, in two different terminal: (cd plugins/roadmap/ && npm run watch) and (cd plugins/roadmap/ && npm run dev:serve-arrows) Pro tip: svg paths can be tested with https://svg-path-visualizer.netlify.app/ For example: M24 24 L32 24 Q40 24, 40 32 L40 36 Q40 44, 32 44 L16 44 Q8 44, 8 52 L8 68 Q8 76, 16 76 L46 76 L38 68 M46 76 L38 84 https://svg-path-visualizer.netlify.app/#M24%2024%20L32%2024%20Q40%2024%2C%2040%2032%20L40%2036%20Q40%2044%2C%2032%2044%20L16%2044%20Q8%2044%2C%208%2052%20L8%2068%20Q8%2076%2C%2016%2076%20L46%2076%20L38%2068%20M46%2076%20L38%2084 Note: This is only available in dev (watch) mode. We don't want to deliver this scaffolding in rpm package. Part of story #19734: have a Roadmap widget on dashboard Change-Id: Id0f48782a0ec517f089a1046d5a40ddf31fbf05a

+1856 −2

Author

Nicolas Terray (nterray) 2021-03-25 13:35

Committer

Nicolas Terray (nterray) 2021-03-25 20:02

Hash acb60c4c1af35694ed8fbc1f17a0e29435f8c922

Parent 1505e052d560aff0230f2fbc254d275691141900

Reference git #tuleap/stable/acb60c4c1af35694ed8fbc1f17a0e29435f8c922