Spaces:
Sleeping
Sleeping
File size: 5,260 Bytes
615e9f1 3250939 615e9f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import streamlit as st
import streamlit.components.v1 as components
def display_bpmn_xml(bpmn_xml):
html_template = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BPMN Modeler</title>
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css">
<script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
<style>
html, body {{
height: 100%;
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
overflow: hidden;
}}
#button-container {{
padding: 10px;
background-color: #ffffff;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: flex-start;
gap: 10px;
}}
#save-button, #download-button {{
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}}
#download-button {{
background-color: #008CBA;
}}
#canvas-container {{
flex: 1;
position: relative;
background-color: #FBFBFB;
overflow: hidden; /* Prevent scrolling */
display: flex;
justify-content: center;
align-items: center;
}}
#canvas {{
height: 100%;
width: 100%;
position: relative;
}}
</style>
</head>
<body>
<div id="button-container">
<button id="save-button">Save as BPMN</button>
<button id="download-button">Save as XML</button>
<button id="download-button">Save as Vizi (not available for now)</button>
</div>
<div id="canvas-container">
<div id="canvas"></div>
</div>
<script>
var bpmnModeler = new BpmnJS({{
container: '#canvas'
}});
async function openDiagram(bpmnXML) {{
try {{
await bpmnModeler.importXML(bpmnXML);
bpmnModeler.get('canvas').zoom('fit-viewport');
bpmnModeler.get('canvas').zoom(0.8); // Adjust this value for zooming out
}} catch (err) {{
console.error('Error rendering BPMN diagram', err);
}}
}}
async function saveDiagram() {{
try {{
const result = await bpmnModeler.saveXML({{ format: true }});
const xml = result.xml;
const blob = new Blob([xml], {{ type: 'text/xml' }});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'diagram.bpmn';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}} catch (err) {{
console.error('Error saving BPMN diagram', err);
}}
}}
async function downloadXML() {{
const xml = `{bpmn_xml}`;
const blob = new Blob([xml], {{ type: 'text/xml' }});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'diagram.xml';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}}
document.getElementById('save-button').addEventListener('click', saveDiagram);
document.getElementById('download-button').addEventListener('click', downloadXML);
// Ensure the canvas is focused to capture keyboard events
document.getElementById('canvas').focus();
// Add event listeners for keyboard shortcuts
document.addEventListener('keydown', function(event) {{
if (event.ctrlKey && event.key === 'z') {{
bpmnModeler.get('commandStack').undo();
}} else if (event.key === 'Delete' || event.key === 'Backspace') {{
bpmnModeler.get('selection').get().forEach(function(element) {{
bpmnModeler.get('modeling').removeElements([element]);
}});
}}
}});
openDiagram(`{bpmn_xml}`);
</script>
</body>
</html>
"""
components.html(html_template, height=1000, width=1500) |