CSE UI/UX: Animations & UI improvements

[CZX123]

Description

The PR introduces many new animations to the CSE machine and some UI improvements.

Changes

UI Improvements

• Arrows from stash items are now always drawn as a straight line, and should appear less buggy now
• Colors in the CSE machine have changed slightly, especially for the print layout
  • New utility color functions created to represent different states or elements based on whether the CSE machine is in a print layout or not
  • Colors in the CSE machine for Java are also updated to use these new utility functions
• Array indexes now only show on hover or print layout, to reduce clutter

  Animation Changes

• Refactored animation components into two types:
  • one with the animate function, used for high-level animations with complex choreography
  • the other with the animateTo function where you can specify the target props, used in animations for simple nodes
• Reworked the base animation logic to use Konva.Animation instead of a Konva.Tween for much better flexibility
  • Added new lerp and lerpColor functions to interpolate between numbers and hex color strings for the animation logic to work
  • Multiple different animations can now run on the same animation component at the same time with different timings, by calling animate or animateTo in parallel
• Improved all of the existing animations, changing some timings and animating stroke colors as well

  New Animations

• Variable assignment
• Variable name lookup
• Environment instruction
• Branch instruction
• Frame creation (from block statements or function applications)
• Instruction application (more specifically, array literal instructions or built-in function call)
• Function application
• Array access instruction
• Array assignment

[coveralls]

Pull Request Test Coverage Report for Build 8674214895

Details

• 84 of 696 (12.07%) changed or added relevant lines in 45 files are covered.
• 8 unchanged lines in 6 files lost coverage.
• Overall coverage decreased (-0.9%) to 33.089%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/commons/utils/JsSlangHelper.ts	0	1	0.0%
src/features/cseMachine/components/Frame.tsx	3	4	75.0%
src/features/cseMachine/java/components/Control.tsx	0	1	0.0%
src/features/cseMachine/java/components/ControlItem.tsx	0	1	0.0%
src/features/cseMachine/java/components/Stash.tsx	0	1	0.0%
src/features/cseMachine/CseMachineLayout.tsx	3	5	60.0%
src/features/cseMachine/CseMachineUtils.ts	16	18	88.89%
src/features/cseMachine/components/ArrayUnit.tsx	4	6	66.67%
src/features/cseMachine/components/Text.tsx	2	5	40.0%
src/features/cseMachine/components/arrows/GenericArrow.tsx	3	6	50.0%
<!--	Total:	84	696	12.07%	-->

Files with Coverage Reduction	New Missed Lines	%
src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx	1	0.0%
src/features/cseMachine/components/Text.tsx	1	73.17%
src/features/cseMachine/components/StashItemComponent.tsx	1	60.78%
src/features/cseMachine/components/ControlItemComponent.tsx	1	53.66%
src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx	1	0.0%
src/features/cseMachine/CseMachineAnimation.tsx	3	14.56%
<!--	Total:	8		-->

Totals
Change from base Build 8673760081:	-0.9%
Covered Lines:	5267
Relevant Lines:	14811

---

💛 - Coveralls