节点工具是否有鼠标事件监听，希望鼠标悬浮到节点工具上时，改变节点工具的背景颜色

[695648896]

问题描述

1.节点工具是否有onMove相关的鼠标事件监听，在源码中只看到了onClick
2.如何动态设置节点工具的attrs属性，用于改变背景颜色，

重现链接

https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx:861-868

重现步骤

1.悬浮在节点工具上，无法获取hover或者mousemove事件

预期行为

鼠标悬浮到节点工具上时，可以改变节点工具的背景颜色

平台

Windows

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[695648896]

@lloydzhou (｡･∀･)ﾉﾞ嗨，需要您的帮助。 现在的做法是去算节点工具的位置，通过cell:mousemove监听节点鼠标事件进入节点工具范围了 了就修改相关节点工具的markup ，是否有更好的办法来做这个事情，还是说只能通过自定义节点工具来增加mousemove方法

[695648896]

@NewByVector (｡･∀･)ﾉﾞ嗨，您能帮助我吗

[lloydzhou]

@695648896

https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx

1. MyButton继承Button，添加onMouseOver和onMouseOut事件
2. 使用MyButton.config定义markup以及events，其中events包含mouseover和mouseout分别指向前面定义的回调事件
3. 然后你应该就可以在hover的时候去处理更改背景颜色之类的逻辑....

[695648896]

2. mouseover

@695648896

https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx

1. MyButton继承Button，添加onMouseOver和onMouseOut事件
2. 使用MyButton.config定义markup以及events，其中events包含mouseover和mouseout分别指向前面定义的回调事件
3. 然后你应该就可以在hover的时候去处理更改背景颜色之类的逻辑....

@lloydzhou
谢谢您的回复，但我按照下面配置后，鼠标移到按钮上并没有触发相应事件，是否我的配置有不对的地方，地址详见https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx

[lloydzhou]

@lloydzhou
按照我说的步骤，用继承(extends)加上config
不要用define

[695648896]

@lloydzhou 按照我说的步骤，用继承(extends)加上config 不要用define

按照您给的步骤，成功运行了，实现了hover的需求，多谢！！！

[695648896]

@lloydzhou (｡･∀･)ﾉﾞ嗨打扰了，自定义按钮后又爆出了新的问题 Uncaught TypeError: Cannot read property 'ToolItem' of undefined 我参照了 vitejs/vite#3413

但是又引出了以下错误

以下是我的vite相关配置

[695648896]

ok，我能正确运行了，配置如下，将x6和x6-vue-shape 移除预构建，然后将他们的commonjs依赖加入预构建

[695648896]

@lloydzhou 老哥，我在自定义按钮时候碰到了类型的问题，我用自己定义的this.options.onMouseOver方法就会报类型错误，但是换成this.options.onClick就正常

[695648896]

然后有还有钉钉群可以进嘛，省的一直打扰您~

[695648896]

老哥，这是我完整的MyButton
@lloydzhou

[xiangch]

695648896

@695648896 这个问题解决了吗，我也遇到同样的问题

[695648896]

695648896

@695648896 这个问题解决了吗，我也遇到同样的问题
@xiangch

目前是通过any来欺骗ts编译器解决了 有什么更好的办法 记得回来教教我~

[xiangch]

695648896

@695648896 这个问题解决了吗，我也遇到同样的问题
@xiangch

目前是通过any来欺骗ts编译器解决了 有什么更好的办法 记得回来教教我~

@695648896 主要是因为 cellview 在 ToolsView 里并且是 protected 因此到了 Button 后就变成了 private 这时就不能被 Button 的子类引用了。我的解决办法就是直接继承 ToolsView，即把 Button 的代码抄过来，改成MyButton

[AMhehe]

你好，请问你是怎么在onMouseOver里改的背景色啊，我用了this.options.markup.attrs.fill = '#fff' 没好使，看到麻烦回复下，谢谢拉

[695648896]

你好，请问你是怎么在onMouseOver里改的背景色啊，我用了this.options.markup.attrs.fill = '#fff' 没好使，看到麻烦回复下，谢谢拉

我是直接加了class样式 @AMhehe

[AMhehe]

你好，看代码你的onMouseOver是写在tools里的，想问下你是怎么做到写到tools里也能让onMouseOver好使的，而且看你代码，你的节点工具也不是自定义的节点工具，我在上面的例子中https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx，在tools里直接用onMouseOver没好使，看到麻烦回复下，谢谢拉

[695648896]

https://codesandbox.io/s/proud-sea-uys8t4?file=/src/app.tsx，在tools里直接用onMouseOver没好使，看到麻烦回复下，谢谢拉

@AMhehe 我是自定义的 我自定义了MyButton按钮

[695648896]

/* eslint-disable @typescript-eslint/no-namespace */
import { Button } from '@antv/x6/es/registry/tool/button.js'
import { FunctionExt, Cell, CellView } from '@antv/x6'
export class MyButton extends Button {
onMouseOver(e: any) {
if (this.guard(e)) {
return
}
e.stopPropagation()
e.preventDefault()
const options: any = this.options
const onMouseOver = options.onMouseOver
if (typeof onMouseOver === 'function') {
FunctionExt.call(onMouseOver, this.cellView, {
e,
view: this.cellView,
cell: this.cellView.cell,
btn: this
})
}
}
onMouseOut(e: any) {
if (this.guard(e)) {
return
}
e.stopPropagation()
e.preventDefault()
const options: any = this.options
const onMouseOut = options.onMouseOut
if (typeof onMouseOut === 'function') {
FunctionExt.call(onMouseOut, this.cellView, {
e,
view: this.cellView,
cell: this.cellView.cell,
btn: this
})
}
}
}

export namespace MyButton {
MyButton.config<MyButton.Options>({
events: {
mouseover: 'onMouseOver',
mouseout: 'onMouseOut'
}
})
}
export namespace MyButton {
export interface Options extends Button.Options {
onMouseOver?: (
this: CellView,
args: {
e: any
cell: Cell
view: CellView
btn: MyButton
}
) => any
onMouseOut?: (
this: CellView,
args: {
e: any
cell: Cell
view: CellView
btn: MyButton
}
) => any
}
}

[695648896]

然后节点工具注册时候 是注册的我自定义的节点工具按钮

[AMhehe]

不好意思啊，再问下，你用的是X6是哪个版本啊，我按照你的写法来，结果报Class constructor Button cannot be invoked without 'new' ，我现在用的X6是1.34.5，看到麻烦回复下，谢谢拉

[695648896]

不好意思啊，再问下，你用的是X6是哪个版本啊，我按照你的写法来，结果报Class constructor Button cannot be invoked without 'new' ，我现在用的X6是1.34.5，看到麻烦回复下，谢谢拉

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.