Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Node dragging abnormal #6667

Open
3 of 10 tasks
liuchangheng opened this issue Dec 25, 2024 · 12 comments
Open
3 of 10 tasks

[Bug]: Node dragging abnormal #6667

liuchangheng opened this issue Dec 25, 2024 · 12 comments
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer

Comments

@liuchangheng
Copy link

liuchangheng commented Dec 25, 2024

Describe the bug / 问题描述

问题1: 当自定义节点中使用 Rect 作为一部分时, 鼠标移动到这个 Rect上,按下,拖拽节点,会直接报错,导致程序异常,无法继续操作
问题2: 当自定义节点中使用Label实现一个badge效果时,鼠标移动到badge上,按下,拖拽节点,这时,节点可以拖动,但是松开鼠标后,移动鼠标,节点依然跟着鼠标移动

Kapture.2024-12-27.at.17.42.16.mp4
Kapture.2024-12-27.at.17.47.56.mp4

Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/clever-kate-hygh6l

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

No response

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@liuchangheng liuchangheng added the status: waiting for maintainer These issues have not yet been reviewed by a maintainer label Dec 25, 2024
Copy link

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

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

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

我建议您检查以下几点:

  • 确保在自定义节点中正确处理了拖拽事件,尤其是在 mousedownmousemovemouseup 事件中。
  • 检查是否在自定义节点的 updatesetState 方法中正确更新了节点的状态。

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

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

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

@github-actions github-actions bot changed the title [Bug]: 节点拖拽异常 [Bug]: Node dragging abnormal Dec 25, 2024
@WolfVerrron18
Copy link

WolfVerrron18 commented Dec 26, 2024

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

@liuchangheng
Copy link
Author

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 尝试在指定的情况下通过标识符获取它,但它们没有标识符

需要如何解决?

@liuchangheng
Copy link
Author

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

@WolfVerrron18
Copy link

Проблема в том, что 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

@liuchangheng
Copy link
Author

Проблема в том, что 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 = ''

}

@WolfVerrron18
Copy link

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

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

looks like an option

@liuchangheng
Copy link
Author

我不希望在引用@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的信息上看,只有这个区别

@WolfVerrron18
Copy link

我不希望在引用@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

@liuchangheng
Copy link
Author

我不希望在引用@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!

@yvonneyx
Copy link
Contributor

Проблема в том, что 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);

@liuchangheng
Copy link
Author

Проблема в том, что 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目前能实现一定的效果)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer
Projects
None yet
Development

No branches or pull requests

3 participants