This commit is contained in:
黎智洲 2022-04-13 18:23:07 +08:00
parent 3fbc12b8b5
commit 50efbad66b
5 changed files with 172 additions and 165 deletions

View File

@ -61,7 +61,7 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
let node: SVNode = g6Item.SVModel; let node: SVNode = g6Item.SVModel;
if (g6Item === null || node.isNode() === false) { if (node.isNode() === false) {
return false; return false;
} }

View File

@ -256,20 +256,24 @@ export class Reconcile {
let { duration, timingFunction } = this.engine.animationOptions; let { duration, timingFunction } = this.engine.animationOptions;
appendModels.forEach(item => { appendModels.forEach(item => {
const G6Item = item.G6Item;
if (item instanceof SVNodeAppendage) { if (item instanceof SVNodeAppendage) {
G6Item.enableCapture(false);
// 先不显示泄漏区节点上面的地址文本 // 先不显示泄漏区节点上面的地址文本
if (item instanceof SVAddressLabel) { if (item instanceof SVAddressLabel) {
// 先将透明度改为0隐藏掉 // 先将透明度改为0隐藏掉
const AddressLabelG6Group = item.G6Item.getContainer(); const AddressLabelG6Group = G6Item.getContainer();
AddressLabelG6Group.attr({ opacity: 0 }); AddressLabelG6Group.attr({ opacity: 0 });
} else { } else {
Animations.FADE_IN(item.G6Item, { Animations.FADE_IN(G6Item, {
duration, duration,
timingFunction, timingFunction,
}); });
} }
} else { } else {
Animations.APPEND(item.G6Item, { Animations.APPEND(G6Item, {
duration, duration,
timingFunction, timingFunction,
callback: () => item.afterRender(), callback: () => item.afterRender(),

View File

@ -32,11 +32,11 @@ export class Renderer {
return event.item['SVModel'].isNode(); return event.item['SVModel'].isNode();
}, },
getContent: event => this.getTooltipContent(event.item['SVModel'], { address: 'sourceId', data: 'data' }), getContent: event => this.getTooltipContent(event.item['SVModel'], { address: 'sourceId', data: 'data' }),
itemTypes: ['node'] itemTypes: ['node'],
}); });
this.shadowG6Instance = new Graph({ this.shadowG6Instance = new Graph({
container: DOMContainer.cloneNode() as HTMLElement container: DOMContainer.cloneNode() as HTMLElement,
}); });
// 力导向的配置选项 // 力导向的配置选项
const forceOption = { const forceOption = {
@ -46,7 +46,8 @@ export class Renderer {
// alphaDecay: 0, // 迭代阈值的衰减率。范围 [0, 1]。默认值0.028 // alphaDecay: 0, // 迭代阈值的衰减率。范围 [0, 1]。默认值0.028
workEnabled: true, // 启用以防布局计算时间过长阻塞页面交互 workEnabled: true, // 启用以防布局计算时间过长阻塞页面交互
nodeStrength: -1, // 节点作用力,正数标识引力,负数表示斥力 nodeStrength: -1, // 节点作用力,正数标识引力,负数表示斥力
nodeSpacing: (d) => { // 设置了防止重叠后,节点边缘间距的最小值 nodeSpacing: d => {
// 设置了防止重叠后,节点边缘间距的最小值
return 20; return 20;
}, },
center: [DOMContainer.offsetWidth / 2, DOMContainer.offsetHeight / 3], center: [DOMContainer.offsetWidth / 2, DOMContainer.offsetHeight / 3],
@ -62,7 +63,7 @@ export class Renderer {
animate: enable, animate: enable,
animateCfg: { animateCfg: {
duration: duration, duration: duration,
easing: timingFunction easing: timingFunction,
}, },
modes: behaviorsModes, modes: behaviorsModes,
plugins: [tooltip], plugins: [tooltip],
@ -76,11 +77,11 @@ export class Renderer {
model.fx = e.x; model.fx = e.x;
model.fy = e.y; model.fy = e.y;
} }
this.g6Instance.on('node:dragstart', (e) => { this.g6Instance.on('node:dragstart', e => {
this.g6Instance.layout(); this.g6Instance.layout();
refreshDragedNodePosition(e); refreshDragedNodePosition(e);
}); });
this.g6Instance.on('node:drag', (e) => { this.g6Instance.on('node:drag', e => {
refreshDragedNodePosition(e); refreshDragedNodePosition(e);
}); });
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@ -127,6 +128,7 @@ export class Renderer {
this.shadowG6Instance.clear(); this.shadowG6Instance.clear();
this.shadowG6Instance.read(g6Data); this.shadowG6Instance.read(g6Data);
renderModelList.forEach(item => { renderModelList.forEach(item => {
item.G6Item = null;
item.shadowG6Item = this.shadowG6Instance.findById(item.id); item.shadowG6Item = this.shadowG6Instance.findById(item.id);
item.shadowG6Instance = this.shadowG6Instance; item.shadowG6Instance = this.shadowG6Instance;
}); });

View File

@ -47,6 +47,7 @@ export class ViewContainer {
this.hasLeak = false; // 判断是否已经发生过泄漏 this.hasLeak = false; // 判断是否已经发生过泄漏
this.brushSelectedModels = []; this.brushSelectedModels = [];
this.clickSelectNode = null; this.clickSelectNode = null;
this.lastLeakAreaTranslateY = 0;
const g6Instance = this.renderer.getG6Instance(), const g6Instance = this.renderer.getG6Instance(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight, leakAreaHeight = this.engine.viewOptions.leakAreaHeight,