diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 9a2f4879ee558e83d389d4b938827289805b4d38..b26498c2bd0a580d935fe2d9178cb7295fd21239 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -101,6 +101,8 @@ function AnnotationCreation(props) { const [shapes, setShapes] = useState([]); const [scale, setScale] = useState(1); + const [isMouseOverSave, setIsMouseOverSave] = useState(false); + const { height, width } = VideosReferences.get(props.windowId).ref.current; @@ -484,6 +486,7 @@ function AnnotationCreation(props) { setColorToolFromCurrentShape={setColorToolFromCurrentShape} updateShapes={updateShapes} shapes={shapes} + isMouseOverSave={isMouseOverSave} /> <StyledForm onSubmit={submitForm} @@ -527,7 +530,10 @@ function AnnotationCreation(props) { <Button onClick={closeCompanionWindow}> Cancel </Button> - <Button variant="contained" color="primary" type="submit"> + <Button variant="contained" color="primary" type="submit" + onMouseOver={() => setIsMouseOverSave(true)} + onMouseOut={() => setIsMouseOverSave(false)} + > Save </Button> diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js index d9addb8f4cc54e51d9925641fd518515f7e225df..86877093bea5918f3f9dbc8e7a6c0001290188e9 100644 --- a/src/annotationForm/AnnotationDrawing.js +++ b/src/annotationForm/AnnotationDrawing.js @@ -497,6 +497,7 @@ function AnnotationDrawing(props) { height={props.originalHeight} onTransform={onTransform} handleDragEnd={handleDragEnd} + isMouseOverSave={props.isMouseOverSave} /> </Stage> ); diff --git a/src/annotationForm/KonvaDrawing/shapes/ParentComponent.js b/src/annotationForm/KonvaDrawing/shapes/ParentComponent.js index fd05ab9105c3859c1cb0dac026024fa8673e8bf9..d862f85a7c7ea7c43cbafed8fa8e498a9ae77878 100644 --- a/src/annotationForm/KonvaDrawing/shapes/ParentComponent.js +++ b/src/annotationForm/KonvaDrawing/shapes/ParentComponent.js @@ -16,6 +16,7 @@ import ImageShape from './Image'; function ParentComponent({ shapes, onShapeClick, selectedShapeId, activeTool, scale, width, height, onTransform, handleDragEnd, + isMouseOverSave }) { // TODO Simplify these state const [selectedShape, setSelectedShape] = useState(null); @@ -47,7 +48,7 @@ function ParentComponent({ scaleY={scale} > {shapes.map((shape, i) => { - const isSelected = selectedShapeId === shape.id; + const isSelected = selectedShapeId === shape.id && isMouseOverSave===false; switch (shape.type) { case 'rectangle': return (