[Bug]: Node dragging abnormal #6667

感谢您提供详细的错误描述和复现链接。关于您提到的两个问题：

1. 问题1：当自定义节点中使用 Rect 作为一部分时，拖拽节点会导致程序异常。
2. 问题2：自定义节点中使用 Label 实现 badge 效果时，拖拽后节点会跟随鼠标移动。

这两个问题可能与 G6 的事件处理机制有关，特别是在自定义节点中使用特定图形元素时。

我建议您检查以下几点：

• 确保在自定义节点中正确处理了拖拽事件，尤其是在 mousedown、mousemove 和 mouseup 事件中。
• 检查是否在自定义节点的 update 或 setState 方法中正确更新了节点的状态。

如果问题依然存在，您可以尝试在 G6 的 GitHub 仓库中查看是否有类似的问题报告，或者提供更多的代码细节以便进一步分析。

如果您需要，我可以帮助您在 GitHub 上搜索相关问题，看看是否有解决方案。请告诉我您的决定。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

The problem is that Circle,Diamond,Donut,Rect,Ellipse,Hexagon,HTML,Image,Star,Triangle are of type ‘Node’ and G6 tries to get it by identifier at the specified case, but they have no identifier

The problem is that Circle,Diamond,Donut,Rect,Ellipse,Hexagon,HTML,Image,Star,Triangle are of type ‘Node’ and G6 tries to get it by identifier at the specified case, but they have no identifier问题是 Circle、Diamond、Donut、Rect、Ellipse、Hexagon、HTML、Image、Star、Triangle 是 'Node' 类型，G6 尝试在指定的情况下通过标识符获取它，但它们没有标识符

需要如何解决？

当前在render时，将使用rect的keyshape，通过getShape方法，拿到其对象，然后将其type值赋值为空字符串即可解决问题1

Проблема в том, что Circle, Diamond, Donut, Rect, Ellipse, Hexagon, HTML, Image, Star, Triangle относятся к типу «Узел», и G6 пытается получить их по идентификатору в указанном случае, но у них нет идентификатора

需要如何解决？

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

This is where you use Rect, that is inserting a node, another node, you need to insert a shape GRect

Проблема в том, что Circle, Diamond, Donut, Rect, Ellipse, Hexagon, HTML, Image, Star, Triangle относятся к типу «Узел», и G6 пытается получить их по идентификатору в указанном случае, но у них нет идентификатора

需要如何解决？

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

This is where you use Rect, that is inserting a node, another node, you need to insert a shape GRect

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动

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);
this.drawBadgeLabelShape(attributes, container);

this.getShape('process-bar').type = ''

}

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动

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

looks like an option

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动 render(attributes = this.parsedAttributes, container) { super.render(attributes, container);render（attributes = this.parsedAttributes， 容器） { super.render（attributes， container）;

looks like an option 看起来像一个选项

暂时没有研究源码，但是从不同shape的信息上看，只有这个区别

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动 render(attributes = this.parsedAttributes, container) { super.render(attributes, container);render（attributes = this.parsedAttributes， 容器） { super.render（attributes， container）;

looks like an option 看起来像一个选项

暂时没有研究源码，但是从不同shape的信息上看，只有这个区别

I solved the problem of inheritance ID from the BaseShape class and using GRect in the upsert function

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动 render(attributes = this.parsedAttributes, container) { super.render(attributes, container);render（attributes = this.parsedAttributes， 容器） { super.render（attributes， container）;render（attributes = this.parsedAttributes， 容器） { super.render（attributes， container）;render（attributes = this.parsedAttributes， 容器） { super.render（attributes， container）;

looks like an option 看起来像一个选项

暂时没有研究源码，但是从不同shape的信息上看，只有这个区别

I solved the problem of inheritance ID from the BaseShape class and using GRect in the upsert function我解决了从 BaseShape 类继承 ID 并在 upsert 函数中使用 GRect 的问题

good！

Проблема в том, что Circle, Diamond, Donut, Rect, Ellipse, Hexagon, HTML, Image, Star, Triangle относятся к типу «Узел», и G6 пытается получить их по идентификатору в указанном случае, но у них нет идентификатора

需要如何解决？

drawProcessBarShape(attributes, container) { const processBarStyle = this.getProcessBarStyle(attributes); // this.upsert('process-bar', GRect, processBarStyle, container); this.upsert("process-bar", Rect, processBarStyle, container); } This is where you use Rect, that is inserting a node, another node, you need to insert a shape GRect

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动

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);
this.drawBadgeLabelShape(attributes, container);

this.getShape('process-bar').type = ''

}

也可以通过以下方式使用 GRect，我们已经在 G6 内部注册过该图形了

this.upsert("process-bar",'rect', processBarStyle, container);

Проблема в том, что Circle, Diamond, Donut, Rect, Ellipse, Hexagon, HTML, Image, Star, Triangle относятся к типу «Узел», и G6 пытается получить их по идентификатору в указанном случае, но у них нет идентификатора问题是 Circle、Diamond、Donut、Rect、Ellipse、Hexagon、HTML、Image、Star、Triangle 是 “Node” 类型，G6 在上述情况下尝试通过 ID 获取它们，但它们没有 ID

需要如何解决？

drawProcessBarShape(attributes, container) { const processBarStyle = this.getProcessBarStyle(attributes); // this.upsert('process-bar', GRect, processBarStyle, container); this.upsert("process-bar", Rect, processBarStyle, container); }drawProcessBarShape（attributes， container） { const processBarStyle = this.getProcessBarStyle（attributes）; // this.upsert（'process-bar'， GRect， processBarStyle， container）; this.upsert（“process-bar”， Rect， processBarStyle， container）; } This is where you use Rect, that is inserting a node, another node, you need to insert a shape GRect这是你使用 Rect 的地方，即插入一个节点，另一个节点，你需要插入一个形状 GRect

我不希望在引用@antv/g这个库，我目前已找到临时方案来解决改问题，在render函数中增加代码 this.getShape('process-bar').type = ''就能实现rect的拖动 render(attributes = this.parsedAttributes, container) { super.render(attributes, container);render（attributes = this.parsedAttributes， 容器） { 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);
this.drawBadgeLabelShape(attributes, container);

this.getShape('process-bar').type = ''

}

也可以通过以下方式使用 GRect，我们已经在 G6 内部注册过该图形了

this.upsert("process-bar",'rect', processBarStyle, container);

按照你的描述，我使用 this.upsert("process-bar",'rect', processBarStyle, container); 确实可以实现，但是官网上关于 upsert方法参数的描述中，似乎并没有提到可以传递 string 类型，另外 Rect 和 GRect 的样式描述是存在区别的，这一点在自定义元素的过程中可能会造成一定的困扰。同时这样只是解决了问题1， 问题2是否有办法解决(当然官方提供的badge目前能实现一定的效果)