How to zoom and enable drag, mouse wheel?

Developers
1

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:

2

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.

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

app.js

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

Cheers,
Ricardo

1 Like
3

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", "bpmn-navigated-viewer.js.map", "jquery.js", "show-model.js" })
public class ShowModel extends AbstractJavaScriptComponent {

    public ShowModel(String xml) {

        getState().xml = xml;
    }

    @Override
    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 {
	    console.log('rendered');
	  }
	});
}

How did you get it to work on your side?

Thank you for your help!

4

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…

Example:

@JavaScript({
"app://VAADIN/jslibs/jquery/jquery.min.js",
"app://VAADIN/jslibs/jquery-mousewheel/jquery.mousewheel.min.js",
"app://VAADIN/jslibs/lodash/lodash.min.js",
"app://VAADIN/jslibs/sax/lib/sax.js",
"app://VAADIN/jslibs/Snap.svg/snap.svg-min.js",
"app://VAADIN/jslibs/bpmn-js/bpmn-navigated-viewer.js"
 })
@StyleSheet({
"app://VAADIN/jslibs/bpmn-js/assets/diagram-js.css",
"app://VAADIN/jslibs/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css"
})
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);
}

@Override
protected BPMNViewerComponentState getState() {
	return (BPMNViewerComponentState) super.getState();
}

}

@Connect(BPMNViewerComponent.class)
public class BPMNViewerComponentConnector extends AbstractComponentConnector {

private static final long serialVersionUID = 1L;

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

@Override
public VBPMNViewerWidget getWidget() {
	return (VBPMNViewerWidget) super.getWidget();
}

@Override
public BPMNViewerComponentState getState() {
	return (BPMNViewerComponentState) super.getState();
}

@Override
public void onStateChanged(StateChangeEvent stateChangeEvent) {
	super.onStateChanged(stateChangeEvent);
	getWidget().setBPMNURL(getResourceUrl(BPMNViewerComponentState.RESOURCE_NAME));
}

}


public class VBPMNViewerWidget extends FlowPanel {

private SimplePanel displayNode;

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

public VBPMNViewerWidget() {
	setWidth("100%");
	setHeight("100%");
	
	createDisplayNode();
}

private void createDisplayNode() {
	displayNode = new SimplePanel();
	displayNode.getElement().setId("VBPMNViewerWidgetContainer");
	displayNode.setWidth("100%");
	displayNode.setHeight("100%");
	add(displayNode);
}

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.

5

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