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 // fetch currently active view 38 const activeView = viewer.getActiveView(); 39 40 // apply initial logic in DRD view 41 if (activeView.type === "drd") { 42 const activeEditor = viewer.getActiveViewer(); 43 44 // access active editor components 45 const canvas = activeEditor.get("canvas"); 46 47 const bboxViewport = canvas.getActiveLayer().getBBox(); 48 const bboxSvg = canvas.getSize(); 49 canvas.viewbox({ 50 x: bboxViewport.x, 51 y: bboxViewport.y, 52 width: bboxSvg.width, 53 height: bboxSvg.height, 54 }); 55 return { 56 width: bboxViewport.width, 57 height: bboxViewport.height, 58 }; 59 } 60 return { 61 width: 600, 62 height: 32, 63 }; 64} 65 66async function renderBpmnDiagram(xml, container) { 67 const BpmnViewer = window.BpmnJS; 68 const viewer = new BpmnViewer({ container }); 69 70 renderDiagram(xml, container, viewer, computeBpmnDiagramSize); 71} 72 73async function renderDmnDiagram(xml, container) { 74 const DmnViewer = window.DmnJS; 75 const viewer = new DmnViewer({ container }); 76 77 renderDiagram(xml, container, viewer, computeDmnDiagramSize); 78} 79 80function safeRender(tag, fn) { 81 try { 82 const root = jQuery(tag); 83 const container = root.find(".bpmn_js_container")[0]; 84 // avoid double rendering 85 if (container.children?.length > 0) return; 86 87 const data = root.find(".bpmn_js_data")[0]; 88 const xml = extractXml(data.textContent); 89 90 fn(xml, container); 91 } catch (err) { 92 console.warn(err.message); 93 } 94} 95 96jQuery(document).ready(function () { 97 jQuery("div[id^=__bpmn_js_]").each((_, tag) => 98 safeRender(tag, renderBpmnDiagram) 99 ); 100 jQuery("div[id^=__dmn_js_]").each((_, tag) => 101 safeRender(tag, renderDmnDiagram) 102 ); 103}); 104