refactor(overlay): flip animation depending on direction, #8238

Author: wnvko

projects/igniteui-angular/src/lib/core/utils.ts

@@ -476,6 +476,14 @@ export function reverseAnimationResolver(animation: AnimationReferenceMetadata):
     return oppositeAnimation.get(animation) ?? animation;
 }
 
+export function isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean {
+    return horizontalAnimations.includes(animation);
+}
+
+export function isVerticalAnimation(animation: AnimationReferenceMetadata): boolean {
+    return verticalAnimations.includes(animation);
+}
+
 const oppositeAnimation: Map<AnimationReferenceMetadata, AnimationReferenceMetadata> = new Map([
     [fadeIn, fadeIn],
     [fadeOut, fadeOut],
@@ -593,3 +601,114 @@ const oppositeAnimation: Map<AnimationReferenceMetadata, AnimationReferenceMetad
     [swingInLeftBck, swingInRightBck],
     [swingOutLeftBck, swingOutRightBck],
 ]);
+
+const horizontalAnimations: AnimationReferenceMetadata[] = [
+    flipRight,
+    flipLeft,
+    flipVerFwd,
+    flipVerBck,
+    rotateInRight,
+    rotateOutRight,
+    rotateInLeft,
+    rotateOutLeft,
+    rotateInTr,
+    rotateOutTr,
+    rotateInBr,
+    rotateOutBr,
+    rotateInBl,
+    rotateOutBl,
+    rotateInTl,
+    rotateOutTl,
+    scaleInRight,
+    scaleOutRight,
+    scaleInLeft,
+    scaleOutLeft,
+    scaleInTr,
+    scaleOutTr,
+    scaleInBr,
+    scaleOutBr,
+    scaleInBl,
+    scaleOutBl,
+    scaleInTl,
+    scaleOutTl,
+    scaleInHorLeft,
+    scaleOutHorLeft,
+    scaleInHorRight,
+    scaleOutHorRight,
+    slideInRight,
+    slideOutRight,
+    slideInLeft,
+    slideOutLeft,
+    slideInTr,
+    slideOutTr,
+    slideInBr,
+    slideOutBr,
+    slideInBl,
+    slideOutBl,
+    slideInTl,
+    slideOutTl,
+    swingInRightFwd,
+    swingOutRightFwd,
+    swingInLeftFwd,
+    swingOutLefttFwd,
+    swingInRightBck,
+    swingOutRightBck,
+    swingInLeftBck,
+    swingOutLeftBck,
+];
+const verticalAnimations: AnimationReferenceMetadata[] = [
+    flipTop,
+    flipBottom,
+    flipHorFwd,
+    flipHorBck,
+    growVerIn,
+    growVerOut,
+    rotateInTop,
+    rotateOutTop,
+    rotateInBottom,
+    rotateOutBottom,
+    rotateInTr,
+    rotateOutTr,
+    rotateInBr,
+    rotateOutBr,
+    rotateInBl,
+    rotateOutBl,
+    rotateInTl,
+    rotateOutTl,
+    scaleInTop,
+    scaleOutTop,
+    scaleInBottom,
+    scaleOutBottom,
+    scaleInTr,
+    scaleOutTr,
+    scaleInBr,
+    scaleOutBr,
+    scaleInBl,
+    scaleOutBl,
+    scaleInTl,
+    scaleOutTl,
+    scaleInVerTop,
+    scaleOutVerTop,
+    scaleInVerBottom,
+    scaleOutVerBottom,
+    slideInTop,
+    slideOutTop,
+    slideInBottom,
+    slideOutBottom,
+    slideInTr,
+    slideOutTr,
+    slideInBr,
+    slideOutBr,
+    slideInBl,
+    slideOutBl,
+    slideInTl,
+    slideOutTl,
+    swingInTopFwd,
+    swingOutTopFwd,
+    swingInBottomFwd,
+    swingOutBottomFwd,
+    swingInTopBck,
+    swingOutTopBck,
+    swingInBottomBck,
+    swingOutBottomBck,
+];

projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts

@@ -1,4 +1,5 @@
-import { reverseAnimationResolver } from '../../../core/utils';
+import { AnimationReferenceMetadata } from '@angular/animations';
+import { isHorizontalAnimation, isVerticalAnimation, reverseAnimationResolver } from '../../../core/utils';
 import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities';
 import { BaseFitPositionStrategy } from './base-fit-position-strategy';
 
@@ -11,12 +12,10 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
     /** @inheritdoc */
     protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) {
         const transformString: string[] = [];
-        let flipped = false;
         if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0) {
             if (this.canFlipHorizontal(connectedFit)) {
                 this.flipHorizontal();
-                this.flipAnimation();
-                flipped = true;
+                this.flipAnimation(FlipDirection.horizontal);
             } else {
                 const horizontalPush = this.horizontalPush(connectedFit);
                 transformString.push(`translateX(${horizontalPush}px)`);
@@ -26,9 +25,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         if (connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) {
             if (this.canFlipVertical(connectedFit)) {
                 this.flipVertical();
-                if (!flipped) {
-                    this.flipAnimation();
-                }
+                this.flipAnimation(FlipDirection.vertical));
             } else {
                 const verticalPush = this.verticalPush(connectedFit);
                 transformString.push(`translateY(${verticalPush}px)`);
@@ -159,14 +156,43 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
     }
 
     /**
-     * Changes open and close animation with opposite animation if one exists
+     * Changes open and close animation with reverse animation if one exists
+     * @param flipDirection direction for which to change the animations
      */
-    private flipAnimation() {
+    private flipAnimation(flipDirection: FlipDirection): void {
         if (this.settings.openAnimation) {
-            this.settings.openAnimation = reverseAnimationResolver(this.settings.openAnimation);
+            this.settings.openAnimation = this.updateAnimation(this.settings.openAnimation, flipDirection);
         }
         if (this.settings.closeAnimation) {
-            this.settings.closeAnimation = reverseAnimationResolver(this.settings.closeAnimation);
+            this.settings.closeAnimation = this.updateAnimation(this.settings.closeAnimation, flipDirection);
         }
     }
+
+    /**
+     * Tries to find the reverse animation according to provided direction
+     * @param animation animation to update
+     * @param direction required animation direction
+     * @returns reverse animation in given direction if one exists
+     */
+    private updateAnimation(animation: AnimationReferenceMetadata, direction: FlipDirection): AnimationReferenceMetadata {
+        switch (direction) {
+            case FlipDirection.horizontal:
+                if (isHorizontalAnimation(animation)) {
+                    return reverseAnimationResolver(animation);
+                }
+                break;
+            case FlipDirection.vertical:
+                if (isVerticalAnimation(animation)) {
+                    return reverseAnimationResolver(animation);
+                }
+                break;
+        }
+
+        return animation;
+    }
+}
+
+enum FlipDirection {
+    horizontal,
+    vertical
 }