mirador-annotation-editor-video 1.1.5 → 1.1.7

package/src/annotationForm/AnnotationFormBody.js

@@ -2,17 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { Grid } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import { TEMPLATE } from './AnnotationFormUtils';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { getConfig } from 'mirador/dist/es/src/state/selectors';
 import TextCommentTemplate from './TextCommentTemplate';
 import ImageCommentTemplate from './ImageCommentTemplate';
 import NetworkCommentTemplate from './NetworkCommentTemplate';
 import DrawingTemplate from './DrawingTemplate';
 import IIIFTemplate from './IIIFTemplate';
 import TaggingTemplate from './TaggingTemplate';
-
-import './debug.css';
 import MultipleBodyTemplate from './MultipleBodyTemplate';
+import './debug.css';
+import { DebugInformation } from './DebugInformation';
+import { TEMPLATE } from './AnnotationFormUtils';
 
 /**
  * This function contain the logic for loading annotation and render proper template type
@@ -22,17 +24,18 @@ export default function AnnotationFormBody(
     annotation,
     canvases,
     closeFormCompanionWindow,
-    config,
-    debugMode,
     playerReferences,
     saveAnnotation,
-    t,
     templateType,
     windowId,
   },
 ) {
+  const { t } = useTranslation();
+
+  const debugMode = useSelector((state) => getConfig(state)).debug ?? false;
   return (
     <Grid container direction="column">
+
       <TemplateContainer item>
         {
           templateType.id === TEMPLATE.TEXT_TYPE && (
@@ -47,32 +50,56 @@ export default function AnnotationFormBody(
           )
         }
         {
-          templateType.id === TEMPLATE.IMAGE_TYPE && (
-            <ImageCommentTemplate
+          templateType.id === TEMPLATE.MULTIPLE_BODY_TYPE && (
+            <MultipleBodyTemplate
               annotation={annotation}
               closeFormCompanionWindow={closeFormCompanionWindow}
               playerReferences={playerReferences}
               saveAnnotation={saveAnnotation}
+              t={t}
               windowId={windowId}
+            />
+          )
+        }
+        {
+          templateType.id === TEMPLATE.TAGGING_TYPE && (
+            <TaggingTemplate
+              annotation={annotation}
+              closeFormCompanionWindow={closeFormCompanionWindow}
+              playerReferences={playerReferences}
+              saveAnnotation={saveAnnotation}
               t={t}
+              windowId={windowId}
             />
           )
         }
         {
-          templateType.id === TEMPLATE.KONVA_TYPE && (
-            <DrawingTemplate
+          templateType.id === TEMPLATE.IIIF_TYPE && (
+            <IIIFTemplate
               annotation={annotation}
+              canvases={canvases}
               closeFormCompanionWindow={closeFormCompanionWindow}
               playerReferences={playerReferences}
               saveAnnotation={saveAnnotation}
               t={t}
+            />
+          )
+        }
+        {
+          templateType.id === TEMPLATE.IMAGE_TYPE && (
+            <ImageCommentTemplate
+              annotation={annotation}
+              closeFormCompanionWindow={closeFormCompanionWindow}
+              playerReferences={playerReferences}
+              saveAnnotation={saveAnnotation}
               windowId={windowId}
+              t={t}
             />
           )
         }
         {
-          templateType.id === TEMPLATE.MANIFEST_TYPE && (
-            <NetworkCommentTemplate
+          templateType.id === TEMPLATE.KONVA_TYPE && (
+            <DrawingTemplate
               annotation={annotation}
               closeFormCompanionWindow={closeFormCompanionWindow}
               playerReferences={playerReferences}
@@ -83,80 +110,24 @@ export default function AnnotationFormBody(
           )
         }
         {
-          templateType.id === TEMPLATE.IIIF_TYPE && (
-            <IIIFTemplate
+          templateType.id === TEMPLATE.MANIFEST_TYPE && (
+            <NetworkCommentTemplate
               annotation={annotation}
-              canvases={canvases}
               closeFormCompanionWindow={closeFormCompanionWindow}
               playerReferences={playerReferences}
               saveAnnotation={saveAnnotation}
               t={t}
+              windowId={windowId}
             />
           )
         }
-        {templateType.id === TEMPLATE.TAGGING_TYPE && (
-          <TaggingTemplate
-            annotation={annotation}
-            closeFormCompanionWindow={closeFormCompanionWindow}
-            playerReferences={playerReferences}
-            saveAnnotation={saveAnnotation}
-            t={t}
-            windowId={windowId}
-          />
-        )}
-        {templateType.id === TEMPLATE.MULTIPLE_BODY_TYPE && (
-          <MultipleBodyTemplate
-            annotation={annotation}
-            closeFormCompanionWindow={closeFormCompanionWindow}
-            playerReferences={playerReferences}
-            saveAnnotation={saveAnnotation}
-            t={t}
-            windowId={windowId}
-            commentTemplate={config?.annotation?.commentTemplates ?? []}
-            tagsSuggestions={config?.annotation?.tagsSuggestions ?? []}
-          />
-        )}
+
       </TemplateContainer>
       {debugMode && (
-        <>
-          <Typography>
-            {playerReferences.getMediaType()}
-          </Typography>
-          <Typography>
-            {t('scale')}
-            :
-            {playerReferences.getScale()}
-          </Typography>
-          <Typography>
-            {t('zoom')}
-            :
-            {playerReferences.getZoom()}
-          </Typography>
-          <Typography>
-            {t('image_true_size')}
-            :
-            {playerReferences.getMediaTrueWidth()}
-            {' '}
-            x
-            {playerReferences.getMediaTrueHeight()}
-          </Typography>
-          <Typography>
-            {t('container_size')}
-            :
-            {playerReferences.getContainerWidth()}
-            {' '}
-            x
-            {playerReferences.getContainerHeight()}
-          </Typography>
-          <Typography>
-            {t('image_displayed')}
-            :
-            {playerReferences.getDisplayedMediaWidth()}
-            {' '}
-            x
-            {playerReferences.getDisplayedMediaHeight()}
-          </Typography>
-        </>
+        <DebugInformation
+          playerReferences={playerReferences}
+          t={t}
+        />
       )}
     </Grid>
   );
@@ -184,16 +155,24 @@ AnnotationFormBody.propTypes = {
     target: PropTypes.string,
   }).isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  canvases: PropTypes.object.isRequired,
+  canvases: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      index: PropTypes.number,
+    }),
+  ).isRequired,
   closeFormCompanionWindow: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  config: PropTypes.object.isRequired,
-  debugMode: PropTypes.bool.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
   playerReferences: PropTypes.object.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   saveAnnotation: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
-  templateType: PropTypes.string.isRequired,
+  templateType: PropTypes.shape(
+    {
+      description: PropTypes.string,
+      icon: PropTypes.element,
+      id: PropTypes.string,
+      label: PropTypes.string,
+    },
+  ).isRequired,
   windowId: PropTypes.string.isRequired,
 };

package/src/annotationForm/AnnotationFormHeader.js

@@ -33,7 +33,7 @@ export default function AnnotationFormHeader(
       <Grid item>
         {annotation.id == null
         && (
-          <MiradorMenuButton ariaLabel="back" TooltipProps="back">
+          <MiradorMenuButton aria-label="back" TooltipProps="back">
             <ChevronLeftIcon onClick={goBackToTemplateSelection} />
           </MiradorMenuButton>
         )}
@@ -62,12 +62,12 @@ AnnotationFormHeader.propTypes = {
     PropTypes.string,
   ]).isRequired,
   setCommentingType: PropTypes.func.isRequired,
-  templateType: PropTypes.arrayOf(PropTypes.shape(
+  templateType: PropTypes.shape(
     {
       description: PropTypes.string,
       icon: PropTypes.element,
       id: PropTypes.string,
       label: PropTypes.string,
     },
-  )).isRequired,
+  ).isRequired,
 };

package/src/annotationForm/AnnotationFormOverlay/AnnotationDrawing.js

@@ -470,6 +470,7 @@ export default function AnnotationDrawing(
             pos.y = drawingState.currentShape.y;
           }
 
+          // eslint-disable-next-line no-case-declarations
           const radius = Math.sqrt(
             (pos.x - drawingState.currentShape.x) ** 2
             + (pos.y - drawingState.currentShape.y) ** 2,
@@ -644,17 +645,10 @@ AnnotationDrawing.propTypes = {
   setDrawingState: PropTypes.func.isRequired,
   setToolState: PropTypes.func.isRequired,
   tabView: PropTypes.string.isRequired,
-  toolState: PropTypes.oneOfType(
-    PropTypes.string,
-    PropTypes.string,
-    PropTypes.string,
-    PropTypes.oneOfType(
-      PropTypes.string,
-    ),
-    PropTypes.string,
+  toolState: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-  ).isRequired,
+  ]).isRequired,
   updateCurrentShapeInShapes: PropTypes.func.isRequired,
   updateScale: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlay.js

@@ -177,7 +177,7 @@ AnnotationFormOverlay.propTypes = {
   t: PropTypes.func.isRequired,
   toolState: PropTypes.shape({
     activeTool: PropTypes.string.isRequired,
-    closedMode: PropTypes.bool.isRequired,
+    closedMode: PropTypes.string.isRequired,
     fillColor: PropTypes.string.isRequired,
     image: PropTypes.shape({
       id: PropTypes.string,

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -110,6 +110,7 @@ function AnnotationFormOverlayTool({
             onChange={changeTool}
             aria-label={t('tool_selection')}
             size="small"
+            data-testid="tool_selection"
           >
             {(displayMode !== KONVA_MODE.IMAGE) && (
               <Tooltip title={t('rectangle')}>
@@ -198,7 +199,7 @@ AnnotationFormOverlayTool.propTypes = {
   t: PropTypes.func.isRequired,
   toolState: PropTypes.shape({
     activeTool: PropTypes.string.isRequired,
-    closedMode: PropTypes.bool.isRequired,
+    closedMode: PropTypes.string.isRequired,
     fillColor: PropTypes.string.isRequired,
     image: PropTypes.shape({
       id: PropTypes.string,

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -3,6 +3,8 @@ import Typography from '@mui/material/Typography';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
+import { useSelector } from 'react-redux';
+import { getConfig } from 'mirador/dist/es/src/state/selectors';
 import ImageFormField from './ImageFormField';
 import {
   isShapesTool,
@@ -136,10 +138,14 @@ function AnnotationFormOverlayToolOptions({
       },
     );
   };
+
+  const annotationConfig = useSelector((state) => getConfig(state)).annotation;
+  const allowTargetShapesStyling = annotationConfig?.allowTargetShapesStyling === true;
+
   return (
     <div>
       {
-        ((displayMode === KONVA_MODE.DRAW || displayMode === KONVA_MODE.TARGET)
+        ((displayMode === KONVA_MODE.DRAW || (allowTargetShapesStyling && displayMode === KONVA_MODE.TARGET))
           && isShapesTool(toolState.activeTool)) && (
           <Grid container>
             <ColorPicker
@@ -151,7 +157,6 @@ function AnnotationFormOverlayToolOptions({
               openChooseColor={openChooseColor}
               openChooseLineWeight={openChooseLineWeight}
               updateColor={updateColor}
-              t={t}
               toolOptions={toolOptions}
               toolState={toolState}
             />
@@ -185,7 +190,6 @@ function AnnotationFormOverlayToolOptions({
                     handleLineWeightSelect={handleLineWeightSelect}
                     openChooseColor={openChooseColor}
                     openChooseLineWeight={openChooseLineWeight}
-                    t={t}
                     toolOptions={toolOptions}
                     toolState={toolState}
                     updateColor={updateColor}
@@ -233,8 +237,8 @@ AnnotationFormOverlayToolOptions.propTypes = {
   t: PropTypes.func.isRequired,
   toolState: PropTypes.shape({
     activeTool: PropTypes.string.isRequired,
-    closedMode: PropTypes.bool.isRequired,
-    fillColor: PropTypes.string.isRequired,
+    closedMode: PropTypes.string.isRequired,
+    fillColor: PropTypes.string,
     image: PropTypes.shape({
       id: PropTypes.string,
     }),
@@ -242,7 +246,7 @@ AnnotationFormOverlayToolOptions.propTypes = {
     strokeWidth: PropTypes.number.isRequired,
     text: PropTypes.string,
     textBody: PropTypes.string,
-    updateColor: PropTypes.func.isRequired,
+    updateColor: PropTypes.func,
   }).isRequired,
 };
 

package/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js

@@ -9,6 +9,17 @@ export function getKonvaStage(windowId) {
   return window.Konva.stages.find((s) => s.attrs.id === windowId);
 }
 
+/**
+ *
+ * @param windowId
+ * @param shapeId
+ * @returns {Node}
+ */
+export function getKonvaShape(windowId, shapeId) {
+  const stage = getKonvaStage(windowId);
+  return stage.findOne(`#${shapeId}`);
+}
+
 /**
  * Resize the Konva stage and redraw it
  * @param windowId
@@ -16,8 +27,16 @@ export function getKonvaStage(windowId) {
  * @param height
  * @param scale
  * @param hideAfterResize
+ * @param scaleStrokeForPNGExport
  */
