G6 5.x How to set the canvas position not to move after unfolding

[joshua177]

使用自定义节点展开折叠时，每次点击展开或折叠按钮，画布的位置都会平移一下，如果节点很多，画布移动导致刚刚点击的节点都找不到了，如何设置展开折叠后，画布还保持之前的位置不动？

[Aarebecca]

可以提供一下复现 demo 吗

[joshua177]

import { Rect as GRect, Text as GText } from '@antv/g';
import {
Badge,
CommonEvent,
ExtensionCategory,
Graph,
GraphEvent,
iconfont,
Label,
Rect,
register,
treeToGraphData,
} from '@antv/g6';

const style = document.createElement('style');
style.innerHTML = @import url('${iconfont.css}');;
document.head.appendChild(style);

const COLORS = {
B: '#1783FF',
R: '#F46649',
Y: '#DB9D0D',
G: '#60C42D',
DI: '#A7A7A7',
};
const GREY_COLOR = '#CED4D9';

class TreeNode extends Rect {
get data() {
return this.context.model.getNodeLikeDatum(this.id);
}

get childrenData() {
return this.context.model.getChildrenData(this.id);
}

getLabelStyle(attributes) {
const [width, height] = this.getSize(attributes);
return {
x: -width / 2 + 8,
y: -height / 2 + 16,
text: this.data.name,
fontSize: 12,
opacity: 0.85,
fill: '#000',
cursor: 'pointer',
};
}

getPriceStyle(attributes) {
const [width, height] = this.getSize(attributes);
return {
x: -width / 2 + 8,
y: height / 2 - 8,
text: this.data.label,
fontSize: 16,
fill: '#000',
opacity: 0.85,
};
}

drawPriceShape(attributes, container) {
const priceStyle = this.getPriceStyle(attributes);
this.upsert('price', GText, priceStyle, container);
}

getCurrencyStyle(attributes) {
const [, height] = this.getSize(attributes);
return {
x: this.shapeMap['price'].getLocalBounds().max[0] + 4,
y: height / 2 - 8,
text: this.data.currency,
fontSize: 12,
fill: '#000',
opacity: 0.75,
};
}

drawCurrencyShape(attributes, container) {
const currencyStyle = this.getCurrencyStyle(attributes);
this.upsert('currency', GText, currencyStyle, container);
}

getPercentStyle(attributes) {
const [width, height] = this.getSize(attributes);
return {
x: width / 2 - 4,
y: height / 2 - 8,
text: ${((Number(this.data.variableValue) || 0) * 100).toFixed(2)}%,
fontSize: 12,
textAlign: 'right',
fill: COLORS[this.data.status],
};
}

drawPercentShape(attributes, container) {
const percentStyle = this.getPercentStyle(attributes);
this.upsert('percent', GText, percentStyle, container);
}

getTriangleStyle(attributes) {
const percentMinX = this.shapeMap['percent'].getLocalBounds().min[0];
const [, height] = this.getSize(attributes);
return {
fill: COLORS[this.data.status],
x: this.data.variableUp ? percentMinX - 18 : percentMinX,
y: height / 2 - 16,
fontFamily: 'iconfont',
fontSize: 16,
text: '\ue62d',
transform: this.data.variableUp ? [] : [['rotate', 180]],
};
}

drawTriangleShape(attributes, container) {
const triangleStyle = this.getTriangleStyle(attributes);
this.upsert('triangle', Label, triangleStyle, container);
}

getVariableStyle(attributes) {
const [, height] = this.getSize(attributes);
return {
fill: '#000',
fontSize: 12,
opacity: 0.45,
text: this.data.variableName,
textAlign: 'right',
x: this.shapeMap['triangle'].getLocalBounds().min[0] - 4,
y: height / 2 - 8,
};
}

drawVariableShape(attributes, container) {
const variableStyle = this.getVariableStyle(attributes);
this.upsert('variable', GText, variableStyle, container);
}

getCollapseStyle(attributes) {
if (this.childrenData.length === 0) return false;
const { collapsed } = attributes;
const [width, height] = this.getSize(attributes);
return {
backgroundFill: '#fff',
backgroundHeight: 16,
backgroundLineWidth: 1,
backgroundRadius: 0,
backgroundStroke: GREY_COLOR,
backgroundWidth: 16,
cursor: 'pointer',
fill: GREY_COLOR,
fontSize: 16,
text: collapsed ? '+' : '-',
textAlign: 'center',
textBaseline: 'middle',
x: width / 2,
y: 0,
};
}

drawCollapseShape(attributes, container) {
const collapseStyle = this.getCollapseStyle(attributes);
const btn = this.upsert('collapse', Badge, collapseStyle, container);

if (btn && !Reflect.has(btn, '__bind__')) {
  Reflect.set(btn, '__bind__', true);
  btn.addEventListener(CommonEvent.CLICK, () => {
    const { collapsed } = this.attributes;
    const graph = this.context.graph;
    if (collapsed) graph.expandElement(this.id);
    else graph.collapseElement(this.id);
  });
}

}

getProcessBarStyle(attributes) {
const { rate, status } = this.data;
const { radius } = attributes;
const color = COLORS[status];
const percent = ${Number(rate) * 100}%;
const [width, height] = this.getSize(attributes);
return {
x: -width / 2,
y: height / 2 - 4,
width: width,
height: 4,
radius: [0, 0, radius, radius],
fill: linear-gradient(to right, ${color} ${percent}, ${GREY_COLOR} ${percent}),
};
}

drawProcessBarShape(attributes, container) {
const processBarStyle = this.getProcessBarStyle(attributes);
this.upsert('process-bar', GRect, processBarStyle, container);
}

getKeyStyle(attributes) {
const keyStyle = super.getKeyStyle(attributes);
return {
...keyStyle,
fill: '#fff',
lineWidth: 1,
stroke: GREY_COLOR,
};
}

render(attributes = this.parsedAttributes, container) {
super.render(attributes, container);

this.drawPriceShape(attributes, container);
this.drawCurrencyShape(attributes, container);
this.drawPercentShape(attributes, container);
this.drawTriangleShape(attributes, container);
this.drawVariableShape(attributes, container);
this.drawProcessBarShape(attributes, container);
this.drawCollapseShape(attributes, container);

}
}

