root effects wip

apps/components-testing-app/src/app/components/dimension/bounding-client-rect-page.component.html

@@ -0,0 +1,20 @@
+<div class="testee e2e-testee" #testee></div>
+
+<aside>
+  <section class="e2e-properties">
+    <header>Properties:</header>
+    <span>x:</span><input [(ngModel)]="properties.x" class="e2e-x">
+    <span>y:</span><input [(ngModel)]="properties.y" class="e2e-y">
+    <span>width:</span><input [(ngModel)]="properties.width" class="e2e-width">
+    <span>height:</span><input [(ngModel)]="properties.height" class="e2e-height">
+    <button #apply_button class="apply e2e-apply">Apply</button>
+  </section>
+
+  <section class="e2e-testee-bounding-box">
+    <header>Testee Bounding Box:</header>
+    <span>x:</span><span class="e2e-x">{{testeeBoundingBox.x()}}</span>
+    <span>y:</span><span class="e2e-y">{{testeeBoundingBox.y()}}</span>
+    <span>width:</span><span class="e2e-width">{{testeeBoundingBox.width()}}</span>
+    <span>height:</span><span class="e2e-height">{{testeeBoundingBox.height()}}</span>
+  </section>
+</aside>

apps/components-testing-app/src/app/components/dimension/bounding-client-rect-page.component.scss

@@ -0,0 +1,30 @@
+:host {
+  > div.testee {
+    position: absolute;
+    background-color: blue;
+  }
+
+  > aside {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    padding: 1em;
+
+    > section {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: .25em 1em;
+
+      > header {
+        font-weight: bold;
+      }
+
+      > header, > button.apply {
+        grid-column: 1/-1;
+      }
+    }
+  }
+}