-export function resizeKonvaStage(windowId, width, height, scale, hideAfterResize = true, scaleStrokeForPNGExport = false) {
+export function resizeKonvaStage(
+  windowId,
+  width,
+  height,
+  scale,
+  hideAfterResize = true,
+  scaleStrokeForPNGExport = false,
+) {
   hideKonvaStage();
   const stage = getKonvaStage(windowId);
   stage.width(width);
@@ -123,28 +142,15 @@ export async function getSvg(windowId) {
   return svg;
 }
 
-/**
- *
- * @param windowId
- * @param shapeId
- * @returns {Node}
- */
-export function getKonvaShape(windowId, shapeId) {
-  const stage = getKonvaStage(windowId);
-  const shape = stage.findOne(`#${shapeId}`);
-  return shape;
-}
-
 /** Export the stage as a JPG image in a data url */
 export async function getKonvaAsDataURL(windowId) {
   const stage = getKonvaStage(windowId);
   stage.find('Transformer')
     .forEach((node) => node.visible(false));
-  const dataURL = stage.toDataURL({
+  return stage.toDataURL({
     mimeType: 'image/jpg',
     quality: 0.2,
   });
-  return dataURL;
 }
 
 export const defaultLineWeightChoices = [0, 2, 5, 10, 20, 50];
@@ -186,22 +192,21 @@ export function isShapesTool(activeTool) {
 export const rgbaToObj = (rgba = 'rgba(255,255,255,0.5)') => {
   const rgbaArray = rgba.split(',');
   return {
-    // eslint-disable-next-line sort-keys
+    /* eslint-disable sort-keys */
     r: Number(rgbaArray[0].split('(')[1]),
-    // eslint-disable-next-line sort-keys
     g: Number(rgbaArray[1]),
-    // eslint-disable-next-line sort-keys
     b: Number(rgbaArray[2]),
-    // eslint-disable-next-line sort-keys
     a: Number(rgbaArray[3].split(')')[0]),
+    /* eslint-enable sort-keys */
   };
 };
 
 /** Convert color object to rgba string */
 export const objToRgba = (obj = {
-  // eslint-disable-next-line sort-keys
+  /* eslint-disable sort-keys */
   r: 255,
   g: 255,
   b: 255,
   a: 0.5,
+  /* eslint-enable sort-keys */
 }) => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`;

package/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ColorPicker.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 import {
   ClickAwayListener,
   Divider,
@@ -21,6 +22,7 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import * as Proptypes from 'prop-types';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { defaultLineWeightChoices, OVERLAY_TOOL } from '../KonvaUtils';
 
 /** Display color picker and border * */
@@ -33,12 +35,13 @@ export default function ColorPicker(
     handleLineWeightSelect,
     openChooseColor,
     openChooseLineWeight,
-    t,
     toolOptions,
     toolState,
     updateColor,
   },
 ) {
+  const { t } = useTranslation();
+
   return (
     <Grid container spacing={1}>
       <Grid item xs={12}>
@@ -160,18 +163,17 @@ ColorPicker.propTypes = {
   handleLineWeightSelect: Proptypes.func.isRequired,
   openChooseColor: Proptypes.func.isRequired,
   openChooseLineWeight: Proptypes.func.isRequired,
-  t: Proptypes.func.isRequired,
-  toolOptions: Proptypes.oneOfType(
-    Proptypes.bool,
-    Proptypes.string,
-    Proptypes.bool,
-    Proptypes.string,
-    Proptypes.string,
-  ).isRequired,
+  toolOptions: Proptypes.shape({
+    colorPopoverOpen: PropTypes.bool,
+    currentColorType: PropTypes.any,
+    lineWeightPopoverOpen: PropTypes.bool,
+    popoverAnchorEl: PropTypes.any,
+    popoverLineWeightAnchorEl: PropTypes.any,
+  }).isRequired,
   toolState: PropTypes.shape({
     activeTool: PropTypes.string.isRequired,
-    closedMode: PropTypes.bool.isRequired,
-    fillColor: PropTypes.string.isRequired,
+    closedMode: PropTypes.string.isRequired,
+    fillColor: PropTypes.string,
     image: PropTypes.shape({
       id: PropTypes.string,
     }),
@@ -179,7 +181,7 @@ ColorPicker.propTypes = {
     strokeWidth: PropTypes.number.isRequired,
     text: PropTypes.string,
     textBody: PropTypes.string,
-    updateColor: PropTypes.func.isRequired,
+    updateColor: PropTypes.func,
   }).isRequired,
   updateColor: Proptypes.func.isRequired,
 };

package/src/annotationForm/AnnotationFormTemplateSelector.js

@@ -4,6 +4,7 @@ import { styled } from '@mui/material/styles';
 import {
   Card, CardActionArea, CardContent, Grid,
 } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { MEDIA_TYPES, TEMPLATE_TYPES } from './AnnotationFormUtils';
 /**
@@ -13,11 +14,11 @@ import { MEDIA_TYPES, TEMPLATE_TYPES } from './AnnotationFormUtils';
 export default function AnnotationFormTemplateSelector({
   mediaType,
   setCommentingType,
-  t,
 }) {
+  const { t } = useTranslation();
   /**
-     * Sets the comment type for the application.
-     */
+   * Sets the comment type for the application.
+  */
   const setCommentType = (template) => setCommentingType(template);
   const templates = TEMPLATE_TYPES(t);
 
@@ -53,9 +54,7 @@ export default function AnnotationFormTemplateSelector({
     </CardContainer>
   );
 }
-const CardContainer = styled('div')(({
-  theme,
-}) => ({
+const CardContainer = styled('div')(() => ({
   display: 'flex',
   flexDirection: 'column',
   gap: '30px',
@@ -76,5 +75,4 @@ const DescriptionCardTypography = styled(Typography, { name: 'CompanionWindow',
 AnnotationFormTemplateSelector.propTypes = {
   mediaType: PropTypes.string.isRequired,
   setCommentingType: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
 };

package/src/annotationForm/AnnotationFormUtils.js

@@ -20,12 +20,14 @@ export const TEMPLATE = {
   TEXT_TYPE: 'text',
 };
 
+// TODO Move in MediaUtils
 export const MEDIA_TYPES = {
   AUDIO: 'Audio',
   IMAGE: 'Image',
   UNKNOWN: 'Unknown',
   VIDEO: 'Video',
 };
+
 /** Return template type * */
 export const getTemplateType = (t, templateType) => TEMPLATE_TYPES(t)
   .find(

package/src/annotationForm/DebugInformation.js

@@ -0,0 +1,59 @@
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * DebugInformation component to display media and container details
+ * @param playerReferences
+ * @returns {Element}
+ * @constructor
+ */
+export function DebugInformation({ playerReferences, t }) {
+  return (
+    <>
+      <Typography>
+        {playerReferences.getMediaType()}
+      </Typography>
+      <Typography>
+        {t('scale')}
+        :
+        {playerReferences.getScale()}
+      </Typography>
+      <Typography>
+        {t('zoom')}
+        :
+        {playerReferences.getZoom()}
+      </Typography>
+      <Typography>
+        {t('image_true_size')}
+        :
+        {playerReferences.getMediaTrueWidth()}
+        {' '}
+        x
+        {playerReferences.getMediaTrueHeight()}
+      </Typography>
+      <Typography>
+        {t('container_size')}
+        :
+        {playerReferences.getContainerWidth()}
+        {' '}
+        x
+        {playerReferences.getContainerHeight()}
+      </Typography>
+      <Typography>
+        {t('image_displayed')}
+        :
+        {playerReferences.getDisplayedMediaWidth()}
+        {' '}
+        x
+        {playerReferences.getDisplayedMediaHeight()}
+      </Typography>
+    </>
+  );
+}
+
+DebugInformation.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  playerReferences: PropTypes.any.isRequired,
+  t: PropTypes.func.isRequired,
+};

package/src/annotationForm/MultiTagsInput.js

@@ -43,5 +43,8 @@ MultiTagsInput.propTypes = {
   t: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   tags: PropTypes.any.isRequired,
-  tagsSuggestions: PropTypes.arrayOf(PropTypes.string).isRequired,
+  tagsSuggestions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string,
+  })).isRequired,
 };