fix(module:graph): fix edge default style and wrong toggling group no…

…des (#6615)

components/graph/data-source/graph-data-source.ts

@@ -4,6 +4,7 @@
  */
 
 import { SelectionModel } from '@angular/cdk/collections';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { BehaviorSubject, merge, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { NzGraphDataDef } from '../interface';
@@ -22,12 +23,16 @@ export class NzGraphData implements NzGraphBaseSource<NzGraphDataDef, string> {
 
   /** Expands one single data node. */
   expand(nodeName: string): void {
-    this.expansionModel.select(nodeName);
+    const compound = this.dataSource.compound || {};
+    const toBeSelected = this.findParents(compound, nodeName, [nodeName]);
+    this.expansionModel.select(...toBeSelected);
   }
 
   /** Collapses one single data node. */
   collapse(nodeName: string): void {
-    this.expansionModel.deselect(nodeName);
+    const compound = this.dataSource.compound || {};
+    const toBeDeselected = this.findChildren(compound, nodeName, [nodeName]);
+    this.expansionModel.deselect(...toBeDeselected);
   }
 
   /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
@@ -66,4 +71,26 @@ export class NzGraphData implements NzGraphBaseSource<NzGraphDataDef, string> {
   disconnect(): void {
     // do nothing for now
   }
+
+  private findParents(data: NzSafeAny, key: string, parents: string[] = []): string[] {
+    const parent = Object.keys(data)
+      .filter(d => d !== key)
+      .find(d => data[d].includes(key));
+    if (!parent) {
+      return parents;
+    } else {
+      return this.findParents(data, parent, [parent, ...parents]);
+    }
+  }
+
+  private findChildren(data: NzSafeAny, key: string, children: string[] = []): string[] {
+    const groupIds = Object.keys(data);
+    const child = (data[key] || []).filter((c: string) => groupIds.includes(c));
+    if (child && child.length > 0) {
+      return child.reduce((pre: string[], cur: string) => {
+        return Array.from(new Set([...pre, ...this.findChildren(data, cur, [...children, cur])]));
+      }, children);
+    }
+    return children;
+  }
 }

components/graph/graph-edge.component.ts

@@ -15,9 +15,9 @@ import {
   SimpleChanges,
   TemplateRef
 } from '@angular/core';
-import { curveBasis, line } from 'd3-shape';
+import { curveBasis, curveLinear, line } from 'd3-shape';
 import { take } from 'rxjs/operators';
-import { NzGraphEdge } from './interface';
+import { NzGraphEdge, NzGraphEdgeType } from './interface';
 
 @Component({
   selector: '[nz-graph-edge]',
@@ -34,6 +34,8 @@ import { NzGraphEdge } from './interface';
 })
 export class NzGraphEdgeComponent implements OnInit, OnChanges {
   @Input() edge!: NzGraphEdge;
+  @Input() edgeType?: NzGraphEdgeType | string;
+
   @Input() customTemplate?: TemplateRef<{
     $implicit: NzGraphEdge;
   }>;
@@ -44,10 +46,10 @@ export class NzGraphEdgeComponent implements OnInit, OnChanges {
   private el!: SVGGElement;
   private path!: SVGPathElement;
 
-  private readonly line = line<{ x: number; y: number }>()
+  private line = line<{ x: number; y: number }>()
     .x(d => d.x)
     .y(d => d.y)
-    .curve(curveBasis);
+    .curve(curveLinear);
 
   constructor(private elementRef: ElementRef<SVGGElement>, private ngZone: NgZone, private cdr: ChangeDetectorRef) {
     this.el = this.elementRef.nativeElement;
@@ -58,7 +60,7 @@ export class NzGraphEdgeComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { edge, customTemplate } = changes;
+    const { edge, customTemplate, edgeType } = changes;
     if (edge) {
       this.ngZone.onStable.pipe(take(1)).subscribe(() => {
         // Update path element if customTemplate set
@@ -70,6 +72,13 @@ export class NzGraphEdgeComponent implements OnInit, OnChanges {
         this.cdr.markForCheck();
       });
     }
+    if (edgeType) {
+      const type = this.edgeType === NzGraphEdgeType.CURVE ? curveBasis : curveLinear;
+      this.line = line<{ x: number; y: number }>()
+        .x(d => d.x)
+        .y(d => d.y)
+        .curve(type);
+    }
   }
 
   initElementStyle(): void {

components/graph/graph.component.ts

@@ -88,7 +88,13 @@ export function isDataSource(value: NzSafeAny): value is NzGraphData {
         <svg:g class="core" [attr.transform]="coreTransform(renderNode)">
           <svg:g class="nz-graph-edges">
             <ng-container *ngFor="let edge of renderNode.edges; trackBy: edgeTrackByFun">
-              <g class="nz-graph-edge" nz-graph-edge [edge]="edge" [customTemplate]="customGraphEdgeTemplate"></g>
+              <g
+                class="nz-graph-edge"
+                nz-graph-edge
+                [edge]="edge"
+                [edgeType]="nzGraphLayoutConfig?.defaultEdge?.type"
+                [customTemplate]="customGraphEdgeTemplate"
+              ></g>
             </ng-container>
           </svg:g>
 
@@ -203,7 +209,6 @@ export class NzGraphComponent implements OnInit, OnChanges, AfterViewInit, After
     const { nzAutoFit, nzRankDirection, nzGraphData, nzGraphLayoutConfig } = changes;
     if (nzGraphLayoutConfig) {
       this.layoutSetting = this.mergeConfig(nzGraphLayoutConfig.currentValue);
-      // Object.assign(this.layoutSetting, this.nzGraphLayoutSetting || {});
     }
 
     if (nzGraphData) {

components/graph/interface.ts

@@ -15,6 +15,11 @@ import {
 } from 'dagre-compound';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+export enum NzGraphEdgeType {
+  LINE = 'line',
+  CURVE = 'curve'
+}
+
 export interface NzGraphDataDef extends HierarchyGraphDef {
   nodes: NzGraphNodeDef[];
   edges: NzGraphEdgeDef[];
@@ -80,6 +85,9 @@ export interface NzGraphBaseLayout {
     labelOffset: number;
     maxLabelWidth: number;
   };
+  defaultEdge: {
+    type: NzGraphEdgeType | string; // Need to support extensions
+  };
 }
 
 export function nzTypeDefinition<T>(): (item: unknown) => T {

package.json

@@ -72,7 +72,7 @@
     "conventional-changelog-cli": "^2.1.1",
     "d3": "^6.3.1",
     "dagre": "^0.8.5",
-    "dagre-compound": "0.0.4",
+    "dagre-compound": "0.0.8",
     "detect-port": "^1.3.0",
     "fs-extra": "^9.0.1",
     "gulp": "^4.0.2",