1function extractXml(data) { 2 return decodeURIComponent(escape(window.atob(data))); 3} 4 5async function renderDiagram(xml, container, viewer) { 6 try { 7 const result = await viewer.importXML(xml); 8 const { warnings } = result; 9 console.log(warnings); 10 const canvas = viewer.get("canvas"); 11 const bboxViewport = canvas.getActiveLayer().getBBox(); 12 const bboxSvg = canvas.getSize(); 13 canvas.viewbox({ 14 x: bboxViewport.x, 15 y: bboxViewport.y, 16 width: bboxSvg.width, 17 height: bboxSvg.height, 18 }); 19 container.style.height = `${bboxViewport.height}px`; 20 container.style.width = `max(100%,${bboxViewport.width}px)`; 21 } catch (err) { 22 container.text = err; 23 console.log(err.message, err.warnings); 24 } 25} 26 27async function renderBpmnDiagram(xml, container) { 28 // bundle exposes the viewer / modeler via the BpmnJS variable 29 const BpmnViewer = window.BpmnJS; 30 const viewer = new BpmnViewer({ container }); 31 32 renderDiagram(xml, container, viewer); 33} 34 35function safeRenderBpmnTag(tag) { 36 try { 37 const container = jQuery(tag).find(".bpmn_js_container")[0]; 38 // avoid double rendering 39 if (container.children.length > 0) return; 40 41 const data = jQuery(tag).find(".bpmn_js_data")[0]; 42 const xml = extractXml(data.textContent); 43 44 renderBpmnDiagram(xml, container); 45 } catch (err) { 46 console.warn(err.message); 47 } 48} 49 50jQuery(document).ready(function () { 51 jQuery("div[id^=__bpmn_js_]").each((_, tag) => safeRenderBpmnTag(tag)); 52}); 53