fix(core): correctly set and restore breakpoints during print (#1379)

Author: CaerusKaru

projects/libs/flex-layout/core/media-marshaller/media-marshaller.spec.ts

@@ -301,8 +301,17 @@ describe('media-marshaller', () => {
       expect(mediaMarshaller.onMediaChange).not.toHaveBeenCalledWith({mediaQuery: 'print'} as any);
     });
 
-  });
+    it('"print" events restore breakpoints correctly', () => {
+      mediaController.activate('xs');
+      const activatedBps = mediaMarshaller.activatedBreakpoints;
+      // const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+      mediaController.activate('print');
+      mediaController.activate('xs');
+      const secondActivatedBps = mediaMarshaller.activatedBreakpoints;
 
+      expect(activatedBps).toEqual(secondActivatedBps);
+    });
+  });
 });
 
 const fakeElement = {} as HTMLElement;

projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts

@@ -44,7 +44,7 @@ export interface ElementMatcher {
 @Injectable({providedIn: 'root'})
 export class MediaMarshaller {
   private _useFallbacks = true;
-  private activatedBreakpoints: BreakPoint[] = [];
+  private _activatedBreakpoints: BreakPoint[] = [];
   private elementMap: ElementMap = new Map();
   private elementKeyMap: ElementKeyMap = new WeakMap();
   private watcherMap: WatcherMap = new WeakMap();     // special triggers to update elements
@@ -57,6 +57,14 @@ export class MediaMarshaller {
     return this.activatedBreakpoints[0]?.alias ?? '';
   }
 
+  set activatedBreakpoints(bps: BreakPoint[]) {
+    this._activatedBreakpoints = [...bps];
+  }
+
+  get activatedBreakpoints(): BreakPoint[] {
+    return [...this._activatedBreakpoints];
+  }
+
   set useFallbacks(value: boolean) {
     this._useFallbacks = value;
   }
@@ -80,14 +88,14 @@ export class MediaMarshaller {
       const bpIndex = this.activatedBreakpoints.indexOf(bp);
 
       if (mc.matches && bpIndex === -1) {
-        this.activatedBreakpoints.push(bp);
-        this.activatedBreakpoints.sort(sortDescendingPriority);
+        this._activatedBreakpoints.push(bp);
+        this._activatedBreakpoints.sort(sortDescendingPriority);
 
         this.updateStyles();
       } else if (!mc.matches && bpIndex !== -1) {
         // Remove the breakpoint when it's deactivated
-        this.activatedBreakpoints.splice(bpIndex, 1);
-        this.activatedBreakpoints.sort(sortDescendingPriority);
+        this._activatedBreakpoints.splice(bpIndex, 1);
+        this._activatedBreakpoints.sort(sortDescendingPriority);
 
         this.updateStyles();
       }
@@ -345,13 +353,12 @@ export class MediaMarshaller {
    * Watch for mediaQuery breakpoint activations
    */
   private observeActivations() {
-    const target = this as unknown as HookTarget;
     const queries = this.breakpoints.items.map(bp => bp.mediaQuery);
 
     this.matchMedia
         .observe(this.hook.withPrintQuery(queries))
         .pipe(
-            tap(this.hook.interceptEvents(target)),
+            tap(this.hook.interceptEvents(this)),
             filter(this.hook.blockPropagation())
         )
         .subscribe(this.onMediaChange.bind(this));

projects/libs/flex-layout/core/media-marshaller/print-hook.ts

@@ -50,13 +50,13 @@ export class PrintHook implements OnDestroy {
   }
 
   /** Is the MediaChange event for any 'print' @media */
-  isPrintEvent(e: MediaChange): Boolean {
+  isPrintEvent(e: MediaChange): boolean {
     return e.mediaQuery.startsWith(PRINT);
   }
 
   /** What is the desired mqAlias to use while printing? */
   get printAlias(): string[] {
-    return this.layoutConfig.printWithBreakpoints || [];
+    return this.layoutConfig.printWithBreakpoints ?? [];
   }
 
   /** Lookup breakpoints associated with print aliases. */
@@ -80,22 +80,22 @@ export class PrintHook implements OnDestroy {
     if (this.isPrintEvent(event)) {
       // Reset from 'print' to first (highest priority) print breakpoint
       bp = this.getEventBreakpoints(event)[0];
-      event.mediaQuery = bp ? bp.mediaQuery : '';
+      event.mediaQuery = bp?.mediaQuery ?? '';
     }
     return mergeAlias(event, bp);
   }
 
 
   // registeredBeforeAfterPrintHooks tracks if we registered the `beforeprint`
   //  and `afterprint` event listeners.
-  private registeredBeforeAfterPrintHooks: boolean = false;
+  private registeredBeforeAfterPrintHooks = false;
 
   // isPrintingBeforeAfterEvent is used to track if we are printing from within
-  // a `beforeprint` event handler. This prevents the typicall `stopPrinting`
+  // a `beforeprint` event handler. This prevents the typical `stopPrinting`
   // form `interceptEvents` so that printing is not stopped while the dialog
   // is still open. This is an extension of the `isPrinting` property on
   // browsers which support `beforeprint` and `afterprint` events.
-  private isPrintingBeforeAfterEvent: boolean = false;
+  private isPrintingBeforeAfterEvent = false;
 
   private beforePrintEventListeners: Function[] = [];
   private afterPrintEventListeners: Function[] = [];
@@ -141,8 +141,8 @@ export class PrintHook implements OnDestroy {
   }
 
   /**
-   * Prepare RxJS filter operator with partial application
-   * @return pipeable filter predicate
+   * Prepare RxJS tap operator with partial application
+   * @return pipeable tap predicate
    */
   interceptEvents(target: HookTarget) {
     this.registerBeforeAfterPrintHooks(target);
@@ -152,7 +152,6 @@ export class PrintHook implements OnDestroy {
         if (event.matches && !this.isPrinting) {
           this.startPrinting(target, this.getEventBreakpoints(event));
           target.updateStyles();
-
         } else if (!event.matches && this.isPrinting && !this.isPrintingBeforeAfterEvent) {
           this.stopPrinting(target);
           target.updateStyles();
@@ -209,13 +208,14 @@ export class PrintHook implements OnDestroy {
     if (!this.isPrinting || this.isPrintingBeforeAfterEvent) {
       if (!event.matches) {
         const bp = this.breakpoints.findByQuery(event.mediaQuery);
-        if (bp) {   // Deactivating a breakpoint
+        // Deactivating a breakpoint
+        if (bp) {
           this.deactivations.push(bp);
           this.deactivations.sort(sortDescendingPriority);
         }
       } else if (!this.isPrintingBeforeAfterEvent) {
         // Only clear deactivations if we aren't printing from a `beforeprint` event.
-        // Otherwise this will clear before `stopPrinting()` is called to restore
+        // Otherwise, this will clear before `stopPrinting()` is called to restore
         // the pre-Print Activations.
         this.deactivations = [];
       }
@@ -230,11 +230,10 @@ export class PrintHook implements OnDestroy {
     }
   }
 
-  /** Is this service currently in Print-mode ? */
+  // Is this service currently in print mode
   private isPrinting = false;
-  private queue: PrintQueue = new PrintQueue();
+  private queue = new PrintQueue();
   private deactivations: BreakPoint[] = [];
-
 }
 
 // ************************************************************************
@@ -261,6 +260,7 @@ class PrintQueue {
   addBreakpoint(bp: OptionalBreakPoint) {
     if (!!bp) {
       const bpInList = this.printBreakpoints.find(it => it.mediaQuery === bp.mediaQuery);
+
       if (bpInList === undefined) {
         // If this is a `printAlias` breakpoint, then append. If a true 'print' breakpoint,
         // register as highest priority in the queue
@@ -281,6 +281,6 @@ class PrintQueue {
 // ************************************************************************
 
 /** Only support intercept queueing if the Breakpoint is a print @media query */
-function isPrintBreakPoint(bp: OptionalBreakPoint) {
-  return bp ? bp.mediaQuery.startsWith(PRINT) : false;
+function isPrintBreakPoint(bp: OptionalBreakPoint): boolean {
+  return bp?.mediaQuery.startsWith(PRINT) ?? false;
 }