Open Wolff51 opened 1 year ago
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 !
When i try with disableEditor={true}, i can't manage to get coordinates of selected area *
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 :
Please let me know if you have any idea !