Merge pull request #495 from antvis/dev/lodash

fix: remove @antv/util and use lodash-es uniformly

packages/graphin-components/package.json

@@ -55,7 +55,6 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
-    "@antv/util": "^2.0.10",
     "@antv/graphin": "^2.*"
   },
   "peerDependencies": {

packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx

@@ -8,7 +8,7 @@ import graphLayoutConfig from './defaultLayoutConfig';
 
 import styles from './index.less';
 
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 const defaultValue = {};
 

packages/graphin-components/src/Toolbar/index.tsx

@@ -1,5 +1,4 @@
 import * as Graphin from '@antv/graphin';
-import { isArray } from '@antv/util';
 import React from 'react';
 import './index.less';
 
@@ -116,7 +115,7 @@ const Toolbar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolbarIte
       style={{ ...defaultStyle, ...positionStyle, ...style }}
       className="graphin-components-toolbar"
     >
-      {isArray(children) || (children && (children as JSX.Element).type === ToolbarItem) ? (
+      {Array.isArray(children) || (children && (children as JSX.Element).type === ToolbarItem) ? (
         <ul className="graphin-components-toolbar-content" style={{ display: isHorizontal ? 'flex' : '' }}>
           {children}
         </ul>

packages/graphin-components/webpack.config.js

@@ -82,7 +82,7 @@ module.exports = (env, argv) => {
       publicPath: './',
       filename: 'graphin-components.min.js',
     },
-    plugins: [new MiniCssExtractPlugin(), new BundleAnalyzerPlugin()],
+    plugins: [new MiniCssExtractPlugin(), ...(process.env.ANALYZE ? [new BundleAnalyzerPlugin()] : [])],
     performance: {
       hints: false,
     },

packages/graphin-graphscope/src/events/click.tsx

@@ -18,7 +18,9 @@ const ClickElement: React.FC<ClickElementProps> = ({ nodeClick }) => {
       }
     });
 
-    return () => graph.off('node:click');
+    return () => {
+      graph.off('node:click');
+    };
   }, []);
 
   return null;

packages/graphin/docs/Contributing.zh-CN.md

@@ -67,7 +67,6 @@ yarn
 
 ```json
  "dependencies": {
-    "@antv/util": "^2.0.10",
     "@antv/graphin": "^2.0.0"
   },
   "peerDependencies": {

packages/graphin/docs/contributing.en-US.md

@@ -65,7 +65,6 @@ Before installing the dependencies of each package, you need to do a special tre
 
 ```json
  "dependencies": {
-    "@antv/util": "^2.0.10",
     "@antv/graphin": "^2.0.0"
   },
   "peerDependencies": {

packages/graphin/docs/layout/combo-combined-layout/demos/combo-combined-data2.tsx

@@ -2,9 +2,8 @@
 import G6 from '@antv/g6';
 import Graphin, { Behaviors } from '@antv/graphin';
 import { ContextMenu } from '@antv/graphin-components';
-import React, { useEffect, useState } from 'react';
-// import cloneDeep from '../../../../lib/utils/cloneDeep';
 import { cloneDeep } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
 
 const { DragCombo } = Behaviors;
 const { Menu } = ContextMenu;

packages/graphin/package.json

@@ -14,6 +14,7 @@
     "start": "npm run clean && father build --watch",
     "build": "npm run clean && father build && npm run build:umd",
     "build:umd": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js  --mode production  -c ./webpack.config.js",
+    "analyze": "cross-env ANALYZE=true npm run build:umd",
     "test": "jest",
     "prettier": "prettier --write ./src/**/**/**/*.js",
     "clean": "rimraf es esm lib dist"
@@ -32,7 +33,7 @@
     "@testing-library/react": "^12.1.2",
     "@types/d3-quadtree": "^3.0.2",
     "@types/jest": "^27.0.3",
-    "@types/lodash-es": "^4.17.5",
+    "@types/lodash-es": "^4.17.7",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "eventemitter3": "^4.0.0",
@@ -61,10 +62,8 @@
   "author": "AntV",
   "license": "MIT",
   "dependencies": {
-    "@antv/util": "^2.0.10",
-    "@types/lodash.clonedeep": "^4.5.6",
+    "lodash-es": "^4.17.21",
     "d3-quadtree": "^3.0.1",
-    "lodash.clonedeep": "^4.5.0",
     "@antv/g6": "^4.8.10"
   },
   "peerDependencies": {

packages/graphin/src/Graphin.tsx

@@ -1,4 +1,4 @@
-import G6, { Graph as IGraph, GraphData, GraphOptions, TreeGraphData } from '@antv/g6';
+import G6, { GraphData, GraphOptions, Graph as IGraph, TreeGraphData } from '@antv/g6';
 import React, { ErrorInfo } from 'react';
 /** 内置API */
 import ApiController from './apis';
@@ -12,12 +12,11 @@ import GraphinContext from './GraphinContext';
 /** 内置布局 */
 import LayoutController from './layout';
 import { getDefaultStyleByTheme, ThemeData } from './theme/index';
+
+import { cloneDeep, isEqual } from 'lodash-es';
 /** types  */
-import { GraphinData, GraphinProps, GraphinTreeData, IconLoader, IUserNode, PlainObject } from './typings/type';
-import cloneDeep from './utils/cloneDeep';
+import type { GraphinData, GraphinProps, GraphinTreeData, IconLoader, IUserNode, PlainObject } from './typings/type';
 /** utils */
-// import shallowEqual from './utils/shallowEqual';
-import deepEqual from './utils/deepEqual';
 import { processLayoutConfig } from './utils/layout';
 
 const { DragCanvas, ZoomCanvas, DragNode, DragCombo, ClickSelect, BrushSelect, ResizeCanvas } = Behaviors;
@@ -548,8 +547,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
     /* eslint-disable react/destructuring-assignment */
     const prevVal = prevProps[key];
     const currentVal = this.props[key] as DiffValue;
-    const isEqual = deepEqual(prevVal, currentVal);
-    return !isEqual;
+    return !isEqual(prevVal, currentVal);
   }
 
   render() {

packages/graphin/src/behaviors/ResizeCanvas.tsx

@@ -1,6 +1,6 @@
+import { debounce } from 'lodash-es';
 import * as React from 'react';
 import GraphinContext from '../GraphinContext';
-import { debounce } from '@antv/util';
 
 export interface ResizeCanvasProps {
   graphDOM: HTMLDivElement;

packages/graphin/src/components/Hull/index.tsx

@@ -1,7 +1,7 @@
+import { debounce } from 'lodash-es';
 import React from 'react';
 import type { GraphinContextType } from '../../GraphinContext';
 import GraphinContext from '../../GraphinContext';
-import { debounce } from '@antv/util';
 
 const defaultHullCfg = {
   members: [],

packages/graphin/src/layout/utils/graph.ts

@@ -1,8 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import { Edge } from '../../layout/force/Elements';
 import { IUserNode as Node } from '../../typings/type';
-import Utils from '../../utils/index';
-import Vector from '../force/Vector';
+import { uniqBy } from 'lodash-es';
 
 const getDegree = (node: Node, edges: Edge[]) => {
   const nodeId = node.data.id;
@@ -71,7 +70,7 @@ const getRelativeNodes = (type: 'source' | 'target' | 'both', coreNode: Node, ed
       break;
   }
   // 去重
-  relativeNodes = Utils.uniqBy(relativeNodes, (a: Node, b: Node) => {
+  relativeNodes = uniqBy(relativeNodes, (a: Node, b: Node) => {
     return a.id === b.id;
   });
   return relativeNodes;

packages/graphin/src/shape/graphin-circle.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { IGroup, ShapeCfg } from '@antv/g-base';
 import G6, { INode } from '@antv/g6';
-import { deepMix, isArray, isNumber } from '@antv/util';
+import { merge } from 'lodash-es';
 import { getDefaultStyleByTheme } from '../theme';
 import { IUserNode, NodeStyle, NodeStyleBadge } from '../typings/type';
 import { convertSizeToWH, getBadgePosition, getLabelXYByPosition, removeDumpAttrs, setStatusStyle } from './utils';
 
 function getRadiusBySize(size: number | number[] | undefined) {
   let r;
-  if (isNumber(size)) {
+  if (typeof size === 'number') {
     r = size / 2;
-  } else if (isArray(size)) {
+  } else if (Array.isArray(size)) {
     r = size[0] / 2;
   }
   return r;
@@ -313,7 +313,7 @@ export default () => {
 
       this.options = getStyleByTheme(_theme);
 
-      const style = deepMix({}, this.options.style, cfg.style) as NodeStyle; // getStyles({}, this.options.style, cfg.style) as NodeStyle;
+      const style = merge({}, this.options.style, cfg.style) as NodeStyle; // getStyles({}, this.options.style, cfg.style) as NodeStyle;
       /** 将初始化样式存储在model中 */
       cfg._initialStyle = { ...style };
       const { icon, badges = [], keyshape: keyShapeStyle } = style;
@@ -366,7 +366,7 @@ export default () => {
       const model = item.getModel() as any;
       const shapes = item.getContainer().get('children'); // 顺序根据 draw 时确定
 
-      const initStateStyle = deepMix({}, this.options.status, model.style.status);
+      const initStateStyle = merge({}, this.options.status, model.style.status);
       const initialStyle = item.getModel()._initialStyle as any;
       const status = item._cfg?.states || [];
 
@@ -392,7 +392,7 @@ export default () => {
     update(cfg: IUserNode, item: INode) {
       if (!cfg.style) return;
       try {
-        const style = deepMix({}, cfg._initialStyle, cfg.style) as NodeStyle; // getStyles(cfg._initialStyle, cfg.style) as NodeStyle;
+        const style = merge({}, cfg._initialStyle, cfg.style) as NodeStyle; // getStyles(cfg._initialStyle, cfg.style) as NodeStyle;
         cfg._initialStyle = { ...style };
         const { badges, keyshape } = style;
         const r = getRadiusBySize(keyshape.size) as number;

packages/graphin/src/shape/graphin-line.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck
 import G6, { EdgeConfig, IEdge, IGroup, INode, ModelConfig } from '@antv/g6';
-import { deepMix } from '@antv/util';
+import { merge } from 'lodash-es';
 import { getDefaultStyleByTheme } from '../theme';
 import { EdgeStyle } from '../typings/type';
 import calcByteLength from '../utils/calcByteLength';
@@ -62,8 +62,8 @@ export function parseHalo(json: EdgeStyle['halo']) {
 function parseLabelBackground(json: EdgeStyle['label']['background']) {
   return {
     id: 'label-background',
-    ...json
-  }
+    ...json,
+  };
 }
 const parseAttr = (style: EdgeStyle, itemShapeName: string) => {
   if (itemShapeName === 'keyshape') {
@@ -75,7 +75,7 @@ const parseAttr = (style: EdgeStyle, itemShapeName: string) => {
   if (itemShapeName === 'label') {
     return parseLabel(style.label || {});
   }
-  if(itemShapeName === 'label-background'){
+  if (itemShapeName === 'label-background') {
     return parseLabelBackground(style[itemShapeName] || {});
   }
   return {};
@@ -166,7 +166,7 @@ export default () => {
 
       this.options = getStyleByTheme(_theme);
 
-      const style = deepMix({}, this.options.style, cfg.style) as EdgeStyle;
+      const style = merge({}, this.options.style, cfg.style) as EdgeStyle;
 
       /** 将初始化样式存储在model中 */
       if (cfg) {
@@ -342,7 +342,7 @@ export default () => {
       const model = (item as IEdge).getModel() as EdgeConfig;
       const shapes = (item as IEdge).getContainer().get('children'); // 顺序根据 draw 时确定
 
-      const initStateStyle = deepMix({}, this.options.status, model.style.status);
+      const initStateStyle = merge({}, this.options.status, model.style.status);
 
       const initialStyle = (item as IEdge).getModel()._initialStyle as EdgeStyle;
 
@@ -354,10 +354,14 @@ export default () => {
             if (value) {
               setStatusStyle(shapes, initStateStyle[statusKey], parseAttr); // 匹配到status就改变
             } else {
-              setStatusStyle(shapes, {
-                ...initialStyle,
-                ['label-background']: initialStyle.label?.background
-              }, parseAttr); // 没匹配到就重置
+              setStatusStyle(
+                shapes,
+                {
+                  ...initialStyle,
+                  ['label-background']: initialStyle.label?.background,
+                },
+                parseAttr,
+              ); // 没匹配到就重置
               status.forEach(key => {
                 // 如果cfg.status中还有其他状态，那就重新设置回来
                 setStatusStyle(shapes, initStateStyle[key], parseAttr);
@@ -370,7 +374,7 @@ export default () => {
       }
     },
     afterDraw(cfg: ModelConfig | undefined, group: IGroup | undefined) {
-      const style = deepMix({}, this.options.style, cfg.style) as EdgeStyle;
+      const style = merge({}, this.options.style, cfg.style) as EdgeStyle;
       const { animate, keyshape } = style;
       /** 如果没有 style.animate 就不绘制 */
       if (!animate || !animate.type || animate.visible === false) {

packages/graphin/src/shape/utils.ts

@@ -1,4 +1,3 @@
-import { isArray, isNumber } from '@antv/util';
 import { NodeStyle } from '../typings/type';
 /**
  *
@@ -41,6 +40,7 @@ export const setStatusStyle = (shapes: any, statusStyle: any, parseAttr: (style:
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export function removeDumpAttrs<T>(attrs: T): T {
+  // @ts-ignore
   Object.keys(attrs).forEach(key => {
     // @ts-ignore
     if (attrs[key] === undefined) {
@@ -59,10 +59,10 @@ export const convertSizeToWH = (size: number | number[] | undefined) => {
   if (!size) return [0, 0];
   let width = 0;
   let height = 0;
-  if (isNumber(size)) {
+  if (typeof size === 'number') {
     width = size;
     height = size;
-  } else if (isArray(size)) {
+  } else if (Array.isArray(size)) {
     if (size.length === 1) {
       const [w] = size;
       width = w;

packages/graphin/src/utils/Tree.ts

@@ -1,14 +1,5 @@
 import { GraphinTreeData } from '../typings/type';
 
-// export interface Node {
-//   id: string;
-//   parent?: Node;
-//   data?: any; // eslint-disable-line
-//   children: Node[];
-//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//   [key: string]: any;
-// }
-
 export interface Node extends GraphinTreeData {
   parent?: Node;
 }