Events not fired on children of Group about react-canvas HOT 4 OPEN

Make sure your Layer has both a width and a height and is “visible”. To be sure, give it a temporary backgroundColor: 'hotpink'. If you cannot see it, that’d explain why the event isn’t triggered.

from react-canvas.

Yes the Layer is visible and has width / height. I'll come back with a test sample here.

from react-canvas.

Nailed it. It is because the Group component has a translateY prop set. It makes the children actually move, but not their hit zone it seems.

By the way, is there a reason for Group not supporting top / left ?

Here is a sample :

var React = require('react/addons');
var ReactCanvas = require('react-canvas');

var Surface = ReactCanvas.Surface;
var Layer = ReactCanvas.Layer;
var Image = ReactCanvas.Image;
var Group = ReactCanvas.Group;

var App = React.createClass({

  handleClick: function(event) {
    console.log(event);
  },

  render: function () {
    var surfaceWidth = window.innerWidth;
    var surfaceHeight = window.innerHeight;

    var groupStyle = {
      translateY: 100,
    };

    var layerStyle = {
      width: 100,
      height: 100,
      top: 0,
      left: 0,
      backgroundColor: '#ff0000'
    };

    return (
      <Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>
        <Group style={ groupStyle }>
          <Layer onClick={ this.handleClick } style={ layerStyle } />
        </Group>
      </Surface>
    );
  }

});

React.render(<App />, document.getElementById('app'));

from react-canvas.

Group should support top/left values. Child values for top/left are not relative to the parent though (e.g. position: relative inside position: absolute). Everything is essentially absolutely positioned.

That being said, hit testing should account for ancestor translations. Your example looks good so this seems like a bug, will have a look.

from react-canvas.