@searpent/react-image-annotate 2.0.51 → 2.0.53

package/Annotator/examplePhotos.js

@@ -778,7 +778,7 @@ var examplePhotos = [{
     "key": "mutation",
     "value": "hřensko"
   }],
-  "lockedUntil": ""
+  "lockedUntil": "2023-01-28T11:35:00.000Z"
 }, {
   "id": "431fc636-d6d1-4e20-a35b-cc7a201c1833",
   "fullsize": {
@@ -1330,7 +1330,7 @@ var examplePhotos = [{
     "key": "pageNumber",
     "value": "2"
   }],
-  "lockedUntil": "2023-01-28T11:35:00.000Z"
+  "lockedUntil": null
 }, {
   "id": "45f79ec8-fd2e-4ad8-82f6-007a2eec2b97",
   "fullsize": {

package/Annotator/index.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useReducer } from "react";
+import React, { useCallback, useEffect, useReducer } from "react";
 import makeImmutable, { without } from "seamless-immutable";
 import intersection from "lodash/intersection";
 import MainLayout from "../MainLayout";
@@ -78,8 +78,6 @@ export var Annotator = function Annotator(_ref) {
       _ref$clsColors = _ref.clsColors,
       clsColors = _ref$clsColors === void 0 ? {} : _ref$clsColors,
       groupColors = _ref.groupColors,
-      onRecalc = _ref.onRecalc,
-      onSave = _ref.onSave,
       onSelectedImageChange = _ref.onSelectedImageChange,
       albumMetadata = _ref.albumMetadata,
       metadataConfigs = _ref.metadataConfigs,
@@ -137,7 +135,8 @@ export var Annotator = function Annotator(_ref) {
       return i.lockedUntil;
     }).map(function (i) {
       return i.id;
-    }))
+    })),
+    toSaveImage: null
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -163,98 +162,6 @@ export var Annotator = function Annotator(_ref) {
     });
   });
 
