1function extractXml(data) { 2 return decodeURIComponent(escape(window.atob(data))); 3} 4 5async function renderDiagram(xml, container, viewer, computeSizeFn) { 6 try { 7 const result = await viewer.importXML(xml); 8 const { warnings } = result; 9 console.log(warnings); 10 11 const size = computeSizeFn(viewer); 12 container.style.height = `${size.height}px`; 13 container.style.width = `max(100%,${size.width}px)`; 14 } catch (err) { 15 container.textContent = err; 16 console.log(err.message, err.warnings); 17 } 18} 19 20function computeBpmnDiagramSize(viewer) { 21 const canvas = viewer.get("canvas"); 22 const bboxViewport = canvas.getActiveLayer().getBBox(); 23 const bboxSvg = canvas.getSize(); 24 canvas.viewbox({ 25 x: bboxViewport.x, 26 y: bboxViewport.y, 27 width: bboxSvg.width, 28 height: bboxSvg.height, 29 }); 30 return { 31 width: bboxViewport.width, 32 height: bboxViewport.height, 33 }; 34} 35 36function computeDmnDiagramSize(viewer) { 37 const activeView = viewer.getActiveView(); 38 39 if (activeView.type === "drd") { 40 const activeEditor = viewer.getActiveViewer(); 41 42 // access active editor components 43 const canvas = activeEditor.get("canvas"); 44 45 const bboxViewport = canvas.getActiveLayer().getBBox(); 46 const bboxSvg = canvas.getSize(); 47 canvas.viewbox({ 48 x: bboxViewport.x, 49 y: bboxViewport.y, 50 width: bboxSvg.width, 51 height: bboxSvg.height, 52 }); 53 return { 54 width: bboxViewport.width, 55 height: bboxViewport.height, 56 }; 57 } 58 return { 59 width: 0, 60 height: 0, 61 }; 62} 63 64async function renderBpmnDiagram(xml, container) { 65 const BpmnViewer = window.BpmnJS; 66 const viewer = new BpmnViewer({ container }); 67 68 renderDiagram(xml, container, viewer, computeBpmnDiagramSize); 69} 70 71async function renderDmnDiagram(xml, container) { 72 const DmnViewer = window.DmnJS; 73 const viewer = new DmnViewer({ container }); 74 75 renderDiagram(xml, container, viewer, computeDmnDiagramSize); 76} 77 78function safeRender(tag, fn) { 79 try { 80 const root = jQuery(tag); 81 const container = root.find(".bpmn_js_container")[0]; 82 // avoid double rendering 83 if (container.children?.length > 0) return; 84 85 const data = root.find(".bpmn_js_data")[0]; 86 const xml = extractXml(data.textContent); 87 88 fn(xml, container); 89 } catch (err) { 90 console.warn(err.message); 91 } 92} 93 94jQuery(document).ready(function () { 95 jQuery("div[id^=__bpmn_js_]").each((_, tag) => 96 safeRender(tag, renderBpmnDiagram) 97 ); 98 jQuery("div[id^=__dmn_js_]").each((_, tag) => 99 safeRender(tag, renderDmnDiagram) 100 ); 101}); 102