WIP：Update G6 5.0

package.json

@@ -18,7 +18,8 @@
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
-        "react": "17"
+        "react": "17.x",
+        "react-dom": "17.x"
       }
     },
     "overrides": {
@@ -39,8 +40,8 @@
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@antv/algorithm": "^0.1.26-beta.0",
-    "@antv/g6": "^4.8.19",
-    "@antv/graphin": "^2.7.25",
+    "@antv/g6": "5.0.0-beta.5",
+    "@antv/graphin": "workspace:*",
     "@antv/layout": "^0.3.22",
     "@antv/s2": "^1.48.0",
     "@antv/s2-react": "^1.41.0",
@@ -49,7 +50,7 @@
     "buffer": "^6.0.3",
     "buffer-browserify": "^0.2.5",
     "node-fetch": "^3.3.0",
-    "react": "17",
+    "react": "17.x",
     "react-dom": "17.x",
     "stream-browserify": "^3.0.0",
     "umi": "3.x"

packages/gi-assets-advance/package.json

@@ -59,7 +59,7 @@
     "use-immer": "^0.9.0"
   },
   "peerDependencies": {
-    "@antv/graphin": "^2.7.25",
+    "@antv/graphin": "workspace:*",
     "antd": "4.x",
     "react": "17.x",
     "react-dom": "17.x"

packages/gi-assets-advance/src/components/AnalysisHistory/FlowGraph.tsx

@@ -1,12 +1,13 @@
-import { useMemoizedFn } from 'ahooks';
+//@ts-nocheck
 import G6, { IGraph } from '@antv/g6';
+import { useMemoizedFn } from 'ahooks';
 import React, { CSSProperties, useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
-import { TemplateData, TemplateNode } from './type';
-import { createFlowGraph, createTooltip } from './util';
-import { registerNodes } from './flowNodeRegistry';
 import './flowNodeRegistry';
+import { registerNodes } from './flowNodeRegistry';
 import './index.less';
+import { TemplateData, TemplateNode } from './type';
+import { createFlowGraph, createTooltip } from './util';
 
 const { Tooltip } = G6;
 

packages/gi-assets-advance/src/components/AnalysisHistory/flowNodeRegistry.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import G6 from '@antv/g6';
 
 /**

packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react';
-import { Form, Input, Popover, Tooltip } from 'antd';
+//@ts-nocheck
 import { PictureOutlined } from '@ant-design/icons';
 import G6 from '@antv/g6';
-import { TemplateNode } from './type';
+import { Form, Input, Popover, Tooltip } from 'antd';
+import * as React from 'react';
 import RJV from 'react-json-view';
 import $i18n from '../../i18n';
+import { TemplateNode } from './type';
 
 const ReactJson: any = RJV;
 

packages/gi-assets-advance/src/components/GraphAnnotation/Component.tsx

@@ -1,5 +1,6 @@
+//@ts-nocheck
 import { StarFilled } from '@ant-design/icons';
-import G6, { Item } from '@antv/g6';
+import G6 from '@antv/g6';
 import { icons, useContext } from '@antv/gi-sdk';
 import { Menu } from 'antd';
 import insertCss from 'insert-css';
@@ -8,6 +9,7 @@ import { bind } from 'size-sensor';
 import $i18n from '../../i18n';
 import './index.less';
 
+type Item = any;
 export interface GraphAnnotationProps {
   contextmenu: any;
   annotationWay: string;

packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx

@@ -1,14 +1,16 @@
 import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Item } from '@antv/g6';
+
 import { useContext } from '@antv/gi-sdk';
 import { Button, Collapse, message, Select } from 'antd';
 import React from 'react';
 import { useImmer } from 'use-immer';
+import $i18n from '../../i18n';
 import { LAYOUTS } from './const';
-import { ILayoutOption } from './typing';
-import { updateLayout, getLayoutOptions } from './utils';
 import './index.less';
-import $i18n from '../../i18n';
+import { ILayoutOption } from './typing';
+import { getLayoutOptions, updateLayout } from './utils';
+
+type Item = any;
 
 const { Panel } = Collapse;
 

packages/gi-assets-advance/src/components/SubGraphLayout/utils.ts

@@ -1,5 +1,5 @@
+import { GraphData, IGraph } from '@antv/g6';
 import { LAYOUTS, LayoutMap } from './const';
-import { Graph, GraphData } from '@antv/g6';
 import { ILayoutOption } from './typing';
 
 /**
@@ -13,16 +13,19 @@ export const cropGraphByNodes = (graphData: GraphData, targetNodes: { id: string
   const ids = targetNodes.map(node => node.id);
   const newEdges = edges!.filter(edge => {
     const { source, target } = edge;
+    //@ts-ignore
     if (ids.indexOf(source!) !== -1 && ids.indexOf(target!) !== -1) {
       return true;
     }
     return false;
   });
   const newNodes = nodes!
     .filter(node => {
+      //@ts-ignore
       return ids.indexOf(node.id) !== -1;
     })
     .map(node => {
+      //@ts-ignore
       // 映射节点大小，用于圆形布局防重叠：https://github.com/antvis/layout/blob/master/src/layout/circular.ts#L213
       node.size = node.style?.keyshape?.size || 26;
       /* 
@@ -46,7 +49,7 @@ export const cropGraphByNodes = (graphData: GraphData, targetNodes: { id: string
  */
 export const updateLayout = (
   layouts: ILayoutOption[],
-  graph: Graph,
+  graph: IGraph,
   gap: number,
   direction: 'vertical' | 'horizontal',
 ) => {

packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx

@@ -1,8 +1,8 @@
-import { IEdge, INode } from '@antv/g6';
+import { useContext } from '@antv/gi-sdk';
 import { S2Event, SpreadSheet } from '@antv/s2';
 import React from 'react';
-
-import { useContext } from '@antv/gi-sdk';
+type IEdge = any;
+type INode = any;
 const useListenEdgeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => {
   const { data: graphData, graph, largeGraphData, updateContext } = useContext();
   React.useEffect(() => {

packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx

@@ -1,6 +1,7 @@
-import { IEdge, INode } from '@antv/g6';
 import { S2Event, SpreadSheet } from '@antv/s2';
 import React from 'react';
+type IEdge = any;
+type INode = any;
 
 import { useContext } from '@antv/gi-sdk';
 

packages/gi-assets-advance/src/components/TableMode/utils/highlight.ts

@@ -1,4 +1,5 @@
-import { IEdge, INode } from '@antv/g6';
+type IEdge = any;
+type INode = any;
 export const highlightBySelectedNodes = (selectedNodes: Set<any>, context) => {
   const { updateContext, largeGraphData, data: graphData, graph } = context;
   if (largeGraphData) {