Destroying the existing diagram when loading a second into the same canvas

Users
1

I pretty much have my app working where I need to be able to dynamically load diagrams into the canvas, replacing the existing one.

However, each time I load a new (or the same) diagram, the hover and out events that are logged for each actual event increases by one.

This leads me to believe that either I am doing something dumb with the eventBus variable, bpmnViewer.clear() is not doing what I think it is (i.e. destroying the entire existing diagram, including the eventBus) or (maybe more likely) I do not understand the objectorientedness of javascript.

I have cut down my code to only the essential to illustrate the issue:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BPMN test</title>
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.1.2/dist/assets/bpmn-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.1.2/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.1.2/dist/assets/bpmn-js.css" />
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/bpmn-js@18.1.2/dist/bpmn-navigated-viewer.development.js"></script>
<style>
html, body
{
  height:							100%;
  padding:						0;
  margin:							0;
}


#canvas
{
  height:							100%;
}

.console
{
  position:						fixed;
  z-index:						103;
  bottom:							10px;
  left:								10px;
  width:							400px;
  height:							300px;
}

.console textarea
{
	width:							100%;
	height:							100%;

}
</style>
</head>

<body>

<div id="canvas"></div>

<div id="terminal" class="console">
<p><a href="javascript:openDiagram('diagram_1.bpmn');">Load diagram 1</a> <a href="javascript:openDiagram('diagram_2.bpmn');">Load diagram 2</a></p>
<textarea id="js-console"></textarea>
</div>

<script>
var diagramName = "diagram_1.bpmn";
var eventBus;
var terminal = document.querySelector('#js-console');
var bpmnViewer = new BpmnJS
(
  {
    container: '#canvas'
  }
);

openDiagram(diagramName);

async function openDiagram(diagramURL)
{	
	var bpmnXML = await $.get(diagramURL);
  bpmnViewer.clear();
  try
  {
    await bpmnViewer.importXML(bpmnXML);
    var canvas = bpmnViewer.get('canvas');
    eventBus = bpmnViewer.get('eventBus');
    var events = 
    [
			'element.hover',
			'element.out'
    ];

    events.forEach
    (
      function(event)
      {
        eventBus.on
        (
          event, function(e)
          {
            bpmnlog(event, 'on', e.element.id);
          }
        );
      }
    );
  }
  catch (err)
  {
    console.log('Could not import diagram', err);
  }
}

function bpmnlog()
{
  terminal.value += Array.prototype.slice.call(arguments).map
  (
    function(e)
    {
      return String(e);
    }
  ).join(' ');
  terminal.value += '\n';
  terminal.scrollTop = terminal.scrollHeight;
}
</script>
</body>
</html>

What am I missing here? Any pointers in the right direction would be greatly appreciated.

2

Well, you register these events every time again when you load a diagram. Consider to register them outside of the openDiagram(...) call and your fine :moneybag:.

As you observed BpmnViewer#clear() is not destroying something, it clears the canvas. If you look to destroy the viewer, use BpmnViewer#destroy() and re-instantiate the viewer on every openDiagram(...). You don’t need that, though.

1 Like
3

Thanks! I added destruction and reinstatiation of the viewer within openDiagram, which both does what I want, and it also feels like the interface is snappier, although this could be my imagination.

Is it a correct assumption that I could run into memory issues after many iterations of clearing the canvas and loading new diagrams, without destroying the viewer every now and then? (Not that it matters, everything works as expected now, I am just curious.)

4

No, this is actually how you should do it. Reuse an existing instance of the viewer whenever possible.

1 Like
5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.