-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf(platform): optimize focus tracking and mouse event dispatching
Optimizations include: - Reducing the number of events for the platform to track focus across microfrontends. - Dispatching of synthetic mouse events only from inactive microfrontends. - Delivery of synthetic mouse events to the active microfrontend only. - Disabling event listeners that are not needed in activators. - Listening to keyboard events only in contexts where keystrokes are registered. closes #172
- Loading branch information
1 parent
e5dc6c2
commit daff4f0
Showing
13 changed files
with
608 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
...p/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <div class="e2e-element element" tabindex="0" (mousedown)="!preventdefault_on_mousedown.isChecked">Element</div> | ||
|
|
||
| <label> | ||
| <sci-checkbox class="e2e-prevent-default-on-mousedown" #preventdefault_on_mousedown></sci-checkbox> | ||
| <span>PreventDefault on Mousedown</span> | ||
| </label> | ||
|
|
||
| <section class="dispatched-mouse-events e2e-dispatched-mouse-events"> | ||
| <header>Received Dispatched Mouse Events</header> | ||
| <sci-viewport> | ||
| <div *ngFor="let dispatchedEvent of dispatchedEvents" class="event e2e-event"> | ||
| <span>{{dispatchedEvent.timestamp | date:'hh:mm:ss:SSS'}}</span><span class="e2e-type">{{dispatchedEvent.type}}</span> | ||
| </div> | ||
| </sci-viewport> | ||
| <label> | ||
| <sci-checkbox [formControl]="followTailFormControl"></sci-checkbox> | ||
| <span>Follow tail</span> | ||
| </label> | ||
| <button (click)="onClearDispatchedEvent()" class="e2e-clear">Clear</button> | ||
| </section> |
52 changes: 52 additions & 0 deletions
52
...p/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1em; | ||
|
|
||
| > div.element { | ||
| flex: none; | ||
| border: 1px dashed var(--sci-color-P400); | ||
| color: var(--sci-color-P500); | ||
| padding: 1em; | ||
| user-select: none; | ||
| text-align: center; | ||
| } | ||
|
|
||
| > section.dispatched-mouse-events { | ||
| flex: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: .5em; | ||
| margin-top: .5em; | ||
|
|
||
| > header { | ||
| flex: none; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| > sci-viewport { | ||
| flex: 1 1 0; | ||
| border: 1px solid var(--sci-color-P400); | ||
| font-family: monospace; | ||
|
|
||
| &::part(content) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: .25em; | ||
| padding: .5em; | ||
| } | ||
|
|
||
| div.event { | ||
| display: flex; | ||
| gap: 1em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| label { | ||
| display: flex; | ||
| gap: .75em; | ||
| align-items: center; | ||
| user-select: none; | ||
| } | ||
| } |
64 changes: 64 additions & 0 deletions
64
...app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /* | ||
| * 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 {ChangeDetectorRef, Component, OnDestroy, ViewChild} from '@angular/core'; | ||
| import {takeUntil} from 'rxjs/operators'; | ||
| import {fromEvent, merge, Subject} from 'rxjs'; | ||
| import {CommonModule} from '@angular/common'; | ||
| import {SciViewportComponent, SciViewportModule} from '@scion/components/viewport'; | ||
| import {FormControl, ReactiveFormsModule} from '@angular/forms'; | ||
| import {SciCheckboxModule} from '@scion/components.internal/checkbox'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-mouse-event-dispatch-test-page', | ||
| templateUrl: './mouse-event-dispatch-test-page.component.html', | ||
| styleUrls: ['./mouse-event-dispatch-test-page.component.scss'], | ||
| standalone: true, | ||
| imports: [ | ||
| CommonModule, | ||
| SciViewportModule, | ||
| SciCheckboxModule, | ||
| ReactiveFormsModule, | ||
| ], | ||
| }) | ||
| export class MouseEventDispatchTestPageComponent implements OnDestroy { | ||
|
|
||
| private _destroy$ = new Subject<void>(); | ||
|
|
||
| public dispatchedEvents = new Array<DispatchedEvent>(); | ||
| public followTailFormControl = new FormControl<boolean>(true); | ||
|
|
||
| @ViewChild(SciViewportComponent) | ||
| private _viewport: SciViewportComponent; | ||
|
|
||
| constructor(private _cd: ChangeDetectorRef) { | ||
| merge(fromEvent(document, 'sci-mousemove'), fromEvent(document, 'sci-mouseup')) | ||
| .pipe(takeUntil(this._destroy$)) | ||
| .subscribe(event => { | ||
| this.dispatchedEvents.push({type: event.type, timestamp: Date.now()}); | ||
| if (this.followTailFormControl.value) { | ||
| this._cd.detectChanges(); | ||
| this._viewport.scrollTop = this._viewport.scrollHeight; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| public onClearDispatchedEvent(): void { | ||
| this.dispatchedEvents.length = 0; | ||
| } | ||
|
|
||
| public ngOnDestroy(): void { | ||
| this._destroy$.next(); | ||
| } | ||
| } | ||
|
|
||
| export interface DispatchedEvent { | ||
| type: string; | ||
| timestamp: number; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.