Cannot fire events with g6-react-node

[monolithed]

Describe the bug

1. Cannot subscribe to onMouseEnter and onMouseLeave events
2. The onMouseOut event triggered after click on the element

Your Example Website or App

https://codesandbox.io/s/frosty-euclid-3zbt9?file=/index.js

Steps to Reproduce the Bug or Issue

Hover over element

Expected behavior

The onMouseOut event should be triggered

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Safari
• Version: latest versions

Additional context

No response

[mxz96102]

because of event triggers' least unit is the item, unless your mouse in or mouse out event are triggered with item(node), the shape in item won't trigger these event

[monolithed]

@mxz96102, thanks for your reply, could you provide an example how to subscribe on onMouseEnter correctly?

[defghy]

same problem
because when mouseEnter cannot get shape

event.target has value；
because when event trigger，mouse has come out

[defghy]

quick fix；hijack createNodeFromReact

import { createNodeFromReact as originCreateNodeFromReact } from '@antv/g6-react-node'

const cfg2EventMap = {
  onClick: 'click',
  onDBClick: 'dblclick',
  onMouseEnter: 'mouseenter',
  onMouseMove: 'mousemove',
  onMouseOut: 'mouseout',
  onMouseOver: 'mouseover',
  onMouseLeave: 'mouseleave',
  onMouseDown: 'mousedown',
  onMouseUp: 'mouseup',
  onDragStart: 'dragstart',
  onDrag: 'drag',
  onDragEnd: 'dragend',
  onDragEnter: 'dragenter',
  onDragLeave: 'dragleave',
  onDragOver: 'dragover',
  onDrop: 'drop',
  onContextMenu: 'contextmenu',
}

export const createNodeFromReact = function (arg) {
  const shapeOption = originCreateNodeFromReact(arg)
  const originDraw = shapeOption.draw
  shapeOption.draw = function (cfg: any, group: IGroup) {
    const target = originDraw(cfg, group)

    // 遍历
    group.find((shape: any) => {
      const cfgKeys = Object.keys(shape.cfg)
      // 绑定相关事件
      cfgKeys
        .filter(key => cfg2EventMap[key])
        .forEach(eventKey => {
          shape.on(cfg2EventMap[eventKey], shape.cfg[eventKey])
        })

      return false
    })

    return target
  }

  return shapeOption
}

[github-actions]

This issue has been closed because it has been outdate for a long time.
Please open a new issue if you still need help.
这个 issue 已经被关闭，因为 它已经过期很久了。
如果你仍然需要帮助，请创建一个新的 issue。