bpmn-js / bmpn.io / coreUI / React

Question

资源

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

CoreUI：http://coreui.io/

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

我也在学习React，而且我现在似乎正在撞墙。

Answer 1

链接被破坏但我认为，建模者被包裹在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名称，例如通过浏览器检查。