Merge pull request #8 from wbn1883/master

升级electron增加右键菜单

.npmrc

@@ -1 +1,3 @@
 registry=https://registry.npm.taobao.org/
+ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
+ELECTRON_BUILDER_BINARIES_MIRROR=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

common/Utils.ts

@@ -1,7 +1,6 @@
 import { TreeGraphData } from "@antv/g6/lib/types";
 import { BehaviorNodeModel, BehaviorTreeModel, GraphNodeModel } from "./BehaviorTreeModel";
 import Settings from "../main-process/Settings";
-import { remote } from "electron";
 import * as path from "path";
 
 export const cloneNodeData = (nodeData: GraphNodeModel) => {
@@ -138,7 +137,7 @@ export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphD
 };
 
 export const getRemoteSettings = () => {
-    return remote.getGlobal("settings") as Settings;
+    return require("@electron/remote").getGlobal("settings") as Settings;
 };
 
 export const fileName2treeName = (filename: string) => {

main-process/AppMenu.ts

@@ -438,7 +438,7 @@ export default class AppMenu {
             if (typeItem.submenu instanceof Menu) {
                 console.log("typeItem.submenu error", typeItem);
             } else {
-                typeItem.submenu.push(item);
+                (typeItem.submenu as MenuItemConstructorOptions[]).push(item);
             }
         }
 

main-process/MainProcess.tsx

@@ -2,7 +2,6 @@ import { app, BrowserWindow, Menu, MenuItem, dialog, nativeTheme } from "electro
 import AppMenu from "./AppMenu";
 import Settings from "./Settings";
 import MainEventType from "../common/MainEventType";
-
 import electronLocalshortcut from "electron-localshortcut";
 
 // 一些暴露给render-process的全局变量
@@ -47,11 +46,14 @@ export class MainProcess {
             height: 800,
             webPreferences: {
                 nodeIntegration: true,
-                enableRemoteModule: true,
+                contextIsolation:false,
             },
             // fullscreenable:false,
             // maximizable:false
         });
+        
+        require("@electron/remote/main").initialize();
+        require("@electron/remote/main").enable(this.mainWindow.webContents);
         this.mainWindow.maximize();
         // mainWindow.webContents.openDevTools();
         this.mainWindow.loadFile("index.html");

package.json

@@ -31,10 +31,10 @@
     "@types/rimraf": "^3.0.0",
     "copy-webpack-plugin": "^6.3.1",
     "css-loader": "^4.3.0",
-    "electron": "^10.1.3",
+    "electron": "^20.0.3",
-    "electron-builder": "^22.9.1",
     "electron-localshortcut": "^3.2.1",
-    "electron-packager": "^15.1.0",
+    "electron-packager": "^15.5.2",
+    "electron-builder": "^23.3.3",
     "file-loader": "^6.1.1",
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
@@ -42,13 +42,14 @@
     "source-map-loader": "^1.1.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.4",
-    "typescript": "^4.0.3",
+    "typescript": "^4.7.4",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
-    "@antv/g6": "^3.8.1",
+    "@antv/g6": "^3.8.5",
+    "@electron/remote": "^2.0.8",
     "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
     "antd": "^4.6.6",

render-process/Editor/index.tsx

@@ -114,6 +114,10 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             },
         });
         
+        graph.on("contextmenu", (e: G6GraphEvent) => {
+            require("@electron/remote").Menu.getApplicationMenu().popup();
+        });
+
         graph.on("node:mouseenter", (e: G6GraphEvent) => {
             const { item } = e;
             if (item.hasState("selected")) {

render-process/TreeTabs.tsx

@@ -1,7 +1,7 @@
 import Editor from "./Editor";
 import React, { Component } from "react";
 import { Layout, Tabs, message } from "antd";
-import { ipcRenderer, remote } from "electron";
+import { ipcRenderer } from "electron";
 import * as path from "path";
 
 import "antd/dist/antd.dark.css";

render-process/index.css

@@ -16,7 +16,8 @@ body {
 
 .sider {
   height     : 100%;
-  overflow   : hidden;
+  overflow-y : auto;
+  overflow-x : hidden;
   transition : all 0s;
 }
 

render-process/index.tsx

@@ -2,11 +2,10 @@ import * as ReactDOM from "react-dom";
 import SyncRequest from "sync-request";
 import React, { Component } from "react";
 import { Layout, message, Tabs } from "antd";
-import { ipcRenderer, remote } from "electron";
 import * as Utils from "../common/Utils";
 import MainEventType from "../common/MainEventType";
 import Settings from "../main-process/Settings";
-
+import {ipcRenderer} from "electron";
 import "antd/dist/antd.dark.css";
 import "./index.css";
 import RegisterNode from "./RegisterNode";