bpmn-js / bmpn.io / coreUI / React

Question

资源

示例回购：https://github.com/aaronscribner/bmpn-coreui-react

核心UI：http://coreui.io/

问题在 Core UI 管理模板中使用它时，我似乎无法弄清楚如何将建模器设置为正确的宽度和高度。有没有人有尝试将此 BPMN 编辑器嵌入核心 UI 模板的经验？

我也在学习React，我现在好像在用头撞墙

Answer 1

link 已损坏，但我假设建模器被包裹在 div 元素内，因为它们在 bpmn.io examples.

中使用

建模器通常包含在两个 div 元素中，如示例中的代码所示：

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

上面的代码显示了一个元素js-drop-zone，它是拖放容器，允许您将文件拖入其中进行加载。内部元素是 js-canvas，它是要渲染的建模器实例的主要目标。

因为您知道这些元素的名称，所以您可以创建一个新的 css 样式表并操纵它们的宽度和高度，而无需额外的反应代码：

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

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

我刚刚添加了两个边框来提示您这两个元素的尺寸。希望对你有帮助。

注意：您仍然应该检查包中包含的建模器代码，如果它也具有相同的元素命名，如果不是，您需要找到它们的 ID 名称，例如通过浏览器检查。

Answer 2

这是一个有效的 React 组件

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

}

bpmn-js / bmpn.io / coreUI / React

bpmn-js / bmpn.io / coreUI / React

reactjs

bpmn.io