Feature: Create EE workflow logic and structure

[mayan-000]

Description

This PR adds code that enhances the capabilities of the EE workflow

• Traveller class for outlining figures
• Add the Figure factory class to encapsulate related logic to figures in one place
• Checkpoints to enable skipping to the next node, or going back to the previous node
• Next tip coordinates for assigning guided coordinates
• Side effect callback that runs when the draw function is done running
• Add an Arc figure to create a ripple effect
• Add bubbles barrage logic.
• Allowing setting custom mouse events for objects during initialization

Relevant Technical Choices

• Traveller Class
  • This class enables drawing figures/groups, eg, drawing a line progressively from (x1, y1) to (x2, y2).
    • If a figure/group has to be drawn progressively, set shouldTravel value to be true and pass a travelInit callback.
    • travelInit callback has parameters that include the figure instance and a spread array of any values passed to be used.
      • The callback should utilize the figure instance and set three callbacks, setTraveller, setResetTravel, and setCompleteTravel.
        • setTraveller stores the logic that will be used to render figure/group progressively.
        • setResetTravel is used to reintialize the default state to rerender figure(s) progressively.
        • setCompleteTravel callback allows for completion in an instant without progressively drawing the figure(s).
• FigureFactory Class
  • This class encapsulates the logic of the figure initialization, coordinates calculation, traveller initialization, and any configuration before creating a new figure instance.
    • It contains var and a callback that provides 5 new possible coordinates to the next figure to be drawn.
      • Each figure type has its own callbacks to calculate and provide to the next figure.
      • It provides up, right, down, left, and middle as the 5 possible coordinates for the next figure.
    • Every figure has its method, which has common parameters and some unique to each figure.
      • Encapsulating the instance creation inside a function allows pre-configuration of any properties.
      • Also, it provides easy access for creating instances, rather than calling new for every new instance creation.
• Main Class
  • This class now contains logic to add checkpoints, and these checkpoints are used to create callbacks to navigate ahead a few nodes or go back.
  • The traveller class is created and used inside this class.
    • Whenever a figure with the shouldTravel property is found true, a new traveller instance is created that hijacks the draw loop, stops the queues and runs the traveller function, which was set during the initialization of the figure.
• Figure, Group, Animator Class
  • This class now contains logic to set and run a callback whenever the draw function is completed.
    • It allows setting a function that can act as a data updater, communicating from canvas to HTML/JS code.

Testing Instructions

Additional Information:

Screenshot/Screencast

---

Checklist

• [x] I have thoroughly tested this code to the best of my abilities.
• [x] I have reviewed the code myself before requesting a review.
• ~This code is covered by unit tests to verify that it works as intended.~
• ~The QA of this PR is done by a member of the QA team (to be checked by QA).~

Fixes #

[mohdsayed]

• [ ] Fix: Use cursor pointer on arrows and use Icon from PSAT
• [x] Fix: It shows Play button instead of pause while it is play.
• [x] Fix: website names become darker when toggling arrows.
• [x] Enhancement: Add speed slider.
• [x] When clicking previous button, it should go to the previous node.
• [x] When the flow has finished, it should display, play/pause ( Refer to PSAT )
• [x] Measure performance.
• [x] Canvas should dynamically adjust size as the space required.
• [x] Enhancement: Remove elements from the canvas.
• [ ] Enhancement: Add info icons.