How to center diagram in Viewer?

[Helen_Makhnivchyk]

Hi everybody!
Im trying to center the chart, using viewer.get('canvas').zoom('fit-viewport', 'auto'), but it doesnt work.

HTML:
<div class="h-100 card-with-shadow p-p-0">
  <div class="w-100 h-100 p-d-flex p-jc-between">
    <div #container class="w-100 h-100"></div>
  </div>
</div>
---------------------------------------------------------------
TS:
  @ViewChild('container', { static: true }) container: ElementRef;

 this.viewer = new BpmnModeler.Viewer({
      container:  this.container.nativeElement,
    })
    this.viewer.importXML(this.diagram);
    this.viewer.get('canvas').zoom('fit-viewport', 'auto')

Can somebody help me with this?

[philippfromme]

Note that importXML is async. You need to wait for the diagram to have rendered.

const { warnings } = await this.viewer.importXML(this.diagram);

this.viewer.get('canvas').zoom('fit-viewport', 'auto');

[Helen_Makhnivchyk]

Ok, Im waiting for importXML, but after this diagram not displayed at all

  from(this.viewer.importXML(this.diagram)).subscribe(res=>{
      this.viewer.get('canvas').zoom('fit-viewport')
    })

Maybe I need to put smth else instead of ‘canvas’? What does it ‘canvas’ mean?

[philippfromme]

Please have a look at this example: Canvas Center Diagram Example - CodeSandbox

[Helen_Makhnivchyk]

Your solution works properly. But my issue is that Im using this viewer in p-dialog tag(primeng).

<svg>
<g class="viewport" transform="matrix(NaN NaN NaN NaN NaN NaN)">

I`m getting these NaNs
Do you know reason of this?

[philippfromme]

This happens when the bpmn-js instance isn’t actually attached to the DOM. I guess you’re attaching it after the import.

[Helen_Makhnivchyk]

Yes, Im attaching bpmnViewer when I show modal window

My algorithm

1. Rendering all page
2. Click on ‘show modal window’
3. from(this.viewer.importXML(this.diagram)).subscribe((res) => { this.viewer.get('canvas').zoom('fit-viewport'); });
   4.getting <g class="viewport" transform="matrix(NaN NaN NaN NaN NaN NaN)">

How can I fix this? I need to show diagram only in modal window(which is shown by click)

[philippfromme]

Without the code, I cannot help you. As I said, before importing the XML the modeler should be attached to the DOM.

[Helen_Makhnivchyk]

HTML:

<p-dialog
[(visible)]="dialogVisible"
[style]="{ width: '70vw' }"
[maximizable]="false"
[contentStyle]="{ height: '60vh' }"
[modal]="true"
[draggable]="false"
>
<div class="h-100 card-with-shadow p-p-0">
  <div class="w-100 h-100 p-d-flex p-jc-between">
    <div #container2 class="w-100 h-100"></div>
  </div>
</div>

</p-dialog>

TS:

  @ViewChild('container2', { static: true }) container2: ElementRef;
  ngAfterContentInit() {
    this.viewer = new BpmnModeler.Viewer({
      container: this.container2.nativeElement,
    });
    
  showModal() {
    from(this.viewer.importXML(this.diagram)).subscribe((res) => {
      this.dialogVisible = true;
      this.viewer.get('canvas').zoom('fit-viewport');
    });
  }
  }

[philippfromme]

Not sure what this from().subscribe() construct is. Have you tried doing this with plain JavaScript?

[Helen_Makhnivchyk]

I`m using rxjs in my project. It is for asynchronous operations

[philippfromme]

Please try using plain JavaScript and see whether the problem persists.

[Helen_Makhnivchyk]

Problem with NaNs is still there
using right now this function:

  async show() {
    await this.viewer.importXML(this.diagram)
    this.viewer.get('canvas').zoom('fit-viewport');
    this.dialogVisible = !this.dialogVisible
  }