react-annotation-tool icon indicating copy to clipboard operation
react-annotation-tool copied to clipboard

Unable to use ImageTool in separate react app

Open anjelaandreasyan opened this issue 6 years ago • 0 comments

An exception is thrown when ImageTool is imported and placed in a custom container. Note that example code is used for testing. See snippet below.

` import {ImageTool} from "react-annotation-tool"

   handleSubmit = r => {
	console.log(r)
}

componentDidMount(){}

render(){
	const menu = {id: "0", value: "root", options: [
										{id: "1", value: "Object", options: [
													{id: "1-1", value: "Face", options: []},
													{id: "1-2", value: "Face Reflection", options: []},
													{id: "1-3", value: "Framed Photo", options: []},
													{id: "1-4", value: "Tattoo", options: []},
													{id: "1-5", value: "Suspicious", options: []},
													{id: "1-6", value: "Other", options: []},
											]},
										{id: "2", value: "Text", options: [
											{id: "2-1", value: "Letter", options: []},
											{id: "2-2", value: "Computer Screen", options: []},
											{id: "2-3", value: "Pill Bottle/Box", options: []},
											{id: "2-4", value: "Miscellaneous Papers", options: []},
											{id: "2-5", value: "Menu", options: []},
											{id: "2-6", value: "Credit Card", options: []},
											{id: "2-7", value: "Business Card", options: []},
											{id: "2-8", value: "Poster", options: []},
											{id: "2-9", value: "Clothing", options: []},
											{id: "2-10", value: "Book", options: []},
											{id: "2-11", value: "Receipt", options: []},
											{id: "2-12", value: "Street Sign", options: []},
											{id: "2-13", value: "License Plate", options: []},
											{id: "2-14", value: "Newspaper", options: []},
											{id: "2-15", value: "Suspicious", options: []},
											{id: "2-16", value: "Other", options: []},
										]}
									]},
			url = "http://qnimate.com/wp-content/uploads/2014/03/images2.jpg";

	return(
		<div>
			<div className="mb-5">
				<ImageTool onNextClick={this.handleSubmit}
                            onPreviousClick={this.handleSubmit}
                            onSkipClick={this.handleSubmit}
                            annotationWidth={500}
                            menu={menu}
                            category={'Others'}
                            categoryOptions = {[]}
                            annotations = {[]}
                            disabledOptionLevels={[]}
                            dynamicOptions
                            labeled
                            url={url} />
			</div>
		</div>
    );
  }`

anjelaandreasyan avatar Dec 24 '18 08:12 anjelaandreasyan