Merge branch 'feature/upgrade-g6' into feature/upgrade-g6-3.4

antvis · Apr 28, 2020 · 10a7585 · 10a7585
2 parents bb8331c + 931e9de
commit 10a7585
Show file tree

Hide file tree

Showing 39 changed files with 960 additions and 958 deletions.
diff --git a/README.md b/README.md
@@ -54,12 +54,12 @@ import '@antv/graphin/dist/index.css'; // Don't forget to import css
 import './styles.css';
 
 const App = () => {
-    const data = Utils.mock(10).graphin();
-    return (
-        <div className="App">
-            <Graphin data={data} />
-        </div>
-    );
+  const data = Utils.mock(10).graphin();
+  return (
+    <div className="App">
+      <Graphin data={data} />
+    </div>
+  );
 };
 
 const rootElement = document.getElementById('root');
@@ -68,62 +68,64 @@ ReactDOM.render(<App />, rootElement);
 
 ### Graphin and G6 compatible table
 
-| Graphin Version | G6 Version |
-| --------------- | ---------- |
-| before 1.0.1    | 3.1.9      |
-| ^1.0.2          | ^3.2.0     |
+| Graphin Version | G6 Version | graphin-components antd Version |
+| --------------- | ---------- | ------------------------------- |
+| before 1.0.1    | 3.1.9      | 3.24.3                          |
+| ^1.0.2          | ^3.2.0     | 3.24.3                          |
+| ^1.0.5          | ^3.3.0     | 3.24.3                          |
+| ^1.1.0          | ^3.4.0     | 4.0.3                           |
 
 ### Develop Graphin
 
