Introducing multi-tail arrows

[ljubica-milovic]

Background

Multi-tail arrows are a useful tool for drawing synthesis trees. Reactants are placed at the arrow tails, and the product is placed at the arrow head.
The example is not chemically accurate:

Sub-tasks:

Part 1

• Add and remove Multi-tail Arrow to the Canvas (Default) #5055
• Select and move Multi-tail arrow #4898
• Save/load Multi-tail Arrow to/from ket #5104

Part 2

• Add/remove a tail to a multi-tail arrow #5056
• Mouse Over and Selection style for a multi-tail arrow #5057
• Move and Size Head Arrow of a multi-tail arrow #5058
• Add/remove a tail to a multi-tail arrow #5056
• Multi-tail arrow Scaling on Creation #4902
• Multi-tail arrow Scaling #4903

Requirements for Part 1

1. The multi tail arrow should be able to be added to the canvas from the arrows menu.
   
   .....1.1. When the user hovers over the image of the arrow in the arrows menu the arrow should change color, and the text: "Multi-Tail Arrow" should be displayed.
   
   .....1.2. When the user clicks (left click) the image of the arrow in the arrows menu the arrow should change color, and the arrows menu should close.
   
   .....1.3. Selecting the multi tail arrow from the arrows menu and clicking on the canvas (Left click) should give the default size arrow (total height: 100px, total width: 46px, tail width: 14px, head width: 30px, radius of the corner curve: TBD) with the default configuration (horizontal upper and lower tail (2 tails), horizontal arrow head and vertical spine).
   (Image for better understanding)
   
   ..........1.3.1. Bottom left point of the arrow should be the point on the canvas that the user clicked.

2. Highlighting the arrow is covered bellow.
   .....2.1. Selecting any part of the arrow with select tools (Rectangle selection, Lasso Selection, Fragment Selection) or the arrow tools should highlight the whole arrow similar to this:
   
   .....2.2. Hovering over any part of the arrow with select tools, arrow tools or the erase tool should highlight the whole arrow similar to this:
   
   ..........2.2.1. If the user hovers over the arrow with select or arrow tools (not erase tool), the cursor should change accordingly: hover on spine - four way arrow; hover on head or tail middle - up/down arrow; hover on left corners of tails or right corner of head - left/right arrow.
   (Will be implement in scope of tails and a the head arrow)
   (Image for better understanding)
   

3. When the cursor is a four way arrow (hover on spine) clicking and dragging moves the whole object.
   .....3.1. During and after moving, the whole arrow should be highlighted like in 2.1.

Requirements for Part 2
.....1.4. When the user selects the multi tail arrow from the arrows menu, left clicks on the canvas (at point A) and drags (to line B) before releasing the click, the arrow should appear blue, the height of the arrow should be default, the width should be the closest distance between point A and line B (tail and head width adjusted proportionally).
(Image for better understanding)

..........1.4.1. When the cursor is released, the arrow is placed on the canvas and the color should turn back to black.

4. When the user is hovering on the left corner of one of the tails, clicking and dragging to the left or right changes the widths of all tails.
   .....4.1. During and after moving, the whole arrow should be highlighted like in 2.1.
   .....4.2. Dragging to the left is not limited.
   .....4.3. Dragging to the right is limited to [minimum tail length>=radius of the corner curve]
   .
   .
5. When the user is hovering on the right corner of the head, clicking and dragging to the left or right changes the width of the head.
   .....5.1. During and after moving, the whole arrow should be highlighted like in 2.1.
   .....5.2. Dragging to the right is not limited.
   .....5.3. Dragging to the left is limited to [minimum head length]
   .
   .
6. When the user is hovering over the center of a tail (not the left corner), clicking and dragging up and down changes the position of the tail, and (if applicable) changes the length of the spine and the corner curvature.
   .....6.1. During and after moving, the whole arrow should be highlighted like in 2.1.
   .....6.2. Behavior for the upper tail is covered bellow.
   ..........6.2.1. The upper tail can be moved up with no limitation.
   ...............6.2.1.1. The spine is adjusted accordingly.
   ..........6.2.2. The upper tail can be moved down until one radius of the corner curve above the head or another tail
   (whichever comes first).
   (Image for better understanding)
   
   ...............6.2.2.1. The spine is adjusted accordingly.
   ...............6.2.2.2. Any dragging bellow this point results in no movement.
   .....6.3. The behavior for the lower tail is identical to the behavior for the upper tail, just with reversed directions.
   .....6.4. The middle tail(s) can be moved anywhere along the spine with a radius of the corner curve as the limitation on both sides. (same as for the head, see req. 7.2.)
   ..........6.4.1. If the user drags the tail closer than one radius of the corner curve to another tail, after releasing the cursor, the tail position is automatically adjusted to the closest position to where the user dragged the tail, that is at least one radius of the corner curve away form other tails.
   (Image for better understanding)
   
   .
   .
7. When the user is hovering over the center of the head (not the right corner), clicking and dragging up and down changes the position of the head.
   .....7.1. During and after moving, the whole arrow should be highlighted like in 2.1.
   .....7.2. The head can be moved along the spine, with one radius of the corner curve being the limitation on both sides.
   (Image for better understanding)
   
   ..........7.2.1. Any movement above/bellow these lines results in no movement.
   .
   .
8. Right clicking on the tail should give the user a context menu with the option to "Remove tail".
   .....8.1. The cursor should be changed to standard arrow.
   .....8.2. After clicking the multi-tail arrow it should be highlighted like in 2.1.
   .....8.3. If the selected tail is the upper or lower tail, the option to "Remove tail" should be disabled.
   .
   .
9. Right clicking on the multi-tail arrow should give the user a context menu with the option to "Add tail".
   .....9.1. The cursor should be changed to standard arrow.
   .....9.2. After clicking the multi-tail arrow it should be highlighted like in 2.1.
   .....9.3. If the space between two tails that the user clicked is less then 2 * [minimal tail distance] + tail thickness, the option to "Add tail" should be disabled.
   .....9.4. If the user selects the option to "Add tail", the new tail should be added exactly in the middle between the first two tails with the biggest distance.
   (Image for better understanding)
   
   .
   .
   .
   .
   .
   To be clarified (not up to date)

• Color of the arrow - Black (like all other elements), teal when selected
• Rounded or not - Not rounded
• Minimal tail length - 14px
• Minimal heal length - 30px
• Minimal spine length - 100px
• Default size of the whole object (minimal or not)? -?
• Minimal tail distance - no minimal tail distance
• If there is no space for a new tail (disallow it/extend the spine) - no limitations
• Should dragging the head above/bellow the spine extend the spine (and move the tail), or should it be prohibited? - no dragging above the spine
• Should we allow tails to drag over each other (sometimes extending the spine)? - we can but not above/bellow the spine
• Rotation? - no rotation
• Can the head be deleted? -no
• How many tails can be deleted (min 2 left)? - minimum 2 left

[yauhen-karmyzau]

#4902 and #4903 are out of scope!

[ivanmaslow]

These two features aren't done:

• Multi-tail arrow Scaling on Creation #4902
• Multi-tail arrow Scaling #4903

Testing on RC was completed for tasks below, all details can be found there including updated requirements:

• Save/load Multi-tail Arrow to/from ket #5104;
• Add and remove Multi-tail Arrow to the Canvas (Default) #5055;
• Select and move Multi-tail arrow #4898;
• Add/remove a tail to a multi-tail arrow #5056;
• Move and Size Head Arrow of a multi-tail arrow #5058;
• Move and Size Tails of a multi-tail arrow #5107;
• Mouse Over and Selection style for a multi-tail arrow #5057;