Update logic for handling mouse move event in main class, use vars to…

… store previous objects and take action according to them
GoogleChromeLabs · Jan 20, 2025 · d7cbe8f · d7cbe8f
1 parent 701ce46
commit d7cbe8f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 15 deletions.
diff --git a/ee-workflow/src/components/group.ts b/ee-workflow/src/components/group.ts
@@ -17,6 +17,7 @@
 /**
  * Internal dependencies.
  */
+import Main from '../main';
 import Figure from './figure';
 
 /**
@@ -38,6 +39,11 @@ export default class Group {
    */
   private animatorId = '';
 
+  /**
+   * Canvas runner instance.
+   */
+  private canvasRunner: Main;
+
   /**
    * Property to check if the group should be saved in groupSnapshot.
    * If true, the group will NOT be saved in groupSnapshot.
@@ -49,8 +55,9 @@ export default class Group {
    */
   static groupCount = 0;
 
-  constructor(figures: Figure[], id?: string) {
+  constructor(canvasRunner: Main, figures: Figure[], id?: string) {
     Group.groupCount++;
+    this.canvasRunner = canvasRunner;
     this.id =
       id ||
       `group-${Group.groupCount}` + Math.random().toString(36).slice(2, 9);
@@ -74,6 +81,7 @@ export default class Group {
     this.figures.forEach((figure) => {
       figure.mouseMoved();
     });
+    this.canvasRunner.addGroup(this, true);
   }
 
   /**
@@ -83,6 +91,7 @@ export default class Group {
     this.figures.forEach((figure) => {
       figure.onLeave();
     });
+    this.canvasRunner.addGroup(this, true);
   }
 
   /**

diff --git a/ee-workflow/src/index.ts b/ee-workflow/src/index.ts
@@ -77,7 +77,7 @@ const timeline = mainFF.line({
 });
 
 const circles = [
-  new Group([
+  new Group(mainCanvas, [
     mainFF.circle({
       x: 100,
       y: 200,
@@ -102,7 +102,7 @@ const circles = [
       stroke: 'black',
     }),
   ]),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.circle({
       x: 300,
       y: 200,
@@ -127,7 +127,7 @@ const circles = [
       stroke: 'black',
     }),
   ]),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.circle({
       x: 500,
       y: 200,
@@ -152,7 +152,7 @@ const circles = [
       stroke: 'black',
     }),
   ]),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.circle({
       x: 700,
       y: 200,
@@ -202,7 +202,7 @@ const advertiserFlow = [
     hasArrow: true,
     shouldTravel: true,
   }),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.box({
       x: 50,
       y: 300,
@@ -225,7 +225,7 @@ const advertiserFlow = [
     hasArrow: true,
     shouldTravel: true,
   }),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.box({
       x: 50,
       y: 413,
@@ -308,7 +308,7 @@ flow.setSideEffectOnEnd(() => {
 mainCanvas.addAnimator(flow, false, true);
 
 mainCanvas.addGroup(
-  new Group([
+  new Group(mainCanvas, [
     mainFF.line({
       x: 0,
       y: 200,
@@ -343,7 +343,7 @@ const travellerLine = mainFF.line({
   shouldTravel: true,
 });
 
-const travellerGroup = new Group([
+const travellerGroup = new Group(mainCanvas, [
   mainFF.line({
     x: 0,
     y: 600,
@@ -392,7 +392,7 @@ const secondCircleAnimations = [
     hasArrow: true,
     shouldTravel: true,
   }),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.box({
       x: 250,
       y: 300,
@@ -415,7 +415,7 @@ const secondCircleAnimations = [
     hasArrow: true,
     shouldTravel: true,
   }),
-  new Group([
+  new Group(mainCanvas, [
     mainFF.box({
       x: 250,
       y: 413,
@@ -491,7 +491,7 @@ secondFlow.setSideEffectOnEnd(() => {
 mainCanvas.addAnimator(secondFlow, false, true);
 
 mainCanvas.addGroup(
-  new Group([
+  new Group(mainCanvas, [
     mainFF.line({
       x: 137,
       y: 200,

diff --git a/ee-workflow/src/main.ts b/ee-workflow/src/main.ts
@@ -111,6 +111,16 @@ class Main {
    */
   private traveller: Traveller | null = null;
 
+  /**
+   * Last hovered group.
+   */
+  private hoveredGroup: Group | null = null;
+
+  /**
+   * Last hovered figure.
+   */
+  private hoveredFigure: Figure | null = null;
+
   /**
    * Main constructor.
    * @param clearOnEachStep - Whether to clear the canvas on each step (default: true).
@@ -314,13 +324,47 @@ class Main {
    */
   private mouseMoved() {
     this.snapshot.forEach((object) => {
+      if (object.getAnimatorId()) {
+        return;
+      }
+
       const isHovering = object.isHovering();
+
+      if (!isHovering) {
+        if (this.hoveredFigure?.getId() === object.getId()) {
+          this.hoveredFigure.onLeave();
+          this.hoveredFigure = null;
+
+          if (this.hoveredGroup) {
+            this.hoveredGroup.onLeave();
+            this.hoveredGroup = null;
+          }
+        }
+
+        return;
+      }
+
+      if (isHovering && this.hoveredFigure?.getId() === object.getId()) {
+        return;
+      }
+
       const _object = this.isGrouped(object) || object;
 
+      if (
+        isHovering &&
+        _object instanceof Group &&
+        this.hoveredGroup?.getId() === _object.getId()
+      ) {
+        this.hoveredFigure = object;
+        return;
+      }
+
       if (isHovering) {
-        _object.mouseMoved();
-      } else {
-        _object.onLeave();
+        this.hoveredFigure = object;
+        this.hoveredGroup = _object instanceof Group ? _object : null;
+
+        this.hoveredFigure?.mouseMoved();
+        this.hoveredGroup?.mouseMoved();
       }
     });
   }