MindFusion.Diagramming for WinForms是一個能幫助你創建工作流和進程圖表的.NET控件；數據庫實體關系圖表；組織圖表；對象層次和關系圖表；圖表和樹。它是基于對象－圖表框，表格和箭頭類型，將其歸類分派給其他并結合成復雜的結構。該控件提供超過預先定義的50多種圖表框，如自定義設計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現已加入在線訂購，Standard Single Developer版本原價2848現在年終鉅惠搶購立享優惠只需2345，立即查看詳情>>

點擊下載MindFusion.Diagramming for WinForms最新試用版

在此博客文章中，我們將研究如何使用Mindusion Diagramming庫為JavaScript構建ControlNode -s。我們將創建一個網頁，該網頁創建用于烹飪食譜的模板。每個配方都是一個DiagramNode。可以使用按鈕動態添加或刪除表格中包含成分的行。單擊配方圖像時，將顯示一個瀏覽對話框，您可以指向另一個對話框。

您可以自己測試頁面：

我們需要一個空白的HTML頁面和一個空白的JavaScript文件，其中將包含應用程序的代碼。

我們將鏈接添加到三個JavaScript文件。我們將它們添加到網頁的末尾，緊接關閉的BODY標記之前：

<script src =“ MindFusion.Common.js” type =“ text / javascript”> </ script>
<script src =“ MindFusion.Diagramming.js” type =“ text / javascript”> </ script>
<script src =“ RecipeNodes.js” type =“ text / javascript”> </ script>

<div id="content" style="top: 60px; bottom: 24px;">
        <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 200px; border-right: 1px solid #e2e4e7;
overflow: hidden; vertical-align: top;">
            <!-- The Overview component is bound to the canvas element below -->
            <div style="position: absolute; top: 0px; bottom: 0px; right: 0px; width: 200px;
height: 200px; border-bottom: 1px solid #e2e4e7; background-color: #c0c0c0;">
                <canvas id="overview" width="200" height="200">
                </canvas>
            </div>            
        </div>
        <!-- The Diagram component is bound to the canvas element below -->
        <div style="position: absolute; left: 200px; top: 0px; right: 0px; bottom: 0px; overflow: auto;">
            <canvas id="diagram" width="2100" height="2100">
                This page requires a browser that supports HTML 5 Canvas element.
            </canvas>
        </div>
        <!-- The ZoomControl component is bound to the canvas element below -->
        <div style="width: 50px; height: 300px; position: absolute; top: 20px; right: 35px;
width: 50px; height: 300px;z-index:3;">
            <canvas id="zoomer" width="50" height="300">
            </canvas>
        </div>
    </div>

我們還向網頁添加了一些CSS樣式選項。它們旨在使我們將更
漂亮的HTML控件嵌入到控件節點中。

二.控件

現在我們已經在網頁中設置了所有代碼，我們開始對JavaScript代碼隱藏文件進行編碼。我們添加了一些名稱空間映射，以使代碼更短。如果使用的是Visual Studio Code，則可以添加圖庫的TypeScript定義。這將在您編碼時啟用IntelliSense支持。

setTarget（diagram）; 
}}）;

該概述和zoomControl可實例使用setDiagram和setTarget方法prespectively，指定圖情況下，它們應該被約束。

三.節點模板

該ControlNode類允許我們以初始化的外觀使用純HTML ControlNode這與setTemplate方法來完成。您可以為創建的每個ControlNode實例指定不同的模板。