-  var handleSaveClick =
-  /*#__PURE__*/
-  function () {
-    var _ref2 = _asyncToGenerator(
-    /*#__PURE__*/
-    _regeneratorRuntime.mark(function _callee(e) {
-      var createdAt;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              createdAt = new Date();
-              e.preventDefault();
-
-              if (!onSave) {
-                _context.next = 6;
-                break;
-              }
-
-              _context.next = 5;
-              return onSave({
-                images: state.images,
-                albumMetadata: state.albumMetadata,
-                createdAt: createdAt,
-                selectedImage: state === null || state === void 0 ? void 0 : state.selectedImage
-              });
-
-            case 5:
-              dispatchToReducer({
-                type: "IMAGES_SAVED",
-                savedAt: createdAt
-              });
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function handleSaveClick(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var handleRecalcClick =
-  /*#__PURE__*/
-  function () {
-    var _ref3 = _asyncToGenerator(
-    /*#__PURE__*/
-    _regeneratorRuntime.mark(function _callee2(e) {
-      var createdAt;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              createdAt = new Date();
-              e.preventDefault();
-
-              if (!onRecalc) {
-                _context2.next = 6;
-                break;
-              }
-
-              _context2.next = 5;
-              return onRecalc({
-                images: state.images,
-                albumMetadata: state.albumMetadata,
-                createdAt: createdAt,
-                selectedImage: state === null || state === void 0 ? void 0 : state.selectedImage
-              });
-
-            case 5:
-              dispatchToReducer({
-                type: "IMAGES_RECALCULATED",
-                recalculatedAt: createdAt
-              });
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function handleRecalcClick(_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
   var handleMetadataChange = function handleMetadataChange(params) {
     dispatchToReducer(_objectSpread({
       type: "UPDATE_METADATA"
@@ -266,8 +173,15 @@ export var Annotator = function Annotator(_ref) {
       type: "ADD_GROUP",
       group: group
     });
-  }; // trigger save and recalc
+  };
 
+  var handleRecalcClicked = useCallback(function (_ref2) {
+    var imageId = _ref2.imageId;
+    dispatchToReducer({
+      type: "RECALC_CLICKED",
+      imageId: imageId
+    });
+  }, [dispatchToReducer]); // detect on page change if anything changed, if so trigger save and recalc
 
   useEffect(function () {
     var selectedImage = state.selectedImage,
@@ -277,25 +191,51 @@ export var Annotator = function Annotator(_ref) {
     if ((lastAction === null || lastAction === void 0 ? void 0 : lastAction.type) === 'SELECT_IMAGE' && selectedImage !== previouslySelectedImage) {
       var _state$images$previou, _state$images$previou2;
 
+      // save if previously selected image has any changes
+      if (((_state$images$previou = state.images[previouslySelectedImage]) === null || _state$images$previou === void 0 ? void 0 : (_state$images$previou2 = _state$images$previou.saveableActions) === null || _state$images$previou2 === void 0 ? void 0 : _state$images$previou2.length) > 0) {
+        var _state$images$previou3, _state$images$previou4;
+
+        // decide wheather recalc is needed
+        var triggerRecalc = intersection(reacalcActionsEnum, state.images[previouslySelectedImage].saveableActions).length > 0; // decide whether album metadata should be updated
+
+        var toSaveMetadata = [];
+
+        if ((_state$images$previou3 = state.images[previouslySelectedImage]) === null || _state$images$previou3 === void 0 ? void 0 : (_state$images$previou4 = _state$images$previou3.saveableActions) === null || _state$images$previou4 === void 0 ? void 0 : _state$images$previou4.includes("UPDATE_ALBUM_METADATA")) {
+          toSaveMetadata = state.albumMetadata;
+        } // set this image to be saved
+
+
+        dispatchToReducer({
+          type: "SAVE_IMAGE",
+          image: _objectSpread({}, state.images[previouslySelectedImage]),
+          triggerRecalc: triggerRecalc,
+          toSaveMetadata: toSaveMetadata
+        });
+      }
+    }
+  }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // handle save of image
+
+  useEffect(function () {
+    if (state.toSaveImage !== null) {
       // metadata on album level
       var saveHandler =
       /*#__PURE__*/
       function () {
-        var _ref4 = _asyncToGenerator(
+        var _ref3 = _asyncToGenerator(
         /*#__PURE__*/
-        _regeneratorRuntime.mark(function _callee3(image, triggerRecalc, albumMetadata) {
-          var _ref5, lockedUntil;
+        _regeneratorRuntime.mark(function _callee(image, triggerRecalc, albumMetadata) {
+          var _ref4, lockedUntil;
 
-          return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) {
-              switch (_context3.prev = _context3.next) {
+              switch (_context.prev = _context.next) {
                 case 0:
                   dispatchToReducer({
                     type: "IMAGE_UPDATE_INIT",
                     imageId: image.id
                   });
-                  _context3.prev = 1;
-                  _context3.next = 4;
+                  _context.prev = 1;
+                  _context.next = 4;
                   return save({
                     image: image,
                     triggerRecalc: triggerRecalc,
@@ -303,61 +243,50 @@ export var Annotator = function Annotator(_ref) {
                   });
 
                 case 4:
-                  _ref5 = _context3.sent;
-                  lockedUntil = _ref5.lockedUntil;
+                  _ref4 = _context.sent;
+                  lockedUntil = _ref4.lockedUntil;
                   dispatchToReducer({
                     type: "IMAGE_UPDATE_SUCCESS",
                     imageId: image.id,
                     lockedUntil: lockedUntil
                   });
-                  _context3.next = 12;
+                  _context.next = 12;
                   break;
 
                 case 9:
-                  _context3.prev = 9;
-                  _context3.t0 = _context3["catch"](1);
+                  _context.prev = 9;
+                  _context.t0 = _context["catch"](1);
                   dispatchToReducer({
                     type: "IMAGE_UPDATE_FAIL",
                     imageId: image.id,
-                    error: _context3.t0
+                    error: _context.t0
                   });
 
                 case 12:
                 case "end":
-                  return _context3.stop();
+                  return _context.stop();
               }
             }
-          }, _callee3, null, [[1, 9]]);
+          }, _callee, null, [[1, 9]]);
         }));
 
-        return function saveHandler(_x3, _x4, _x5) {
-          return _ref4.apply(this, arguments);
+        return function saveHandler(_x, _x2, _x3) {
+          return _ref3.apply(this, arguments);
         };
-      }(); // save if previously selected image has any changes
-
-
-      if (((_state$images$previou = state.images[previouslySelectedImage]) === null || _state$images$previou === void 0 ? void 0 : (_state$images$previou2 = _state$images$previou.saveableActions) === null || _state$images$previou2 === void 0 ? void 0 : _state$images$previou2.length) > 0) {
-        var _state$images$previou3, _state$images$previou4;
+      }();
 
-        // decide wheather recalc is needed
-        var triggerRecalc = intersection(reacalcActionsEnum, state.images[previouslySelectedImage].saveableActions).length > 0; // decide wheather album metadata should be updated
-
-        var toSaveMetadata = [];
-
-        if ((_state$images$previou3 = state.images[previouslySelectedImage]) === null || _state$images$previou3 === void 0 ? void 0 : (_state$images$previou4 = _state$images$previou3.saveableActions) === null || _state$images$previou4 === void 0 ? void 0 : _state$images$previou4.includes("UPDATE_ALBUM_METADATA")) {
-          toSaveMetadata = state.albumMetadata;
-        } // save image
-
-
-        saveHandler(_objectSpread({}, state.images[previouslySelectedImage]), triggerRecalc, toSaveMetadata);
-      }
+      var _state$toSaveImage = state.toSaveImage,
+          image = _state$toSaveImage.image,
+          triggerRecalc = _state$toSaveImage.triggerRecalc,
+          toSaveMetadata = _state$toSaveImage.toSaveMetadata;
+      saveHandler(image, triggerRecalc, toSaveMetadata);
     }
-  }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // polling of images
+  }, [save, state.toSaveImage]); // polling of images
 
   useEffect(function () {
     if (state.toPollImages.length > 0) {
       var polledImages = state.toPollImages.reduce(function (acc, imageId) {
-        function pollImage(_x6, _x7) {
+        function pollImage(_x4, _x5) {
           return _pollImage.apply(this, arguments);
         } // make recursive calling of polling function
 
@@ -365,20 +294,20 @@ export var Annotator = function Annotator(_ref) {
         function _pollImage() {
           _pollImage = _asyncToGenerator(
           /*#__PURE__*/
-          _regeneratorRuntime.mark(function _callee4(fetchImage, imageId) {
+          _regeneratorRuntime.mark(function _callee2(fetchImage, imageId) {
             var tries,
-                _ref6,
+                _ref5,
                 image,
-                _args4 = arguments;
+                _args2 = arguments;
 
-            return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) {
-                switch (_context4.prev = _context4.next) {
+                switch (_context2.prev = _context2.next) {
                   case 0:
-                    tries = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 5;
+                    tries = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 5;
 
                     if (!(tries === 0)) {
-                      _context4.next = 4;
+                      _context2.next = 4;
                       break;
                     }
 
@@ -386,20 +315,20 @@ export var Annotator = function Annotator(_ref) {
                       type: "IMAGE_POLL_TIMEOUT",
                       imageId: imageId
                     });
-                    return _context4.abrupt("return");
+                    return _context2.abrupt("return");
 
                   case 4:
-                    _context4.next = 6;
+                    _context2.next = 6;
                     return fetchImage({
                       imageId: imageId
                     });
 
                   case 6:
-                    _ref6 = _context4.sent;
-                    image = _ref6.image;
+                    _ref5 = _context2.sent;
+                    image = _ref5.image;
 
                     if (image.lockedUntil) {
-                      _context4.next = 11;
+                      _context2.next = 11;
                       break;
                     }
 
@@ -407,25 +336,25 @@ export var Annotator = function Annotator(_ref) {
                       type: "IMAGE_POLL_SUCCESS",
                       image: image
                     });
-                    return _context4.abrupt("return");
+                    return _context2.abrupt("return");
 
                   case 11:
-                    _context4.next = 13;
+                    _context2.next = 13;
                     return sleep(5000);
 
                   case 13:
-                    _context4.next = 15;
+                    _context2.next = 15;
                     return pollImage(fetchImage, imageId, tries - 1);
 
                   case 15:
-                    return _context4.abrupt("return", _context4.sent);
+                    return _context2.abrupt("return", _context2.sent);
 
                   case 16:
                   case "end":
-                    return _context4.stop();
+                    return _context2.stop();
                 }
               }
-            }, _callee4);
+            }, _callee2);
           }));
           return _pollImage.apply(this, arguments);
         }
@@ -438,18 +367,7 @@ export var Annotator = function Annotator(_ref) {
         imageIds: polledImages
       });
     }
-  }, [fetchImage, state.toPollImages]); // // TODO: delete this when work done
-  // useEffect(() => {
-  //   if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION", "DELETE_SELECTED_REGION", "UPDATE_METADATA", "SELECT_CLASSIFICATION"].includes(state.lastAction.type)) { return }
-  //   if (onImagesChange) {
-  //     onImagesChange(state.images)
-  //   }
-  //   dispatchToReducer({
-  //     type: "IMAGES_UPDATED",
-  //     updatedAt: new Date()
-  //   })
-  // }, [onImagesChange, state.images, state.lastAction])
-
+  }, [fetchImage, state.toPollImages]);
   useEffect(function () {
     if (selectedImage === undefined) return;
     dispatchToReducer({
@@ -460,10 +378,10 @@ export var Annotator = function Annotator(_ref) {
   }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
 
-  var _ref7 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
-      _ref8 = _slicedToArray(_ref7, 2),
-      recalcActive = _ref8[0],
-      saveActive = _ref8[1];
+  var _ref6 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref7 = _slicedToArray(_ref6, 2),
+      recalcActive = _ref7[0],
+      saveActive = _ref7[1];
 
   return React.createElement(SettingsProvider, {
     clsColors: clsColors,
@@ -489,12 +407,11 @@ export var Annotator = function Annotator(_ref) {
     hideNotEditingLabel: hideNotEditingLabel,
     showEditor: showEditor,
     showPageSelector: showPageSelector,
-    onRecalc: handleRecalcClick,
-    onSave: handleSaveClick,
     saveActive: recalcActive,
     recalcActive: saveActive,
     onMetadataChange: handleMetadataChange,
-    onAddGroup: handleAddGroup
+    onAddGroup: handleAddGroup,
+    onRecalcClick: handleRecalcClicked
   }));
 };
 export default Annotator;

package/Annotator/reducers/general-reducer.js

@@ -1266,7 +1266,19 @@ export default (function (state, action) {
         // )
       }
 
-    case "IMAGE_UPDATE_INIT":
+    case "SAVE_IMAGE":
+      {
+        var image = action.image,
+            triggerRecalc = action.triggerRecalc,
+            toSaveMetadata = action.toSaveMetadata;
+        return setIn(state, ["toSaveImage"], {
+          image: image,
+          triggerRecalc: triggerRecalc,
+          toSaveMetadata: toSaveMetadata
+        });
+      }
+
+    case "RECALC_CLICKED":
       {
         var imageId = action.imageId;
         var imageIdx = state.images.findIndex(function (i) {
@@ -1277,7 +1289,29 @@ export default (function (state, action) {
           throw new Error("failed to find index of image with id ".concat(imageId));
         }
 
-        return setIn(state, ["images", imageIdx], _objectSpread({}, state.images[imageIdx], {
+        var _image = _objectSpread({}, state.images[imageIdx]);
+
+        return setIn(state, ["toSaveImage"], {
+          image: _image,
+          triggerRecalc: true,
+          toSaveMetadata: []
+        });
+      }
+
+    case "IMAGE_UPDATE_INIT":
+      {
+        var _imageId = action.imageId;
+
+        var _imageIdx = state.images.findIndex(function (i) {
+          return i.id === _imageId;
+        });
+
+        if (_imageIdx < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId));
+        }
+
+        state = setIn(state, ["toSaveImage"], null);
+        return setIn(state, ["images", _imageIdx], _objectSpread({}, state.images[_imageIdx], {
           lockedUntil: defaultLockedUntil(),
           syncError: null,
           saveableActions: []
@@ -1286,23 +1320,23 @@ export default (function (state, action) {
 
     case "IMAGE_UPDATE_SUCCESS":
       {
-        var _imageId = action.imageId,
+        var _imageId2 = action.imageId,
             lockedUntil = action.lockedUntil;
 
-        var _imageIdx = state.images.findIndex(function (i) {
-          return i.id === _imageId;
+        var _imageIdx2 = state.images.findIndex(function (i) {
+          return i.id === _imageId2;
         });
 
-        if (_imageIdx < 0) {
-          throw new Error("failed to find index of image with id ".concat(_imageId));
+        if (_imageIdx2 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId2));
         } // if there is lockedUntil set, it means we need to poll for updated
 
 
         if (lockedUntil) {
-          state = setIn(state, ["toPollImages"], uniq([].concat(_toConsumableArray(state.toPollImages), [_imageId])));
+          state = setIn(state, ["toPollImages"], uniq([].concat(_toConsumableArray(state.toPollImages), [_imageId2])));
         }
 
-        return setIn(state, ["images", _imageIdx], _objectSpread({}, state.images[_imageIdx], {
+        return setIn(state, ["images", _imageIdx2], _objectSpread({}, state.images[_imageIdx2], {
           lockedUntil: lockedUntil,
           syncError: null
         }));
@@ -1310,18 +1344,18 @@ export default (function (state, action) {
 
     case "IMAGE_UPDATE_FAIL":
       {
-        var _imageId2 = action.imageId,
+        var _imageId3 = action.imageId,
             error = action.error;
 
-        var _imageIdx2 = state.images.findIndex(function (i) {
-          return i.id === _imageId2;
+        var _imageIdx3 = state.images.findIndex(function (i) {
+          return i.id === _imageId3;
         });
 
-        if (_imageIdx2 < 0) {
-          throw new Error("failed to find index of image with id ".concat(_imageId2));
+        if (_imageIdx3 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId3));
         }
 
-        return setIn(state, ["images", _imageIdx2], _objectSpread({}, state.images[_imageIdx2], {
+        return setIn(state, ["images", _imageIdx3], _objectSpread({}, state.images[_imageIdx3], {
           lockedUntil: null,
           syncError: error
         }));
@@ -1337,35 +1371,35 @@ export default (function (state, action) {
 
     case "IMAGE_POLL_SUCCESS":
       {
-        var image = action.image;
+        var _image2 = action.image;
 
-        var _imageIdx3 = state.images.findIndex(function (i) {
-          return i.id === image.id;
+        var _imageIdx4 = state.images.findIndex(function (i) {
+          return i.id === _image2.id;
         });
 
-        if (_imageIdx3 < 0) {
-          throw new Error("failed to find index of image with id ".concat(image.id));
+        if (_imageIdx4 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_image2.id));
         }
 
-        return setIn(state, ["images", _imageIdx3], _objectSpread({}, state.images[_imageIdx3], {
+        return setIn(state, ["images", _imageIdx4], _objectSpread({}, state.images[_imageIdx4], {
           lockedUntil: null,
           syncError: null
-        }, image));
+        }, _image2));
       }
 
     case "IMAGE_POLL_TIMEOUT":
       {
-        var _imageId3 = action.imageId;
+        var _imageId4 = action.imageId;
 
-        var _imageIdx4 = state.images.findIndex(function (i) {
-          return i.id === _imageId3;
+        var _imageIdx5 = state.images.findIndex(function (i) {
+          return i.id === _imageId4;
         });
 
-        if (_imageIdx4 < 0) {
-          throw new Error("failed to find index of image with id ".concat(_imageId3));
+        if (_imageIdx5 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId4));
         }
 
-        return setIn(state, ["images", _imageIdx4], _objectSpread({}, state.images[_imageIdx4], {
+        return setIn(state, ["images", _imageIdx5], _objectSpread({}, state.images[_imageIdx5], {
           lockedUntil: null,
           syncError: new Error("polling timeout")
         }));

package/MainLayout/index.js

@@ -37,7 +37,9 @@ import regionsToBlocks from '../utils/regions-to-blocks';
 import PageSelector from "../PageSelector";
 import regionsGroups from '../utils/regions-groups';
 import RightSidebarItemsWrapper from './RightSidebarItemsWrapper';
-import Locker from '../Locker'; // import Fullscreen from "../Fullscreen"
+import Locker from '../Locker';
+import { reacalcActionsEnum } from "../utils/saveable-actions-enum";
+import intersection from "lodash/intersection"; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -85,7 +87,7 @@ var EditorWrapper = styled("div")(function (_ref4) {
   };
 });
 export var MainLayout = function MainLayout(_ref5) {
-  var _state$images$state$s, _state$images$state$s2;
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3;
 
   var state = _ref5.state,
       dispatch = _ref5.dispatch,
@@ -121,16 +123,13 @@ export var MainLayout = function MainLayout(_ref5) {
       showEditor = _ref5$showEditor === void 0 ? false : _ref5$showEditor,
       _ref5$showPageSelecto = _ref5.showPageSelector,
       showPageSelector = _ref5$showPageSelecto === void 0 ? false : _ref5$showPageSelecto,
-      _ref5$onRecalc = _ref5.onRecalc,
-      onRecalc = _ref5$onRecalc === void 0 ? function () {} : _ref5$onRecalc,
-      _ref5$onSave = _ref5.onSave,
-      onSave = _ref5$onSave === void 0 ? function () {} : _ref5$onSave,
       _ref5$recalcActive = _ref5.recalcActive,
       recalcActive = _ref5$recalcActive === void 0 ? false : _ref5$recalcActive,
       _ref5$saveActive = _ref5.saveActive,
       saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
       onMetadataChange = _ref5.onMetadataChange,
-      onAddGroup = _ref5.onAddGroup;
+      onAddGroup = _ref5.onAddGroup,
+      onRecalcClick = _ref5.onRecalcClick;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -305,7 +304,8 @@ export var MainLayout = function MainLayout(_ref5) {
       })) === null || _i$metadata$find === void 0 ? void 0 : _i$metadata$find.value) || null,
       metadata: i.metadata || [],
       lockedUntil: i.lockedUntil,
-      syncError: i.syncError || null
+      syncError: i.syncError || null,
+      isRecalcReady: intersection(reacalcActionsEnum, state.images[idx].saveableActions).length > 0
     };
   });
 
@@ -316,7 +316,7 @@ export var MainLayout = function MainLayout(_ref5) {
     });
   };
 
-  var isSelectedImageLocked = false;
+  var isSelectedImageLocked = ((_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : _state$images$state$s3.lockedUntil) ? true : false;
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
@@ -343,12 +343,9 @@ export var MainLayout = function MainLayout(_ref5) {
   }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
     onPageClick: handlePageClick,
-    onRecalc: onRecalc,
-    onSave: onSave,
-    saveActive: saveActive,
-    recalcActive: recalcActive,
     onMetadataChange: onMetadataChange,
-    metadataConfigs: state.metadataConfigs || []
+    metadataConfigs: state.metadataConfigs || [],
+    onRecalcClick: onRecalcClick
   }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
     style: {
       width: "auto"

package/PageSelector/index.js

@@ -14,11 +14,15 @@ function PageThumbnail(_ref) {
       metadata = _ref.metadata,
       showMetadata = _ref.showMetadata,
       imageIndex = _ref.imageIndex,
+      imageId = _ref.imageId,
       onMetadataChange = _ref.onMetadataChange,
       _ref$metadataConfigs = _ref.metadataConfigs,
       metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs,
       isLocked = _ref.isLocked,
-      error = _ref.error;
+      error = _ref.error,
+      onRecalcClick = _ref.onRecalcClick,
+      _ref$isRecalcReady = _ref.isRecalcReady,
+      isRecalcReady = _ref$isRecalcReady === void 0 ? false : _ref$isRecalcReady;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -32,6 +36,13 @@ function PageThumbnail(_ref) {
     });
   };
 
+  var handleRecalcClick = function handleRecalcClick(e) {
+    e.stopPropagation();
+    onRecalcClick({
+      imageId: imageId
+    });
+  };
+
   var pageNumber = metadata === null || metadata === void 0 ? void 0 : (_metadata$find = metadata.find) === null || _metadata$find === void 0 ? void 0 : (_metadata$find$call = _metadata$find.call(metadata, function (md) {
     return md.key === 'pageNumber';
   })) === null || _metadata$find$call === void 0 ? void 0 : _metadata$find$call.value;
@@ -47,7 +58,12 @@ function PageThumbnail(_ref) {
     errorMessage: error.message
   }), React.createElement("div", {
     className: "ps-page-thumbnail-image-wrapper"
-  }, React.createElement("img", {
+  }, isRecalcReady && React.createElement("div", {
+    className: "ps-page-thumbnail-recalc-wrapper"
+  }, React.createElement("button", {
+    className: "recalc-button",
+    onClick: handleRecalcClick
+  }, "Extract")), React.createElement("img", {
     src: src,
     alt: "",
     className: "ps-page-thumbnail-image"
@@ -102,12 +118,9 @@ function isLocked(page) {
 function PageSelector(_ref3) {
   var pages = _ref3.pages,
       onPageClick = _ref3.onPageClick,
-      onRecalc = _ref3.onRecalc,
-      onSave = _ref3.onSave,
-      recalcActive = _ref3.recalcActive,
-      saveActive = _ref3.saveActive,
       onMetadataChange = _ref3.onMetadataChange,
-      metadataConfigs = _ref3.metadataConfigs;
+      metadataConfigs = _ref3.metadataConfigs,
+      onRecalcClick = _ref3.onRecalcClick;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -120,15 +133,7 @@ function PageSelector(_ref3) {
     })
   }, React.createElement("div", {
     className: "top-buttons"
-  }, React.createElement("button", {
-    onClick: onRecalc,
-    disabled: !recalcActive,
-    className: "info"
-  }, "Recalc"), React.createElement("button", {
-    onClick: onSave,
-    disabled: !saveActive,
-    className: "success"
-  }, "Save"), React.createElement("div", {
+  }, React.createElement("div", {
     className: "show-metadata-wrapper"
   }, React.createElement("label", {
     className: "switch mr-2"
@@ -158,16 +163,17 @@ function PageSelector(_ref3) {
       metadata: page.metadata,
       showMetadata: showMetadata,
       imageIndex: idx,
+      imageId: page.id,
       onMetadataChange: onMetadataChange,
-      metadataConfigs: metadataConfigs
+      metadataConfigs: metadataConfigs,
+      onRecalcClick: onRecalcClick,
+      isRecalcReady: page.isRecalcReady
     });
   })));
 }
 
 PageSelector.defaultProps = {
   onPageClick: function onPageClick() {},
-  onRecalc: function onRecalc() {},
-  onSave: function onSave() {},
   recalcActive: false,
   saveActive: false,
   pageNumber: undefined

package/PageSelector/page-selector.css

@@ -235,4 +235,30 @@ input:checked+.slider:before {
 
 .mr-2 {
   margin-right: 1rem;
+}
+
+.ps-page-thumbnail-recalc-wrapper {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ps-page-thumbnail-recalc-wrapper>.recalc-button {
+  width: 80%;
+  height: 40%;
+  border: none;
+  background-image: linear-gradient(310deg, #377ceb, #a8b8d8);
+  color: white;
+  font-weight: 400;
+  border-radius: 8px !important;
+  transition: transform .2s;
+}
+
+.ps-page-thumbnail-recalc-wrapper>.recalc-button:hover {
+  cursor: pointer;
+  font-weight: 600;
+  transform: scale(1.15);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.51",
+  "version": "2.0.53",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",