There is an afterimage with the dot drag, and the darge ranker: 'tight-tree' layout #6285

Describe the bug / 问题描述

1.点拖动有残影 2.请教一下如何实现以下效果 步骤：1.默认的布局如下 2. 双击这个红色的点，我想要的（设置了固定的点不变，剩下没设置的点按照新的layout布局） 3.实际实现的(红绿设置了positionNotChanged：true,红色id为3) 或者 请教如何做呢？看文档darge可以设置begin,但是不知道这个begin如何计算正好能让双击的点保持位置不变

Reproduction link / 重现链接

https://g6-next.antv.antgroup.com/examples/layout/dagre#antv-dagre

Steps to Reproduce the Bug or Issue / 重现步骤

import { Graph } from '@antv/g6';

const data = { nodes: [ { id: '0', style: { fill: 'green', positionNotChanged: true, labelText: '绿红位置不变', x: 800, y: 100 } }, { id: '1', style: { x: 0, y: 100 } }, { id: '2', style: { x: 0, y: 270 } }, { id: '3', style: { positionNotChanged: true, fill: 'red', labelText: '双击我', x: 800, y: 130 } }, { id: '4', style: { x: 0, y: 300 } }, { id: '5', style: { x: 0, y: 400 } }, { id: '6', style: { x: 0, y: 500 } }, ], edges: [] };

const graph = new Graph({ container: 'container', animation: false, data, node: { type: 'rect', style: { size: [60, 30], radius: 8, labelPlacement: 'center', labelText: (d) => d.style.labelText || d.id, }, }, edge: { type: 'line', style: { endArrow: true, lineWidth: 2, stroke: '#C2C8D5', }, }, autoFit: 'view', behaviors: [ { type: 'drag-canvas', enable: (event) => event.shiftKey === false && event.targetType === 'canvas', }, { key: 'brush-select', type: 'brush-select', mode: 'diff', trigger: 'shift', style: { fill: '#00f', fillOpacity: 0.2, stroke: '#0ff', }, }, 'drag-element', 'zoom-canvas', ], });

graph.render(); graph.on('node:dblclick', async (event) => { graph.addData({ nodes: [{ id: '10' }, { id: '11' }, { id: '12' }, { id: '13' }, { id: '14' }, { id: '15' }], edges: [{ source: '10', target: '3' }, { source: '11', target: '3' }, { source: '3', target: '12' }, { source: '3', target: '14' }] }) await graph.draw() graph.setLayout({ type: 'antv-dagre', ranker: 'tight-tree', nodesep: 10, ranksep: 70, rankdir: 'LR', nodeFilter: (node) => { const { positionNotChanged } = node.style; return positionNotChanged === undefined || node.id === '3' // return positionNotChanged === undefined }, }); graph.layout() }) window.addPanel((gui) => { const config = { layout: 'default' }; const layouts = { default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true }, LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true }, 'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 }, };

gui.add(config, 'layout', Object.keys(layouts)).onChange(async (layout) => { graph.setLayout(layouts[layout]); await graph.layout(); graph.fitCenter(); }); });

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response