perf: updating backdrop only then step change

Brisanet · Dec 10, 2024 · cd21a29 · cd21a29
1 parent 243db35
commit cd21a29
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 34 deletions.
diff --git a/projects/ion/src/lib/tour/tour-backdrop/tour-backdrop.component.spec.ts b/projects/ion/src/lib/tour/tour-backdrop/tour-backdrop.component.spec.ts
@@ -36,9 +36,7 @@ describe('IonTourBackdropComponent', () => {
   it('should render with custom class', async () => {
     const ionStepBackdropCustomClass = 'custom-class';
 
-    await sut({
-      currentStep: { ...STEP_MOCK, ionStepBackdropCustomClass },
-    });
+    await sut({ currentStep: { ...STEP_MOCK, ionStepBackdropCustomClass } });
 
     expect(screen.queryByTestId('ion-tour-backdrop')).toHaveClass(
       ionStepBackdropCustomClass

diff --git a/projects/ion/src/lib/tour/tour-backdrop/tour-backdrop.component.ts b/projects/ion/src/lib/tour/tour-backdrop/tour-backdrop.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 import { IonTourStepProps } from '../../core/types';
@@ -9,20 +9,46 @@ import { IonTourStepProps } from '../../core/types';
   styleUrls: ['./tour-backdrop.component.scss'],
 })
 export class IonTourBackdropComponent implements OnInit {
-  @Input() currentStep: IonTourStepProps | null = null;
   @Input() isActive = false;
 
+  public currentStep: IonTourStepProps | null = null;
   public inTransition = true;
+  public clipPath: SafeStyle = '';
 
-  public get clipPath(): SafeStyle {
+  constructor(
+    private sanitizer: DomSanitizer,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  public ngOnInit(): void {
+    setTimeout(() => (this.inTransition = false));
+  }
+
+  public updateStep(step: IonTourStepProps | null): void {
+    this.currentStep = step;
+    this.updateClipPath();
+  }
+
+  public performFinalTransition(callback: () => void): void {
+    const transitionDuration = 400;
+    this.inTransition = true;
+
+    setTimeout(() => {
+      this.inTransition = false;
+      callback();
+    }, transitionDuration);
+  }
+
+  private updateClipPath(): void {
     if (!this.currentStep) {
-      return '';
+      this.clipPath = '';
+      return;
     }
 
     const { getTarget, ionStepBackdropPadding: padding } = this.currentStep;
     const { top, left, bottom, right } = getTarget();
 
-    return this.sanitizer.bypassSecurityTrustStyle(`polygon(
+    this.clipPath = this.sanitizer.bypassSecurityTrustStyle(`polygon(
       0 0,
       0 100%,
       ${left - padding}px 100%,
@@ -34,21 +60,7 @@ export class IonTourBackdropComponent implements OnInit {
       100% 100%,
       100% 0
     )`);
-  }
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  public ngOnInit(): void {
-    setTimeout(() => (this.inTransition = false));
-  }
 
-  public performFinalTransition(callback: () => void): void {
-    const transitionDuration = 400;
-    this.inTransition = true;
-
-    setTimeout(() => {
-      this.inTransition = false;
-      callback();
-    }, transitionDuration);
+    this.cdr.detectChanges();
   }
 }
diff --git a/projects/ion/src/lib/tour/tour-step.directive.ts b/projects/ion/src/lib/tour/tour-step.directive.ts
@@ -225,9 +225,14 @@ export class IonTourStepDirective implements OnInit, OnChanges, OnDestroy {
   }
 
   private hostPositionChanged(): boolean {
-    return !isEqual(
-      this.hostPosition,
-      this.elementRef.nativeElement.getBoundingClientRect()
+    const newPosition = this.elementRef.nativeElement.getBoundingClientRect();
+    return (
+      this.hostPosition &&
+      newPosition &&
+      this.hostPosition.x === newPosition.x &&
+      this.hostPosition.y === newPosition.y &&
+      this.hostPosition.width === newPosition.width &&
+      this.hostPosition.height === newPosition.height
     );
   }
 

diff --git a/projects/ion/src/lib/tour/tour.service.spec.ts b/projects/ion/src/lib/tour/tour.service.spec.ts
@@ -26,7 +26,7 @@ const backdropComponentMock = {
   hostView: {},
   location: { nativeElement: document.createElement('div') },
   changeDetectorRef: { detectChanges: jest.fn() },
-  instance: { performFinalTransition },
+  instance: { performFinalTransition, updateStep: jest.fn() },
   destroy: jest.fn(),
 };
 

diff --git a/projects/ion/src/lib/tour/tour.service.ts b/projects/ion/src/lib/tour/tour.service.ts
@@ -55,12 +55,7 @@ export class IonTourService {
     }
 
     const current = this.currentStep.value;
-
-    if (
-      current &&
-      current.ionStepId === step.ionStepId &&
-      !isEqual(step.getTarget(), current.getTarget())
-    ) {
+    if (current && current.ionStepId === step.ionStepId) {
       this.navigateToStep(step);
     }
 
@@ -154,6 +149,7 @@ export class IonTourService {
 
   private navigateToStep(step: IonTourStepProps): void {
     this.currentStep.next(step);
+    console.log('step', step);
   }
 
   private createBackdrop(): void {
@@ -180,7 +176,7 @@ export class IonTourService {
       .pipe(takeUntil(this.destroyBackdrop$))
       .subscribe((step) => {
         if (this.backdropRef) {
-          this.backdropRef.instance.currentStep = step;
+          this.backdropRef.instance.updateStep(step);
         }
       });