cruise-automation / webviz

web-based visualization libraries
https://webviz.io/
Apache License 2.0
2.03k stars 412 forks source link

onClick and onMouseMove triggered everywhere for certain objects #185

Closed conrad closed 5 years ago

conrad commented 5 years ago

I'm trying to create mouse event handlers for specific objects, but these handlers are being triggered everywhere for the first object, specifically in a list of Cubes. The code looks like this:

  renderPallets = () => {
    const locationData = this.props.map.palletLocations.map((location, i) => {
      return {
        id: i,
        isClickable: true,
        type: constants.OBJ_TYPE_PALLET,
        pose: {
          orientation: {
            x: location.world_t_location[3],
            y: location.world_t_location[4],
            z: location.world_t_location[5],
            w: location.world_t_location[6],
          },
          position: {
            x: location.world_t_location[0],
            y: location.world_t_location[1],
            z: location.world_t_location[2],
          },
        },
        scale: { x: 1.1, y: 1.1, z: 0.1 },
        color: { r: 1, g: 1, b: 0, a: 1 },
      }
    })

    return (
      <Cubes
        getHitmapId={(marker) => marker.id}
        onClick={this.handlePalletClick}
        onMouseMove={this.handlePalletHover}>
        {locationData}
      </Cubes>
    )
  }

Both the onClick and onMouseMove handlers are triggered across the entire canvas with data for just the first cube passed to them. I tried adding the getHitmapId prop to help out, but it didn't make a difference.

I was able to reproduce the issue on this page in the docs https://webviz.io/worldview/#/docs/commands/cubes by adding this onClick event on the 5th to last line: <Cubes onClick={() => console.log('go')}>{markers}</Cubes>.

I'm on version 0.4.1. Any ideas?

jtbandes commented 5 years ago

Thanks for the report, we'll look into it soon. We have some work in progress in #177 that is changing the API for mouse events a little bit, so we can definitely fix in that branch, and maybe also backport a fix (since that will be a breaking change)

jtbandes commented 5 years ago

In the meantime, you can work around this issue by using id: i + 1. The problem is that id: 0 is reserved for the background ("nothing clicked"). After #177, this will change since ids will be generated by Worldview itself.

conrad commented 5 years ago

Ok. Great. That change to have an id prop that's non-zero fixed this :)