@scion/workbench 20.0.0-beta.7 → 20.0.0-beta.8

package/fesm2022/scion-workbench.mjs

@@ -3,10 +3,10 @@ import { effect, untracked, Injectable, inject, Injector, signal, booleanAttribu
 import { Router, ChildrenOutletContexts, NavigationStart, ActivationStart, ActivationEnd, PRIMARY_OUTLET, UrlSegment, RouterOutlet, RouterEvent, NavigationEnd, NavigationCancel, NavigationError, ActivatedRoute } from '@angular/router';
 import { Arrays, Objects as Objects$1, Dictionaries, Defined, Observables, Maps } from '@scion/toolkit/util';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { skipUntil, mergeMap, filter, observeOn, catchError, startWith, take, map, switchMap as switchMap$1, skip, subscribeOn, finalize, distinctUntilChanged, tap, takeUntil, first, combineLatestWith } from 'rxjs/operators';
+import { skipUntil, mergeMap, filter, observeOn, catchError, startWith, take, map, switchMap as switchMap$1, skip, subscribeOn, finalize, distinctUntilChanged, takeUntil, first, combineLatestWith } from 'rxjs/operators';
 import { coerceElement } from '@angular/cdk/coercion';
 import { UUID } from '@scion/toolkit/uuid';
-import { Observable, Subject, asapScheduler, AsyncSubject, lastValueFrom, iif, switchMap, race, pairwise, EMPTY, of, firstValueFrom, from, animationFrameScheduler, merge, fromEvent, BehaviorSubject, delay, identity, audit, share, noop, map as map$1, concatWith, withLatestFrom, mergeMap as mergeMap$1, mergeWith, combineLatest, asyncScheduler, timer } from 'rxjs';
+import { Observable, Subject, asapScheduler, AsyncSubject, lastValueFrom, iif, switchMap, race, pairwise, EMPTY, of, firstValueFrom, from, animationFrameScheduler, merge, fromEvent, BehaviorSubject, delay, identity, noop, map as map$1, concatWith, withLatestFrom, mergeMap as mergeMap$1, mergeWith, NEVER, share, timer, ReplaySubject, combineLatest, asyncScheduler } from 'rxjs';
 import { fromMutation$, fromResize$ } from '@scion/toolkit/observable';
 import { subscribeIn, observeIn, filterArray, tapFirst } from '@scion/toolkit/operators';
 import { SciViewportComponent } from '@scion/components/viewport';
@@ -6399,7 +6399,7 @@ class ViewDropZoneDirective {
     _zone = inject(NgZone);
     _id = UUID.randomUUID();
     _boundingClientRect = boundingClientRect(inject(ElementRef));
-    _dropRegion$ = createDropRegionObservable();
+    _dropRegion$ = new BehaviorSubject(null);
     _dropRegionSize = computed(() => ({
         maxHeight: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().height }),
         maxWidth: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().width }),
@@ -6484,7 +6484,9 @@ class ViewDropZoneDirective {
         });
         // Enable drop zone based on dragging over an allowed drop region.
         // If enabled, drag events are not received by nested drop zones.
