MindFusion教程：在 React 中使用 Flexbox 布局排列图表组件

本教程演示了如何使用 flexbox 布局来排列 React 图表库附带的各种图表控件。我们将安排的控件是 DiagramView 、NodeListView、Ruler、Overview、Zoomer和Ruler。

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在抢购立享优惠只需2345，立即查看详情>>

MindFusion.Diagramming for WinForms最新试用版

本教程演示了如何使用 flexbox 布局来排列 React 图表库附带的各种图表控件。我们将安排的控件是 DiagramView 、NodeListView、Ruler、Overview、Zoomer和Ruler。这是最终应用程序的屏幕截图：

我们打开一个终端并导航到我们要创建应用程序的文件夹。我们使用 create-react-app 来初始化一个空的 React 应用程序：

npx create-react-app flex-diagram

正如您一样，我们将应用程序命名为 flex-diagram。初始 React 设置完成后，我们安装图表：

npm install diagram-library-react

一旦我们完成了，我们就可以开始编写我们的应用程序了。我们添加一个新的 JavaScript 文件，我们将其命名为 DiagramApp.js。在其中我们首先导入默认的 React 命名空间并声明 Component 类的成员导入。然后我们在名称“mf”下声明 MindFuson 图表库的默认导入。最后，我们声明我们打算使用的控件类的成员导入：DiagramView、Overview、NodeListView、ZoomControl 和 Ruler：

import React, { Component } from 'react';import mf from 'diagram-library';import { DiagramView, Overview, NodeListView, ZoomControl, Ruler } from 'diagram-library-react';

然后我们可以创建我们的类 DagramApp，它扩展了组件。我们需要一个构造函数，所以我们声明一个。在其中我们创建了一个Diagram类的实例，它代表了图表。请注意，这不是用于呈现图表的 React 类的 DiagramView。这是交互式图表，实际上是由DiagramView 渲染的。

class DiagramApp extends Component {  constructor(props) {    super(props);    // create the diagram    var diagram = new mf.Diagramming.Diagram();    ...........................

然后我们创建一个ShapeNode实例数组，它将被NodeListView控件使用。同样，NodeListView是一个呈现节点的 UI 组件，但它不会创建它们。它们作为参数提供给它。

var nodes = [];    var shapes = ["Actor", "RoundRect", "Triangle", "Decision"];    for (var i = 0; i < shapes.length; ++i) {      var node = new mf.Diagramming.ShapeNode(diagram);      node.setText(shapes[i]);      node.setShape(shapes[i]);      nodes.push(node); }

我们仅使用ShapeNode -s的 id-s 创建一个数组，我们也将其用作它们的标签。您可以在https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htmC_refTable_of_Predefined_Shapes_4.htm检查可用的预定义ShapeNode -s的 id-s 。

最后，我们需要在 React 状态中存储图表，以及节点和形状 id-s。当我们为我们的应用程序创建 HTML 时，我们将需要它们。在 React 中，访问类变量的方式是将它们存储在状态中。

