diff --git a/CHANGELOG.md b/CHANGELOG.md index f4b13a8c25c..17c28b4cba8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # ChangeLog +#### 4.6.15 + +- fix: fitView does not zoom the graph with animate true; + +#### 4.6.14 + +- perf: optimize the performance of combo graph; + #### 4.6.12 - perf: optimize the performance of combo graph first rendering; diff --git a/packages/core/package.json b/packages/core/package.json index 6f1504e8dc0..f0e646592e7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-core", - "version": "0.6.12", + "version": "0.6.15", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index 3c7839fcd4c..623665896dc 100644 --- a/packages/core/src/global.ts +++ b/packages/core/src/global.ts @@ -64,7 +64,7 @@ const colorSet = { }; export default { - version: '0.6.12', + version: '0.6.15', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/core/src/graph/controller/view.ts b/packages/core/src/graph/controller/view.ts index 7cb4900b265..9ca166231fe 100644 --- a/packages/core/src/graph/controller/view.ts +++ b/packages/core/src/graph/controller/view.ts @@ -62,14 +62,28 @@ export default class ViewController { y: bbox.y + bbox.height / 2, }; - graph.translate(viewCenter.x - groupCenter.x, viewCenter.y - groupCenter.y, animate, animateCfg); + let animateConfig = animateCfg; + if (animate) { + animateConfig = { + ...(animateCfg || { + duration: 500, + easing: 'easeCubic' + }), + callback: () => { + graph.zoom(ratio, viewCenter, true, animateCfg); + animateCfg?.callback?.(); + } + } + } + const w = (width - padding[1] - padding[3]) / bbox.width; const h = (height - padding[0] - padding[2]) / bbox.height; let ratio = w; if (w > h) { ratio = h; } - if (!graph.zoom(ratio, viewCenter)) { + graph.translate(viewCenter.x - groupCenter.x, viewCenter.y - groupCenter.y, animate, animateConfig); + if (!animate && !graph.zoom(ratio, viewCenter)) { console.warn('zoom failed, ratio out of range, ratio: %f', ratio); } } diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts index 44a929741fb..4b6cade1faa 100644 --- a/packages/core/src/graph/graph.ts +++ b/packages/core/src/graph/graph.ts @@ -1,7 +1,7 @@ import EventEmitter from '@antv/event-emitter'; import { ICanvas, IGroup, Point } from '@antv/g-base'; import { ext } from '@antv/matrix-util'; -import { clone, deepMix, each, isPlainObject, isString } from '@antv/util'; +import { clone, deepMix, each, isPlainObject, isString, debounce } from '@antv/util'; import { getDegree, getAdjMatrix as getAdjacentMatrix, @@ -1277,9 +1277,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs } } - const combos = this.get('combos'); - if (combos && combos.length > 0) { - this.sortCombos(); + if (sortCombo) { + const combos = this.get('combos'); + if (combos && combos.length > 0) { + this.sortCombos(); + } } this.autoPaint(); @@ -2832,38 +2834,42 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs * 根据 comboTree 结构整理 Combo 相关的图形绘制层级，包括 Combo 本身、节点、边 * @param {GraphData} data 数据 */ - protected sortCombos() { - const comboSorted = this.get('comboSorted'); - if (comboSorted) return; - this.set('comboSorted', true); - const depthMap = []; - const dataDepthMap = {}; - const comboTrees = this.get('comboTrees'); - (comboTrees || []).forEach(cTree => { - traverseTree(cTree, child => { - if (depthMap[child.depth]) depthMap[child.depth].push(child.id); - else depthMap[child.depth] = [child.id]; - dataDepthMap[child.id] = child.depth; - return true; + protected sortCombos = debounce( + () => { + const comboSorted = this.get('comboSorted'); + if (!this || this.destroyed || comboSorted) return; + this.set('comboSorted', true); + const depthMap = []; + const dataDepthMap = {}; + const comboTrees = this.get('comboTrees'); + (comboTrees || []).forEach(cTree => { + traverseTree(cTree, child => { + if (depthMap[child.depth]) depthMap[child.depth].push(child.id); + else depthMap[child.depth] = [child.id]; + dataDepthMap[child.id] = child.depth; + return true; + }); }); - }); - const edges = this.getEdges().concat(this.get('vedges')); - (edges || []).forEach(edgeItem => { - const edge = edgeItem.getModel(); - const sourceDepth: number = dataDepthMap[edge.source as string] || 0; - const targetDepth: number = dataDepthMap[edge.target as string] || 0; - const depth = Math.max(sourceDepth, targetDepth); - if (depthMap[depth]) depthMap[depth].push(edge.id); - else depthMap[depth] = [edge.id]; - }); - depthMap.forEach(array => { - if (!array || !array.length) return; - for (let i = array.length - 1; i >= 0; i--) { - const item = this.findById(array[i]); - if (item) item.toFront(); - } - }); - } + const edges = this.getEdges().concat(this.get('vedges')); + (edges || []).forEach(edgeItem => { + const edge = edgeItem.getModel(); + const sourceDepth: number = dataDepthMap[edge.source as string] || 0; + const targetDepth: number = dataDepthMap[edge.target as string] || 0; + const depth = Math.max(sourceDepth, targetDepth); + if (depthMap[depth]) depthMap[depth].push(edge.id); + else depthMap[depth] = [edge.id]; + }); + depthMap.forEach(array => { + if (!array || !array.length) return; + for (let i = array.length - 1; i >= 0; i--) { + const item = this.findById(array[i]); + if (item) item.toFront(); + } + }); + }, + 500, + false + ) /** * 获取节点所有的邻居节点 diff --git a/packages/element/package.json b/packages/element/package.json index 109cc039be2..3f1a25f1446 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-element", - "version": "0.6.12", + "version": "0.6.15", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -61,7 +61,7 @@ }, "dependencies": { "@antv/g-base": "^0.5.1", - "@antv/g6-core": "0.6.12", + "@antv/g6-core": "0.6.15", "@antv/util": "~2.0.5" }, "devDependencies": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 9669cdfc08e..db80535503c 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "4.6.12", + "version": "4.6.15", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -66,7 +66,7 @@ ] }, "dependencies": { - "@antv/g6-pc": "0.6.12" + "@antv/g6-pc": "0.6.15" }, "devDependencies": { "@babel/core": "^7.7.7", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index f8e1dff8465..3d3a63726bc 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.6.12'; +G6.version = '4.6.15'; export * from '@antv/g6-pc'; export default G6; -export const version = '4.6.12'; +export const version = '4.6.15'; diff --git a/packages/pc/package.json b/packages/pc/package.json index dd44de2a6c9..460c23104ed 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-pc", - "version": "0.6.12", + "version": "0.6.15", "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.6.12", - "@antv/g6-element": "0.6.12", - "@antv/g6-plugin": "0.6.12", + "@antv/g6-core": "0.6.15", + "@antv/g6-element": "0.6.15", + "@antv/g6-plugin": "0.6.15", "@antv/hierarchy": "^0.6.7", "@antv/layout": "^0.2.5", "@antv/matrix-util": "^3.1.0-beta.3", diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts index 9a6d336fa48..b7175634fb7 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.6.12', + version: '0.6.15', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 7d8ba123ef3..1b2b9d6a170 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-plugin", - "version": "0.6.12", + "version": "0.6.15", "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.6.12", - "@antv/g6-element": "0.6.12", + "@antv/g6-core": "0.6.15", + "@antv/g6-element": "0.6.15", "@antv/matrix-util": "^3.1.0-beta.3", "@antv/scale": "^0.3.4", "@antv/util": "^2.0.9", diff --git a/packages/react-node/package.json b/packages/react-node/package.json index 6cebf8c4cd9..8ca5fed8d53 100644 --- a/packages/react-node/package.json +++ b/packages/react-node/package.json @@ -1,7 +1,7 @@ { "name": "@antv/g6-react-node", "description": "Using React Component to Define Your G6 Graph Node", - "version": "1.3.0", + "version": "1.4.5", "scripts": { "start": "dumi dev", "build": "father-build", @@ -13,6 +13,7 @@ "test": "umi-test", "test:coverage": "umi-test --coverage" }, + "license": "MIT", "main": "dist/index.js", "module": "dist/index.esm.js", "typings": "dist/index.d.ts", diff --git a/packages/react-node/src/Example/card.md b/packages/react-node/src/Example/card.md index 883393ce2d7..dce671ee1b5 100644 --- a/packages/react-node/src/Example/card.md +++ b/packages/react-node/src/Example/card.md @@ -69,10 +69,9 @@ const Card = () => { }} /> - - - - + { + ["我是", "很多个", "很多个的", "标签"].map(e => ) + } { const childrenArr = [[root]]; - const parentArr = []; + const parentArr: ContainerNode[] = []; let resultNode: ContainerNode | null = null; while (childrenArr[0]) { diff --git a/packages/react-node/src/Loading/index.tsx b/packages/react-node/src/Loading/index.tsx index 2f023eb82ce..262af67dad5 100644 --- a/packages/react-node/src/Loading/index.tsx +++ b/packages/react-node/src/Loading/index.tsx @@ -12,7 +12,10 @@ export default function Loading() { }} >
- +

