Test task :

Function needed:

  • Allow adding lines by two clicks (first click creates the first position; then user moves the mouse and the line should be visible; if the user clicks left mouse button again the line should be added to image; if user starts drawing and presses right mouse button, don’t the line.
  • If a line intersects show red dot (independent of line status - creating or added)
  • When the user clicks “collapse lines”, the lines should be collapsed to the center of the line as a 3 second animation.

Use:

  • OOP
  • TypeScipt (preferred) or ES6
  • React (not too important)