type or paste code here
import React, { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
import xmlFormat from 'xml-formatter';
import {
BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';
import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';
import { Button } from '@mui/material';
const BpmnRenderer = () => {
const bpmnContainerRef = useRef(null);
const bpmnModelerRef = useRef(null);
const [bpmnXml, setBpmnXml] = useState(null);
const fetchAndRenderBpmnXml = async () => {
try {
const response = await axios.get('http://localhost:8080/readXml/Developer_Hiring.bpmn20.xml');
const bpmnString = response.data;
const formattedXml = xmlFormat(bpmnString);
setBpmnXml(formattedXml);
renderBpmnDiagram(formattedXml);
} catch (error) {
console.error('Error fetching or processing BPMN XML:', error);
}
};
const renderBpmnDiagram = (bpmnXml) => {
bpmnModelerRef.current = new BpmnModeler({
container: bpmnContainerRef.current,
additionalModules: [BpmnPropertiesProviderModule],
propertiesPanel: {
parent: '#properties-panel'
}
});
bpmnModelerRef.current.importXML(bpmnXml)
.then(() => {
console.log("BPMN diagram loaded successfully!");
bpmnModelerRef.current.get('canvas').zoom('fit-viewport');
// Now that the diagram is loaded
const eventBus = bpmnModelerRef.current.get('eventBus');
eventBus.on('element.changed', () => {
// Retrieve the updated XML string
const updatedXML = bpmnModelerRef.current.saveXML({ format: true });
console.log(updatedXML);
});
})
.catch((err) => {
console.error("Error importing BPMN XML:", err);
});
};
const handlePrintXML = () => {
// Retrieve the current XML string
bpmnModelerRef.current.saveXML({ format: true })
.then(result => {
const editedXML = result.xml;
console.log('Edited XML:', editedXML);
// Send the edited XML to your API endpoint
sendEditedXMLToAPI(editedXML);
})
.catch(error => {
console.error('Error retrieving edited XML:', error);
});
};
const sendEditedXMLToAPI = async (editedXML) => {
try {
const response = await fetch('http://localhost:8080/createProcess', {
method: 'POST',
headers: {
'Content-Type': 'application/xml',
},
body: editedXML,
});
if (!response.ok) {
throw new Error('Failed to send edited XML to API');
}
console.log('Edited XML successfully sent to API');
} catch (error) {
console.error('Error sending edited XML to API:', error);
}
};
return (
<div>
<div ref={bpmnContainerRef} style={{ width: '70%', height: '600px', float: 'left' }}></div>
<div id="properties-panel" style={{ width: '30%', float: 'left' }}></div>
<div style={{ textAlign: 'center', marginTop: '20px' }}>
<Button onClick={handlePrintXML} variant="contained" color="primary">
Print Edited Diagram XML
</Button>
<br></br>
<br></br>
<Button onClick={ fetchAndRenderBpmnXml} variant="contained" color="primary">
Show Diagram
</Button>
</div>
</div>
);
};
export default BpmnRenderer;
—this is my code and I am getting “minDash.isArray is not a function
TypeError: minDash.isArray is not a function” error , hope to have helps to resolve it