feat(devtools): Adding parent nodes for selected component (rangle/an…

…gular-devtools#34)
angular · Feb 4, 2020 · aaae3c4 · aaae3c4
1 parent da690ca
commit aaae3c4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 27 deletions.
diff --git a/.../src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css b/.../src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css
@@ -3,6 +3,7 @@
   height: 100%;
   overflow: auto;
 }
+
 :host /deep/ .mat-tree-node .mat-icon {
   font-size: 12px;
   width: 16px;
@@ -22,7 +23,7 @@
   font-size: 11px;
 }
 
-:host /deep/ mat-tree-node > button {
+:host /deep/ mat-tree-node>button {
   outline: none;
   border: 0;
   background: transparent;
@@ -92,3 +93,19 @@
   width: 20%;
   display: flex;
 }
+
+.parent-nodes {
+  background-color: #ddd;
+  padding: 2px;
+  bottom: 0px;
+  position: fixed;
+  width: 100%;
+}
+
+.btn-node {
+  font-size: 11px;
+  margin: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  line-height: 20px;
+}
diff --git a/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html b/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
@@ -1,31 +1,16 @@
-<ng-filter
-  [hasMatched]="hasMatched()"
-  (filter)="handleFilter($event)"
-  (nextMatched)="nextMatched()"
-  (prevMatched)="prevMatched()"
->
+<ng-filter [hasMatched]="hasMatched()" (filter)="handleFilter($event)" (nextMatched)="nextMatched()"
+  (prevMatched)="prevMatched()">
 </ng-filter>
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <mat-tree-node
-    [ngClass]="{ matched: isMatched(node), selected: isSelected(node) }"
-    (click)="handleSelect(node)"
-    *matTreeNodeDef="let node"
-    matTreeNodePaddingIndent="20"
-    matTreeNodePadding
-    [@simpleFade]="node.level?1:0"
-  >
+  <mat-tree-node [ngClass]="{ matched: isMatched(node), selected: isSelected(node) }" (click)="handleSelect(node)"
+    *matTreeNodeDef="let node" matTreeNodePaddingIndent="20" matTreeNodePadding [@simpleFade]="node.level?1:0">
     <button disabled></button>
     <span class="element-name">{{ node.name }}</span>
     <span *ngIf="node.directives" class="dir-names">[{{ node.directives }}]</span>
   </mat-tree-node>
-  <mat-tree-node
-    [ngClass]="{ matched: isMatched(node), selected: isSelected(node) }"
-    (click)="handleSelect(node)"
-    *matTreeNodeDef="let node; when: hasChild"
-    matTreeNodePaddingIndent="20"
-    matTreeNodePadding
-    [@simpleFade]="node.level?1:0"
-  >
+  <mat-tree-node [ngClass]="{ matched: isMatched(node), selected: isSelected(node) }" (click)="handleSelect(node)"
+    *matTreeNodeDef="let node; when: hasChild" matTreeNodePaddingIndent="20" matTreeNodePadding
+    [@simpleFade]="node.level?1:0">
     <button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
         {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
@@ -35,3 +20,9 @@
     <span *ngIf="node.directives" class="dir-names">[{{ node.directives }}]</span>
   </mat-tree-node>
 </mat-tree>
+<div class="parent-nodes" *ngIf="parents">
+  <button mat-button class="btn-node" *ngFor="let node of parents" (click)="handleSelect(node)">
+    {{node.original.component?.name || node.original.element}}
+  </button>
+
+</div>
diff --git a/...s/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/...s/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
@@ -8,7 +8,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { Node } from 'protocol';
+import { Node, ElementID } from 'protocol';
 import { CdkTree, FlatTreeControl } from '@angular/cdk/tree';
 import { ComponentDataSource, FlatNode } from './component-data-source';
 
@@ -51,6 +51,8 @@ export class DirectiveForestComponent {
   currentlyMatchedIndex = -1;
 
   selectedNode: FlatNode | null = null;
+  parents: FlatNode[];
+
   treeControl = new FlatTreeControl<FlatNode>(
     node => node.level,
     node => node.expandable
@@ -61,15 +63,16 @@ export class DirectiveForestComponent {
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
-  constructor(private _host: ElementRef) {}
+  constructor(private _host: ElementRef) { }
 
   handleSelect(node: FlatNode): void {
     const matchedTree: FlatNode[] = this._findMatchedNodes();
-    this.currentlyMatchedIndex = matchedTree.findIndex(matchedNode =>  matchedNode.id === node.id);
+    this.currentlyMatchedIndex = matchedTree.findIndex(matchedNode => matchedNode.id === node.id);
     this.select(node);
   }
 
   select(node: FlatNode): void {
+    this.populateParents(node.id);
     this.selectNode.emit(node.original);
     this.selectedNode = node;
 
@@ -87,6 +90,18 @@ export class DirectiveForestComponent {
     }, 0);
   }
 
+  populateParents(id: ElementID): void {
+    this.parents = id.reduce((nodes: FlatNode[], index: number) => {
+      let nodeId = [index];
+      if (nodes.length > 0) {
+        nodeId = nodes[nodes.length - 1].id.concat(index);
+      }
+      const selectedNode = this.dataSource.data.find((item) => item.id.toString() === nodeId.toString());
+      nodes.push(selectedNode);
+      return nodes;
+    }, []);
+  }
+
   @HostListener('document:keydown.ArrowUp', ['$event'])
   navigateUp(evnt: KeyboardEvent): void {
     if (this.invalidArrowEvent(evnt)) {
@@ -188,7 +203,7 @@ export class DirectiveForestComponent {
   }
 
   hasMatched(): boolean {
-  return this._findMatchedNodes().length > 0;
+    return this._findMatchedNodes().length > 0;
   }
 
   nextMatched(): void {