使用Electron.js运行JavaScript图应用程序

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。

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

1.安装NPM和Node.js

我们想要干净安装Node.js和npm，这就是为什么我们删除所有以前的版本和安装的原因，如果有的话：
sudo apt-get remove nodejs
sudo apt-get remove npm
卸载npm和Node.js后，我们将删除npm和node_modules文件夹的内容。
sudo rm -rf ~/.npm
sudo 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 -v
node -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_modules
total 12
drwxr-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将被该图使用：

我们首先创建一个映射到MindFusion.Diagramming.Diagram类的名称空间。然后，我们获得放置在网页中的HTML Canvas。我们使用ID进行识别。我们使用create静态方法创建Diagram对象，该方法将Canvas作为参数。然后，我们为新创建的图启用撤消和就地编辑。让我们创建一个呈现一些文本的示例节点。我们这样做： //创建一个样本节点 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; } } } } } 我们编辑Electron.js模板的index.html和index.js文件以制作示例图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104134717169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JvZmZleVlhbmc=,size_16,color_FFFFFF,t_70) 然后，我们通过触发相应的图表方法来处理click事件。我们使用ipcRenderer常量获取事件： 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.pl?board=jsdiag_disc 关于JavaScript绘图：此本地JavaScript库为开发人员提供了创建和自定义任何类型的图，决策树，流程图，类层次结构，图，家谱树，BPMN图等的能力。该控件提供了丰富的事件集，众多的自定义选项，动画，图形操作，样式和主题。您有100多个预定义节点，表节点和15多种自动布局算法。在https://mindfusion.eu/javascript-diagram.html上了解有关JavaScript制图的更多信息。想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果原文链接：https://www.evget.com/article/2021/1/4/39955.html