@searpent/react-image-annotate 2.0.52 → 2.0.54

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";
@@ -135,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],
@@ -172,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,
@@ -183,14 +191,40 @@ 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 _ref2 = _asyncToGenerator(
+        var _ref3 = _asyncToGenerator(
         /*#__PURE__*/
         _regeneratorRuntime.mark(function _callee(image, triggerRecalc, albumMetadata) {
-          var _ref3, lockedUntil;
+          var _ref4, lockedUntil;
 
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) {
@@ -209,8 +243,8 @@ export var Annotator = function Annotator(_ref) {
                   });
 
                 case 4:
-                  _ref3 = _context.sent;
-                  lockedUntil = _ref3.lockedUntil;
+                  _ref4 = _context.sent;
+                  lockedUntil = _ref4.lockedUntil;
                   dispatchToReducer({
                     type: "IMAGE_UPDATE_SUCCESS",
                     imageId: image.id,
@@ -237,28 +271,17 @@ export var Annotator = function Annotator(_ref) {
         }));
 
         return function saveHandler(_x, _x2, _x3) {
-          return _ref2.apply(this, arguments);
+          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) {
@@ -273,7 +296,7 @@ export var Annotator = function Annotator(_ref) {
           /*#__PURE__*/
           _regeneratorRuntime.mark(function _callee2(fetchImage, imageId) {
             var tries,
-                _ref4,
+                _ref5,
                 image,
                 _args2 = arguments;
 
@@ -301,8 +324,8 @@ export var Annotator = function Annotator(_ref) {
                     });
 
                   case 6:
-                    _ref4 = _context2.sent;
-                    image = _ref4.image;
+                    _ref5 = _context2.sent;
+                    image = _ref5.image;
 
                     if (image.lockedUntil) {
                       _context2.next = 11;
@@ -355,10 +378,10 @@ export var Annotator = function Annotator(_ref) {
   }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
 
-  var _ref5 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
-      _ref6 = _slicedToArray(_ref5, 2),
-      recalcActive = _ref6[0],
-      saveActive = _ref6[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,
@@ -387,7 +410,8 @@ export var Annotator = function Annotator(_ref) {
     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/ImageCanvas/index.js

@@ -22,6 +22,7 @@ import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground";
 import useEventCallback from "use-event-callback";
 import RegionShapes from "../RegionShapes";
 import useWasdMode from "./use-wasd-mode";
+import useKey from "use-key-hook";
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return styles;
@@ -219,6 +220,13 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
     };
   }
 
+  var resetZoom = function resetZoom() {
+    changeMat(getDefaultMat(zoomOnAllowedArea ? allowedArea : null, layoutParams.current));
+  };
+
+  useKey(resetZoom, {
+    detectKeys: ['r']
+  });
   useEffect(function () {
     if (!imageLoaded) return;
     changeMat(getDefaultMat(zoomOnAllowedArea ? allowedArea : null, layoutParams.current)); // eslint-disable-next-line

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();
@@ -126,7 +128,8 @@ export var MainLayout = function MainLayout(_ref5) {
       _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();
@@ -301,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
     };
   });
 
@@ -339,10 +343,9 @@ export var MainLayout = function MainLayout(_ref5) {
   }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
     onPageClick: handlePageClick,
-    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;
@@ -39,15 +50,19 @@ function PageThumbnail(_ref) {
     role: "button",
     tabIndex: 0,
     className: classnames('ps-page-thumbnail', {
-      'ps-page-thumbnail-is-active': isActive,
-      'ps-page-thumbnail-disabled': isLocked
+      'ps-page-thumbnail-is-active': isActive
     }),
     onClick: onClick
   }, isLocked && React.createElement(Locker, null), error && React.createElement(Errorer, {
     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,10 +117,9 @@ function isLocked(page) {
 function PageSelector(_ref3) {
   var pages = _ref3.pages,
       onPageClick = _ref3.onPageClick,
-      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),
@@ -148,8 +162,11 @@ function PageSelector(_ref3) {
       metadata: page.metadata,
       showMetadata: showMetadata,
       imageIndex: idx,
+      imageId: page.id,
       onMetadataChange: onMetadataChange,
-      metadataConfigs: metadataConfigs
+      metadataConfigs: metadataConfigs,
+      onRecalcClick: onRecalcClick,
+      isRecalcReady: page.isRecalcReady
     });
   })));
 }

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.52",
+  "version": "2.0.54",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",