feat: add setPanels function in get data callback

projects/demo/src/app/app.component.ts

@@ -155,7 +155,7 @@ export class AppComponent implements OnInit {
     };
 
     this.rootPanel = {
-      id: 'root2',
+      id: 'rootPanel',
       bodyTemplate: this._demoBodyTemplate,
       data: of(rootPanelData).pipe(delay(1500)),
       subPanels: [subPanel1]

projects/stacked-panels/src/lib/stacked-panels.service.ts

@@ -22,41 +22,47 @@ export class StackedPanelsService {
     map((shownPanels: Panel[]) => shownPanels[shownPanels.length - 1])
   );
 
+  private _rootPanel: Panel | undefined;
+
   public initRootPanel<T, C>(rootPanel: Panel<T, C>): void {
-    this._hideAllPanelsExceptRoot()
-    this._panels$.next([rootPanel]);
+    this._rootPanel = rootPanel;
+    this._subPanelsMap.clear();
+    this._panelDataMap.clear();
+    this._shownPanels$.next([]);
     this._showPanel<T, C>(rootPanel);
   }
 
-  private _hideAllPanelsExceptRoot(): void {
-    this._shownPanels$.getValue().forEach((panel, index) => {
-      if (index > 0) {
-        this._hidePanelById(panel.id);
-      }
-    })
-  }
-
   private _hidePanelById(panelId: string): void {
     const panelIndex: number = this._shownPanels.findIndex((panel: Panel) => panel.id === panelId);
     if (panelIndex !== -1) {
-      this.removeSubPanels(panelId);
+      this._removeSubPanels(panelId);
       const newShownPanels: Panel[] = [...this._shownPanels];
       newShownPanels.splice(panelIndex, 1);
       this._shownPanels$.next(newShownPanels);
     }
   }
 
-  private removeSubPanels(parentPanelId: string): void {
+  private _removeSubPanels(parentPanelId: string, emit: boolean = true): void {
     const subPanelIdsOfParentPanel: string[] = this._subPanelsMap.get(parentPanelId)?.map((subPanelOfHiddenPanel: Panel) => subPanelOfHiddenPanel.id);
     if (subPanelIdsOfParentPanel?.length > 0) {
-      const allPanelsWithoutSubPanelsOfParentPanel: Panel[] = this._panels.filter((panel: Panel) => !subPanelIdsOfParentPanel.includes(panel.id));
       subPanelIdsOfParentPanel.forEach((panelId: string) => {
+        this._removeSubPanels(panelId, false);
         this._panelDataMap.delete(panelId);
+        this._subPanelsMap.delete(panelId);
       });
-      this._panels$.next(allPanelsWithoutSubPanelsOfParentPanel);
+      if (emit) {
+        this._emitPanelsStreamFromSubPanelsMap();
+      }
     }
   }
 
+  private _emitPanelsStreamFromSubPanelsMap(): void {
+    const panels: Panel[] = Array.from(this._subPanelsMap.values()).flat();
+    this._panels$.next([this._rootPanel, ...panels]);
+    console.debug('current panels: ', Array.from(this._subPanelsMap.keys()));
+    console.debug('current data map: ', Array.from(this._panelDataMap.keys()));
+  }
+
   private _showPanelById<T, C>(panelId: string, context?: C): boolean {
     console.debug('Show panel:', panelId, 'context:', context);
     const targetPanel: Panel<T> = this._panels.find((panel: Panel) => panel.id === panelId);
@@ -69,14 +75,18 @@ export class StackedPanelsService {
 
   private _showPanel<T, C>(panel: Panel<T, C>, context?: C): void {
     if (panel.subPanels?.length > 0) {
-      this.addPanels(panel.id, panel.subPanels);
+      this._addPanels(panel.id, panel.subPanels);
     }
     if (panel.data) {
       let data: Observable<any> | any;
       if (isFunction(panel.data)) {
         const getData: GetDataFunction<T, C> = panel.data;
-        data = getData(context, (parentId: string, panels: Panel[]) => {
-          this.addPanels(parentId, panels);
+        data = getData(context, (parentId: string, panels: Panel[], keepExisting: boolean = true) => {
+          if (keepExisting) {
+            this._addPanels(parentId, panels);
+          } else {
+            this._setPanels(parentId, panels);
+          }
         });
       } else if (isObservable(panel.data)) {
         data = panel.data;
@@ -114,9 +124,26 @@ export class StackedPanelsService {
     return Boolean(this._shownPanels.find((panel: Panel) => panel.id === panelId));
   }
 
-  public addPanels(parentId: string, panels: Panel[]): void {
-    this._subPanelsMap.set(parentId, panels);
-    this._panels$.next([...this._panels, ...panels]);
+  private _addPanels(parentId: string, panels: Panel[]): void {
+    const existingSubPanelsOfParent: Panel[] = this._subPanelsMap.get(parentId) || [];
+    const newPanels: Panel[] = [...existingSubPanelsOfParent, ...panels];
+    this._subPanelsMap.set(parentId, newPanels);
+    this._emitPanelsStreamFromSubPanelsMap();
+  }
+
+  private _setPanels(parentId: string, newOrExistingSubPanels: Panel[]): void {
+    const existingSubPanelsOfParent: Panel[] | undefined = this._subPanelsMap.get(parentId);
+    if (existingSubPanelsOfParent) {
+      const newOrExistingPanelIds: string[] = newOrExistingSubPanels.map((panel) => panel.id);
+      existingSubPanelsOfParent.forEach((subPanel: Panel) => {
+        if (!newOrExistingPanelIds.includes(subPanel.id)) {
+          this._panelDataMap.delete(subPanel.id);
+          this._removeSubPanels(subPanel.id, false);
+        }
+      });
+    }
+    this._subPanelsMap.set(parentId, newOrExistingSubPanels);
+    this._emitPanelsStreamFromSubPanelsMap();
   }
 
   private get _panels(): Panel[] {

projects/stacked-panels/src/lib/stacked-panels.types.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { TemplateRef } from '@angular/core';
 
-export type AddSubPanelsFunction = (parentId: string, panels: Panel[]) => void
+export type AddSubPanelsFunction = (parentId: string, panels: Panel[], keepExisting?: boolean) => void
 export type GetDataFunction<T, C> = (context: C, addSubPanels: AddSubPanelsFunction) => Observable<T>;
 
 export interface Panel<T = any, C = any> {

projects/stacked-panels/tsconfig.lib.json

@@ -11,7 +11,7 @@
     "types": [],
     "lib": [
       "dom",
-      "es2018"
+      "es2019"
     ]
   },
   "exclude": [

tsconfig.json

@@ -22,7 +22,7 @@
     },
     "module": "es2020",
     "lib": [
-      "es2018",
+      "es2019",
       "dom"
     ]
   },