MindFusion.Diagramming for WinForms使用教程：使用Electron.js运行JavaScript图应用程序

在此博客文章中，我们将演示如何设置Unix / Linux系统以在Electron.js下运行示例JavaScript图应用程序。我们使用一台运行Raspberry Pi OS的Raspberry Pi计算机，Raspberry Pi OS是为Raspberry Pi硬件而优化的基于Debian的OS。

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在年终钜惠抢购立享优惠只需2345，立即查看详情>>

MindFusion.Diagramming for WinForms最新试用版

在此博客文章中，我们将演示如何设置Unix / Linux系统以在Electron.js下运行示例JavaScript图应用程序。我们使用一台运行Raspberry Pi OS的Raspberry Pi计算机，Raspberry Pi OS是为Raspberry Pi硬件而优化的基于Debian的OS。

这是我们的测试应用程序的外观：

我们想要干净安装Node.js和npm，这就是为什么我们删除所有以前的版本和安装的原因，如果有的话：

sudo apt-get remove nodejssudo apt-get remove npm

卸载npm和Node.js后，我们将删除npm和node_modules文件夹的内容。

sudo rm -rf ~/.npmsudo rm -rf /usr/local/lib/node_modules

然后，我们通过直接从npmjs 站运行安装脚本来安装npm和node.js：

curl -0 -L https://npmjs.org/install.sh | sudo sh

我们可以通过查询系统当前的npm和node.js版本来检查安装是否成功：

npm -vnode -v

如果您已卸载npm来重新安装它，则可能会出现以下错误：

-bash: /usr/bin/npm: No such file or directory

常见的情况是新的npm安装在新位置，并且bash已缓存路径。跑

hash -r

删除所有以前存储的映射。

在开始安装electron之前，请确保当前用户具有对node_modules目录的写权限。我们检查谁是目录的所有者：

ls -la / usr / local / lib / node_modules

在我们的例子中，结果是：

drwxr-xr-x 3 root root 4096 Nov 30 12:48 .drwxr-xr-x 6 root   root 4096 Nov 30 12:29 ..drwxr-xr-x 9 root root 4096 Nov 30 12:29 npm

这意味着node_modules目录的读取权限归root（不是当前用户）所有。即使使用“ sudo”运行npm install命令，您仍可能会收到以下类型的访问冲突错误：
Error: EACCES: permission denied, mkdtemp ‘/usr/local/lib/node_modules/electron/electron-download-4LQBL9’
您可以通过授予当前用户权限来解决此问题：

sudo chown -R pi: /usr/local/lib/node_modules

在我们的情况下，该用户称为“ pi” –您需要在此处指定用户名。现在，该目录的查询返回：

pi@raspberrypi:~ $ ls -la /usr/local/lib/node_modulestotal 12drwxr-xr-x 3 pi pi   4096 Nov 30 12:48 .drwxr-xr-x 6 pi root 4096 Nov 30 12:29 ..drwxr-xr-x 9 pi pi   4096 Nov 30 12:29 npm

现在我们准备安装Electron.js。我们通过以下方式在全球范围内安装它：

npm install electron -g

并且我们已经设置了系统来运行Node.js和Electron.js。

二.图表设置

我们使用Electron快速入门指南中的默认模板准备一个空白页。在 页的主体中，我们创建一个Canvas，该Canvas将被该图使用：

<div><canvas id =“ diagram”></ canvas></ div>

然后，我们添加对图脚本的引用：

<script src =“ MindFusion.Common.js”> </ script><script src =“ MindFusion.Diagramming.js”> </ script>

我们已将这些脚本放置在与 页相同的目录中。然后，我们开始一个新的脚本部分，在其中创建图：

<script>   //创建图   var Diagram = MindFusion.Diagramming.Diagram;    //创建图对象    const canvas = document.getElementById（“ diagram”）;    const diagram = Diagram.create（canvas）;    diagram.setUndoEnabled（true）;    diagram.setAllowInplaceEdit（true）;</ script>

让我们创建一个呈现一些文本的示例节点。我们这样做：

//创建一个样本节点const node = diagram.getFactory（）。createShapeNode（10，10，40，30）;node.setText（“ Hello world！”）;

现在，如果您使用

npm start

从项目文件所在的目录中，您将能够看到带有节点的页面。

三.替换默认的Electron.js菜单

我们要用对图表项目执行的操作替换默认的电子菜单“复制”，“剪切”，“粘贴”，“撤消”和“重做”。Diagram API支持相同的命令，我们希望它们执行而不是Electron.js提供的命令。

我们打开电子项目模板的index.js文件并获得菜单：

const {Menu} = require（'electron'）;const menu = Menu.getApplicationMenu（）;

现在，我们访问此菜单中的每个项目，并通过onclick使它们发送其角色，例如其行为：

for (let item of menu.items)  {if (item.submenu){  {    for (let subitem of item.submenu.items){  switch (subitem.role)  {case "undo":case "redo":case "cut":case "copy":case "paste":  subitem.click =    () => win.webContents.send(subitem.role);  break;  }}  }}  }

const {ipcRenderer} = require（'electron'）;

ipcRenderer是Electron的用于发出事件的模块。我们使用它来了解菜单按钮上的click事件何时发生并处理点击：

ipcRenderer.on("undo", () => diagram.undo());ipcRenderer.on("redo", () => diagram.redo());ipcRenderer.on("cut", () => diagram.cutToClipboard());ipcRenderer.on("copy", () => diagram.copyToClipboard());ipcRenderer.on("paste", () => diagram.pasteFromClipboard(10, 10, false, false));

这意味着，当用户单击内置菜单项时，该动作将被那些图表方法代替。

这就是我们教程的结尾。从以下位置下载示例项目：https : 
//mindfusion.eu/_samples/FirstApp.zip

有关技术问题，请使用JS Diagram论坛：https : //mindfusion.eu/Forum/YaBB.ploard=jsdiag_disc

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

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

标签：