var bpmnViewer = new BpmnJS({
            container: '#canvas'
        });

        function openDiagram(bpmnXML) {
            // import diagram
            bpmnViewer.importXML(bpmnXML, function (err) {
                if (err) {
                    return console.error('could not import BPMN 2.0 diagram', err);
                }
                // access viewer components
                var canvas = bpmnViewer.get('canvas');
                // zoom to fit full viewport
                canvas.zoom('fit-viewport');
                // add marker
                // canvas.addMarker('SCAN_OK', 'needs-discussion');

                //add by cf 20200608 for overlays test 
         
				var overlays = bpmnViewer.get('overlays'); 
                //////////////////////////////////////////////////
				// add overlay to StartEvent_1 
                // 给startEvent_1上添加overlays
                //////////////////////////////////////////////////
				overlays.add('StartEvent_1', {
					  html: '<div> <span style="border-radius: 50%;    height: 20px;    width: 20px;    display: inline-block;    background: gray; vertical-align: top;"> <span style="display: block;    color: black;    height: 20px; font-size: 12px;   line-height: 20px;  cursor:pointer;  text-align: center">20</span>  </span> </div>',
					  position: {
					     right: 15,
					     bottom: 15
						 }
				});    
				//add by cf 20200608
            });
        }
  • No labels