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制圖的更多信息。