register(ExtensionCategory.NODE, 'tree-node', TreeNode);

fetch('https://assets.antv.antgroup.com/g6/decision-tree.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
animation:false,
container: 'container',
data: treeToGraphData(data, {
getNodeData: (datum, depth) => {
if (!datum.style) datum.style = {};
datum.style.collapsed = depth >= 2;
if (!datum.children) return datum;
const { children, ...restDatum } = datum;
return { ...restDatum, children: children.map((child) => child.id) };
},
}),
node: {
type: 'tree-node',
style: {
size: [202, 60],
ports: [{ placement: 'left' }, { placement: 'right' }],
radius: 4,
},
},
edge: {
type: 'cubic-horizontal',
style: {
stroke: GREY_COLOR,
},
},
layout: {
type: 'indented',
direction: 'LR',
dropCap: false,
indent: 300,
getHeight: () => 60,
},
behaviors: ['zoom-canvas', 'drag-canvas'],
});

graph.once(GraphEvent.AFTER_RENDER, () => {
  // graph.fitView();
});

graph.render();

});

[joshua177]

上面是官方给的示例： https://g6.antv.antgroup.com/examples/scene-case/default/#fund-flow
只用设置 animation:false,
展开折叠的时候就会跳来跳去

[joshua177]

graph.once(GraphEvent.AFTER_RENDER, () => {
// graph.fitView();
});
每次渲染后不想让他重新居中，只想让他保留原来的位置，如果不在视图区域可以自己拖动，比画布跳来跳去的体验要好，
我尝试使用了graph.focusElement 、 Graph.translateBy 和 Graph.translateTo 并没有得到理想的效果

[Aarebecca]

更新到 5.0.33 版本已解决