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?
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');
1 Like
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?
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?
This happens when the bpmn-js instance isn’t actually attached to the DOM. I guess you’re attaching it after the import.
1 Like
Yes, Im attaching bpmnViewer when I show modal window
My algorithm
Rendering all page
Click on ‘show modal window’
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)
Without the code, I cannot help you. As I said, before importing the XML the modeler should be attached to the DOM.
1 Like
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');
});
}
}
Not sure what this from().subscribe()
construct is. Have you tried doing this with plain JavaScript?
1 Like
I`m using rxjs in my project. It is for asynchronous operations
Please try using plain JavaScript and see whether the problem persists.
2 Likes
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
}
system
Closed
November 18, 2022, 1:24pm
19
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.