From 9f56ed51b1e251d8ffde1d36b9e8a41a59dd12c0 Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Fri, 31 Jan 2025 03:47:13 +0200 Subject: [PATCH 1/6] feat(core): Added support for multiple RootLayouts --- packages/core/ui/layouts/index.d.ts | 2 +- .../ui/layouts/root-layout/index.android.ts | 4 - .../core/ui/layouts/root-layout/index.d.ts | 1 + .../core/ui/layouts/root-layout/index.ios.ts | 18 ++- .../layouts/root-layout/root-layout-common.ts | 109 ++++++++++-------- .../layouts/root-layout/root-layout-stack.ts | 25 ++++ 6 files changed, 102 insertions(+), 57 deletions(-) create mode 100644 packages/core/ui/layouts/root-layout/root-layout-stack.ts diff --git a/packages/core/ui/layouts/index.d.ts b/packages/core/ui/layouts/index.d.ts index aefba214fa..e6969f47bf 100644 --- a/packages/core/ui/layouts/index.d.ts +++ b/packages/core/ui/layouts/index.d.ts @@ -2,7 +2,7 @@ export { AbsoluteLayout } from './absolute-layout'; export { DockLayout } from './dock-layout'; export { FlexboxLayout } from './flexbox-layout'; export { GridLayout, GridUnitType, ItemSpec } from './grid-layout'; -export { RootLayout, getRootLayout, RootLayoutOptions, ShadeCoverOptions } from './root-layout'; +export { RootLayout, getRootLayout, getRootLayoutById, RootLayoutOptions, ShadeCoverOptions } from './root-layout'; export { StackLayout } from './stack-layout'; export { WrapLayout } from './wrap-layout'; export { LayoutBase } from './layout-base'; diff --git a/packages/core/ui/layouts/root-layout/index.android.ts b/packages/core/ui/layouts/root-layout/index.android.ts index d5146b555c..d85e292c25 100644 --- a/packages/core/ui/layouts/root-layout/index.android.ts +++ b/packages/core/ui/layouts/root-layout/index.android.ts @@ -8,10 +8,6 @@ import { LinearGradient } from '../../styling/linear-gradient'; export * from './root-layout-common'; export class RootLayout extends RootLayoutBase { - constructor() { - super(); - } - insertChild(view: View, atIndex: number): void { super.insertChild(view, atIndex); if (!view.hasGestureObservers()) { diff --git a/packages/core/ui/layouts/root-layout/index.d.ts b/packages/core/ui/layouts/root-layout/index.d.ts index 630998cfe6..0c569c8b2b 100644 --- a/packages/core/ui/layouts/root-layout/index.d.ts +++ b/packages/core/ui/layouts/root-layout/index.d.ts @@ -16,6 +16,7 @@ export class RootLayout extends GridLayout { } export function getRootLayout(): RootLayout; +export function getRootLayoutById(id: string): RootLayout; export interface RootLayoutOptions { shadeCover?: ShadeCoverOptions; diff --git a/packages/core/ui/layouts/root-layout/index.ios.ts b/packages/core/ui/layouts/root-layout/index.ios.ts index b96f929607..7e9c435e7b 100644 --- a/packages/core/ui/layouts/root-layout/index.ios.ts +++ b/packages/core/ui/layouts/root-layout/index.ios.ts @@ -8,16 +8,19 @@ import { parseLinearGradient } from '../../../css/parser'; export * from './root-layout-common'; export class RootLayout extends RootLayoutBase { + nativeViewProtected: UIView; + // perf optimization: only create and insert gradients if settings change private _currentGradient: string; private _gradientLayer: CAGradientLayer; - constructor() { - super(); + public disposeNativeView(): void { + super.disposeNativeView(); + this._cleanupPlatformShadeCover(); } protected _bringToFront(view: View) { - (this.nativeViewProtected).bringSubviewToFront(view.nativeViewProtected); + this.nativeViewProtected.bringSubviewToFront(view.nativeViewProtected); } protected _initShadeCover(view: View, shadeOptions: ShadeCoverOptions): void { @@ -46,7 +49,11 @@ export class RootLayout extends RootLayoutBase { iosViewUtils.drawGradient(view.nativeViewProtected, this._gradientLayer, LinearGradient.parse(parsedGradient.value)); view.nativeViewProtected.layer.insertSublayerAtIndex(this._gradientLayer, 0); } + } else { + // Dispose gradient if new color is null or a plain color + this._cleanupPlatformShadeCover(); } + UIView.animateWithDurationAnimationsCompletion( duration, () => { @@ -66,7 +73,7 @@ export class RootLayout extends RootLayoutBase { }, (completed: boolean) => { resolve(); - } + }, ); } }); @@ -87,7 +94,7 @@ export class RootLayout extends RootLayoutBase { }, (completed: boolean) => { resolve(); - } + }, ); } }); @@ -95,6 +102,7 @@ export class RootLayout extends RootLayoutBase { protected _cleanupPlatformShadeCover(): void { this._currentGradient = null; + if (this._gradientLayer != null) { this._gradientLayer.removeFromSuperlayer(); this._gradientLayer = null; diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index 07c239c643..dbac28539e 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -6,30 +6,27 @@ import { RootLayout, RootLayoutOptions, ShadeCoverOptions, TransitionAnimation } import { Animation } from '../../animation'; import { AnimationDefinition } from '../../animation'; import { isNumber } from '../../../utils/types'; +import { _findRootLayoutById, _pushInRootLayoutStack, _removeFromRootLayoutStack, _topmost } from './root-layout-stack'; @CSSType('RootLayout') export class RootLayoutBase extends GridLayout { - private shadeCover: View; - private staticChildCount: number; - private popupViews: { view: View; options: RootLayoutOptions }[] = []; + private _shadeCover: View; + private _popupViews: { view: View; options: RootLayoutOptions }[] = []; - constructor() { - super(); - global.rootLayout = this; - } + public initNativeView(): void { + super.initNativeView(); - public onLoaded() { - // get actual content count of rootLayout (elements between the tags in the template). - // All popups will be inserted dynamically at a higher index - this.staticChildCount = this.getChildrenCount(); + _pushInRootLayoutStack(this); + } - super.onLoaded(); + public disposeNativeView(): void { + _removeFromRootLayoutStack(this); } public _onLivesync(context?: ModuleContext): boolean { let handled = false; - if (this.popupViews.length > 0) { + if (this._popupViews.length > 0) { this.closeAll(); handled = true; } @@ -62,22 +59,23 @@ export class RootLayoutBase extends GridLayout { const enterAnimationDefinition = options.animation ? options.animation.enterFrom : null; // keep track of the views locally to be able to use their options later - this.popupViews.push({ view: view, options: options }); + this._popupViews.push({ view: view, options: options }); + + view.opacity = 0; // always begin with view invisible when adding dynamically + // Add view to view tree before adding shade cover + this.insertChild(view, this.getChildrenCount()); if (options.shadeCover) { // perf optimization note: we only need 1 layer of shade cover // we just update properties if needed by additional overlaid views - if (this.shadeCover) { + if (this._shadeCover) { // overwrite current shadeCover options if topmost popupview has additional shadeCover configurations - toOpen.push(this.updateShadeCover(this.shadeCover, options.shadeCover)); + toOpen.push(this.updateShadeCover(this._shadeCover, options.shadeCover)); } else { toOpen.push(this.openShadeCover(options.shadeCover)); } } - view.opacity = 0; // always begin with view invisible when adding dynamically - this.insertChild(view, this.getChildrenCount() + 1); - toOpen.push( new Promise((res, rej) => { setTimeout(() => { @@ -130,7 +128,7 @@ export class RootLayoutBase extends GridLayout { const toClose = []; const popupIndex = this.getPopupIndex(view); - const poppedView = this.popupViews[popupIndex]; + const poppedView = this._popupViews[popupIndex]; const cleanupAndFinish = () => { view.notify({ eventName: 'closed', object: view }); this.removeChild(view); @@ -141,7 +139,7 @@ export class RootLayoutBase extends GridLayout { // Remove view from tracked popupviews if (popupIndex > -1) { - this.popupViews.splice(popupIndex, 1); + this._popupViews.splice(popupIndex, 1); } toClose.push( @@ -158,13 +156,13 @@ export class RootLayoutBase extends GridLayout { }), ); - if (this.shadeCover) { + if (this._shadeCover) { // Update shade cover with the topmost popupView options (if not specifically told to ignore) - if (this.popupViews.length) { + if (this._popupViews.length) { if (!poppedView?.options?.shadeCover?.ignoreShadeRestore) { - const shadeCoverOptions = this.popupViews[this.popupViews.length - 1].options?.shadeCover; + const shadeCoverOptions = this._popupViews[this._popupViews.length - 1].options?.shadeCover; if (shadeCoverOptions) { - toClose.push(this.updateShadeCover(this.shadeCover, shadeCoverOptions)); + toClose.push(this.updateShadeCover(this._shadeCover, shadeCoverOptions)); } } } else { @@ -186,7 +184,7 @@ export class RootLayoutBase extends GridLayout { closeAll(): Promise { const toClose = []; - const views = this.popupViews.map((popupView) => popupView.view); + const views = this._popupViews.map((popupView) => popupView.view); // Close all views at the same time and wait for all of them for (const view of views) { @@ -196,12 +194,25 @@ export class RootLayoutBase extends GridLayout { } getShadeCover(): View { - return this.shadeCover; + return this._shadeCover; } openShadeCover(options: ShadeCoverOptions = {}): Promise { return new Promise((resolve) => { - if (this.shadeCover) { + const childrenCount = this.getChildrenCount(); + + let indexToAdd: number; + + if (this._popupViews.length) { + const { view } = this._popupViews[0]; + const index = this.getChildIndex(view); + + indexToAdd = index > -1 ? index : childrenCount; + } else { + indexToAdd = childrenCount; + } + + if (this._shadeCover) { if (Trace.isEnabled()) { Trace.write(`RootLayout shadeCover already open.`, Trace.categories.Layout, Trace.messageType.warn); } @@ -216,9 +227,9 @@ export class RootLayoutBase extends GridLayout { }); }); - this.shadeCover = shadeCover; + this._shadeCover = shadeCover; // Insert shade cover at index right above the first layout - this.insertChild(this.shadeCover, this.staticChildCount + 1); + this.insertChild(this._shadeCover, indexToAdd); } }); } @@ -226,15 +237,15 @@ export class RootLayoutBase extends GridLayout { closeShadeCover(shadeCoverOptions: ShadeCoverOptions = {}): Promise { return new Promise((resolve) => { // if shade cover is displayed and the last popup is closed, also close the shade cover - if (this.shadeCover) { - return this._closeShadeCover(this.shadeCover, shadeCoverOptions).then(() => { - if (this.shadeCover) { - this.shadeCover.off('loaded'); - if (this.shadeCover.parent) { - this.removeChild(this.shadeCover); + if (this._shadeCover) { + return this._closeShadeCover(this._shadeCover, shadeCoverOptions).then(() => { + if (this._shadeCover) { + this._shadeCover.off('loaded'); + if (this._shadeCover.parent) { + this.removeChild(this._shadeCover); } } - this.shadeCover = null; + this._shadeCover = null; // cleanup any platform specific details related to shade cover this._cleanupPlatformShadeCover(); resolve(); @@ -245,7 +256,7 @@ export class RootLayoutBase extends GridLayout { } topmost(): View { - return this.popupViews.length ? this.popupViews[this.popupViews.length - 1].view : null; + return this._popupViews.length ? this._popupViews[this._popupViews.length - 1].view : null; } // bring any view instance open on the rootlayout to front of all the children visually @@ -261,14 +272,14 @@ export class RootLayoutBase extends GridLayout { const popupIndex = this.getPopupIndex(view); // popupview should be present and not already the topmost view - if (popupIndex < 0 || popupIndex == this.popupViews.length - 1) { + if (popupIndex < 0 || popupIndex == this._popupViews.length - 1) { return reject(new Error(`${view} not found or already at topmost`)); } // keep the popupViews array in sync with the stacking of the views - const currentView = this.popupViews[popupIndex]; - this.popupViews.splice(popupIndex, 1); - this.popupViews.push(currentView); + const currentView = this._popupViews[popupIndex]; + this._popupViews.splice(popupIndex, 1); + this._popupViews.push(currentView); const exitAnimation = this.getViewExitState(view); if (animated && exitAnimation) { @@ -302,14 +313,14 @@ export class RootLayoutBase extends GridLayout { // update shadeCover to reflect topmost's shadeCover options const shadeCoverOptions = currentView?.options?.shadeCover; if (shadeCoverOptions) { - this.updateShadeCover(this.shadeCover, shadeCoverOptions); + this.updateShadeCover(this._shadeCover, shadeCoverOptions); } resolve(); }); } private getPopupIndex(view: View): number { - return this.popupViews.findIndex((popupView) => popupView.view === view); + return this._popupViews.findIndex((popupView) => popupView.view === view); } private getViewInitialState(view: View): TransitionAnimation { @@ -317,7 +328,7 @@ export class RootLayoutBase extends GridLayout { if (popupIndex === -1) { return; } - const initialState = this.popupViews[popupIndex]?.options?.animation?.enterFrom; + const initialState = this._popupViews[popupIndex]?.options?.animation?.enterFrom; if (!initialState) { return; } @@ -329,7 +340,7 @@ export class RootLayoutBase extends GridLayout { if (popupIndex === -1) { return; } - const exitAnimation = this.popupViews[popupIndex]?.options?.animation?.exitTo; + const exitAnimation = this._popupViews[popupIndex]?.options?.animation?.exitTo; if (!exitAnimation) { return; } @@ -428,7 +439,11 @@ export class RootLayoutBase extends GridLayout { } export function getRootLayout(): RootLayout { - return global.rootLayout; + return _topmost(); +} + +export function getRootLayoutById(id: string): RootLayout { + return _findRootLayoutById(id); } export const defaultTransitionAnimation: TransitionAnimation = { diff --git a/packages/core/ui/layouts/root-layout/root-layout-stack.ts b/packages/core/ui/layouts/root-layout/root-layout-stack.ts new file mode 100644 index 0000000000..597ea77687 --- /dev/null +++ b/packages/core/ui/layouts/root-layout/root-layout-stack.ts @@ -0,0 +1,25 @@ +import { RootLayoutBase } from './root-layout-common'; + +const rootLayoutStack: RootLayoutBase[] = []; + +export function _findRootLayoutById(id: string): RootLayoutBase { + return rootLayoutStack.find((rootLayout) => rootLayout.id && rootLayout.id === id); +} + +export function _pushInRootLayoutStack(rootLayout: RootLayoutBase): void { + if (!rootLayoutStack.includes(rootLayout)) { + rootLayoutStack.push(rootLayout); + } +} + +export function _removeFromRootLayoutStack(rootLayout: RootLayoutBase): void { + const index = rootLayoutStack.indexOf(rootLayout); + + if (index > -1) { + rootLayoutStack.splice(index, 1); + } +} + +export function _topmost(): RootLayoutBase { + return rootLayoutStack[rootLayoutStack.length - 1]; +} From 676de6d341c926e596b836215c30d95a113d0045 Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Fri, 31 Jan 2025 15:41:12 +0200 Subject: [PATCH 2/6] fix: Function for getting rootlayout should return first layout in view tree --- .../layouts/root-layout/root-layout-common.ts | 33 ++++++++++++------- .../layouts/root-layout/root-layout-stack.ts | 4 +-- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index dbac28539e..e288411f7b 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -6,7 +6,7 @@ import { RootLayout, RootLayoutOptions, ShadeCoverOptions, TransitionAnimation } import { Animation } from '../../animation'; import { AnimationDefinition } from '../../animation'; import { isNumber } from '../../../utils/types'; -import { _findRootLayoutById, _pushInRootLayoutStack, _removeFromRootLayoutStack, _topmost } from './root-layout-stack'; +import { _findRootLayoutById, _pushInRootLayoutStack, _removeFromRootLayoutStack, _geRootLayoutFromStack } from './root-layout-stack'; @CSSType('RootLayout') export class RootLayoutBase extends GridLayout { @@ -52,16 +52,17 @@ export class RootLayoutBase extends GridLayout { } if (this.hasChild(view)) { - return reject(new Error(`${view} has already been added`)); + return reject(new Error(`View ${view} has already been added to the root layout`)); } const toOpen = []; const enterAnimationDefinition = options.animation ? options.animation.enterFrom : null; - // keep track of the views locally to be able to use their options later + // Keep track of the views locally to be able to use their options later this._popupViews.push({ view: view, options: options }); - view.opacity = 0; // always begin with view invisible when adding dynamically + // Always begin with view invisible when adding dynamically + view.opacity = 0; // Add view to view tree before adding shade cover this.insertChild(view, this.getChildrenCount()); @@ -123,7 +124,7 @@ export class RootLayoutBase extends GridLayout { } if (!this.hasChild(view)) { - return reject(new Error(`Unable to close popup. ${view} not found`)); + return reject(new Error(`Unable to close popup. View ${view} not found`)); } const toClose = []; @@ -259,7 +260,13 @@ export class RootLayoutBase extends GridLayout { return this._popupViews.length ? this._popupViews[this._popupViews.length - 1].view : null; } - // bring any view instance open on the rootlayout to front of all the children visually + /** + * This method causes the requested view to overlap its siblings by bring it to front. + * + * @param view + * @param animated + * @returns + */ bringToFront(view: View, animated: boolean = false): Promise { return new Promise((resolve, reject) => { if (!(view instanceof View)) { @@ -267,13 +274,17 @@ export class RootLayoutBase extends GridLayout { } if (!this.hasChild(view)) { - return reject(new Error(`${view} not found or already at topmost`)); + return reject(new Error(`View ${view} is not a child of the root layout`)); } const popupIndex = this.getPopupIndex(view); - // popupview should be present and not already the topmost view - if (popupIndex < 0 || popupIndex == this._popupViews.length - 1) { - return reject(new Error(`${view} not found or already at topmost`)); + + if (popupIndex < 0) { + return reject(new Error(`View ${view} is not a child of the root layout`)); + } + + if (popupIndex == this._popupViews.length - 1) { + return reject(new Error(`View ${view} is already the topmost view in the rootlayout`)); } // keep the popupViews array in sync with the stacking of the views @@ -439,7 +450,7 @@ export class RootLayoutBase extends GridLayout { } export function getRootLayout(): RootLayout { - return _topmost(); + return _geRootLayoutFromStack(0); } export function getRootLayoutById(id: string): RootLayout { diff --git a/packages/core/ui/layouts/root-layout/root-layout-stack.ts b/packages/core/ui/layouts/root-layout/root-layout-stack.ts index 597ea77687..aaf5a4d4fb 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-stack.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-stack.ts @@ -20,6 +20,6 @@ export function _removeFromRootLayoutStack(rootLayout: RootLayoutBase): void { } } -export function _topmost(): RootLayoutBase { - return rootLayoutStack[rootLayoutStack.length - 1]; +export function _geRootLayoutFromStack(index: number): RootLayoutBase { + return rootLayoutStack.length > index ? rootLayoutStack[index] : null; } From 1675b7b4164161049d4206095244249eb4a8c72b Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Fri, 31 Jan 2025 16:09:24 +0200 Subject: [PATCH 3/6] chore: Comment correction --- packages/core/ui/layouts/root-layout/root-layout-common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index e288411f7b..d789c88b46 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -229,7 +229,7 @@ export class RootLayoutBase extends GridLayout { }); this._shadeCover = shadeCover; - // Insert shade cover at index right above the first layout + // Insert shade cover at index right below the first popup view this.insertChild(this._shadeCover, indexToAdd); } }); From f06894e1d8cf0f1934134cb000dffa67ecd3a82a Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Sat, 1 Feb 2025 00:13:26 +0200 Subject: [PATCH 4/6] fix: Added missing import --- packages/core/ui/layouts/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/layouts/index.ts b/packages/core/ui/layouts/index.ts index 1150ae1e60..c9ebfc3584 100644 --- a/packages/core/ui/layouts/index.ts +++ b/packages/core/ui/layouts/index.ts @@ -2,7 +2,7 @@ export { AbsoluteLayout } from './absolute-layout'; export { DockLayout } from './dock-layout'; export { FlexboxLayout } from './flexbox-layout'; export { GridLayout, GridUnitType, ItemSpec } from './grid-layout'; -export { RootLayout, getRootLayout } from './root-layout'; +export { RootLayout, getRootLayout, getRootLayoutById } from './root-layout'; export type { RootLayoutOptions, ShadeCoverOptions } from './root-layout'; export { StackLayout } from './stack-layout'; export { WrapLayout } from './wrap-layout'; From cd544232478bdeda6984008e188594ac1649d3ee Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Sat, 1 Feb 2025 00:14:03 +0200 Subject: [PATCH 5/6] fix: Added missing super call for disposing native view --- packages/core/ui/layouts/root-layout/root-layout-common.ts | 6 ++++-- packages/core/ui/layouts/root-layout/root-layout-stack.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index d789c88b46..ece4cb65a8 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -6,7 +6,7 @@ import { RootLayout, RootLayoutOptions, ShadeCoverOptions, TransitionAnimation } import { Animation } from '../../animation'; import { AnimationDefinition } from '../../animation'; import { isNumber } from '../../../utils/types'; -import { _findRootLayoutById, _pushInRootLayoutStack, _removeFromRootLayoutStack, _geRootLayoutFromStack } from './root-layout-stack'; +import { _findRootLayoutById, _pushIntoRootLayoutStack, _removeFromRootLayoutStack, _geRootLayoutFromStack } from './root-layout-stack'; @CSSType('RootLayout') export class RootLayoutBase extends GridLayout { @@ -16,10 +16,12 @@ export class RootLayoutBase extends GridLayout { public initNativeView(): void { super.initNativeView(); - _pushInRootLayoutStack(this); + _pushIntoRootLayoutStack(this); } public disposeNativeView(): void { + super.disposeNativeView(); + _removeFromRootLayoutStack(this); } diff --git a/packages/core/ui/layouts/root-layout/root-layout-stack.ts b/packages/core/ui/layouts/root-layout/root-layout-stack.ts index aaf5a4d4fb..d4b5d94048 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-stack.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-stack.ts @@ -6,7 +6,7 @@ export function _findRootLayoutById(id: string): RootLayoutBase { return rootLayoutStack.find((rootLayout) => rootLayout.id && rootLayout.id === id); } -export function _pushInRootLayoutStack(rootLayout: RootLayoutBase): void { +export function _pushIntoRootLayoutStack(rootLayout: RootLayoutBase): void { if (!rootLayoutStack.includes(rootLayout)) { rootLayoutStack.push(rootLayout); } From 6f5e7016a8b7825573b86db7ecfb8e651dd0c760 Mon Sep 17 00:00:00 2001 From: Dimitris - Rafail Katsampas Date: Sat, 1 Feb 2025 00:24:58 +0200 Subject: [PATCH 6/6] chore: Improved comment --- packages/core/ui/layouts/root-layout/root-layout-common.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index ece4cb65a8..be8b54c936 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -66,6 +66,7 @@ export class RootLayoutBase extends GridLayout { // Always begin with view invisible when adding dynamically view.opacity = 0; // Add view to view tree before adding shade cover + // Before being added to view tree, shade cover calculates the index to be inserted based on existing popup views this.insertChild(view, this.getChildrenCount()); if (options.shadeCover) {