diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index dd378692b1dccb3527f704a9bdc053c924d062ce..984f097c87725e259de23ed0d39e1134981c5d92 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -444,7 +444,6 @@ function AnnotationCreation({ resetStateAfterSave={resetStateAfterSave} state={state} windowId={windowId} - mediaIsVideo={mediaIsVideo} /> </StyledForm> </CompanionWindow> diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js index 295cd982fa781e52467dac9f391a7bf001ac4c15..de2b53c2f3cefa8dffee6856220c858174260938 100644 --- a/src/annotationForm/AnnotationDrawing.js +++ b/src/annotationForm/AnnotationDrawing.js @@ -11,10 +11,10 @@ import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences'; // eslint-disable-next-line import/no-extraneous-dependencies import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences'; import ParentComponent from './AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent'; -import {OVERLAY_TOOL, SHAPES_TOOL} from '../AnnotationCreationUtils'; +import { OVERLAY_TOOL, SHAPES_TOOL } from '../AnnotationCreationUtils'; /** All the stuff to draw on the canvas */ -function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { - const { height, width } = props.mediaVideo ? props.mediaVideo.ref.current : 0; +function AnnotationDrawing({ drawingState, setDrawingState, height, width, ...props }) { + useEffect(() => { const overlay = props.mediaVideo ? props.mediaVideo.ref.current : null; @@ -47,7 +47,6 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { const { fillColor, strokeColor, strokeWidth } = props; - useEffect(() => { // Perform an action when fillColor, strokeColor, or strokeWidth change // update current shape @@ -129,10 +128,10 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { const handleDragStart = (evt) => { const modifiedshape = evt.currentTarget.attrs; - setDrawingState({ - ...drawingState, - currentShape: drawingState.shapes.find((s) => s.id === modifiedshape.id), - }); + setDrawingState({ + ...drawingState, + currentShape: drawingState.shapes.find((s) => s.id === modifiedshape.id), + }); }; /** */ @@ -219,8 +218,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { y: pos.y, }; setDrawingState({ - isDrawing: true, currentShape: shape, + isDrawing: true, shapes: [...drawingState.shapes, shape], }); break; @@ -242,8 +241,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { y: pos.y, }; setDrawingState({ - isDrawing: true, currentShape: shape, + isDrawing: true, shapes: [...drawingState.shapes, shape], }); break; @@ -357,7 +356,6 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { pos.x /= props.scale; pos.y /= props.scale; - switch (props.activeTool) { case SHAPES_TOOL.RECTANGLE: updateCurrentShapeInShapes({ @@ -379,8 +377,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { ...drawingState.currentShape, height: pos.y - drawingState.currentShape.y, radiusX: (pos.x - drawingState.currentShape.x) / 2, - width: pos.x - drawingState.currentShape.x, radiusY: (pos.y - drawingState.currentShape.y) / 2, + width: pos.x - drawingState.currentShape.x, }); break; @@ -404,12 +402,12 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { const arrowShape = {}; // update points arrowShape.points = [drawingState.currentShape.points[0], drawingState.currentShape.points[1], pos.x, pos.y]; - arrowShape.id =drawingState.currentShape.id; - arrowShape.type =drawingState.currentShape.type; - arrowShape.pointerLength =drawingState.currentShape.pointerLength; - arrowShape.pointerWidth =drawingState.currentShape.pointerWidth; - arrowShape.x =drawingState.currentShape.x; - arrowShape.y =drawingState.currentShape.y; + arrowShape.id = drawingState.currentShape.id; + arrowShape.type = drawingState.currentShape.type; + arrowShape.pointerLength = drawingState.currentShape.pointerLength; + arrowShape.pointerWidth = drawingState.currentShape.pointerWidth; + arrowShape.x = drawingState.currentShape.x; + arrowShape.y = drawingState.currentShape.y; arrowShape.fill = props.fillColor; arrowShape.stroke = props.strokeColor; arrowShape.strokeWidth = props.strokeWidth; @@ -435,7 +433,7 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { } // For these cases, the action is similar: stop drawing and add the shape setDrawingState({ - ... drawingState, + ...drawingState, isDrawing: false, }); } catch (error) { @@ -496,32 +494,22 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) { if (osdref && videoref) { throw new Error('Unhandled case: both OpenSeadragon (image viewer) and video player on the same canvas'); } - const container = osdref ? osdref.current.element : videoref.ref.current.parentElement; + const container = osdref ? osdref.current.container : videoref.ref.current.parentElement; return ReactDOM.createPortal(drawKonvas(), container); } AnnotationDrawing.propTypes = { + activeTool: PropTypes.string.isRequired, + closed: PropTypes.bool.isRequired, drawingState: PropTypes.object.isRequired, - activeTool: PropTypes.string, - closed: PropTypes.bool, - fillColor: PropTypes.string, - selectedShapeId: PropTypes.string, - strokeColor: PropTypes.string, - strokeWidth: PropTypes.number, + fillColor: PropTypes.string.isRequired, + selectedShapeId: PropTypes.string.isRequired, + strokeColor: PropTypes.string.isRequired, + strokeWidth: PropTypes.number.isRequired, svg: PropTypes.func.isRequired, updateGeometry: PropTypes.func.isRequired, windowId: PropTypes.string.isRequired, }; -AnnotationDrawing.defaultProps = { - activeTool: null, - closed: true, - fillColor: 'red', - selectedShapeId: null, - strokeColor: '#00BFFF', - strokeWidth: 1, - svg: null, -}; - export default AnnotationDrawing; diff --git a/src/annotationForm/AnnotationFormFooter.js b/src/annotationForm/AnnotationFormFooter.js index a14e76f1ad92c8d76b55b2e3d526b8379ddcd2f8..cf5b2051ae99b8e835e41866a93b6d4c322abeb6 100644 --- a/src/annotationForm/AnnotationFormFooter.js +++ b/src/annotationForm/AnnotationFormFooter.js @@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid'; import { saveAnnotationInEachCanvas, } from '../AnnotationCreationUtils'; -import { secondsToHMS } from '../utils'; +import { removeHTMLTags, secondsToHMS } from '../utils'; import { getKonvaAsDataURL, } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils'; @@ -23,12 +23,10 @@ function AnnotationFormFooter({ closeFormCompanionWindow, config, drawingState, - mediaIsVideo, receiveAnnotation, resetStateAfterSave, state, windowId, - }) { /** * Validate form and save annotation @@ -60,7 +58,16 @@ function AnnotationFormFooter({ xywh, // TODO retrouver calcul de xywh }; - const annotationText = (!textBody.length && target.t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody; + let annotationText; + if (textBody.length == 0 || removeHTMLTags(textBody).length == 0) { + if (target.t) { + annotationText = `${new Date().toLocaleString()} - ${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}`; + } else { + annotationText = new Date().toLocaleString(); + } + } else { + annotationText = textBody; + } let id = annotation?.id ? annotation.id : `https://${uuid()}`; id = id.split('#')[0]; @@ -85,23 +92,15 @@ function AnnotationFormFooter({ const isNewAnnotation = !annotation; - // TODO dumb code to avoid error from Konva export. WIth image, Konva doesnot work - if (mediaIsVideo) { - // Save jpg image of the drawing in a data url - getKonvaAsDataURL(windowId).then((dataURL) => { - console.log('dataURL:', dataURL); - const annotation = { ...annotationToSaved }; - annotation.body.id = dataURL; - saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation); - closeFormCompanionWindow(); - resetStateAfterSave(); - }); - } else { + // Save jpg image of the drawing in a data url + getKonvaAsDataURL(windowId).then((dataURL) => { + console.log('dataURL:', dataURL); const annotation = { ...annotationToSaved }; + annotation.body.id = dataURL; saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation); closeFormCompanionWindow(); resetStateAfterSave(); - } + }); }; return ( diff --git a/src/utils.js b/src/utils.js index f30b3dafd1afc7f8ef6194fb9ba2bcd1d0e8aeef..855531c28f5c6452dd7f0922d21b1893e6246c3b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -38,3 +38,8 @@ export const isValidUrl = (string) => { return false; } }; + +export const removeHTMLTags = (htmlString) => { + const doc = new DOMParser().parseFromString(htmlString, 'text/html'); + return doc.body.textContent || ''; +};