apps/components-testing-app/src/app/components/dimension/bounding-client-rect-page.component.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Component, DoCheck, effect, ElementRef, inject, NgZone, OnInit, signal, viewChild} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {boundingClientRect} from '@scion/components/dimension';
+
+@Component({
+  selector: 'app-bounding-client-rect-page',
+  templateUrl: './dimension-page.component.html',
+  styleUrl: './bounding-client-rect-page.component.scss',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class BoundingClientRectPageComponent implements OnInit, DoCheck {
+
+  private _testee = viewChild.required<ElementRef<HTMLElement>>('testee');
+  private _boundingBox = boundingClientRect(this._testee);
+  private applyButton = viewChild('apply_button', {read: ElementRef});
+  private zone = inject(NgZone);
+
+  protected properties = {
+    x: signal<string>('0px'),
+    y: signal<string>('0px'),
+    width: signal<string>('100px'),
+    height: signal<string>('100px'),
+  };
+
+  protected testeeBoundingBox = {
+    x: signal<number | undefined>(undefined),
+    y: signal<number | undefined>(undefined),
+    width: signal<number | undefined>(undefined),
+    height: signal<number | undefined>(undefined),
+  };
+
+  constructor() {
+    effect(() => {
+      const boundingBox = this._boundingBox();
+      this.testeeBoundingBox.x.set(boundingBox.x);
+      this.testeeBoundingBox.y.set(boundingBox.y);
+      this.testeeBoundingBox.width.set(boundingBox.width);
+      this.testeeBoundingBox.height.set(boundingBox.height);
+    });
+  }
+
+  public ngOnInit(): void {
+    this.applyProperties();
+    this.zone.runOutsideAngular(() => {
+      this.applyButton()!.nativeElement.addEventListener('click', () => this.applyProperties());
+    });
+  }
+
+  public ngDoCheck(): void {
+    console.log('[BoundingClientRectPageComponent] Angular change detection cycle');
+  }
+
+  public applyProperties(): void {
+    this._testee().nativeElement.style.left = this.properties.x();
+    this._testee().nativeElement.style.top = this.properties.y();
+    this._testee().nativeElement.style.width = this.properties.width();
+    this._testee().nativeElement.style.height = this.properties.height();
+  }
+}

apps/components-testing-app/src/app/components/dimension/dimension-page.component.html

@@ -0,0 +1,20 @@
+<div class="testee e2e-testee" #testee></div>
+
+<aside>
+  <section class="e2e-properties">
+    <header>Properties:</header>
+    <span>x:</span><input [(ngModel)]="properties.x" class="e2e-x">
+    <span>y:</span><input [(ngModel)]="properties.y" class="e2e-y">
+    <span>width:</span><input [(ngModel)]="properties.width" class="e2e-width">
+    <span>height:</span><input [(ngModel)]="properties.height" class="e2e-height">
+    <button #apply_button class="apply e2e-apply">Apply</button>
+  </section>
+
+  <section class="e2e-testee-bounding-box">
+    <header>Testee Bounding Box:</header>
+    <span>x:</span><span class="e2e-x">{{testeeBoundingBox.x()}}</span>
+    <span>y:</span><span class="e2e-y">{{testeeBoundingBox.y()}}</span>
+    <span>width:</span><span class="e2e-width">{{testeeBoundingBox.width()}}</span>
+    <span>height:</span><span class="e2e-height">{{testeeBoundingBox.height()}}</span>
+  </section>
+</aside>

apps/components-testing-app/src/app/components/dimension/dimension-page.component.scss

@@ -0,0 +1,30 @@
+:host {
+  > div.testee {
+    position: absolute;
+    background-color: blue;
+  }
+
+  > aside {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    padding: 1em;
+
+    > section {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: .25em 1em;
+
+      > header {
+        font-weight: bold;
+      }
+
+      > header, > button.apply {
+        grid-column: 1/-1;
+      }
+    }
+  }
+}

apps/components-testing-app/src/app/components/dimension/dimension-page.component.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {ChangeDetectionStrategy, Component, DoCheck, effect, ElementRef, inject, NgZone, OnInit, signal, viewChild} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {boundingClientRect} from '@scion/components/dimension';
+
+@Component({
+  selector: 'app-dimension-page',
+  templateUrl: './dimension-page.component.html',
+  styleUrl: './dimension-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class DimensionPageComponent implements OnInit, DoCheck {
+
+  private _testee = viewChild.required<ElementRef<HTMLElement>>('testee');
+  private _boundingBox = boundingClientRect(this._testee);
+  private applyButton = viewChild('apply_button', {read: ElementRef});
+
+  protected properties = {
+    x: signal<string>('0px'),
+    y: signal<string>('0px'),
+    width: signal<string>('100px'),
+    height: signal<string>('100px'),
+  };
+
+  protected testeeBoundingBox = {
+    x: signal<number | undefined>(undefined),
+    y: signal<number | undefined>(undefined),
+    width: signal<number | undefined>(undefined),
+    height: signal<number | undefined>(undefined),
+  };
+  private zone = inject(NgZone);
+
+  constructor() {
+    effect(() => {
+      const boundingBox = this._boundingBox();
+      this.testeeBoundingBox.x.set(boundingBox.x);
+      this.testeeBoundingBox.y.set(boundingBox.y);
+      this.testeeBoundingBox.width.set(boundingBox.width);
+      this.testeeBoundingBox.height.set(boundingBox.height);
+    });
+  }
+
+  public ngOnInit(): void {
+    this.applyProperties();
+    this.zone.runOutsideAngular(() => {
+      this.applyButton()!.nativeElement.addEventListener('click', () => this.applyProperties());
+    });
+  }
+
+  public ngDoCheck(): void {
+    console.log('[BoundingClientRectPageComponent] Angular change detection cycle');
+  }
+
+  public applyProperties(): void {
+    this._testee().nativeElement.style.left = this.properties.x();
+    this._testee().nativeElement.style.top = this.properties.y();
+    this._testee().nativeElement.style.width = this.properties.width();
+    this._testee().nativeElement.style.height = this.properties.height();
+  }
+}

apps/components-testing-app/src/app/components/dimension/routes.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2018-2022 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Routes} from '@angular/router';
+import {BoundingClientRectPageComponent} from './bounding-client-rect-page.component';
+
+export default [
+  {path: 'bounding-client-rect', component: BoundingClientRectPageComponent},
+] satisfies Routes;

apps/components-testing-app/src/app/components/routes.ts

@@ -19,4 +19,8 @@ export default [
     path: 'sci-sashbox',
     loadChildren: () => import('./sci-sashbox/routes'),
   },
+  {
+    path: 'dimension',
+    loadChildren: () => import('./dimension/routes'),
+  },
 ] satisfies Routes;

projects/scion/components.e2e/src/components/dimension/bounding-client-rect-page.e2e-spec.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {test} from '../../fixtures';
+import {waitUntilStable} from '../../helper/testing.utils';
+import {expect} from '@playwright/test';
+import {BoundingClientRectPagePO} from './bounding-client-rect-page.po';
+
+test.describe('@scion/components/dimension/boundingClientRect', () => {
+
+  test.only('should not run Angular change detection when changing element size', async ({page, consoleLogs}) => {
+    const testPage = new BoundingClientRectPagePO(page);
+    await testPage.navigate();
+
+    // Set element size to 200x200 pixel.
+    await testPage.enterProperties({x: '0', y: '0', width: '200px', height: '200px'});
+
+    // Clear console logs.
+    await waitUntilStable(() => consoleLogs.get().length);
+    consoleLogs.clear();
+
+    // Apply properties.
+    await testPage.applyProperties();
+    await expect(testPage.testeeBoundingBox.width).toHaveText('200');
+
+    // Expect Angular not to run change detection when changing element size.
+    await waitUntilStable(() => consoleLogs.get().length);
+    await expect.poll(() => consoleLogs.get({message: '[BoundingClientRectPageComponent] Angular change detection cycle'})).toHaveLength(0);
+  });
+});

projects/scion/components.e2e/src/components/dimension/bounding-client-rect-page.po.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2018-2022 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Locator, Page} from '@playwright/test';
+
+const PATH = '/#/components/dimension/bounding-client-rect';
+
+export class BoundingClientRectPagePO {
+
+  private readonly _locator: Locator;
+
+  public readonly testeeBoundingBox: {
+    x: Locator;
+    y: Locator;
+    width: Locator;
+    height: Locator;
+  };
+
+  constructor(private _page: Page) {
+    this._locator = _page.locator('app-bounding-client-rect-page');
+    this.testeeBoundingBox = {
+      x: this._locator.locator('section.e2e-testee-bounding-box span.e2e-x'),
+      y: this._locator.locator('section.e2e-testee-bounding-box span.e2e-y'),
+      width: this._locator.locator('section.e2e-testee-bounding-box span.e2e-width'),
+      height: this._locator.locator('section.e2e-testee-bounding-box span.e2e-height'),
+    };
+  }
+
+  public async navigate(): Promise<void> {
+    await this._page.goto(PATH);
+  }
+
+  public async enterProperties(properties: {x: string; y: string; width: string; height: string;}): Promise<void> {
+    await this._locator.locator('section.e2e-properties input.e2e-x').fill(properties.x);
+    await this._locator.locator('section.e2e-properties input.e2e-y').fill(properties.y);
+    await this._locator.locator('section.e2e-properties input.e2e-width').fill(properties.width);
+    await this._locator.locator('section.e2e-properties input.e2e-height').fill(properties.height);
+    await this._locator.press('Tab');
+  }
+
+  public async applyProperties(): Promise<void> {
+    await this._locator.locator('section.e2e-properties button.e2e-apply').click();
+  }
+
+  public async resizeWindow(viewportSize: {width?: number; height?: number}): Promise<void> {
+    await this._page.setViewportSize({
+      width: viewportSize.width ?? this._page.viewportSize()!.width,
+      height: viewportSize.height ?? this._page.viewportSize()!.height,
+    });
+  }
+}

projects/scion/components.e2e/src/components/sci-viewport/overlap/viewport-overlap.e2e-spec.ts

@@ -19,6 +19,6 @@ test.describe('sci-viewport/overlap', () => {
     await overlapPO.navigate();
 
     await overlapPO.clickAdjacentElement();
-    await expect(await consoleLogs.get({filter: /ViewportOverlapPageComponent/})).toHaveLength(1);
+    await expect(await consoleLogs.get({message: /ViewportOverlapPageComponent/})).toHaveLength(1);
   });
 });