使用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。
这是我们的测试应用程序的外观:
![](https://mindfusion.eu/images/blog/javascript/electron.js_diagram.png)
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文件以制作示例图:
![](https://mindfusion.eu/images/blog/javascript/edit_electron_template.png)
然后,我们通过触发相应的图表方法来处理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制图的更多信息。