4.8.16 (#4636)

* fix: edge label is not draggable, closes: #4612; fix: error occurs while clicking back button on timebar when the slider is already on the start, closes: #4598; docs: scrollNode demo drag node problem, closes: #4626; * chore: update layout version
antvis · Jun 13, 2023 · 08e955e · 08e955e
1 parent 4e13ecc
commit 08e955e
Show file tree

Hide file tree

Showing 25 changed files with 84 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # ChangeLog
 
+### 4.8.16
+
+- fix: edge label is not draggable, closes: #4612;
+- fix: error occurs while clicking back button on timebar when the slider is already on the start, closes: #4598;
+- docs: scrollNode demo drag node problem, closes: #4626;
+
 ### 4.8.15
 
 - fix: layout umd url with fixed version instead of latest version;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/element/edge.ts b/packages/core/src/element/edge.ts
@@ -320,7 +320,8 @@ const singleEdge: ShapeOptions = {
     const label = group.addShape('text', {
       attrs: labelStyle,
       name: 'text-shape',
-      labelRelated: true
+      labelRelated: true,
+      draggable: true,
     });
     group['shapeMap']['text-shape'] = label;
     if (!isNaN(rotate) && rotate !== '') {

diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.8.15',
+  version: '0.8.16',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.8.15",
+    "@antv/g6-core": "0.8.16",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.8.15",
+  "version": "4.8.16",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.8.15"
+    "@antv/g6-pc": "0.8.16"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.8.15';
+G6.version = '4.8.16';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.8.15';
+export const version = '4.8.16';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.8.15",
-    "@antv/g6-element": "0.8.15",
-    "@antv/g6-plugin": "0.8.15",
+    "@antv/g6-core": "0.8.16",
+    "@antv/g6-element": "0.8.16",
+    "@antv/g6-plugin": "0.8.16",
     "@antv/hierarchy": "^0.6.10",
     "@antv/layout": "^0.3.0",
     "@antv/matrix-util": "^3.1.0-beta.3",

diff --git a/packages/pc/src/behavior/zoom-canvas.ts b/packages/pc/src/behavior/zoom-canvas.ts
@@ -1,12 +1,14 @@
 import { G6Event, IG6GraphEvent } from '@antv/g6-core';
 import { ext } from '@antv/matrix-util';
 import { clone } from '@antv/util';
+import { getBrowserName } from '../util/browser';
 
 const { transform } = ext;
 const DELTA = 0.05;
 
 export default {
   getDefaultCfg(): object {
+    this.isFireFox = getBrowserName() === 'firefox';
     return {
       sensitivity: 2,
       minZoom: undefined,
@@ -163,10 +165,18 @@ export default {
     let ratio = graphZoom;
     let zoom = graphZoom;
     // 兼容IE、Firefox及Chrome
-    if (e.wheelDelta < 0) {
-      ratio = 1 - DELTA * sensitivity;
+    if (this.isFireFox) {
+      if (e.deltaY > 0 || e.deltaY < 0) {
+        ratio = 1 - DELTA * sensitivity;
+      } else {
+        ratio = 1 / (1 - DELTA * sensitivity);
+      }
     } else {
-      ratio = 1 / (1 - DELTA * sensitivity);
+      if (e.wheelDelta < 0) {
+        ratio = 1 - DELTA * sensitivity;
+      } else {
+        ratio = 1 / (1 - DELTA * sensitivity);
+      }
     }
     zoom = graphZoom * ratio;
     const minZoom = this.get('minZoom') || graph.get('minZoom');

diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts
@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.8.15',
+  version: '0.8.16',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/pc/src/layout/worker/layout.ts b/packages/pc/src/layout/worker/layout.ts
@@ -6,7 +6,7 @@ interface Event {
 }
 
 export const LayoutWorker = (
-  workerScriptURL: string = 'https://unpkg.com/@antv/[email protected].22/dist/layout.min.js',
+  workerScriptURL: string = 'https://unpkg.com/@antv/[email protected].23/dist/layout.min.js',
 ) => {
   function workerCode() {
     const LAYOUT_MESSAGE = {

diff --git a/packages/pc/src/util/browser.ts b/packages/pc/src/util/browser.ts
@@ -0,0 +1,14 @@
+/**
+ * Get current browser name.
+ * @returns  browser name
+ */
+export const getBrowserName = (): string => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.indexOf('firefox') > -1) return 'firefox';
+  if (userAgent.indexOf('safari') > -1) return 'safari';
+  if (userAgent.indexOf('opr') > -1) return 'opera';
+  if (userAgent.indexOf('chrome') > -1) return 'chrome';
+  if (userAgent.indexOf('trident') > -1) return 'ie 11';
+  if (userAgent.indexOf('ie') > -1) return 'ie';
+  return 'unknown';
+}
diff --git a/packages/pc/src/util/index.ts b/packages/pc/src/util/index.ts
@@ -1,8 +1,9 @@
 import * as ColorUtil from './color';
 import * as LayoutUtil from './layout';
 import * as GpuUtil from './gpu';
+import * as BrowserUtil from './browser';
 import { Util } from '@antv/g6-core';
 
-const G6Util = { ...Util, ...ColorUtil, ...LayoutUtil, ...GpuUtil } as any;
+const G6Util = { ...Util, ...ColorUtil, ...LayoutUtil, ...GpuUtil, ...BrowserUtil } as any;
 
 export default G6Util;
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,8 +22,8 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.8.15",
-    "@antv/g6-element": "0.8.15",
+    "@antv/g6-core": "0.8.16",
+    "@antv/g6-element": "0.8.16",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

diff --git a/packages/plugin/src/timeBar/trendTimeBar.ts b/packages/plugin/src/timeBar/trendTimeBar.ts
@@ -817,10 +817,16 @@ export default class TrendTimeBar {
     if (this.start < 0) {
       this.start = 0;
     }
-
+    if (this.start > 1) {
+      this.start = 1;
+    }
     if (this.end > 1) {
       this.end = 1;
     }
+    if (this.end < 0) {
+      this.end = 0;
+    }
+
     const min = this.x + this.start * this.width;
     const max = this.x + this.end * this.width;
 

diff --git a/packages/plugin/tests/unit/timebar-spec.ts b/packages/plugin/tests/unit/timebar-spec.ts
@@ -705,11 +705,7 @@ xdescribe('timebar filter edges', () => {
   });
 });
 
-<<<<<<< HEAD
-describe('timebar dependent on graph container', ()=>{
-=======
 describe('timebar dependent on graph container', () => {
->>>>>>> 04062ceceb (fix: fix issue if set timebar in independent container on destroy (#4497))
   const timebarContainer = document.createElement('div');
   timebarContainer.id = 'time-bar-container';
   // timebarContainer.style.position = 'absolute';
@@ -784,12 +780,6 @@ describe('timebar dependent on graph container', () => {
 
     graph.data(data);
     graph.render();
-<<<<<<< HEAD
-  });
-})
-=======
-
     graph.removePlugin(timeline);
   });
-});
->>>>>>> 04062ceceb (fix: fix issue if set timebar in independent container on destroy (#4497))
+});
diff --git a/packages/site/docs/api/Algorithm.en.md b/packages/site/docs/api/Algorithm.en.md
@@ -722,7 +722,7 @@ console.log(allPath);
 // Expected output: [['A', 'D', 'F', 'E'], ['A', 'D', 'E'], ['A', 'E']]
 ```
 
-### getConnectedComponents
+### connectedComponent
 
 Find the connect component of the graph. In the case of a directed graph, the strongly connected components are returned.
 
@@ -822,14 +822,14 @@ graph.data(data);
 graph.render();
 
 // Connected components
-const components = getConnectedComponents(data, false);
+const components = connectedComponent(data, false);
 components.forEach((component) => {
   console.log(component.map((node) => node.get('id')));
 });
 // Expected output: ['A', 'B', 'C', 'D', 'E', 'F'], ['G', 'H']
 
 // Strongly-connected components
-const components2 = getConnectedComponents(data, true);
+const components2 = connectedComponent(data, true);
 components2.forEach((component) => {
   console.log(component.map((node) => node.get('id')));
 });

diff --git a/packages/site/docs/api/Algorithm.zh.md b/packages/site/docs/api/Algorithm.zh.md
@@ -804,7 +804,7 @@ console.log(allPath);
 // 期望输出值：[['A', 'D', 'F', 'E'], ['A', 'D', 'E'], ['A', 'E']]
 ```
 
-### getConnectedComponents
+### connectedComponent
 
 返回图中的连通分量。若为无向图，连通分量指图中的极大连通子图，连通子图中任何两个顶点之间通过路径相互连接；若为有向图，则返回所有强连通分量，强连通分量指有向图中的极大强连通子图，强连通子图中任何两个节点之间都存在一条可达到彼此的有向路径。
 
@@ -902,14 +902,14 @@ graph.data(data);
 graph.render();
 
 // 图中的连通分量
-const components = getConnectedComponents(data, false);
+const components = connectedComponent(data, false);
 components.forEach((component) => {
   console.log(component.map((node) => node.get('id')));
 });
 // 期望输出结果：['A', 'B', 'C', 'D', 'E', 'F'], ['G', 'H']
 
 // 有向图中的强连通分量
-const components2 = getConnectedComponents(data, true);
+const components2 = connectedComponent(data, true);
 components2.forEach((component) => {
   console.log(component.map((node) => node.get('id')));
 });

diff --git a/packages/site/docs/api/graphLayout/guide.en.md b/packages/site/docs/api/graphLayout/guide.en.md
@@ -46,7 +46,7 @@ The configurations of each layout algorithms are different. Please refer to corr
 - If there are `x` and `y` in node data, the graph will render with these information;
 - If there is no positions information in node data, the graph will arrange nodes with Random Layout by default.
 
-If the worker is enabled, notice that worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/[email protected].22/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
+If the worker is enabled, notice that worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/[email protected].23/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
 
 
 ## Instantiate Independently

diff --git a/packages/site/docs/api/graphLayout/guide.zh.md b/packages/site/docs/api/graphLayout/guide.zh.md
@@ -49,7 +49,7 @@ const graph = new G6.Graph({
 - 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制；
 - 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。
 
-如果开启了 webworker，worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/[email protected].22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可。
+如果开启了 webworker，worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/[email protected].23/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可。
 
 ## 单独使用布局
 

diff --git a/packages/site/docs/manual/middle/layout/webworker.en.md b/packages/site/docs/manual/middle/layout/webworker.en.md
@@ -20,4 +20,4 @@ Note:
 
 - TreeGraph layouts do not support Web-Worker;
 - Sub-Graph layout mechanism do not support Web-Worker;
-- Worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/[email protected].22/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
+- Worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/[email protected].23/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
diff --git a/packages/site/docs/manual/middle/layout/webworker.zh.md b/packages/site/docs/manual/middle/layout/webworker.zh.md
@@ -21,4 +21,4 @@ const graph = new G6.Graph({
 
 - 树图不支持 Web-Worker 机制；
 - 子图布局机制暂不支持 Web-Worker 机制；
-- worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/[email protected].22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可
+- worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/[email protected].23/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可
diff --git a/packages/site/examples/interaction/treeBehavior/demo/loadTreeData.js b/packages/site/examples/interaction/treeBehavior/demo/loadTreeData.js
@@ -149,6 +149,7 @@ graph.on('node:click', function (evt) {
         },
       ],
     };
+    graph.updateItem(nodeId, { collapsed: true })
     graph.addChild(childData, nodeId);
     count++;
   }

diff --git a/packages/site/examples/item/customNode/demo/scrollNode.js b/packages/site/examples/item/customNode/demo/scrollNode.js
@@ -127,6 +127,8 @@ registerBehavior("dice-er-scroll", {
       wheel: "scorll",
       click: "click",
       "node:mousemove": "move",
+      "node:mousedown": "mousedown",
+      "node:mouseup": "mouseup"
     };
   },
   scorll(e) {
@@ -201,7 +203,14 @@ registerBehavior("dice-er-scroll", {
       setTimeout(() => graph.layout(), 100);
     }
   },
+  mousedown(e) {
+    this.mousedown = true;
+  },
+  mouseup(e) {
+    this.mousedown = false;
+  },
   move(e) {
+    if (this.mousedown) return;
     const name = e.shape.get("name");
     const item = e.item;
 

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/g6-site",
-  "version": "4.8.7",
+  "version": "4.8.16",
   "description": "G6 sites deployed on gh-pages",
   "keywords": [
     "antv",
@@ -38,7 +38,7 @@
     "@antv/algorithm": "^0.1.8",
     "@antv/chart-node-g6": "^0.0.3",
     "@antv/dumi-theme-antv": "^0.3.0-beta.5",
-    "@antv/g6": "^4.8.7",
+    "@antv/g6": "^4.8.16",
     "@antv/hierarchy": "^0.6.10",
     "@antv/g6-react-node": "^1.4.5",
     "@antv/layout-wasm": "^1.3.4",