sartography/bpmn-js-spiffworkflow
1
0
Fork 0
mirror of https://github.com/sartography/bpmn-js-spiffworkflow.git synced 2025-02-23 21:18:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4 from sartography/feature/breadcrumbs_and_downloads

Browse Source 
Download button, visible Breadcrumbs for sub-processes.
This commit is contained in:
Dan Funk 2022-06-22 16:09:15 -04:00 committed by GitHub
commit 8d10bd48d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/app.js
View File

@ -3,11 +3,11 @@ import diagramXML from '../resources/diagram.bpmn';
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel'; import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
import inputOutput from './spiffworkflow/InputOutput'; import inputOutput from './spiffworkflow/InputOutput';
import SpiffWorkflowPropertiesProvider from './spiffworkflow/PropertiesPanel'; import SpiffWorkflowPropertiesProvider from './spiffworkflow/PropertiesPanel';
import FileSaver from 'file-saver'; // For file downloads.
// Examples for extending the xml language can be found at // Examples for extending the xml language can be found at
// https://github.com/camunda/camunda-bpmn-moddle/blob/master/resources/camunda.json // https://github.com/camunda/camunda-bpmn-moddle/blob/master/resources/camunda.json
import SpiffModdleProvider from './spiffworkflow/PropertiesPanel/descriptors/spiffworkflow'; import SpiffModdleProvider from './spiffworkflow/PropertiesPanel/descriptors/spiffworkflow';
const modelerEl = document.getElementById('modeler'); const modelerEl = document.getElementById('modeler');
const panelEl = document.getElementById('panel'); const panelEl = document.getElementById('panel');
@ -30,3 +30,22 @@ const bpmnModeler = new BpmnModeler({
// import XML // import XML
bpmnModeler.importXML(diagramXML).then(() => {}); 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');
}

19
app/css/app.css
View File

@ -5,7 +5,7 @@
padding: 0; padding: 0;
} }
html, body, #container, #modeler { html, body {
height: 100%; height: 100%;
} }
@ -16,6 +16,7 @@ html, body, #container, #modeler {
#container { #container {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
} }
#modeler { #modeler {
@ -39,3 +40,19 @@ html, body, #container, #modeler {
padding-left: 2px; padding-left: 2px;
padding-right: 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;
}

10
app/index.html
View File

@ -4,15 +4,23 @@
<title>bpmn-js-spiffworkflow</title> <title>bpmn-js-spiffworkflow</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css"/> <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/assets/bpmn-font/css/bpmn-embedded.css"/>
<link rel="stylesheet" href="vendor/bpmn-js-properties-panel/assets/properties-panel.css"/> <link rel="stylesheet" href="vendor/bpmn-js-properties-panel/assets/properties-panel.css"/>
<link rel="stylesheet" href="css/app.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> </head>
<body> <body>
<div id="menu">
<button id="downloadButton" class="btn"><i class="fa fa-download"></i> Download</button>
</div>
<div id="container"> <div id="container">
<div id="modeler"></div> <div id="modeler"></div>
<div id="panel"></div> <div id="panel"></div>
</div> </div>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html><!---->
34

13
package-lock.json generated
View File

@ -28,6 +28,7 @@
"copy-webpack-plugin": "^11.0.0", "copy-webpack-plugin": "^11.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-bpmn-io": "^0.13.0", "eslint-plugin-bpmn-io": "^0.13.0",
"file-saver": "^2.0.5",
"karma": "^6.3.4", "karma": "^6.3.4",
"karma-browserify": "^8.1.0", "karma-browserify": "^8.1.0",
"karma-chrome-launcher": "^3.1.1", "karma-chrome-launcher": "^3.1.1",
@ -5577,6 +5578,12 @@
"node": "^10.12.0 || >=12.0.0" "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": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -15314,6 +15321,12 @@
"flat-cache": "^3.0.4" "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": { "fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

1
package.json
View File

@ -43,6 +43,7 @@
"copy-webpack-plugin": "^11.0.0", "copy-webpack-plugin": "^11.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-bpmn-io": "^0.13.0", "eslint-plugin-bpmn-io": "^0.13.0",
"file-saver": "^2.0.5",
"karma": "^6.3.4", "karma": "^6.3.4",
"karma-browserify": "^8.1.0", "karma-browserify": "^8.1.0",
"karma-chrome-launcher": "^3.1.1", "karma-chrome-launcher": "^3.1.1",