feat(core): add centralized media marshal service

Author: CaerusKaru

src/apps/demo-app/src/app/github-issues/split/split-area.directive.ts

@@ -1,5 +1,4 @@
-import {Directive, Optional, Self} from '@angular/core';
-import {FlexDirective} from '@angular/flex-layout';
+import {Directive, ElementRef} from '@angular/core';
 
 @Directive({
   selector: '[ngxSplitArea]',
@@ -8,5 +7,5 @@ import {FlexDirective} from '@angular/flex-layout';
   }
 })
 export class SplitAreaDirective {
-  constructor(@Optional() @Self() public flex: FlexDirective) {}
+  constructor(public elementRef: ElementRef) {}
 }

src/apps/demo-app/src/app/github-issues/split/split.directive.ts

@@ -8,8 +8,8 @@ import {
   OnDestroy,
   QueryList,
 } from '@angular/core';
-import {FlexDirective} from '@angular/flex-layout';
 import {Subscription} from 'rxjs';
+import {MediaMarshaller} from '@angular/flex-layout';
 
 import {SplitHandleDirective} from './split-handle.directive';
 import {SplitAreaDirective} from './split-area.directive';
@@ -30,7 +30,7 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
   @ContentChild(SplitHandleDirective) handle: SplitHandleDirective;
   @ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
 
-  constructor(private elementRef: ElementRef) {}
+  constructor(private elementRef: ElementRef, private marshal: MediaMarshaller) {}
 
   ngAfterContentInit(): void {
     this.watcher = this.handle.drag.subscribe(pos => this.onDrag(pos));
@@ -49,12 +49,16 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
 
     this.areas.forEach((area, i) => {
       // get the cur flex and the % in px
-      const flex = (area.flex as FlexDirective);
+      const elRef = area.elementRef;
       const delta = (i === 0) ? dragAmount : -dragAmount;
-      const currentValue = flex.activatedValue;
+      const currentValue = this.marshal.getValue(elRef.nativeElement, 'flex');
+
+      const changeValues = currentValue.split(' ');
+      changeValues[2] = this.calculateSize(changeValues[2], delta) + '';
 
       // Update Flex-Layout value to build/inject new flexbox CSS
-      flex.activatedValue = this.calculateSize(currentValue, delta);
+      this.marshal.setValue(elRef.nativeElement, 'flex', changeValues.join(' '),
+        this.marshal.activatedBreakpoint);
     });
   }
 

src/apps/universal-app/src/app/split/split-area.directive.ts

@@ -1,5 +1,4 @@
-import {Directive, Optional, Self} from '@angular/core';
-import {FlexDirective} from '@angular/flex-layout';
+import {Directive, ElementRef} from '@angular/core';
 
 @Directive({
   selector: '[ngxSplitArea]',
@@ -8,5 +7,5 @@ import {FlexDirective} from '@angular/flex-layout';
   }
 })
 export class SplitAreaDirective {
-  constructor(@Optional() @Self() public flex: FlexDirective) { }
+  constructor(public elementRef: ElementRef) { }
 }

src/apps/universal-app/src/app/split/split.directive.ts

