Как прагматично вызывать Center и Fit In View на ngx-графике

Question

В этой демонстрационной версии ngx-graph под разделом Options есть кнопки для Center, Fit In View и т. Д. Я хотел бы реализовать их в своем решении. Тем не менее, я не могу найти документацию о том, как сделать эти звонки, и демо не предоставляет его источник.

В этом справочном документе перечислены наблюдаемые center $ и zoomToFit $, но до сих пор я не смог их успешно подписать или вызвать. Когда я проверяю с помощью Chrome Dev Tools, кажется, что эти элементы не существуют на проверяемом объекте.

Учитывая следующую (упрощенную) настройку графика, как я могу подключить обработчик (щелчка) кнопки вверху для запуска функции Center?

<button (click)="myGraph.xxxxxx?">Center</button>

<ngx-graph
  #myGraph
  [links]="links"
  [nodes]="nodes"
  [curve]="curve">

  <ng-template #defsTemplate>
    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #nodeTemplate let-node>
    <svg:g>
      <svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path>
      </svg:path>
        <svg:text class="edge-label" text-anchor="middle" style="fill: #000000;font-size: 13px">
          <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline" startOffset="50%">
            {{link.label}}
        </textPath>
      </svg:text>
    </svg:g>
  </ng-template>

</ngx-graph>

Answer 1

Я полагаю, что они представлены только в 6-й версии компонента ( NPM Link), поэтому сначала обновитесь до этого. Тогда вы можете сделать:

<button (click)="myGraph.zoomToFit() && myGraph.center()">Center</button>

Не уверен, что наблюдаемые работают (не проверял себя), но вы бы использовали их примерно так:

<ngx-graph [center$]="center$"></ngx-graph>

class MyComponent {
  center$ = new Subject<any>();
  doCenter() {
    // trigger center
    this.center$.next();
  }
}