Bpmn.js parsing issue

Developers
1

There was a problem loading bpmn by converting element to string.
my code is…

const parsing = params => {
let xmlDoc = document.implementation.createDocument(’’, ‘’, null);
let root = xmlDoc.createElement(‘bpmn2:definitions’);
…

return root.outerHTML;
};

const mounted = () => {
const str = parsing(props);
this.openBpmnDiagram(str);
};

openBpmnDiagram = xml => {
console.log(‘xmltype :’ + typeof xml);
this.modeler.importXML(xml, error => {
if (error) {
return console.log(‘fail import xml’);
}
var canvas = this.modeler.get(‘canvas’);
canvas.zoom(‘fit-viewport’);
});
};

Why isn’t the dialogue drawn?
Help me.

2

May you do us a favor and format your code so it’s readable?

3

This is my source code.

componentWillReceiveProps = props => {
        this.modeler = new BpmnModeler({
            container: '#bpmnview',
            keyboard: {
                bindTo: document.body,
            },
            additionalModules: [minimapModule, customControlsModule],
        });
        this.setState({ mountedModeler: this.modeler });

        const str = parsing(props);

        this.openBpmnDiagram(str);
    };

openBpmnDiagram = xml => {
        console.log('xmltype :' + typeof xml);
        this.modeler.importXML(xml, error => {
            if (error) {
                return console.log('fail import xml');
            }
            var canvas = this.modeler.get('canvas');
            canvas.zoom('fit-viewport');
        });
    };

const parsing = params => {
    const data = params.step;

    let xmlDoc = document.implementation.createDocument('', '', null);
    let root = xmlDoc.createElement('bpmn2:definitions');
    let process = xmlDoc.createElement('bpmn2:process');
    let di = xmlDoc.createElement('bpmndi:BPMNDiagram');
    let diChild = xmlDoc.createElement('bpmndi:BPMNPlane');

    root.setAttribute('xmlns:xsi', 'http://www.w3.org/2001/XMLSchema-instance');
    root.setAttribute('xmlns:bpmn2', 'http://www.omg.org/spec/BPMN/20100524/MODEL');
    root.setAttribute('xmlns:bpmndi', 'http://www.omg.org/spec/BPMN/20100524/DI');
    root.setAttribute('xmlns:dc', 'http://www.omg.org/spec/DD/20100524/DC');
    root.setAttribute('xmlns:di', 'http://www.omg.org/spec/DD/20100524/DI');
    root.setAttribute('id', 'bpmn-diagram');
    root.setAttribute('targetNamespace', 'http://bpmn.io/schema/bpmn');
    root.setAttribute('xsi:schemaLocation', 'http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd');

    process.setAttribute('id', 'Process_diagram');

    di.setAttribute('id', 'BPMNDiagram_1');

    diChild.setAttribute('id', 'BPMNPlane_1');
    diChild.setAttribute('bpmnElement', 'Process_diagram');

    for (let idx in data) {
        switch (data[idx].stepType) {
            case 'START':
                createElement(data[idx], 'bpmn2:startEvent', xmlDoc, process);
                break;
            case 'BUSINESS':
                createElement(data[idx], 'bpmn2:task', xmlDoc, process);
                break;
            case 'GLOBAL':
                createElement(data[idx], 'bpmn2:exclusiveGateway', xmlDoc, process);
                break;
            case 'END':
                createElement(data[idx], 'bpmn2:endEvent', xmlDoc, process);
                break;
        }

        let bpmnShape = xmlDoc.createElement('bpmndi:BPMNShape');
        bpmnShape.setAttribute('id', `${data[idx].id}_di`);
        bpmnShape.setAttribute('bpmnElement', data[idx].id);

        let dounds = xmlDoc.createElement('dc:Bounds');
        let size = data[idx].stepType === 'START' || data[idx].stepType === 'END' ? 36 : 70;

        dounds.setAttribute('x', data[idx].x);
        dounds.setAttribute('y', data[idx].y);
        dounds.setAttribute('width', size);
        dounds.setAttribute('height', size);

        bpmnShape.append(dounds);
        diChild.append(bpmnShape);

        const connectors = data[idx].connectors;
        if (connectors.length > 0) {
            let sequenceFlow = xmlDoc.createElement('bpmn2:sequenceFlow');
            sequenceFlow.setAttribute('id', 'sequenceFlow_' + data[idx].id);

            for (let j in connectors) {
                sequenceFlow.setAttribute('sourceRef', connectors[j].sourceStepId);
                sequenceFlow.setAttribute('targetRef', connectors[j].targetStepId);
            }
            process.append(sequenceFlow);
        }

        const waypoints = data[idx].waypoints;
        if (waypoints.length > 0) {
            let bpmnEdge = xmlDoc.createElement('bpmn2:BPMNEdge');
            bpmnEdge.setAttribute('id', `sequenceFlow_${data[idx].id}_di`);
            bpmnEdge.setAttribute('bpmnElement', `sequenceFlow_${data[idx].id}`);

            for (let k in waypoints) {
                let waypoint = xmlDoc.createElement('di:waypoint');
                waypoint.setAttribute('x', waypoints[k].x);
                waypoint.setAttribute('y', waypoints[k].y);

                bpmnEdge.append(waypoint);
            }

            diChild.append(bpmnEdge);
        }
    }

    di.append(diChild);
    root.append(process);
    root.append(di);

    return root.outerHTML;
};
4

Can you please explain what you’re trying to do?