123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <html>
- <head>
- <title>bpmn-js modeler demo</title>
- <link rel="stylesheet" href="css/diagram-js.css" />
- <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
- <link rel="stylesheet" href="css/app.css" />
- </head>
- <body>
- <div class="content" id="js-drop-zone">
- <div class="message intro">
- <div class="note">
- Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
- </div>
- </div>
- <div class="message error">
- <div class="note">
- <p>Ooops, we could not display the BPMN 2.0 diagram.</p>
- <div class="details">
- <span>cause of the problem</span>
- <pre></pre>
- </div>
- </div>
- </div>
- <div class="canvas" id="js-canvas"></div>
- <div id="js-properties-panel"></div>
- </div>
- <ul class="buttons">
- <li>
- download
- </li>
- <li>
- <a id="js-download-diagram" href title="download BPMN diagram">
- BPMN diagram
- </a>
- </li>
- <li>
- <a id="js-download-svg" href title="download as SVG image">
- SVG image
- </a>
- </li>
- </ul>
-
- <script src="index.js"></script>
- <script>
- var bpmnJS = new BpmnJS({
- container:$('#js-drop-zone'),
- canvas:$('#js-canvas'),
- propertiesPanel: $('#js-properties-panel')
- });
- //var container = $('#js-drop-zone');
- // function openDiagram(xml) {
- // renderer.importXML(xml, function(err) {
- // if (err) {
- // container
- // .removeClass('with-diagram')
- // .addClass('with-error');
- // container.find('.error pre').text(err.message);
- // console.error(err);
- // } else {
- // container
- // .removeClass('with-error')
- // .addClass('with-diagram');
- // }
- // });
- // }
- // function createNewDiagram() {
- // openDiagram(newDiagramXML);
- // }
- $('#js-create-diagram').click(function(e) {
- e.stopPropagation();
- e.preventDefault();
- bpmnJS.createNewDiagram();
- });
- function setEncoded(link, name, data) {
- var encodedData = encodeURIComponent(data);
- if (data) {
- link.addClass('active').attr({
- 'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
- 'download': name
- });
- } else {
- link.removeClass('active');
- }
- }
- $('#js-download-diagram').click(function(e) {
- e.stopPropagation();
- e.preventDefault();
- bpmnJS.saveDiagram(function(err, xml) {
- setEncoded($('#js-download-diagram'), 'diagram.bpmn', err ? null : xml);
- });
- })
- if (!window.FileList || !window.FileReader) {
- window.alert(
- 'Looks like you use an older browser that does not support drag and drop. ' +
- 'Try using Chrome, Firefox or the Internet Explorer > 10.');
- } else {
- bpmnJS.registerFileDrop($('#js-drop-zone'), bpmnJS.openDiagram);
- }
- </script>
- </html>
|