Merge pull request #48 from sirensolutions/merge-2.7.17

README.md

@@ -23,6 +23,8 @@ A React toolkit for graph analysis based on G6
 
 The SDK exported by G6VP is encapsulated based on Graphin. If you want to understand the capabilities of Graphin, you can take a look at the product [G6VP](https://github.com/antvis/G6VP)
 
+![demo2](https://github.com/antvis/G6VP/assets/10703060/40560cd2-3fea-41f8-888b-5abc1eb09b66)
+
 ## ✨ Features
 
 ### 🎨 Good-looking elements, standardized style configuration
@@ -93,8 +95,8 @@ export default () => {
 
 ```tsx | pure
 import React from 'react';
-import Graphin from '@antv/graphin';
-import { MiniMap } from '@antv/graphin-components';
+import Graphin, { Components, Utils } from '@antv/graphin';
+const { MiniMap } = Components;
 // mock data
 const data = Utils.mock(10).circle().graphin();
 export default () => {
@@ -111,7 +113,6 @@ export default () => {
 ```tsx | pure
 import React from 'react';
 import Graphin from '@antv/graphin';
-import { MiniMap } from '@antv/graphin-components';
 // Import icon resource files
 import iconLoader from '@antv/graphin-icons';
 import '@antv/graphin-icons/dist/index.css';
@@ -131,11 +132,7 @@ data.nodes.forEach(node => {
   };
 });
 export default () => {
-  return (
-    <Graphin data={data}>
-      <MiniMap />
-    </Graphin>
-  );
+  return <Graphin data={data} />;
 };
 ```
 
@@ -152,10 +149,3 @@ If you want to run Graphin locally, you may wish to read this [Contribution Guid
 - [Graphin Introduction](https://graphin.antv.vision/en-US/graphin/quick-start/introduction)
 - [Quick Start](https://graphin.antv.vision/en-US/graphin/quick-start/quick-start)
 - [Graphin visual analysis solution](https://graphin.antv.vision/en-US/solution/database/graph-database)
-
-## DingTalk
-
-You can scan the QR code to join graphin's group chat
-
-<img src='https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*-qzoTpLg-1cAAAAAAAAAAAAAARQnAQ' alt='DingTalk' width= '300px'/>
-```

README.zh-CN.md

@@ -23,6 +23,8 @@ A React toolkit for graph analysis based on G6
 
 G6VP 所导出的 SDK 正是基于 Graphin 封装的，如果你想了解 Graphin 的能力，不妨可以在 [G6VP](https://github.com/antvis/G6VP) 这款产品中一窥究竟
 
+![demo2](https://github.com/antvis/G6VP/assets/10703060/40560cd2-3fea-41f8-888b-5abc1eb09b66)
+
 ## ✨ 功能特性
 
 ### 🎨 高颜值元素，规范的样式配置。
@@ -94,9 +96,8 @@ export default () => {
 
 ```tsx | pure
 import React from 'react';
-import Graphin from '@antv/graphin';
-import { MiniMap } from '@antv/graphin-components';
-// mock数据
+import Graphin, { Components, Utils } from '@antv/graphin';
+const { MiniMap } = Components;
 const data = Utils.mock(10).circle().graphin();
 export default () => {
   return (
@@ -112,7 +113,6 @@ export default () => {
 ```tsx | pure
 import React from 'react';
 import Graphin from '@antv/graphin';
-import { MiniMap } from '@antv/graphin-components';
 // 引入图标资源文件
 import iconLoader from '@antv/graphin-icons';
 import '@antv/graphin-icons/dist/index.css';
@@ -132,11 +132,7 @@ data.nodes.forEach(node => {
   };
 });
 export default () => {
-  return (
-    <Graphin data={data}>
-      <MiniMap />
-    </Graphin>
-  );
+  return <Graphin data={data} />;
 };
 ```
 
@@ -153,7 +149,3 @@ export default () => {
 - [Graphin 简介](https://graphin.antv.vision/graphin/quick-start/introduction)
 - [快速上手](https://graphin.antv.vision/graphin/quick-start/quick-start)
 - [图可视分析解决方案](https://graphin.antv.vision/solution/database/graph-database)
-
-## 钉钉群
-
-<img src='https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*-qzoTpLg-1cAAAAAAAAAAAAAARQnAQ' alt='钉钉群' width= '300px'/>

packages/graphin-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-components",
-  "version": "2.4.0-siren.37",
+  "version": "2.4.0-siren.38",
   "description": "Components for graphin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@antv/util": "^2.0.10",
-    "@antv/graphin": "2.7.16-siren.3"
+    "@antv/graphin": "2.7.17-siren.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

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

@@ -19,6 +19,7 @@ interface ContextMenuProps {
   children: React.ReactChildren | JSX.Element;
   style?: React.CSSProperties;
   bindType?: 'node' | 'edge' | 'canvas';
+  disableAutoAdjust?: boolean;
 }
 
 interface State {
@@ -34,7 +35,7 @@ interface State {
 let containerRef: HTMLDivElement | null;
 
 const ContextMenu: React.FunctionComponent<ContextMenuProps> & { Menu: typeof Menu } = props => {
-  const { children, bindType = 'node', style } = props;
+  const { children, bindType = 'node', disableAutoAdjust, style } = props;
   const graphin = React.useContext(GraphinContext);
   const { graph } = graphin;
 
@@ -55,7 +56,7 @@ const ContextMenu: React.FunctionComponent<ContextMenuProps> & { Menu: typeof Me
         ...preState,
         visible: true,
         x: e.canvasX,
-        y: e.canvasY
+        y: e.canvasY,
       };
     });
 
@@ -74,12 +75,13 @@ const ContextMenu: React.FunctionComponent<ContextMenuProps> & { Menu: typeof Me
     let y = e.canvasY + graphTop + offsetY;
 
     // when the menu is (part of) out of the canvas
-
-    if (x + bbox.width > width) {
-      x = e.canvasX - bbox.width - offsetX + graphLeft;
-    }
-    if (y + bbox.height > height) {
-      y = e.canvasY - bbox.height - offsetY + graphTop;
+    if (!disableAutoAdjust) {
+      if (x + bbox.width > width) {
+        x = e.canvasX - bbox.width - offsetX + graphLeft;
+      }
+      if (y + bbox.height > height) {
+        y = e.canvasY - bbox.height - offsetY + graphTop;
+      }
     }
 
     if (bindType === 'node') {

packages/graphin-graphscope/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-graphscope",
-  "version": "1.0.3-siren.35",
+  "version": "1.0.3-siren.36",
   "description": "An Example for GraphScope",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
-    "@antv/graphin": "2.7.16-siren.3",
-    "@antv/graphin-components": "2.4.0-siren.37",
-    "@antv/graphin-icons": "1.0.0-siren.37",
+    "@antv/graphin": "2.7.17-siren.0",
+    "@antv/graphin-components": "2.4.0-siren.38",
+    "@antv/graphin-icons": "1.0.0-siren.38",
     "antd": "^4.10.3",
     "classnames": "^2.2.6",
     "re-resizable": "^6.9.0",

packages/graphin-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-icons",
-  "version": "1.0.0-siren.37",
+  "version": "1.0.0-siren.38",
   "description": "graphin icon fonts",
   "main": "./dist/index",
   "scripts": {

packages/graphin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin",
-  "version": "2.7.16-siren.3",
+  "version": "2.7.17-siren.0",
   "description": "the react toolkit for graph analysis based on g6",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -65,7 +65,7 @@
     "@types/lodash.clonedeep": "^4.5.6",
     "d3-quadtree": "^3.0.1",
     "lodash.clonedeep": "^4.5.0",
-    "@antv/g6": "4.8.24-siren.0"
+    "@antv/g6": "4.8.24-siren.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

packages/graphin/src/behaviors/ZoomCanvas.tsx

@@ -5,9 +5,9 @@ const defaultConfig = {
   /** 缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5； */
   sensitivity: 2,
   /** 最小缩放比例 */
-  minZoom: undefined,
+  minZoom: undefined as number | undefined,
   /** 最大缩放比例 */
-  maxZoom: undefined,
+  maxZoom: undefined as number | undefined,
   /** 是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape */
   enableOptimize: false,
   /** 当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape； */

packages/graphin/src/behaviors/useBehaviorHook.ts

@@ -14,6 +14,9 @@ const useBehaviorHook = (params: Props) => {
   const { disabled, ...otherConfig } = userProps;
 
   React.useEffect(() => {
+    if (!graph || graph.destroyed) {
+      return;
+    }
     /** 保持单例 */
     graph.removeBehaviors(type, mode);
 

packages/graphin/src/components/ContextMenu/index.tsx

@@ -18,15 +18,17 @@ export interface ContextMenuProps {
   children: (content: ContextMenuValue) => React.ReactNode;
   style?: React.CSSProperties;
   bindType?: 'node' | 'edge' | 'canvas';
+  disableAutoAdjust?: boolean;
 }
 
 const container = React.createRef() as React.RefObject<HTMLDivElement>;
 
 const ContextMenu: React.FunctionComponent<ContextMenuProps> = props => {
-  const { bindType, children, style } = props;
+  const { bindType, children, style, disableAutoAdjust } = props;
   const contextmenu = useContextMenu({
     bindType,
     container,
+    disableAutoAdjust,
   });
   const { visible, x, y, item } = contextmenu;
 

packages/graphin/src/components/ContextMenu/useContextMenu.tsx

@@ -8,6 +8,7 @@ const BIND_TYPES: BindType[] = ['node', 'edge', 'combo', 'canvas'];
 export interface ContextMenuProps {
   bindType?: BindType;
   container: React.RefObject<HTMLDivElement>;
+  disableAutoAdjust?: boolean;
 }
 
 export interface State {
@@ -23,7 +24,7 @@ export interface State {
 }
 
 const useContextMenu = (props: ContextMenuProps) => {
-  const { bindType = 'node', container } = props;
+  const { bindType = 'node', container, disableAutoAdjust } = props;
   const { graph } = React.useContext(GraphinContext);
 
   const [state, setState] = React.useState<State>({
@@ -55,12 +56,13 @@ const useContextMenu = (props: ContextMenuProps) => {
     let y = e.canvasY + graphTop + offsetY;
 
     // when the menu is (part of) out of the canvas
-
-    if (x + bbox.width > width) {
-      x = e.canvasX - bbox.width - offsetX + graphLeft;
-    }
-    if (y + bbox.height > height) {
-      y = e.canvasY - bbox.height - offsetY + graphTop;
+    if (!disableAutoAdjust) {
+      if (x + bbox.width > width) {
+        x = e.canvasX - bbox.width - offsetX + graphLeft;
+      }
+      if (y + bbox.height > height) {
+        y = e.canvasY - bbox.height - offsetY + graphTop;
+      }
     }
 
     if (bindType === 'node') {