NavigableViewer error

Developers
1

I have a NavigableViewer in a Polymer 3 template, and am getting errors when trying to move the diagram. I suspect that I may be missing a npm package?

Here is my code:

import {PolymerElement,html} from '@polymer/polymer/polymer-element.js';
import Modeler from 'bpmn-js/lib/Modeler';
import Viewer from 'bpmn-js/lib/Viewer';
import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer';

class BpmnTemplate extends PolymerElement {

    static get template() {
        return html`
			<style>
			.container {
				height: 500px;
				width:  500px;
				padding: 0;
				margin: 0;
			}
			</style>
				<div id="canvas" class="container"></div>
			`
    }

	afterServerUpdate() {
		console.log("afterServerUpdate() called");
		var canvasElement = this.shadowRoot.getElementById('canvas');		
		var thisElement = this;
		//var viewer = new NavigatedViewer({ container: canvasElement, width: '1300px', height: '800px' });
		//var viewer = new NavigatedViewer({ container: canvasElement, width: '1300px', height: '800px' });
		var viewer = new NavigatedViewer({ container: canvasElement });
		
		viewer.importXML(this.bpmnXML, function(err) {
			if (err) {
				return console.error('could not import BPMN 2.0 diagram', err);
			}
			
			// access modeler components
			var canvas = viewer.get('canvas');
			var overlays = viewer.get('overlays');
			var eventBus = viewer.get('eventBus');
			
			// zoom to fit full viewport
			canvas.zoom(1);
			
			// you may hook into any of the following events
			var events = [
			  'element.click',
			  'element.dblclick',
			];

			events.forEach(function(event) {
			  eventBus.on(event, function(e) {
				// e.element = the model element
				// e.gfx = the graphical element
				console.log(event, 'on', e.element.id);
			  });
			});			
						
		});		
	}

    static get is() {
          return 'bpmn-template';
    }
}

customElements.define(BpmnTemplate.is, BpmnTemplate);

When I try and drag the diagram I get the error:
EventBus.js?cd8f:381 TypeError: Illegal invocation
at match (index.esm.js?3a07:268)
at closest (index.esm.js?3a07:280)
at handleStart (MoveCanvas.js?6644:91)
at eval (MoveCanvas.js?6644:42)
at invokeFunction (EventBus.js?cd8f:515)
at EventBus._invokeListener (EventBus.js?cd8f:366)
at EventBus._invokeListeners (EventBus.js?cd8f:351)
at EventBus.fire (EventBus.js?cd8f:312)
at fire (InteractionEvents.js?29ba:87)
at SVGSVGElement.handlers. (InteractionEvents.js?29ba:162)
at SVGSVGElement.eval (index.esm.js?3a07:356)

Any ideas what I’m missing please?

2

This should be easy to debug.

3

Hi Philipp,

Thanks for the tip. The debugging doesn’t help me much - see the screenshot

image

The parameters ‘el’ and ‘selector’ seem to be properly defined. Since I am not a Javascript programmer, I don’t know anything about the ‘vendor’ variable - my best guess is that it is a global that is defined per browser vendor and if the browser implements the functionality then it delegates to the browsers code.

I also googled this ‘Illegal invocation’ error which seems to be related to having the wrong context for the variable. Since ‘el’ and ‘selector’ seem to be OK, I presume its the ‘vendor’ scope causing the problem.

Can you tell me if bpmn-js has been tested with the canvas element being in the shadow DOM, which is how I am using it. Perhaps this is why ‘vendor’ is out of scope?

Any other suggestions or pointers would be welcome.

Thanks.

4

The error you’ve shown might probably belong to this issue: https://github.com/bpmn-io/min-dom/issues/5

So it seems like the min-dom library has currently problems working with shadow DOMs.

5

I think that is exactly my issue. I will keep an eye on the fix.

Thanks.

1 Like