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 if (warnings?.length > 0) console.log(warnings); 10 11 if (!computeSizeFn) return; 12 13 const size = computeSizeFn(viewer); 14 if (!size) return; 15 16 container.style.height = `${size.height}px`; 17 container.style.width = `max(100%,${size.width}px)`; 18 } catch (err) { 19 container.textContent = err; 20 console.log(err.message, err.warnings); 21 } 22} 23 24function computeBpmnDiagramSize(viewer) { 25 const canvas = viewer.get("canvas"); 26 const bboxViewport = canvas.getActiveLayer().getBBox(); 27 const bboxSvg = canvas.getSize(); 28 canvas.viewbox({ 29 x: bboxViewport.x, 30 y: bboxViewport.y, 31 width: bboxSvg.width, 32 height: bboxSvg.height, 33 }); 34 return { 35 width: bboxViewport.width, 36 height: bboxViewport.height, 37 }; 38} 39 40function computeDmnDiagramSize(viewer) { 41 const activeView = viewer.getActiveView(); 42 43 if (activeView.type === "drd") { 44 const activeEditor = viewer.getActiveViewer(); 45 46 // access active editor components 47 const canvas = activeEditor.get("canvas"); 48 49 const bboxViewport = canvas.getActiveLayer().getBBox(); 50 const bboxSvg = canvas.getSize(); 51 canvas.viewbox({ 52 x: bboxViewport.x, 53 y: bboxViewport.y, 54 width: bboxSvg.width, 55 height: bboxSvg.height, 56 }); 57 return { 58 width: bboxViewport.width, 59 height: bboxViewport.height, 60 }; 61 } 62 return undefined; 63} 64 65async function renderBpmnDiagram(xml, container) { 66 const BpmnViewer = window.BpmnJS.Viewer; 67 const viewer = new BpmnViewer({ container }); 68 69 renderDiagram(xml, container, viewer, computeBpmnDiagramSize); 70} 71 72async function renderDmnDiagram(xml, container) { 73 const DmnViewer = window.DmnJS; 74 const viewer = new DmnViewer({ container }); 75 76 renderDiagram(xml, container, viewer, computeDmnDiagramSize); 77} 78 79async function transferXmlToForm(editor) { 80 try { 81 const options = { format: true }; 82 const result = await editor.saveXML(options); 83 const { xml } = result; 84 if (xml.length > 0) { 85 jQuery('input[name="plugin_bpmnio_data"]').val(window.btoa(xml)); 86 } 87 } catch (err) { 88 console.log(err); 89 } 90} 91 92async function renderEditor(xml, container) { 93 const BpmnEditor = window.BpmnJS; 94 const editor = new BpmnEditor({ container }); 95 96 editor.on("commandStack.changed", () => transferXmlToForm(editor)); 97 98 renderDiagram(xml, container, editor, null); 99 transferXmlToForm(editor); 100} 101 102function safeRender(tag, fn) { 103 try { 104 const root = jQuery(tag); 105 const container = root.find(".bpmn_js_container")[0]; 106 // avoid double rendering 107 if (container.children?.length > 0) return; 108 109 const data = root.find(".bpmn_js_data")[0]; 110 const xml = extractXml(data.textContent); 111 112 fn(xml, container); 113 } catch (err) { 114 console.warn(err.message); 115 } 116} 117 118jQuery(document).ready(function () { 119 jQuery("div[id^=__bpmn_js_]").each((_, tag) => 120 safeRender(tag, renderBpmnDiagram) 121 ); 122 jQuery("div[id^=__dmn_js_]").each((_, tag) => 123 safeRender(tag, renderDmnDiagram) 124 ); 125 jQuery("div[id=plugin_bpmnio__editor]").each((_, tag) => 126 safeRender(tag, renderEditor) 127 ); 128}); 129