1function extractXm(tag) { 2 const text = jQuery(tag).text(); 3 return decodeURIComponent(escape(window.atob(text))); 4} 5 6function replaceBpmnTag(tag) { 7 const xml = extractXm(tag); 8 const id = jQuery(tag).attr("id"); 9 // avoid doing it twice 10 jQuery(tag).removeAttr("id"); 11 12 // bundle exposes the viewer / modeler via the BpmnJS variable 13 const BpmnViewer = window.BpmnJS; 14 let containerdiv = document.createElement("div"); 15 containerdiv.className = "canvas"; 16 jQuery(tag).parent().append(containerdiv); 17 const viewer = new BpmnViewer({ container: containerdiv }); 18 viewer.importXML(xml, function (err) { 19 if (err) { 20 containerdiv.text = err; 21 console.log("error rendering", err); 22 } else { 23 let canvas = viewer.get("canvas"); 24 const bboxViewport = canvas.getDefaultLayer().getBBox(); 25 const bboxSvg = canvas.getSize(); 26 canvas.viewbox({ 27 x: bboxViewport.x, 28 y: bboxViewport.y, 29 width: bboxSvg.width, 30 height: bboxSvg.height, 31 }); 32 const height = bboxViewport.height + 4; 33 // hack: adjust the div height because it doesn't automatically. 34 containerdiv.style.height = "" + height + "px"; 35 containerdiv.style.width = "" + bboxViewport.width + "px"; 36 // Fix #3 by introducing a small space to allow clicks. 37 containerdiv.style.marginRight = "32px"; 38 } 39 }); 40 jQuery(tag).remove(); 41} 42 43function safeReplaceBpmnTag(tag) { 44 try { 45 replaceBpmnTag(tag); 46 } catch (err) { 47 console.warn(err.message); 48 } 49} 50 51jQuery(document).ready(function () { 52 jQuery("textarea[id^=__bpmn_js_]").each((_, tag) => 53 safeReplaceBpmnTag(tag) 54 ); 55}); 56