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