Image not rerendering until hover despite boxes prop changing

[jslee98]

Hello, I am trying to dynamically add/remove boxes to the canvas by updating a "boundingBoxes" array in state. I am also using the forceRedraw prop. When the boxes are added, they appear without any action necessary. However, when the boxes are reset to an empty array, they do not disappear until the mouse hovers over the canvas and redraws itself. Is there any way around this? I can provide more information if you would like!

To note, I did read past issues and am using 0.5.14

[jslee98]

Additionally, I am finding that when the image url is stored in state, the boxes do not respond to hover actions. Is this intentional, or should I open a separate issue?

[alx]

Hi @jslee98

Thanks for your feedback, I'll have a look at these behaviors.

Could you provide a code example ?

Yes, you can open a separated issue for the boxes responses on stated image url, it'd be nice if you could provide a code example too.

Have a nice day,

Alex

[jslee98]

Sorry just seeing this now- didn't get a notification you responded. I can definitely supply some code examples. Below is an excerpt from the page I am using this on:

class ApprovalPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      coords: [],
      columnBoxes: []
    }
  }

  componentDidMount() {
    fetch(API)
      .then( res => res.json())
      .then(({textract, url}) => {
        const { coords } = getExtractedTable(textract.Blocks)
        this.setState({
          coords,
          columnBoxes: createColumnBoxes(coords),
          current_image: url
         })
      })
  }

  get boundingBoxes() {
    const { columnBoxes, colSelectionActive } = this.state
    if (colSelectionActive){
      return columnBoxes
    } else {
      return []
    }
  }

  render() {
    const { url } = this.state
    return (
      <Container className="approvalpage-body">
        <Row>
          <Col onClick = {this.reassignColumn} className="credit-memo-image">
            <Boundingbox
              image={url}
              boxes={this.boundingBoxes}
              onSelected={(selectedColIndex) => this.setState({ selectedColIndex })}
            />
          </Col>
        </Row>
      </Container>
    )
  }
}

Essentially, I want to be able to dynamically hide/show boxes, and I also want to be able to change the source URL of the image based on state. Currently, when I put the image in state, box highlighting freezes up. When I go from hiding boxes to showing boxes, they show do up automatically. However, when I go from showing boxes to hiding boxes, they don't disappear until I hover over the canvas itself.

If you have any insight into either of these, I would greatly appreciate the help! For my project, the dynamic changing of the image is a more important feature.

[jslee98]

@alx Anything you see that I could be doing wrong here? Still can't seem to get them to work properly.

[alx]

Hi @jslee98 ,

thanks for the notification. It looks like an issue I had previously, it might be related.

I might not have a lot of time in coming days, but if you want to dig inside this lib code, it might be related to background refresh in componentWillReceiveProps : https://github.com/alx/react-bounding-box/blob/master/src/react-bounding-box.js#L159

Tell me if you find something interesting.

Thanks,

Alex

[jslee98]

I have been looking to this code and still haven't discovered the exact issue. However, I have found that when the 'image' prop is set to a static variable, componentWillReceiveProps fires every time the mouse moves on the canvas and the program works correctly. However, when the image prop is a state variable, componentWillReceiveProps never fires.

I am trying to work on this on my own as well, but don't have a ton of experience in React's mounting functions. Do you know of any reason this could be happening?