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

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

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

您可以自己測試頁面：

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

我們將鏈接添加到三個(gè)JavaScript文件。我們將它們添加到網(wǎng)頁的末尾，緊接關(guān)閉的BODY標(biāo)記之前：

<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>

我們還向網(wǎng)頁添加了一些CSS樣式選項(xiàng)。它們旨在使我們將更
漂亮的HTML控件嵌入到控件節(jié)點(diǎn)中。

二.控件

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

setTarget（diagram）; 
}}）;

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

三.節(jié)點(diǎn)模板

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

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）;

當(dāng)我們創(chuàng)建一個(gè)新節(jié)點(diǎn)時(shí)，該表將呈現(xiàn)一個(gè)示例行，您無法編輯該行。標(biāo)題也一樣。如果要使控件可編輯，則需要設(shè)置數(shù)據(jù)交互屬性：

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

這些都是您需要執(zhí)行的所有步驟，以便獲得具有可自定義配料，標(biāo)題和圖像數(shù)量的交互式配方節(jié)點(diǎn)。

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

關(guān)于JavaScript繪圖：此本地JavaScript庫為開發(fā)人員提供了創(chuàng)建和自定義任何類型的圖，決策樹，流程圖，類層次結(jié)構(gòu)，圖，家譜樹，BPMN圖等的能力。該控件提供了豐富的事件集，眾多的自定義選項(xiàng)，動(dòng)畫，圖形操作，樣式和主題。您有100多個(gè)預(yù)定義節(jié)點(diǎn)，表節(jié)點(diǎn)和15多種自動(dòng)布局算法。