2 * Copyright © 2018 European Support Limited
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 *http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
16 import React, { Component } from 'react';
17 import fileSaver from 'file-saver';
18 import CustomModeler from './custom-modeler';
19 import propertiesPanelModule from 'bpmn-js-properties-panel';
20 import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
21 import camundaModuleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
22 import newDiagramXML from './newDiagram.bpmn';
23 import PropTypes from 'prop-types';
24 import CompositionButtons from './components/CompositionButtonsPanel';
26 class CompositionView extends Component {
28 compositionUpdate: PropTypes.func,
29 showErrorModal: PropTypes.func,
30 composition: PropTypes.bool,
31 name: PropTypes.string
35 this.generatedId = 'bpmn-container' + Date.now();
36 this.fileInput = React.createRef();
43 const { composition } = this.props;
45 this.modeler = new CustomModeler({
47 parent: '#js-properties-panel'
50 propertiesPanelModule,
51 propertiesProviderModule
54 camunda: camundaModuleDescriptor
57 window.modeler = this.modeler;
58 this.modeler.attachTo('#' + this.generatedId);
59 this.setDiagram(composition ? composition : newDiagramXML);
60 var eventBus = this.modeler.get('eventBus');
61 eventBus.on('element.out', () => {
62 this.exportDiagramToStore();
66 setDiagram = diagram => {
76 const { diagram } = this.state;
77 let modeler = this.modeler;
78 this.modeler.importXML(diagram, err => {
81 return this.props.showErrorModal('could not import diagram');
83 let canvas = modeler.get('canvas');
84 canvas.zoom('fit-viewport');
88 exportDiagramToStore = () => {
89 this.modeler.saveXML({ format: true }, (err, xml) => {
92 return this.props.showErrorModal('could not save diagram');
94 return this.props.compositionUpdate(xml);
98 exportDiagram = () => {
99 const { name, showErrorModal } = this.props;
100 this.modeler.saveXML({ format: true }, (err, xml) => {
103 return showErrorModal('could not save diagram');
105 const blob = new Blob([xml], { type: 'text/html;charset=utf-8' });
106 fileSaver.saveAs(blob, `${name}-diagram.bpmn`);
110 loadNewDiagram = () => {
111 this.setDiagram(newDiagramXML);
114 uploadDiagram = () => {
115 this.fileInput.current.click();
118 handleFileInputChange = filesList => {
119 const file = filesList[0];
120 const reader = new FileReader();
121 reader.onloadend = event => {
122 var xml = event.target.result;
123 this.setDiagram(xml);
124 this.fileInput.value = '';
126 reader.readAsText(file);
131 <div className="composition-view content">
134 onChange={e => this.handleFileInputChange(e.target.files)}
139 style={{ display: 'none' }}
143 this.exportDiagramToStore();
145 className="bpmn-container"
146 id={this.generatedId}
148 <div className="bpmn-sidebar">
150 className="properties-panel"
151 id="js-properties-panel"
154 onClean={this.loadNewDiagram}
155 onDownload={this.exportDiagram}
156 onUpload={this.uploadDiagram}
164 export default CompositionView;