1function extractXml(data) { 2 return new TextDecoder().decode(Uint8Array.from(atob(data), c => c.charCodeAt(0))); 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 const encoder = new TextEncoder(); 86 const data = encoder.encode(xml); 87 const base64 = btoa(String.fromCharCode(...data)); 88 jQuery('input[name="plugin_bpmnio_data"]').val(base64); 89 } 90 } catch (err) { 91 console.log(err); 92 } 93} 94 95async function renderBpmnEditor(xml, container) { 96 const BpmnEditor = window.BpmnJS; 97 const editor = new BpmnEditor({ container }); 98 99 editor.on("commandStack.changed", () => transferXmlToForm(editor)); 100 101 renderDiagram(xml, container, editor, null); 102 transferXmlToForm(editor); 103} 104 105async function renderDmnEditor(xml, container) { 106 const DmnEditor = window.DmnJS; 107 const editor = new DmnEditor({ container }); 108 109 editor.on("commandStack.changed", () => transferXmlToForm(editor)); 110 111 renderDiagram(xml, container, editor, null); 112 transferXmlToForm(editor); 113} 114 115function safeRender(tag, type, fn) { 116 try { 117 const root = jQuery(tag); 118 const containerId = "."+type+"_js_container"; 119 const container = root.find(containerId)[0]; 120 // avoid double rendering 121 if (container.children?.length > 0) return; 122 123 const dataId = "."+type+"_js_data"; 124 const data = root.find(dataId)[0]; 125 const xml = extractXml(data.textContent); 126 127 fn(xml, container); 128 } catch (err) { 129 console.warn(err.message); 130 } 131} 132 133jQuery(document).ready(function () { 134 jQuery("div[id^=__bpmn_js_]").each((_, tag) => 135 safeRender(tag, 'bpmn', renderBpmnDiagram) 136 ); 137 jQuery("div[id^=__dmn_js_]").each((_, tag) => 138 safeRender(tag, 'dmn', renderDmnDiagram) 139 ); 140 jQuery("div[id=plugin_bpmnio__bpmn_editor]").each((_, tag) => 141 safeRender(tag, 'bpmn', renderBpmnEditor) 142 ); 143 jQuery("div[id=plugin_bpmnio__dmn_editor]").each((_, tag) => 144 safeRender(tag, 'dmn', renderDmnEditor) 145 ); 146}); 147