mirador-annotation-editor-video 1.0.81 → 1.0.94

package/demo/src/index.js

@@ -6,7 +6,9 @@ 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',
@@ -57,10 +59,7 @@ const config = {
     defaultSideBarPanel: 'annotations',
     sideBarOpenByDefault: true,
   },
-  windows: [
-    { manifestId: 'https://files.tetras-libre.fr/dev/sun-400x400.json' },
-    { manifestId: 'https://resource.arvest.app/6b665140d80c98444a02f142c1a8fcb42d201940/8000x6000-Pogacar.json' },
-  ],
+  windows: [],
 };
 
 mirador.viewer(config, [...annotationPlugins]);

package/demo/src/manifestsCatalog.js

@@ -8,14 +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://resource.arvest.app/6b665140d80c98444a02f142c1a8fcb42d201940/8000x6000-Pogacar.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

@@ -130,14 +130,13 @@ const CanvasListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       right: 0,
       zIndex: 10000
     }
-  }, context.config?.debug && /*#__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

@@ -36,6 +36,8 @@ const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId
   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 = {
@@ -46,12 +48,21 @@ const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId
     tstart: annotationStateForSaving.maeData.target.tstart
   };
   console.info('Annotation state target', annotationState.maeData.target);
-  if (annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.TAGGING_TYPE || annotationStateForSaving.maeData.templateType === _AnnotationFormUtils.TEMPLATE.TEXT_TYPE) {
+  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) {
       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';
@@ -64,8 +75,6 @@ const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId
       annotationStateForSaving.type = 'Annotation';
     }
   }
-
-  // eslint-disable-next-line no-param-reassign
   annotationStateForSaving.maeData.target.scale = playerReferences.getMediaTrueHeight() / playerReferences.getDisplayedMediaHeight() * playerReferences.getZoom();
   annotationStateForSaving.target = getIIIFTargetFromMaeData(annotationStateForSaving.maeData, canvas.id, windowId, playerReferences.getScale());
   annotationStateForSaving.maeData.target.drawingState = JSON.stringify(annotationStateForSaving.maeData.target.drawingState);
@@ -88,19 +97,21 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
   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:
-      // Note, tagging or Manifest network template
-      if (templateType === _AnnotationFormUtils.TEMPLATE.TAGGING_TYPE || templateType === _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);
+      // 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]);
       }
-      break;
+      // 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);
   }
@@ -110,12 +121,52 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
 };
 
 /**
- * Get the IIIF target from the full canvas
+ * 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 {
+        x,
+        y
+      } = maeTarget.drawingState.shapes[0];
+      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}`}`;
+    }
+  }
+  // Default return. For example if no image is upload in the annotation
+  return getIIIFTargetFullCanvas(maeData, canvasId);
+};
+
+/**
+ * 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;

package/es/annotationForm/AnnotationForm.js

@@ -38,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)({
@@ -91,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,
@@ -165,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/AnnotationFormOverlay/AnnotationDrawing.js

@@ -46,7 +46,7 @@ function AnnotationDrawing({
         rotation: 0,
         scaleX: 0.2,
         scaleY: 0.2,
-        type: _KonvaUtils.SHAPES_TOOL.IMAGE,
+        type: _KonvaUtils.OVERLAY_TOOL.IMAGE,
         url: toolState.imageEvent.id,
         x: 60,
         y: 60
@@ -196,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 === _KonvaUtils.SHAPES_TOOL.IMAGE) {
+    if (shape.type === _KonvaUtils.OVERLAY_TOOL.IMAGE) {
       shape.width = modifiedShape.image.width * modifiedShape.scaleX;
       shape.height = modifiedShape.image.height * modifiedShape.scaleY;
     }
@@ -522,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,

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -88,7 +88,7 @@ function AnnotationFormOverlayTool({
     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,
@@ -98,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,

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

@@ -32,7 +32,7 @@ function getKonvaStage(windowId) {
  * @param scale
  * @param hideAfterResize
  */
