How to zoom and enable drag, mouse wheel?

Hi folks.
I’m working on a Vaadin/GWT bpmn-engine based project, and I’m evaluating some viewers/modelers. This project looks awesome! I start to embbed the viewer on my application, and its working as expected.
I want to add suport for move (drag) the whole the diagram, and use zoom, as the application demo does with the modeler. How can I do that?
Where can I find the API documentation about the BpmnViewer methods, etc?

Sorry for this noob question.

Bellow, a screenshot of the embbeded viewe:

Hello @EduFrazao,

to use the dragging and zoom functionality you have to replace the bpmn-viewer for the bpmn-navigated-viewer and you probably want as well to rename it on your app.js file.

<script src="bower_components/bpmn-js/dist/bpmn-navigated-viewer.js"></script>


var BpmnNavigatedViewer = window.BpmnJS;
var viewer = new BpmnNavigatedViewer({ container: '#canvas' });


1 Like

Hi @EduFrazao ,

I’m also working on a Vaadin based project and would also like to embbed the viewer. I’m stuck on an empty panel after loading the resources through the following class:

@JavaScript({ "bpmn-navigated-viewer.js", "", "jquery.js", "show-model.js" })
public class ShowModel extends AbstractJavaScriptComponent {

    public ShowModel(String xml) {

        getState().xml = xml;

    protected ShowModelState getState() {

        return (ShowModelState) super.getState();

with the following JS:

demo_ShowModel = function() {
	var BpmnNavigatedViewer = window.BpmnJS;
	var xml = this.getState().xml; // load in my BPMN 2.0 xml
	var viewer = new BpmnNavigatedViewer({ container: '#canvas' });
	viewer.importXML(xml, function(err) {
	  if (err) {
	    console.log('error rendering', err);
	  } else {

How did you get it to work on your side?

Thank you for your help!

Hi @ChristianStolle. Your code seems to be correct. Do you check de client-side debugger?

I’m using a different approach here. I will need to interact in a different way with the diagram, so, I decide to create a formal GWT ClientSide component to handle the viewer and the editor…


public class BPMNViewerComponent extends AbstractComponent {

private static final long serialVersionUID = 1L;

private static final String BPMN_RESOURCE_NAME = "source";

public BPMNViewerComponent(Resource resource) {
	setResource(BPMN_RESOURCE_NAME, resource);

protected BPMNViewerComponentState getState() {
	return (BPMNViewerComponentState) super.getState();


public class BPMNViewerComponentConnector extends AbstractComponentConnector {

private static final long serialVersionUID = 1L;

protected VBPMNViewerWidget createWidget() {
	return GWT.create(VBPMNViewerWidget.class);

public VBPMNViewerWidget getWidget() {
	return (VBPMNViewerWidget) super.getWidget();

public BPMNViewerComponentState getState() {
	return (BPMNViewerComponentState) super.getState();

public void onStateChanged(StateChangeEvent stateChangeEvent) {


public class VBPMNViewerWidget extends FlowPanel {

private SimplePanel displayNode;

private Logger logger = Logger.getLogger(VBPMNViewerWidget.class.getName());

public VBPMNViewerWidget() {

private void createDisplayNode() {
	displayNode = new SimplePanel();

public void setBPMNURL(String url) {
	if(url !=  null) {
		logger.log(Level.INFO, "Loading BPMN Model: " + url);
		loadBPMNDiagram(url, displayNode.getElement().getId());

private native void loadBPMNDiagram(String url, String nodeId) /*-{
	var BpmnViewer = $wnd.BpmnJS;
	var $j =$wnd.jQuery; 
	var viewer = new BpmnNavigatedViewer({
		container: '#'+nodeId,
		width: '100%',
		height: '100%' 

	$j.get(url, function(diagram) {
		viewer.importXML(diagram, function(err) {
	  		if (!err) {
	    		viewer.get('canvas').zoom('fit-viewport', true);
	  		} else {
	    		console.log('something went wrong:', err);
	}, 'text');



For now its pretty simple, but using a GWT client-side component, you will have more flexiblity.

Hi @EduFrazao.
I try to implement inside Vaadinapplication.
Have you complete the implementation of GWT Warapper ?