From a31c45d87370ea5c6d29c40793ce4be810e2e338 Mon Sep 17 00:00:00 2001 From: Yanyan Wang Date: Sat, 8 Apr 2023 19:16:29 +0800 Subject: [PATCH] fix: type for draw function in elements, closes: #4395 (#4398) * fix: type for draw function in elements, closes: #4395 * fix: force2 with webworker, closes: #4394 * fix: excludeInvisibles with collapse-expand behavior problem; * chore: update version nums * fix: tooltip top position error (#4411) fix: tooltip top position error --------- Co-authored-by: hipi <22478003+hipi@users.noreply.github.com> --- CHANGELOG.md | 6 +++++ packages/core/package.json | 2 +- packages/core/src/global.ts | 2 +- packages/core/src/interface/shape.ts | 2 +- packages/element/package.json | 4 +-- packages/g6/package.json | 4 +-- packages/g6/src/index.ts | 4 +-- packages/pc/package.json | 6 ++--- packages/pc/src/global.ts | 2 +- packages/pc/src/graph/tree-graph.ts | 27 +++++++++++-------- packages/pc/src/layout/worker/layout.ts | 2 ++ packages/plugin/package.json | 6 ++--- packages/plugin/src/timeBar/index.ts | 2 +- packages/plugin/src/tooltip/index.ts | 3 +++ .../middle/elements/combos/custom-combo.en.md | 4 +-- .../middle/elements/combos/custom-combo.zh.md | 4 +-- .../examples/interaction/combo/demo/cRect.js | 4 +-- .../examples/item/customCombo/demo/cRect.js | 4 +-- 18 files changed, 52 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2eea1f485b2..264c889e7dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # ChangeLog +### 4.8.9 + +- fix: type for draw function in elements, closes: #4395; +- fix: force2 with webworker, closes: #4394; +- fix: excludeInvisibles with collapse-expand behavior problem; + ### 4.8.8 - feat: preset layout with gpu layout; diff --git a/packages/core/package.json b/packages/core/package.json index fc109a44aa6..a8ae3a3967f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-core", - "version": "0.8.8", + "version": "0.8.9", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index dbc996806da..19514ada1c0 100644 --- a/packages/core/src/global.ts +++ b/packages/core/src/global.ts @@ -64,7 +64,7 @@ const colorSet = { }; export default { - version: '0.8.8', + version: '0.8.9', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/core/src/interface/shape.ts b/packages/core/src/interface/shape.ts index 6815f28a24e..415c644898c 100644 --- a/packages/core/src/interface/shape.ts +++ b/packages/core/src/interface/shape.ts @@ -31,7 +31,7 @@ export type ShapeOptions = Partial<{ /** * 绘制 */ - draw: (cfg?: ModelConfig, group?: IGroup) => IShape; + draw: (cfg: ModelConfig, group: IGroup) => IShape; getCustomConfig: (cfg: ModelConfig) => ModelConfig; drawShape: (cfg?: ModelConfig, group?: IGroup) => IShape; diff --git a/packages/element/package.json b/packages/element/package.json index e9794517100..a572d631d1f 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-element", - "version": "0.8.8", + "version": "0.8.9", "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.8", + "@antv/g6-core": "0.8.9", "@antv/util": "~2.0.5" }, "devDependencies": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 2a1520c7e07..fb2a5a481e3 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "4.8.8", + "version": "4.8.9", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -66,7 +66,7 @@ ] }, "dependencies": { - "@antv/g6-pc": "0.8.8" + "@antv/g6-pc": "0.8.9" }, "devDependencies": { "@babel/core": "^7.7.7", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index ef7a429b687..23c7b46c577 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.8'; +G6.version = '4.8.9'; export * from '@antv/g6-pc'; export default G6; -export const version = '4.8.8'; +export const version = '4.8.9'; diff --git a/packages/pc/package.json b/packages/pc/package.json index 768b68ad825..7d0c4bf3939 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-pc", - "version": "0.8.8", + "version": "0.8.9", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -75,8 +75,8 @@ "@antv/g-canvas": "^0.5.2", "@antv/g-math": "^0.1.1", "@antv/g-svg": "^0.5.1", - "@antv/g6-core": "0.8.8", - "@antv/g6-element": "0.8.8", + "@antv/g6-core": "0.8.9", + "@antv/g6-element": "0.8.9", "@antv/g6-plugin": "^0.8.7", "@antv/hierarchy": "^0.6.10", "@antv/layout": "^0.3.0", diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts index 9f38a347610..6e347255f41 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.8', + version: '0.8.9', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/pc/src/graph/tree-graph.ts b/packages/pc/src/graph/tree-graph.ts index 91fb9b08ff8..f0c2b07bee5 100644 --- a/packages/pc/src/graph/tree-graph.ts +++ b/packages/pc/src/graph/tree-graph.ts @@ -343,26 +343,31 @@ export default class TreeGraph extends Graph implements ITreeGraph { let layoutData = data; if (layoutConfig?.excludeInvisibles) { data = clone(self.get('data')); + const cacheChidMap = {} traverseTree(data, subTree => { const siblings = subTree.children; if (!siblings?.length) return true; for (let i = siblings.length - 1; i >= 0; i--) { const node = this.findById(siblings[i].id); - let isHidden = node ? !node.isVisible() : siblings[i].visible === false; - if (isHidden) siblings.splice(i, 1); + const isHidden = node ? !node.isVisible() : siblings[i].visible === false; + if (isHidden) { + cacheChidMap[subTree.id] = cacheChidMap[subTree.id] || []; + cacheChidMap[subTree.id].push({ + idx: i, + child: siblings.splice(i, 1)[0], + }); + } } }); layoutData = layoutMethod ? layoutMethod(data, self.get('layout')) : data; traverseTree(layoutData, subTree => { - const node = this.findDataById(subTree.id); - if (!node) return; - node.data = subTree.data; - node.x = subTree.x; - node.y = subTree.y; - }); - layoutData = self.get('data'); - traverseTree(layoutData, subTree => { - if (!subTree.data) subTree.data = { ...subTree } + const cachedItems = cacheChidMap[subTree.id]; + if (cachedItems?.length) { + for (let i = cachedItems.length - 1; i >= 0; i --) { + const { idx, child } = cachedItems[i]; + subTree.children.splice(idx, 0, child); + } + } }); } else { layoutData = layoutMethod ? layoutMethod(data, self.get('layout')) : data; diff --git a/packages/pc/src/layout/worker/layout.ts b/packages/pc/src/layout/worker/layout.ts index 70f0367e8ee..4484e10f50a 100644 --- a/packages/pc/src/layout/worker/layout.ts +++ b/packages/pc/src/layout/worker/layout.ts @@ -29,6 +29,8 @@ export const LayoutWorker = ( // @ts-ignore layout.registerLayout('force', layout.ForceLayout); // @ts-ignore + layout.registerLayout('force2', layout.Force2Layout); + // @ts-ignore layout.registerLayout('circular', layout.CircularLayout); // @ts-ignore layout.registerLayout('dagre', layout.DagreLayout); diff --git a/packages/plugin/package.json b/packages/plugin/package.json index e5f49f18aa7..365ee47de09 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-plugin", - "version": "0.8.8", + "version": "0.8.9", "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.8", - "@antv/g6-element": "0.8.8", + "@antv/g6-core": "0.8.9", + "@antv/g6-element": "0.8.9", "@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/index.ts b/packages/plugin/src/timeBar/index.ts index 37b4639f2e1..3003a1667d0 100644 --- a/packages/plugin/src/timeBar/index.ts +++ b/packages/plugin/src/timeBar/index.ts @@ -393,7 +393,7 @@ export default class TimeBar extends Base { graph.getEdges().forEach(edge => currentEdgeExistMap[edge.getID()] = true); if (filterItemTypes.includes('node')) { - originNodes.forEach((node: any) => { + originNodes?.forEach((node: any) => { const date = +(getDate?.(node) || node.date); const hitRange = (date >= minDate && date <= maxDate) || shouldIgnore?.('node', node, { min: minDate, max: maxDate }); const exist = currentNodeExistMap[node.id]; diff --git a/packages/plugin/src/tooltip/index.ts b/packages/plugin/src/tooltip/index.ts index 030a497062a..817a90b98be 100644 --- a/packages/plugin/src/tooltip/index.ts +++ b/packages/plugin/src/tooltip/index.ts @@ -257,6 +257,9 @@ export default class Tooltip extends Base { if (y + bbox.height + offsetY > height) { res.y -= bbox.height + offsetY; + if (res.y < 0) { + res.y = 0 + } } modifyCSS(tooltip, { diff --git a/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md b/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md index 4b329e292e9..a993421f482 100644 --- a/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md +++ b/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md @@ -115,8 +115,8 @@ G6.registerCombo( const rect = group.addShape('rect', { attrs: { ...style, - x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2, - y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2, + x: -style.width / 2 - padding[3], + y: -style.height / 2 - padding[0], width: style.width, height: style.height, }, diff --git a/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md b/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md index 95db67aebcd..187c022a30c 100644 --- a/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md +++ b/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md @@ -106,8 +106,8 @@ G6.registerCombo( const rect = group.addShape('rect', { attrs: { ...style, - x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2, - y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2, + x: -style.height / 2 - padding[0], + y: -style.width / 2 - padding[3], width: style.width, height: style.height, }, diff --git a/packages/site/examples/interaction/combo/demo/cRect.js b/packages/site/examples/interaction/combo/demo/cRect.js index 4ebcc1bebbe..19c480cae97 100644 --- a/packages/site/examples/interaction/combo/demo/cRect.js +++ b/packages/site/examples/interaction/combo/demo/cRect.js @@ -41,8 +41,8 @@ G6.registerCombo( const rect = group.addShape('rect', { attrs: { ...style, - x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2, - y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2, + x: -style.width / 2 - padding[3], + y: -style.height / 2 - padding[0], width: style.width, height: style.height, }, diff --git a/packages/site/examples/item/customCombo/demo/cRect.js b/packages/site/examples/item/customCombo/demo/cRect.js index bf68c5c7ea9..5f3c45dfe0a 100644 --- a/packages/site/examples/item/customCombo/demo/cRect.js +++ b/packages/site/examples/item/customCombo/demo/cRect.js @@ -41,8 +41,8 @@ G6.registerCombo( const rect = group.addShape('rect', { attrs: { ...style, - x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2, - y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2, + x: -style.width / 2 - padding[3], + y: -style.height / 2 - padding[0], width: style.width, height: style.height, },