-        const dropZoneActivator = this._dropRegion$.subscribe(dropRegion => {
+        const dropZoneActivator = this._dropRegion$
+            .pipe(distinctUntilChanged())
+            .subscribe(dropRegion => {
             setStyle(dropZoneElement, { 'pointer-events': dropRegion ? null : 'none' });
             setAttribute(dropZoneElement, { 'data-region': dropRegion });
         });
@@ -6509,7 +6511,7 @@ class ViewDropZoneDirective {
         // order rather than in the order of tracked signal changes.
         const dragging = this._viewDragService.dragging;
         this._dropRegion$
-            .pipe(
+            .pipe(distinctUntilChanged(), 
         // When leaving the drop zone (no drop region) but continue dragging, remove the drop zone asynchronously
         // to animate transition of the placeholder to another drop zone. If ended dragging, remove the placeholder
         // immediately.
@@ -6613,28 +6615,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 function coercePixelValue(pixelOrRatio, options) {
     return (pixelOrRatio <= 1) ? options.containerSize * pixelOrRatio : pixelOrRatio;
 }
-/**
- * Creates a subject-like observable to observe and set the drop region,
- * multicasting the drop zone to many observers while throttling emission
- * to the latest drop region per animation frame.
- */
-function createDropRegionObservable() {
-    const zone = inject(NgZone);
-    const region$ = new BehaviorSubject(null);
-    const observe$ = region$
-        .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), 
-    // Ensure not to be in Angular.
-    tap(() => NgZone.assertNotInAngularZone()), 
-    // Throttle emission to a single event per animation frame.
-    audit(() => nextAnimationFrame$()), share());
-    // Add notifier function.
-    observe$.next = (region) => {
-        if (region$.value !== region) {
-            zone.runOutsideAngular(() => region$.next(region));
-        }
-    };
-    return observe$;
-}
 
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
@@ -14366,6 +14346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 function provideRemoteTextProvider() {
     const REMOTE_TRANSLATION_KEY = /^workbench\.external\.scion-workbench-client\.(?<provider>[^\\.]+)\.%(?<key>.+)$/;
     const REMOTE_TEXT = /^workbench\.external\.scion-workbench-client\.(?<provider>[^\\.]+)\.(?<text>[^%].+)$/;
+    const cache = new Map();
     return makeEnvironmentProviders([
         {
             provide: WORKBENCH_TEXT_PROVIDER,
@@ -14389,9 +14370,23 @@ function provideRemoteTextProvider() {
         }
         // Parse key and provider from the remote translation key.
         const { key, provider } = match.groups;
+        // Return cached text if cached.
+        const cacheKey = createCacheKey(translationKey, params, provider);
+        if (cache.has(cacheKey)) {
+            return toSignal(cache.get(cacheKey), { initialValue: '' });
+        }
         // Request the text by intent. Parameters starting with the topic protocol 'topic://' are resolved via messaging.
         const text$ = observeParams$(params, { provider })
-            .pipe(map$1(params => params.reduce((translatable, [param, value]) => `${translatable};${param}=${encodeSemicolons$1(value)}`, `%${key}`)), switchMap(translatable => Beans.get(WorkbenchTextService).text$(translatable, { provider })), map$1(text => text ?? key));
+            .pipe(
+        // Ensure the observable to never complete independent of text provider request completion, simplifying cache cleanup as
+        // finalize is only called when the last subscriber unsubscribes, after the specified TTL.
+        concatWith(NEVER), map$1(params => params.reduce((translatable, [param, value]) => `${translatable};${param}=${encodeSemicolons$1(value)}`, `%${key}`)), switchMap(translatable => Beans.get(WorkbenchTextService).text$(translatable, { provider })), map$1(text => text ?? `%${key}`), 
+        // Remove cached text when an error occurs, or when the subscriber count drops to zero, after the specified TTL.
+        finalize(() => cache.delete(cacheKey)), share({
+            connector: () => new ReplaySubject(1),
+            resetOnRefCountZero: () => timer(0, animationFrameScheduler), // reset asynchronously to prevent flickering of translated texts on re-layout
+        }));
+        cache.set(cacheKey, text$);
         return toSignal(text$, { initialValue: '' });
     }
     /**
@@ -14405,9 +14400,22 @@ function provideRemoteTextProvider() {
         }
         // Parse text and provider from the remote text.
         const { text, provider } = match.groups;
+        // Return cached text if cached.
+        const cacheKey = createCacheKey(translationKey, params, provider);
+        if (cache.has(cacheKey)) {
+            return toSignal(cache.get(cacheKey), { initialValue: '' });
+        }
         // Substitute params. Parameters starting with the topic protocol 'topic://' are resolved via messaging.
         const text$ = observeParams$(params, { provider })
-            .pipe(map$1(params => params.reduce((text, [param, value]) => text.replaceAll(`:${param}`, value), decodeSemicolons(text))));
+            .pipe(
+        // Never complete the observable, simplifying cache cleanup as `finalize` is only called when the last subscriber unsubscribes, after the specified TTL.
+        concatWith(NEVER), map$1(params => params.reduce((text, [param, value]) => text.replaceAll(`:${param}`, value), decodeSemicolons(text))), 
+        // Remove cached text when an error occurs, or when the subscriber count drops to zero, after the specified TTL.
+        finalize(() => cache.delete(cacheKey)), share({
+            connector: () => new ReplaySubject(1),
+            resetOnRefCountZero: () => timer(0, animationFrameScheduler), // reset asynchronously to prevent flickering of translated texts on re-layout
+        }));
+        cache.set(cacheKey, text$);
         return toSignal(text$, { initialValue: '' });
     }
     /**
@@ -14428,6 +14436,13 @@ function provideRemoteTextProvider() {
         });
         return observableParams.length ? combineLatest(observableParams) : of([]);
     }
+    /**
+     * Creates the cache key for specified translatable.
+     */
+    function createCacheKey(key, params, provider) {
+        const translatable = Object.entries(params).reduce((translatable, [param, value]) => `${translatable};${param}=${value}`, `%${key}`);
+        return `${translatable}@${provider}`;
+    }
 }
 /**
  * Creates a translatable for the SCION Workbench to request the text from a micro app.
@@ -16689,7 +16704,10 @@ class MicrofrontendViewComponent {
     }
     installNavigator() {
         this._route.params
-            .pipe(switchMap(params => this.fetchCapability$(params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]).pipe(map(capability => ({ capability, params })))), executeOnCapabilityChange(context => this.onCapabilityChange(context)), filterNullCapability(), delayIfLazy(), serializeExecution(context => this.onNavigate(context)), subscribeOn(asyncScheduler), // subscribe asynchronously to prevent manual change detection in `onCapabilityChange` during component construction.
+            .pipe(switchMap(params => this.fetchCapability$(params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]).pipe(map(capability => ({ capability, params })))), executeOn({
+            onEach: context => this.setViewTitleAndHeading(context),
+            onCapabilityChange: context => this.onCapabilityChange(context),
+        }), filterNullCapability(), delayIfLazy(), serializeExecution(context => this.onNavigate(context)), subscribeOn(asyncScheduler), // subscribe asynchronously to prevent manual change detection in `onCapabilityChange` during component construction.
         takeUntilDestroyed())
             .subscribe();
     }
@@ -16800,13 +16818,23 @@ class MicrofrontendViewComponent {
                 .catch((error) => this._messageClient.publish(replyTo, stringifyError(error), { headers: new Map().set(MessageHeaders.Status, ResponseStatusCodes.ERROR) }));
         });
     }
+    /**
+     * Sets view title and heading as defined on the capability.
+     */
+    setViewTitleAndHeading(context) {
+        const { capability, params } = context;
+        if (capability?.properties.title) {
+            this.view.title = createRemoteTranslatable(capability.properties.title, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve });
+        }
+        if (capability?.properties.heading) {
+            this.view.heading = createRemoteTranslatable(capability.properties.heading, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve });
+        }
+    }
     /**
      * Updates the properties of this view, such as the view title, as defined by the capability.
      */
     setViewProperties(context) {
-        const { capability, params } = context;
-        this.view.title = (capability && createRemoteTranslatable(capability.properties.title, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve })) ?? null;
-        this.view.heading = (capability && createRemoteTranslatable(capability.properties.heading, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve })) ?? null;
+        const { capability } = context;
         this.view.classList.application = capability?.properties.cssClass;
         this.view.closable = capability?.properties.closable ?? true;
         this.view.dirty = false;
@@ -16940,14 +16968,17 @@ function configureMicrofrontendGlassPane() {
     ];
 }
 /**
- * Executes passed function each time when the source emits a different capability.
+ * Executes passed functions based on the current state.
  */
-function executeOnCapabilityChange(onCapabilityChange) {
+function executeOn(executeOn) {
+    const { onEach, onCapabilityChange } = executeOn;
     let prevCapability = null;
     return map(({ capability, params }) => {
         const context = { capability, prevCapability, params };
+        onEach?.(context);
+        // Test if the capability has changed.
         if (prevCapability?.metadata.id !== capability?.metadata.id) {
-            onCapabilityChange(context);
+            onCapabilityChange?.(context);
             prevCapability = capability;
         }
         return context;