feat(design): expand selected tree items on initial render

graycoreio · Jul 23, 2024 · a68a5b1 · a68a5b1
1 parent d244920
commit a68a5b1
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/libs/design/tree/src/tree-item/tree-item.directive.ts b/libs/design/tree/src/tree-item/tree-item.directive.ts
@@ -7,6 +7,7 @@ import {
   Input,
 } from '@angular/core';
 
+import { DaffTreeUi } from '../interfaces/tree-ui';
 import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
 import { DaffTreeFlatNode } from '../utils/flatten-tree';
 
@@ -126,7 +127,7 @@ export class DaffTreeItemDirective {
    */
   @HostListener('keydown.escape')
   onEscape() {
-    this.toggleParent(this.node);
+    this.toggleParent();
   }
 
   /**
@@ -137,28 +138,44 @@ export class DaffTreeItemDirective {
     if(this.node.hasChildren) {
       this.toggleTree(this.node);
     }
+
+  /**
+   * Opens parent and parent of parent all the way to the root of the tree.
+   */
+  openAncestors() {
+    const openParent = (tree: DaffTreeUi<unknown>) => {
+      if (tree?.parent.parent === undefined) {
+        return;
+      }
+      tree.parent.open = true;
+      openParent(tree.parent);
+    };
+    openParent(this._node._treeRef);
+    (<Document>this.document).getElementById('tree-' + this.node._treeRef.parent.id).focus();
     this.treeNotifier.notify();
   }
 
   /**
    * Toggle the open state of the tree's parent.
    */
-  toggleParent(node: DaffTreeFlatNode) {
-    if(node._treeRef?.parent.parent === undefined) {
+  toggleParent() {
+    if(this.node._treeRef?.parent.parent === undefined) {
       return;
     }
-    node._treeRef.parent.open = !node._treeRef.parent.open;
-    (<Document>this.document).getElementById('tree-' + node._treeRef.parent.id).focus();
+    this.node._treeRef.parent.open = !this.node._treeRef.parent.open;
+    (<Document>this.document).getElementById('tree-' + this.node._treeRef.parent.id).focus();
+    this.treeNotifier.notify();
   }
 
   /**
    * Toggle the open state of this specific subtree tree.
    */
-  toggleTree(node: DaffTreeFlatNode) {
-    if(node._treeRef.open === false) {
-      node._treeRef.open = true;
+  toggleTree() {
+    if(this.node._treeRef.open === false) {
+      this.node._treeRef.open = true;
     } else {
-      node._treeRef.open = false;
+      this.node._treeRef.open = false;
     }
+    this.treeNotifier.notify();
   }
 }
diff --git a/libs/design/tree/src/tree/tree.component.ts b/libs/design/tree/src/tree/tree.component.ts
@@ -1,24 +1,35 @@
 import {
+  afterNextRender,
+  AfterRenderPhase,
+  AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChild,
+  ContentChildren,
+  DestroyRef,
   ElementRef,
   HostBinding,
+  Injector,
   Input,
   OnChanges,
   OnInit,
+  QueryList,
   Renderer2,
+  runInInjectionContext,
   SimpleChanges,
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { daffArticleEncapsulatedMixin } from '@daffodil/design';
 
 import { DaffTreeNotifierService } from './tree-notifier.service';
 import { DaffTreeData } from '../interfaces/tree-data';
 import { DaffTreeRenderMode } from '../interfaces/tree-render-mode';
 import { DaffTreeUi } from '../interfaces/tree-ui';
+import { DaffTreeItemDirective } from '../tree-item/tree-item.directive';
 import {
   DaffTreeFlatNode,
   flattenTree,
@@ -65,7 +76,7 @@ const _daffTreeBase = daffArticleEncapsulatedMixin((DaffTreeBase));
     DaffTreeNotifierService,
   ],
 })
-export class DaffTreeComponent extends _daffTreeBase implements OnInit, OnChanges {
+export class DaffTreeComponent extends _daffTreeBase implements OnInit, OnChanges, AfterViewInit {
 
   /**
    * The css class of the daff-tree.
@@ -116,8 +127,13 @@ export class DaffTreeComponent extends _daffTreeBase implements OnInit, OnChange
    */
   @ContentChild('daffTreeItemTpl', { static: true }) treeItemTemplate: TemplateRef<any>;
 
+  @ContentChildren(DaffTreeItemDirective) items!: QueryList<DaffTreeItemDirective>;
+
   constructor(
     private notifier: DaffTreeNotifierService,
+    private destroyRef: DestroyRef,
+    private injector: Injector,
+    private cd: ChangeDetectorRef,
     private elementRef: ElementRef,
     private renderer: Renderer2,
   ) {
@@ -154,4 +170,18 @@ export class DaffTreeComponent extends _daffTreeBase implements OnInit, OnChange
       this.flatTree = flattenTree(this._tree, this.renderMode === 'not-in-dom');
     });
   }
+
+  ngAfterViewInit(): void {
+    this.items.changes.pipe(
+      takeUntilDestroyed(this.destroyRef),
+    ).subscribe((items: QueryList<DaffTreeItemDirective>) => {
+      runInInjectionContext(this.injector, () => afterNextRender(() => {
+        const activeTreeItem = items.find((treeItem) => treeItem.selected);
+        if (activeTreeItem) {
+          activeTreeItem.openAncestors();
+          this.cd.markForCheck();
+        }
+      }, { phase: AfterRenderPhase.Read }));
+    });
+  }
 }