fixed bug with empty array, and animated control instr

Author: alsonleej

src/features/cseMachine/CseMachineAnimation.tsx

@@ -115,7 +115,7 @@ export class CseAnimation {
         break;
       case 'SpreadElement':
         CseAnimation.animations.push(
-          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems()),
+          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
         );
         break;
       case 'AssignmentExpression':
@@ -285,31 +285,35 @@ export class CseAnimation {
         case InstrType.SPREAD:
           const prevcontrol = Layout.previousControlComponent.stackItemComponents;
           const control = Layout.controlComponent.stackItemComponents;
-          const array = Layout.previousStashComponent.stashItemComponents.at(-1)!.arrow!.target! as ArrayValue;
+          const array = Layout.previousStashComponent.stashItemComponents.at(-1)!.arrow!
+            .target! as ArrayValue;
 
           console.log(array);
 
           let currCallInstr;
           let prevCallInstr;
-      
-          
 
           for (let i = 0; control.at(-i) != undefined; i++) {
-            if (control.at(-i)?.text.includes("call ")) { // find call instr above 
+            if (control.at(-i)?.text.includes('call ')) {
+              // find call instr above
               currCallInstr = control.at(-i);
               break;
             }
           }
 
           for (let i = 0; prevcontrol.at(-i) != undefined; i++) {
-            if (prevcontrol.at(-i)?.text.includes("call ")) { // find call instr above 
+            if (prevcontrol.at(-i)?.text.includes('call ')) {
+              // find call instr above
               prevCallInstr = prevcontrol.at(-i);
               break;
             }
           }
 
-          const resultItems = array.data.length !== 0 ? Layout.stashComponent.stashItemComponents.slice(-array.data.length) : [];
-          
+          const resultItems =
+            array.data.length !== 0
+              ? Layout.stashComponent.stashItemComponents.slice(-array.data.length)
+              : [];
+
           CseAnimation.animations.push(
             new ArraySpreadAnimation(
               lastControlComponent,
@@ -318,7 +322,6 @@ export class CseAnimation {
               currCallInstr!,
               prevCallInstr!
             )
-            
           );
           break;
         case InstrType.ARRAY_LENGTH:

src/features/cseMachine/animationComponents/ArraySpreadAnimation.tsx

@@ -45,35 +45,34 @@ export class ArraySpreadAnimation extends Animatable {
     this.endX = stashItem!.x() + stashItem!.width();
     this.controlInstrAnimation = new AnimatedTextbox(
       controlInstrItem.text,
-      getNodePosition(controlInstrItem), 
+      getNodePosition(controlInstrItem),
       { rectProps: { stroke: defaultActiveColor() } }
     );
     this.stashItemAnimation = new AnimatedTextbox(stashItem.text, getNodePosition(stashItem), {
-        rectProps: {
-          stroke: defaultDangerColor()
-        }
-      });
+      rectProps: {
+        stroke: defaultDangerColor()
+      }
+    });
 
     // call instr above
     this.prevCallInstrAnimation = new AnimatedTextbox(
       this.prevCallInstrItem.text,
-      { ...getNodePosition(this.prevCallInstrItem),
-        opacity: 0 },
+      { ...getNodePosition(this.prevCallInstrItem), opacity: 0 },
       { rectProps: { stroke: defaultActiveColor() } }
     );
 
     this.currCallInstrAnimation = new AnimatedTextbox(
       this.currCallInstrItem.text,
-      { ...getNodePosition(this.currCallInstrItem),
-        opacity: 0 },
+      { ...getNodePosition(this.currCallInstrItem), opacity: 0 },
       { rectProps: { stroke: defaultActiveColor() } }
     );
 
     this.resultAnimations = resultItems.map(item => {
       return new AnimatedTextbox(item.text, {
-      ...getNodePosition(item),
-      opacity: 0
-    })});
+        ...getNodePosition(item),
+        opacity: 0
+      });
+    });
     if (stashItem.arrow) {
       this.arrowAnimation = new AnimatedGenericArrow(stashItem.arrow, { opacity: 0 });
     }
@@ -103,10 +102,8 @@ export class ArraySpreadAnimation extends Animatable {
     const fadeDuration = ((animationConfig?.duration ?? 1) * 3) / 4;
     const fadeInDelay = (animationConfig?.delay ?? 0) + (animationConfig?.duration ?? 1) / 4;
 
-
     // Move spread instruction next to stash item (array pointer)
     await Promise.all([
-
       // Show change in call arity
       this.prevCallInstrAnimation.animateTo(
         { scaleX: 1.1, scaleY: 1.1, opacity: 0 },
@@ -118,35 +115,24 @@ export class ArraySpreadAnimation extends Animatable {
         { duration: 0.3, easing: Easings.StrongEaseOut }
       ),
 
-
-
       ...this.resultAnimations.flatMap(a => [
-
-      a.animateTo(
-        { x: startX + (this.endX - startX) / 2 - this.resultItems[0]?.width() / 2 },
-        { duration: 0 }
-      )
-    ]),
+        a.animateTo(
+          { x: startX + (this.endX - startX) / 2 - this.resultItems[0]?.width() / 2 },
+          { duration: 0 }
+        )
+      ]),
       this.controlInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig),
       this.controlInstrAnimation.animateTo(
         {
           x: startX,
-          y:
-            resultY +
-               (this.resultItems[0]?.height() ?? this.stashItem.height()),
+          y: resultY + (this.resultItems[0]?.height() ?? this.stashItem.height()),
           width: minInstrWidth
         },
         animationConfig
       ),
       this.stashItemAnimation.animateRectTo({ stroke: defaultDangerColor() }, animationConfig)
-      
     ]);
 
- 
-
-
-
-
     animationConfig = { ...animationConfig, delay: 0 };
     // Merge all elements together to form the result
     await Promise.all([
@@ -156,20 +142,21 @@ export class ArraySpreadAnimation extends Animatable {
         { ...animationConfig, duration: fadeDuration }
       ),
       this.stashItemAnimation.animateTo({ x: resultX(0) }, animationConfig),
-      this.stashItemAnimation.animateTo({ opacity: 0 }, { ...animationConfig, duration: fadeDuration }),
+      this.stashItemAnimation.animateTo(
+        { opacity: 0 },
+        { ...animationConfig, duration: fadeDuration }
+      ),
 
       ...this.resultAnimations.flatMap((a, idx) => [
         a.animateTo({ x: resultX(idx) }, animationConfig),
         a.animateRectTo({ stroke: defaultDangerColor() }, animationConfig),
-      a.animateTo(
-        { opacity: 1 },
-        { ...animationConfig, duration: fadeDuration, delay: fadeInDelay }
-      ),
-      ]),
-
+        a.animateTo(
+          { opacity: 1 },
+          { ...animationConfig, duration: fadeDuration, delay: fadeInDelay }
+        )
+      ])
     ]);
 
-
     this.destroy();
   }