react-paper-bindings
react-paper-bindings copied to clipboard
Could it be that Path segments is not fully implemented?
Somehow segments do not seem to update as part of a group, only Rectangle, PointText and Circle do. Please excuse the "sloppy" code, am still learning to work with React.
Below is (part of) the code I use. When Dragging the object, everything except the Path moves nicely as expected. I tried to change all segments to Line elements but same issue occurs.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Group, Path, Rectangle, Circle, PointText } from 'react-paper-bindings';
class FlowElement extends Component {
constructor(props) {
super(props);
this.state = {
x: props.x,
y: props.y,
s: props.s,
name: props.name,
};
}
handleDragGroup = e => { this.setState({x: e.point.x, y: e.point.y}); }
render() {
const { x, y, s, name } = this.state;
return(
<Group
name={name}
strokeColor={'black'}
strokeScaling={false}
strokeWidth={1}
onMouseUp={this.handleSelectGroup}
onMouseDrag={this.handleDragGroup}
>
<Rectangle
fillColor={'white'}
opacity={0.8}
point={[x-15*s,y-15*s]}
size={[30*s,30*s]}
strokeColor={'black'}
/>
<PointText
point={[x,y+5*s]}
content={name}
fontFamily={'Arial'}
fontSize={12}
justification={'center'}
/>
<Path segments={[[x-15*s,y-15*s],[x,y-8*s],[x+15*s,y-15*s],[x+15*s,y-8*s],[x-15*s,y-8*s]]} /> }
</Group>
);
}
}
export default FlowElement;
@schaafie you are correct. The renderer was written a while ago, and needs some updatin'. The react-reconciler
API changed quite a bit since it was first made public, and we need to double check if everything is implemented as it should be.
I am working on a new version on the react-paper-renderer repo. This package (react-paper-bindings
) will become deprecated, once react-paper-renderer
is available (as soon as hooks are available in stable react).
Check out the new Renderer and a new Paper component.
The new ˙Renderer˙ simply applies all prop to instance, so it's entirely up to you, what props you give to a component. Still need to merge updates here. If you wish, you can make a PR ;)
Also you might want to check out react-paperjs.
@schaafie check out new version 3 beta and let me know if this is still a problem. Closing this issue for now. Feel free to reopen.