bpmn-js / bmpn.io / coreUI / React

Question

Resources

Sample Repo: https://github.com/aaronscribner/bmpn-coreui-react

CoreUI: http://coreui.io/

Issue I cannot seem to figure out how to set the modeler to the correct width and height when using this inside of the Core UI admin template. Does anyone have any experience with trying to embed this BPMN editor inside of a Core UI template?

I am also learning React and I seem to be beating my head against a wall right now.

Answer 1

Here's a working react component

import Modeler from "bpmn-js/lib/Modeler";

import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

import { useEffect, useRef } from "react";

const xml = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.3.5">
  <bpmn:process id="Process_1" isExecutable="true">
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`;

export default function CfsSpec() {
    const containerRef = useRef(null);

    useEffect(() => {
        const container = containerRef.current;

        const modeler = new Modeler({
            container,
            keyboard: {
                bindTo: document
            }
        });

        modeler.importXML(xml, err => {
            if (err) {
                console.error(err);
            }

            const canvas = modeler.get("canvas");
            const elementFactory = modeler.get("elementFactory");

            canvas.zoom("fit-viewport");

            var task = elementFactory.createBpmnElement("shape", {
                type: "bpmn:Task",
                x: 350,
                y: 100
            });

            var root = canvas.getRootElement();

            canvas.addShape(task, root);
        });

    }, [])


    return (
        <div ref={containerRef} style={{width: '100%', height: '100%'}}>
        </div>
    );

}

Answer 2

The link is broken but I assume, that the modeler is wrapped inside the div elements, as they are used in the bpmn.io examples.

The modeler is usually wrapped into two div elements, as shown in the code from the examples:

<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>

The above code shows one element as js-drop-zone which is the drag and drop container that allows you to drag files into it to load. The inner element is the js-canvas which is the primary target for the modeler instance to be rendered.

Since you know the names of these elements, you can create a new css stylesheet and manipulate their width and height without the need of additional react code:

#js-drop-zone {
    width: 100%;
    border: solid 1px F00;
}

#js-canvas {
    width: 100%;
    border: solid 1px 0F0;
}

I just added the two borders to hint your with the dimensions of these both elements. Hope that helps you.

Note: You still should check on the code of the modeler, that you are including by the package, if it also has the same naming of the elements and if not you need to find their id names e.g. by inspecting with the browser.