@searpent/react-image-annotate 2.0.50 → 2.0.52

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

@@ -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,
@@ -163,98 +161,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"
@@ -281,21 +187,21 @@ export var Annotator = function Annotator(_ref) {
       var saveHandler =
       /*#__PURE__*/
       function () {
-        var _ref4 = _asyncToGenerator(
+        var _ref2 = _asyncToGenerator(
         /*#__PURE__*/
-        _regeneratorRuntime.mark(function _callee3(image, triggerRecalc, albumMetadata) {
-          var _ref5, lockedUntil;
+        _regeneratorRuntime.mark(function _callee(image, triggerRecalc, albumMetadata) {
+          var _ref3, 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,35 +209,35 @@ export var Annotator = function Annotator(_ref) {
                   });
 
                 case 4:
-                  _ref5 = _context3.sent;
-                  lockedUntil = _ref5.lockedUntil;
+                  _ref3 = _context.sent;
+                  lockedUntil = _ref3.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 _ref2.apply(this, arguments);
         };
       }(); // save if previously selected image has any changes
 
@@ -357,7 +263,7 @@ export var Annotator = function Annotator(_ref) {
   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 +271,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,
+                _ref4,
                 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 +292,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;
+                    _ref4 = _context2.sent;
+                    image = _ref4.image;
 
                     if (image.lockedUntil) {
-                      _context4.next = 11;
+                      _context2.next = 11;
                       break;
                     }
 
@@ -407,25 +313,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 +344,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 +355,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 _ref5 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref6 = _slicedToArray(_ref5, 2),
+      recalcActive = _ref6[0],
+      saveActive = _ref6[1];
 
   return React.createElement(SettingsProvider, {
     clsColors: clsColors,
@@ -489,8 +384,6 @@ export var Annotator = function Annotator(_ref) {
     hideNotEditingLabel: hideNotEditingLabel,
     showEditor: showEditor,
     showPageSelector: showPageSelector,
-    onRecalc: handleRecalcClick,
-    onSave: handleSaveClick,
     saveActive: recalcActive,
     recalcActive: saveActive,
     onMetadataChange: handleMetadataChange,

package/Errorer/errorer.css

@@ -0,0 +1,21 @@
+.errorer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: .75;
+  animation: skeleton-loading 1s linear infinite alternate;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(0, 20%, 80%);
+  }
+
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}

package/MainLayout/index.js

@@ -85,7 +85,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,10 +121,6 @@ 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,
@@ -316,7 +312,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,8 +339,6 @@ export var MainLayout = function MainLayout(_ref5) {
   }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
     onPageClick: handlePageClick,
-    onRecalc: onRecalc,
-    onSave: onSave,
     saveActive: saveActive,
     recalcActive: recalcActive,
     onMetadataChange: onMetadataChange,

package/PageSelector/index.js

@@ -102,8 +102,6 @@ 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,
@@ -120,15 +118,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"
@@ -166,8 +156,6 @@ function PageSelector(_ref3) {
 
 PageSelector.defaultProps = {
   onPageClick: function onPageClick() {},
-  onRecalc: function onRecalc() {},
-  onSave: function onSave() {},
   recalcActive: false,
   saveActive: false,
   pageNumber: undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.50",
+  "version": "2.0.52",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -59,7 +59,7 @@
     "storybook": "start-storybook -p 9090 -s public",
     "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
     "dist": "npm run build && cd dist && npm publish",
-    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
     "build-storybook": "build-storybook",
     "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
     "gh-pages": "npm run build:gh-pages && gh-pages -d build",