Interactive Shapes

[Tarrence van As]

Is there a plan to add interactivity to shapes, more specifically, allowing users to move and transform shapes similar to what fabric.js does? If so, how would this be ideally implemented?

I'd be interested in contributing the functionality. Right now I am playing around with adding it through an InteractionMixin mixed in with RenderableMixin and enabling with a interactive property.

[Sebastian Markbåge]

That can be built on top of what ART already does. React is all about composability. Ideally it could even be reused on HTML nodes.

var Movable = React.createClass({

  getInitialState: function() {
    return { transform: new ART.Transform() };
  },

  handleMouseUp: function() {
  },
  handleMouseMove: function() {
    this.setState({ transform: this.state.transform.translate(...).rotate(...) });
  },
  handleMouseDown: function() {
  },

  render: function() {
    return (
      <Group
        onMouseUp={this.handleMouseUp}
        onMouseMove={this.handleMouseMove}
        onMouseDown={this.handleMouseDown}
        transform={this.state.transform}>
        {this.props.children}
      </Group>
    );
  }

});

That way you can wrap it around any ART content:

return <Movable width={100} height={100}><Circle /></Movable>

Note: This is just an example. You actually need a little more to implement drag/drop properly in React, since we don't have a built-in way to get global mouse events from outside the target.

[Tarrence van As]

Gotcha, thanks.

[Sebastian Markbåge]

If it's generic enough, I'd be happy to accept a pull-request to this project though. :)

It seems like people are looking for a full-stack solution.

[Tarrence van As]

Ok, will look into it. It might make most sense to add the functionality to the higher-order shapes that are in master. Since we need the Shape to be nested in a Group in order to provide move and transform (if I'm understanding the lib correctly). What are your thoughts?

[goughjo02]

can this be animated?

[ap050492]

Hi @tarrencev @hramos
I want to add click event of particular shape of group in react native. I trying with difference option but i can not find any useful for that. can you please help for this issue.

sectionAngles.map(section => (
                <Group>                
                  <Shape
                    key={section.index}
                    d={path(section)}
                    fill={section.data.color}
                    strokeWidth={1} />
              {/* <TouchableOpacity onPress = {() => console.warn("Hi...")}> */}
                  <ART.Text font={{ fontFamily: 'Helvetica Neue', fontSize: 20, }}
                    fill="#000"
                    x={path.centroid(section)[0]}
                    y={path.centroid(section)[1]}
                    ellipsizeMode={"middle"}
                    alignment="center"
                  >{section.data.itemName}</ART.Text>
                  {/* </TouchableOpacity> */}
                 </Group>

              ))