Secretmapper / react-image-annotation

An infinitely customizable image annotation library built on React
https://secretmapper.github.io/react-image-annotation/
MIT License
325 stars 135 forks source link

Click to Abort PointSelector Annotation #7

Closed hunterfortuin closed 6 years ago

hunterfortuin commented 6 years ago

When I am using the PointSelector and I click outside of the currently open editor window I get the following error in the logs:

onClick of selector type POINT returned undefined.
Make sure to explicitly return the previous state

The expected behavior is that the annotation should be aborted/deleted the same way that the Rectangle/Oval selectors do.

an-drian commented 6 years ago

@Secretmapper Hey, I still getting the same error :(

ptcampbell commented 5 years ago

+1 — I'm also getting this error.

an-drian commented 5 years ago

+1 — I'm also getting this error.

I have found temporary tricky solution. You need to create custom overlay and add your own onClick handler on it Like this:

Component init

<Annotation
            annotations={annotations}
            type={'POINT'}
            value={annotation}
            onChange={annotationChangeHandler}
            renderOverlay={props => renderOverlay(props, annotationDismissHandler)}
          />

your HOC with state:

class HOC from Component {
//... blahblah
 annotationDismissHandler = () => {
    this.setState({ annotation: {} });
  };
}

render func may looks like this:

const renderOverlay = ({ annotation, key }, onDismiss) => {
  const { geometry } = annotation;
  if (!geometry) return null;
  return (
    <div style={{
      position: 'absolute',
      height: '100%',
      width: '100%',
      backgroundColor: 'rgba(255, 255, 255, 0.5)',
      left: 0,
      top: 0,
    }}
         onClick={onDismiss}
    />
  );
};