进程图表的.NET控件在JavaScript图中使用ControlNode

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。可以使用按钮动态添加或删除表格中包含成分的行。单击配方图像时，将显示一个浏览对话框，您可以指向另一个对话框。

您可以自己测试页面：

I.常规设置

我们需要一个空白的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>

在网页中，我们需要两个Canvas元素：一个用于图表，一个用于概述控件。该概述控制出了示意图的迷你版。绘制流程图很方便，但不是必需的。

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

我们还添加了ZoomControl控件，并为所有HTML控件提供了ID。这很重要，因为我们需要此id来引用JavaScript代码中的Canvas元素。

我们还向网页添加了一些CSS样式选项。它们旨在使我们将更
漂亮的HTML控件嵌入到控件节点中。

二.控件

现在我们已经在网页中设置了所有代码，我们开始对JavaScript代码隐藏文件进行编码。我们添加了一些名称空间映射，以使代码更短。如果使用的是Visual Studio Code，则可以添加图库的TypeScript定义。这将在您编码时启用IntelliSense支持。

我们处理初始HTML文档的DOMCOntentLoaded事件以初始化MindFusion控件。

setTarget（diagram）; 
}}）;

我们获得与在网页中创建的三个Canvas元素相对应的HTML元素。我们使用Web API的document.getElementById。现在您将看到我们使用先前指定的Canvas元素的ID查询文档。

该概述和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);

我们还使用setBounds指定新的DiagramNode在图的工作区上的位置。如果在浏览器中打开网页，则将新节点添加到具有addItem的DiagramItem -s集合中也很重要，我们将看到纸杯蛋糕的食谱节点。但是，如果创建新节点，我们将看到它们呈现为默认的白色矩形：

为了进行更改，我们需要使用自定义模板（我们的配方节点）替换关系图节点的默认模板。这是新的模板：

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

现在我们可以调用setDefaultControlTemplate方法来告诉图，从现在开始，当创建新的DiagramNode -s时，它们将具有以下模板：

diagram.setDefaultControlTemplate（defaultTemplate）;

IV.互动性

当我们创建一个新节点时，该表将呈现一个示例行，您无法编辑该行。标题也一样。如果要使控件可编辑，则需要设置数据交互属性：

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

通常，每个ControlNode都公开各种属性，这些属性可通过以下语法访问：

 data-attributeName =“ value”

从上面的代码中可以看到，有data-event-click属性。此属性指定节点中呈现的按钮的click事件的事件处理程序。这里是：

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

在事件处理程序中，我们检查表中是否有行，如果是，则复制第一行。如果没有行，我们将添加一个包含默认数据的新行。data-event-eventName是用于处理ControlNode中包含的HTML控件上可用事件的语法，这是我们指定杯形蛋糕图像可点击的方式：

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

如您所见，它是交互式的，我们可以处理它的click事件。单击图像后，将出现一个对话框，我们可以选择一个新图像：

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

选择新图像后，我们将其Base64表示形式作为源分配给ControlNode模板中的图像元素，该图像元素代表烹饪食谱。

 

这些都是您需要执行的所有步骤，以便获得具有可自定义配料，标题和图像数量的交互式配方节点。

可通过此处的MindFusion论坛获得技术支持。

关于JavaScript绘图：此本地JavaScript库为开发人员提供了创建和自定义任何类型的图，决策树，流程图，类层次结构，图，家谱树，BPMN图等的能力。该控件提供了丰富的事件集，众多的自定义选项，动画，图形操作，样式和主题。您有100多个预定义节点，表节点和15多种自动布局算法。