--   Set npmClient
+- Set npmClient
 
 Set your npmClient in lerna.json, developers in China can set npmClient to [cnpm](https://www.npmjs.com/package/cnpm)
 
 ```json
 // ./lerna.json
 {
-    "packages": ["packages/*"],
-    "npmClient": "yarn",
-    "version": "0.0.0"
+  "packages": ["packages/*"],
+  "npmClient": "yarn",
+  "version": "0.0.0"
 }
 ```
 
--   Install dependencies
+- Install dependencies
 
 ```bash
 npm i
 ```
 
--   Install dependencies for each package
+- Install dependencies for each package
 
 ```bash
 npm run bootstrap
 ```
 
--   Start the local compilation of graphin and graphin-components
+- Start the local compilation of graphin and graphin-components
 
 ```bash
 npm run start
 ```
 
--   Start the Graphin studio demo after `npm run start`
+- Start the Graphin studio demo after `npm run start`
 
 ```bash
 npm run studio
 ```
 
--   Start the Graphin Doc site
+- Start the Graphin Doc site
 
 ```bash
 npm run site
 ```
 
 ### More Info
 
--   [Introduction to Graphin](https://graphin.antv.vision/zh/docs/manual/introduction)
--   [Getting started](https://graphin.antv.vision/zh/docs/manual/getting-started)
--   [API documentation](https://graphin.antv.vision/zh/docs/api/graphin)
--   [GraphinStudio](https://graphin.antv.vision/zh/GraphinStudio)
+- [Introduction to Graphin](https://graphin.antv.vision/zh/docs/manual/introduction)
+- [Getting started](https://graphin.antv.vision/zh/docs/manual/getting-started)
+- [API documentation](https://graphin.antv.vision/zh/docs/api/graphin)
+- [GraphinStudio](https://graphin.antv.vision/zh/GraphinStudio)
 
 ### DingTalk
 

diff --git a/packages/graphin-components/src/components/context-menu/__tests__/index.test.tsx b/packages/graphin-components/src/components/context-menu/__tests__/index.test.tsx
@@ -25,7 +25,7 @@ describe('<ContextMenu />', () => {
     const mockCallback = jest.fn(() => {});
 
     // TODO icon 测试
-    const { asFragment, queryByText, rerender, getByText, unmount } = render(
+    const { asFragment, queryByText, rerender, getByText } = render(
       <ContextMenu
         graph={mockGraph}
         options={[

diff --git a/packages/graphin-components/src/components/context-menu/types.ts b/packages/graphin-components/src/components/context-menu/types.ts
@@ -1,8 +1,8 @@
-import G6 from '@antv/g6';
+import { Item } from '@antv/g6/lib/types';
 
 /** G6 没有暴露这个类型 */
 export interface G6Event extends MouseEvent {
-  item: G6.Node & G6.Edge;
+  item: Item;
   target: Event['target'];
   action?: string;
 }

diff --git a/packages/graphin-components/src/components/context-menu/useContextmenu.ts b/packages/graphin-components/src/components/context-menu/useContextmenu.ts
@@ -3,10 +3,10 @@ import { G6Event } from './types';
 import getPosition from './getPosition';
 import { ContextMenuProps } from './index';
 
-export type MenuStyle = {
+export interface MenuStyle {
   width: number;
   height: number;
-};
+}
 
 interface State {
   visible: boolean;

diff --git a/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx b/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act, fireEvent, cleanup } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Graphin from '@antv/graphin/src/Graphin';
 
@@ -15,7 +15,7 @@ describe('<Toolbar />', () => {
       name: 'force',
     };
 
-    const { asFragment, queryAllByTestId } = render(
+    render(
       <Graphin data={data} layout={layout}>
         <Toolbar style={{ position: 'fixed', right: 68, top: 68 }} />
       </Graphin>,

diff --git a/packages/graphin-studio/package.json b/packages/graphin-studio/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@ant-design/compatible": "^1.0.2",
     "@ant-design/icons": "^4.0.6",
+    "@antv/g6": "^3.4.8",
     "@antv/graphin": "*",
     "@antv/graphin-components": "*",
     "@types/classnames": "^2.2.9",

diff --git a/packages/graphin-studio/src/Core/AddNodes/Normal.tsx b/packages/graphin-studio/src/Core/AddNodes/Normal.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Select, Input, Button } from 'antd';
 import nodeTypes from '@service/Mock/nodeTypes';
+import { GraphData } from '@antv/g6/lib/types';
 import { Item } from '@com';
 import service from '@service';
 import { NormalProps, NormalState } from './interface';
@@ -10,75 +11,70 @@ import './index.less';
 const { TextArea } = Input;
 const SelectOption = Select.Option;
 
-const Normal: React.FC<NormalProps> = props => {
-    const { dispatch, graph } = props;
-    const [state, setState] = useState<NormalState>({
-        type: 'company',
-        params: '',
-    });
-    const { type = 'company', params = '', errormsg = '' } = state;
-    const handleClick = async () => {
-        if (!params) {
-            setState({
-                ...state,
-                errormsg: 'id不能为空',
-            });
-            return;
-        }
-        setState({ ...state, params: '' });
-        const ids = params.split(',');
-        const data = (await service.queryNodes(ids, type)) as NodeData[];
-        const preData = graph.save();
-        const { nodes, edges } = preData;
+const Normal: React.FC<NormalProps> = (props) => {
+  const { dispatch, graph } = props;
+  const [state, setState] = useState<NormalState>({
+    type: 'company',
+    params: '',
+  });
+  const { type = 'company', params = '', errormsg = '' } = state;
+  const handleClick = async () => {
+    if (!params) {
+      setState({
+        ...state,
+        errormsg: 'id不能为空',
+      });
+      return;
+    }
+    setState({ ...state, params: '' });
+    const ids = params.split(',');
+    const data = (await service.queryNodes(ids, type)) as NodeData[];
+    const preData = graph.save();
+    const { nodes, edges } = preData as GraphData;
 
-        dispatch({
-            type: 'graph/addNodes',
-            payload: {
-                nodes: [...nodes, ...data],
-                edges,
-            },
-        });
-    };
-    const handleChangeNodeId = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setState({ ...state, params: e.target.value, errormsg: '' });
-    };
-    return (
-        <div>
-            <Item title="实体类型">
-                <Select
-                    placeholder="请选择实体类型"
-                    style={{ width: '100%' }}
-                    value={type}
-                    onChange={(value: string) => {
-                        setState({ ...state, type: value });
-                    }}
-                >
-                    {nodeTypes.map(item => {
-                        const { nodeType, name } = item;
-                        return (
-                            <SelectOption key={nodeType} value={nodeType}>
-                                {name}
-                            </SelectOption>
-                        );
-                    })}
-                </Select>
-            </Item>
-            <Item title="输入ID">
-                <TextArea
-                    rows={4}
-                    placeholder="请输入ID, 多个的话用逗号分隔"
-                    value={params}
-                    onChange={handleChangeNodeId}
-                />
-            </Item>
-            {errormsg && <span className="error_msg">{errormsg}</span>}
-            <Item title="">
-                <Button style={{ width: '100%' }} onClick={handleClick}>
-                    增量添加节点
-                </Button>
-            </Item>
-        </div>
-    );
+    dispatch({
+      type: 'graph/addNodes',
+      payload: {
+        nodes: [...nodes, ...data],
+        edges,
+      },
+    });
+  };
+  const handleChangeNodeId = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setState({ ...state, params: e.target.value, errormsg: '' });
+  };
+  return (
+    <div>
+      <Item title="实体类型">
+        <Select
+          placeholder="请选择实体类型"
+          style={{ width: '100%' }}
+          value={type}
+          onChange={(value: string) => {
+            setState({ ...state, type: value });
+          }}
+        >
+          {nodeTypes.map((item) => {
+            const { nodeType, name } = item;
+            return (
+              <SelectOption key={nodeType} value={nodeType}>
+                {name}
+              </SelectOption>
+            );
+          })}
+        </Select>
+      </Item>
+      <Item title="输入ID">
+        <TextArea rows={4} placeholder="请输入ID, 多个的话用逗号分隔" value={params} onChange={handleChangeNodeId} />
+      </Item>
+      {errormsg && <span className="error_msg">{errormsg}</span>}
+      <Item title="">
+        <Button style={{ width: '100%' }} onClick={handleClick}>
+          增量添加节点
+        </Button>
+      </Item>
+    </div>
+  );
 };
 
 export default Normal;