mirador-annotation-editor-video 1.0.0 → 1.0.93

package/demo/src/index.js

@@ -6,7 +6,12 @@ import { manifestsCatalog } from './manifestsCatalog';
 const config = {
   annotation: {
     adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`, 'Anonymous User'),
+    commentTemplate: '<h4>Comment</h4><p>comment content</p>',
     exportLocalStorageAnnotations: false, // display annotation JSON export button
+    tagsSuggestions: ['Mirador', 'Awesome', 'Viewer', 'IIIF'],
+  },
+  annotations: {
+    htmlSanitizationRuleSet: 'liberal',
   },
   catalog: manifestsCatalog,
   debug: true,

package/demo/src/manifestsCatalog.js

@@ -8,13 +8,6 @@ export const manifestsCatalog = [
   { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
   { manifestId: 'https://iiif.io/api/cookbook/recipe/0002-mvm-audio/manifest.json' },
   { manifestId: 'https://files.tetras-libre.fr/dev/vertical_video_with_annot.json' },
-  { manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest' },
-  { manifestId: 'https://coeso.tetras-libre.fr/data/coeso-deliverable/Manual_Network_Configuration.json' },
-  { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
-  { manifestId: 'https://files.tetras-libre.fr/dev/multicanva-video.json' },
-  { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' },
-  { manifestId: 'https://iiif.io/api/cookbook/recipe/0219-using-caption-file/manifest.json' },
-  { manifestId: 'https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/manifest.json' },
-  { manifestId: 'https://iiif.io/api/cookbook/recipe/0065-opera-multiple-canvases/manifest.json' },
-  { manifestId: 'https://iiif.io/api/cookbook/recipe/0064-opera-one-canvas/manifest.json' },
+  { manifestId: 'https://files.tetras-libre.fr/dev/youtube.json' },
+  { manifestId: 'https://files.tetras-libre.fr/dev/peertube.json' },
 ];

package/es/CanvasListItem.js

@@ -49,14 +49,6 @@ const CanvasListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     return annotation;
   }, [props.annotationid]);
 
-  /**
-   * Function to handle mouse hover event.
-   * @function handleMouseHover
-   * @returns {void}
-   */
-  const handleMouseHover = () => {
-    setIsHovering(!isHovering);
-  };
   /**
    * Handle deletion of annotation.
    * @function
@@ -125,8 +117,8 @@ const CanvasListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     t
   } = context;
   return /*#__PURE__*/_react.default.createElement("div", {
-    onMouseEnter: handleMouseHover,
-    onMouseLeave: handleMouseHover,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
     className: "mirador-annotation-list-item",
     ref: ref
   }, isHovering && editable() && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ToggleButtonGroup.default, {
@@ -138,14 +130,13 @@ const CanvasListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       right: 0,
       zIndex: 10000
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  }, context?.config?.debug && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('debugAnnotation')
   }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
     "aria-label": "Debug",
     onClick: () => console.log(annotationData) // TODO Open IIIIF debug window
     ,
-    value: "Debug in console",
-    visible: context.config.debug
+    value: "Debug in console"
   }, /*#__PURE__*/_react.default.createElement(_Settings.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: /*#__PURE__*/_react.default.createElement(_WhoAndWhenFormSection.default, {
       creator: annotationData.creator,

package/es/IIIFUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maeTargetToIiifTarget = exports.convertAnnotationStateToBeSaved = void 0;
+exports.getIIIFTargetFromMaeData = exports.convertAnnotationStateToBeSaved = void 0;
 var _KonvaUtils = require("./annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils");
 var _AnnotationFormUtils = require("./annotationForm/AnnotationFormUtils");
 /**
@@ -31,13 +31,13 @@ function isAnnotationExportableToImage(maeData) {
  * @param playerReferences
  * @returns {Promise<void>}
  */
-const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId,
-// eslint-disable-next-line no-shadow
-playerReferences) => {
+const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId, playerReferences) => {
   const annotationStateForSaving = annotationState;
   if (annotationState.maeData.templateType === _AnnotationFormUtils.TEMPLATE.IIIF_TYPE) {
     return annotationState;
   }
+  console.info('Annotation state to be saved', annotationState);
+  console.info('Annotation state target', annotationState.maeData.target);
 
   // TODO I dont know why this code is here? To clean the object ?
   annotationStateForSaving.maeData.target = {
@@ -47,86 +47,171 @@ playerReferences) => {
     tend: annotationStateForSaving.maeData.target.tend,
     tstart: annotationStateForSaving.maeData.target.tstart
   };
-  if (annotationStateForSaving.maeData.templateType == _AnnotationFormUtils.TEMPLATE.TAGGING_TYPE || annotationStateForSaving.maeData.templateType == _AnnotationFormUtils.TEMPLATE.TEXT_TYPE) {
+  console.info('Annotation state target', annotationState.maeData.target);
+  if (annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.TAGGING_TYPE || annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.TEXT_TYPE || annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.MANIFEST_TYPE || annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.MULTIPLE_BODY_TYPE) {
     // Complex annotation
     if (annotationStateForSaving.maeData.target.drawingState.shapes.length > 0) {
-      // eslint-disable-next-line no-param-reassign
       annotationStateForSaving.maeData.target.svg = await (0, _KonvaUtils.getSvg)(windowId);
     }
   }
+  if (annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.MULTIPLE_BODY_TYPE) {
+    annotationStateForSaving.body = [annotationState.maeData.textBody];
+    annotationStateForSaving.body.push(...annotationState.maeData.tags.map(tag => ({
+      purpose: 'tagging',
+      type: 'TextualBody',
+      value: tag.text,
+      id: tag.id
+    })));
+  }
   if (isAnnotationExportableToImage(annotationStateForSaving.maeData)) {
     annotationStateForSaving.body.id = await (0, _KonvaUtils.getKonvaAsDataURL)(windowId);
     annotationStateForSaving.body.format = 'image/jpg';
     annotationStateForSaving.type = 'Annotation';
   }
-  if (annotationStateForSaving.maeData.templateType == _AnnotationFormUtils.TEMPLATE.IMAGE_TYPE) {
-    if (annotationStateForSaving.maeData.target.drawingState.shapes.length == 1) {
+  if (annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.IMAGE_TYPE) {
+    if (annotationStateForSaving.maeData.target.drawingState.shapes.length === 1) {
       // eslint-disable-next-line max-len
       annotationStateForSaving.body.id = annotationStateForSaving.maeData.target.drawingState.shapes[0].url;
       annotationStateForSaving.type = 'Annotation';
     }
   }
-
-  // eslint-disable-next-line no-param-reassign
   annotationStateForSaving.maeData.target.scale = playerReferences.getMediaTrueHeight() / playerReferences.getDisplayedMediaHeight() * playerReferences.getZoom();
-
-  // eslint-disable-next-line no-param-reassign
-  annotationStateForSaving.target = maeTargetToIiifTarget(annotationStateForSaving.maeData.target, canvas.id, playerReferences.getScale(), windowId);
-  // eslint-disable-next-line no-param-reassign
+  annotationStateForSaving.target = getIIIFTargetFromMaeData(annotationStateForSaving.maeData, canvas.id, windowId, playerReferences.getScale());
   annotationStateForSaving.maeData.target.drawingState = JSON.stringify(annotationStateForSaving.maeData.target.drawingState);
   return annotationStateForSaving;
 };
 
-/** Transform maetarget to IIIF compatible data * */
+/** Get the IIIF target from the annotation state
+ * @param maeData
+ * @param canvasId
+ * @param windowId NEEDED By MAEV
+ * @param playerScale NEEDED By MAEV
+ * @returns {{selector: [{type: string, value},{type: string, value: string}], source}|*|string}
+ */
 exports.convertAnnotationStateToBeSaved = convertAnnotationStateToBeSaved;
-const maeTargetToIiifTarget = (maeTarget, canvasId, playerScale, windowId = null) => {
-  // In case of IIIF target, the user know what he is doing
-  if (maeTarget.templateType === _AnnotationFormUtils.TEMPLATE.IIIF_TYPE) {
-    return maeTarget;
+const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScale = null) => {
+  const maeTarget = maeData.target;
+  const {
+    templateType
+  } = maeData;
+  switch (templateType) {
+    case _AnnotationFormUtils.TEMPLATE.IIIF_TYPE:
+      return maeTarget;
+    case _AnnotationFormUtils.TEMPLATE.KONVA_TYPE:
+      return getIIIFTargetFromKonvaType(maeData, canvasId);
+    case _AnnotationFormUtils.TEMPLATE.IMAGE_TYPE:
+      return getIIIFTargetFromImageType(maeData, canvasId, windowId, playerScale);
+    case _AnnotationFormUtils.TEMPLATE.TAGGING_TYPE:
+    case _AnnotationFormUtils.TEMPLATE.MANIFEST_TYPE:
+    case _AnnotationFormUtils.TEMPLATE.MULTIPLE_BODY_TYPE:
+    case _AnnotationFormUtils.TEMPLATE.TEXT_TYPE:
+      // In some case the target can be simplified in a string
+      if (maeTarget.drawingState.shapes.length === 1 && maeTarget.drawingState.shapes[0].type === _KonvaUtils.SHAPES_TOOL.RECTANGLE) {
+        return getIIIFTargetFromRectangleShape(maeTarget, canvasId, maeTarget.drawingState.shapes[0]);
+      }
+      // On the other case, the target is a SVG
+      console.info('Implement target as SVG/Fragment with shapes');
+      return getIIIFTargetAsFragmentSVGSelector(maeTarget, canvasId);
+    default:
+      return getIIIFTargetFullCanvas(maeData, canvasId);
   }
-  if (maeTarget.templateType !== _AnnotationFormUtils.TEMPLATE.KONVA_TYPE) {
-    // In some case the target can be simplify in a string
-    if (maeTarget.drawingState.shapes.length === 1 && (maeTarget.drawingState.shapes[0].type === 'rectangle' || maeTarget.drawingState.shapes[0].type === 'image')) {
+
+  // Default return
+  return getIIIFTargetFullCanvas(maeData, canvasId);
+};
+
+/**
+ * Get the IIIF target from a Konva annotation (Drawing template)
+ * @param maeData
+ * @param canvasId
+ * @returns {`${string}#${string}`}
+ */
+exports.getIIIFTargetFromMaeData = getIIIFTargetFromMaeData;
+const getIIIFTargetFromKonvaType = (maeData, canvasId) => {
+  // Simplified target for Konva annotation
+  console.log('Implement target as string with Konva annotation');
+  return getIIIFTargetFullCanvas(maeData, canvasId);
+};
+
+/**
+ * Get the IIIF target from an annotation with image template
+ * @param maeData
+ * @param canvasId
+ * @param windowId
+ * @param playerScale
+ * @returns {string}
+ */
+const getIIIFTargetFromImageType = (maeData, canvasId, windowId, playerScale) => {
+  const maeTarget = maeData.target;
+  if (maeTarget.drawingState.shapes.length === 1) {
+    if (maeTarget.drawingState.shapes[0].type === _KonvaUtils.OVERLAY_TOOL.IMAGE) {
       const {
-        // eslint-disable-next-line prefer-const
         x,
-        y,
-        width,
-        height,
-        scaleX,
-        scaleY
+        y
       } = maeTarget.drawingState.shapes[0];
-      console.info('Implement target as string with one shape (reactangle or image)');
-      // Image have not tstart and tend
-      // We use scaleX and scaleY to have the real size of the shape, if it has been resized
-      if (maeTarget.drawingState.shapes[0].type === 'image') {
-        const imageShape = (0, _KonvaUtils.getKonvaShape)(windowId, maeTarget.drawingState.shapes[0].id);
-        console.log('imageShape', imageShape);
-        const widthImage = Math.round(imageShape.attrs.image.width * imageShape.attrs.scaleX / playerScale);
-        const heightImage = Math.round(imageShape.attrs.image.height * imageShape.attrs.scaleY / playerScale);
-        const xImage = Math.round(x / playerScale);
-        const yImage = Math.round(y / playerScale);
-        return `${canvasId}#${maeTarget.tend ? `xywh=${xImage},${yImage},${widthImage},${heightImage}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${xImage},${yImage},${widthImage},${heightImage}`}`;
-      }
-      return `${canvasId}#${maeTarget.tend ? `xywh=${x},${y},${width * scaleX},${height * scaleY}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${x},${y},${width * scaleX},${height * scaleY}`}`;
+      const imageShape = (0, _KonvaUtils.getKonvaShape)(windowId, maeTarget.drawingState.shapes[0].id);
+      const widthImage = Math.round(imageShape.attrs.image.width * imageShape.attrs.scaleX);
+      const heightImage = Math.round(imageShape.attrs.image.height * imageShape.attrs.scaleY);
+      const xImage = Math.round(x);
+      const yImage = Math.round(y);
+      return `${canvasId}#${maeTarget.tend ? `xywh=${xImage},${yImage},${widthImage},${heightImage}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${xImage},${yImage},${widthImage},${heightImage}`}`;
     }
-    // On the other case, the target is a SVG
-    console.info('Implement target as SVG/Fragment with shapes');
-    const fragmentTarget = `${maeTarget.tend ? `xywh=${maeTarget.fullCanvaXYWH}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${maeTarget.fullCanvaXYWH}`}`;
-    return {
-      selector: [{
-        type: 'SvgSelector',
-        value: maeTarget.svg
-      }, {
-        type: 'FragmentSelector',
-        value: `${canvasId}#${fragmentTarget}`
-      }],
-      source: canvasId
-    };
   }
+  // Default return. For example if no image is upload in the annotation
+  return getIIIFTargetFullCanvas(maeData, canvasId);
+};
 
-  // In case of Konva target and for all the other case, target is a string and on full size canvas
-  console.info('Implement target as string on fullSizeCanvas');
+/**
+ * Get the IIIF target from the full canvas
+ * @param maeData
+ * @param canvasId
+ * @returns {`${string}#${string}`}
+ */
+const getIIIFTargetFullCanvas = (maeData, canvasId) => {
+  console.info('Implement target as string on fullSizeCanvas.');
+  const maeTarget = maeData.target;
   return `${canvasId}#${maeTarget.tend ? `xywh=${maeTarget.fullCanvaXYWH}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${maeTarget.fullCanvaXYWH}`}`;
 };
-exports.maeTargetToIiifTarget = maeTargetToIiifTarget;
+
+/**
+ * Get the IIIF target from a rectangle shape
+ * @param maeTarget
+ * @param canvasId
+ * @param shape
+ * @returns {`${string}#${string}`}
+ */
+const getIIIFTargetFromRectangleShape = (maeTarget, canvasId, shape) => {
+  console.info('Implement target as string with one shape (rectangle)');
+  const {
+    x,
+    y,
+    width,
+    height,
+    scaleX,
+    scaleY
+  } = shape;
+
+  // Image have not tstart and tend
+  // We use scaleX and scaleY to have the real size of the shape, if it has been resized
+  return `${canvasId}#${maeTarget.tend ? `xywh=${x},${y},${width * scaleX},${height * scaleY}&t=${maeTarget.tstart},${maeTarget.tend}` : `xywh=${x},${y},${width * scaleX},${height * scaleY}`}`;
+};
+
+/**
+ * Get the IIIF target as a fragment selector with SVG
+ * @param maeTarget
+ * @param canvasId
+ * @returns {{selector: [{type: string, value},{type: string, value: string}], source}}
+ */
+const getIIIFTargetAsFragmentSVGSelector = (maeTarget, canvasId) => {
+  const fragmentTarget = `${maeTarget.tend ? `t=${maeTarget.tstart},${maeTarget.tend}` : ''}`;
+  return {
+    selector: [{
+      type: 'SvgSelector',
+      value: maeTarget.svg
+    }, {
+      type: 'FragmentSelector',
+      value: `${canvasId}#${fragmentTarget}`
+    }],
+    source: canvasId
+  };
+};

package/es/TextEditor.js

@@ -37,10 +37,35 @@ function TextEditor({
       updateAnnotationBody(html);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(StyledReactQuill, {
+  const modules = {
+    toolbar: [[{
+      header: [1, 2, false]
+    }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{
+      list: 'ordered'
+    }, {
+      list: 'bullet'
+    }, {
+      indent: '-1'
+    }, {
+      indent: '+1'
+    }], [{
+      color: []
+    }, {
+      background: []
+    }], ['link', 'image'], ['clean']]
+  };
+  const formats = ['header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'color', 'background'];
+
+  // Data field is needed to set bounds for the editor and avoir tooltip overflow
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-text-editor": "name"
+  }, /*#__PURE__*/_react.default.createElement(StyledReactQuill, {
     value: editorHtml,
     onChange: handleChange,
-    placeholder: "Your text here"
+    placeholder: "Your text here",
+    bounds: "[data-text-editor=\"name\"]",
+    modules: modules,
+    formats: formats
   }));
 }
 TextEditor.propTypes = {

package/es/annotationForm/AnnotationForm.js

@@ -17,6 +17,7 @@ var _AnnotationFormHeader = _interopRequireDefault(require("./AnnotationFormHead
 var _AnnotationFormBody = _interopRequireDefault(require("./AnnotationFormBody"));
 var _IIIFUtils = require("../IIIFUtils");
 require("../118n");
+require("../custom.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,6 +38,16 @@ function AnnotationForm({
   const [templateType, setTemplateType] = (0, _react.useState)(null);
   // eslint-disable-next-line no-underscore-dangle
   const [mediaType, setMediaType] = (0, _react.useState)(playerReferences.getMediaType());
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const [retryCount, setRetryCount] = (0, _react.useState)(0);
+  const [, forceUpdate] = (0, _react.useReducer)(x => x + 1, 0);
+  if (!playerReferences.isInitializedCorrectly() && retryCount < 10) {
+    console.log('AnnotationForm.js: retryCount', retryCount);
+    setTimeout(() => {
+      setRetryCount(retryCount + 1);
+      forceUpdate();
+    }, 100);
+  }
 
   // Add a state to trigger redraw
   const [windowSize, setWindowSize] = (0, _react.useState)({
@@ -90,7 +101,10 @@ function AnnotationForm({
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  if (!playerReferences?.isInitializedCorrectly()) {
+  if (!playerReferences.isInitCorrectly) {
+    playerReferences.isInitializedCorrectly();
+  }
+  if (!playerReferences.isInitCorrectly) {
     return /*#__PURE__*/_react.default.createElement(_CompanionWindow.default, {
       title: t('media_not_supported'),
       windowId: windowId,
@@ -164,6 +178,7 @@ function AnnotationForm({
     annotation: annotation,
     canvases: canvases,
     closeFormCompanionWindow: closeFormCompanionWindow,
+    config: config,
     debugMode: debugMode,
     playerReferences: playerReferences,
     saveAnnotation: saveAnnotation,

package/es/annotationForm/AnnotationFormBody.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AnnotationFormBody;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _material = require("@mui/material");
@@ -17,10 +17,8 @@ var _DrawingTemplate = _interopRequireDefault(require("./DrawingTemplate"));
 var _IIIFTemplate = _interopRequireDefault(require("./IIIFTemplate"));
 var _TaggingTemplate = _interopRequireDefault(require("./TaggingTemplate"));
 require("./debug.css");
-var _AdvancedAnnotationEditor = require("./AdvancedAnnotationEditor");
+var _MultipleBodyTemplate = _interopRequireDefault(require("./MultipleBodyTemplate"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * This function contain the logic for loading annotation and render proper template type
  * * */
@@ -28,6 +26,7 @@ function AnnotationFormBody({
   annotation,
   canvases,
   closeFormCompanionWindow,
+  config,
   debugMode,
   playerReferences,
   saveAnnotation,
@@ -35,11 +34,10 @@ function AnnotationFormBody({
   templateType,
   windowId
 }) {
-  const [showAdvanced, setShowAdvanced] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     direction: "column"
-  }, !showAdvanced && /*#__PURE__*/_react.default.createElement(TemplateContainer, {
+  }, /*#__PURE__*/_react.default.createElement(TemplateContainer, {
     item: true
   }, templateType.id === _AnnotationFormUtils.TEMPLATE.TEXT_TYPE && /*#__PURE__*/_react.default.createElement(_TextCommentTemplate.default, {
     annotation: annotation,
@@ -83,17 +81,15 @@ function AnnotationFormBody({
     saveAnnotation: saveAnnotation,
     t: t,
     windowId: windowId
-  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true
-  }, showAdvanced && /*#__PURE__*/_react.default.createElement(_AdvancedAnnotationEditor.AdvancedAnnotationEditor, {
-    value: annotation,
-    onChange: updatedAnnotation => {
-      // eslint-disable-next-line no-param-reassign
-      annotation = updatedAnnotation;
-    },
+  }), templateType.id === _AnnotationFormUtils.TEMPLATE.MULTIPLE_BODY_TYPE && /*#__PURE__*/_react.default.createElement(_MultipleBodyTemplate.default, {
+    annotation: annotation,
     closeFormCompanionWindow: closeFormCompanionWindow,
+    playerReferences: playerReferences,
     saveAnnotation: saveAnnotation,
-    t: t
+    t: t,
+    windowId: windowId,
+    commentTemplate: config?.annotation?.commentTemplate ?? '',
+    tagsSuggestions: config?.annotation?.tagsSuggestions ?? []
   })), debugMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, playerReferences.getMediaType()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('scale'), ":", playerReferences.getScale()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('zoom'), ":", playerReferences.getZoom()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_true_size'), ":", playerReferences.getMediaTrueWidth(), ' ', "x", playerReferences.getMediaTrueHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('container_size'), ":", playerReferences.getContainerWidth(), ' ', "x", playerReferences.getContainerHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_displayed'), ":", playerReferences.getDisplayedMediaWidth(), ' ', "x", playerReferences.getDisplayedMediaHeight())));
 }
 const TemplateContainer = (0, _styles.styled)(_material.Grid)({
@@ -113,6 +109,8 @@ AnnotationFormBody.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   canvases: _propTypes.default.object.isRequired,
   closeFormCompanionWindow: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  config: _propTypes.default.object.isRequired,
   debugMode: _propTypes.default.bool.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: _propTypes.default.object.isRequired,

package/es/annotationForm/AnnotationFormFooter.js

@@ -46,10 +46,16 @@ function AnnotationFormFooter({
   }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('cancel')
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    sx: {
+      m: 1
+    },
     onClick: closeFormCompanionWindow
   }, t('cancel'))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('save')
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    sx: {
+      m: 1
+    },
     variant: "contained",
     color: "primary",
     type: "submit",

package/es/annotationForm/AnnotationFormOverlay/AnnotationDrawing.js

@@ -22,6 +22,7 @@ function AnnotationDrawing({
   scale,
   setColorToolFromCurrentShape,
   setDrawingState,
+  setToolState,
   tabView,
   toolState,
   updateCurrentShapeInShapes,
@@ -39,16 +40,16 @@ function AnnotationDrawing({
     width
   }]);
   (0, _react.useEffect)(() => {
-    if (toolState.imageEvent?.id) {
+    if (toolState.imageEvent?.id && !drawingState.currentShape) {
       const imageShape = {
         id: (0, _uuid.v4)(),
         rotation: 0,
-        scaleX: 1,
-        scaleY: 1,
+        scaleX: 0.2,
+        scaleY: 0.2,
         type: _KonvaUtils.OVERLAY_TOOL.IMAGE,
         url: toolState.imageEvent.id,
-        x: 30,
-        y: 30
+        x: 60,
+        y: 60
       };
       setDrawingState({
         ...drawingState,
@@ -112,13 +113,21 @@ function AnnotationDrawing({
       const shapesWithoutTheDeleted = drawingState.shapes.filter(shape => shape.id !== drawingState.currentShape.id);
       setDrawingState({
         ...drawingState,
+        currentShape: null,
         shapes: shapesWithoutTheDeleted
       });
+      setToolState({
+        ...toolState,
+        imageEvent: null
+      });
       return;
     }
 
     // release the drawing
     if (e.key === 'Escape') {
+      if (toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.IMAGE) {
+        return;
+      }
       if (toolState.activeTool === _KonvaUtils.SHAPES_TOOL.POLYGON) {
         drawingState.currentShape.points.splice(-2, 2);
         updateCurrentShapeInShapes({
@@ -187,7 +196,7 @@ function AnnotationDrawing({
     const modifiedShape = evt.target.attrs;
     const shape = drawingState.shapes.find(s => s.id === modifiedShape.id);
     Object.assign(shape, modifiedShape);
-    if (shape.type === 'image') {
+    if (shape.type === _KonvaUtils.OVERLAY_TOOL.IMAGE) {
       shape.width = modifiedShape.image.width * modifiedShape.scaleX;
       shape.height = modifiedShape.image.height * modifiedShape.scaleY;
     }
@@ -204,7 +213,7 @@ function AnnotationDrawing({
     Object.assign(shape, editedShape);
     shape.x = editedShape.x;
     shape.y = editedShape.y;
-    if (shape.type === 'image') {
+    if (shape.type === _KonvaUtils.SHAPES_TOOL.IMAGE) {
       shape.width = editedShape.image.width * editedShape.scaleX;
       shape.height = editedShape.image.height * editedShape.scaleY;
     }
@@ -296,7 +305,7 @@ function AnnotationDrawing({
             shapes: [...drawingState.shapes, shape]
           });
           break;
-        case 'text':
+        case _KonvaUtils.OVERLAY_TOOL.TEXT:
           shape = {
             fill: toolState.fillColor,
             fontSize: 20,
@@ -513,6 +522,7 @@ function AnnotationDrawing({
     id: windowId
   }, /*#__PURE__*/_react.default.createElement(_ParentComponent.default, {
     activeTool: toolState.activeTool,
+    baseStrokeWidth: playerReferences.getTargetStrokeWidth(),
     displayMode: displayMode,
     handleDragEnd: handleDragEnd,
     handleDragStart: handleDragStart,
@@ -591,6 +601,7 @@ AnnotationDrawing.propTypes = {
   scale: _propTypes.default.number.isRequired,
   setColorToolFromCurrentShape: _propTypes.default.func.isRequired,
   setDrawingState: _propTypes.default.func.isRequired,
+  setToolState: _propTypes.default.func.isRequired,
   tabView: _propTypes.default.string.isRequired,
   toolState: _propTypes.default.oneOfType(_propTypes.default.string, _propTypes.default.string, _propTypes.default.string, _propTypes.default.oneOfType(_propTypes.default.string), _propTypes.default.string, _propTypes.default.string, _propTypes.default.number).isRequired,
   updateCurrentShapeInShapes: _propTypes.default.func.isRequired,

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -81,16 +81,14 @@ function AnnotationFormOverlayTool({
     deleteShape: deleteShape,
     updateCurrentShapeInShapes: updateCurrentShapeInShapes,
     t: t
-  }))), (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "subFormSectionTitle"
-  }, t('shape')), /*#__PURE__*/_react.default.createElement(_AnnotationFormUtils.StyledToggleButtonGroup, {
+  }))), (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_AnnotationFormUtils.StyledToggleButtonGroup, {
     value: toolState.activeTool // State or props ?
     ,
     exclusive: true,
     onChange: changeTool,
     "aria-label": t('tool_selection'),
     size: "small"
-  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  }, displayMode !== _KonvaUtils.KONVA_MODE.IMAGE && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('rectangle')
   }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
     value: _KonvaUtils.SHAPES_TOOL.RECTANGLE,
@@ -100,7 +98,7 @@ function AnnotationFormOverlayTool({
   }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
     value: _KonvaUtils.SHAPES_TOOL.CIRCLE,
     "aria-label": t('add_a_circle')
-  }, /*#__PURE__*/_react.default.createElement(_RadioButtonUnchecked.default, null))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  }, /*#__PURE__*/_react.default.createElement(_RadioButtonUnchecked.default, null))), displayMode !== _KonvaUtils.KONVA_MODE.IMAGE && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('line')
   }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
     value: _KonvaUtils.SHAPES_TOOL.POLYGON,
@@ -115,7 +113,7 @@ function AnnotationFormOverlayTool({
   }, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
     value: _KonvaUtils.SHAPES_TOOL.ARROW,
     "aria-label": t('add_an_arrow_shape')
-  }, /*#__PURE__*/_react.default.createElement(_ArrowOutward.default, null)))))), toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.DELETE && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ArrowOutward.default, null))))), toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.DELETE && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "overline"
   }, t('delete')), /*#__PURE__*/_react.default.createElement("p", null, t('click_to_delete_shape')), /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: () => deleteShape()