Integration in to a JavaFX application

Developers
1

Hi there,

I try to integrate a bpmn-io script in to a JavaFX application. The code you can find here. The script draws a bpmn diagram. The user can mark nodes and arcs by overlays and the script shows the id’s of the marked nodes and arcs. The script also supports zooming. In a Firefox Browser it works well. You can test it with indexBrowser.html.

When I call this script by JavaFX (Main.java, BpmnViewer.java) the diagrams are shown also, but when I click on a node, the overlays for marking are shown with a different zoom factor and it is not possible to click on a arc.

Do you have an idea for solving this problems?

Christian

2

I am not a JavaFX expert. One thing you should figure out is how JavaFX is rendering the diagram. We require a decently modern Webbrowser due to the techniques we use.

Overlays for instance rely on a CSS transform that may not be available in JavaFX.

3

For configering the JavaFX webView component I need the size of the bpmn diagram.
Can I compute this with BPMN.IO tools?
Mannually, I search the highest bound values in the BPMNShape section of the bpmn xml file.

BR Christian

4

Try canvas.viewbox(). That gives you the size of the current viewport and the size of the diagram.

5

Hi,

in Firefox console I got the message: TypeError: canvas.viewbox is not a function

BR Christian

6

Well, it is available on my computer and on GitHub at least.

7

sorry, I called it at the wrong place.

Now I have
// create viewer
var BpmnViewer = window.BpmnJS;
var bpmnViewer = new BpmnViewer({
container: ‘#canvas’
});

// import diagram
bpmnViewer.importXML(xml, function(err) {

  if (err) {
    return console.error('could not import BPMN 2.0 diagram', err);
  }

  var canvas = bpmnViewer.get('canvas'),
      overlays = bpmnViewer.get('overlays'),
      eventBus = bpmnViewer.get('eventBus');

  alert("size "+canvas.viewbox());

and the alert produce “size [object Object]” , but I want the size of the actual viewbox.
What is my mistake?

8

… now I can send an alert with the values of viewbox.

function showBpmnDiagram(filePath, zoom){

  // import function
  function importXML(xml) {

    // create viewer
    var BpmnViewer = window.BpmnJS;
    var bpmnViewer = new BpmnViewer({
        container: '#canvas'
    });

    // import diagram
    bpmnViewer.importXML(xml, function(err) {

      if (err) {
        return console.error('could not import BPMN 2.0 diagram', err);
      }

      var canvas = bpmnViewer.get('canvas'),
          overlays = bpmnViewer.get('overlays'),
          eventBus = bpmnViewer.get('eventBus');

      var box = canvas.viewbox();
      alert("width: "+box.width+" height: "+box.height+" x: "+box.x+" y: "+box.y);
    });
  }

  // load external bpmn diagram file via AJAX and import it
  $.get(filePath, importXML, 'text');
};

I want to use the var box as a return value of showBpmnDiagram. Is this posible?

9

No, that is not possible. You need to provide a callback (because loading is asynchronous).

function showDiagram(..., callback) {
  
  // on done...
  callback(box);
}
10

Hi,

I assume, that the canvas.viewbox() gives the size of the actual window inside the browser. When I change the size of the browser, then the size of canvas.viewbox() is also changed. My diagram is bigger than my actual viewbox, following only a part of the diagram is painted inside the actual viewbox.

For my application I need the size of a box that covers the whole diagram. Do you know a convienient method?

Thanks Christian

11

Hi,

with some experiments I have found that
var box = canvas.viewbox().inner;

covers the whole diagram. Is this right?

12

That is correct. Documentation could be better for that part of the code :wink:.

13

By the way. Are you interested in providing a minimal publicly available example how to use bpmn-js with JavaFX? We could link that from the forum and our example repository and it could be a great contribution to the project.

14

Yes, I can do that, but at the moment my code has one, I hope the last, bug.

The script supports the marking of nodes, arcs, anotations, ect with:
var markNewLT = null, markNewLB = null, markNewRT = null, markNewRB = null;
var markOldLT = null, markOldLB = null, markOldRT = null, markOldRB = null;

  // event handler
  eventBus.on('element.click', function(e) {
    // elemente markieren begin
    markOldLT = markNewLT;
    markOldLB = markNewLB;
    markOldRT = markNewRT;
    markOldRB = markNewRB;
    if(markOldLT != null) { overlays.remove(markOldLT); }
    if(markOldLB != null) { overlays.remove(markOldLB); }
    if(markOldRT != null) { overlays.remove(markOldRT); }
    if(markOldRB != null) { overlays.remove(markOldRB); }
    markNewLT = overlays.add(e.element.id, 'note', {
      position: { top: 0, left: 0 },
      html: '<div style="width: 10px; height: 10px; background: red;"></div>'
    });
    markNewLB = overlays.add(e.element.id, 'note', {
      position: { bottom: 0, left: 0 },
      html: '<div style="width: 10px; height: 10px; background: red;"></div>'
    });
    markNewRT = overlays.add(e.element.id, 'note', {
      position: { top: 0, right: 0 },
      html: '<div style="width: 10px; height: 10px; background: red;"></div>'
    });
    markNewRB = overlays.add(e.element.id, 'note', {
      position: { bottom: 0, right: 0 },
      html: '<div style="width: 10px; height: 10px; background: red;"></div>'
    });
    // elemente markieren end

This works well in the firefox browser, but in my JavaFX application nodes, anotations, swimlines, ect. are marked, but no arcs. I think the reason is, that an arc is a line and has either no width or no height. I assume by rendering the diagram in JavaFX it can not detect objects with no width or no height. To check this, please send me the a link to the code where the detecting is managed.

Thanks, Christian

15

Hi Nikku,

here is the code of my viewer application. The zip includes a README with remarks and hints.
You can publish it in your example collection. Please inform me when it is published. Then I will delete the link.

Thanks, Christian