we can edit a bpmn diagram using a function instead of a class w/ burnettk
This commit is contained in:
jasquat
parent
7b52804639
commit
d250cd478e
|
|
@ -3,141 +3,167 @@ import {
|
|||
BpmnPropertiesPanelModule,
|
||||
BpmnPropertiesProviderModule,
|
||||
} from 'bpmn-js-properties-panel';
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import "bpmn-js-properties-panel/dist/assets/properties-panel.css"
|
||||
import './bpmn-js-properties-panel.css';
|
||||
// const bpmnViewer = new BpmnModeler({
|
||||
// container: '#js-canvas',
|
||||
// keyboard: {
|
||||
// bindTo: document
|
||||
// },
|
||||
// propertiesPanel: {
|
||||
// parent: '#js-properties-panel'
|
||||
// },
|
||||
// additionalModules: [
|
||||
// BpmnPropertiesPanelModule,
|
||||
// BpmnPropertiesProviderModule
|
||||
// ]
|
||||
// });
|
||||
|
||||
export default class ReactEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
export default function ReactEditor(props) {
|
||||
const containerRef = React.useRef();
|
||||
const container = containerRef.current;
|
||||
const [diagramXML, setDiagramXML] = useState("");
|
||||
const [bpmnViewer, setBpmnViewer] = useState(null);
|
||||
// var bpmnViewer = null;
|
||||
// const bpmnViewer = new BpmnModeler({
|
||||
// container: container,
|
||||
// keyboard: {
|
||||
// bindTo: document
|
||||
// },
|
||||
// propertiesPanel: {
|
||||
// parent: '#js-properties-panel'
|
||||
// },
|
||||
// additionalModules: [
|
||||
// BpmnPropertiesPanelModule,
|
||||
// BpmnPropertiesProviderModule
|
||||
// ]
|
||||
// });
|
||||
|
||||
this.state = { };
|
||||
// var bpmnViewer = null
|
||||
|
||||
this.containerRef = React.createRef();
|
||||
}
|
||||
useEffect(() => {
|
||||
// if (!bpmnViewer) {
|
||||
console.log("diagramXML3", diagramXML)
|
||||
var newBpmnViewer = new BpmnModeler({
|
||||
container: container,
|
||||
keyboard: {
|
||||
bindTo: document
|
||||
},
|
||||
propertiesPanel: {
|
||||
parent: '#js-properties-panel'
|
||||
},
|
||||
additionalModules: [
|
||||
BpmnPropertiesPanelModule,
|
||||
BpmnPropertiesProviderModule
|
||||
]
|
||||
});
|
||||
|
||||
componentDidMount() {
|
||||
setBpmnViewer(newBpmnViewer);
|
||||
|
||||
const {
|
||||
url,
|
||||
diagramXML
|
||||
} = this.props;
|
||||
newBpmnViewer.on('import.done', (event) => {
|
||||
const {
|
||||
error,
|
||||
warnings
|
||||
} = event;
|
||||
|
||||
const container = this.containerRef.current;
|
||||
if (error) {
|
||||
return handleError(error);
|
||||
}
|
||||
|
||||
this.bpmnViewer = new BpmnModeler({
|
||||
container: container,
|
||||
keyboard: {
|
||||
bindTo: document
|
||||
},
|
||||
propertiesPanel: {
|
||||
parent: '#js-properties-panel'
|
||||
},
|
||||
additionalModules: [
|
||||
BpmnPropertiesPanelModule,
|
||||
BpmnPropertiesProviderModule
|
||||
]
|
||||
});
|
||||
newBpmnViewer.get('canvas').zoom('fit-viewport');
|
||||
|
||||
this.bpmnViewer.on('import.done', (event) => {
|
||||
const {
|
||||
error,
|
||||
warnings
|
||||
} = event;
|
||||
|
||||
if (error) {
|
||||
return this.handleError(error);
|
||||
}
|
||||
|
||||
this.bpmnViewer.get('canvas').zoom('fit-viewport');
|
||||
|
||||
return this.handleShown(warnings);
|
||||
});
|
||||
|
||||
if (url) {
|
||||
return this.fetchDiagram(url);
|
||||
}
|
||||
return handleShown(warnings);
|
||||
});
|
||||
// }
|
||||
// console.log("diagramXML2", diagramXML)
|
||||
|
||||
if (diagramXML) {
|
||||
return this.displayDiagram(diagramXML);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.bpmnViewer.destroy();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const {
|
||||
props,
|
||||
state
|
||||
} = this;
|
||||
|
||||
if (props.url !== prevProps.url) {
|
||||
return this.fetchDiagram(props.url);
|
||||
// console.log("diagramXML", diagramXML)
|
||||
return displayDiagram(newBpmnViewer, diagramXML);
|
||||
}
|
||||
|
||||
const currentXML = props.diagramXML || state.diagramXML;
|
||||
|
||||
const previousXML = prevProps.diagramXML || prevState.diagramXML;
|
||||
|
||||
if (currentXML && currentXML !== previousXML) {
|
||||
return this.displayDiagram(currentXML);
|
||||
if (props.url && !diagramXML) {
|
||||
// console.log("diagramXML4", diagramXML)
|
||||
return fetchDiagram(props.url);
|
||||
}
|
||||
// console.log("diagramXML3", diagramXML)
|
||||
|
||||
// return a function to execute at unmount
|
||||
return () => {
|
||||
bpmnViewer.destroy();
|
||||
}
|
||||
}, [props, diagramXML]);
|
||||
|
||||
// useEffect(() => {
|
||||
// // if (props.url !== prevProps.url) {
|
||||
// // return this.fetchDiagram(props.url);
|
||||
// // }
|
||||
//
|
||||
// const currentXML = props.diagramXML || diagramXML;
|
||||
//
|
||||
// // const previousXML = prevProps.diagramXML || prevState.diagramXML;
|
||||
//
|
||||
// // if (currentXML && currentXML !== previousXML) {
|
||||
// if (currentXML) {
|
||||
// return displayDiagram(currentXML);
|
||||
// }
|
||||
// }, [diagramXML]);
|
||||
|
||||
function displayDiagram(bpmnViewerToUse, diagramXMLToDisplay) {
|
||||
bpmnViewerToUse.importXML(diagramXMLToDisplay);
|
||||
}
|
||||
|
||||
displayDiagram(diagramXML) {
|
||||
this.bpmnViewer.importXML(diagramXML);
|
||||
}
|
||||
function fetchDiagram(url) {
|
||||
|
||||
fetchDiagram(url) {
|
||||
|
||||
this.handleLoading();
|
||||
handleLoading();
|
||||
// console.log("WHY!!!!")
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(text => this.setState({ diagramXML: text }))
|
||||
.catch(err => this.handleError(err));
|
||||
.then(text => setDiagramXML(text))
|
||||
.catch(err => handleError(err));
|
||||
|
||||
|
||||
// console.log("diagramXML5", diagramXML)
|
||||
}
|
||||
|
||||
handleLoading() {
|
||||
const { onLoading } = this.props;
|
||||
function handleLoading() {
|
||||
const { onLoading } = props;
|
||||
|
||||
if (onLoading) {
|
||||
onLoading();
|
||||
}
|
||||
}
|
||||
|
||||
handleError(err) {
|
||||
const { onError } = this.props;
|
||||
function handleError(err) {
|
||||
const { onError } = props;
|
||||
|
||||
if (onError) {
|
||||
onError(err);
|
||||
}
|
||||
}
|
||||
|
||||
handleShown(warnings) {
|
||||
const { onShown } = this.props;
|
||||
function handleShown(warnings) {
|
||||
const { onShown } = props;
|
||||
|
||||
if (onShown) {
|
||||
onShown(warnings);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="content with-diagram" id="js-drop-zone">
|
||||
<div className="canvas" id="js-canvas" ref={ this.containerRef }
|
||||
style={{
|
||||
border: "1px solid #000000",
|
||||
height: "90vh",
|
||||
width: "90vw",
|
||||
margin: "auto"
|
||||
}}
|
||||
></div>
|
||||
<div className="properties-panel-parent" id="js-properties-panel"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="content with-diagram" id="js-drop-zone">
|
||||
<div className="canvas" id="canvas" ref={ containerRef }
|
||||
style={{
|
||||
border: "1px solid #000000",
|
||||
height: "90vh",
|
||||
width: "90vw",
|
||||
margin: "auto"
|
||||
}}
|
||||
></div>
|
||||
<div className="properties-panel-parent" id="js-properties-panel"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue