skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(devtools): router tree not being rendered

Browse Source 
Convert the `TreeVisualizer` to a signal, in the `TreeVisualizerComponent`, to ensure that the router tree render effect is always called; Use explicit `afterNextRender` phases.
This commit is contained in:
hawkgs
2025-12-03 15:51:00 +02:00
committed by Alex Rickabaugh
parent 37598cf6fe
commit 1d431a9637
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.component.ts
+23 -18
View File
@@ -56,19 +56,23 @@ export class TreeVisualizerComponent<T extends TreeNode = TreeNode> {
protected readonly nodeMouseover = output<TreeD3Node<T>>();
readonly panning = signal(false);
private readonly visualizer = signal<TreeVisualizer<T> | null>(null);
private initialRender: boolean = true;
private visualizer?: TreeVisualizer<T>;
constructor() {
afterNextRender(() => {
this.visualizer?.cleanup();
this.visualizer = new TreeVisualizer<T>(
this.container().nativeElement,
this.group().nativeElement,
this.config(),
);
this.ready.emit();
afterNextRender({
write: () => this.visualizer()?.cleanup(), // Cleans up the visualization DOM
read: () => {
this.visualizer.set(
new TreeVisualizer<T>(
this.container().nativeElement,
this.group().nativeElement,
this.config(),
),
);
this.ready.emit();
},
});
effect(() => {
@@ -76,7 +80,7 @@ export class TreeVisualizerComponent<T extends TreeNode = TreeNode> {
});
inject(DestroyRef).onDestroy(() => {
this.visualizer?.dispose();
this.visualizer()?.dispose();
});
}
@@ -85,26 +89,27 @@ export class TreeVisualizerComponent<T extends TreeNode = TreeNode> {
}
snapToRoot(scale?: number) {
this.visualizer?.snapToRoot(scale);
this.visualizer()?.snapToRoot(scale);
}
snapToNode(node: T, scale?: number) {
this.visualizer?.snapToNode(node, scale);
this.visualizer()?.snapToNode(node, scale);
}
getNodeById(id: string) {
return this.visualizer?.getInternalNodeById(id);
return this.visualizer()?.getInternalNodeById(id);
}
private renderGraph(root: T): void {
if (!this.visualizer) {
const visualizer = this.visualizer();
if (!visualizer) {
return;
}
this.visualizer.render(root);
this.visualizer.onNodeClick((_, node) => this.nodeClick.emit(node));
this.visualizer.onNodeMouseout((_, node) => this.nodeMouseout.emit(node));
this.visualizer.onNodeMouseover((_, node) => this.nodeMouseover.emit(node));
visualizer.render(root);
visualizer.onNodeClick((_, node) => this.nodeClick.emit(node));
visualizer.onNodeMouseout((_, node) => this.nodeMouseout.emit(node));
visualizer.onNodeMouseover((_, node) => this.nodeMouseover.emit(node));
this.render.emit({initial: this.initialRender});
if (this.initialRender) {