MindFusion.Diagramming for WinForms是一個(gè)能幫助你創(chuàng)建工作流和進(jìn)程圖表的.NET控件；數(shù)據(jù)庫(kù)實(shí)體關(guān)系圖表；組織圖表；對(duì)象層次和關(guān)系圖表；圖表和樹(shù)。它是基于對(duì)象－圖表框，表格和箭頭類(lèi)型，將其歸類(lèi)分派給其他并結(jié)合成復(fù)雜的結(jié)構(gòu)。該控件提供超過(guò)預(yù)先定義的50多種圖表框，如自定義設(shè)計(jì)樣式和對(duì)圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購(gòu)，Standard Single Developer版本原價(jià)2848現(xiàn)在搶購(gòu)立享優(yōu)惠只需2345，立即查看詳情>>

點(diǎn)擊下載MindFusion.Diagramming for WinForms最新試用版

本教程演示了如何使用 flexbox 布局來(lái)排列 React 圖表庫(kù)附帶的各種圖表控件。我們將安排的控件是 DiagramView 、NodeListView、Ruler、Overview、Zoomer和Ruler。這是最終應(yīng)用程序的屏幕截圖：

我們打開(kāi)一個(gè)終端并導(dǎo)航到我們要?jiǎng)?chuàng)建應(yīng)用程序的文件夾。我們使用 create-react-app 來(lái)初始化一個(gè)空的 React 應(yīng)用程序：

npx create-react-app flex-diagram

npm install diagram-library-react

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

class DiagramApp extends Component {
  constructor(props) {
    super(props);

    // create the diagram
    var diagram = new mf.Diagramming.Diagram();
    ...........................

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

最后，我們需要在 React 狀態(tài)中存儲(chǔ)圖表，以及節(jié)點(diǎn)和形狀 id-s。當(dāng)我們?yōu)槲覀兊膽?yīng)用程序創(chuàng)建 HTML 時(shí)，我們將需要它們。在 React 中，訪問(wèn)類(lèi)變量的方式是將它們存儲(chǔ)在狀態(tài)中。

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

我們的 flexbox 布局具有以下結(jié)構(gòu)：

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

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

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

我們現(xiàn)在準(zhǔn)備處理中間的圖表。在這里，重要的是要指出該元素將伸展以占據(jù)所有可用位置。而且，當(dāng)空間變小時(shí)，必須收縮的就是這個(gè)項(xiàng)目：

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

最后，右側(cè)邊欄將托管縮放控件。它類(lèi)似于左側(cè)邊欄，但它沒(méi)有像 NodeListView 這樣的“特殊”項(xiàng)。Zoom 控件是一個(gè)固定大小的 UI 控件，不需要特殊處理。如果窗口太大，我們只需要確保沒(méi)有額外的空間被轉(zhuǎn)移到它上面：

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

三、“渲染”方法

我們?cè)谛碌?DiagramApp React 組件的 'render' 方法中聲明的第一件事是一些屬性：

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

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>      

    );

之后輪到圖表。它將占據(jù)中心區(qū)域，它的類(lèi)是“中心區(qū)域”。除了圖表之外，我們還將使用標(biāo)尺控件。我們首先放置它并將圖表嵌套在其中。我們使用擴(kuò)展運(yùn)算符將屬性分配給圖表，我們?cè)诜椒ㄩ_(kāi)始時(shí)初始化了這些屬性。

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

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

import DiagramApp from './DiagramApp';

ReactDOM.render(
 
    ,
  document.getElementById('root')
);

npm start

關(guān)于 JavaScript 圖表：這個(gè)原生 JavaScript 庫(kù)使開(kāi)發(fā)人員能夠創(chuàng)建和自定義任何類(lèi)型的圖表、決策樹(shù)、流程圖、類(lèi)層次結(jié)構(gòu)、圖形、譜系樹(shù)、BPMN 圖等等。該控件提供豐富的事件集、眾多自定義選項(xiàng)、動(dòng)畫(huà)、圖形操作、樣式和主題。您有 100 多個(gè)預(yù)定義節(jié)點(diǎn)、表節(jié)點(diǎn)和 15 多種自動(dòng)布局算法。在//mindfusion.eu/javascript-diagram.html 上了解有關(guān) JavaScript 圖表的更多信息。