Solved: Bpmn-js overlay: invalid element specified

Developers
1

Hi, I’m trying to add an overlay to my bpmn using the example from bpmn-js-example/overlays, but I get the error invalid element specified. I gave a correct ID of an element, but the overlays.add function can’t work with it, this seems to be a bug.
Code:

var overlays = viewer.get('overlays');
    overlays.add('ExclusiveGateway_Form_Completeness', {
      position: {
        bottom: 0,
        right: 0
      },
      html: '<div>Mixed up the labels?</div>'
    });

Console log:

app.js:487 Error: invalid element specified
    at Overlays.push../node_modules/diagram-js/lib/features/overlays/Overlays.js.Overlays.add (bpmn.js:8288)
    at VueComponent.mounted (bpmn.f42b72de60f4930c1784.hot-update.js:94)
    at invokeWithErrorHandling (commons.app.js:12770)
    at callHook (commons.app.js:15105)
    at insert (commons.app.js:14046)
    at invokeWithErrorHandling (commons.app.js:12770)
    at Object.invoker [as insert] (commons.app.js:13090)
    at invokeInsertHook (commons.app.js:17218)
    at VueComponent.patch [as __patch__] (commons.app.js:17437)
    at VueComponent.Vue._update (commons.app.js:14834)

The ID of the element is correct, because if I do a

viewer.get('canvas').addMarker('ExclusiveGateway_Form_Completeness', 'highlight')

the css-class highlight is being applied to exactly this element, again: the ID is correct.

How can I make this work with overlays ?

EDIT: Full Code:

<template>  
  <div class="container is-fullhd">
    <section class="section">
      <h1>Stand des Prozesses:</h1> 
      <div class="viewport">
        <div id="canvas" />
      </div>
    </section>
  </div>
</template>


<script>
import axios from 'axios'
import BpmnViewer from 'bpmn-js'

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(`http://localhost:3000/xml`)
    return { xmlData: data.bpmn20Xml }
  },
  mounted: function() {
    const viewer = new BpmnViewer({
      container: '#canvas',
      width: '50%',
      height: '50%'
    })
    viewer.importXML(this.xmlData, function(err) {
      if (!err) {
        /* eslint-disable */
        console.log('success!')
        viewer.get('canvas').zoom('fit-viewport')
         //This is working perfectly fine:
        //viewer.get('canvas').addMarker('ExclusiveGateway_Form_Completeness', 'highlight')
      } else {
        console.log('something went wrong:', err)
      }
    })
    const overlays = viewer.get('overlays')
    var overlayId = overlays.add('ExclusiveGateway_Form_Completeness', {
      position: {
        bottom: 0,
        right: 0
      },
      html: '<div>Mixed up the labels?</div>'
    });
    
  }
}
</script>


<style>
  .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {   
  fill: orange !important; /* color elements as orange */  
}
</style>

EDIT2: Solution: Include in viewer.importXML:

viewer.importXML(this.xmlData, function(err) {
      if (!err) {
        /* eslint-disable */
        console.log('success!')
        viewer.get('canvas').zoom('fit-viewport')
        //viewer.get('canvas').addMarker('ExclusiveGateway_Form_Completeness', 'highlight')
        let overlays = viewer.get('overlays')
        overlays.add('ExclusiveGateway_Form_Completeness', {
                                          position: {
                                            bottom: 0,
                                            right: 0
                                          },
                                          html: '<div>Mixed up the labels?</div>'
                                        })
      } else {
        console.log('something went wrong:', err)
      }
    })
2

Can you maybe give your full code, especially where you import your diagram with the element inside or where you create the element?

3

Done. I extended my initial post. :slight_smile:

4

Found the solution: I have to include the overlay stuff in viewer.importXML handler, otherwise it throws this error. Included the working code part as answer in my post. (solved) :slight_smile:

1 Like
5

Great to hear! :+1: And thanks for sharing :slightly_smiling_face:

6

Importing XML is an asynchronous operation. You need to wait for the import to finish in order to interact with the diagram. Therefore, the callback exists.