Merge pull request #173 from antvis/fix/issues

Upgrade g6 to 3.7 and open local fresh
antvis · Sep 16, 2020 · 69f8264 · 69f8264
2 parents 8b2dea3 + 7bd27f1
commit 69f8264
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 34 deletions.
diff --git a/packages/graphin-components/package.json b/packages/graphin-components/package.json
@@ -51,9 +51,9 @@
   "dependencies": {
     "@ant-design/compatible": "^1.0.2",
     "@ant-design/icons": "^4.0.6",
-    "antd": "^4.1.4",
-    "@antv/g6": "^3.4.7",
-    "@antv/graphin": "^1.2.0"
+    "@antv/g6": "^3.7.3",
+    "@antv/graphin": "^1.2.0",
+    "antd": "^4.1.4"
   },
   "publishConfig": {
     "access": "public"

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
@@ -4,7 +4,7 @@ import { SelectOutlined } from '@ant-design/icons';
 import '@testing-library/jest-dom/extend-expect';
 import { getMockG6Event, getMockGraph } from '../../../../__mock__/g6';
 import { ContextMenu, isEqual, ContextMenuProps } from '../index';
-import getPosition from '../getPosition';
+import getPosition from '../position-calc';
 
 const mockGraph = getMockGraph();
 const mockG6Event = getMockG6Event();

diff --git a/packages/graphin-components/src/components/context-menu/index.tsx b/packages/graphin-components/src/components/context-menu/index.tsx
@@ -1,8 +1,8 @@
 import React, { memo, isValidElement } from 'react';
 import { Graph } from '@antv/g6';
 
-import useContextmenu from './useContextmenu';
-import Container, { MenuItemType } from './Container';
+import useContextmenu from './use-context-menu';
+import Container, { MenuItemType } from './menu-container';
 import { G6Event } from './types';
 import './index.less';
 
@@ -24,7 +24,7 @@ export interface ContextMenuProps {
   onContextmenu?: (e: G6Event, graph: Graph) => boolean; // 有这么一种业务场景，用户在关系扩散中，右键菜单希望是展开或者收起与其相关的叶子节点。这个时候，ContextMenu组件是否需要提供一种hook函数，来控制默认的右键行为
 }
 
-export const ContextMenu: React.FC<ContextMenuProps> = props => {
+export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
   const { graph, render, options } = props;
 
   const [state, setState] = useContextmenu(props);

diff --git a/...src/components/context-menu/Container.tsx → ...omponents/context-menu/menu-container.tsx b/...src/components/context-menu/Container.tsx → ...omponents/context-menu/menu-container.tsx
@@ -24,7 +24,7 @@ interface ContainerProps {
   onClose: () => void;
 }
 
-const Container: React.FC<ContainerProps> = props => {
+const Container: React.FC<ContainerProps> = (props) => {
   const { menu, onClose } = props;
 
   const onClickMenuItem = (item: MenuItemType) => {
@@ -34,7 +34,7 @@ const Container: React.FC<ContainerProps> = props => {
   };
 
   const menuItems = menu
-    .filter(item => !(item.visible === false)) // item.visible 不传时默认可见
+    .filter((item) => !(item.visible === false)) // item.visible 不传时默认可见
     .map((item, index) => {
       return (
         <MenuItem key={item.key} className={item.key} onClick={() => onClickMenuItem(item)}>

diff --git a/...rc/components/context-menu/getPosition.ts → .../components/context-menu/position-calc.ts b/...rc/components/context-menu/getPosition.ts → .../components/context-menu/position-calc.ts
@@ -1,21 +1,21 @@
 import { Graph } from '@antv/g6';
-import { MenuStyle } from './useContextmenu';
+import { MenuStyle } from './use-context-menu';
 import { G6Event, Canvas } from './types';
 
-type Position = {
+interface Position {
   x: number;
   y: number;
-};
+}
 
-type CanvasBox = {
+interface CanvasBox {
   canvasWidth: number;
   canvasHeight: number;
-};
+}
 
-type MenuBox = {
+interface MenuBox {
   menuWidth: number;
   menuHeight: number;
-};
+}
 
 const calculate = (
   position: Position,
@@ -39,9 +39,8 @@ const calculate = (
   };
 };
 
-const getPosition = (graph: Graph, e: G6Event, menuItem: MenuStyle): Position => {
-  // FIXME G6 getBBox 类型不正确
-  const { maxY, minX } = e.item.getBBox() as any; // eslint-disable-line
+const getItemPosition = (graph: Graph, e: G6Event, menuItem: MenuStyle) => {
+  const { maxY, minX } = e.item.getBBox(); // eslint-disable-line
   const canvasXY = graph.getCanvasByPoint(minX, maxY);
   const canvas = graph.get('canvas') as Canvas;
 
@@ -60,4 +59,17 @@ const getPosition = (graph: Graph, e: G6Event, menuItem: MenuStyle): Position =>
   };
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getCanvasPosition = (_graph: Graph, e: G6Event, _menuItem: MenuStyle) => {
+  return {
+    x: e.x,
+    y: e.y,
+  };
+};
+
+const getPosition = (graph: Graph, e: G6Event, menuItem: MenuStyle): Position => {
+  if (e.item) return getItemPosition(graph, e, menuItem);
+  return getCanvasPosition(graph, e, menuItem);
+};
+
 export default getPosition;
diff --git a/...components/context-menu/useContextmenu.ts → ...mponents/context-menu/use-context-menu.ts b/...components/context-menu/useContextmenu.ts → ...mponents/context-menu/use-context-menu.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect, isValidElement } from 'react';
 import { G6Event } from './types';
-import getPosition from './getPosition';
+import getPosition from './position-calc';
 import { ContextMenuProps } from './index';
 
 export interface MenuStyle {

diff --git a/packages/graphin-components/src/components/legend/__tests__/index.test.tsx b/packages/graphin-components/src/components/legend/__tests__/index.test.tsx
@@ -15,7 +15,7 @@ const MockComponent = (props: { options: LegendOption[] }) => {
   useEffect(() => {
     setTimeout(() => {
       setOptions(propOptions);
-    }, 3000);
+    }, 300);
   }, [propOptions]);
 
   return <Legend options={options} onChange={onChangeMock} />;

diff --git a/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx b/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Graphin from '@antv/graphin/src/Graphin';
+import { Graph } from '@antv/g6';
 
 import Toolbar from '../index';
 
@@ -14,10 +15,11 @@ describe('<Toolbar />', () => {
     const layout = {
       name: 'force',
     };
+    const graph = {} as Graph;
 
     render(
       <Graphin data={data} layout={layout}>
-        <Toolbar style={{ position: 'fixed', right: 68, top: 68 }} />
+        <Toolbar graph={graph} style={{ position: 'fixed', right: 68, top: 68 }} />
       </Graphin>,
     );
   });

diff --git a/packages/graphin-components/src/components/toolbar/index.tsx b/packages/graphin-components/src/components/toolbar/index.tsx
@@ -11,8 +11,8 @@ import {
 } from '@ant-design/icons';
 import { Tooltip, Button, Popover, Progress } from 'antd';
 
-import useFullscreen from './useFullscreen';
-import useZoom from './useZoom';
+import useFullscreen from './use-fullscreen';
+import useZoom from './use-zoom';
 import './index.less';
 
 const MIN_ZOOM = 0.1;
@@ -64,14 +64,15 @@ const defaultStyle: CSSProperties = {
 };
 
 const Toolbar: React.FC<ToolbarProps> = (props) => {
-  const { graph , className = '', render, graphVars = {}, apis, direction = 'vertical', style } = props;
+  const { graph, className = '', render, graphVars = {}, apis, direction = 'vertical', style } = props;
   const { history } = apis;
   const { width = 0, height = 0 } = graphVars;
   const graphinContainer = document.getElementById('graphin-container') as HTMLElement;
 
   const [fullscreen, toggleFullscreen] = useFullscreen(graphinContainer);
   const [zoom, handleZoom] = useZoom(1);
-  const handleGraphZoom = (isZoom: boolean, _curZoom) => {// eslint-disable-line
+  const handleGraphZoom = (isZoom: boolean, _curZoom) => {
+    // eslint-disable-line
     const center = {
       x: width / 2,
       y: height / 2,

diff --git a/...s/src/components/toolbar/useFullscreen.ts → .../src/components/toolbar/use-fullscreen.ts b/...s/src/components/toolbar/useFullscreen.ts → .../src/components/toolbar/use-fullscreen.ts
@@ -4,7 +4,7 @@ interface FunUseFullscreen {
   (el?: HTMLElement): [boolean, () => void];
 }
 
-const useFullscreen: FunUseFullscreen = el => {
+const useFullscreen: FunUseFullscreen = (el) => {
   const [fullscreen, setFullscreen] = useState(false);
   const handleFullScreenChange = () => {
     // if exit fullscreen
@@ -18,7 +18,7 @@ const useFullscreen: FunUseFullscreen = el => {
         .then(() => {
           setFullscreen(true);
         })
-        .catch(err => {
+        .catch((err) => {
           console.error('requestFullscreen error: ', err);
         });
     }
@@ -30,7 +30,7 @@ const useFullscreen: FunUseFullscreen = el => {
         .then(() => {
           setFullscreen(false);
         })
-        .catch(err => {
+        .catch((err) => {
           console.error('exitFullscreen error: ', err);
         });
     }

diff --git a/...ponents/src/components/toolbar/useZoom.ts → ...onents/src/components/toolbar/use-zoom.ts b/...ponents/src/components/toolbar/useZoom.ts → ...onents/src/components/toolbar/use-zoom.ts
diff --git a/packages/graphin-components/tsconfig.json b/packages/graphin-components/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "allowJs": true,
     "declaration": true,
     "target": "es2015",
     "moduleResolution": "node",

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

diff --git a/packages/graphin/package.json b/packages/graphin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin",
-  "version": "1.4.4",
+  "version": "1.5.0-beta.0",
   "description": "the react toolkit for graph analysis based on g6",
   "main": "./dist/index",
   "types": "./dist/index.d",
@@ -42,8 +42,8 @@
   "author": "Ant Financial",
   "license": "MIT",
   "dependencies": {
-    "@antv/g-canvas": "^0.4.12",
-    "@antv/g6": "^3.5.0",
+    "@antv/g-canvas": "^0.5.1",
+    "@antv/g6": "^3.7.3",
     "deepmerge": "^4.0.0",
     "lodash": "^4.17.15",
     "react": "^16.8.6",

diff --git a/packages/graphin/src/controller/init.ts b/packages/graphin/src/controller/init.ts
@@ -240,7 +240,7 @@ function init(props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode: Beha
 const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode: BehaviorsMode) => {
   const [instance, options] = init(props, graphDOM, behaviorsMode);
 
-  switchLocalRefresh(instance, false);
+  switchLocalRefresh(instance, true);
   doPan(options.pan, instance);
   doZoom(options.zoom, instance, options.pan);
 

diff --git a/packages/graphin/tsconfig.json b/packages/graphin/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "allowJs": true,
     "declaration": true,
     "module": "esnext",
     "target": "es2015",