Merge pull request #6504 from IgniteUI/mvenkov/fix-overlay-position

fix(overlay): Position correctly overlay

Author: rkaraivanov

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -549,7 +549,7 @@ describe('igxOverlay', () => {
             expect(overlayContentTransform).toEqual(secondTransform);
         }));
 
-        it('fix for #1690 - click on second filter does not close first one.', fakeAsync(() => {
+        it('#1690 - click on second filter does not close first one.', fakeAsync(() => {
             const fixture = TestBed.createComponent(TwoButtonsComponent);
             const button1 = fixture.nativeElement.getElementsByClassName('buttonOne')[0];
             const button2 = fixture.nativeElement.getElementsByClassName('buttonTwo')[0];
@@ -566,7 +566,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children.length).toBe(1);
         }));
 
-        it('fix for #1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
+        it('#1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
             const fixture = TestBed.createComponent(SimpleDynamicWithDirectiveComponent);
             const overlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
             fixture.componentInstance.show(overlaySettings);
@@ -593,7 +593,7 @@ describe('igxOverlay', () => {
         }));
 
         // TODO: refactor utilities to include all exported methods in a class
-        it('fix for #1799 - content div should reposition on window resize.', fakeAsync(() => {
+        it('#1799 - content div should reposition on window resize.', fakeAsync(() => {
             const rect: ClientRect = {
                 bottom: 50,
                 height: 0,
@@ -635,7 +635,7 @@ describe('igxOverlay', () => {
             overlayInstance.hide(id);
         }));
 
-        it('fix for #2475 - An error is thrown for IgxOverlay when showing a component' +
+        it('#2475 - An error is thrown for IgxOverlay when showing a component' +
             'instance that is not attached to the DOM', fakeAsync(() => {
                 const fix = TestBed.createComponent(SimpleRefComponent);
                 fix.detectChanges();
@@ -656,7 +656,7 @@ describe('igxOverlay', () => {
                 expect(contentDiv.classList.contains(CLASS_OVERLAY_CONTENT_MODAL)).toBeTruthy();
             }));
 
-        it('fix for #2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
+        it('#2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
             const fix = TestBed.createComponent(WidthTestOverlayComponent);
             fix.debugElement.nativeElement.style.transform = 'translatex(100px)';
 
@@ -676,7 +676,7 @@ describe('igxOverlay', () => {
             expect(fix.componentInstance.customComponent.nativeElement.getBoundingClientRect().left).toBe(400);
         }));
 
-        it('fix for #2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
+        it('#2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
             const fix = TestBed.createComponent(SimpleRefComponent);
             fix.detectChanges();
             const overlayInstance = fix.componentInstance.overlay;
@@ -713,7 +713,7 @@ describe('igxOverlay', () => {
             expect(overlayInstance.onOpened.emit).toHaveBeenCalledTimes(1);
         }));
 
-        it('fix for #3673 - Should not close dropdown in dropdown', fakeAsync(() => {
+        it('#3673 - Should not close dropdown in dropdown', fakeAsync(() => {
             const fix = TestBed.createComponent(EmptyPageComponent);
             const button = fix.componentInstance.buttonElement;
             const overlay = fix.componentInstance.overlay;
@@ -749,7 +749,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children[0].localName).toEqual('div');
         }));
 
-        it('fix for #3743 - Reposition correctly resized element.', () => {
+        it('#3743 - Reposition correctly resized element.', () => {
             const fixture = TestBed.createComponent(TopLeftOffsetComponent);
             fixture.detectChanges();
 
@@ -801,7 +801,7 @@ describe('igxOverlay', () => {
             document.body.removeChild(wrapperElement);
         });
 
-        it('Fix for #3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
+        it('#3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;
             fixture.detectChanges();
@@ -825,6 +825,46 @@ describe('igxOverlay', () => {
             expect(appRef.attachView).toHaveBeenCalledWith('test');
             expect(overlay.getOverlayById(id).componentRef as any).toBe(mockComponent);
         }));
+
+        it('##6474 - should calculate correctly position', () => {
+            const elastic: ElasticPositionStrategy = new ElasticPositionStrategy();
+            const targetRect: ClientRect = {
+                top: 100,
+                bottom: 200,
+                height: 100,
+                left: 100,
+                right: 200,
+                width: 100
+            };
+            const elementRect: ClientRect = {
+                top: 0,
+                bottom: 300,
+                height: 300,
+                left: 0,
+                right: 300,
+                width: 300
+            };
+            const viewPortRect: ClientRect = {
+                top: 1000,
+                bottom: 1300,
+                height: 300,
+                left: 1000,
+                right: 1300,
+                width: 300
+            };
+            spyOn<any>(elastic, 'setStyle').and.returnValue({});
+            spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect);
+            spyOn(Util, 'getTargetRect').and.returnValue(targetRect);
+
+            const element = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect'] );
+            spyOn(element, 'getBoundingClientRect').and.returnValue(elementRect);
+            element.classList = { add: () => {} };
+            element.style = { width: '', height: ''};
+            elastic.position(element, null, null, true);
+
+            expect(element.style.width).toBe('200px');
+            expect(element.style.height).toBe('100px');
+        });
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {
@@ -2617,7 +2657,7 @@ describe('igxOverlay', () => {
             tick();
         }));
 
-        // Test fix for #1883 #1820
+        // Test #1883 #1820
         it('It should close the component when esc key is pressed and there were other keys pressed prior to esc.', fakeAsync(() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;

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

@@ -50,7 +50,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const leftBorder = this.calculateLeft(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection, 0);
         const rightBorder = leftBorder + connectedFit.contentElementRect.width;
-        return connectedFit.viewPortRect.left < leftBorder && rightBorder < connectedFit.viewPortRect.right;
+        return 0 < leftBorder && rightBorder < connectedFit.viewPortRect.width;
     }
 
     /**
@@ -65,7 +65,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const topBorder = this.calculateTop(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection, 0);
         const bottomBorder = topBorder + connectedFit.contentElementRect.height;
-        return connectedFit.viewPortRect.top < topBorder && bottomBorder < connectedFit.viewPortRect.bottom;
+        return 0 < topBorder && bottomBorder < connectedFit.viewPortRect.height;
     }
 
     /**

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

@@ -38,8 +38,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.horizontalOffset ? connectedFit.horizontalOffset : 0);
         connectedFit.right = connectedFit.left + connectedFit.contentElementRect.width;
         connectedFit.fitHorizontal = {
-                back: Math.round(connectedFit.left - connectedFit.viewPortRect.left),
-                forward: Math.round(connectedFit.viewPortRect.right - connectedFit.right)
+                back: Math.round(connectedFit.left),
+                forward: Math.round(connectedFit.viewPortRect.width - connectedFit.right)
             };
 
         connectedFit.top = this.calculateTop(
@@ -50,8 +50,8 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.verticalOffset ? connectedFit.verticalOffset : 0);
         connectedFit.bottom = connectedFit.top + connectedFit.contentElementRect.height;
         connectedFit.fitVertical = {
-            back: Math.round(connectedFit.top - connectedFit.viewPortRect.top),
-            forward: Math.round(connectedFit.viewPortRect.bottom - connectedFit.bottom)
+            back: Math.round(connectedFit.top),
+            forward: Math.round(connectedFit.viewPortRect.height - connectedFit.bottom)
         };
     }