CSE Machine: Rewrite the Config enum to be a constant object (source-academy#2853)

* Rewrite Config enums to be a constant object instead, and remove all unneeded toString and Number calls

* Fix some type errors and formatting

Author: CZX123

src/features/cseMachine/CseMachineConfig.ts

@@ -1,64 +1,64 @@
 /** configs for dimensions */
-export enum Config {
-  CanvasMinHeight = 800,
-  CanvasMinWidth = 800,
-  CanvasPaddingX = 30,
-  CanvasPaddingY = 30,
+export const Config = Object.freeze({
+  CanvasMinHeight: 800,
+  CanvasMinWidth: 800,
+  CanvasPaddingX: 30,
+  CanvasPaddingY: 30,
 
-  LevelPaddingX = 10,
-  LevelPaddingY = 10,
+  LevelPaddingX: 10,
+  LevelPaddingY: 10,
 
-  FrameMinWidth = 100,
-  FramePaddingX = 20,
-  FramePaddingY = 30,
-  FrameMarginX = 30,
-  FrameMarginY = 10,
-  FrameCornerRadius = 3,
+  FrameMinWidth: 100,
+  FramePaddingX: 20,
+  FramePaddingY: 30,
+  FrameMarginX: 30,
+  FrameMarginY: 10,
+  FrameCornerRadius: 3,
 
-  FnRadius = 15,
-  FnInnerRadius = 3,
-  FnTooltipOpacity = 0.3,
+  FnRadius: 15,
+  FnInnerRadius: 3,
+  FnTooltipOpacity: 0.3,
 
-  DataMinWidth = 20,
-  DataUnitWidth = 40,
-  DataUnitHeight = 40,
-  DataCornerRadius = 3,
-  DataHitStrokeWidth = 5,
+  DataMinWidth: 20,
+  DataUnitWidth: 40,
+  DataUnitHeight: 40,
+  DataCornerRadius: 3,
+  DataHitStrokeWidth: 5,
 
-  TextPaddingX = 10,
-  TextPaddingY = 30,
-  TextMargin = 5,
-  TextMinWidth = 30,
-  FontFamily = 'monospace, monospace',
-  FontSize = 15,
-  FontStyle = 'normal',
-  FontVariant = 'normal',
+  TextPaddingX: 10,
+  TextPaddingY: 30,
+  TextMargin: 5,
+  TextMinWidth: 30,
+  FontFamily: 'monospace, monospace',
+  FontSize: 15,
+  FontStyle: 'normal',
+  FontVariant: 'normal',
 
-  HoveredColor = '#32CD32',
+  HoveredColor: '#32CD32',
 
-  ArrowHeadSize = 10,
-  ArrowStrokeWidth = 1,
-  ArrowHitStrokeWidth = 5,
-  ArrowHoveredStrokeWidth = 2,
-  ArrowCornerRadius = 40,
+  ArrowHeadSize: 10,
+  ArrowStrokeWidth: 1,
+  ArrowHitStrokeWidth: 5,
+  ArrowHoveredStrokeWidth: 2,
+  ArrowCornerRadius: 40,
 
-  MaxExportWidth = 20000,
-  MaxExportHeight = 12000,
+  MaxExportWidth: 20000,
+  MaxExportHeight: 12000,
 
-  SA_WHITE = '#999999',
-  SA_BLUE = '#2c3e50',
-  PRINT_BACKGROUND = 'white',
-  SA_CURRENT_ITEM = '#030fff',
+  SA_WHITE: '#999999',
+  SA_BLUE: '#2c3e50',
+  PRINT_BACKGROUND: 'white',
+  SA_CURRENT_ITEM: '#030fff',
 
-  ConstantColon = ':= ',
-  VariableColon = ': ',
-  Ellipsis = '…',
+  ConstantColon: ':= ',
+  VariableColon: ': ',
+  Ellipsis: '…',
 
-  UnassignedData = '',
-  GlobalFrameDefaultText = ':::pre-declared names::',
-  GlobalEnvId = '-1'
-}
+  UnassignedData: '',
+  GlobalFrameDefaultText: ':::pre-declared names::',
+  GlobalEnvId: '-1'
+});
 
-export const ShapeDefaultProps = {
+export const ShapeDefaultProps = Object.freeze({
   preventDefault: false
-};
+});

src/features/cseMachine/CseMachineControlStashConfig.ts

@@ -1,38 +1,39 @@
-export enum ControlStashConfig {
-  ControlPosX = 20,
-  ControlPosY = 5,
-  StashPosX = 140,
-  StashPosY = 5,
+export const ControlStashConfig = Object.freeze({
+  ControlPosX: 20,
+  ControlPosY: 5,
+  StashPosX: 140,
+  StashPosY: 5,
 
-  ControlItemWidth = 120,
-  ControlItemTextPadding = 10,
-  ControlItemCornerRadius = 5,
-  ControlMaxTextWidth = 95,
-  ControlMaxTextHeight = 125,
-  StashMaxTextWidth = ControlMaxTextWidth,
-  StashItemHeight = 15,
-  StashItemTextPadding = ControlItemTextPadding,
-  StashMaxTextHeight = 30,
-  StashItemCornerRadius = ControlItemCornerRadius,
+  ControlItemWidth: 120,
+  ControlItemTextPadding: 10,
+  ControlMaxTextWidth: 95,
+  ControlMaxTextHeight: 125,
+  ControlItemCornerRadius: 5,
 
-  ShowMoreButtonWidth = 80,
-  ShowMoreButtonHeight = 15,
-  ShowMoreButtonX = 40,
-  ShowMoreButtonY = 25,
+  StashItemHeight: 15,
+  StashItemTextPadding: 10,
+  StashMaxTextWidth: 95,
+  StashMaxTextHeight: 30,
+  StashItemCornerRadius: 5,
 
-  TooltipOpacity = 0.7,
-  TooltipMargin = 5,
-  TooltipPadding = 5,
+  ShowMoreButtonWidth: 80,
+  ShowMoreButtonHeight: 15,
+  ShowMoreButtonX: 40,
+  ShowMoreButtonY: 25,
 
-  FontFamily = 'monospace, monospace',
-  FontSize = 15,
-  FontStyle = 'normal',
-  FontVariant = 'normal',
-  FontStyleHeader = 'bold',
-  FontSizeHeader = 18,
+  TooltipOpacity: 0.7,
+  TooltipMargin: 5,
+  TooltipPadding: 5,
 
-  SA_WHITE = '#999999',
-  SA_BLUE = '#2c3e50',
-  PRINT_BACKGROUND = 'white',
-  STASH_DANGER_ITEM = '#ff0000'
-}
+  FontFamily: 'monospace, monospace',
+  FontSize: 15,
+  FontStyle: 'normal',
+  FontVariant: 'normal',
+  FontStyleHeader: 'bold',
+  FontSizeHeader: 18,
+
+  SA_WHITE: '#999999',
+  SA_BLUE: '#2c3e50',
+  PRINT_BACKGROUND: 'white',
+  STASH_DANGER_ITEM: '#ff0000'
+});

src/features/cseMachine/CseMachineLayout.tsx

@@ -444,8 +444,8 @@ export class Layout {
                 height: Layout.height(),
                 overflow: 'hidden',
                 backgroundColor: CseMachine.getPrintableMode()
-                  ? Config.PRINT_BACKGROUND.toString()
-                  : Config.SA_BLUE.toString()
+                  ? Config.PRINT_BACKGROUND
+                  : Config.SA_BLUE
               }}
             >
               <Stage
