Bpmn Navigated Viewer in modal

Developers
1

Hello guys, I am having problems when trying to use the function

viewer.get('canvas').zoom.('fit-viewport').

Without the modal it works great, but when I put it at the modal, i get a console error

"attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".".

Does anyone know what can I do for this to work? Thanks a lot!

2

What is the context? Are you using bpmn-js with some framework? Usually this error occurs when you create an instance of bpmn-js without it actually being present in the DOM.

3

Well, I am using bpmn-js inside liferay platform. There is a list of bpmn files, and when I click in a href=“openModal()”, I generate a new modal with the ‘#canvas’ inside and I make the request to the url of that process to be shown in the modal. When I don’t put the zoom(‘fit-viewport’), it works great, but it without this functionality…

4

it works great, but it without this functionality…

Without it what?

Can you share some code so I can understand how you are using bpmn-js?

5 
var BpmnNavigatedViewer = window.BpmnJS;

function xmlrequest(e, id) {
	var xhr = new XMLHttpRequest();
	var viewer = new BpmnNavigatedViewer({ container: "#canvas" });
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			viewer.importXML(xhr.response, function(err) {
		    	if (!err) {
		        	console.log('success!'); 
		        	$("#canvas").show();
		                //viewer.get('canvas').zoom('fit-viewport');  <-- Line giving me the error
		        } else {
		            console.log('something went wrong:', err);
		        	$("#canvas").hide();
		        }
		   });
		}
	}; 
	
	xhr.open('GET', "<%=themeDisplay.getURLPortal()%>" + "/" + e, true);
	xhr.send(null);
}

If I add viewer.get('canvas').zoom('fit-viewport'); to the code, the modal that I open appears in blank, and if I scroll or if I click and drag inside, the start event appears and gives me the console error ("matrix(NaN,NaN,NaN,NaN,…").

Without it what?

Without the funcionality of fitting the viewport.

My modal code, where the canvas is, is like this:

<div id="modal">
	<div class="modal-header">
	 	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	 	<h2 id="myModalLabel" style="color: black; margin-top: 0; " >Test</h2>
	 	<h3 style="color: gray;" >Type</h3>
	</div>	
	<div class="modal-body" style="max-height: 640px !important">
	    <div class="row span12 canvas">
			<div class="test" id="canvas" style="height: 600px; display:none"></div>
		</div>
	</div>
	<div class="modal-footer">
        <button type="button" class="btn btn-default" href="#!">Download</button>
    </div>
</div>
6

My guess is that importing the XML before calling $("#canvas").show(); is the issue. Try making the canvas visible before importing so it is in the DOM.

7

Thank you! It worked! Actually, i had to put a timeout of 500ms before calling the show() function, because it was showing before importing… Thanks a lot.

1 Like