Enhancement: Improve EE workflow logic and structure

ee-workflow/src/components/animator.ts

@@ -17,9 +17,8 @@
 /**
  * Internal dependencies.
  */
-import main from '../main';
 import Figure from './figure';
-import Line from './figure/line';
+import FigureFactory from './figure/figureFactory';
 import Group from './group';
 
 /**
@@ -30,56 +29,131 @@ export default class Animator {
   /**
    * Unique id of the animator.
    */
-  id: string;
+  private id: string;
 
   /**
    * Array of objects to be animated. Can be figures or groups.
    * The last object in the array is a dummy object that acts as a placeholder for the end of the animation.
    */
-  objects: Array<Figure | Group> = [];
+  private objects: Array<Figure | Group> = [];
 
   /**
    * Index of the current object being animated.
    */
-  index = 0;
+  private index = 0;
 
   /**
    * Flag to indicate if the animation should be saved in animatorSnapshot.
    * If true, the animation will NOT be saved in animatorSnapshot.
    */
-  throw = false;
+  private throw = false;
+
+  /**
+   * Function to be executed when the animation ends.
+   */
+  private sideEffectOnEnd: (() => void) | undefined;
 
   /**
    * Counter for the number of animations created.
    */
   static animationCounter = 0;
 
-  constructor(objects: Array<Figure | Group>) {
+  constructor(
+    objects: Array<Figure | Group>,
+    figureFactory: FigureFactory,
+    id?: string
+  ) {
     Animator.animationCounter++;
     this.id =
+      id ||
       `animation-${Animator.animationCounter}` +
-      Math.random().toString(36).slice(2, 9);
+        Math.random().toString(36).slice(2, 9);
     this.objects = [
       ...objects,
-      new Line(0, 0, 0, 0, main.backgroundColor.toString()), // last dummy object acts as a placeholder for the end of the animation
+      figureFactory.line({
+        x: 0,
+        y: 0,
+        endX: 0,
+        endY: 0,
+      }), // last dummy object acts as a placeholder for the end of the animation
     ];
-    this.objects.forEach((object) => object.setAid(this.id));
+    this.objects.forEach((object) => object.setAnimatorId(this.id));
   }
 
   /**
    * Draws the current object in the animation sequence, and increments the index.
    * If the index reaches the end of the sequence, it resets the index to 0.
+   * @param skipDraw - boolean indicating if the draw function should be skipped
    * @returns boolean indicating if the animation has finished
    */
-  draw(): boolean {
-    this.objects[this.index].draw();
-    this.index++;
-
-    if (this.index === this.objects.length) {
+  draw(skipDraw = false): boolean {
+    if (this.index === this.objects.length - 1) {
       this.index = 0;
+
+      if (!skipDraw) {
+        this.sideEffectOnEnd?.();
+      }
+
       return true;
     }
 
+    if (!skipDraw) {
+      this.objects[this.index].draw();
+    }
+
+    this.index++;
+
     return false;
   }
+
+  /**
+   * Resets the index of the animator to 0.
+   */
+  resetIndex() {
+    this.index = 0;
+  }
+
+  /**
+   * Sets a side effect to be executed when the animation ends
+   * @param sideEffect - function to be executed when the animation ends
+   */
+  setSideEffectOnEnd(sideEffect: () => void) {
+    this.sideEffectOnEnd = sideEffect;
+  }
+
+  /**
+   * Gets the unique id of the animator.
+   * @returns unique id of the animator
+   */
+  getId(): string {
+    return this.id;
+  }
+
+  /**
+   * Gets the throw flag.
+   * @returns true if the animation will NOT be saved in animatorSnapshot.
+   */
+  getThrow(): boolean {
+    return this.throw;
+  }
+
+  /**
+   * Sets the throw flag to true.
+   * If true, the animation will NOT be saved in animatorSnapshot.
+   * @param throwFlag - boolean indicating if the animation should be saved in animatorSnapshot
+   */
+  setThrow(throwFlag: boolean) {
+    this.throw = throwFlag;
+  }
+
+  getObjects(): Array<Figure | Group> {
+    return this.objects;
+  }
+
+  removeObject(object: Figure | Group) {
+    const index = this.objects.indexOf(object);
+    if (index > -1) {
+      this.objects.splice(index, 1);
+    }
+  }
 }

ee-workflow/src/components/figure/box.ts

@@ -18,7 +18,7 @@
  * Internal dependencies.
  */
 import Figure from '.';
-import main from '../../main';
+import Main from '../../main';
 
 /**
  * Class for creating a box figure.
@@ -29,24 +29,34 @@ export default class Box extends Figure {
   /**
    * Width of the box.
    */
-  width: number;
+  private width: number;
 
   /**
    * Height of the box.
    */
-  height: number;
+  private height: number;
+
+  /**
+   * Callback defined by the user to be executed when the box is clicked.
+   */
+  private customMouseClicked: (() => void) | undefined;
 
   constructor(
+    canvasRuuner: Main,
     x: number,
     y: number,
     width: number,
     height: number,
+    id?: string,
     fill?: string,
-    stroke?: string
+    stroke?: string,
+    tags?: string[],
+    mouseClicked?: () => void
   ) {
-    super(x, y, fill, stroke);
+    super(canvasRuuner, x, y, id, fill, stroke, tags);
     this.width = width;
     this.height = height;
+    this.customMouseClicked = mouseClicked;
   }
 
   draw() {
@@ -57,10 +67,10 @@ export default class Box extends Figure {
     this.p5?.pop();
   }
 
-  onHover() {
+  mouseMoved() {
     this.savePreviousColors();
     this.fill = 'red'; // TODO: Discuss the function
-    main.addFigure(this, true);
+    this.canvasRunner.addFigure(this, true);
   }
 
   onLeave() {
@@ -72,11 +82,12 @@ export default class Box extends Figure {
     }
 
     this.reApplyPreviousColors();
-    main.addFigure(this, true);
+    this.canvasRunner.addFigure(this, true);
   }
 
-  onClick() {
+  mouseClicked() {
     // TODO: Discuss the function
+    this.customMouseClicked?.();
   }
 
   isHovering(): boolean {
@@ -92,14 +103,6 @@ export default class Box extends Figure {
     );
   }
 
-  remove() {
-    this.p5?.push();
-    this.p5?.fill(main.backgroundColor);
-    this.p5?.stroke(main.backgroundColor);
-    this.p5?.rect(this.x, this.y, this.width, this.height);
-    this.p5?.pop();
-  }
-
   reDraw(
     x?: number,
     y?: number,
@@ -108,13 +111,12 @@ export default class Box extends Figure {
     fill?: string,
     stroke?: string
   ) {
-    this.remove();
     this.x = x ?? this.x;
     this.y = y ?? this.y;
     this.width = width ?? this.width;
     this.height = height ?? this.height;
     this.fill = fill || this.fill;
     this.stroke = stroke || this.stroke;
-    main.reDrawAll();
+    this.canvasRunner.reDrawAll();
   }
 }

ee-workflow/src/components/figure/circle.ts

@@ -18,7 +18,7 @@
  * Internal dependencies.
  */
 import Figure from '.';
-import main from '../../main';
+import Main from '../../main';
 
 /**
  * Class for creating a circle figure.
@@ -29,16 +29,19 @@ export default class Circle extends Figure {
   /**
    * Diameter of the circle.
    */
-  diameter: number;
+  private diameter: number;
 
   constructor(
+    canvasRunner: Main,
     x: number,
     y: number,
     diameter: number,
+    id?: string,
     fill?: string,
-    stroke?: string
+    stroke?: string,
+    tags?: string[]
   ) {
-    super(x, y, fill, stroke);
+    super(canvasRunner, x, y, id, fill, stroke, tags);
     this.diameter = diameter;
   }
 
@@ -50,10 +53,10 @@ export default class Circle extends Figure {
     this.p5?.pop();
   }
 
-  onHover() {
+  mouseMoved() {
     this.savePreviousColors();
     this.fill = 'red'; // TODO: Discuss the function
-    main.addFigure(this, true);
+    this.canvasRunner.addFigure(this, true);
   }
 
   onLeave() {
@@ -65,10 +68,10 @@ export default class Circle extends Figure {
     }
 
     this.reApplyPreviousColors();
-    main.addFigure(this, true);
+    this.canvasRunner.addFigure(this, true);
   }
 
-  onClick() {
+  mouseClicked() {
     // TODO: Discuss the function
   }
 
@@ -83,27 +86,18 @@ export default class Circle extends Figure {
     );
   }
 
-  remove() {
-    this.p5?.push();
-    this.p5?.fill(main.backgroundColor);
-    this.p5?.stroke(main.backgroundColor);
-    this.p5?.circle(this.x, this.y, this.diameter + 1);
-    this.p5?.pop();
-  }
-
   reDraw(
     x?: number,
     y?: number,
     diameter?: number,
     fill?: string,
     stroke?: string
   ) {
-    this.remove();
     this.x = x ?? this.x;
     this.y = y ?? this.y;
     this.diameter = diameter ?? this.diameter;
     this.fill = fill || this.fill;
     this.stroke = stroke || this.stroke;
-    main.reDrawAll();
+    this.canvasRunner.reDrawAll();
   }
 }