feat: upgrade to G6 3.3.x

Author: gaoli

babel.config.js

@@ -12,7 +12,10 @@ module.exports = function(api) {
     '@babel/preset-react',
   ];
 
+  const plugins = ['lodash'];
+
   return {
     presets,
+    plugins,
   };
 };

examples/component-command/index.tsx

@@ -4,6 +4,7 @@ import upperFirst from 'lodash/upperFirst';
 import { Divider, Tooltip } from 'antd';
 import { EditorCommand } from '@/common/constants/index.js';
 import GGEditor, { Flow, Mind, Command, ContextMenu, EditableLabel } from '@/index';
+import { Item } from '@/common/interfaces';
 import flowData from '../mock/flow.json';
 import mindData from '../mock/mind.json';
 import IconFont from './IconFont';
@@ -40,7 +41,7 @@ const MIND_COMMAND_LIST = [
 ];
 
 class Index extends React.Component {
-  renderContent = (item: G6.Item, position: { x: number; y: number }, hide: () => void) => {
+  renderContent = (item: Item, position: { x: number; y: number }, hide: () => void) => {
     const { x: left, y: top } = position;
 
     return (

package.json

@@ -60,12 +60,17 @@
     "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
-    "@types/lodash": "^4.14.144",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-replace": "^2.3.1",
+    "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.9",
     "@types/react-dom": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^2.4.0",
     "@typescript-eslint/parser": "^2.4.0",
     "antd": "^3.24.2",
+    "babel-plugin-lodash": "^3.3.4",
     "conventional-changelog-cli": "^2.0.31",
     "cz-conventional-changelog": "^3.0.2",
     "eslint": "^6.5.1",
@@ -75,20 +80,15 @@
     "husky": "^3.0.9",
     "inquirer": "^7.0.0",
     "less": "^3.10.3",
-    "lodash": "^4.17.15",
     "prettier": "^1.18.2",
     "pretty-quick": "^2.0.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.24.0",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-livereload": "^1.0.4",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.24.3",

scripts/build.js

@@ -4,9 +4,9 @@
 const signale = require('signale');
 const rimraf = require('rimraf');
 const rollup = require('rollup');
-const resolve = require('rollup-plugin-node-resolve');
-const replace = require('rollup-plugin-replace');
-const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const commonjs = require('@rollup/plugin-commonjs');
 const typescript = require('rollup-plugin-typescript2');
 const babel = require('rollup-plugin-babel');
 const { terser } = require('rollup-plugin-terser');
@@ -37,7 +37,9 @@ async function build() {
     const umdBundle = await rollup.rollup({
       input: 'src/index.tsx',
       plugins: [
-        resolve(),
+        resolve({
+          browser: true,
+        }),
         replace({
           'process.env.GG_EDITOR_VERSION': JSON.stringify(version),
         }),
@@ -50,8 +52,7 @@ async function build() {
           },
         }),
         babel({
-          exclude: 'node_modules/**',
-          extensions: ['.ts', '.tsx'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
         }),
         terser(),
       ],

scripts/start.js

@@ -7,12 +7,12 @@ const signale = require('signale');
 const rimraf = require('rimraf');
 const rollup = require('rollup');
 const postcss = require('rollup-plugin-postcss');
-const resolve = require('rollup-plugin-node-resolve');
-const replace = require('rollup-plugin-replace');
-const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const commonjs = require('@rollup/plugin-commonjs');
 const typescript = require('rollup-plugin-typescript2');
 const babel = require('rollup-plugin-babel');
-const json = require('rollup-plugin-json');
+const json = require('@rollup/plugin-json');
 const serve = require('rollup-plugin-serve');
 const livereload = require('rollup-plugin-livereload');
 const { version } = require('../package.json');
@@ -46,7 +46,9 @@ function start(name) {
           generateScopedName: '[local]--[hash:base64:5]',
         },
       }),
-      resolve(),
+      resolve({
+        browser: true,
+      }),
       replace({
         'process.env.GG_EDITOR_VERSION': JSON.stringify(version),
       }),
@@ -55,8 +57,7 @@ function start(name) {
         tsconfig: 'examples/tsconfig.json',
       }),
       babel({
-        exclude: 'node_modules/**',
-        extensions: ['.ts', '.tsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       json(),
       serve({

src/common/behaviorManager/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6';
 import { isMind } from '@/utils';
 import { GraphType } from '@/common/constants';
-import { Behavior } from '@/common/interfaces';
+import { Graph, Behavior } from '@/common/interfaces';
 
 class BehaviorManager {
   behaviors: {
@@ -47,8 +47,8 @@ class BehaviorManager {
         const { graph } = this;
 
         if (
-          (type === GraphType.Flow && isMind(graph as G6.Graph) === false) ||
-          (type === GraphType.Mind && isMind(graph as G6.Graph))
+          (type === GraphType.Flow && isMind(graph as Graph) === false) ||
+          (type === GraphType.Mind && isMind(graph as Graph))
         ) {
           handler.apply(this, params);
         }
@@ -65,15 +65,15 @@ class BehaviorManager {
 
     switch (graphType) {
       case GraphType.Flow:
-        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Flow, behavior));
+        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Flow, behavior) as any);
         break;
 
       case GraphType.Mind:
-        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Mind, behavior));
+        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Mind, behavior) as any);
         break;
 
       default:
-        G6.registerBehavior(name, behavior);
+        G6.registerBehavior(name, behavior as any);
         break;
     }
   }

src/common/commandManager/index.ts

@@ -1,7 +1,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { getGraphState } from '@/utils';
 import { EditorEvent } from '@/common/constants';
-import { Command } from '@/common/interfaces';
+import { Graph, Command } from '@/common/interfaces';
 
 class CommandManager {
   command: {
@@ -25,7 +25,7 @@ class CommandManager {
   }
 
   /** 执行命令 */
-  execute(graph: G6.Graph, name: string, params?: object) {
+  execute(graph: Graph, name: string, params?: object) {
     const Command = this.command[name];
 
     if (!Command) {
@@ -79,12 +79,12 @@ class CommandManager {
   }
 
   /** 判断是否可以执行 */
-  canExecute(graph: G6.Graph, name: string) {
+  canExecute(graph: Graph, name: string) {
     return this.command[name].canExecute(graph);
   }
 
   /** 注入是否应该执行 */
-  injectShouldExecute(name: string, shouldExecute: (graph: G6.Graph) => boolean) {
+  injectShouldExecute(name: string, shouldExecute: (graph: Graph) => boolean) {
     this.command[name].shouldExecute = shouldExecute;
   }
 }