mirador-annotation-editor-video 1.1.0 → 1.1.2

package/es/IIIFUtils.js

@@ -106,7 +106,7 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
     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) {
+      if (isSimpleTarget(maeTarget.drawingState.shapes)) {
         return getIIIFTargetFromRectangleShape(maeTarget, canvasId, maeTarget.drawingState.shapes[0]);
       }
       // On the other case, the target is a SVG
@@ -119,6 +119,8 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
   // Default return
   return getIIIFTargetFullCanvas(maeData, canvasId);
 };
+exports.getIIIFTargetFromMaeData = getIIIFTargetFromMaeData;
+const isSimpleTarget = shapes => shapes.length === 1 && shapes[0].type === _KonvaUtils.SHAPES_TOOL.RECTANGLE && shapes[0].strokeColor === _AnnotationFormUtils.TARGET_TOOL_STATE.strokeColor && shapes[0].fillColor === _AnnotationFormUtils.TARGET_TOOL_STATE.fillColor;
 
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)
@@ -126,7 +128,6 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
  * @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');

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -55,7 +55,7 @@ function AnnotationFormOverlayTool({
       activeTool: _KonvaUtils.SHAPES_TOOL.RECTANGLE
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.EDIT && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentShape && displayMode === _KonvaUtils.KONVA_MODE.DRAW && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.EDIT && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (currentShape && displayMode === _KonvaUtils.KONVA_MODE.DRAW || currentShape && displayMode === _KonvaUtils.KONVA_MODE.TARGET) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subFormSectionTitle"
   }, t('selected_object')), /*#__PURE__*/_react.default.createElement(_AnnotationFormOverlayToolOptions.default, {
     t: t,
@@ -72,7 +72,8 @@ function AnnotationFormOverlayTool({
       text: currentShape.text
     },
     setToolState: customUpdateToolState,
-    displayMode: displayMode
+    displayMode: displayMode,
+    currentShape: currentShape
   })), displayMode === _KonvaUtils.KONVA_MODE.DRAW && shapes.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subFormSectionTitle"
   }, t('object_list')), /*#__PURE__*/_react.default.createElement(_ShapesList.default, {

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -136,7 +136,7 @@ function AnnotationFormOverlayToolOptions({
       text
     });
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, displayMode === _KonvaUtils.KONVA_MODE.DRAW && (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  return /*#__PURE__*/_react.default.createElement("div", null, (displayMode === _KonvaUtils.KONVA_MODE.DRAW || displayMode === _KonvaUtils.KONVA_MODE.TARGET) && (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true
   }, /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
     currentColor: currentColor,

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

@@ -72,6 +72,7 @@ function Rectangle({
 }
 Rectangle.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/AnnotationFormUtils.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEMPLATE_TYPES = exports.TEMPLATE = exports.TARGET_VIEW = exports.TAG_VIEW = exports.StyledToggleButtonGroup = exports.OVERLAY_VIEW = exports.MEDIA_TYPES = exports.MANIFEST_LINK_VIEW = exports.IMAGE_TOOL_STATE = exports.DEFAULT_TOOL_STATE = void 0;
-exports.getTargetSVGToolState = getTargetSVGToolState;
-exports.isValidUrl = exports.getTemplateType = void 0;
+exports.isValidUrl = exports.getTemplateType = exports.TEMPLATE_TYPES = exports.TEMPLATE = exports.TARGET_VIEW = exports.TARGET_TOOL_STATE = exports.TAG_VIEW = exports.StyledToggleButtonGroup = exports.OVERLAY_VIEW = exports.MEDIA_TYPES = exports.MANIFEST_LINK_VIEW = exports.IMAGE_TOOL_STATE = exports.DEFAULT_TOOL_STATE = void 0;
 exports.saveAnnotationInStorageAdapter = saveAnnotationInStorageAdapter;
 exports.secondsToHMSarray = secondsToHMSarray;
 var _TextFields = _interopRequireDefault(require("@mui/icons-material/TextFields"));
@@ -158,22 +156,18 @@ const IMAGE_TOOL_STATE = exports.IMAGE_TOOL_STATE = {
 
 /**
  * Specific Tool state for the target SVG
- * @param imageZoom
- * @returns {{activeTool: string, closedMode: string, image: {id: null}, imageEvent: null,
- * strokeColor: string, strokeWidth: number}}
  */
-function getTargetSVGToolState() {
-  return {
-    activeTool: _KonvaUtils.OVERLAY_TOOL.SHAPE,
-    closedMode: 'closed',
-    image: {
-      id: null
-    },
-    imageEvent: null,
-    strokeColor: 'rgba(255,0, 0, 0.5)',
-    strokeWidth: 5
-  };
-}
+const TARGET_TOOL_STATE = exports.TARGET_TOOL_STATE = {
+  activeTool: _KonvaUtils.OVERLAY_TOOL.SHAPE,
+  closedMode: 'closed',
+  fillColor: 'rgba(100,100,100, 0)',
+  image: {
+    id: null
+  },
+  imageEvent: null,
+  strokeColor: 'rgba(255,0, 0, 0.5)',
+  strokeWidth: 5
+};
 const TARGET_VIEW = exports.TARGET_VIEW = 'target';
 const OVERLAY_VIEW = exports.OVERLAY_VIEW = 'layer';
 const TAG_VIEW = exports.TAG_VIEW = 'tag';

package/es/annotationForm/TargetSpatialInput.js

@@ -24,7 +24,7 @@ function TargetSpatialInput({
   windowId
 }) {
   // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
-  const [toolState, setToolState] = (0, _react.useState)((0, _AnnotationFormUtils.getTargetSVGToolState)());
+  const [toolState, setToolState] = (0, _react.useState)(_AnnotationFormUtils.TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = (0, _react.useState)(_AnnotationFormUtils.TARGET_VIEW);
   const [scale, setScale] = (0, _react.useState)(playerReferences.getScale());
   /** Change scale from container / canva */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -63,7 +63,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.0.0",
-    "uuid": "^11.0.0"
+    "uuid": "^8.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.9",

package/src/IIIFUtils.js

@@ -5,7 +5,7 @@ import {
   OVERLAY_TOOL,
   SHAPES_TOOL,
 } from './annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
-import { TEMPLATE } from './annotationForm/AnnotationFormUtils';
+import { TARGET_TOOL_STATE, TEMPLATE } from './annotationForm/AnnotationFormUtils';
 
 /**
  * Check if annotation is exportable to image in case of Konva annotation
@@ -136,8 +136,7 @@ export const getIIIFTargetFromMaeData = (
     case TEMPLATE.MULTIPLE_BODY_TYPE:
     case 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 === SHAPES_TOOL.RECTANGLE) {
+      if (isSimpleTarget(maeTarget.drawingState.shapes)) {
         return getIIIFTargetFromRectangleShape(
           maeTarget,
           canvasId,
@@ -155,6 +154,11 @@ export const getIIIFTargetFromMaeData = (
   return getIIIFTargetFullCanvas(maeData, canvasId);
 };
 
+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;
+
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)
  * @param maeData

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -58,7 +58,8 @@ function AnnotationFormOverlayTool({
         toolState.activeTool === OVERLAY_TOOL.EDIT && (
           <>
             {
-              currentShape && displayMode === KONVA_MODE.DRAW && (
+              ((currentShape && displayMode === KONVA_MODE.DRAW)
+                || (currentShape && displayMode === KONVA_MODE.TARGET)) && (
                 <div>
                   <Typography variant="subFormSectionTitle">
                     {t('selected_object')}
@@ -77,6 +78,7 @@ function AnnotationFormOverlayTool({
                     }}
                     setToolState={customUpdateToolState}
                     displayMode={displayMode}
+                    currentShape={currentShape}
                   />
                 </div>
               )

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -139,7 +139,7 @@ function AnnotationFormOverlayToolOptions({
   return (
     <div>
       {
-        (displayMode === KONVA_MODE.DRAW
+        ((displayMode === KONVA_MODE.DRAW || displayMode === KONVA_MODE.TARGET)
           && isShapesTool(toolState.activeTool)) && (
           <Grid container>
             <ColorPicker

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

@@ -73,6 +73,7 @@ function Rectangle({
 
 Rectangle.propTypes = {
   activeTool: PropTypes.string.isRequired,
+  baseStrokeWidth: PropTypes.number.isRequired,
   displayMode: PropTypes.string.isRequired,
   handleDragEnd: PropTypes.func.isRequired,
   handleDragStart: PropTypes.func.isRequired,

package/src/annotationForm/AnnotationFormUtils.js

@@ -145,20 +145,16 @@ export const IMAGE_TOOL_STATE = {
 
 /**
  * Specific Tool state for the target SVG
- * @param imageZoom
- * @returns {{activeTool: string, closedMode: string, image: {id: null}, imageEvent: null,
- * strokeColor: string, strokeWidth: number}}
  */
-export function getTargetSVGToolState() {
-  return {
-    activeTool: OVERLAY_TOOL.SHAPE,
-    closedMode: 'closed',
-    image: { id: null },
-    imageEvent: null,
-    strokeColor: 'rgba(255,0, 0, 0.5)',
-    strokeWidth: 5,
-  };
-}
+export const TARGET_TOOL_STATE = {
+  activeTool: OVERLAY_TOOL.SHAPE,
+  closedMode: 'closed',
+  fillColor: 'rgba(100,100,100, 0)',
+  image: { id: null },
+  imageEvent: null,
+  strokeColor: 'rgba(255,0, 0, 0.5)',
+  strokeWidth: 5,
+};
 
 export const TARGET_VIEW = 'target';
 export const OVERLAY_VIEW = 'layer';

package/src/annotationForm/TargetSpatialInput.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
 import AnnotationDrawing from './AnnotationFormOverlay/AnnotationDrawing';
-import { getTargetSVGToolState, TARGET_VIEW } from './AnnotationFormUtils';
+import { TARGET_TOOL_STATE, TARGET_VIEW } from './AnnotationFormUtils';
 import AnnotationFormOverlay from './AnnotationFormOverlay/AnnotationFormOverlay';
 import { KONVA_MODE } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
 
@@ -16,7 +16,7 @@ export function TargetSpatialInput({
   windowId,
 }) {
   // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
-  const [toolState, setToolState] = useState(getTargetSVGToolState());
+  const [toolState, setToolState] = useState(TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = useState(TARGET_VIEW);
   const [scale, setScale] = useState(playerReferences.getScale());
   /** Change scale from container / canva */