8000 feat(devtools): use responsive-split for the signal graph tab · angular/angular@bde4d06 · GitHub
[go: up one dir, main page]
Skip to content
8000

Commit bde4d06

Browse files
hawkgsmilomg
hawkgs
authored and
milomg
committed
feat(devtools): use responsive-split for the signal graph tab
Use responsive-split for the signal graph tab.
1 parent 7296667 commit bde4d06

File tree

3 files changed

+40
-3
lines changed

3 files changed

+40
-3
lines changed

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel

Lines changed: 1 addition & 0 deletions
8000
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ ng_project(
3535
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
3636
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab:property-tab_rjs",
3737
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view:signals-tab_rjs",
38+
"//devtools/projects/ng-devtools/src/lib/shared/responsive-split:responsive-split_rjs",
3839
"//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
3940
"//devtools/projects/protocol:protocol_rjs",
4041
],

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<as-split unit="percent" [direction]="splitDirection()" [gutterSize]="9">
22
<as-split-area #directiveForestSplitArea size="60">
3-
<as-split direction="vertical" [gutterSize]="9" unit="percent">
4-
<as-split-area class="forest-breadcrumbs" size="30">
3+
<as-split
4+
[ngResponsiveSplit]="responsiveSplitConfig"
5+
(directionChange)="onResponsiveSplitDirChange($event)"
6+
direction="vertical"
7+
[gutterSize]="9"
8+
unit="percent"
9+
>
10+
<as-split-area class="forest-breadcrumbs" [size]="forestSplitSize()">
511
<ng-directive-forest
612
(selectNode)="handleNodeSelection($event)"
713
(selectDomElement)="handleSelectDomElement($event)"
@@ -25,7 +31,7 @@
2531
</div>
2632
</as-split-area>
2733
@if (signalsOpen() && currentSelectedElement(); as currentSelectedElement) {
28-
<as-split-area size="70">
34+
<as-split-area [size]="signalGraphSplitSize()">
2935
<ng-signals-tab
3036
[currentElement]="currentSelectedElement.position"
3137
(close)="signalsOpen.set(false)"

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@ import {FormsModule} from '@angular/forms';
4949
import {Platform} from '@angular/cdk/platform';
5050
import {MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar';
5151
import {SignalsTabComponent} from './signals-view/signals-tab.component';
52+
import {
53+
Direction,
54+
ResponsiveSplitConfig,
55+
ResponsiveSplitDirective,
56+
} from '../../shared/responsive-split/responsive-split.directive';
57+
58+
const FOREST_VER_SPLIT_SIZE = 30;
59+
const SIGNAL_GRAPH_VER_SPLIT_SIZE = 70;
60+
61+
const HOR_SPLIT_SIZE = 50;
5262

5363
const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
5464
if ((a.component && !b.component) || (!a.component && b.component)) {
@@ -86,6 +96,7 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
8696
FormsModule,
8797
MatSnackBarModule,
8898
SignalsTabComponent,
99+
ResponsiveSplitDirective,
89100
],
90101< 8000 /td>
})
91102
export class DirectiveExplorerComponent {
@@ -122,6 +133,15 @@ export class DirectiveExplorerComponent {
122133
private readonly platform = inject(Platform);
123134
private readonly snackBar = inject(MatSnackBar);
124135

136+
protected readonly responsiveSplitConfig: ResponsiveSplitConfig = {
137+
defaultDirection: 'vertical',
138+
aspectRatioBreakpoint: 1.5,
139+
breakpointDirection: 'horizontal',
140+
};
141+
142+
protected readonly forestSplitSize = signal<number>(FOREST_VER_SPLIT_SIZE);
143+
protected readonly signalGraphSplitSize = signal<number>(SIGNAL_GRAPH_VER_SPLIT_SIZE);
144+
125145
constructor() {
126146
afterRenderEffect((cleanup) => {
127147
const splitElement = this.splitElementRef().nativeElement;
@@ -351,4 +371,14 @@ export class DirectiveExplorerComponent {
351371
// TBD: Use the node argument for graph node selection/highlighting.
352372
this.signalsOpen.set(true);
353373
}
374+
375+
onResponsiveSplitDirChange(direction: Direction) {
376+
if (direction === 'vertical') {
377+
this.forestSplitSize.set(FOREST_VER_SPLIT_SIZE);
378+
this.signalGraphSplitSize.set(SIGNAL_GRAPH_VER_SPLIT_SIZE);
379+
} else {
380+
this.forestSplitSize.set(HOR_SPLIT_SIZE);
381+
this.signalGraphSplitSize.set(HOR_SPLIT_SIZE);
382+
}
383+
}
354384
}

0 commit comments

Comments
 (0)
0