-function resizeKonvaStage(windowId, width, height, scale, hideAfterResize = true) {
+function resizeKonvaStage(windowId, width, height, scale, hideAfterResize = true, scaleStrokeForPNGExport = false) {
   hideKonvaStage();
   const stage = getKonvaStage(windowId);
   stage.width(width);
@@ -41,6 +41,20 @@ function resizeKonvaStage(windowId, width, height, scale, hideAfterResize = true
     x: scale,
     y: scale
   });
+  if (scaleStrokeForPNGExport) {
+    stage.find('Rect').map(node => {
+      node.strokeWidth(node.strokeWidth() * scale);
+    });
+    stage.find('Line').map(node => {
+      node.strokeWidth(node.strokeWidth() * scale);
+    });
+    stage.find('Circle').map(node => {
+      node.strokeWidth(node.strokeWidth() * scale);
+    });
+    stage.find('Ellipse').map(node => {
+      node.strokeWidth(node.strokeWidth() * scale);
+    });
+  }
   if (!hideAfterResize) {
     showKonvaStage();
   }
@@ -69,7 +83,7 @@ function showKonvaStage() {
  */
 async function getSvg(windowId) {
   const stage = getKonvaStage(windowId);
-  const exportStrokeWidth = 1;
+  const exportStrokeWidth = 3;
   stage.find('Transformer').forEach(node => node.destroy());
 
   /**
@@ -97,6 +111,9 @@ async function getSvg(windowId) {
   stage.find('Circle').map(node => {
     cleanNode(node);
   });
+  stage.find('Ellipse').map(node => {
+    cleanNode(node);
+  });
   let svg = await (0, _reactKonvaToSvg.exportStageSVG)(stage, false); // TODO clean
   svg = svg.replaceAll('"', '\'');
   return svg;
@@ -117,9 +134,10 @@ function getKonvaShape(windowId, shapeId) {
 /** Export the stage as a JPG image in a data url */
 async function getKonvaAsDataURL(windowId) {
   const stage = getKonvaStage(windowId);
+  stage.find('Transformer').forEach(node => node.visible(false));
   const dataURL = stage.toDataURL({
     mimeType: 'image/jpg',
-    quality: 0.1
+    quality: 0.2
   });
   return dataURL;
 }

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/CircleNode.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactKonva = require("react-konva");
+var _KonvaUtils = require("../KonvaUtils");
 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; }
@@ -16,6 +17,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 function CircleNode({
   activeTool,
+  baseStrokeWidth,
+  displayMode,
   handleDragEnd,
   handleDragStart,
   isSelected,
@@ -59,7 +62,7 @@ function CircleNode({
     // This line cause SVG export error
     ,
     strokeScaleEnabled: false,
-    strokeWidth: shape.strokeWidth,
+    strokeWidth: displayMode === _KonvaUtils.KONVA_MODE.TARGET ? baseStrokeWidth : shape.strokeWidth,
     x: shape.x,
     y: shape.y
   }), /*#__PURE__*/_react.default.createElement(_reactKonva.Transformer, {
@@ -69,6 +72,8 @@ function CircleNode({
 }
 CircleNode.propTypes = {
   activeTool: _propTypes.default.string.isRequired,
+  baseStrokeWidth: _propTypes.default.number.isRequired,
+  displayMode: _propTypes.default.string.isRequired,
   handleDragEnd: _propTypes.default.func.isRequired,
   handleDragStart: _propTypes.default.func.isRequired,
   isSelected: _propTypes.default.bool.isRequired,

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/EllipseNode.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactKonva = require("react-konva");
+var _KonvaUtils = require("../KonvaUtils");
 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; }
@@ -16,6 +17,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 function EllipseNode({
   activeTool,
+  baseStrokeWidth,
+  displayMode,
   handleDragEnd,
   isSelected,
   onShapeClick,
@@ -58,7 +61,7 @@ function EllipseNode({
     scaleY: shape.scaleY,
     stroke: shape.stroke,
     strokeScaleEnabled: false,
-    strokeWidth: shape.strokeWidth,
+    strokeWidth: displayMode === _KonvaUtils.KONVA_MODE.TARGET ? baseStrokeWidth : shape.strokeWidth,
     x: shape.x,
     y: shape.y
   }), /*#__PURE__*/_react.default.createElement(_reactKonva.Transformer, {
@@ -68,6 +71,8 @@ function EllipseNode({
 }
 EllipseNode.propTypes = {
   activeTool: _propTypes.default.string.isRequired,
+  baseStrokeWidth: _propTypes.default.number.isRequired,
+  displayMode: _propTypes.default.string.isRequired,
   handleDragEnd: _propTypes.default.func.isRequired,
   handleDragStart: _propTypes.default.func.isRequired,
   isSelected: _propTypes.default.bool.isRequired,

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /** Loads Konva and display in function of their type */
 function ParentComponent({
   activeTool,
+  baseStrokeWidth,
   displayMode,
   handleDragEnd,
   handleDragStart,
@@ -62,7 +63,8 @@ function ParentComponent({
           onTransform,
           shape,
           key: shape.id,
-          displayMode: displayMode
+          displayMode: displayMode,
+          baseStrokeWidth: baseStrokeWidth
         });
       case 'text':
         return /*#__PURE__*/_react.default.createElement(_TextNode.default, {
@@ -85,7 +87,9 @@ function ParentComponent({
           onShapeClick: handleShapeClick,
           onTransform,
           shape,
-          key: shape.id
+          key: shape.id,
+          displayMode: displayMode,
+          baseStrokeWidth: baseStrokeWidth
         });
       case _KonvaUtils.SHAPES_TOOL.CIRCLE:
         return /*#__PURE__*/_react.default.createElement(_CircleNode.default, {
@@ -96,7 +100,9 @@ function ParentComponent({
           onShapeClick: handleShapeClick,
           onTransform,
           shape,
-          key: shape.id
+          key: shape.id,
+          displayMode: displayMode,
+          baseStrokeWidth: baseStrokeWidth
         });
       case _KonvaUtils.SHAPES_TOOL.FREEHAND:
         return /*#__PURE__*/_react.default.createElement(_Freehand.default, {
@@ -118,7 +124,9 @@ function ParentComponent({
           onShapeClick: handleShapeClick,
           onTransform,
           shape,
-          key: shape.id
+          key: shape.id,
+          displayMode: displayMode,
+          baseStrokeWidth: baseStrokeWidth
         });
       case _KonvaUtils.SHAPES_TOOL.ARROW:
         return /*#__PURE__*/_react.default.createElement(_ArrowNode.default, {
@@ -148,6 +156,7 @@ function ParentComponent({
 }
 ParentComponent.propTypes = {
   activeTool: _propTypes.default.string.isRequired,
+  baseStrokeWidth: _propTypes.default.number.isRequired,
   displayMode: _propTypes.default.string.isRequired,
   handleDragEnd: _propTypes.default.func.isRequired,
   handleDragStart: _propTypes.default.func.isRequired,

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Polygon.js

@@ -7,12 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactKonva = require("react-konva");
+var _KonvaUtils = require("../KonvaUtils");
 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; }
 /** FreeHand shape displaying */
 function Polygon({
   activeTool,
+  baseStrokeWidth,
+  displayMode,
   handleDragEnd,
   handleDragStart,
   isSelected,
@@ -61,7 +64,7 @@ function Polygon({
     // This line cause SVG export error
     ,
     strokeScaleEnabled: false,
-    strokeWidth: shape.strokeWidth,
+    strokeWidth: displayMode === _KonvaUtils.KONVA_MODE.TARGET ? baseStrokeWidth : shape.strokeWidth,
     x: shape.x,
     y: shape.y
   }), /*#__PURE__*/_react.default.createElement(_reactKonva.Transformer, {
@@ -71,6 +74,8 @@ function Polygon({
 }
 Polygon.propTypes = {
   activeTool: _propTypes.default.string.isRequired,
+  baseStrokeWidth: _propTypes.default.number.isRequired,
+  displayMode: _propTypes.default.string.isRequired,
   handleDragEnd: _propTypes.default.func.isRequired,
   handleDragStart: _propTypes.default.func.isRequired,
   isSelected: _propTypes.default.bool.isRequired,

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Rectangle.js

@@ -17,6 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 function Rectangle({
   activeTool,
+  baseStrokeWidth,
   displayMode,
   handleDragEnd,
   handleDragStart,
@@ -59,7 +60,7 @@ function Rectangle({
     scaleY: shape.scaleY,
     stroke: shape.stroke,
     strokeScaleEnabled: false,
-    strokeWidth: shape.strokeWidth,
+    strokeWidth: displayMode === _KonvaUtils.KONVA_MODE.TARGET ? baseStrokeWidth : shape.strokeWidth,
     width: shape.width,
     x: shape.x || 0,
     y: shape.y || 0

package/es/annotationForm/AnnotationFormUtils.js

@@ -26,7 +26,8 @@ const TEMPLATE = exports.TEMPLATE = {
   KONVA_TYPE: 'konva',
   MANIFEST_TYPE: 'manifest',
   TAGGING_TYPE: 'tagging',
-  TEXT_TYPE: 'text'
+  TEXT_TYPE: 'text',
+  MULTIPLE_BODY_TYPE: 'multiple_body'
 };
 const MEDIA_TYPES = exports.MEDIA_TYPES = {
   AUDIO: 'Audio',
@@ -42,6 +43,18 @@ const getTemplateType = (t, templateType) => TEMPLATE_TYPES(t).find(type => type
  */
 exports.getTemplateType = getTemplateType;
 const TEMPLATE_TYPES = t => [{
+  description: t('MultiBodyTemplate'),
+  // TODO
+  icon: /*#__PURE__*/_react.default.createElement(_TextFields.default, null),
+  id: TEMPLATE.MULTIPLE_BODY_TYPE,
+  isCompatibleWithTemplate: mediaType => {
+    if (mediaType === MEDIA_TYPES.VIDEO) return true;
+    if (mediaType === MEDIA_TYPES.IMAGE) return true;
+    if (mediaType === MEDIA_TYPES.AUDIO) return false;
+    return false;
+  },
+  label: t('MultiBodyTemplate') // TODO
+}, {
   description: t('textual_note_with_target'),
   icon: /*#__PURE__*/_react.default.createElement(_TextFields.default, null),
   id: TEMPLATE.TEXT_TYPE,
@@ -101,8 +114,7 @@ const TEMPLATE_TYPES = t => [{
   id: TEMPLATE.MANIFEST_TYPE,
   isCompatibleWithTemplate: mediaType => {
     if (mediaType === MEDIA_TYPES.VIDEO) return true;
-    // Mirador doesn't support annotation from an image
-    if (mediaType === MEDIA_TYPES.IMAGE) return false;
+    if (mediaType === MEDIA_TYPES.IMAGE) return true;
     if (mediaType === MEDIA_TYPES.AUDIO) return false;
     return false;
   },

package/es/annotationForm/DrawingTemplate.js

@@ -66,7 +66,7 @@ function DrawingTemplate({
 
   /** save Function * */
   const saveFunction = () => {
-    (0, _KonvaUtils.resizeKonvaStage)(windowId, playerReferences.getMediaTrueWidth(), playerReferences.getMediaTrueHeight(), 1 / playerReferences.getScale());
+    (0, _KonvaUtils.resizeKonvaStage)(windowId, playerReferences.getMediaTrueWidth(), playerReferences.getMediaTrueHeight(), 1 / playerReferences.getScale(), true, true);
     // Save drawing state in annotation
     annotationState.maeData.target.drawingState = drawingState;
     // Unselect current shape
@@ -191,12 +191,14 @@ function DrawingTemplate({
     playerReferences: playerReferences,
     scale: scale,
     setColorToolFromCurrentShape: setColorToolFromCurrentShape,
+    setToolState: setToolState,
     setDrawingState: setDrawingState,
     tabView: viewTool,
     toolState: toolState,
     updateCurrentShapeInShapes: updateCurrentShapeInShapes,
     updateScale: updateScale,
-    windowId: windowId
+    windowId: windowId,
+    setToolState: setToolState
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_AnnotationFormOverlay.default, {