    this.state = {      diagram: diagram,      nodes: nodes,      captions: shapes    };

二、使用 CSS 和 Flexbox 布局排列 UI

我们的 flexbox 布局具有以下结构：

.container{  display: flex;  flex: 1 1 100%;  min-height: 500px;  flex-flow: row nowrap;  background-color: azure;  }

容器中的第一项是我们要将概览和NodeListView控件放在一起的垂直列。此列需要保持固定大小。当用户调整页面大小时，我们不希望它调整大小。当可用空间发生变化时，必须调整中间的图表。我们称该列为“left-sidebar”并将其“flex-flow”设置为 column。如果可用空间太短，我们再次使用 no wrap 来停止将两个控件并排放置的布局。我们还将此元素的宽度固定为 200 像素，这很适合我们的控件。

.left-sidebar{  flex: 0 0 200px;  display: flex;  flex-flow: column nowrap;  background-color: beige;  }

我们希望概览和NodeListView控件占用空间的方式有所不同。概览需要固定的空间。我们希望为 NodeListView 提供额外的空间。这就是为什么我们再添加一种样式来应用它：

.item {  align-self: stretch;  background-color:lightpink;  flex: 1 1 300px;   }

我们将 1 作为 flex-grow 和 flex-shrink 的值，表示我们希望调整此元素的大小，而不是右列中的其他项目。

我们现在准备处理中间的图表。在这里，重要的是要指出该元素将伸展以占据所有可用位置。而且，当空间变小时，必须收缩的就是这个项目：

.center-area {     align-self: stretch;     background-color:chartreuse;     flex: 10 10 500px;     max-height: 800px;     overflow: hidden;}

我们为 flex-grow 和 ‘flex-shrink’ 属性设置大值，并将 flex-basis 设置为 500 像素。我们必须将图表的高度限制为 800 像素，因为它可能会变得很长。’align-self’ 的重要属性，它应用于由 flexbox 容器排列的项目，而不是容器本身。在这里，我们使用此属性告诉图表在空间可用时自行拉伸。隐藏溢出属性以避免在大图中呈现不必要的滚动条。

最后，右侧边栏将托管缩放控件。它类似于左侧边栏，但它没有像 NodeListView 这样的“特殊”项。Zoom 控件是一个固定大小的 UI 控件，不需要特殊处理。如果窗口太大，我们只需要确保没有额外的空间被转移到它上面：

.right-sidebar{  flex: 0 0 50px;  background-color: lavender;   }

这是我们需要定义的最后一个元素的最后一个样式。现在我们准备将这些样式应用到真正的 React 组件并安排它们。

三、“渲染”方法

我们在新的 DiagramApp React 组件的 ‘render’ 方法中声明的第一件事是一些属性：

 var props = {      "id": "diagram1",      "linkHeadShapeSize": 2,      "routeLinks": true,      "roundedLinks": true,      "backBrush": "#e0e9e9"    };

这些是Diagram实例的属性，我们将通过 JavaScrpt 展开运算符提供它们。然后在 return 语句中我们首先声明容器 div 元素。它的风格是“容器”。在其中我们声明了左侧边栏，它将包含概览和 NodeListView。我们也声明它们：

return (              <div className="container">             <div className="left-sidebar">                 <Overview diagram={this.state.diagram}></Overview>   <NodeListView className="item"                nodes={this.state.nodes}                captions={this.state.captions}              ></NodeListView>                      </div>                    </div>          );

该概述被绑定到图中，我们坚持国家目标。该NodeListView需要与节点和标题列表，如果我们要加强对节点字幕。我们想要并且我们已经将节点和标题存储在状态中。

之后轮到图表。它将占据中心区域，它的类是“中心区域”。除了图表之外，我们还将使用标尺控件。我们首先放置它并将图表嵌套在其中。我们使用扩展运算符将属性分配给图表，我们在方法开始时初始化了这些属性。

<div className="center-area">                  <Ruler style={{ width: "100%", height:"800px" }}>                <DiagramView diagram={this.state.diagram}                  {...props}                  />            </Ruler>            </div>

最后，我们声明右侧边栏，其中包含缩放控件。Zoom 控件还需要绑定到一个图表实例，我们使用 state 来获取对我们图表的引用：

          <div className="right-sidebar">          <ZoomControl diagram={this.state.diagram}></ZoomControl>        </div>

这样我们的组件就准备好了。我们只需要将它放在 index.js 而不是默认的 App 组件中：

import DiagramApp from './DiagramApp';ReactDOM.render(    ,  document.getElementById('root'));

我们可以用

npm start

然后您可以在本地主机的端口 3000 上看到您的应用程序。
您可以从此链接下载结构为 npm 项目的完整代码：

下载完整源代码

对于技术问题，请使用 JS Diagram 论坛：https : //mindfusion.eu/Forum/YaBB.ploard=jsdiag_disc

关于 JavaScript 图表：这个原生 JavaScript 库使开发人员能够创建和自定义任何类型的图表、决策树、流程图、类层次结构、图形、谱系树、BPMN 图等等。该控件提供丰富的事件集、众多自定义选项、动画、图形操作、样式和主题。您有 100 多个预定义节点、表节点和 15 多种自动布局算法。在https://mindfusion.eu/javascript-diagram.html 上了解有关 JavaScript 图表的更多信息。

想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】

标签：