L o a d i n g . . .

diff --git a/packages/react-node/src/ReactNode/Group.tsx b/packages/react-node/src/ReactNode/Group.tsx index ba2ccbf214c..6f29dc3992e 100644 --- a/packages/react-node/src/ReactNode/Group.tsx +++ b/packages/react-node/src/ReactNode/Group.tsx @@ -43,6 +43,7 @@ interface GroupProps { export type CommonProps = GroupProps & EventAttrs; const Group: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return (
= (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Ellipse.tsx b/packages/react-node/src/ReactNode/Shape/Ellipse.tsx index b9c1eacc85a..71b0909062e 100644 --- a/packages/react-node/src/ReactNode/Shape/Ellipse.tsx +++ b/packages/react-node/src/ReactNode/Shape/Ellipse.tsx @@ -23,6 +23,7 @@ interface EllipseProps extends CommonProps { } const Ellipse: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Image.tsx b/packages/react-node/src/ReactNode/Shape/Image.tsx index 1ce6ba98413..b1feece4cf6 100644 --- a/packages/react-node/src/ReactNode/Shape/Image.tsx +++ b/packages/react-node/src/ReactNode/Shape/Image.tsx @@ -28,6 +28,7 @@ interface ImageProps extends CommonProps { } const Image: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Marker.tsx b/packages/react-node/src/ReactNode/Shape/Marker.tsx index 06dbca70e29..2f3447c4a4b 100644 --- a/packages/react-node/src/ReactNode/Shape/Marker.tsx +++ b/packages/react-node/src/ReactNode/Shape/Marker.tsx @@ -13,12 +13,12 @@ export interface MarkerStyle extends CommonShapeProps { * @description.zh-CN 内建标记 或者 生成标记路径的函数 */ symbol: - | 'circle' - | 'square' - | 'diamond' - | 'triangle' - | 'triangle-down' - | ((x: number, y: number, r: number) => GPath[]); + | 'circle' + | 'square' + | 'diamond' + | 'triangle' + | 'triangle-down' + | ((x: number, y: number, r: number) => GPath[]); } interface MarkerProps extends CommonProps { @@ -29,6 +29,7 @@ interface MarkerProps extends CommonProps { } const Marker: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Path.tsx b/packages/react-node/src/ReactNode/Shape/Path.tsx index 3c720fa7b08..af98ba0e02b 100644 --- a/packages/react-node/src/ReactNode/Shape/Path.tsx +++ b/packages/react-node/src/ReactNode/Shape/Path.tsx @@ -50,6 +50,7 @@ interface PathProps extends CommonProps { } const Path: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Polygon.tsx b/packages/react-node/src/ReactNode/Shape/Polygon.tsx index 0f63be020a1..e7527993f5e 100644 --- a/packages/react-node/src/ReactNode/Shape/Polygon.tsx +++ b/packages/react-node/src/ReactNode/Shape/Polygon.tsx @@ -18,6 +18,7 @@ interface PolygonProps extends CommonProps { } const Polygon: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Rect.tsx b/packages/react-node/src/ReactNode/Shape/Rect.tsx index 9bdc99e3cff..6c1527e36d2 100644 --- a/packages/react-node/src/ReactNode/Shape/Rect.tsx +++ b/packages/react-node/src/ReactNode/Shape/Rect.tsx @@ -28,6 +28,7 @@ interface RectProps extends CommonProps { } const Rect: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/Shape/Text.tsx b/packages/react-node/src/ReactNode/Shape/Text.tsx index 3ca5260733a..1efffac27ca 100644 --- a/packages/react-node/src/ReactNode/Shape/Text.tsx +++ b/packages/react-node/src/ReactNode/Shape/Text.tsx @@ -52,6 +52,7 @@ interface TextProps extends CommonProps { } const Text: React.FC = (props) => { + // @ts-ignore const { children, ...rest } = props; return ( diff --git a/packages/react-node/src/ReactNode/demo.tsx b/packages/react-node/src/ReactNode/demo.tsx index e4db7a3bee5..521ef12d0f7 100644 --- a/packages/react-node/src/ReactNode/demo.tsx +++ b/packages/react-node/src/ReactNode/demo.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import G6 from '@antv/g6'; +import G6, { GraphData } from '@antv/g6'; import { appenAutoShapeListener } from '../Register/event'; export const G6MiniDemo = ({ @@ -23,11 +23,26 @@ export const G6MiniDemo = ({ meta: { creatorName: 'a_creator', }, - id: 'node' + i + Math.random().toString(16).slice(-4), + id: + 'node' + + i + + Math.random() + .toString(16) + .slice(-4), type: nodeType, })), edges: [], - }; + } as GraphData; + + if (data && data.nodes && data.nodes.length > 1) { + data.edges!.push({ + source: data.nodes[0].id, + target: data.nodes[1].id, + style: { + endArrow: true, + }, + }); + } const width = document.getElementById('container')?.clientWidth || 800; @@ -41,6 +56,7 @@ export const G6MiniDemo = ({ }, layout: { type: 'dagre', + rankdir: 'LR', }, }); graph.data(data); diff --git a/packages/react-node/src/Register/event.ts b/packages/react-node/src/Register/event.ts index 6fb31690132..cfcfc7aa4cc 100644 --- a/packages/react-node/src/Register/event.ts +++ b/packages/react-node/src/Register/event.ts @@ -1,5 +1,5 @@ import { IShape } from '@antv/g-base'; -import { IAbstractGraph, IG6GraphEvent, Item } from '@antv/g6-pc'; +import { IAbstractGraph, IG6GraphEvent, Item } from '@antv/g6-core'; export type ShapeEventListner = ( event: IG6GraphEvent, diff --git a/packages/react-node/src/Register/getDataFromReactNode.ts b/packages/react-node/src/Register/getDataFromReactNode.ts index 8e6d0666d97..85a3254aa39 100644 --- a/packages/react-node/src/Register/getDataFromReactNode.ts +++ b/packages/react-node/src/Register/getDataFromReactNode.ts @@ -15,7 +15,7 @@ const getShapeFromReact = (REl: ReactElement): RawNode => { if (typeof REl.type === 'string') { const data = REl.props['data-attr'] || {}; const { style: attrs = {}, type, ...props } = data; - const { children: ochildren } = REl.props; + let { children: ochildren } = REl.props; if (type === 'text') { attrs.text = ochildren.join ? ochildren.join('') : ochildren; return { @@ -29,6 +29,7 @@ const getShapeFromReact = (REl: ReactElement): RawNode => { if (typeof ochildren === 'object' && ochildren?.length) { children = ochildren .filter((e: any) => !!e) + .reduce((a: any, b: any) => a.concat(b.concat ? b : [b]), []) .map((e: ReactElement) => getShapeFromReact(e)); } else if (ochildren) { children = [getShapeFromReact(ochildren)]; diff --git a/packages/react-node/src/Register/register.tsx b/packages/react-node/src/Register/register.tsx index 413bfe9dd0b..9c5c9856dc6 100644 --- a/packages/react-node/src/Register/register.tsx +++ b/packages/react-node/src/Register/register.tsx @@ -1,6 +1,12 @@ import React, { ReactElement } from 'react'; -import { Item, ModelConfig, ShapeOptions } from '@antv/g6-core/lib'; -import { IGroup } from '@antv/g-base'; +import { + INode, + IEdge, + ICombo, + ModelConfig, + ShapeOptions, +} from '@antv/g6-core/lib'; +import { IGroup, IShape } from '@antv/g-base'; import getShapeFromReact from '@/Register/getDataFromReactNode'; import getPositionUsingYoga, { LayoutedNode, @@ -27,20 +33,22 @@ const renderTarget = (target: LayoutedNode, group: any) => { }, ...props, }); - keyshape = shape; + if (props.keyShape) { + keyshape = shape; + } animateShapeWithConfig(shape, props.animation); } else { g = group.addGroup(props); - keyshape = g; + if (!keyshape) { + keyshape = g; + } } if (target.children) { const keyshapes = target.children - .map((n) => renderTarget(n, g)) - .filter((e) => e); - if (keyshapes.length) { - keyshape = keyshapes.pop(); - } + .map(n => renderTarget(n, g)) + .filter(e => e); + keyshape = keyshapes.find(shape => !shape.isGroup()) || keyshape; } return keyshape; }; @@ -92,23 +100,26 @@ const diffTarget = (container: IGroup, shapeArr: LayoutedNode[]) => { } }; -export function createNodeFromReact(Component: React.FC<{ cfg: ModelConfig }>) { +export function createNodeFromReact( + Component: React.FC<{ cfg: ModelConfig }>, +): { [key: string]: any } { const compileXML = (cfg: ModelConfig) => registerNodeReact(); return { - draw(cfg: ModelConfig, fatherGroup: any) { + draw(cfg: ModelConfig | undefined, fatherGroup: IGroup | undefined) { const resultTarget = compileXML(cfg || {}); - let keyshape = fatherGroup; - keyshape = renderTarget(resultTarget, fatherGroup); + const keyshape: IShape = renderTarget(resultTarget, fatherGroup); return keyshape; }, - update(cfg: ModelConfig, node: Item) { + update(cfg: ModelConfig, node: INode | IEdge | ICombo | undefined) { const resultTarget = compileXML(cfg || {}); - const nodeGroup = node.getContainer(); - const realTarget = getRealStructure(resultTarget); + if (node) { + const nodeGroup = node.getContainer(); + const realTarget = getRealStructure(resultTarget); - diffTarget(nodeGroup, realTarget); + diffTarget(nodeGroup, realTarget); + } }, getAnchorPoints() { return [ @@ -118,5 +129,5 @@ export function createNodeFromReact(Component: React.FC<{ cfg: ModelConfig }>) { [0.5, 0], ]; }, - } as ShapeOptions; + }; } diff --git a/packages/site/docs/api/Items/nodeProperties.en.md b/packages/site/docs/api/Items/nodeProperties.en.md index e1701491ec8..ceff1adcbfd 100644 --- a/packages/site/docs/api/Items/nodeProperties.en.md +++ b/packages/site/docs/api/Items/nodeProperties.en.md @@ -47,7 +47,7 @@ The interactions of the node and related edges. It can be null. [0, 0] represent _Object_ **optional** -The node style. `style` is an object to configure the filling color, stroke color, shadow, and so on. Please refer to: [Shape Properties](/en/docs/api/shapeProperties.zh.md)。 +The node style. `style` is an object to configure the filling color, stroke color, shadow, and so on. Please refer to: [Shape Properties](/en/docs/api/shapeProperties)。 ### label diff --git a/packages/site/docs/api/Items/nodeProperties.zh.md b/packages/site/docs/api/Items/nodeProperties.zh.md index 8b224e39306..aa7f8be2d12 100644 --- a/packages/site/docs/api/Items/nodeProperties.zh.md +++ b/packages/site/docs/api/Items/nodeProperties.zh.md @@ -47,7 +47,7 @@ y 坐标。 _Object_ **optional** -通过 `style` 配置来修改节点关键图形的填充色、边框颜色、阴影等属性，具体配置属性见：[图形样式属性](/zh/docs/api/shapeProperties.zh.md)。 +通过 `style` 配置来修改节点关键图形的填充色、边框颜色、阴影等属性，具体配置属性见：[图形样式属性](/zh/docs/api/shapeProperties)。 ### label diff --git a/packages/site/docs/api/graphFunc/transform.en.md b/packages/site/docs/api/graphFunc/transform.en.md index 3a1359a927b..ef966c41483 100644 --- a/packages/site/docs/api/graphFunc/transform.en.md +++ b/packages/site/docs/api/graphFunc/transform.en.md @@ -141,7 +141,7 @@ graph.moveTo(200, 300, true, { }); ``` -### graph.fitView(padding) +### graph.fitView(padding, rules, animate, animateCfg) Fit the graph to the view port. @@ -151,6 +151,8 @@ Fit the graph to the view port. | --- | --- | --- | --- | --- | --- | --- | | padding | Number / Array | false | The padding of [top, right, bottom, left]. | | rules | { onlyOutOfViewPort?: boolean; direction?: 'x' / 'y' / 'both'; ratioRule?: 'max' / 'min} | false | rules of fitView | +| animate | boolean | false | _Supported by v4.6.15._ Whether move the graph with animation. If it is not assigned, animates following the graph's `animate`. | +| animateCfg | Object | false | _Supported by v4.6.15._ The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). If it is not assigned, animates following the graph's `animateCfg`. | **Usage** @@ -178,6 +180,13 @@ graph.fitView(0, { onlyOutOfViewPort: true, direction: 'y' }); _Supported by v3.5.1._ Translate the graph to align its center with the canvas. +**Parameters** + +| Name | Type | Required | Description | +| --- | --- | --- | --- | --- | --- | --- | +| animate | boolean | false | _Supported by v4.6.15._ Whether move the graph with animation. If it is not assigned, animates following the graph's `animate`. | +| animateCfg | Object | false | _Supported by v4.6.15._ The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). If it is not assigned, animates following the graph's `animateCfg`. | + **Usage** ```javascript diff --git a/packages/site/docs/api/graphFunc/transform.zh.md b/packages/site/docs/api/graphFunc/transform.zh.md index 3635c7c7565..b96c3b8eb97 100644 --- a/packages/site/docs/api/graphFunc/transform.zh.md +++ b/packages/site/docs/api/graphFunc/transform.zh.md @@ -142,7 +142,7 @@ graph.moveTo(200, 300, true, { }); ``` -### graph.fitView(padding) +### graph.fitView(padding, rules, animate, animateCfg) 让画布内容适应视口。 @@ -152,6 +152,8 @@ graph.moveTo(200, 300, true, { | --- | --- | --- | --- | --- | --- | --- | | padding | Number / Array | false | [top, right, bottom, left] 四个方向上的间距值 | | rules | { onlyOutOfViewPort?: boolean; direction?: 'x' / 'y' / 'both'; ratioRule?: 'max' / 'min} | false | fitView 的规则 | +| animate | boolean | false | *v4.6.15 后支持。*是否带有动画。若未配置，则跟随 graph 的 `animate` 参数 | +| animateCfg | Object | false | *v4.6.15 后支持。*若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 | **用法** @@ -175,10 +177,17 @@ graph.fitView(0, {}); graph.fitView(0, { onlyOutOfViewPort: true, direction: 'y' }); ``` -### graph.fitCenter() +### graph.fitCenter(animate, animateCfg) *v3.5.1 后支持。*平移图到中心将对齐到画布中心，但不缩放。优先级低于 fitView。 +**参数** + +| 名称 | 类型 | 是否必选 | 描述 | +| --- | --- | --- | --- | --- | --- | --- | +| animate | boolean | false | *v4.6.15 后支持。*是否带有动画。若未配置，则跟随 graph 的 `animate` 参数 | +| animateCfg | Object | false | *v4.6.15 后支持。*若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 | + **用法** ```javascript diff --git a/packages/site/docs/api/graphLayout/dagre.en.md b/packages/site/docs/api/graphLayout/dagre.en.md index 69d16f1ddb6..aac4f488f89 100644 --- a/packages/site/docs/api/graphLayout/dagre.en.md +++ b/packages/site/docs/api/graphLayout/dagre.en.md @@ -103,7 +103,7 @@ _Supported by G6 v4.5.1_ _Supported by G6 v4.5.0_ -**Type**: string[]
**Default** undefined
**Required**: false
**Description**: The refered order array for the nodes in the same layer. If it is not specified, the order of the nodes will be decided by the dagre algorithm. +**Type**: string[]
**Default** undefined
**Required**: false
**Description**: The refered order array for the nodes in the same layer, stores the id values of each node. If it is not specified, the order of the nodes will be decided by the dagre algorithm. ## layoutCfg.preset diff --git a/packages/site/docs/api/graphLayout/dagre.zh.md b/packages/site/docs/api/graphLayout/dagre.zh.md index 334a37da1d9..392e3c89b29 100644 --- a/packages/site/docs/api/graphLayout/dagre.zh.md +++ b/packages/site/docs/api/graphLayout/dagre.zh.md @@ -101,7 +101,7 @@ _自 G6 v4.5.1 起支持。_ _自 G6 v4.5.0 起支持。_ -**类型**: string[]
**默认值**: undefined
**是否必须**: false
**说明**: 同层节点顺序的参考数组。若未指定，则将按照 dagre 本身机制排列同层节点顺序。 +**类型**: string[]
**默认值**: undefined
**是否必须**: false
**说明**: 同层节点顺序的参考数组，存放节点 id 值。若未指定，则将按照 dagre 本身机制排列同层节点顺序。 ## layoutCfg.preset diff --git a/packages/site/examples/scatter/changePosition/index.en.md b/packages/site/examples/scatter/changePosition/index.en.md index e39ecd1fffb..062d6bcee1a 100644 --- a/packages/site/examples/scatter/changePosition/index.en.md +++ b/packages/site/examples/scatter/changePosition/index.en.md @@ -1,6 +1,6 @@ --- title: Node Move Animation -order: 4 +order: 5 --- Change the node positions by `changeData` method is a simple way to realize the node animation. diff --git a/packages/site/examples/scatter/changePosition/index.zh.md b/packages/site/examples/scatter/changePosition/index.zh.md index 4328e6a2d05..6457dcbc4f3 100644 --- a/packages/site/examples/scatter/changePosition/index.zh.md +++ b/packages/site/examples/scatter/changePosition/index.zh.md @@ -1,6 +1,6 @@ --- title: 节点移动动画 -order: 4 +order: 5 --- 通过 `changeData` 方法不断地改变节点位置，以达到动画的效果。 diff --git a/packages/site/examples/scatter/customAnimate/index.en.md b/packages/site/examples/scatter/customAnimate/index.en.md index 2d808bf4afb..575deb7286b 100644 --- a/packages/site/examples/scatter/customAnimate/index.en.md +++ b/packages/site/examples/scatter/customAnimate/index.en.md @@ -1,6 +1,6 @@ --- title: Custom Animation -order: 5 +order: 6 --- Configuration `animateCfg` of `Graph` is designed for global animation. diff --git a/packages/site/examples/scatter/customAnimate/index.zh.md b/packages/site/examples/scatter/customAnimate/index.zh.md index a60b9d694de..b59c634c2ec 100644 --- a/packages/site/examples/scatter/customAnimate/index.zh.md +++ b/packages/site/examples/scatter/customAnimate/index.zh.md @@ -1,6 +1,6 @@ --- title: 自定义动画 -order: 5 +order: 6 --- 在实例化 `Graph` 时，可以通过 `animateCfg` 配置项设置全局动画。 diff --git a/packages/site/examples/scatter/edge/demo/arrowAnimate.js b/packages/site/examples/scatter/edge/demo/arrowAnimate.js index 17e255ee472..4ccabeb4224 100644 --- a/packages/site/examples/scatter/edge/demo/arrowAnimate.js +++ b/packages/site/examples/scatter/edge/demo/arrowAnimate.js @@ -1,10 +1,7 @@ import G6 from "@antv/g6"; import { ext } from "@antv/matrix-util"; -// import {getLabelPosition} from '@antv/g6/util' -const { getLabelPosition } = G6.Util; -console.log("getLabelPosition", getLabelPosition); -const transform = ext.transform; +const { getLabelPosition, transform } = G6.Util; G6.registerEdge( "arrow-running", diff --git a/packages/site/examples/scatter/edge/index.en.md b/packages/site/examples/scatter/edge/index.en.md index 9383db77984..e1437f773d8 100644 --- a/packages/site/examples/scatter/edge/index.en.md +++ b/packages/site/examples/scatter/edge/index.en.md @@ -1,6 +1,6 @@ --- title: Edge Animation -order: 1 +order: 2 --- Edge animation can be realized by customing an edge. diff --git a/packages/site/examples/scatter/edge/index.zh.md b/packages/site/examples/scatter/edge/index.zh.md index a78c771e933..8c2ea846471 100644 --- a/packages/site/examples/scatter/edge/index.zh.md +++ b/packages/site/examples/scatter/edge/index.zh.md @@ -1,6 +1,6 @@ --- title: 边动画 -order: 1 +order: 2 --- 通过自定义边，可以实现边的动画效果。 diff --git a/packages/site/examples/scatter/node/index.en.md b/packages/site/examples/scatter/node/index.en.md index e1655bbec15..40cd8f3d116 100644 --- a/packages/site/examples/scatter/node/index.en.md +++ b/packages/site/examples/scatter/node/index.en.md @@ -1,6 +1,6 @@ --- title: Node Animation -order: 0 +order: 1 --- Node animation can be realized by customing a node. diff --git a/packages/site/examples/scatter/node/index.zh.md b/packages/site/examples/scatter/node/index.zh.md index 92ea594e2fb..cdabdde3d39 100644 --- a/packages/site/examples/scatter/node/index.zh.md +++ b/packages/site/examples/scatter/node/index.zh.md @@ -1,6 +1,6 @@ --- title: 节点动画 -order: 0 +order: 1 --- 通过自定义节点，可以实现节点的动画效果。 diff --git a/packages/site/examples/scatter/stateChange/index.en.md b/packages/site/examples/scatter/stateChange/index.en.md index be9dfd889d3..6d4a0039c7f 100644 --- a/packages/site/examples/scatter/stateChange/index.en.md +++ b/packages/site/examples/scatter/stateChange/index.en.md @@ -1,6 +1,6 @@ --- title: State Switch -order: 2 +order: 3 --- State of G6 includes interaction states and bussiness states. diff --git a/packages/site/examples/scatter/stateChange/index.zh.md b/packages/site/examples/scatter/stateChange/index.zh.md index 9b0b28c3282..c6cbe1740c8 100644 --- a/packages/site/examples/scatter/stateChange/index.zh.md +++ b/packages/site/examples/scatter/stateChange/index.zh.md @@ -1,6 +1,6 @@ --- title: 状态切换 -order: 2 +order: 3 --- G6 中的 state，指的是状态，包括交互状态和业务状态两种。 diff --git a/packages/site/examples/scatter/viewport/API.en.md b/packages/site/examples/scatter/viewport/API.en.md new file mode 100644 index 00000000000..51e686f842e --- /dev/null +++ b/packages/site/examples/scatter/viewport/API.en.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/api/graphFunc/transform.en.md` diff --git a/packages/site/examples/scatter/viewport/API.zh.md b/packages/site/examples/scatter/viewport/API.zh.md new file mode 100644 index 00000000000..d67b3ce5171 --- /dev/null +++ b/packages/site/examples/scatter/viewport/API.zh.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/api/graphFunc/transform.zh.md` diff --git a/packages/site/examples/scatter/viewport/demo/default.js b/packages/site/examples/scatter/viewport/demo/default.js new file mode 100644 index 00000000000..96740658bfe --- /dev/null +++ b/packages/site/examples/scatter/viewport/demo/default.js @@ -0,0 +1,115 @@ +import G6 from '@antv/g6'; + +const tipDiv = document.createElement('div'); +tipDiv.innerHTML = `Click node or edge to focus on it with animate. 点击节点或边可带动画地聚焦到该元素上`; +document.getElementById('container').appendChild(tipDiv); +const tipDiv2 = document.createElement('div'); +tipDiv2.innerHTML = `Click the button on toolbar to see viewport change animately. 点击 Toolbar 上的按钮可带动画地操作视图`; +document.getElementById('container').appendChild(tipDiv2); + +const data = { + nodes: [ + { + id: 'a', + x: 200, + y: 100, + style: { fill: '#5B8FF9', stroke: null }, + }, + { + id: 'b', + x: 100, + y: 200, + style: { fill: '#5AD8A6', stroke: null }, + }, + { + id: 'c', + x: 300, + y: 200, + style: { fill: '#5D7092', stroke: null }, + }, + ], + edges: [ + { + id: 'a2b', + source: 'a', + target: 'b', + }, + { + id: 'a2c', + source: 'a', + target: 'c', + }, + ], +}; + +const animateCfg = { duration: 200, easing: 'easeCubic' } + +const toolbar = new G6.ToolBar({ + position: { x: 10, y: 70 }, + getContent: () => ` +
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
`, + handleClick: (code, graph) => { + switch (code) { + case 'zoomOut': + graph.zoom(1.2, undefined, true, animateCfg); + break; + case 'zoomIn': + graph.zoom(0.8, undefined, true, animateCfg); + break; + case 'realZoom': + graph.zoomTo(1, undefined, true, animateCfg); + break; + case 'autoZoom': + graph.fitView(20, undefined, true, animateCfg); + break; + } + } +}) + +const container = document.getElementById('container'); +const width = container.scrollWidth; +const height = (container.scrollHeight || 500) - 50; +const graph = new G6.Graph({ + container: 'container', + width, + height, + plugins: [toolbar], +}); + +graph.data(data); +graph.render(); + +graph.on('node:click', e => { + graph.focusItem(e.item, true, animateCfg) +}) +graph.on('edge:click', e => { + graph.focusItem(e.item, true, animateCfg) +}) + +if (typeof window !== 'undefined') + window.onresize = () => { + if (!graph || graph.get('destroyed')) return; + if (!container || !container.scrollWidth || !container.scrollHeight) return; + graph.changeSize(container.scrollWidth, container.scrollHeight); + }; diff --git a/packages/site/examples/scatter/viewport/demo/meta.json b/packages/site/examples/scatter/viewport/demo/meta.json new file mode 100644 index 00000000000..52c4a01efa9 --- /dev/null +++ b/packages/site/examples/scatter/viewport/demo/meta.json @@ -0,0 +1,16 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "default.js", + "title": { + "zh": "视口变换动画", + "en": "Viewport Animation" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HRIpRobLTr0AAAAAAAAAAAAAARQnAQ" + } + ] +} \ No newline at end of file diff --git a/packages/site/examples/scatter/viewport/index.en.md b/packages/site/examples/scatter/viewport/index.en.md new file mode 100644 index 00000000000..747bab2f521 --- /dev/null +++ b/packages/site/examples/scatter/viewport/index.en.md @@ -0,0 +1,10 @@ +--- +title: Viewport Animation +order: 0 +--- + +Configure animtions for viewport move, zoom, fitView, fitCenter, etc. + +### Usage + +Viewport update with animations could be achieved easily by configuring `animate` and `animateCfg` to the corresponding APIs, e.g. `graph.translate`, `graph.moveTo`, `graph.zoom`, `graph.zoomTo`, `graph.fitView`, `graph.fitCenter`, `graph.focusItem`. Please refer to the document [Graph Viewport API](/en/docs/api/graphFunc/transform). diff --git a/packages/site/examples/scatter/viewport/index.zh.md b/packages/site/examples/scatter/viewport/index.zh.md new file mode 100644 index 00000000000..93768700c0d --- /dev/null +++ b/packages/site/examples/scatter/viewport/index.zh.md @@ -0,0 +1,10 @@ +--- +title: 视口变换动画 +order: 0 +--- + +为视口/全图的平移、缩放、自适应等配置动画。 + +### 使用指南 + +通过在调用各个视口操作 API 时配置 `animate` 和 `animateCfg` 参数，可以非常快捷地为这些变换配置动画。这些 API 包括 `graph.translate`, `graph.moveTo`, `graph.zoom`, `graph.zoomTo`, `graph.fitView`, `graph.fitCenter`, `graph.focusItem` 等。详见 [图视口 API](/zh/docs/api/graphFunc/transform)。 \ No newline at end of file diff --git a/packages/site/package.json b/packages/site/package.json index e597a045763..a2847dace89 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@antv/g6-site", - "version": "4.6.11", + "version": "4.6.15", "description": "G6 sites deployed on gh-pages", "keywords": [ "antv", @@ -36,7 +36,7 @@ "dependencies": { "@ant-design/icons": "^4.0.6", "@antv/chart-node-g6": "^0.0.3", - "@antv/g6": "4.6.11", + "@antv/g6": "4.6.15", "@antv/gatsby-theme-antv": "1.1.15", "@antv/util": "^2.0.9", "@antv/vis-predict-engine": "^0.1.1",