"out of sight" edge drawing not working

[stoldorma]

Describe the bug Edges that are out of sight are not drawn (See screenshots)

To Reproduce

1. Use my code below
2. Have small view (ex. [view]="[300, 300]") and drag to the side --> edges not drawn
3. Have bigger view (ex. [view]="[1000, 1000]") edges that were not drawn before are drawn now

Expected behavior Edges are always drawn, even if not (yet) visible

Screenshots Small view, dragged:

Big view (same spot, edges now there):

My Code app.components.html

<div class="debug-border">
  <ngx-graph [draggingEnabled]="false"
             [enableZoom]="false"
             [nodes]="nodes"
             [links]="links"
             [view]="[3000, 3000]">

    <ng-template #nodeTemplate let-node>
      <svg class="my-node"
           (click)="onNodeClick(node.id)">
        <g class="node"></g>
        <rect [attr.width]="node.dimension.width"
              [attr.height]="node.dimension.height"
              [attr.fill]="'#00AEEF'"></rect>
        <text alignment-baseline="central"
              [attr.fill]="'#FFFFFF'"
              [attr.x]="10"
              [attr.y]="node.dimension.height / 2">
          {{node.label}}
        </text>
      </svg>
    </ng-template>

    <ng-template #linkTemplate let-link>
      <svg>
        <g class="edge">
          <path class="line" stroke-width="2" d=""></path>
          <text class="edge-label" text-anchor="middle">
            <textPath class="text-path"
                      [attr.href]="'#' + link.id"
                      [style.dominant-baseline]="link.dominantBaseline"
                      startOffset="50%">
              {{ toLinkLabel(link) }}
            </textPath>
          </text>
        </g>
      </svg>
    </ng-template>

  </ngx-graph>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public nodes = [
    {
      id: 'RMA',
      label: 'Run my Accounts'
    },
    {
      id: 'ACC',
      label: 'Accountant'
    },
    {
      id: 'MGMT',
      label: 'Management oder Buchhaltung'
    },
    {
      id: 'M',
      label: 'Management'
    },
    {
      id: 'BUHA',
      label: 'Beleg genehmigen'
    },
    {
      id: 'HEAD',
      label: 'Head of Accountant'
    },
    {
      id: 'MARCOM',
      label: 'MARCOM'
    }
  ];

  public links = [
    {
      id: 'edge1',
      source: 'RMA',
      target: 'ACC',
      direction: 'r',
    },
    {
      id: 'edge2',
      source: 'MGMT',
      target: 'M',
      label: 'Zahlung > 20000',
      direction: 'r',
    },
    {
      id: 'edge3',
      source: 'MGMT',
      target: 'BUHA',
      label: 'Keine Zahlung oder Zahlung < 20000',
      direction: 'r',
    },
    {
      id: 'edge4',
      source: 'ACC',
      target: 'HEAD',
      direction: 'r',
    },
    {
      id: 'edge5',
      source: 'ACC',
      target: 'RMA',
      direction: 'l',
    },
    {
      id: 'edge6',
      source: 'HEAD',
      target: 'MGMT',
      direction: 'r',
    },
    {
      id: 'edge7',
      source: 'HEAD',
      target: 'ACC',
      direction: 'l',
    },
    {
      id: 'edge8',
      source: 'HEAD',
      target: 'MARCOM',
      direction: 'r',
    },
    {
      id: 'edge9',
      source: 'M',
      target: 'ACC',
      direction: 'l',
    },
    {
      id: 'edge10',
      source: 'M',
      target: 'BUHA',
      direction: 'r',
    },
    {
      id: 'edge11',
      source: 'MARCOM',
      target: 'MGMT',
      direction: 'r',
    },
    {
      id: 'edge12',
      source: 'MARCOM',
      target: 'ACC',
      direction: 'l',
    }
  ];

  public onNodeClick(nodeId: string): void {
    console.log(nodeId);
  }

  public toLinkLabel(link): string {
    let linkLabel = '';

    if (link.direction === 'l') {
      linkLabel += '← ';
    }

    if (link.label) {
      linkLabel += link.label;
    }

    if (link.direction === 'r') {
      linkLabel += ' →';
    }

    return linkLabel;
  }
}

ngx-graph version ^7.1.1

[Vijay-Nirmal]

In our case, this happened only when we add custom template for link (#linktemplate)

[minogin]

Have the same issue when using custom link template

[adiyosefi]

I had the same issue. workaround with css: .ngx-charts { .links { .link-group > svg { overflow: auto; } } }

[dd-coder05]

In our case, this happened only when we add custom template for link (#linktemplate)

Can you help me how can i solve this problem. In my case link section has same source and target value. Then, it's not showing any edge