CSE Machine: Visual garbage collector

src/features/cseMachine/CseMachineAnimation.tsx

@@ -152,6 +152,7 @@ export class CseAnimation {
     ) {
       return;
     }
+
     if (isNode(lastControlItem)) {
       CseAnimation.handleNode(lastControlItem);
     } else if (isInstr(lastControlItem)) {

src/features/cseMachine/CseMachineUtils.ts

@@ -412,13 +412,13 @@ export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}
     node.setAttrs({
       stroke: node.attrs.stroke
         ? node instanceof Text
-          ? defaultTextColor()
-          : defaultStrokeColor()
+          ? reachedTextColor()
+          : reachedStrokeColor()
         : node.attrs.stroke,
       fill: node.attrs.fill
         ? node instanceof Text
-          ? defaultTextColor()
-          : defaultStrokeColor()
+          ? reachedTextColor()
+          : reachedStrokeColor()
         : node.attrs.fill,
       ...unhoveredAttrs
     });
@@ -942,16 +942,16 @@ export const isStashItemInDanger = (stashIndex: number): boolean => {
 export const defaultBackgroundColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintBgColor : Config.BgColor;
 
-export const defaultTextColor = () =>
+export const reachedTextColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintTextColor : Config.TextColor;
 
-export const fadedTextColor = () =>
+export const defaultTextColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintTextColorFaded : Config.TextColorFaded;
 
-export const defaultStrokeColor = () =>
+export const reachedStrokeColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintStrokeColor : Config.StrokeColor;
 
-export const fadedStrokeColor = () =>
+export const defaultStrokeColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintStrokeColorFaded : Config.StrokeColorFaded;
 
 export const defaultActiveColor = () =>

src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx

@@ -10,9 +10,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -90,7 +90,7 @@ export class ArrayAccessAnimation extends Animatable {
     await Promise.all([
       this.arrayItemAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
       this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
-      this.accessorAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.accessorAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.accessorAnimation.animateTo(
         {
           x: indexAboveArrayLocation.x - minInstrItemWidth,
@@ -99,7 +99,7 @@ export class ArrayAccessAnimation extends Animatable {
         },
         { duration: 1.2 }
       ),
-      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.indexItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.indexItemAnimation.animateTo(indexAboveArrayLocation, { duration: 1.2 })
     ]);
     // Move arr acc instruction and result on top of array, and bring result up

src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx

@@ -12,8 +12,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  getTextWidth
+  getTextWidth,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -120,18 +120,18 @@ export class ArrayAssignmentAnimation extends Animatable {
     await Promise.all([
       this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.5 }),
       this.valueArrowAnimation?.animateTo({ opacity: 0 }, { duration: 0.5 }),
-      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.asgnItemAnimation.animateTo({
         x: this.resultItem.x() - (this.resultItemIsFirst ? minAsgnItemWidth : 0),
         y: this.resultItem.y() + (this.resultItemIsFirst ? 0 : this.resultItem.height()),
         width: minAsgnItemWidth
       }),
-      this.arrayItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.arrayItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.arrayItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
-      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.indexItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.indexItemAnimation.animateTo({ x: this.resultItem.x() }),
       this.indexItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
-      this.resultAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.resultAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.resultAnimation.animateTo({ x: this.resultItem.x() }),
       this.resultArrowAnimation?.animateTo({ opacity: 1 }, { duration: 0.5, delay: 0.75 })
     ]);

src/features/cseMachine/animationComponents/AssignmentAnimation.tsx

@@ -9,7 +9,7 @@ import { defaultOptions, Text } from '../components/Text';
 import { PrimitiveValue } from '../components/values/PrimitiveValue';
 import { Value } from '../components/values/Value';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor, getTextWidth } from '../CseMachineUtils';
+import { defaultActiveColor, getTextWidth, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -72,7 +72,7 @@ export class AssignmentAnimation extends Animatable {
     this.binding.arrow?.ref.current?.hide();
     // move asgn instruction next to stash item, while also decreasing its width
     await Promise.all([
-      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.asgnItemAnimation.animateTo({
         x: this.stashItem.x() - (this.stashItemIsFirst ? minAsgnItemWidth : 0),
         y: this.stashItem.y() + (this.stashItemIsFirst ? 0 : this.stashItem.height()),

src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx

@@ -7,9 +7,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -72,10 +72,10 @@ export class BinaryOperationAnimation extends Animatable {
     const fadeInDelay = 1 / 4;
     // Shifts the right operand to the right and move the operator in between the operands
     await Promise.all([
-      this.binaryOperatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.binaryOperatorAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.binaryOperatorAnimation.animateTo({ ...rightOpPosition, width: minBinOpWidth }),
-      this.leftOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
-      this.rightOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.leftOperandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
+      this.rightOperandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.rightOperandAnimation.animateTo({
         ...rightOpPosition,
         x: rightOpPosition.x + minBinOpWidth

src/features/cseMachine/animationComponents/BranchAnimation.tsx

@@ -3,7 +3,7 @@ import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultDangerColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -44,7 +44,7 @@ export class BranchAnimation extends Animatable {
     this.resultItems.forEach(i => i.ref.current?.hide());
     // Move boolean next to branch instruction
     await Promise.all([
-      this.booleanItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.booleanItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.booleanItemAnimation.animateTo({
         x: this.branchItem.x() + this.branchItem.width(),
         y: this.branchItem.y()

src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
-import { defaultActiveColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultActiveColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -56,7 +56,7 @@ export class ControlExpansionAnimation extends Animatable {
     await Promise.all([
       // Fade out the previous item while also changing its height for a more fluid animation
       this.initialItemAnimation.animateRectTo(
-        { height: totalHeight, stroke: defaultStrokeColor() },
+        { height: totalHeight, stroke: reachedStrokeColor() },
         animationConfig
       ),
       this.initialItemAnimation.animateTextTo({ y: textY }, animationConfig),

src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx

@@ -8,8 +8,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -76,7 +76,7 @@ export class ControlToStashAnimation extends Animatable {
         ...stashPosition,
         stroke: isStashItemInDanger(this.stashItem.index)
           ? defaultDangerColor()
-          : defaultStrokeColor()
+          : reachedStrokeColor()
       }),
       this.controlTextAnimation.animateTo(stashPosition),
       // If the text is different, also fade out the old text and fade in the new text

src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx

@@ -12,7 +12,7 @@ import { Value } from '../components/values/Value';
 import { CseAnimation } from '../CseMachineAnimation';
 import { Config } from '../CseMachineConfig';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor, isEnvEqual } from '../CseMachineUtils';
+import { defaultActiveColor, isEnvEqual, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
 import { AnimatedRectComponent, AnimatedTextComponent } from './base/AnimationComponents';
@@ -61,7 +61,7 @@ export class FrameCreationAnimation extends Animatable {
     });
     this.borderAnimation = new AnimatedRectComponent({
       ...getNodePosition(origin),
-      stroke: origin instanceof ControlItemComponent ? defaultActiveColor() : defaultStrokeColor(),
+      stroke: origin instanceof ControlItemComponent ? defaultActiveColor() : reachedStrokeColor(),
       opacity: origin instanceof ControlItemComponent ? 1 : 0
     });
     if (frame.arrow) {

src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx

@@ -9,8 +9,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  getTextWidth
+  getTextWidth,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -99,13 +99,13 @@ export class FunctionApplicationAnimation extends Animatable {
       getTextWidth(this.callInstrItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
     // Move call instruction next to stash items
     await Promise.all([
-      this.callInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.callInstrAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.callInstrAnimation.animateTo({
         x: this.closureStashItem.x() - (this.isFirstStashItem ? minInstrWidth : 0),
         y: this.closureStashItem.y() + (this.isFirstStashItem ? 0 : this.closureStashItem.height()),
         width: minInstrWidth
       }),
-      ...this.stashItemAnimations.map(a => a.animateRectTo({ stroke: defaultStrokeColor() }))
+      ...this.stashItemAnimations.map(a => a.animateRectTo({ stroke: reachedStrokeColor() }))
     ]);
     const targetLocation = {
       x: this.functionFrame?.x() ?? this.newControlItems[0].x(),

src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx

@@ -8,9 +8,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -47,7 +47,7 @@ export class InstructionApplicationAnimation extends Animatable {
     this.stashItemAnimations = stashItems.map(item => {
       return new AnimatedTextbox(item.text, getNodePosition(item), {
         rectProps: {
-          stroke: isStashItemInDanger(item.index) ? defaultDangerColor() : defaultStrokeColor()
+          stroke: isStashItemInDanger(item.index) ? defaultDangerColor() : reachedStrokeColor()
         }
       });
     });
@@ -87,7 +87,7 @@ export class InstructionApplicationAnimation extends Animatable {
         { x: startX + (this.endX - startX) / 2 - this.resultItem!.width() / 2 },
         { duration: 0 }
       ),
-      this.controlInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig),
+      this.controlInstrAnimation.animateRectTo({ stroke: reachedStrokeColor() }, animationConfig),
       this.controlInstrAnimation.animateTo(
         {
           x: startX,
@@ -101,7 +101,7 @@ export class InstructionApplicationAnimation extends Animatable {
         animationConfig
       ),
       ...this.stashItemAnimations.map(a =>
-        a.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig)
+        a.animateRectTo({ stroke: reachedStrokeColor() }, animationConfig)
       )
     ]);
     animationConfig = { ...animationConfig, delay: 0 };

src/features/cseMachine/animationComponents/LookupAnimation.tsx

@@ -10,9 +10,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -65,7 +65,7 @@ export class LookupAnimation extends Animatable {
       getTextWidth(this.nameItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
     // move name item next to binding
     await Promise.all([
-      this.nameItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.nameItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.nameItemAnimation.animateTo(
         {
           x: this.frame.x() - minNameItemWidth,

src/features/cseMachine/animationComponents/PopAnimation.tsx

@@ -4,7 +4,7 @@ import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { defaultActiveColor, defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultActiveColor, defaultDangerColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -57,9 +57,9 @@ export class PopAnimation extends Animatable {
   async animate() {
     this.undefinedStashItem?.ref.current?.hide();
     await Promise.all([
-      this.popItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 0.8 }),
+      this.popItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 0.8 }),
       this.popItemAnimation.animateTo({ ...getNodePosition(this.stashItem), opacity: 0 }),
-      this.stashItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { delay: 0.3 }),
+      this.stashItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { delay: 0.3 }),
       this.stashItemAnimation.animateTo({ scaleX: 0.6, scaleY: 0.6 }, { delay: 0.3 })
     ]);
     await Promise.all([

src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx

@@ -7,9 +7,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -65,13 +65,13 @@ export class UnaryOperationAnimation extends Animatable {
         },
         { duration: 0 }
       ),
-      this.operatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operatorAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.operatorAnimation.animateTo({
         x: this.operand.x(),
         y: this.result.y(),
         width: minOpWidth
       }),
-      this.operandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.operandAnimation.animateTo({
         x: this.operand.x() + minOpWidth
       })

src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx

@@ -5,7 +5,7 @@ import { SharedProperties } from 'src/commons/utils/TypeHelper';
 
 import { GenericArrow } from '../../components/arrows/GenericArrow';
 import { Visible } from '../../components/Visible';
-import { defaultStrokeColor, fadedStrokeColor } from '../../CseMachineUtils';
+import { defaultStrokeColor, reachedStrokeColor } from '../../CseMachineUtils';
 import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
 import { AnimatedArrowComponent, AnimatedPathComponent } from './AnimationComponents';
 
@@ -33,13 +33,13 @@ export class AnimatedGenericArrow<
     this._width = arrow.width();
     this._height = arrow.height();
     this.pathComponent = new AnimatedPathComponent({
-      stroke: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      stroke: arrow.source.isReachable() ? reachedStrokeColor() : defaultStrokeColor(),
       data: arrow.path(),
       ...props
     });
     this.pathComponent.addListener(this.onPropsChange);
     this.arrowComponent = new AnimatedArrowComponent({
-      fill: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      fill: arrow.source.isReachable() ? reachedStrokeColor() : defaultStrokeColor(),
       points: arrow.points.slice(arrow.points.length - 4),
       ...props
     });