feat: fix ci

antvis · Nov 21, 2019 · 58ccf55 · 58ccf55
1 parent 7eba439
commit 58ccf55
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 84 deletions.
diff --git a/packages/graphin-components/package.json b/packages/graphin-components/package.json
@@ -28,7 +28,7 @@
         "eventemitter3": "^4.0.0"
     },
     "dependencies": {
-        "@antv/g6": "^3.1.9",
+        "@antv/g6": "3.1.9",
         "@antv/graphin": "^1.0.0-beta.6"
     },
     "publishConfig": {

diff --git a/packages/graphin-studio/public/index.html b/packages/graphin-studio/public/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <title>example</title>
+        <title>Graphin Studio</title>
         <meta name="keywords" content="react,component" />
-        <meta name="description" content="example" />
+        <meta name="description" content="Graphin Studio" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.6/antd.min.css" />
     </head>
     <body>

diff --git a/packages/graphin-studio/src/Extend/RectNodeShape.ts b/packages/graphin-studio/src/Extend/RectNodeShape.ts
@@ -1,3 +1,4 @@
+import { NodeShapeFunction } from '@antv/graphin';
 import { Node } from '../types';
 
 const defaultStyles = {
@@ -20,7 +21,7 @@ const defaultStyles = {
 };
 type Style = typeof defaultStyles;
 // eslint-disable-next-line
-const renderRectNode = (node: Node) => {
+const renderRectNode: NodeShapeFunction = (node: Node) => {
     const style: Style = {
         ...defaultStyles,
         ...node.style,
@@ -72,7 +73,7 @@ const renderRectNode = (node: Node) => {
                 },
             },
             {
-                shape: 'Marker',
+                shape: 'marker',
                 attrs: {
                     id: 'node-icon',
                     symbol: node.data.type,

diff --git a/packages/graphin-studio/src/GraphinStudio.tsx b/packages/graphin-studio/src/GraphinStudio.tsx
@@ -51,7 +51,7 @@ const Graphene = () => {
 
     return (
         <Layout>
-            <Header>This is Header</Header>
+            <Header>Header</Header>
             <Side>
                 <OnlyGraphinReady graphRef={graphRef}>
                     <OperatorBar dispatch={dispatch} state={state} graphRef={graphRef} />
@@ -65,7 +65,7 @@ const Graphene = () => {
                     <SearchBar dispatch={dispatch} state={state} />
                 </OnlyGraphinReady>
             </Main>
-            <Footer>This is Footer</Footer>
+            <Footer>Footer</Footer>
         </Layout>
     );
 };

diff --git a/packages/graphin-studio/src/Home/Home.tsx b/packages/graphin-studio/src/Home/Home.tsx
@@ -16,8 +16,8 @@ const Home = () => {
                 <Link to="/graphin-studio" className="card-item">
                     <div className="card-text">
                         {`
-                            演示demo：Graphin Studio
-                                --- 通用图分析工作台
+                            演示 Demo: Graphin Studio
+                                —— 通用图分析工作台
                             `}
                     </div>
                 </Link>

diff --git a/packages/graphin/package.json b/packages/graphin/package.json
@@ -1,47 +1,48 @@
 {
-    "name": "@antv/graphin",
-    "version": "1.0.0-beta.7",
-    "description": "the react toolkit for graph analysis based on g6",
-    "main": "./dist/index",
-    "types": "./dist/index.d",
-    "scripts": {
-        "start": "father build --watch",
-        "build": "father build",
-        "test": "jest",
-        "prettier": "prettier --write ./src/**/**/**/*.js"
-    },
-    "devDependencies": {
-        "@testing-library/jest-dom": "^4.2.0",
-        "@testing-library/react": "^9.3.0",
-        "@types/lodash": "^4.14.141",
-        "@types/react": "^16.9.2",
-        "@types/react-dom": "^16.9.0",
-        "cross-env": "^5.2.0",
-        "css-loader": "^1.0.1",
-        "eventemitter3": "^4.0.0",
-        "father": "^2.23.1",
-        "jest": "^24.9.0",
-        "jest-canvas-mock": "^2.1.2",
-        "less": "^3.8.1",
-        "less-loader": "^4.1.0",
-        "prettier": "^1.18.2",
-        "rimraf": "^2.6.2",
-        "style-loader": "^0.23.1",
-        "svg-inline-loader": "^0.8.0",
-        "svg-path-parser": "^1.1.0",
-        "ts-jest": "^24.1.0"
-    },
-    "sideEffects": false,
-    "author": "Ant Financial",
-    "license": "MIT",
-    "dependencies": {
-        "@antv/g6": "^3.1.9",
-        "deepmerge": "^4.0.0",
-        "lodash": "^4.17.15",
-        "react": "^16.8.6",
-        "svg2marker": "^0.1.3"
-    },
-    "publishConfig": {
-        "access": "public"
-    }
+  "name": "@antv/graphin",
+  "version": "1.0.0-beta.7",
+  "description": "the react toolkit for graph analysis based on g6",
+  "main": "./dist/index",
+  "types": "./dist/index.d",
+  "scripts": {
+    "start": "father build --watch",
+    "build": "father build",
+    "test": "jest",
+    "prettier": "prettier --write ./src/**/**/**/*.js"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.0",
+    "@testing-library/react": "^9.3.0",
+    "@types/lodash": "^4.14.141",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.1",
+    "eventemitter3": "^4.0.0",
+    "father": "^2.23.1",
+    "jest": "^24.9.0",
+    "jest-canvas-mock": "^2.1.2",
+    "jsdom-worker": "^0.1.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "prettier": "^1.18.2",
+    "rimraf": "^2.6.2",
+    "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.0",
+    "svg-path-parser": "^1.1.0",
+    "ts-jest": "^24.1.0"
+  },
+  "sideEffects": false,
+  "author": "Ant Financial",
+  "license": "MIT",
+  "dependencies": {
+    "@antv/g6": "3.1.9",
+    "deepmerge": "^4.0.0",
+    "lodash": "^4.17.15",
+    "react": "^16.8.6",
+    "svg2marker": "^0.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }
diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx
@@ -37,7 +37,6 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
     constructor(props: GraphinProps) {
         super(props);
         this.state = {
-            /** 图是否准备完成 */
             isGraphReady: false,
             data: props.data,
             forceSimulation: null,
@@ -53,9 +52,9 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
     componentDidMount() {
         const { data } = this.props;
         debug('effect')('did-mount');
-        /** 1. 注册节点 */
+        // register props.extend and props.register
         const behavirosMode = registerController(this.props);
-        /** 2. 初始化实例 */
+        // init G6 instance
         const { instance, width, height, options } = initController(
             this.props,
             this.graphDOM as HTMLDivElement,
@@ -65,7 +64,7 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
         this.graph = instance as GraphType;
         const { data: newData, forceSimulation } = layoutController(this.getContext(), { data });
         this.forceSimulation = forceSimulation!;
-        /** 3.设置state */
+
         this.setState(
             {
                 isGraphReady: true,
@@ -79,14 +78,13 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
                 this.renderGraphWithLifeCycle();
             },
         );
-        /** 4.内部监听一些图事件 */
         this.handleEvents();
     }
 
     componentDidUpdate(prevProps: GraphinProps) {
         const isDataChange = this.shouldUpdateWithDeps(prevProps, ['data']);
         const isLayoutChange = this.shouldUpdateWithDeps(prevProps, ['layout']);
-        /** 只有data或者layout改变的时候，才会重新update */
+        // only rerender when data or layout change
         if (isDataChange || isLayoutChange) {
             let { data: currentData } = this.state;
             if (isDataChange) {
@@ -95,14 +93,13 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
             }
             const { data, forceSimulation } = layoutController(this.getContext(), { data: currentData, prevProps });
             this.forceSimulation = forceSimulation!;
-            /** 5.设置state */
             this.setState(
                 {
                     data,
                     forceSimulation,
                 },
                 () => {
-                    /** 6.渲染 */
+                    // rerender Graph
                     this.renderGraphWithLifeCycle();
                 },
             );
@@ -173,7 +170,6 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
     };
 
     stopForceSimulation = () => {
-        /** 如果有模拟器需要先停止 */
         const { forceSimulation } = this.state;
         if (forceSimulation) {
             forceSimulation.stop();
@@ -183,7 +179,7 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
     handleSaveHistory = () => {
         const currentState = {
             ...this.state,
-            graphSave: cloneDeep(this.graph!.save()), // 避免数据引用
+            graphSave: cloneDeep(this.graph!.save()),
         };
         this.history.save(currentState);
     };
@@ -229,11 +225,7 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
         this.graph!.emit('afterchangedata');
     };
 
-    /**
-     * 根据history来渲染图
-     */
     renderGraphByHistory = () => {
-        /** 如果历史上有模拟器，需要重新启动 */
         const { forceSimulation, graphSave } = this.state;
         if (forceSimulation) {
             forceSimulation.restart(graphSave.nodes || [], this.graph!);
@@ -247,31 +239,27 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
         const combineProps = {
             graph: this.graph,
             graphDOM: this.graphDOM,
-            graphVars: this.state, // 保留引用
+            graphVars: this.state,
             apis: this.getApis(),
         };
 
         if (!children) {
             return null;
         }
 
-        /**  1.render-props */
         if (typeof children === 'function') {
             return children(combineProps);
         }
 
-        /** 2.combose-component */
         /**
-         * Children是React元素的情况 :有包裹的Tag即可，无论是div或者是Fragement或者是组件
-         * 1. <Graphehe> <div> this is text <ContextMenu />  </div> </Graphene>
-         * 2. <Graphehe> <CustomerComponent> this is text  <ContextMenu /> </CustomerComponent> </Graphene>
-         * 2. <Graphehe> <Fragment> this is text  <ContextMenu /> </Graphene>
+         * 1. <Graphin> <div> this is text <ContextMenu />  </div> </Graphin>
+         * 2. <Graphin> <CustomerComponent> this is text  <ContextMenu /> </CustomerComponent> </Graphin>
+         * 3. <Graphin> <Fragment> this is text  <ContextMenu /> </Graphin>
          */
         if (
             React.isValidElement(children) &&
             (String(children.type) === 'Symbol(react.fragment)' || typeof children.type === 'string')
         ) {
-            // eslint-disable-next-line no-console
             console.error('Please do not wrap components inside dom element or Fragment when using Graphin');
             return children;
         }
@@ -281,7 +269,7 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
         }
 
         return React.Children.map(children, child => {
-            // 如果传入的是 DOM 元素或不是合法的 Element，不传入 props
+            // do not pass props if element is a DOM element or not a valid react element.
             if (!React.isValidElement(child) || typeof child.type === 'string') {
                 return child;
             }
@@ -292,7 +280,6 @@ class Graph extends React.PureComponent<GraphinProps, GraphinState> {
     };
 
     render() {
-        // debug('core')(this.state);
         const { isGraphReady } = this.state;
         return (
             <>

diff --git a/packages/graphin/src/__tests__/index.test.tsx b/packages/graphin/src/__tests__/index.test.tsx
@@ -70,6 +70,8 @@ describe('<Graphin />', () => {
             name: 'grid',
         };
 
+        console.log('fff', typeof Worker === 'undefined', typeof Worker);
+
         const { queryByText } = render(
             <Graphin data={data} layout={layout}>
                 <MockComponent />
@@ -122,7 +124,7 @@ describe('<Graphin />', () => {
             };
 
             const layout = {
-                name: 'grid',
+                name: 'circle',
             };
 
             const { getByTestId, rerender } = render(
@@ -142,11 +144,22 @@ describe('<Graphin />', () => {
             await wait();
 
             const prevEventsCount = getCanvasEventCount(getByTestId);
+            console.log(getCanvasPathCount(getByTestId));
 
-            data = Object.assign({}, SAMPLE_DATA_2);
-            act(() => {
-                rerender(<Graphin data={data} layout={layout}></Graphin>);
-            });
+            rerender(
+                <Graphin
+                    data={mock(10)
+                        .circle()
+                        .graphin()}
+                    layout={layout}
+                    options={{
+                        animate: false,
+                        animateCfg: {
+                            duration: 0,
+                        },
+                    }}
+                ></Graphin>,
+            );
 
             await wait();
             expect(getCanvasEventCount(getByTestId) > prevEventsCount).toBeTruthy();

diff --git a/packages/graphin/src/utils/mock.ts b/packages/graphin/src/utils/mock.ts
@@ -87,7 +87,7 @@ export class Mock {
         return this;
     };
 
-    circle = (centerId: string) => {
+    circle = (centerId = '') => {
         let id = centerId;
         if (this.nodeIds.indexOf(id) === -1) {
             id = 'node-0';