ng-zorro-antd/fesm2015/ng-zorro-antd-graph.mjs.map

An enterprise-class UI components based on Ant Design and Angular

{"version":3,"file":"ng-zorro-antd-graph.mjs","sources":["../../components/graph/interface.ts","../../components/graph/data-source/graph-data-source.ts","../../components/graph/graph-defs.component.ts","../../components/graph/graph-edge.component.ts","../../components/graph/graph-edge.directive.ts","../../components/graph/graph-group-node.directive.ts","../../components/graph/core/minimap.ts","../../components/graph/graph-minimap.component.ts","../../components/graph/graph.ts","../../components/graph/graph-node.component.ts","../../components/graph/graph-node.directive.ts","../../components/graph/core/utils.ts","../../components/graph/graph-zoom.directive.ts","../../components/graph/graph.component.ts","../../components/graph/graph.module.ts","../../components/graph/public-api.ts","../../components/graph/ng-zorro-antd-graph.ts"],"sourcesContent":["/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  HierarchyBaseEdgeInfo,\n  HierarchyBaseNodeInfo,\n  HierarchyGraphDef,\n  HierarchyGraphEdgeDef,\n  HierarchyGraphNodeDef,\n  HierarchyGraphNodeInfo,\n  HierarchyGraphOption,\n  LayoutConfig\n} from 'dagre-compound';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nexport enum NzGraphEdgeType {\n  LINE = 'line',\n  CURVE = 'curve'\n}\n\nexport interface NzGraphDataDef extends HierarchyGraphDef {\n  nodes: NzGraphNodeDef[];\n  edges: NzGraphEdgeDef[];\n}\n\nexport interface NzGraphNodeDef extends HierarchyGraphNodeDef {\n  label?: string;\n}\n\nexport interface NzGraphEdgeDef extends HierarchyGraphEdgeDef {\n  label?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface NzGraphOption extends HierarchyGraphOption {}\nexport declare type NzRankDirection = 'TB' | 'BT' | 'LR' | 'RL';\n\nexport interface NzGraphGroupNode extends HierarchyGraphNodeInfo {\n  nodes: Array<NzGraphNode | NzGraphGroupNode>;\n  edges: NzGraphEdge[];\n  [key: string]: NzSafeAny;\n}\n\nexport interface NzGraphNode extends HierarchyBaseNodeInfo {\n  id: NzSafeAny;\n  // TODO\n  name: NzSafeAny;\n  label?: string;\n  [key: string]: NzSafeAny;\n}\n\nexport interface NzGraphEdge extends HierarchyBaseEdgeInfo {\n  id: NzSafeAny;\n  v: NzSafeAny;\n  w: NzSafeAny;\n  label?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface NzLayoutSetting extends LayoutConfig {}\n\nexport interface NzGraphBaseLayout {\n  layout: {\n    nodeSep: number;\n    rankSep: number;\n    edgeSep: number;\n  };\n  subScene: {\n    paddingTop: number;\n    paddingBottom: number;\n    paddingLeft: number;\n    paddingRight: number;\n    labelHeight: number;\n  };\n  defaultCompoundNode: {\n    width: number;\n    height: number;\n    maxLabelWidth: number;\n  };\n  defaultNode: {\n    width: number;\n    height: number;\n    labelOffset: number;\n    maxLabelWidth: number;\n  };\n  defaultEdge: {\n    type: NzGraphEdgeType | string; // Need to support extensions\n  };\n}\n\nexport function nzTypeDefinition<T>(): (item: unknown) => T {\n  return item => item as T;\n}\n\n/* eslint-disable no-shadow */\nexport type NzDeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Array<infer U>\n    ? Array<NzDeepPartial<U>>\n    : T[P] extends ReadonlyArray<infer U>\n    ? ReadonlyArray<NzDeepPartial<U>>\n    : NzDeepPartial<T[P]>;\n};\n\nexport type NzGraphLayoutConfig = NzDeepPartial<NzGraphBaseLayout>;\nexport const NZ_GRAPH_LAYOUT_SETTING: NzLayoutSetting = {\n  graph: {\n    meta: {\n      nodeSep: 50,\n      rankSep: 50,\n      edgeSep: 5\n    }\n  },\n  subScene: {\n    meta: {\n      paddingTop: 20,\n      paddingBottom: 20,\n      paddingLeft: 20,\n      paddingRight: 20,\n      labelHeight: 20\n    }\n  },\n  nodeSize: {\n    meta: {\n      width: 50,\n      maxLabelWidth: 0,\n      height: 50\n    },\n    node: {\n      width: 50,\n      height: 50,\n      labelOffset: 10,\n      maxLabelWidth: 40\n    },\n    bridge: {\n      width: 5,\n      height: 5,\n      radius: 2,\n      labelOffset: 0\n    }\n  }\n};\n\n// Zoom interface\n\nexport interface NzZoomTransform {\n  x: number;\n  y: number;\n  k: number;\n}\n\nexport interface RelativePositionInfo {\n  topLeft: { x: number; y: number };\n  bottomRight: { x: number; y: number };\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { NzGraphDataDef } from '../interface';\nimport { NzGraphBaseSource } from './base-graph-source';\n\nexport class NzGraphData implements NzGraphBaseSource<NzGraphDataDef, string> {\n  private _data = new BehaviorSubject<NzGraphDataDef>({} as NzGraphDataDef);\n  dataSource!: NzGraphDataDef;\n  /** A selection model with multi-selection to track expansion status. */\n  expansionModel: SelectionModel<string> = new SelectionModel<string>(true);\n\n  /** Toggles one single data node's expanded/collapsed state. */\n  toggle(nodeName: string): void {\n    this.expansionModel.toggle(nodeName);\n  }\n\n  /** Expands one single data node. */\n  expand(nodeName: string): void {\n    const compound = this.dataSource.compound || {};\n    const toBeSelected = this.findParents(compound, nodeName, [nodeName]);\n    this.expansionModel.select(...toBeSelected);\n  }\n\n  /** Collapses one single data node. */\n  collapse(nodeName: string): void {\n    const compound = this.dataSource.compound || {};\n    const toBeDeselected = this.findChildren(compound, nodeName, [nodeName]);\n    this.expansionModel.deselect(...toBeDeselected);\n  }\n\n  /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */\n  isExpanded(nodeName: string): boolean {\n    return this.expansionModel.isSelected(nodeName);\n  }\n\n  /** Collapse all dataNodes in the tree. */\n  collapseAll(): void {\n    this.expansionModel.clear();\n  }\n\n  expandAll(): void {\n    this.expansionModel.select(...Object.keys(this._data.value.compound || {}));\n  }\n\n  setData(data: NzGraphDataDef): void {\n    this.expansionModel?.clear();\n    this.dataSource = data;\n    this._data.next(data);\n  }\n\n  constructor(source?: NzGraphDataDef) {\n    if (source) {\n      this.expansionModel?.clear();\n      this.dataSource = source;\n      this._data.next(source);\n    }\n  }\n\n  connect(): Observable<NzGraphDataDef> {\n    const changes = [this._data, this.expansionModel.changed];\n    return merge(...changes).pipe(map(() => this._data.value));\n  }\n\n  disconnect(): void {\n    // do nothing for now\n  }\n\n  private findParents(data: NzSafeAny, key: string, parents: string[] = []): string[] {\n    const parent = Object.keys(data)\n      .filter(d => d !== key)\n      .find(d => data[d].includes(key));\n    if (!parent) {\n      return parents;\n    } else {\n      return this.findParents(data, parent, [parent, ...parents]);\n    }\n  }\n\n  private findChildren(data: NzSafeAny, key: string, children: string[] = []): string[] {\n    const groupIds = Object.keys(data);\n    const child = (data[key] || []).filter((c: string) => groupIds.includes(c));\n    if (child && child.length > 0) {\n      return child.reduce(\n        (pre: string[], cur: string) =>\n          Array.from(new Set([...pre, ...this.findChildren(data, cur, [...children, cur])])),\n        children\n      );\n    }\n    return children;\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'svg:defs[nz-graph-defs]',\n  template: `\n    <svg:marker\n      class=\"nz-graph-edge-marker\"\n      id=\"edge-end-arrow\"\n      viewBox=\"1 0 20 20\"\n      refX=\"8\"\n      refY=\"3.5\"\n      markerWidth=\"10\"\n      markerHeight=\"10\"\n      orient=\"auto\"\n    >\n      <svg:polygon points=\"0 0, 10 3.5, 0 7\"></svg:polygon>\n    </svg:marker>\n  `\n})\nexport class NzGraphDefsComponent {\n  constructor() {}\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  SimpleChanges,\n  TemplateRef\n} from '@angular/core';\nimport { take } from 'rxjs/operators';\n\nimport { curveBasis, curveLinear, line } from 'd3-shape';\n\nimport { NzGraphEdge, NzGraphEdgeType } from './interface';\n\n@Component({\n  selector: '[nz-graph-edge]',\n  template: `\n    <ng-container\n      *ngIf=\"customTemplate\"\n      [ngTemplateOutlet]=\"customTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: edge }\"\n    ></ng-container>\n    <svg:g *ngIf=\"!customTemplate\">\n      <path class=\"nz-graph-edge-line\" [attr.marker-end]=\"'url(#edge-end-arrow)'\"></path>\n      <svg:text class=\"nz-graph-edge-text\" text-anchor=\"middle\" dy=\"10\" *ngIf=\"edge.label\">\n        <textPath [attr.href]=\"'#' + id\" startOffset=\"50%\">{{ edge.label }}</textPath>\n      </svg:text>\n    </svg:g>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class NzGraphEdgeComponent implements OnInit, OnChanges {\n  @Input() edge!: NzGraphEdge;\n  @Input() edgeType?: NzGraphEdgeType | string;\n\n  @Input() customTemplate?: TemplateRef<{\n    $implicit: NzGraphEdge;\n  }>;\n\n  public get id(): string {\n    return this.edge?.id || `${this.edge.v}--${this.edge.w}`;\n  }\n  private el!: SVGGElement;\n  private path!: SVGPathElement;\n\n  private line = line<{ x: number; y: number }>()\n    .x(d => d.x)\n    .y(d => d.y)\n    .curve(curveLinear);\n\n  constructor(private elementRef: ElementRef<SVGGElement>, private ngZone: NgZone, private cdr: ChangeDetectorRef) {\n    this.el = this.elementRef.nativeElement;\n  }\n\n  ngOnInit(): void {\n    this.initElementStyle();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { edge, customTemplate, edgeType } = changes;\n    if (edge) {\n      this.ngZone.onStable.pipe(take(1)).subscribe(() => {\n        // Update path element if customTemplate set\n        if (customTemplate) {\n          this.initElementStyle();\n        }\n\n        this.setLine();\n        this.cdr.markForCheck();\n      });\n    }\n    if (edgeType) {\n      const type = this.edgeType === NzGraphEdgeType.LINE ? curveLinear : curveBasis;\n      this.line = line<{ x: number; y: number }>()\n        .x(d => d.x)\n        .y(d => d.y)\n        .curve(type);\n    }\n  }\n\n  initElementStyle(): void {\n    this.path = this.el.querySelector('path')!;\n    this.setElementData();\n  }\n\n  setLine(): void {\n    this.setPath(this.line(this.edge.points)!);\n  }\n\n  setPath(d: string): void {\n    this.path.setAttribute('d', d);\n  }\n\n  setElementData(): void {\n    if (!this.path) {\n      return;\n    }\n    this.path.setAttribute('id', this.id);\n    this.path.setAttribute('data-edge', this.id);\n    this.path.setAttribute('data-v', `${this.edge.v}`);\n    this.path.setAttribute('data-w', `${this.edge.w}`);\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[nzGraphEdge]',\n  exportAs: 'nzGraphEdge'\n})\nexport class NzGraphEdgeDirective {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[nzGraphGroupNode]',\n  exportAs: 'nzGraphGroupNode'\n})\nexport class NzGraphGroupNodeDirective {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NgZone } from '@angular/core';\n\nimport { drag } from 'd3-drag';\nimport { pointer, select } from 'd3-selection';\nimport { ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3-zoom';\n\nimport { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { NzZoomTransform } from '../interface';\n\nconst FRAC_VIEWPOINT_AREA = 0.8;\n\nexport class Minimap {\n  private canvas: HTMLCanvasElement;\n  private canvasRect: ClientRect;\n  private canvasBuffer: HTMLCanvasElement;\n  private minimapSvg: SVGSVGElement;\n  private viewpoint: SVGRectElement;\n  private scaleMinimap!: number;\n  private scaleMain!: number;\n  private translate!: [number, number];\n  private viewpointCoord: { x: number; y: number };\n  private minimapSize!: { width: number; height: number };\n\n  private unlisteners: VoidFunction[] = [];\n\n  constructor(\n    private ngZone: NgZone,\n    private svg: SVGSVGElement,\n    private zoomG: SVGGElement,\n    private mainZoom: ZoomBehavior<NzSafeAny, NzSafeAny>,\n    private minimap: HTMLElement,\n    private maxWidth: number,\n    private labelPadding: number\n  ) {\n    const minimapElement = select(minimap);\n    const minimapSvgElement = minimapElement.select('svg');\n    const viewpointElement = minimapSvgElement.select('rect');\n    this.canvas = minimapElement.select('canvas.viewport').node() as HTMLCanvasElement;\n    this.canvasRect = this.canvas.getBoundingClientRect();\n\n    const handleEvent = (event: NzSafeAny): void => {\n      const minimapOffset = this.minimapOffset();\n      const width = Number(viewpointElement.attr('width'));\n      const height = Number(viewpointElement.attr('height'));\n      const clickCoords = pointer(event, minimapSvgElement.node() as NzSafeAny);\n      this.viewpointCoord.x = clickCoords[0] - width / 2 - minimapOffset.x;\n      this.viewpointCoord.y = clickCoords[1] - height / 2 - minimapOffset.y;\n      this.updateViewpoint();\n    };\n    this.viewpointCoord = { x: 0, y: 0 };\n    const subject = drag().subject(Object);\n    const dragEvent = subject.on('drag', handleEvent);\n    viewpointElement.datum(this.viewpointCoord as NzSafeAny).call(dragEvent as NzSafeAny);\n\n    // Make the minimap clickable.\n    minimapSvgElement.on('click', event => {\n      if ((event as Event).defaultPrevented) {\n        // This click was part of a drag event, so suppress it.\n        return;\n      }\n      handleEvent(event);\n    });\n    this.unlisteners.push(() => {\n      subject.on('drag', null);\n      minimapSvgElement.on('click', null);\n    });\n    this.viewpoint = viewpointElement.node() as SVGRectElement;\n    this.minimapSvg = minimapSvgElement.node() as SVGSVGElement;\n    this.canvasBuffer = minimapElement.select('canvas.buffer').node() as HTMLCanvasElement;\n    this.update();\n  }\n\n  destroy(): void {\n    while (this.unlisteners.length) {\n      this.unlisteners.pop()!();\n    }\n  }\n\n  private minimapOffset(): { x: number; y: number } {\n    return {\n      x: (this.canvasRect.width - this.minimapSize.width) / 2,\n      y: (this.canvasRect.height - this.minimapSize.height) / 2\n    };\n  }\n\n  private updateViewpoint(): void {\n    // Update the coordinates of the viewpoint rectangle.\n    select(this.viewpoint).attr('x', this.viewpointCoord.x).attr('y', this.viewpointCoord.y);\n    // Update the translation vector of the main svg to reflect the\n    // new viewpoint.\n    const mainX = (-this.viewpointCoord.x * this.scaleMain) / this.scaleMinimap;\n    const mainY = (-this.viewpointCoord.y * this.scaleMain) / this.scaleMinimap;\n    select(this.svg).call(this.mainZoom.transform, zoomIdentity.translate(mainX, mainY).scale(this.scaleMain));\n  }\n\n  update(): void {\n    let sceneSize = null;\n    try {\n      // Get the size of the entire scene.\n      sceneSize = this.zoomG.getBBox();\n      if (sceneSize.width === 0) {\n        // There is no scene anymore. We have been detached from the dom.\n        return;\n      }\n    } catch (e) {\n      // Firefox produced NS_ERROR_FAILURE if we have been\n      // detached from the dom.\n      return;\n    }\n\n    const svgSelection = select(this.svg);\n    // Read all the style rules in the document and embed them into the svg.\n    // The svg needs to be self contained, i.e. all the style rules need to be\n    // embedded so the canvas output matches the origin.\n    let stylesText = '';\n\n    for (const k of new Array(document.styleSheets.length).keys()) {\n      try {\n        const cssRules =\n          (document.styleSheets[k] as NzSafeAny).cssRules || (document.styleSheets[k] as NzSafeAny).rules;\n        if (cssRules == null) {\n          continue;\n        }\n        for (const i of new Array(cssRules.length).keys()) {\n          // Remove tf-* selectors from the styles.\n          stylesText += `${cssRules[i].cssText.replace(/ ?tf-[\\w-]+ ?/g, '')}\\n`;\n        }\n      } catch (e: NzSafeAny) {\n        if (e.name !== 'SecurityError') {\n          throw e;\n        }\n      }\n    }\n\n    // Temporarily add the css rules to the main svg.\n    const svgStyle = svgSelection.append('style');\n    svgStyle.text(stylesText);\n\n    // Temporarily remove the zoom/pan transform from the main svg since we\n    // want the minimap to show a zoomed-out and centered view.\n    const zoomGSelection = select(this.zoomG);\n    const zoomTransform = zoomGSelection.attr('transform');\n    zoomGSelection.attr('transform', null);\n\n    // Since we add padding, account for that here.\n    sceneSize.height += this.labelPadding * 2;\n    sceneSize.width += this.labelPadding * 2;\n\n    // Temporarily assign an explicit width/height to the main svg, since\n    // it doesn't have one (uses flex-box), but we need it for the canvas\n    // to work.\n    svgSelection.attr('width', sceneSize.width).attr('height', sceneSize.height);\n\n    // Since the content inside the svg changed (e.g. a node was expanded),\n    // the aspect ratio have also changed. Thus, we need to update the scale\n    // factor of the minimap. The scale factor is determined such that both\n    // the width and height of the minimap are <= maximum specified w/h.\n    this.scaleMinimap = this.maxWidth / Math.max(sceneSize.width, sceneSize.height);\n    this.minimapSize = {\n      width: sceneSize.width * this.scaleMinimap,\n      height: sceneSize.height * this.scaleMinimap\n    };\n\n    const minimapOffset = this.minimapOffset();\n\n    // Update the size of the minimap's svg, the buffer canvas and the\n    // viewpoint rect.\n    select(this.minimapSvg).attr(this.minimapSize as NzSafeAny);\n    select(this.canvasBuffer).attr(this.minimapSize as NzSafeAny);\n\n    if (this.translate != null && this.zoom != null) {\n      // Update the viewpoint rectangle shape since the aspect ratio of the\n      // map has changed.\n      this.ngZone.runOutsideAngular(() => reqAnimFrame(() => this.zoom()));\n    }\n\n    // Serialize the main svg to a string which will be used as the rendering\n    // content for the canvas.\n    const svgXml = new XMLSerializer().serializeToString(this.svg);\n\n    // Now that the svg is serialized for rendering, remove the temporarily\n    // assigned styles, explicit width and height and bring back the pan/zoom\n    // transform.\n    svgStyle.remove();\n    svgSelection.attr('width', '100%').attr('height', '100%');\n\n    zoomGSelection.attr('transform', zoomTransform);\n\n    const image = document.createElement('img');\n    const onLoad = (): void => {\n      // Draw the svg content onto the buffer canvas.\n      const context = this.canvasBuffer.getContext('2d');\n      context!.clearRect(0, 0, this.canvasBuffer.width, this.canvasBuffer.height);\n\n      context!.drawImage(image, minimapOffset.x, minimapOffset.y, this.minimapSize.width, this.minimapSize.height);\n\n      this.ngZone.runOutsideAngular(() => {\n        reqAnimFrame(() => {\n          // Hide the old canvas and show the new buffer canvas.\n          select(this.canvasBuffer).style('display', 'block');\n          select(this.canvas).style('display', 'none');\n          // Swap the two canvases.\n          [this.canvas, this.canvasBuffer] = [this.canvasBuffer, this.canvas];\n        });\n      });\n    };\n\n    image.addEventListener('load', onLoad);\n    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;\n\n    this.unlisteners.push(() => {\n      image.removeEventListener('load', onLoad);\n    });\n  }\n\n  /**\n   * Handles changes in zooming/panning. Should be called from the main svg\n   * to notify that a zoom/pan was performed and this minimap will update it's\n   * viewpoint rectangle.\n   *\n   * @param transform\n   */\n  zoom(transform?: ZoomTransform | NzZoomTransform): void {\n    if (this.scaleMinimap == null) {\n      // Scene is not ready yet.\n      return;\n    }\n    // Update the new translate and scale params, only if specified.\n    if (transform) {\n      this.translate = [transform.x, transform.y];\n      this.scaleMain = transform.k;\n    }\n\n    // Update the location of the viewpoint rectangle.\n    const svgRect = this.svg.getBoundingClientRect();\n    const minimapOffset = this.minimapOffset();\n    const viewpointSelection = select(this.viewpoint);\n    this.viewpointCoord.x = (-this.translate[0] * this.scaleMinimap) / this.scaleMain;\n    this.viewpointCoord.y = (-this.translate[1] * this.scaleMinimap) / this.scaleMain;\n    const viewpointWidth = (svgRect.width * this.scaleMinimap) / this.scaleMain;\n    const viewpointHeight = (svgRect.height * this.scaleMinimap) / this.scaleMain;\n    viewpointSelection\n      .attr('x', this.viewpointCoord.x + minimapOffset.x)\n      .attr('y', this.viewpointCoord.y + minimapOffset.y)\n      .attr('width', viewpointWidth)\n      .attr('height', viewpointHeight);\n    // Show/hide the minimap depending on the viewpoint area as fraction of the\n    // whole minimap.\n    const mapWidth = this.minimapSize.width;\n    const mapHeight = this.minimapSize.height;\n    const x = this.viewpointCoord.x;\n    const y = this.viewpointCoord.y;\n    const w = Math.min(Math.max(0, x + viewpointWidth), mapWidth) - Math.min(Math.max(0, x), mapWidth);\n    const h = Math.min(Math.max(0, y + viewpointHeight), mapHeight) - Math.min(Math.max(0, y), mapHeight);\n    const fracIntersect = (w * h) / (mapWidth * mapHeight);\n    if (fracIntersect < FRAC_VIEWPOINT_AREA) {\n      this.minimap.classList.remove('hidden');\n    } else {\n      this.minimap.classList.add('hidden');\n    }\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, ElementRef, NgZone, OnDestroy } from '@angular/core';\n\nimport { ZoomBehavior } from 'd3-zoom';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { Minimap } from './core/minimap';\nimport { NzZoomTransform } from './interface';\n\n@Component({\n  selector: 'nz-graph-minimap',\n  template: `\n    <svg>\n      <defs>\n        <filter id=\"minimapDropShadow\" x=\"-20%\" y=\"-20%\" width=\"150%\" height=\"150%\">\n          <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"1\" dy=\"1\"></feOffset>\n          <feColorMatrix\n            result=\"matrixOut\"\n            in=\"offOut\"\n            type=\"matrix\"\n            values=\"0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0\"\n          ></feColorMatrix>\n          <feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"2\"></feGaussianBlur>\n          <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\"></feBlend>\n        </filter>\n      </defs>\n      <rect></rect>\n    </svg>\n    <canvas class=\"viewport\"></canvas>\n    <!-- Additional canvas to use as buffer to avoid flickering between updates -->\n    <canvas class=\"buffer\"></canvas>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.nz-graph-minimap]': 'true'\n  }\n})\nexport class NzGraphMinimapComponent implements OnDestroy {\n  minimap?: Minimap;\n  constructor(private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}\n\n  ngOnDestroy(): void {\n    this.minimap?.destroy();\n  }\n\n  init(containerEle: ElementRef, zoomBehavior: ZoomBehavior<NzSafeAny, NzSafeAny>): void {\n    const svgEle = containerEle.nativeElement.querySelector('svg');\n    const zoomEle = containerEle.nativeElement.querySelector('svg > g');\n    this.minimap = new Minimap(this.ngZone, svgEle, zoomEle, zoomBehavior, this.elementRef.nativeElement, 150, 0);\n  }\n\n  zoom(transform: NzZoomTransform): void {\n    this.minimap?.zoom(transform);\n  }\n\n  update(): void {\n    this.minimap?.update();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { EventEmitter } from '@angular/core';\n\nimport { NzGraphGroupNode, NzGraphNode } from './interface';\n\n/**\n * https://angular.io/errors/NG3003\n * An intermediate interface for {@link NzGraphComponent} & {@link NzGraphNodeComponent}\n */\nexport abstract class NzGraph {\n  abstract nzNodeClick: EventEmitter<NzGraphNode | NzGraphGroupNode>;\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, group, query, style } from '@angular/animations';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Input,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n  TemplateRef\n} from '@angular/core';\nimport { fromEvent, Observable, Subject } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { InputBoolean } from 'ng-zorro-antd/core/util';\n\nimport { NzGraph } from './graph';\nimport { NzGraphGroupNode, NzGraphNode } from './interface';\n\ninterface Info {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n@Component({\n  selector: '[nz-graph-node]',\n  template: `\n    <svg:g>\n      <ng-container\n        *ngIf=\"customTemplate\"\n        [ngTemplateOutlet]=\"customTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: node }\"\n      ></ng-container>\n      <ng-container *ngIf=\"!customTemplate\">\n        <svg:rect class=\"nz-graph-node-rect\" [attr.width]=\"node.width\" [attr.height]=\"node.height\"></svg:rect>\n        <svg:text x=\"10\" y=\"20\">{{ node.id || node.name }}</svg:text>\n      </ng-container>\n    </svg:g>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[id]': 'node.id || node.name',\n    '[class.nz-graph-node-expanded]': 'node.expanded',\n    '[class.nz-graph-group-node]': 'node.type===0',\n    '[class.nz-graph-base-node]': 'node.type===1'\n  }\n})\nexport class NzGraphNodeComponent implements OnInit, OnDestroy {\n  @Input() node!: NzGraphNode | NzGraphGroupNode;\n  @Input() @InputBoolean() noAnimation?: boolean;\n  @Input() customTemplate?: TemplateRef<{\n    $implicit: NzGraphNode | NzGraphGroupNode;\n  }>;\n\n  animationInfo: Info | null = null;\n  initialState = true;\n\n  private destroy$ = new Subject<void>();\n  private animationPlayer: AnimationPlayer | null = null;\n\n  constructor(\n    private ngZone: NgZone,\n    private el: ElementRef<HTMLElement>,\n    private builder: AnimationBuilder,\n    private renderer2: Renderer2,\n    private graphComponent: NzGraph\n  ) {}\n\n  ngOnInit(): void {\n    this.ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this.el.nativeElement, 'click')\n        .pipe(\n          filter(event => {\n            event.preventDefault();\n            return this.graphComponent.nzNodeClick.observers.length > 0;\n          }),\n          takeUntil(this.destroy$)\n        )\n        .subscribe(() => {\n          // Re-enter the Angular zone and run the change detection only if there're any `nzNodeClick` listeners,\n          // e.g.: `<nz-graph (nzNodeClick)=\"...\"></nz-graph>`.\n          this.ngZone.run(() => this.graphComponent.nzNodeClick.emit(this.node));\n        });\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n  }\n\n  makeAnimation(): Observable<void> {\n    const cur = this.getAnimationInfo();\n    if (this.animationPlayer) {\n      this.animationPlayer.destroy();\n    }\n    let animationFactory: AnimationFactory;\n    const pre = { ...this.animationInfo } as Info;\n\n    if (this.initialState) {\n      animationFactory = this.builder.build([\n        style({ transform: `translate(${cur.x}px, ${cur.y}px)` }),\n        query('g', [\n          style({\n            width: `${cur.width}px`,\n            height: `${cur.height}px`\n          })\n        ])\n      ]);\n      this.initialState = false;\n    } else {\n      animationFactory = this.builder.build([\n        style({ transform: `translate(${pre!.x}px, ${pre!.y}px)` }),\n        query('g', [\n          style({\n            width: `${pre!.width}px`,\n            height: `${pre!.height}px`\n          })\n        ]),\n        group([\n          query('g', [\n            animate(\n              '150ms ease-out',\n              style({\n                width: `${cur.width}px`,\n                height: `${cur.height}px`\n              })\n            )\n          ]),\n          animate('150ms ease-out', style({ transform: `translate(${cur.x}px, ${cur.y}px)` }))\n        ])\n      ]);\n    }\n    this.animationInfo = cur;\n    this.animationPlayer = animationFactory.create(this.el.nativeElement);\n    this.animationPlayer.play();\n    const done$ = new Subject<void>();\n    this.animationPlayer.onDone(() => {\n      // Need this for canvas for now.\n      this.renderer2.setAttribute(this.el.nativeElement, 'transform', `translate(${cur.x}, ${cur.y})`);\n      done$.next();\n      done$.complete();\n    });\n    return done$.asObservable();\n  }\n\n  makeNoAnimation(): void {\n    const cur = this.getAnimationInfo();\n    // Need this for canvas for now.\n    this.renderer2.setAttribute(this.el.nativeElement, 'transform', `translate(${cur.x}, ${cur.y})`);\n  }\n\n  getAnimationInfo(): Info {\n    const { x, y } = this.nodeTransform();\n    return {\n      width: this.node.width,\n      height: this.node.height,\n      x,\n      y\n    };\n  }\n\n  nodeTransform(): { x: number; y: number } {\n    const x = this.computeCXPositionOfNodeShape() - this.node.width / 2;\n    const y = this.node.y - this.node.height / 2;\n    return { x, y };\n  }\n\n  computeCXPositionOfNodeShape(): number {\n    if ((this.node as NzGraphGroupNode).expanded) {\n      return this.node.x;\n    }\n    return this.node.x - this.node.width / 2 + this.node.coreBox.width / 2;\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[nzGraphNode]',\n  exportAs: 'nzGraphNode'\n})\nexport class NzGraphNodeDirective {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NzZoomTransform } from '../interface';\n\n/**\n * Calculate position and scale\n *\n * @param containerEle\n * @param targetEle\n * @param scale: if scale is set, skip calculate scale value\n */\nexport const calculateTransform = (\n  containerEle: SVGSVGElement,\n  targetEle: SVGGElement,\n  scale?: number\n): NzZoomTransform | null => {\n  const containerEleSize = containerEle.getBoundingClientRect();\n  const targetEleSize = targetEle.getBBox();\n  if (!targetEleSize.width) {\n    // There is no g element anymore.\n    return null;\n  }\n\n  // TODO\n  // leave some place when re-scale\n  const scaleUnit = (containerEleSize.width - 48) / containerEleSize.width;\n  const k =\n    scale ||\n    Math.min(containerEleSize.width / targetEleSize.width, containerEleSize.height / targetEleSize.height, 1) *\n      scaleUnit;\n  const x = (containerEleSize.width - targetEleSize.width * k) / 2;\n  const y = (containerEleSize.height - targetEleSize.height * k) / 2;\n  return {\n    x,\n    y,\n    k\n  };\n};\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output\n} from '@angular/core';\nimport { Subject } from 'rxjs';\n\nimport { select, Selection } from 'd3-selection';\nimport { transition as d3Transition } from 'd3-transition';\nimport { zoom, ZoomBehavior, zoomIdentity, zoomTransform } from 'd3-zoom';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { calculateTransform } from './core/utils';\nimport { NzZoomTransform, RelativePositionInfo } from './interface';\nSelection.bind('transition', d3Transition);\n\n@Directive({\n  selector: '[nz-graph-zoom]',\n  exportAs: 'nzGraphZoom'\n})\nexport class NzGraphZoomDirective implements OnDestroy, AfterViewInit {\n  @Input() nzZoom?: number;\n  @Input() nzMinZoom = 0.1;\n  @Input() nzMaxZoom = 10;\n\n  @Output() readonly nzTransformEvent: EventEmitter<NzZoomTransform> = new EventEmitter();\n  @Output() readonly nzZoomChange: EventEmitter<number> = new EventEmitter();\n\n  svgSelection!: Selection<NzSafeAny, NzSafeAny, NzSafeAny, NzSafeAny>;\n  zoomBehavior!: ZoomBehavior<NzSafeAny, NzSafeAny>;\n\n  // TODO\n  // Support svg element only now\n  svgElement!: SVGSVGElement;\n  gZoomElement!: SVGGElement;\n\n  private destroy$ = new Subject<void>();\n\n  constructor(private element: ElementRef, private cdr: ChangeDetectorRef) {}\n\n  ngAfterViewInit(): void {\n    this.bind();\n  }\n\n  ngOnDestroy(): void {\n    this.unbind();\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  bind(): void {\n    this.svgElement = this.element.nativeElement.querySelector('svg') as SVGSVGElement;\n    this.gZoomElement = this.element.nativeElement.querySelector('svg > g') as SVGGElement;\n    const { width, height } = this.element.nativeElement.getBoundingClientRect();\n    this.svgSelection = select(this.svgElement);\n    this.zoomBehavior = zoom()\n      .extent([\n        [0, 0],\n        [width, height]\n      ])\n      .scaleExtent([this.nzMinZoom, this.nzMaxZoom])\n      .on('zoom', e => {\n        this.zoomed(e);\n      });\n    this.svgSelection.call(this.zoomBehavior, zoomIdentity.translate(0, 0).scale(this.nzZoom || 1));\n    // Init with nzZoom\n    this.reScale(0, this.nzZoom);\n  }\n\n  unbind(): void {\n    // Destroy listener\n    this.svgSelection?.interrupt().selectAll('*').interrupt();\n    if (this.zoomBehavior) {\n      this.zoomBehavior.on('end', null).on('zoom', null);\n    }\n  }\n\n  // Methods\n  fitCenter(duration: number = 0): void {\n    this.reScale(duration);\n  }\n\n  focus(id: NzSafeAny, duration: number = 0): void {\n    // Make sure this node is under SVG container\n    if (!this.svgElement.getElementById(`${id}`)) {\n      return;\n    }\n\n    const node = this.svgElement.getElementById(`${id}`) as SVGGElement;\n    const svgRect = this.svgElement.getBoundingClientRect();\n    const position = this.getRelativePositionInfo(node);\n    const svgTransform = zoomTransform(this.svgElement);\n\n    const centerX = (position.topLeft.x + position.bottomRight.x) / 2;\n    const centerY = (position.topLeft.y + position.bottomRight.y) / 2;\n    const dx = svgRect.left + svgRect.width / 2 - centerX;\n    const dy = svgRect.top + svgRect.height / 2 - centerY;\n\n    this.svgSelection\n      .transition()\n      .duration(duration)\n      .call(this.zoomBehavior.translateBy, dx / svgTransform.k, dy / svgTransform.k);\n  }\n\n  /**\n   * Handle zoom event\n   *\n   * @param transform\n   */\n  private zoomed({ transform }: NzSafeAny): void {\n    const { x, y, k } = transform;\n    // Update g element transform\n    (this.gZoomElement as SVGGElement).setAttribute('transform', `translate(${x}, ${y})scale(${k})`);\n    this.nzZoom = k;\n    this.nzZoomChange.emit(this.nzZoom);\n    this.nzTransformEvent.emit(transform);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Scale with zoom and duration\n   *\n   * @param duration\n   * @param scale\n   * @private\n   */\n  private reScale(duration: number, scale?: number): void {\n    const transform = calculateTransform(this.svgElement, this.gZoomElement, scale);\n    if (!transform) {\n      return;\n    }\n    const { x, y, k } = transform;\n    const zTransform = zoomIdentity.translate(x, y).scale(Math.max(k, this.nzMinZoom));\n    this.svgSelection\n      .transition()\n      .duration(duration)\n      .call(this.zoomBehavior.transform, zTransform)\n      .on('end.fitted', () => {\n        this.zoomBehavior.on('end.fitted', null);\n      });\n  }\n\n  private getRelativePositionInfo(node: SVGGElement): RelativePositionInfo {\n    const nodeBox = node.getBBox();\n    const nodeCtm = node.getScreenCTM();\n    let pointTL = this.svgElement.createSVGPoint();\n    let pointBR = this.svgElement.createSVGPoint();\n\n    pointTL.x = nodeBox.x;\n    pointTL.y = nodeBox.y;\n    pointBR.x = nodeBox.x + nodeBox.width;\n    pointBR.y = nodeBox.y + nodeBox.height;\n    pointTL = pointTL.matrixTransform(nodeCtm!);\n    pointBR = pointBR.matrixTransform(nodeCtm!);\n    return {\n      topLeft: pointTL,\n      bottomRight: pointBR\n    };\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  AfterContentChecked,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Host,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  SimpleChanges,\n  TemplateRef,\n  ViewChildren,\n  ViewEncapsulation\n} from '@angular/core';\nimport { forkJoin, Observable, ReplaySubject, Subject, Subscription } from 'rxjs';\nimport { finalize, take, takeUntil } from 'rxjs/operators';\n\nimport { buildGraph } from 'dagre-compound';\n\nimport { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';\nimport { cancelRequestAnimationFrame } from 'ng-zorro-antd/core/polyfill';\nimport { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { InputBoolean } from 'ng-zorro-antd/core/util';\n\nimport { calculateTransform } from './core/utils';\nimport { NzGraphData } from './data-source/graph-data-source';\nimport { NzGraph } from './graph';\nimport { NzGraphEdgeDirective } from './graph-edge.directive';\nimport { NzGraphGroupNodeDirective } from './graph-group-node.directive';\nimport { NzGraphNodeComponent } from './graph-node.component';\nimport { NzGraphNodeDirective } from './graph-node.directive';\nimport { NzGraphZoomDirective } from './graph-zoom.directive';\nimport {\n  NzGraphDataDef,\n  NzGraphEdge,\n  NzGraphEdgeDef,\n  NzGraphGroupNode,\n  NzGraphLayoutConfig,\n  NzGraphNode,\n  NzGraphNodeDef,\n  NzGraphOption,\n  NzLayoutSetting,\n  NzRankDirection,\n  nzTypeDefinition,\n  NZ_GRAPH_LAYOUT_SETTING\n} from './interface';\n\n/** Checks whether an object is a data source. */\nexport function isDataSource(value: NzSafeAny): value is NzGraphData {\n  // Check if the value is a DataSource by observing if it has a connect function. Cannot\n  // be checked as an `instanceof DataSource` since people could create their own sources\n  // that match the interface, but don't extend DataSource.\n  return value && typeof value.connect === 'function';\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'nz-graph',\n  exportAs: 'nzGraph',\n  providers: [{ provide: NzGraph, useExisting: NzGraphComponent }],\n  template: `\n    <ng-content></ng-content>\n    <svg width=\"100%\" height=\"100%\">\n      <svg:defs nz-graph-defs></svg:defs>\n      <svg:g [attr.transform]=\"transformStyle\">\n        <ng-container\n          [ngTemplateOutlet]=\"groupTemplate\"\n          [ngTemplateOutletContext]=\"{ renderNode: renderInfo, type: 'root' }\"\n        ></ng-container>\n      </svg:g>\n    </svg>\n\n    <ng-template #groupTemplate let-renderNode=\"renderNode\" let-type=\"type\">\n      <svg:g [attr.transform]=\"type === 'sub' ? subGraphTransform(renderNode) : null\">\n        <svg:g class=\"core\" [attr.transform]=\"coreTransform(renderNode)\">\n          <svg:g class=\"nz-graph-edges\">\n            <ng-container *ngFor=\"let edge of $asNzGraphEdges(renderNode.edges); trackBy: edgeTrackByFun\">\n              <g\n                class=\"nz-graph-edge\"\n                nz-graph-edge\n                [edge]=\"edge\"\n                [edgeType]=\"nzGraphLayoutConfig?.defaultEdge?.type\"\n                [customTemplate]=\"customGraphEdgeTemplate\"\n              ></g>\n            </ng-container>\n          </svg:g>\n\n          <svg:g class=\"nz-graph-nodes\">\n            <ng-container *ngFor=\"let node of typedNodes(renderNode.nodes); trackBy: nodeTrackByFun\">\n              <g\n                *ngIf=\"node.type === 1\"\n                class=\"nz-graph-node\"\n                nz-graph-node\n                [node]=\"node\"\n                [customTemplate]=\"nodeTemplate\"\n              ></g>\n              <g\n                *ngIf=\"node.type === 0\"\n                class=\"nz-graph-node\"\n                nz-graph-node\n                [node]=\"node\"\n                [customTemplate]=\"groupNodeTemplate\"\n              ></g>\n              <ng-container\n                *ngIf=\"node.expanded\"\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ renderNode: node, type: 'sub' }\"\n              ></ng-container>\n            </ng-container>\n          </svg:g>\n        </svg:g>\n      </svg:g>\n    </ng-template>\n  `,\n  host: {\n    '[class.nz-graph]': 'true',\n    '[class.nz-graph-auto-size]': 'nzAutoSize'\n  }\n})\nexport class NzGraphComponent implements OnInit, OnChanges, AfterContentChecked, OnDestroy, NzGraph {\n  static ngAcceptInputType_nzAutoSize: BooleanInput;\n\n  @ViewChildren(NzGraphNodeComponent, { read: ElementRef }) listOfNodeElement!: QueryList<ElementRef>;\n  @ViewChildren(NzGraphNodeComponent) listOfNodeComponent!: QueryList<NzGraphNodeComponent>;\n\n  @ContentChild(NzGraphNodeDirective, { static: true, read: TemplateRef }) nodeTemplate?: TemplateRef<{\n    $implicit: NzGraphNode;\n  }>;\n  @ContentChild(NzGraphGroupNodeDirective, { static: true, read: TemplateRef }) groupNodeTemplate?: TemplateRef<{\n    $implicit: NzGraphGroupNode;\n  }>;\n  @ContentChild(NzGraphEdgeDirective, { static: true, read: TemplateRef }) customGraphEdgeTemplate?: TemplateRef<{\n    $implicit: NzGraphEdge;\n  }>;\n  /**\n   * Provides a stream containing the latest data array to render.\n   * Data source can be an observable of NzGraphData, or a NzGraphData to render.\n   */\n  @Input() nzGraphData!: NzGraphData;\n  @Input() nzRankDirection: NzRankDirection = 'LR';\n  @Input() nzGraphLayoutConfig?: NzGraphLayoutConfig;\n  @Input() @InputBoolean() nzAutoSize = false;\n\n  @Output() readonly nzGraphInitialized = new EventEmitter<NzGraphComponent>();\n  @Output() readonly nzGraphRendered = new EventEmitter<NzGraphComponent>();\n  @Output() readonly nzNodeClick: EventEmitter<NzGraphNode | NzGraphGroupNode> = new EventEmitter();\n\n  requestId: number = -1;\n  transformStyle = '';\n  graphRenderedSubject$ = new ReplaySubject<void>(1);\n  renderInfo: NzGraphGroupNode = { labelHeight: 0 } as NzGraphGroupNode;\n  mapOfNodeAttr: { [key: string]: NzGraphNodeDef } = {};\n  mapOfEdgeAttr: { [key: string]: NzGraphEdgeDef } = {};\n  zoom = 1;\n\n  public readonly typedNodes = nzTypeDefinition<Array<NzGraphNode | NzGraphGroupNode>>();\n  private dataSource?: NzGraphData;\n  private layoutSetting: NzLayoutSetting = NZ_GRAPH_LAYOUT_SETTING;\n  /** Data subscription */\n  private _dataSubscription?: Subscription | null;\n  private destroy$ = new Subject<void>();\n\n  nodeTrackByFun = (_: number, node: NzGraphNode | NzGraphGroupNode): string => node.name;\n  edgeTrackByFun = (_: number, edge: NzGraphEdge): string => `${edge.v}-${edge.w}`;\n\n  subGraphTransform = (node: NzGraphGroupNode): string => {\n    const x = node.x - node.coreBox.width / 2.0;\n    const y = node.y - node.height / 2.0 + node.paddingTop;\n    return `translate(${x}, ${y})`;\n  };\n\n  $asNzGraphEdges = (data: unknown): NzGraphEdge[] => data as NzGraphEdge[];\n\n  coreTransform = (node: NzGraphGroupNode): string => `translate(0, ${node.parentNodeName ? node.labelHeight : 0})`;\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef,\n    @Host() @Optional() public noAnimation?: NzNoAnimationDirective,\n    @Optional() public nzGraphZoom?: NzGraphZoomDirective\n  ) {}\n\n  ngOnInit(): void {\n    this.graphRenderedSubject$.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {\n      // Only zooming is not set, move graph to center\n      if (!this.nzGraphZoom) {\n        this.fitCenter();\n      }\n      this.nzGraphInitialized.emit(this);\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { nzAutoFit, nzRankDirection, nzGraphData, nzGraphLayoutConfig } = changes;\n    if (nzGraphLayoutConfig) {\n      this.layoutSetting = this.mergeConfig(nzGraphLayoutConfig.currentValue);\n    }\n\n    if (nzGraphData) {\n      if (this.dataSource !== this.nzGraphData) {\n        this._switchDataSource(this.nzGraphData);\n      }\n    }\n\n    if ((nzAutoFit && !nzAutoFit.firstChange) || (nzRankDirection && !nzRankDirection.firstChange)) {\n      // Render graph\n      if (this.dataSource!.dataSource) {\n        this.drawGraph(this.dataSource!.dataSource, {\n          rankDirection: this.nzRankDirection,\n          expanded: this.dataSource!.expansionModel.selected || []\n        }).then(() => {\n          this.cdr.markForCheck();\n        });\n      }\n    }\n\n    this.cdr.markForCheck();\n  }\n\n  ngAfterContentChecked(): void {\n    if (this.dataSource && !this._dataSubscription) {\n      this.observeRenderChanges();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n\n    if (this.dataSource && typeof this.dataSource.disconnect === 'function') {\n      this.dataSource.disconnect();\n    }\n\n    if (this._dataSubscription) {\n      this._dataSubscription.unsubscribe();\n      this._dataSubscription = null;\n    }\n    cancelRequestAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Move graph to center and scale automatically\n   */\n  fitCenter(): void {\n    const { x, y, k } = calculateTransform(\n      this.elementRef.nativeElement.querySelector('svg'),\n      this.elementRef.nativeElement.querySelector('svg > g')\n    )!;\n    if (k) {\n      this.zoom = k;\n      this.transformStyle = `translate(${x}, ${y})scale(${k})`;\n    }\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * re-Draw graph\n   *\n   * @param data\n   * @param options\n   * @param needResize\n   */\n  drawGraph(data: NzGraphDataDef, options: NzGraphOption, needResize: boolean = false): Promise<void> {\n    return new Promise(resolve => {\n      this.requestId = requestAnimationFrame(() => {\n        const renderInfo = this.buildGraphInfo(data, options);\n        // TODO\n        // Need better performance\n        this.renderInfo = renderInfo;\n        this.cdr.markForCheck();\n        this.requestId = requestAnimationFrame(() => {\n          this.drawNodes(!this.noAnimation?.nzNoAnimation).then(() => {\n            // Update element\n            this.cdr.markForCheck();\n            if (needResize) {\n              this.resizeNodeSize().then(() => {\n                const dataSource: NzGraphDataDef = this.dataSource!.dataSource!;\n                this.drawGraph(dataSource, options, false).then(() => resolve());\n              });\n            } else {\n              this.graphRenderedSubject$.next();\n              this.nzGraphRendered.emit(this);\n              resolve();\n            }\n          });\n        });\n      });\n      this.cdr.markForCheck();\n    });\n  }\n\n  /**\n   * Redraw all nodes\n   *\n   * @param animate\n   */\n  drawNodes(animate: boolean = true): Promise<void> {\n    return new Promise(resolve => {\n      if (animate) {\n        this.makeNodesAnimation().subscribe(() => {\n          resolve();\n        });\n      } else {\n        this.listOfNodeComponent.map(node => {\n          node.makeNoAnimation();\n        });\n        resolve();\n      }\n    });\n  }\n\n  private resizeNodeSize(): Promise<void> {\n    return new Promise(resolve => {\n      const dataSource: NzGraphDataDef = this.dataSource!.dataSource!;\n      let scale = this.nzGraphZoom?.nzZoom || this.zoom || 1;\n      this.listOfNodeElement.forEach(nodeEle => {\n        const contentEle = nodeEle.nativeElement;\n        if (contentEle) {\n          let width: number;\n          let height: number;\n          // Check if foreignObject is set\n          const clientRect = contentEle.querySelector('foreignObject > :first-child')?.getBound