style(eslint):fix lint error

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/ban-ts-ignore': 0,
     'no-underscore-dangle': 0,
     '@typescript-eslint/interface-name-prefix': 0,
     'import/no-extraneous-dependencies': 0,

packages/graphin-components/src/ContextMenu/demos/PieMenu.tsx

@@ -9,10 +9,10 @@ import theme from './PieMenuTheme';
 
 const PieMenuDemo = () => {
   const graphin = React.useContext(GraphinContext);
-  const handleClick = () => {
-    console.log('click', graphin);
-    graphin.contextmenu.node.handleClose();
-  };
+  // const handleClick = () => {
+  //   console.log('click', graphin);
+  //   graphin.contextmenu.node.handleClose();
+  // };
 
   const nodeSize = 30;
   const radius = 60;

packages/graphin-components/src/FishEye/demos/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import Graphin, { GraphinContext, Utils } from '@antv/graphin';
+import Graphin, { Utils } from '@antv/graphin';
 import { ContextMenu, FishEye } from '@antv/graphin-components';
-import { message } from 'antd';
-import { TagFilled } from '@ant-design/icons';
+
 import '@antv/graphin/dist/index.css';
 // Do not forget to import CSS
 import '@antv/graphin-components/dist/index.css';

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

@@ -1,8 +1,20 @@
 import React from 'react';
 
-//@ts-ignore
-import { GraphinContext } from '@antv/graphin';
-import Utils from '../utils';
+// @ts-ignore
+import { GraphinContext, Utils } from '@antv/graphin';
+
+const defaultHullCfg = {
+  id: Utils.uuid(),
+  members: [],
+  type: 'round-convex',
+  nonMembers: [],
+  style: {
+    fill: 'lightblue',
+    stroke: 'blue',
+    opacity: 0.2,
+  },
+  padding: 10,
+};
 
 /**
  * deep merge hull config
@@ -22,19 +34,6 @@ const deepMergeCfg = (defaultCfg: typeof defaultHullCfg, cfg: HullCfg) => {
   };
 };
 
-const defaultHullCfg = {
-  id: Utils.createUuid(),
-  members: [],
-  type: 'round-convex',
-  nonMembers: [],
-  style: {
-    fill: 'lightblue',
-    stroke: 'blue',
-    opacity: 0.2,
-  },
-  padding: 10,
-};
-
 export interface HullCfg {
   /** 在包裹内部的节点实例或节点 Id 数组 */
   members: string[];
@@ -69,13 +68,14 @@ export interface IHullProps {
   options: HullCfg[];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 let hullInstances: any[];
 
 const Hull: React.FunctionComponent<IHullProps> = (props) => {
   const graphin = React.useContext(GraphinContext);
 
   React.useEffect(() => {
-    //@ts-ignore
+    // @ts-ignore
     const { graph } = graphin;
     const { options } = props;
 

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { GraphinContext } from '@antv/graphin';
+// import { GraphinContext } from '@antv/graphin';
 
-interface ToolbarProps {}
+interface ToolbarProps {
+  children: JSX.Element | React.ReactChildren | JSX.Element[];
+}
 
 const Toolbar: React.FunctionComponent<ToolbarProps> = (props) => {
-  const { graph, apis } = React.useContext(GraphinContext);
+  // const { graph, apis } = React.useContext(GraphinContext);
   const { children } = props;
 
   return <div>{children}</div>;

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

@@ -52,10 +52,10 @@ const Tooltip: React.FunctionComponent<TooltipProps> & { Node: typeof Node } & {
     e.preventDefault();
     e.stopPropagation();
 
-    const width: number = graph.get('width');
-    const height: number = graph.get('height');
+    // const width: number = graph.get('width');
+    // const height: number = graph.get('height');
 
-    const bbox = (containerRef as HTMLDivElement).getBoundingClientRect();
+    // const bbox = (containerRef as HTMLDivElement).getBoundingClientRect();
 
     const point = graph.getPointByClient(e.clientX, e.clientY);
     let { x, y } = graph.getCanvasByPoint(point.x, point.y);

packages/graphin-components/src/VisSettingPanel/demos/components/IconSetting.tsx

@@ -12,7 +12,7 @@ interface IconSettingProps extends NodeStyleIcon {
 export type NodeStyleIcon = Partial<NodeStyle['icon']>;
 
 const IconSetting = (props: IconSettingProps) => {
-  const { handleChange, fill, size, value, type: IconType } = props;
+  const { handleChange, fill, size, type: IconType } = props;
 
   const [state, setState] = React.useState({
     type: IconType,

packages/graphin-components/src/VisSettingPanel/demos/components/LabelSetting.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Radio, Input, InputNumber } from 'antd';
 import Item from './Item';
-import { FontSizeOutlined } from '@ant-design/icons';
 import GraphinColorPick from './ColorPicker';
 import { NodeStyle } from '@antv/graphin';
 
@@ -14,7 +13,7 @@ export type NodeStyleLabel = Partial<NodeStyle['label']>;
 const positions = ['top', 'bottom', 'left', 'right', 'center'];
 
 const LabelSetting: React.FunctionComponent<LabelSettingProps> = (props) => {
-  const { handleChange, fill, fontSize, value, position, offset } = props;
+  const { handleChange, fill, fontSize, position } = props;
 
   return (
     <React.Fragment>

packages/graphin-components/src/VisSettingPanel/demos/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import Graphin, { Utils, GraphinContext } from '@antv/graphin';
-import { VisSettingPanel } from '@antv/graphin-components';
+import Graphin, { Utils } from '@antv/graphin';
+// import { VisSettingPanel } from '@antv/graphin-components';
 // Do not forget to import CSS
 import '@antv/graphin/dist/index.css';
 
 const Demo = () => {
   return (
     <div className="App">
       <Graphin data={Utils.mock(2).circle().graphin()} theme={{ mode: 'light' }}>
-        <VisSettingPanel />
+        {/* <VisSettingPanel /> */}
       </Graphin>
     </div>
   );

packages/graphin/src/Graphin.tsx

@@ -66,7 +66,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
     /**  注册 font icon */
     const iconFont = iconLoader();
     const { glyphs, fontFamily } = iconFont;
-    const icons = glyphs.map((item) => {
+    const icons = glyphs.map(item => {
       return {
         name: item.name,
         unicode: String.fromCodePoint(item.unicode_decimal),
@@ -75,7 +75,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
 
     return new Proxy(icons, {
       get: (target, propKey: string) => {
-        const matchIcon = target.find((icon) => {
+        const matchIcon = target.find(icon => {
           return icon.name === propKey;
         });
         if (!matchIcon) {
@@ -270,7 +270,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
    * @param prevProps
    */
   updateOptions = () => {
-    const { layout, data, ...options } = this.props;
+    const { ...options } = this.props;
     return options;
   };
 
@@ -279,18 +279,18 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
     if (!this.isTree) {
       const { data } = this.props;
       const { nodes = [], edges = [] } = data as GraphinData;
-      nodes.forEach((node) => {
+      nodes.forEach(node => {
         const { status } = node;
         if (status) {
-          Object.keys(status).forEach((k) => {
+          Object.keys(status).forEach(k => {
             this.graph.setItemState(node.id, k, Boolean(status[k]));
           });
         }
       });
-      edges.forEach((edge) => {
+      edges.forEach(edge => {
         const { status } = edge;
         if (status) {
-          Object.keys(status).forEach((k) => {
+          Object.keys(status).forEach(k => {
             this.graph.setItemState(edge.id, k, Boolean(status[k]));
           });
         }
@@ -331,7 +331,7 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
       this.initStatus();
       this.apis = ApiController(this.graph);
       console.log('%c isDataChange', 'color:grey');
-      this.setState((preState) => {
+      this.setState(preState => {
         return {
           ...preState,
           context: {
@@ -405,33 +405,31 @@ class Graphin extends React.PureComponent<GraphinProps, GraphinState> {
           <div
             data-testid="custom-element"
             className="graphin-core"
-            ref={(node) => {
+            ref={node => {
               this.graphDOM = node;
             }}
             style={{ background: this.theme?.background, ...style }}
           />
           <div className="graphin-components">
             {isReady && (
               <>
-                {
-                  /** modes 不存在的时候，才启动默认的behaviros，否则会覆盖用户自己传入的 */
-                  !modes && (
-                    <React.Fragment>
-                      {/* 拖拽画布 */}
-                      <DragCanvas />
-                      {/* 缩放画布 */}
-                      <ZoomCanvas />
-                      {/* 拖拽节点 */}
-                      <DragNode />
-                      {/* 点击节点 */}
-                      <DragCombo />
-                      {/* 点击节点 */}
-                      <ClickSelect />
-                      {/* 圈选节点 */}
-                      <BrushSelect />
-                    </React.Fragment>
-                  )
-                }
+                {/** modes 不存在的时候，才启动默认的behaviros，否则会覆盖用户自己传入的 */
+                !modes && (
+                  <>
+                    {/* 拖拽画布 */}
+                    <DragCanvas />
+                    {/* 缩放画布 */}
+                    <ZoomCanvas />
+                    {/* 拖拽节点 */}
+                    <DragNode />
+                    {/* 点击节点 */}
+                    <DragCombo />
+                    {/* 点击节点 */}
+                    <ClickSelect />
+                    {/* 圈选节点 */}
+                    <BrushSelect />
+                  </>
+                )}
 
                 {/** resize 画布 */}
                 <ResizeCanvas graphDOM={this.graphDOM as HTMLDivElement} />

packages/graphin/src/behaviors/BrushSelect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useBehaviorHook from './useBehaviorHook';
+
 const DEFAULT_TRIGGER = 'shift';
 
 const defaultConfig = {
@@ -14,7 +15,7 @@ const defaultConfig = {
   },
   /** 选中节点时的回调，参数 nodes 表示选中的节点； */
   onSelect: () => {},
-  /**取消选中节点时的回调，参数 nodes 表示取消选中的节点； */
+  /** 取消选中节点时的回调，参数 nodes 表示取消选中的节点； */
   onDeselect: () => {},
   /** 选中的状态，默认值为 'selected' */
   selectedState: 'selected',

packages/graphin/src/behaviors/ClickSelect.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import useBehaviorHook from './useBehaviorHook';
+
 const DEFAULT_TRIGGER = 'shift';
-const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control'];
+// const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control'];
 
 const defaultConfig = {
   /** 是否禁用该功能 */

packages/graphin/src/behaviors/DragCanvas.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useBehaviorHook from './useBehaviorHook';
+
 const defaultConfig = {
   /** 允许拖拽方向，支持'x'，'y'，'both'，默认方向为 'both'； */
   direction: 'both',

packages/graphin/src/behaviors/TreeCollapse.tsx

@@ -1,25 +1,32 @@
 import * as React from 'react';
 import GraphinContext from '../GraphinContext';
 import useBehaviorHook from './useBehaviorHook';
+import { IG6GraphEvent } from '@antv/g6';
 
 const defaultConfig = {
-  /** 收起和展开树图的方式，支持 'click' 和 'dblclick' 两种方式。默认为 'click'，即单击；*/
+  /** 收起和展开树图的方式，支持 'click' 和 'dblclick' 两种方式。默认为 'click'，即单击； */
   trigger: 'click',
   /**
    * 收起或展开的回调函数。
    * 警告：G6 V3.1.2 版本中将移除；itemcollapsed：当 collapse-expand 发生时被触发。
    * 请使用 graph.on('itemcollapsed', e => {...}) 监听，参数 e 有以下字段：
    *  */
-  onChange: (item: any, collapsed: boolean) => {},
-  /** 是否允许该 behavior 在当前操作的 item 上发生。 */
-  shouldBegin: (e: any) => {
-    return true;
-  },
 };
 
-export type ITreeCollapseProps = Partial<typeof defaultConfig>;
+export type TreeCollapseProps = Partial<{
+  /** 收起和展开树图的方式，支持 'click' 和 'dblclick' 两种方式。默认为 'click'，即单击； */
+  trigger: 'click' | 'dblclick' | string;
+  /**
+   * 收起或展开的回调函数。
+   * 警告：G6 V3.1.2 版本中将移除；itemcollapsed：当 collapse-expand 发生时被触发。
+   * 请使用 graph.on('itemcollapsed', e => {...}) 监听，参数 e 有以下字段：
+   *  */
+  onChange: (item: IG6GraphEvent['item'], collapsed: boolean) => void;
+  /** 是否允许该 behavior 在当前操作的 item 上发生。 */
+  shouldBegin: (e: IG6GraphEvent) => boolean;
+}>;
 
-const TreeCollapse: React.FunctionComponent<ITreeCollapseProps> = props => {
+const TreeCollapse: React.FunctionComponent<TreeCollapseProps> = props => {
   const { onChange, ...otherCofnig } = props;
   const { graph } = React.useContext(GraphinContext);
 
@@ -31,13 +38,12 @@ const TreeCollapse: React.FunctionComponent<ITreeCollapseProps> = props => {
   });
 
   React.useEffect(() => {
-    const handleChange = (e: any) => {
+    const handleChange = (e: IG6GraphEvent) => {
       const { item, collapsed } = e;
-      const model = item.get('model');
+      const model = item!.get('model');
       model.collapsed = collapsed;
-      //@ts-ignore
       if (onChange) {
-        onChange(e.item, collapsed); //callback
+        onChange(item, collapsed as boolean); // callback
       }
     };
     graph.on('itemcollapsed', handleChange);