Merge pull request #4 from sartography/feature/breadcrumbs_and_downloads
Download button, visible Breadcrumbs for sub-processes.
This commit is contained in:
Dan Funk
GitHub
commit
8d10bd48d7
21
app/app.js
21
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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,23 @@
|
|||
<title>bpmn-js-spiffworkflow</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css"/>
|
||||
<link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-js.css"/>
|
||||
<link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css"/>
|
||||
<link rel="stylesheet" href="vendor/bpmn-js-properties-panel/assets/properties-panel.css"/>
|
||||
<link rel="stylesheet" href="css/app.css"/>
|
||||
|
||||
<!-- Just have this for the download file icon -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<button id="downloadButton" class="btn"><i class="fa fa-download"></i> Download</button>
|
||||
</div>
|
||||
<div id="container">
|
||||
<div id="modeler"></div>
|
||||
<div id="panel"></div>
|
||||
</div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html><!---->
|
||||
34
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"copy-webpack-plugin": "^11.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-bpmn-io": "^0.13.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"karma": "^6.3.4",
|
||||
"karma-browserify": "^8.1.0",
|
||||
"karma-chrome-launcher": "^3.1.1",
|
||||
|
|
@ -5577,6 +5578,12 @@
|
|||
"node": "^10.12.0 || >=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
|
|
@ -15314,6 +15321,12 @@
|
|||
"flat-cache": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
|
||||
"dev": true
|
||||
},
|
||||
"fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
"copy-webpack-plugin": "^11.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-bpmn-io": "^0.13.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"karma": "^6.3.4",
|
||||
"karma-browserify": "^8.1.0",
|
||||
"karma-chrome-launcher": "^3.1.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue