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 renderBpmnEditor(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 102async function renderDmnEditor(xml, container) { 103 const DmnEditor = window.DmnJS; 104 const editor = new DmnEditor({ container }); 105 106 editor.on("commandStack.changed", () => transferXmlToForm(editor)); 107 108 renderDiagram(xml, container, editor, null); 109 transferXmlToForm(editor); 110} 111 112function safeRender(tag, type, fn) { 113 try { 114 const root = jQuery(tag); 115 const containerId = "."+type+"_js_container"; 116 const container = root.find(containerId)[0]; 117 // avoid double rendering 118 if (container.children?.length > 0) return; 119 120 const dataId = "."+type+"_js_data"; 121 const data = root.find(dataId)[0]; 122 const xml = extractXml(data.textContent); 123 124 fn(xml, container); 125 } catch (err) { 126 console.warn(err.message); 127 } 128} 129 130jQuery(document).ready(function () { 131 jQuery("div[id^=__bpmn_js_]").each((_, tag) => 132 safeRender(tag, 'bpmn', renderBpmnDiagram) 133 ); 134 jQuery("div[id^=__dmn_js_]").each((_, tag) => 135 safeRender(tag, 'dmn', renderDmnDiagram) 136 ); 137 jQuery("div[id=plugin_bpmnio__bpmn_editor]").each((_, tag) => 138 safeRender(tag, 'bpmn', renderBpmnEditor) 139 ); 140 jQuery("div[id=plugin_bpmnio__dmn_editor]").each((_, tag) => 141 safeRender(tag, 'dmn', renderDmnEditor) 142 ); 143}); 144