@@ -463,11 +463,7 @@ export class Layout {
                     y={0}
                     width={Layout.width()}
                     height={Layout.height()}
-                    fill={
-                      CseMachine.getPrintableMode()
-                        ? Config.PRINT_BACKGROUND.toString()
-                        : Config.SA_BLUE.toString()
-                    }
+                    fill={CseMachine.getPrintableMode() ? Config.PRINT_BACKGROUND : Config.SA_BLUE}
                     key={Layout.key++}
                     listening={false}
                   />

src/features/cseMachine/CseMachineUtils.ts

@@ -200,7 +200,7 @@ export function getTextHeight(
   text: string,
   width: number,
   font: string = `${Config.FontStyle} ${Config.FontSize}px ${Config.FontFamily}`,
-  fontSize: number = Number(Config.FontSize)
+  fontSize: number = Config.FontSize
 ): number {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
@@ -266,8 +266,8 @@ export function setHoveredStyle(target: Node | Group, hoveredAttrs: any = {}): v
   nodes.push(target);
   nodes.forEach(node => {
     node.setAttrs({
-      stroke: node.attrs.stroke ? Config.HoveredColor.toString() : node.attrs.stroke,
-      fill: node.attrs.fill ? Config.HoveredColor.toString() : node.attrs.fill,
+      stroke: node.attrs.stroke ? Config.HoveredColor : node.attrs.stroke,
+      fill: node.attrs.fill ? Config.HoveredColor : node.attrs.fill,
       ...hoveredAttrs
     });
   });
@@ -283,13 +283,13 @@ export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}
     node.setAttrs({
       stroke: node.attrs.stroke
         ? CseMachine.getPrintableMode()
-          ? Config.SA_BLUE.toString()
-          : Config.SA_WHITE.toString()
+          ? Config.SA_BLUE
+          : Config.SA_WHITE
         : node.attrs.stroke,
       fill: node.attrs.fill
         ? CseMachine.getPrintableMode()
-          ? Config.SA_BLUE.toString()
-          : Config.SA_WHITE.toString()
+          ? Config.SA_BLUE
+          : Config.SA_WHITE
         : node.attrs.fill,
       ...unhoveredAttrs
     });
@@ -702,17 +702,17 @@ export const isStashItemInDanger = (stashIndex: number): boolean => {
 };
 
 export const defaultSAColor = () =>
-  CseMachine.getPrintableMode() ? Config.SA_BLUE.toString() : Config.SA_WHITE.toString();
+  CseMachine.getPrintableMode() ? Config.SA_BLUE : Config.SA_WHITE;
 
 export const stackItemSAColor = (index: number) =>
   isStashItemInDanger(index)
-    ? ControlStashConfig.STASH_DANGER_ITEM.toString()
+    ? ControlStashConfig.STASH_DANGER_ITEM
     : CseMachine.getPrintableMode()
-    ? ControlStashConfig.SA_BLUE.toString()
-    : ControlStashConfig.SA_WHITE.toString();
+    ? ControlStashConfig.SA_BLUE
+    : ControlStashConfig.SA_WHITE;
 export const currentItemSAColor = (test: boolean) =>
   test
-    ? Config.SA_CURRENT_ITEM.toString()
+    ? Config.SA_CURRENT_ITEM
     : CseMachine.getPrintableMode()
-    ? ControlStashConfig.SA_BLUE.toString()
-    : ControlStashConfig.SA_WHITE.toString();
+    ? ControlStashConfig.SA_BLUE
+    : ControlStashConfig.SA_WHITE;

src/features/cseMachine/animationComponents/AnimationComponents.tsx

@@ -183,16 +183,16 @@ export class AnimatedTextboxComponent extends Animatable {
     super();
     const rectProps = {
       stroke: currentItemSAColor(false),
-      cornerRadius: Number(ControlStashConfig.ControlItemCornerRadius)
+      cornerRadius: ControlStashConfig.ControlItemCornerRadius
     };
     const textProps = {
       text,
-      fill: ControlStashConfig.SA_WHITE.toString(),
-      padding: Number(ControlStashConfig.ControlItemTextPadding),
-      fontFamily: ControlStashConfig.FontFamily.toString(),
-      fontSize: Number(ControlStashConfig.FontSize),
-      fontStyle: ControlStashConfig.FontStyle.toString(),
-      fontVariant: ControlStashConfig.FontVariant.toString()
+      fill: ControlStashConfig.SA_WHITE,
+      padding: ControlStashConfig.ControlItemTextPadding,
+      fontFamily: ControlStashConfig.FontFamily,
+      fontSize: ControlStashConfig.FontSize,
+      fontStyle: ControlStashConfig.FontStyle,
+      fontVariant: ControlStashConfig.FontVariant
     };
     this.rectComponent = new AnimatedRectComponent(from, to, rectProps, animationConfig);
     this.textComponent = new AnimatedTextComponent(from, to, textProps, animationConfig);

src/features/cseMachine/components/ArrayNullUnit.tsx

@@ -31,7 +31,7 @@ export class ArrayNullUnit extends Visible {
         key={Layout.key++}
         points={[this.x(), this.y() + this.height(), this.x() + this.width(), this.y()]}
         stroke={defaultSAColor()}
-        hitStrokeWidth={Number(Config.DataHitStrokeWidth)}
+        hitStrokeWidth={Config.DataHitStrokeWidth}
         ref={this.ref}
         listening={false}
       />

src/features/cseMachine/components/ArrayUnit.tsx

@@ -66,10 +66,9 @@ export class ArrayUnit extends Visible {
       lowerRight: 0
     };
 
-    if (this.isFirstUnit)
-      cornerRadius.upperLeft = cornerRadius.lowerLeft = Number(Config.DataCornerRadius);
+    if (this.isFirstUnit) cornerRadius.upperLeft = cornerRadius.lowerLeft = Config.DataCornerRadius;
     if (this.isLastUnit)
-      cornerRadius.upperRight = cornerRadius.lowerRight = Number(Config.DataCornerRadius);
+      cornerRadius.upperRight = cornerRadius.lowerRight = Config.DataCornerRadius;
 
     return (
       <React.Fragment key={Layout.key++}>
@@ -80,7 +79,7 @@ export class ArrayUnit extends Visible {
           width={this.width()}
           height={this.height()}
           stroke={defaultSAColor()}
-          hitStrokeWidth={Number(Config.DataHitStrokeWidth)}
+          hitStrokeWidth={Config.DataHitStrokeWidth}
           fillEnabled={false}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}

src/features/cseMachine/components/ControlItemComponent.tsx

@@ -85,16 +85,16 @@ export class ControlItemComponent extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: ControlStashConfig.SA_WHITE.toString(),
-      padding: Number(ControlStashConfig.ControlItemTextPadding),
-      fontFamily: ControlStashConfig.FontFamily.toString(),
-      fontSize: Number(ControlStashConfig.FontSize),
-      fontStyle: ControlStashConfig.FontStyle.toString(),
-      fontVariant: ControlStashConfig.FontVariant.toString()
+      fill: ControlStashConfig.SA_WHITE,
+      padding: ControlStashConfig.ControlItemTextPadding,
+      fontFamily: ControlStashConfig.FontFamily,
+      fontSize: ControlStashConfig.FontSize,
+      fontStyle: ControlStashConfig.FontStyle,
+      fontVariant: ControlStashConfig.FontVariant
     };
     const tagProps = {
       stroke: currentItemSAColor(this.topItem),
-      cornerRadius: Number(ControlStashConfig.ControlItemCornerRadius)
+      cornerRadius: ControlStashConfig.ControlItemCornerRadius
     };
     return (
       <React.Fragment key={Layout.key++}>
@@ -124,13 +124,13 @@ export class ControlItemComponent extends Visible implements IHoverable {
             {...ShapeDefaultProps}
             stroke="black"
             fill={'black'}
-            opacity={Number(ControlStashConfig.TooltipOpacity)}
+            opacity={ControlStashConfig.TooltipOpacity}
           />
           <Text
             {...ShapeDefaultProps}
             {...textProps}
             text={this.tooltip}
-            padding={Number(ControlStashConfig.TooltipPadding)}
+            padding={ControlStashConfig.TooltipPadding}
           />
         </Label>
         {this.arrow?.draw()}