var node1 = new MindFusion.Diagramming.ControlNode(diagram);
        node1.setTemplate(`<input value="Cupcakes" data-interactive="true"></input>
	<div style="padding:10px"><img width="70" height="70" title="Click to choose picture" style="float:left" src="data:image/png;base64,${placeholderBase64}" data-interactive="true" data-event-click="placeholderClick" /><table width="50%"><tr><td contenteditable='true' data-interactive="true">softened butter</td><td contenteditable='true' data-interactive="true">110g</td></tr><tr><td contenteditable='true' data-interactive="true">golden caster sugar</td><td contenteditable='true' data-interactive="true">110g</td></tr><tr><td contenteditable='true' data-interactive="true">large eggs</td><td contenteditable='true' data-interactive="true">2</td></tr><tr><td contenteditable='true' data-interactive="true">vanilla extract</td><td contenteditable='true' data-interactive="true">? tsp</td></tr>
<tr><td contenteditable='true' data-interactive="true">self-raising flour</td><td contenteditable='true' data-interactive="true">110g</td></tr></table></div>
	<button data-interactive="true" data-event-click="addRow">Add Ingredient</button>
	<button data-interactive="true" data-event-click="removeRow">Remove Ingredient</button>
	<div style="width: 100%;"><textarea id="w3review" name="w3review"  rows="4" columns="50" data-interactive="true">
  Using an electric whisk beat 110g softened butter and 110g golden caster sugar together until pale and fluffy then whisk in 2 large eggs, one at a time, scraping down the sides of the bowl after each addition.
Add ? tsp vanilla extract, 110g self-raising flour and a pinch of salt, whisk until just combined then spoon the mixture into the cupcake cases.
  </textarea></div>`);
        node1.setBounds(new Rect(40, 20, 100, 100))
        diagram.addItem(node1);

 var defaultTemplate = `
<input placeholder="Recipe Title" data-interactive="true"></input>
<div style="padding:10px"><img width="70" height="70" title="Click to choose picture" style="float:left" src="data:image/png;base64,${placeholderBase64}" /><table width="50%"><tr><td contenteditable='true' data-interactive="true">Milk</td><td contenteditable='true' data-interactive="true">1 cup</td></tr></table></div>

<div><button>Add Ingredient</button>
<button>Remove Ingredient</button>
<div><textarea id="w3review" name="w3review"  rows="4" columns="50" data-interactive="true">
  Preparation
  </textarea></div>`;

diagram.setDefaultControlTemplate（defaultTemplate）;

當我們創建一個新節點時，該表將呈現一個示例行，您無法編輯該行。標題也一樣。如果要使控件可編輯，則需要設置數據交互屬性：

<div><button data-interactive="true" data-event-click="addRow">Add Ingredient</button>

 data-attributeName =“ value”

function addRow(e, sender)
{
var table = sender.getContent().getElementsByTagName("table")[0];


  var rows = table.getElementsByTagName('tr');
  if(rows.length > 0)
      {
   var clone = rows[rows.length - 1].cloneNode(true); 
           table.appendChild(clone);
  }
  else
  {
  var tr = document.createElement('tr');
           
          var td = document.createElement('td');
         td.appendChild(document.createTextNode('Milk'))
         td.setAttribute('contenteditable', 'true');
td.setAttribute('data-interactive', 'true');
         tr.appendChild(td);
 
td = document.createElement('td');
         td.appendChild(document.createTextNode('1 cup'))
         td.setAttribute('contenteditable', 'true');
td.setAttribute('data-interactive', 'true');
         tr.appendChild(td);
 
table.appendChild(tr);
      }
}

<img width="70" height="70" title="Click to choose picture" style="float:left" src="data:image/png;base64,${placeholderBase64}" data-interactive="true" data-event-click="placeholderClick" />

function placeholderClick(e, sender)
{
    var input = document.createElement("input");
    input.type = "file";
    var img = e.target;
    input.addEventListener('change', e =>
    {
        Utils.toDataUrl(URL.createObjectURL(e.target.files[0]), function (base64str)
        {
            img.src = base64str;
            sender.setTag(base64str);
            sender.createImage();
        });
    })
    input.click();
}

這些都是您需要執行的所有步驟，以便獲得具有可自定義配料，標題和圖像數量的交互式配方節點。

可通過此處的MindFusion論壇獲得技術支持。

關于JavaScript繪圖：此本地JavaScript庫為開發人員提供了創建和自定義任何類型的圖，決策樹，流程圖，類層次結構，圖，家譜樹，BPMN圖等的能力。該控件提供了豐富的事件集，眾多的自定義選項，動畫，圖形操作，樣式和主題。您有100多個預定義節點，表節點和15多種自動布局算法。