Secretmapper / react-image-annotation

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

Demo code is not working at all. #50

Closed pzapo closed 4 years ago

pzapo commented 4 years ago

Trying to use shared demo code results in:

Warning: Failed prop type: The prop annotations is marked as required in Annotation, but its value is undefined.

which results in: Uncaught TypeError: Cannot read property 'map' of undefined

Below is sample code that i tried to use.

import { OvalSelector, PointSelector, RectangleSelector } from "react-image-annotation/lib/selectors";
import React, { Component } from "react";

import Annotation from "react-image-annotation";
import Root from "react-image-annotation";
import img from "./cover.jpg";

export default class Simple extends Component {
    state = {
        annotations: [],
        annotation: {},
    };

    onChange = (annotation) => {
        this.setState({ annotation });
    };

    onSubmit = (annotation) => {
        const { geometry, data } = annotation;

        this.setState({
            annotation: {},
            annotations: this.state.annotations.concat({
                geometry,
                data: {
                    ...data,
                    id: Math.random(),
                },
            }),
        });
    };

    render() {
        return (
            <Root>
                <Annotation
                    src={img}
                    alt="Two pebbles anthropomorphized holding hands"
                    annotations={this.state.annotations}
                    type={PointSelector}
                    value={this.state.annotation}
                    onChange={this.onChange}
                    onSubmit={this.onSubmit}
                    allowTouch
                />
            </Root>
        );
    }
}
rlodina commented 4 years ago

Type property was wrong ...

type={PointSelector.type}

<Annotation
  src={img}
  alt="Two pebbles anthropomorphized holding hands"
  annotations={this.state.annotations}
  type={PointSelector.type}
  value={this.state.annotation}
  onChange={this.onChange}
  onSubmit={this.onSubmit}
  allowTouch
/>
pzapo commented 4 years ago

I have changed line of code that you have pointed out and nothing have changed. Still it goes same error "Uncaught TypeError: Cannot read property 'map' of undefined"

Even if you remove type prop completelty and use default value, it still crashes.

rlodina commented 4 years ago

I'm not sure about <Root> component ...

Please see a working sample: https://codesandbox.io/s/test-react-image-annotation-5bq92

pzapo commented 4 years ago

Yes, removed the Root element was the issue. This component should be removed from samples.

OTOH, changing selector type always results in rectangle shape selector. What is the diffrence of changing selector is all works the same? Is there a way to remove exisiting annotation or you have to program it yourself?

rlodina commented 4 years ago

Ops ... sorry my bad (the property is TYPE with uppercase)

type={PointSelector.TYPE}

I update the sample with tool selector ... https://codesandbox.io/s/test-react-image-annotation-5bq92

crossLineApex commented 3 years ago

Can I get the working code for functional component , cause I'm unable to convert it

crossLineApex commented 3 years ago

Can we do an edit ,remove annotations apart from just submitting. I was working with props but I coudnt find a solution