进程图表的.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。可以使用按钮动态添加或删除表格中包含成分的行。单击配方图像时,将显示一个浏览对话框,您可以指向另一个对话框。
您可以自己测试页面:
![](https://mindfusion.eu/product_images/javascript/library/diagram/recipeNodes_jsdiagram.png)
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多种自动布局算法。