From 08e955ea45558c8d8848f19b01b8cddc29f9e2bf Mon Sep 17 00:00:00 2001 From: Yanyan Wang Date: Tue, 13 Jun 2023 13:40:11 +0800 Subject: [PATCH] 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 --- CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/core/src/element/edge.ts | 3 ++- packages/core/src/global.ts | 2 +- packages/element/package.json | 4 ++-- packages/g6/package.json | 4 ++-- packages/g6/src/index.ts | 4 ++-- packages/pc/package.json | 8 ++++---- packages/pc/src/behavior/zoom-canvas.ts | 16 +++++++++++++--- packages/pc/src/global.ts | 2 +- packages/pc/src/layout/worker/layout.ts | 2 +- packages/pc/src/util/browser.ts | 14 ++++++++++++++ packages/pc/src/util/index.ts | 3 ++- packages/plugin/package.json | 6 +++--- packages/plugin/src/timeBar/trendTimeBar.ts | 8 +++++++- packages/plugin/tests/unit/timebar-spec.ts | 12 +----------- packages/site/docs/api/Algorithm.en.md | 6 +++--- packages/site/docs/api/Algorithm.zh.md | 6 +++--- packages/site/docs/api/graphLayout/guide.en.md | 2 +- packages/site/docs/api/graphLayout/guide.zh.md | 2 +- .../docs/manual/middle/layout/webworker.en.md | 2 +- .../docs/manual/middle/layout/webworker.zh.md | 2 +- .../treeBehavior/demo/loadTreeData.js | 1 + .../examples/item/customNode/demo/scrollNode.js | 9 +++++++++ packages/site/package.json | 4 ++-- 25 files changed, 84 insertions(+), 46 deletions(-) create mode 100644 packages/pc/src/util/browser.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fe66e1fdca..fdbae3e41b7 100644 --- 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 index 49a2ce7479d..801f6fdf857 100644 --- 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 index 6cc95365f34..4fe9f45cce7 100644 --- 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 index ecde607a91f..506d8e3ba28 100644 --- 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 index c142f18cefc..2153a3e6aa0 100644 --- 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 index 8f9a6856c80..8e616c909b7 100644 --- 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 index 2ad3e1197de..0007ce1b956 100644 --- 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 index 0546aa6f101..984975e4c02 100644 --- 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 index 9b5dec87b00..f8c1ac76fa4 100644 --- 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 index b5a44f587fc..425d66330d0 100644 --- 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 index 3134f72b442..70faa4b727e 100644 --- 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/layout@0.3.22/dist/layout.min.js', + workerScriptURL: string = 'https://unpkg.com/@antv/layout@0.3.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 new file mode 100644 index 00000000000..acede79d42e --- /dev/null +++ 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'; +} \ No newline at end of file diff --git a/packages/pc/src/util/index.ts b/packages/pc/src/util/index.ts index fa7b3a36b82..db856ad6a65 100644 --- 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 index f268813e9e1..64340701dfb 100644 --- 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 index b3ef1299ae2..813e769362f 100644 --- 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 index 8106e587290..9e531b56343 100644 --- 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)) +}); \ No newline at end of file diff --git a/packages/site/docs/api/Algorithm.en.md b/packages/site/docs/api/Algorithm.en.md index 9b0e62db9e1..4d4a8f93a9e 100644 --- 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 index 0028540934c..bece751de7c 100644 --- 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 index 1104517d66d..8d710e28bac 100644 --- 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/layout@0.3.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/layout@0.3.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 index d3d478bd8e7..ad040f60121 100644 --- 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/layout@0.3.22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可。 +如果开启了 webworker，worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@0.3.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 index 6add8e29063..042e76cd32a 100644 --- 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/layout@0.3.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/layout@0.3.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 index bfe83bc4ffa..2ce668c77a0 100644 --- 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/layout@0.3.22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可 +- worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@0.3.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 index a00f27a1d1c..fae2cef63ec 100644 --- 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 index 532862e41c6..974b8c211ae 100644 --- 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 index 099532878fe..bf70774bf6b 100644 --- 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",