使用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将被该图使用：
<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>
我们首先创建一个映射到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文件以制作示例图：
然后，我们通过触发相应的图表方法来处理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制图的更多信息。
