diff --git a/app/app.js b/app/app.js
index af30aa3..07a5e95 100644
--- a/app/app.js
+++ b/app/app.js
@@ -3,11 +3,11 @@ import diagramXML from '../resources/diagram.bpmn';
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
import inputOutput from './spiffworkflow/InputOutput';
import SpiffWorkflowPropertiesProvider from './spiffworkflow/PropertiesPanel';
+import FileSaver from 'file-saver'; // For file downloads.
// Examples for extending the xml language can be found at
// https://github.com/camunda/camunda-bpmn-moddle/blob/master/resources/camunda.json
import SpiffModdleProvider from './spiffworkflow/PropertiesPanel/descriptors/spiffworkflow';
-
const modelerEl = document.getElementById('modeler');
const panelEl = document.getElementById('panel');
@@ -30,3 +30,22 @@ const bpmnModeler = new BpmnModeler({
// import XML
bpmnModeler.importXML(diagramXML).then(() => {});
+
+/**
+ * Just a quick bit of code so we can save the XML that is output.
+ * Helps for debugging against other libraries (like SpiffWorkflow)
+ */
+let btn = document.getElementById('downloadButton');
+btn.addEventListener('click', event => {
+ saveXML();
+});
+async function saveXML() {
+ const { xml } = await bpmnModeler.saveXML({ format: true });
+ const blob = new Blob([ xml ], { type: 'text/xml' });
+ FileSaver.saveAs(blob, 'diagram.bpmn');
+}
+
+
+
+
+
diff --git a/app/css/app.css b/app/css/app.css
index a0d6834..f01a6ce 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -5,7 +5,7 @@
padding: 0;
}
-html, body, #container, #modeler {
+html, body {
height: 100%;
}
@@ -16,6 +16,7 @@ html, body, #container, #modeler {
#container {
display: flex;
width: 100%;
+ height: 100%;
}
#modeler {
@@ -39,3 +40,19 @@ html, body, #container, #modeler {
padding-left: 2px;
padding-right: 2px;
}
+
+/* Style buttons */
+.btn {
+ background-color: DodgerBlue;
+ border: none;
+ color: white;
+ padding: 8px 15px;
+ cursor: pointer;
+ font-size: 16px;
+ margin: 12px;
+}
+
+/* Darker background on mouse-over */
+.btn:hover {
+ background-color: RoyalBlue;
+}
diff --git a/app/index.html b/app/index.html
index be9efca..3e80a8d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,15 +4,23 @@
bpmn-js-spiffworkflow
+
+
+
+
+
-