@@ -11,7 +11,7 @@ import {
   QueryList
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
-import {FlexDirective} from '@angular/flex-layout';
+import {MediaMarshaller} from '@angular/flex-layout';
 
 import {SplitHandleDirective} from './split-handle.directive';
 import {SplitAreaDirective} from './split-area.directive';
@@ -32,7 +32,8 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
   @ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
 
   constructor(private elementRef: ElementRef,
-              @Inject(PLATFORM_ID) private _platformId: Object) {}
+              @Inject(PLATFORM_ID) private _platformId: Object,
+              private marshal: MediaMarshaller) {}
 
   ngAfterContentInit(): void {
     if (isPlatformBrowser(this._platformId)) {
@@ -50,17 +51,21 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
    * While dragging, continually update the `flex.activatedValue` for each area
    * managed by the splitter.
    */
-  onDrag({x, y}): void {
+  onDrag({x, y}: {x: number, y: number}): void {
     const dragAmount = (this.direction === 'row') ? x : y;
 
     this.areas.forEach((area, i) => {
       // get the cur flex and the % in px
-      const flex = (area.flex as FlexDirective);
+      const elRef = area.elementRef;
       const delta = (i === 0) ? dragAmount : -dragAmount;
-      const currentValue = flex.activatedValue;
+      const currentValue = this.marshal.getValue(elRef.nativeElement, 'flex');
+
+      const changeValues = currentValue.split(' ');
+      changeValues[2] = this.calculateSize(changeValues[2], delta) + '';
 
       // Update Flex-Layout value to build/inject new flexbox CSS
-      flex.activatedValue = this.calculateSize(currentValue, delta);
+      this.marshal.setValue(elRef.nativeElement, 'flex', changeValues.join(' '),
+        this.marshal.activatedBreakpoint);
     });
   }
 

src/lib/core/add-alias.ts

@@ -13,7 +13,7 @@ import {extendObject} from '../utils/object-extend';
  * For the specified MediaChange, make sure it contains the breakpoint alias
  * and suffix (if available).
  */
-export function mergeAlias(dest: MediaChange, source: BreakPoint | null) {
+export function mergeAlias(dest: MediaChange, source: BreakPoint | null): MediaChange {
   return extendObject(dest, source ? {
         mqAlias: source.alias,
         suffix: source.suffix

src/lib/core/base/base-adapter.ts

@@ -17,6 +17,8 @@ import {StyleUtils} from '../style-utils/style-utils';
 /**
  * Adapter to the BaseDirective abstract class so it can be used via composition.
  * @see BaseDirective
+ * @deprecated
+ * @deletion-target v7.0.0-beta.21
  */
 export class BaseDirectiveAdapter extends BaseDirective {
 

src/lib/core/base/base.ts

@@ -23,7 +23,11 @@ import {MediaMonitor} from '../media-monitor/media-monitor';
 import {MediaQuerySubscriber} from '../media-change';
 import {StyleBuilder} from '../style-builder/style-builder';
 
-/** Abstract base class for the Layout API styling directives. */
+/**
+ * Abstract base class for the Layout API styling directives.
+ * @deprecated
+ * @deletion-target v7.0.0-beta.21
+ */
 export abstract class BaseDirective implements OnDestroy, OnChanges {
 
   /**

src/lib/core/base/index.ts

@@ -8,3 +8,4 @@
 
 export * from './base';
 export * from './base-adapter';
+export * from './new-base';

src/lib/core/base/new-base.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {ElementRef} from '@angular/core';
+
+import {StyleDefinition, StyleUtils} from '../style-utils/style-utils';
+import {StyleBuilder} from '../style-builder/style-builder';
+import {MediaMarshaller} from '../media-marshaller/media-marshaller';
+import {buildLayoutCSS} from '../../utils/layout-validator';
+
+export abstract class NewBaseDirective {
+
+  protected DIRECTIVE_KEY = '';
+
+  /** Access to host element's parent DOM node */
+  protected get parentElement(): any {
+    return this.elementRef.nativeElement.parentNode;
+  }
+
+  protected get nativeElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
+  /** Cache map for style computation */
+  protected styleCache: Map<string, StyleDefinition> = new Map();
+
+  protected constructor(protected elementRef: ElementRef,
+                        protected styleBuilder: StyleBuilder,
+                        protected styler: StyleUtils,
+                        protected marshal: MediaMarshaller) {
+  }
+
+  /** Add styles to the element using predefined style builder */
+  protected addStyles(input: string, parent?: Object) {
+    const builder = this.styleBuilder;
+    const useCache = builder.shouldCache;
+
+    let genStyles: StyleDefinition | undefined = this.styleCache.get(input);
+
+    if (!genStyles || !useCache) {
+      genStyles = builder.buildStyles(input, parent);
+      if (useCache) {
+        this.styleCache.set(input, genStyles);
+      }
+    }
+
+    this.applyStyleToElement(genStyles);
+    builder.sideEffect(input, genStyles, parent);
+  }
+
+  /**
+   * Determine the DOM element's Flexbox flow (flex-direction).
+   *
+   * Check inline style first then check computed (stylesheet) style.
+   * And optionally add the flow value to element's inline style.
+   */
+  protected getFlexFlowDirection(target: HTMLElement, addIfMissing = false): string {
+    if (target) {
+      let [value, hasInlineValue] = this.styler.getFlowDirection(target);
+
+      if (!hasInlineValue && addIfMissing) {
+        const style = buildLayoutCSS(value);
+        const elements = [target];
+        this.styler.applyStyleToElements(style, elements);
+      }
+
+      return value.trim();
+    }
+
+    return 'row';
+  }
+
+  /** Applies styles given via string pair or object map to the directive element */
+  protected applyStyleToElement(style: StyleDefinition,
+                                value?: string | number,
+                                element: HTMLElement = this.nativeElement) {
+    this.styler.applyStyleToElement(element, style, value);
+  }
+
+  protected setValue(val: any, bp: string): void {
+    this.marshal.setValue(this.nativeElement, this.DIRECTIVE_KEY, val, bp);
+  }
+}

src/lib/core/breakpoints/break-point.ts

@@ -10,4 +10,6 @@ export interface BreakPoint {
   alias: string;
   suffix?: string;
   overlapping?: boolean;
+  priority?: number;
+  includes?: string[];
 }