reactjs - bpmn-js / bmpn.io / coreUI / React

Question

资源

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

核心用户界面：http : //coreui.io/

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

我也在学习 React，我现在似乎正在碰壁。

Answer 1

该链接已损坏，但我假设建模器包含在 div 元素中，因为它们在bpmn.io 示例中使用。

建模器通常包含在两个 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 名称，例如通过浏览器检查。