topology.component.ts

import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';

import * as d3 from 'd3';
import { BehaviorSubject, Subject, delay, filter, switchMap, takeUntil, tap } from 'rxjs';

@Component({
  selector: 'app-topology',
  templateUrl: './topology.component.html',
  styleUrls: ['./topology.component.scss']
})
export class TopologyComponent implements TopologyCommandReceiver {
  ...
  
  private renderGraphEventSubject = new BehaviorSubject<boolean>(false);

  private shouldDisplayControlPoints = false;
  displayControlPointsSubject = new BehaviorSubject<boolean>(this.shouldDisplayControlPoints);
  displayControlPoints$ = this.displayControlPointsSubject.asObservable();

  constructor(
    private cd: ChangeDetectorRef
  ) {
    this.displayControlPoints$.subscribe((val) => {
      if (val) {
        this.shouldDisplayControlPoints = !this.shouldDisplayControlPoints;
      }
    });
  }
  
  ngAfterViewInit(): void {
    ...
    
    // Initialize the SVG
    let svg = this.initSvg();

    // Subscribe events for graph
    this.handleGraphEvents(svg);

    this.cd.detectChanges();
  }

  private initSvg() {
    ...
  }

  private renderNodes(
    svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
    ...
  ) {
    ...
  }

  private renderEdges(
    svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
    ...,
    shouldDisplayControlPoints: boolean
  ) {
    ...
    
    if (shouldDisplayControlPoints) {
      this.renderControlpoints(svg, x0, y0, x1, y1, controlPointX, controlPointY, isHorizontal);
    }
    
    ...
  }

  private renderControlpoints(
    svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
    x0: number, y0: number, x1: number, y1: number, controlPointX: number, controlPointY: number, isHorizontal: boolean
  ) {
    ...
  }

  private handleGraphEvents(svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>) {
    // Render graph events
    this.renderGraphEventSubject.pipe(
      takeUntil(this.destroyedSubject)
    ).subscribe((shouldRender: boolean) => {
      //nodes
      this.nodes = this.getNodes(this.edges);
      if (this.nodes.length !== 0) {
        this.renderNodes(svg, this.nodes, this.edges);
    
        //edges
        this.renderEdges(svg, this.nodes, this.edges, shouldRender);
      }
    });
  }
    
  private getNodes(...) {
    ...
  }

  renderAssistantItems(topologyLegendItem: TopologyController) {
    // Fetch new edges
    this.displayControlPointsSubject.next(true);
  }
}