react-paper-bindings icon indicating copy to clipboard operation
react-paper-bindings copied to clipboard

Could it be that Path segments is not fully implemented?

Open schaafie opened this issue 6 years ago • 1 comments

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 avatar Nov 17 '18 14:11 schaafie

@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.

HriBB avatar Dec 11 '18 08:12 HriBB

@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.

HriBB avatar Sep 14 '22 13:09 HriBB