mirador-annotation-editor-video 1.1.3 → 1.1.5

package/demo/src/index.js

@@ -15,7 +15,7 @@ const config = {
       content: '<h4>Comment2</h4><p>comment content</p>',
     }],
     exportLocalStorageAnnotations: false, // display annotation JSON export button
-    tagsSuggestions: ['Mirador', 'Awesome', 'Viewer', 'IIIF'],
+    tagsSuggestions: ['Mirador', 'Awesome', 'Viewer', 'IIIF', 'Template'],
   },
   annotations: {
     htmlSanitizationRuleSet: 'liberal',

package/es/IIIFUtils.js

@@ -60,7 +60,7 @@ const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId
       purpose: 'tagging',
       type: 'TextualBody',
       value: tag.value,
-      id: tag.id
+      id: tag.value
     })));
   }
   if (isAnnotationExportableToImage(annotationStateForSaving.maeData)) {

package/es/annotationForm/MultiTagsInput.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * MultiTagsInput component
  * @param t
- * @param tags
- * @param tagsSuggestions
+ * @param tags as [{ label: string, value: string }]
+ * @param tagsSuggestions as [{ label: string, value: string }]
  * @param setTags
  * @returns {Element}
  * @constructor
@@ -24,15 +24,11 @@ function MultiTagsInput({
   tags,
   tagsSuggestions
 }) {
-  const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
-    label: suggestion,
-    value: suggestion
-  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "formSectionTitle"
   }, t('tags')), /*#__PURE__*/_react.default.createElement(_creatable.default, {
     isMulti: true,
-    options: mappedSuggestionsTags,
+    options: tagsSuggestions,
     value: tags,
     onChange: setTags,
     closeMenuOnSelect: false,

package/es/annotationForm/MultipleBodyTemplate.js

@@ -52,8 +52,8 @@ function MultipleBodyTemplate({
     // We support only one textual body
     maeAnnotation.maeData.textBody = maeAnnotation.body.find(body => body.purpose === 'describing');
     maeAnnotation.maeData.tags = maeAnnotation.body.filter(body => body.purpose === 'tagging').map(tag => ({
-      id: tag.id,
-      text: tag.value
+      label: tag.value,
+      value: tag.value
     }));
   }
   const [annotationState, setAnnotationState] = (0, _react.useState)(maeAnnotation);
@@ -100,6 +100,35 @@ function MultipleBodyTemplate({
     (0, _KonvaUtils.resizeKonvaStage)(windowId, playerReferences.getMediaTrueWidth(), playerReferences.getMediaTrueHeight(), 1 / playerReferences.getScale());
     saveAnnotation(annotationState);
   };
+
+  /**
+   * When the user selects a template, we change text comment and try to add the tag with same name
+   * @param selectedTemplate
+   */
+  const onChangeTemplate = selectedTemplate => {
+    const associatedTag = mappedSuggestionsTags.find(tag => tag.value === selectedTemplate.label);
+    if (associatedTag) {
+      if (!annotationState.maeData.tags.find(tag => tag.value === associatedTag.value)) {
+        setAnnotationState({
+          ...annotationState,
+          maeData: {
+            ...annotationState.maeData,
+            tags: [...annotationState.maeData.tags, associatedTag],
+            textBody: {
+              ...annotationState.maeData.textBody,
+              value: selectedTemplate.value
+            }
+          }
+        });
+        return;
+      }
+    }
+    updateAnnotationTextualBodyValue(selectedTemplate.value);
+  };
+  const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
+    label: suggestion,
+    value: suggestion
+  }));
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     direction: "column",
@@ -110,6 +139,7 @@ function MultipleBodyTemplate({
     commentTemplates: commentTemplate,
     comment: annotationState.maeData.textBody.value,
     setComment: updateAnnotationTextualBodyValue,
+    onChangeTemplate: onChangeTemplate,
     t: t
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
@@ -117,7 +147,7 @@ function MultipleBodyTemplate({
     t: t,
     tags: annotationState.maeData.tags,
     setTags: setTags,
-    tagsSuggestions: tagsSuggestions
+    tagsSuggestions: mappedSuggestionsTags
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_TargetFormSection.default, {

package/es/annotationForm/TextCommentInput.js

@@ -15,12 +15,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @param commentTemplates - The list of comment templates
  * @param comment - The current comment
  * @param setComment - Function to set the comment
+ * @param onChangeTemplate - Function to handle template selection
  * @param t - Translation function
  * @constructor
  */
 function TextCommentInput({
-  commentTemplates,
   comment,
+  commentTemplates,
+  onChangeTemplate,
   setComment,
   t
 }) {
@@ -37,13 +39,14 @@ function TextCommentInput({
   }, /*#__PURE__*/_react.default.createElement(_creatable.default, {
     options: commentTemplates.map(template => ({
       label: template.title,
-      value: template.content,
-      title: template.content // Add title attribute for tooltip
+      title: template.content,
+      // Add title attribute for tooltip
+      value: template.content
     })),
     placeholder: t('useTemplate'),
     onChange: selectedOption => {
       if (selectedOption) {
-        setComment(selectedOption.value);
+        onChangeTemplate(selectedOption);
       }
     },
     isClearable: true,
@@ -66,6 +69,7 @@ TextCommentInput.propTypes = {
   comment: _propTypes.default.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   commentTemplates: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  onChangeTemplate: _propTypes.default.func.isRequired,
   setComment: _propTypes.default.func.isRequired,
   t: _propTypes.default.func.isRequired
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",

package/src/IIIFUtils.js

@@ -73,7 +73,7 @@ export const convertAnnotationStateToBeSaved = async (
       purpose: 'tagging',
       type: 'TextualBody',
       value: tag.value,
-      id: tag.id,
+      id: tag.value,
     })));
   }
 
@@ -155,9 +155,9 @@ export const getIIIFTargetFromMaeData = (
 };
 
 const isSimpleTarget = (shapes) => shapes.length === 1
-    && shapes[0].type === SHAPES_TOOL.RECTANGLE
-    && shapes[0].strokeColor === TARGET_TOOL_STATE.strokeColor
-    && shapes[0].fillColor === TARGET_TOOL_STATE.fillColor;
+  && shapes[0].type === SHAPES_TOOL.RECTANGLE
+  && shapes[0].strokeColor === TARGET_TOOL_STATE.strokeColor
+  && shapes[0].fillColor === TARGET_TOOL_STATE.fillColor;
 
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)

package/src/annotationForm/MultiTagsInput.js

@@ -6,8 +6,8 @@ import CreatableSelect from 'react-select/creatable';
 /**
  * MultiTagsInput component
  * @param t
- * @param tags
- * @param tagsSuggestions
+ * @param tags as [{ label: string, value: string }]
+ * @param tagsSuggestions as [{ label: string, value: string }]
  * @param setTags
  * @returns {Element}
  * @constructor
@@ -18,11 +18,6 @@ export function MultiTagsInput({
   tags,
   tagsSuggestions,
 }) {
-  const mappedSuggestionsTags = tagsSuggestions.map((suggestion) => ({
-    label: suggestion,
-    value: suggestion,
-  }));
-
   return (
     <>
       <Typography variant="formSectionTitle">
@@ -30,7 +25,7 @@ export function MultiTagsInput({
       </Typography>
       <CreatableSelect
         isMulti
-        options={mappedSuggestionsTags}
+        options={tagsSuggestions}
         value={tags}
         onChange={setTags}
         closeMenuOnSelect={false}

package/src/annotationForm/MultipleBodyTemplate.js

@@ -50,8 +50,8 @@ export default function MultipleBodyTemplate(
     maeAnnotation.maeData.textBody = maeAnnotation.body.find((body) => body.purpose === 'describing');
     maeAnnotation.maeData.tags = maeAnnotation.body.filter((body) => body.purpose === 'tagging')
       .map((tag) => ({
-        id: tag.id,
-        text: tag.value,
+        label: tag.value,
+        value: tag.value,
       }));
   }
 
@@ -105,6 +105,37 @@ export default function MultipleBodyTemplate(
     saveAnnotation(annotationState);
   };
 
+  /**
+   * When the user selects a template, we change text comment and try to add the tag with same name
+   * @param selectedTemplate
+   */
+  const onChangeTemplate = (selectedTemplate) => {
+    const associatedTag = mappedSuggestionsTags.find((tag) => tag.value === selectedTemplate.label);
+    if (associatedTag) {
+      if (!annotationState.maeData.tags.find((tag) => tag.value === associatedTag.value)) {
+        setAnnotationState({
+          ...annotationState,
+          maeData: {
+            ...annotationState.maeData,
+            tags: [...annotationState.maeData.tags, associatedTag],
+            textBody: {
+              ...annotationState.maeData.textBody,
+              value: selectedTemplate.value,
+            },
+          },
+        });
+        return;
+      }
+    }
+
+    updateAnnotationTextualBodyValue(selectedTemplate.value);
+  };
+
+  const mappedSuggestionsTags = tagsSuggestions.map((suggestion) => ({
+    label: suggestion,
+    value: suggestion,
+  }));
+
   return (
     <Grid container direction="column" spacing={2}>
       <Grid item>
@@ -112,6 +143,7 @@ export default function MultipleBodyTemplate(
           commentTemplates={commentTemplate}
           comment={annotationState.maeData.textBody.value}
           setComment={updateAnnotationTextualBodyValue}
+          onChangeTemplate={onChangeTemplate}
           t={t}
         />
       </Grid>
@@ -120,7 +152,7 @@ export default function MultipleBodyTemplate(
           t={t}
           tags={annotationState.maeData.tags}
           setTags={setTags}
-          tagsSuggestions={tagsSuggestions}
+          tagsSuggestions={mappedSuggestionsTags}
         />
       </Grid>
       <Grid item>

package/src/annotationForm/TextCommentInput.js

@@ -9,12 +9,14 @@ import TextEditor from '../TextEditor';
  * @param commentTemplates - The list of comment templates
  * @param comment - The current comment
  * @param setComment - Function to set the comment
+ * @param onChangeTemplate - Function to handle template selection
  * @param t - Translation function
  * @constructor
  */
 export function TextCommentInput({
-  commentTemplates,
   comment,
+  commentTemplates,
+  onChangeTemplate,
   setComment,
   t,
 }) {
@@ -30,13 +32,13 @@ export function TextCommentInput({
           <CreatableSelect
             options={commentTemplates.map((template) => ({
               label: template.title,
-              value: template.content,
               title: template.content, // Add title attribute for tooltip
+              value: template.content,
             }))}
             placeholder={t('useTemplate')}
             onChange={(selectedOption) => {
               if (selectedOption) {
-                setComment(selectedOption.value);
+                onChangeTemplate(selectedOption);
               }
             }}
             isClearable
@@ -67,6 +69,7 @@ TextCommentInput.propTypes = {
   comment: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   commentTemplates: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChangeTemplate: PropTypes.func.isRequired,
   setComment: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
 };