bennylin77 / react-annotation-tool Goto Github PK

Can you please update library to be available on React 18?

Hello, It is a very good tool but is there any way of editing the CSS of some objects inside the Image Tool component.

Note: I am using this for Image Annotation.

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>
    );
  }`

I'm using this package for drawing polygons on images,

Desired Behaviour:

Default annotation prop should ret to initial value once I save annotations on a custom action call.

Current Behaviour:

New image uploads but polygon points doesn't change.

How can I achieve this behaviour? Any help will be much appreciated.

npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of i18next@>= 17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of konva@^3.2.3 but none is installed. You must install peer dependencies yourself.

Using the quick start, installed the package. Coded a very basic example. (would be nice to have one shown somewhere)
Get an odd execution error.
This code
==========================code start ============
import React from 'react';
import {TwoDimensionalImage} from "react-annotation-tool"

const url = 'here was the url to my image, confidential so can't show';;

var defaultAnnotations=[];
const options = {};
function TestPackage(){
return (

function handleSubmit()
{
    console.log("submitted");
}

}
export default TestPackage;

==========

Gives this execution error.
This is very puzzling for a novice of ReactJS

ReferenceError: em is not defined
Module.push../node_modules/react-annotation-tool/dist/bundle.js
C:/My Programs/annotations/node_modules/react-annotation-tool/dist/bundle.js:7
4 | Licensed under the MIT License (MIT), see
5 | http://jedwatson.github.io/classnames
6 | */!

7 | function(){"use strict";var n={}.hasOwnProperty;function r(){for(var t=[],e=0;e<arguments.length;e++){var a=arguments[e];if(a){var c=typeof a;if("string"===c||"number"===c)t.push(a);else if(Array.isArray(a)&&a.length){var i=r.apply(null,a);i&&t.push(i)}else if("object"===c)for(var o in
============ rest of the function is cut ===========

请问大牛视频标注没有做吗？还是没有放上来呢？

does the package supports BoundingBox annotation ?

Is is possible to add a setting where the user can manually set names for all the bounding boxes rather than using random strings eg. 'jwzlwirv', 'jwzlwrh3', 'jwzlwrh4' and so on ?