CSE Machine: Display implicit block for program environment in the Control (#2774)

* Add extra {} when the control item is of type Program

* Format files properly and remove unnecessary lines

Author: DiligentPenguinn

src/features/envVisualizer/EnvVisualizerUtils.ts

@@ -413,6 +413,23 @@ export function getControlItemComponent(
     : index === Layout.control.size() - 1;
   if (!isInstr(controlItem)) {
     switch (controlItem.type) {
+      case 'Program':
+        // If the control item is the whole program
+        // add {} to represent the implicit block
+        const originalText = astToString(controlItem)
+          .trim()
+          .split('\n')
+          .map(line => `\t\t${line}`)
+          .join('\n');
+        const textP = `{\n${originalText}\n}`;
+        return new ControlItemComponent(
+          textP,
+          textP,
+          stackHeight,
+          highlightOnHover,
+          unhighlightOnHover,
+          topItem
+        );
       case 'Literal':
         const textL =
           typeof controlItem.value === 'string' ? `"${controlItem.value}"` : controlItem.value;

src/features/envVisualizer/compactComponents/Text.tsx

@@ -52,7 +52,6 @@ export class Text extends Visible implements IHoverable {
       ? JSON.stringify(data) || String(data)
       : String(data);
     this._height = fontSize;
-
     const widthOf = (s: string) => getTextWidth(s, `${fontStyle} ${fontSize}px ${fontFamily}`);
     if (widthOf(this.partialStr) > maxWidth) {
       let truncatedText = CompactConfig.Ellipsis.toString();