Removing Editor ('Write Description')

[Wolff51]

Hi,

I'm trying to remove the small text modal that show up after in select an area.

I need, for my project, to create my own modal. My setup is working well and it trigger my modal, but only after i press submit.

I try to remove editor and trigger on mouse up, but it's not working either.

My actual code is :

import React, { useState, useEffect } from 'react';
import Annotation from 'react-image-annotation';


const Annotate = ({ imageUrl }) => {
    const [annotations, setAnnotations] = useState([]);
    const [annotation, setAnnotation] = useState({});
    const [areaCoordinates, setAreaCoordinates] = useState({});
    const [type, setType] = useState('RECTANGLE');
    const [showModal, setShowModal] = useState(false);
    const [cropPreview, setCropPreview] = useState({});
    const [defaultSelect, setDefaultSelect] = useState([])
   


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

        setAnnotation({});
        setAnnotations([
            ...annotations,
            {
                geometry,
                data: {
                    ...data,
                    id: Math.random(),
                },
            }
        ]);

        setShowModal(true);
    }

    useEffect(() => {
        setAnnotations([]);
    }, [imageUrl]);

    const handleSetDescription = (e) => {
        setDescription(e.target.value);
    }

    const handleConfirm = () => {
        setShowModal(false)
        setDescription('');
    }

    return (
        <div className=' overflow-x'>
            {showModal &&
                <div className='absolute top-0 left-0 w-full h-full bg-gray-500 bg-opacity-50 z-50'>
                    <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/2 h-1/2 bg-white rounded-lg'>
                        <div className='flex flex-col justify-around items-center h-full text-sm'>
                            <select onChange={handleSetDescription}>
                                <option value=''>Type of default : </option>
                                {defaultSelect.map((item, index) => {
                                    return (
                                        <option key={index} value={item.description}>{item.name}</option>
                                    )
                                })}
                            </select>
                            {description !== '' &&
                                <p className='p-1'>{description}</p>
                            }
                            <input type="text" placeholder="Severity" className='pl-1' />
                            <input type="text" placeholder="Comment" className='pl-1' />
                            <div className='text-xs flex flex-col items-start'>
                                <p> Origin X : {areaCoordinates.x}  </p>
                                <p> Origin Y : {areaCoordinates.y}  </p>
                                <p> Width : {areaCoordinates.width}  </p>
                                <p> Height : {areaCoordinates.height}  </p>
                                <p> Image path : {imageUrl}</p>
                            </div>
                            <button className="text-lg font-bold px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-orange rounded-md focus:outline-none" onClick={handleConfirm}> Confirm </button>
                        </div>
                    </div>
                </div>
            }
            <div className='w-full h-4/6'>
                <Annotation
                    src={imageUrl}
                    alt='Dynamic Image'
                    annotations={annotations}
                    type={type}
                    value={annotation}
                    onChange={onChange}
                    onSubmit={onSubmit}
                />
            </div>
        </div>
    )
}

export default Annotate;

Please let me know if you have any idea !

[Wolff51]

When i try with disableEditor={true}, i can't manage to get coordinates of selected area *