MindFusion.Diagramming for WinForms使用教程:在JavaScript图中使用ControlNode

原创|行业资讯|编辑:杨鹏连|2020-11-26 14:04:23.370|阅读 98 次

概述:在此博客文章中,我们将研究如何使用Mindusion Diagramming库为JavaScript构建ControlNode -s。

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

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多种自动布局算法。


想要购买该产品正版授权请点击【商城购买】,想了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:MindFusion

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat