CSE Machine : Fixes Cache and Arrow displacement errors

[Akshay-2007-1]

Description

This PR targets many of the MUCH-awaited changes in the CSE Machine after the Layout (@gigopogo, @ThatLi) team's PR at #3594 got merged. This introduced many new errors (stated in the PR as well as below here).

The issues stated '2' has been fixed partially with #3627 with the only problem being that the cache was not properly updated during the start of the program leading to only one out of the two new split-cache implementation for the Normal mode vs Printable mode. This has been fixed in this PR.

Additionally, the issue stated '4' was also fixed at #3592.

With this current PR, another issue that is being fixed is the one stated at '1' in the image.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

Run any of the following Source codes or one that is mentioned in any of the above mentioned pull requests. The expected behavior should be that on toggling the 'Allignment' operator, the arrows should now be correctly pointing to the frames at their correct new positions. Moreover, switching between Normal and Printable mode should dynamically resize the length of the frames and the gap between them, all while preventing horizontal drifting!

function make_frame(id, n) {
  const arr = [];
  let i = 0;
  while (i < n) {
    const k = id * 100 + i;
    function add(x) {
      return x + k;
    }
    function combo(x) {
      return add(x) + k;
    }
    i = i + 1;
  }
  return () => 1;
}

const frames = [];
let j = 0;
while (j < 4) {
  frames[j] = make_frame(j, 4);
  j = j + 1;
}

frames[0]();
frames[1]();
frames[2]();
frames[3]();

Video.Project.5.mp4

Checklist

• I have tested this code
• I have updated the documentation

[martin-henz]

Looks good to me.