Fixing frames coordinates and preventing overlap of data and frames (additional feature: center alignment)

[gigopogo]

Description

This PR introduces a fixed-coordinate layout system for the CSE Machine to prevent visual drifting when scrubbing through the execution timeline. By caching the coordinates of environment frames at the last step, this ensures that frames and data objects remain completely stationary throughout the program's execution.

Additionally, this PR introduces two key visual improvements:

1. Center Alignment Toggle: Allows users to cleanly center the execution environment within the viewport for better readability.
2. Sibling Frame Data Spacing: Implements specific layout spacing calculations for sibling frame data (e.g., arrays and lists) to properly allocate space and prevent visual overlaps between sibling structures.

This aligns with the pedagogical goal of achieving completely stationary frames, providing a more consistent and less confusing visual tracing experience for students.

Note on Known Issues / Out of Scope (Discussed & Approved by Prof):
The following behaviors are known and have been explicitly scoped out of this PR to be handled separately or prioritized as intended behaviors:

1. Arrow Coordinates: Arrows are currently pointing to incorrect frame coordinates in the fixed layout. This is being passed over to the Arrow Team for a follow-up fix.
2. Printable Mode Overlap: Frames occasionally overlap in printable mode (verified as a pre-existing issue on the live site). A separate issue will be made.
3. Non-Sibling Array Spacing Overlap: While spacing for sibling frame data is now handled, there are edge cases where arrays generated outside of sibling assumptions visually overlap with environment frames (verified as a pre-existing issue). A separate issue will be made.
4. Empty Spaces with PR Option for "show all frames created" vs "show current frames only" #3592: Hiding dead frames leaves empty visual gaps. CSE liveness team are working on this in our merge branch.

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

1. Paste the provided code snippet into the Source Academy playground.
2. Run the code and use the timeline slider to scrub back and forth between the steps.
3. Expected Behavior 1 (Fixed Layout): The environment frames should remain completely anchored in their fixed positions without sliding horizontally while data (arrays, function objects , etc.) renders beside it .
4. Expected Behavior 2 (Center Alignment): Toggle the center alignment option and verify that the entire frame structure correctly centers itself within the UI without breaking the fixed coordinates.
5. Expected Behavior 3 (Sibling Array Spacing): Observe the layout of the complex arrays generated in the frames. The layout algorithm successfully calculates and allocates space based on the data of sibling frames, ensuring these specific sibling structures render without overlapping each other.

Test Snippet (Frames, Strings, and Nested Lists):

const make_frame = (x) => {
    const filler = "I am frame number " + stringify(x);
    const arr = list(1, 2, list(1, 2, 3, 4, 5, 6, 7, 8, 9, 10), list(11));
    return () => filler;
};

const frames = [];
for (let i = 0; i < 2; i = i + 1) {
    frames[i] = make_frame(i);
}

Fixed_Layout_Center_Demo.mp4

Checklist

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

[RichDom2185]

What does this do?

[gigopogo]

These lines synchronize the Text object's coordinates with the Binding's updated positions. If we were to remove those lines, the text labels (the variable names) will stay at their initial coordinates while the frame boxes move away from them

[RichDom2185]

Got it, perhaps the setter approach would be good then to make it clear, otherwise just by looking at this file it doesn't seem very clear to someone who has not worked on the CSE machine before

[RichDom2185]

Is there a way to avoid typecast?

[gigopogo]

To avoid the typecast, we can add public setters for _x and _y within the Text class.

[RichDom2185]

Let's do that in a future PR after your midterm, thanks!

[RichDom2185]

LGTM, thanks!