fix: Timestamp/range being re-opened on window resize.

dynatrace-oss · Jan 15, 2020 · 62aa65d · 62aa65d
1 parent 7c455a1
commit 62aa65d
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 16 deletions.
diff --git a/apps/components-e2e/src/components/chart/selection-area/selection-area.e2e.ts b/apps/components-e2e/src/components/chart/selection-area/selection-area.e2e.ts
@@ -254,3 +254,49 @@ test('should create a range out of the timestamp with shift + left arrow key', a
     .expect(await overlayText.textContent)
     .match(/Jul 31 \d{2}:20 — \d{2}:25/g);
 });
+
+test('should not re-open a timestamp in case of a window resize', async (testController: TestController) => {
+  await testController.resizeWindow(1200, 800);
+  await createTimestamp(
+    { x: 450, y: 100 },
+    chartClickTargets[1],
+    testController,
+  );
+
+  await testController.expect(await timestampSelection.exists).ok();
+  await testController.expect(await overlay.exists).ok();
+
+  await closeOverlay();
+
+  await testController.expect(await timestampSelection.exists).notOk();
+  await testController.expect(await overlay.exists).notOk();
+
+  await testController.resizeWindow(1000, 600);
+
+  await testController.expect(await timestampSelection.exists).notOk();
+  await testController.expect(await overlay.exists).notOk();
+
+  await testController.resizeWindow(1200, 800);
+});
+
+test('should not re-open a range in case of a window resize', async (testController: TestController) => {
+  await testController.resizeWindow(1200, 800);
+  const start = { x: 310, y: 100 };
+  await createRange(520, start);
+  // in case of flakyness that the overlay does not update to the right values
+  await testController.wait(500);
+  await testController.expect(await rangeSelection.exists).ok();
+  await testController.expect(await overlay.exists).ok();
+
+  await closeOverlay();
+
+  await testController.expect(await rangeSelection.exists).notOk();
+  await testController.expect(await overlay.exists).notOk();
+
+  await testController.resizeWindow(1000, 600);
+
+  await testController.expect(await rangeSelection.exists).notOk();
+  await testController.expect(await overlay.exists).notOk();
+
+  await testController.resizeWindow(1200, 800);
+});
diff --git a/components/chart/src/selection-area/selection-area.ts b/components/chart/src/selection-area/selection-area.ts
@@ -340,6 +340,7 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
       .subscribe(() => {
         if (this._chart._range) {
           this._chart._range.focus();
+          this._chart._range._reflectRangeReleased(true);
         }
       });
   }
@@ -469,6 +470,11 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
 
   /** If there is an overlay open it will dispose it and destroy it */
   private _closeOverlay(): void {
+    // remove class showing the arrows of the range handles
+    if (this._chart._range) {
+      this._chart._range._reflectRangeReleased(false);
+    }
+
     if (this._overlayRef) {
       this._overlayRef.dispose();
     }
@@ -794,26 +800,43 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
 
     // handling of the overlay for the range
     if (this._chart._range) {
-      combineLatest([
-        merge(
-          getElementRefStream<HTMLDivElement>(
-            this._chart._range._stateChanges,
-            this._destroy$,
-            this._chart._range._rangeElementRef,
-            this._zone,
-          ),
-          this._dragHandle$.pipe(
-            getElementRef(this._chart._range._rangeElementRef),
-          ),
+      merge(
+        getElementRefStream<HTMLDivElement>(
+          this._chart._range._stateChanges,
+          this._destroy$,
+          this._chart._range._rangeElementRef,
+          this._zone,
         ),
+        this._dragHandle$.pipe(
+          getElementRef(this._chart._range._rangeElementRef),
+        ),
+      )
+        .pipe(
+          throttleTime(0, animationFrameScheduler),
+          takeUntil(this._destroy$),
+        )
+        .subscribe(ref => {
+          if (this._chart._range && this._chart._range._overlayTemplate) {
+            this._updateOrCreateOverlay(this._chart._range, ref, undefined);
+          }
+        });
+
+      // update the overlay position if an overlay exists
+      // and the viewport size changes
+      combineLatest([
+        getElementRef<HTMLDivElement>(this._chart._range._rangeElementRef),
         this._viewportBoundaries$,
       ])
         .pipe(
           throttleTime(0, animationFrameScheduler),
           takeUntil(this._destroy$),
         )
         .subscribe(([ref, viewPortOffset]) => {
-          if (this._chart._range && this._chart._range._overlayTemplate) {
+          if (
+            this._overlayRef &&
+            this._chart._range &&
+            this._chart._range._overlayTemplate
+          ) {
             this._updateOrCreateOverlay(
               this._chart._range,
               ref,
@@ -825,12 +848,30 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
 
     // handling of the overlay for the timestamp
     if (this._chart._timestamp) {
+      getElementRefStream<HTMLDivElement>(
+        this._chart._timestamp._stateChanges,
+        this._destroy$,
+        this._chart._timestamp._timestampElementRef,
+        this._zone,
+      )
+        .pipe(
+          throttleTime(0, animationFrameScheduler),
+          takeUntil(this._destroy$),
+        )
+        .subscribe(ref => {
+          if (
+            this._chart._timestamp &&
+            this._chart._timestamp._overlayTemplate
+          ) {
+            this._updateOrCreateOverlay(this._chart._timestamp, ref, undefined);
+          }
+        });
+
+      // update the overlay position if an overlay exists
+      // and the viewport size changes
       combineLatest([
-        getElementRefStream<HTMLDivElement>(
-          this._chart._timestamp._stateChanges,
-          this._destroy$,
+        getElementRef<HTMLDivElement>(
           this._chart._timestamp._timestampElementRef,
-          this._zone,
         ),
         this._viewportBoundaries$,
       ])
@@ -840,6 +881,7 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
         )
         .subscribe(([ref, viewPortOffset]) => {
           if (
+            this._overlayRef &&
             this._chart._timestamp &&
             this._chart._timestamp._overlayTemplate
           ) {