Spaces:
Running
Running
add PNG button
Browse files- modules/htlm_webpage.py +21 -6
modules/htlm_webpage.py
CHANGED
|
@@ -142,6 +142,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 142 |
"""
|
| 143 |
|
| 144 |
components.html(html_template, height=300, width=300)
|
|
|
|
| 145 |
else:
|
| 146 |
html_template = f"""
|
| 147 |
<!DOCTYPE html>
|
|
@@ -170,7 +171,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 170 |
justify-content: flex-start;
|
| 171 |
gap: 10px;
|
| 172 |
}}
|
| 173 |
-
#save-button, #download-button {{
|
| 174 |
background-color: #4CAF50;
|
| 175 |
color: white;
|
| 176 |
border: none;
|
|
@@ -190,7 +191,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 190 |
flex: 1;
|
| 191 |
position: relative;
|
| 192 |
background-color: #FBFBFB;
|
| 193 |
-
overflow: hidden;
|
| 194 |
display: flex;
|
| 195 |
justify-content: center;
|
| 196 |
align-items: center;
|
|
@@ -206,7 +207,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 206 |
<div id="button-container">
|
| 207 |
<button id="save-button">Save as BPMN</button>
|
| 208 |
<button id="download-button">Save as XML</button>
|
| 209 |
-
<button id="
|
| 210 |
</div>
|
| 211 |
<div id="canvas-container">
|
| 212 |
<div id="canvas"></div>
|
|
@@ -220,7 +221,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 220 |
try {{
|
| 221 |
await bpmnModeler.importXML(bpmnXML);
|
| 222 |
bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
|
| 223 |
-
bpmnModeler.get('canvas').zoom(0.8);
|
| 224 |
}} catch (err) {{
|
| 225 |
console.error('Error rendering BPMN diagram', err);
|
| 226 |
}}
|
|
@@ -260,13 +261,27 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
|
|
| 260 |
}}
|
| 261 |
}}
|
| 262 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
document.getElementById('save-button').addEventListener('click', saveDiagram);
|
| 264 |
document.getElementById('download-button').addEventListener('click', downloadXML);
|
|
|
|
| 265 |
|
| 266 |
-
// Ensure the canvas is focused to capture keyboard events
|
| 267 |
document.getElementById('canvas').focus();
|
| 268 |
|
| 269 |
-
// Add event listeners for keyboard shortcuts
|
| 270 |
document.addEventListener('keydown', function(event) {{
|
| 271 |
if (event.ctrlKey && event.key === 'z') {{
|
| 272 |
bpmnModeler.get('commandStack').undo();
|
|
|
|
| 142 |
"""
|
| 143 |
|
| 144 |
components.html(html_template, height=300, width=300)
|
| 145 |
+
|
| 146 |
else:
|
| 147 |
html_template = f"""
|
| 148 |
<!DOCTYPE html>
|
|
|
|
| 171 |
justify-content: flex-start;
|
| 172 |
gap: 10px;
|
| 173 |
}}
|
| 174 |
+
#save-button, #download-button, #download-png-button {{
|
| 175 |
background-color: #4CAF50;
|
| 176 |
color: white;
|
| 177 |
border: none;
|
|
|
|
| 191 |
flex: 1;
|
| 192 |
position: relative;
|
| 193 |
background-color: #FBFBFB;
|
| 194 |
+
overflow: hidden;
|
| 195 |
display: flex;
|
| 196 |
justify-content: center;
|
| 197 |
align-items: center;
|
|
|
|
| 207 |
<div id="button-container">
|
| 208 |
<button id="save-button">Save as BPMN</button>
|
| 209 |
<button id="download-button">Save as XML</button>
|
| 210 |
+
<button id="download-png-button">Save as PNG</button>
|
| 211 |
</div>
|
| 212 |
<div id="canvas-container">
|
| 213 |
<div id="canvas"></div>
|
|
|
|
| 221 |
try {{
|
| 222 |
await bpmnModeler.importXML(bpmnXML);
|
| 223 |
bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
|
| 224 |
+
bpmnModeler.get('canvas').zoom(0.8);
|
| 225 |
}} catch (err) {{
|
| 226 |
console.error('Error rendering BPMN diagram', err);
|
| 227 |
}}
|
|
|
|
| 261 |
}}
|
| 262 |
}}
|
| 263 |
|
| 264 |
+
async function downloadPNG() {{
|
| 265 |
+
try {{
|
| 266 |
+
const canvas = document.querySelector('#canvas canvas');
|
| 267 |
+
const pngUrl = canvas.toDataURL('image/png');
|
| 268 |
+
const link = document.createElement('a');
|
| 269 |
+
link.href = pngUrl;
|
| 270 |
+
link.download = 'diagram.png';
|
| 271 |
+
document.body.appendChild(link);
|
| 272 |
+
link.click();
|
| 273 |
+
document.body.removeChild(link);
|
| 274 |
+
}} catch (err) {{
|
| 275 |
+
console.error('Error downloading PNG', err);
|
| 276 |
+
}}
|
| 277 |
+
}}
|
| 278 |
+
|
| 279 |
document.getElementById('save-button').addEventListener('click', saveDiagram);
|
| 280 |
document.getElementById('download-button').addEventListener('click', downloadXML);
|
| 281 |
+
document.getElementById('download-png-button').addEventListener('click', downloadPNG);
|
| 282 |
|
|
|
|
| 283 |
document.getElementById('canvas').focus();
|
| 284 |
|
|
|
|
| 285 |
document.addEventListener('keydown', function(event) {{
|
| 286 |
if (event.ctrlKey && event.key === 'z') {{
|
| 287 |
bpmnModeler.get('commandStack').undo();
|