feat(module:graph): support edge style with line and curev

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;
+
   @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",