@searpent/react-image-annotate 2.0.47 → 2.0.49

package/Annotator/exampleImages.js

@@ -0,0 +1,41 @@
+var mockedImage = {
+  "id": "NA",
+  "src": "https://www.gannett-cdn.com/presto/2022/01/12/NJDN/8088720b-446d-4693-be62-4dfdf1c3046f-DailyNewsSaturday.jpg?width=660&height=1253&fit=crop&format=pjpg&auto=webp",
+  "thumbnail": "https://www.gannett-cdn.com/presto/2022/01/12/NJDN/8088720b-446d-4693-be62-4dfdf1c3046f-DailyNewsSaturday.jpg?width=660&height=1253&fit=crop&format=pjpg&auto=webp",
+  "name": "https://www.gannett-cdn.com/presto/2022/01/12/NJDN/8088720b-446d-4693-be62-4dfdf1c3046f-DailyNewsSaturday.jpg?width=660&height=1253&fit=crop&format=pjpg&auto=webp",
+  "regions": [{
+    "id": "346807698131517440",
+    "type": "box",
+    "visible": true,
+    "cls": "title",
+    "highlighted": false,
+    "groupHighlighted": false,
+    "x": 0.5189794,
+    "y": 0.043963477,
+    "w": 0.46070240000000007,
+    "h": 0.13752678299999999,
+    "groupId": "0",
+    "text": "komerční příloha čtvrtek 29. dubna 2021 Robotické sekačky na trávu - nový pohled na sekání trávy"
+  }, {
+    "id": "346807698131517441",
+    "type": "box",
+    "visible": true,
+    "cls": "subtitle",
+    "highlighted": false,
+    "groupHighlighted": false,
+    "x": 0.51976687,
+    "y": 0.17134483,
+    "w": 0.18034333000000002,
+    "h": 0.10370872999999997,
+    "groupId": "0",
+    "text": "Udržet trávník v perfektním stavu, znamená věnovat mu ohromné množství času a cítit se neustále odpovědný za jeho stav. Znamená to nepopulární, mnohdy obtížnou, časově náročnou práci a také starost o likvidaci zahradního odpadu. Dobrou zprávou je, že robotická sekačka na trávu všechny tyto věci obstará za Vás."
+  }],
+  "metadata": [{
+    "key": "page",
+    "value": "66"
+  }, {
+    "key": "mockedBy",
+    "value": "artificial server"
+  }]
+};
+export default [mockedImage];

package/Annotator/examplePhotos.js

@@ -686,55 +686,20 @@ var examplePhotos = [{
         "text": "[{\"label\":\"author\",\"text\":\"MET\"}]",
         "groupId": "5",
         "id": "346807506053365764"
-      }, {
-        "label": "title",
-        "score": 0.99,
-        "box": {
-          "X1": 0.7056229,
-          "X2": 0.9718065,
-          "Y1": 0.049599823,
-          "Y2": 0.18825386
-        },
-        "text": "[{\"label\":\"title\",\"text\":\"Za lidská práva! Vadí Čína i Katar\"}]",
-        "groupId": "6",
-        "id": "346807506909003776"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.70483536,
-          "X2": 0.7946133,
-          "Y1": 0.1657085,
-          "Y2": 0.53319806
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506909003777"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.7985509,
-          "X2": 0.8875413,
-          "Y1": 0.33028972,
-          "Y2": 0.53432536
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506909003778"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.89147896,
-          "X2": 0.98046935,
-          "Y1": 0.33028972,
-          "Y2": 0.53432536
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506913198080"
-      }, {
+      }, // {
+      //   "label": "title",
+      //   "score": 0.99,
+      //   "box": {
+      //     "X1": 0.7056229,
+      //     "X2": 0.9718065,
+      //     "Y1": 0.049599823,
+      //     "Y2": 0.18825386
+      //   },
+      //   "text": "[{\"label\":\"title\",\"text\":\"Za lidská práva! Vadí Čína i Katar\"}]",
+      //   "groupId": "6",
+      //   "id": "346807506909003776"
+      // },
+      {
         "label": "photo_caption",
         "score": 0.99,
         "box": {
@@ -743,33 +708,35 @@ var examplePhotos = [{
           "Y1": 0.25025365,
           "Y2": 0.3415624
         },
-        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
+        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest n z února v Indii,\\n\\tpred proti v Pekingu.\"}]",
         "groupId": "6",
-        "id": "346807506913198081"
-      }, {
-        "label": "photo_caption",
-        "score": 0.99,
-        "box": {
-          "X1": 0.80248857,
-          "X2": 0.95999366,
-          "Y1": 0.32127157,
-          "Y2": 0.34381694
-        },
-        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
-        "groupId": "6",
-        "id": "346807506913198082"
-      }, {
-        "label": "author",
-        "score": 0.99,
-        "box": {
-          "X1": 0.9584186,
-          "X2": 0.9733816,
-          "Y1": 0.51628906,
-          "Y2": 0.53319806
-        },
-        "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
-        "groupId": "6",
-        "id": "346807506913198083"
+        "id": "346807506913198081" // {
+        //   "label": "photo_caption",
+        //   "score": 0.99,
+        //   "box": {
+        //     "X1": 0.80248857,
+        //     "X2": 0.95999366,
+        //     "Y1": 0.32127157,
+        //     "Y2": 0.34381694
+        //   },
+        //   "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
+        //   "groupId": "6",
+        //   "id": "346807506913198082"
+        // },
+        // {
+        //   "label": "author",
+        //   "score": 0.99,
+        //   "box": {
+        //     "X1": 0.9584186,
+        //     "X2": 0.9733816,
+        //     "Y1": 0.51628906,
+        //     "Y2": 0.53319806
+        //   },
+        //   "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
+        //   "groupId": "6",
+        //   "id": "346807506913198083"
+        // }
+
       }]
     }, {
       "modelFamily": "metadata-engine",
@@ -810,7 +777,8 @@ var examplePhotos = [{
   }, {
     "key": "mutation",
     "value": "hřensko"
-  }]
+  }],
+  "lockedUntil": ""
 }, {
   "id": "431fc636-d6d1-4e20-a35b-cc7a201c1833",
   "fullsize": {
@@ -1361,7 +1329,8 @@ var examplePhotos = [{
   "metadata": [{
     "key": "pageNumber",
     "value": "2"
-  }]
+  }],
+  "lockedUntil": "2020-01-18T11:35:00.000Z"
 }, {
   "id": "45f79ec8-fd2e-4ad8-82f6-007a2eec2b97",
   "fullsize": {
@@ -2080,7 +2049,8 @@ var examplePhotos = [{
   "metadata": [{
     "key": "pageNumber",
     "value": "3"
-  }]
+  }],
+  "lockedUntil": ""
 }, {
   "id": "5494ea75-ec1b-4513-b23b-0b2eaa29b576",
   "fullsize": {

package/Annotator/index.js

@@ -4,6 +4,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useReducer } from "react";
 import makeImmutable, { without } from "seamless-immutable";
+import intersection from "lodash/intersection";
 import MainLayout from "../MainLayout";
 import SettingsProvider from "../SettingsProvider";
 import combineReducers from "./reducers/combine-reducers.js";
@@ -13,6 +14,8 @@ import historyHandler from "./reducers/history-handler.js";
 import imageReducer from "./reducers/image-reducer.js";
 import useEventCallback from "use-event-callback";
 import videoReducer from "./reducers/video-reducer.js";
+import { reacalcActionsEnum } from "../utils/saveable-actions-enum";
+import sleep from '../utils/sleep';
 export var Annotator = function Annotator(_ref) {
   var images = _ref.images,
       allowedArea = _ref.allowedArea,
@@ -79,8 +82,10 @@ export var Annotator = function Annotator(_ref) {
       onSelectedImageChange = _ref.onSelectedImageChange,
       albumMetadata = _ref.albumMetadata,
       metadataConfigs = _ref.metadataConfigs,
-      _ref$lockedImages = _ref.lockedImages,
-      lockedImages = _ref$lockedImages === void 0 ? [] : _ref$lockedImages;
+      _ref$save = _ref.save,
+      save = _ref$save === void 0 ? function () {} : _ref$save,
+      _ref$fetchImage = _ref.fetchImage,
+      fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -126,7 +131,8 @@ export var Annotator = function Annotator(_ref) {
     imagesUpdatedAt: null,
     imagesSavedAt: null,
     albumMetadata: albumMetadata,
-    metadataConfigs: metadataConfigs
+    metadataConfigs: metadataConfigs,
+    toPollImages: []
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -255,39 +261,190 @@ export var Annotator = function Annotator(_ref) {
       type: "ADD_GROUP",
       group: group
     });
-  }; // trigger onSelectedImageChange() hook when image changed
+  }; // trigger save and recalc
 
 
   useEffect(function () {
-    var _state$lastAction;
+    var selectedImage = state.selectedImage,
+        previouslySelectedImage = state.previouslySelectedImage,
+        lastAction = state.lastAction;
 
-    var createdAt = new Date();
+    if ((lastAction === null || lastAction === void 0 ? void 0 : lastAction.type) === 'SELECT_IMAGE' && selectedImage !== previouslySelectedImage) {
+      var _state$images$previou, _state$images$previou2;
 
-    if (typeof onSelectedImageChange === 'function' && ((_state$lastAction = state.lastAction) === null || _state$lastAction === void 0 ? void 0 : _state$lastAction.type) === 'SELECT_IMAGE' && (state === null || state === void 0 ? void 0 : state.selectedImage) !== state.previouslySelectedImage) {
-      onSelectedImageChange({
-        selectedImage: state === null || state === void 0 ? void 0 : state.selectedImage,
-        previouslySelectedImage: state.previouslySelectedImage,
-        images: state.images,
-        albumMetadata: state.albumMetadata,
-        createdAt: createdAt
-      });
+      // metadata on album level
+      var saveHandler =
+      /*#__PURE__*/
+      function () {
+        var _ref4 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee3(image, triggerRecalc, albumMetadata) {
+          var _ref5, lockedUntil;
+
+          return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_INIT",
+                    imageId: image.id
+                  });
+                  _context3.prev = 1;
+                  _context3.next = 4;
+                  return save({
+                    image: image,
+                    triggerRecalc: triggerRecalc,
+                    albumMetadata: albumMetadata
+                  });
+
+                case 4:
+                  _ref5 = _context3.sent;
+                  lockedUntil = _ref5.lockedUntil;
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_SUCCESS",
+                    imageId: image.id,
+                    lockedUntil: lockedUntil
+                  });
+                  _context3.next = 12;
+                  break;
+
+                case 9:
+                  _context3.prev = 9;
+                  _context3.t0 = _context3["catch"](1);
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_FAIL",
+                    imageId: image.id,
+                    error: _context3.t0
+                  });
+
+                case 12:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3, null, [[1, 9]]);
+        }));
+
+        return function saveHandler(_x3, _x4, _x5) {
+          return _ref4.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);
+      }
     }
-  }, [state.previouslySelectedImage, state.selectedImage, onSelectedImageChange, state.images, state.albumMetadata, state]); // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
+  }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // polling of images
 
   useEffect(function () {
-    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION", "DELETE_SELECTED_REGION", "UPDATE_METADATA", "SELECT_CLASSIFICATION"].includes(state.lastAction.type)) {
-      return;
-    }
+    if (state.toPollImages.length > 0) {
+      var polledImages = state.toPollImages.reduce(function (acc, imageId) {
+        function pollImage(_x6, _x7) {
+          return _pollImage.apply(this, arguments);
+        } // make recursive calling of polling function
+
 
-    if (onImagesChange) {
-      onImagesChange(state.images);
+        function _pollImage() {
+          _pollImage = _asyncToGenerator(
+          /*#__PURE__*/
+          _regeneratorRuntime.mark(function _callee4(fetchImage, imageId) {
+            var tries,
+                _ref6,
+                image,
+                _args4 = arguments;
+
+            return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+              while (1) {
+                switch (_context4.prev = _context4.next) {
+                  case 0:
+                    tries = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 5;
+
+                    if (!(tries === 0)) {
+                      _context4.next = 4;
+                      break;
+                    }
+
+                    dispatchToReducer({
+                      type: "IMAGE_POLL_TIMEOUT",
+                      imageId: imageId
+                    });
+                    return _context4.abrupt("return");
+
+                  case 4:
+                    _context4.next = 6;
+                    return fetchImage({
+                      imageId: imageId
+                    });
+
+                  case 6:
+                    _ref6 = _context4.sent;
+                    image = _ref6.image;
+
+                    if (image.lockedUntil) {
+                      _context4.next = 11;
+                      break;
+                    }
+
+                    dispatchToReducer({
+                      type: "IMAGE_POLL_SUCCESS",
+                      image: image
+                    });
+                    return _context4.abrupt("return");
+
+                  case 11:
+                    _context4.next = 13;
+                    return sleep(5000);
+
+                  case 13:
+                    _context4.next = 15;
+                    return pollImage(fetchImage, imageId, tries - 1);
+
+                  case 15:
+                    return _context4.abrupt("return", _context4.sent);
+
+                  case 16:
+                  case "end":
+                    return _context4.stop();
+                }
+              }
+            }, _callee4);
+          }));
+          return _pollImage.apply(this, arguments);
+        }
+
+        pollImage(fetchImage, imageId, 10);
+        return imageId;
+      }, []);
+      dispatchToReducer({
+        type: "IMAGE_POLL_INIT",
+        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])
 
-    dispatchToReducer({
-      type: "IMAGES_UPDATED",
-      updatedAt: new Date()
-    });
-  }, [onImagesChange, state.images, state.lastAction]);
   useEffect(function () {
     if (selectedImage === undefined) return;
     dispatchToReducer({
@@ -298,10 +455,10 @@ export var Annotator = function Annotator(_ref) {
   }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
 
-  var _ref4 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
-      _ref5 = _slicedToArray(_ref4, 2),
-      recalcActive = _ref5[0],
-      saveActive = _ref5[1];
+  var _ref7 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref8 = _slicedToArray(_ref7, 2),
+      recalcActive = _ref8[0],
+      saveActive = _ref8[1];
 
   return React.createElement(SettingsProvider, {
     clsColors: clsColors,
@@ -332,8 +489,7 @@ export var Annotator = function Annotator(_ref) {
     saveActive: recalcActive,
     recalcActive: saveActive,
     onMetadataChange: handleMetadataChange,
-    onAddGroup: handleAddGroup,
-    lockedImages: lockedImages
+    onAddGroup: handleAddGroup
   }));
 };
 export default Annotator;

package/Annotator/reducers/general-reducer.js

@@ -5,6 +5,7 @@ import { moveRegion } from "../../ImageCanvas/region-tools.js";
 import { getIn, setIn, updateIn } from "seamless-immutable";
 import moment from "moment";
 import isEqual from "lodash/isEqual";
+import uniq from "lodash/uniq";
 import getActiveImage from "./get-active-image";
 import { saveToHistory } from "./history-handler.js";
 import colors from "../../colors";
@@ -16,6 +17,7 @@ import setInLocalStorage from "../../utils/set-in-local-storage";
 import onlyUnique from "../../utils/filter-only-unique";
 import regionsGroups from '../../utils/regions-groups';
 import nextGroupId from "../../utils/next-group-id";
+import defaultLockedUntil from "../../utils/default-locked-until";
 
 var getRandomId = function getRandomId() {
   return Math.random().toString().split(".")[1];
@@ -107,6 +109,11 @@ export default (function (state, action) {
     }));
   };
 
+  var addSaveableAction = function addSaveableAction(state, action) {
+    if (currentImageIndex === null) return state;
+    return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["saveableActions"]), [].concat(_toConsumableArray(activeImage.saveableActions || []), [action]));
+  };
+
   var setNewImage = function setNewImage(img, index) {
     var _ref = typeof img === "object" ? img : {
       src: img
@@ -151,6 +158,7 @@ export default (function (state, action) {
           state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), newRegions);
         }
 
+        state = addSaveableAction(state, "SELECT_CLASSIFICATION");
         return setIn(state, ["selectedCls"], action.cls);
       }
 
@@ -178,6 +186,7 @@ export default (function (state, action) {
           state = saveToHistory(state, "Change Region Comment");
         }
 
+        state = addSaveableAction(state, "CHANGE_REGION");
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions", regionIndex]), action.region);
       }
 
@@ -846,11 +855,13 @@ export default (function (state, action) {
 
               if (state.mode.isNew) {
                 if (Math.abs(state.mode.original.x - _x2) < 0.002 || Math.abs(state.mode.original.y - _y2) < 0.002) {
+                  state = addSaveableAction(state, "MOUSE_UP_RESIZE_BOX");
                   return setIn(modifyRegion(state.mode.regionId, null), ["mode"], null);
                 }
               }
 
               if (state.mode.editLabelEditorAfter) {
+                state = addSaveableAction(state, "MOUSE_UP_RESIZE_BOX");
                 return _objectSpread({}, modifyRegion(state.mode.regionId, {
                   editingLabels: true
                 }), {
@@ -863,6 +874,7 @@ export default (function (state, action) {
           case "RESIZE_KEYPOINTS":
           case "MOVE_POLYGON_POINT":
             {
+              state = addSaveableAction(state, "MOUSE_UP_MOVE_REGION");
               return _objectSpread({}, state, {
                 mode: null
               });
@@ -965,6 +977,7 @@ export default (function (state, action) {
 
         if (_regionIndex18 === null) return state;
         state = saveToHistory(state, "Delete region");
+        state = addSaveableAction(state, "DELETE_REGION");
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), (activeImage.regions || []).filter(function (r) {
           return r.id !== action.region.id;
         }));
@@ -975,6 +988,7 @@ export default (function (state, action) {
         var _groupId = action.groupId;
         if (_groupId === null || _groupId === undefined) return state;
         state = saveToHistory(state, "Delete group");
+        state = addSaveableAction(state, "DELETE_GROUP");
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), (activeImage.regions || []).filter(function (r) {
           return r.groupId !== _groupId;
         }));
@@ -1141,6 +1155,7 @@ export default (function (state, action) {
           });
         }); // TODO: add mutation of order and deletion of regions - SI-1967
 
+        state = addSaveableAction(state, "UPDATE_REGIONS");
         return setIn(state, ["images", imageIndex, "regions"], updatedRegions);
       }
 
@@ -1182,6 +1197,7 @@ export default (function (state, action) {
             return state;
           }
 
+          state = addSaveableAction(state, "UPDATE_ALBUM_METADATA");
           return setIn(state, ["albumMetadata", metadataIndex], {
             key: name,
             value: value
@@ -1214,6 +1230,7 @@ export default (function (state, action) {
             }
 
             articleMetadata[toBeUpdatedMetadataIdx].value = value;
+            state = addSaveableAction(state, "UPDATE_METADATA");
             return setIn(state, ["images", _imageIndex, "regions", articleMetadataRegionIdx], _objectSpread({}, articleRegionToUpdate, {
               text: JSON.stringify(articleMetadata)
             }));
@@ -1229,6 +1246,7 @@ export default (function (state, action) {
             return state;
           }
 
+          state = addSaveableAction(state, "UPDATE_METADATA");
           return setIn(state, ["images", _imageIndex, "metadata", _metadataIndex], {
             key: name,
             value: value
@@ -1248,6 +1266,111 @@ export default (function (state, action) {
         // )
       }
 
+    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));
+        }
+
+        return setIn(state, ["images", imageIdx], _objectSpread({}, state.images[imageIdx], {
+          lockedUntil: defaultLockedUntil(),
+          syncError: null,
+          saveableActions: []
+        }));
+      }
+
+    case "IMAGE_UPDATE_SUCCESS":
+      {
+        var _imageId = action.imageId,
+            lockedUntil = action.lockedUntil;
+
+        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));
+        } // 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])));
+        }
+
+        return setIn(state, ["images", _imageIdx], _objectSpread({}, state.images[_imageIdx], {
+          lockedUntil: lockedUntil,
+          syncError: null
+        }));
+      }
+
+    case "IMAGE_UPDATE_FAIL":
+      {
+        var _imageId2 = action.imageId,
+            error = action.error;
+
+        var _imageIdx2 = state.images.findIndex(function (i) {
+          return i.id === _imageId2;
+        });
+
+        if (_imageIdx2 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId2));
+        }
+
+        return setIn(state, ["images", _imageIdx2], _objectSpread({}, state.images[_imageIdx2], {
+          lockedUntil: null,
+          syncError: error
+        }));
+      }
+
+    case "IMAGE_POLL_INIT":
+      {
+        var imageIds = action.imageIds;
+        return setIn(state, ["toPollImages"], state.toPollImages.filter(function (i) {
+          return !imageIds.includes(i);
+        }));
+      }
+
+    case "IMAGE_POLL_SUCCESS":
+      {
+        var image = action.image;
+
+        var _imageIdx3 = state.images.findIndex(function (i) {
+          return i.id === image.id;
+        });
+
+        if (_imageIdx3 < 0) {
+          throw new Error("failed to find index of image with id ".concat(image.id));
+        }
+
+        return setIn(state, ["images", _imageIdx3], _objectSpread({}, state.images[_imageIdx3], {
+          lockedUntil: null,
+          syncError: null
+        }, image));
+      }
+
+    case "IMAGE_POLL_TIMEOUT":
+      {
+        var _imageId3 = action.imageId;
+
+        var _imageIdx4 = state.images.findIndex(function (i) {
+          return i.id === _imageId3;
+        });
+
+        if (_imageIdx4 < 0) {
+          throw new Error("failed to find index of image with id ".concat(_imageId3));
+        }
+
+        return setIn(state, ["images", _imageIdx4], _objectSpread({}, state.images[_imageIdx4], {
+          lockedUntil: null,
+          syncError: new Error("polling timeout")
+        }));
+      }
+
     default:
       break;
   }

package/Editor/annotation-plugin/annotation.js

@@ -4,9 +4,26 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 /**
  * Build styles
  */
-import './annotation.css'; // Possible classes
+import './annotation.css';
+
+function whitespaceCharactersToHTML() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str // new line whitespace
+  .replaceAll(/[ ]\n[ ]/gm, '&nbsp;<br>&nbsp;') // space both sides adds &nbsp;
+  .replaceAll(/\n[ ]/gm, '<br>&nbsp;') // space right side adds &nbsp;
+  .replaceAll(/[ ]\n/gm, '&nbsp;<br>') // space left side adds &nbsp;
+  .replaceAll(/\n/gm, '<br>') // no spaces
+  // tab whitespace
+  .replaceAll(/\t/gm, '&nbsp;&nbsp;&nbsp;&nbsp;'); // no spaces
+}
+
+function HTMLToWhitespaceCharacters() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.replaceAll(/((&nbsp;|\s){4})/gm, '\t').replaceAll('&nbsp;', ' ').replaceAll('<br>', '\n'); // new line whitespace
+} // Possible classes
 // ================
 
+
 var Annotation =
 /*#__PURE__*/
 function () {
@@ -92,7 +109,7 @@ function () {
         data = {};
       }
 
-      newData.text = data.text || '';
+      newData.text = whitespaceCharactersToHTML(data.text);
       newData.labelName = data.labelName || this.defaultLabel.labelName;
       return newData;
     }
@@ -234,7 +251,7 @@ function () {
     key: "save",
     value: function save(toolsContent) {
       return {
-        text: toolsContent.innerHTML,
+        text: HTMLToWhitespaceCharacters(toolsContent.innerHTML),
         labelName: this.currentLabel.labelName
       };
     }

package/Errorer/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ErrorIcon from '@mui/icons-material/Error';
+import './errorer.css';
+
+function Errorer() {
+  return React.createElement("div", {
+    className: "errorer"
+  }, React.createElement(ErrorIcon, null));
+}
+
+export default Errorer;

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, _state$images$state$s3;
+  var _state$images$state$s, _state$images$state$s2;
 
   var state = _ref5.state,
       dispatch = _ref5.dispatch,
@@ -130,8 +130,7 @@ export var MainLayout = function MainLayout(_ref5) {
       _ref5$saveActive = _ref5.saveActive,
       saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
       onMetadataChange = _ref5.onMetadataChange,
-      onAddGroup = _ref5.onAddGroup,
-      lockedImages = _ref5.lockedImages;
+      onAddGroup = _ref5.onAddGroup;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -304,7 +303,9 @@ export var MainLayout = function MainLayout(_ref5) {
       pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : (_i$metadata$find = _i$metadata.find(function (md) {
         return md.key === "pageNumber";
       })) === null || _i$metadata$find === void 0 ? void 0 : _i$metadata$find.value) || null,
-      metadata: i.metadata || []
+      metadata: i.metadata || [],
+      lockedUntil: i.lockedUntil,
+      syncError: i.syncError || null
     };
   });
 
@@ -315,7 +316,7 @@ export var MainLayout = function MainLayout(_ref5) {
     });
   };
 
-  var isSelectedImageLocked = lockedImages.includes(state === null || state === void 0 ? void 0 : (_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : _state$images$state$s3.id);
+  var isSelectedImageLocked = false;
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
@@ -341,7 +342,6 @@ export var MainLayout = function MainLayout(_ref5) {
     }
   }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
-    lockedImages: lockedImages,
     onPageClick: handlePageClick,
     onRecalc: onRecalc,
     onSave: onSave,

package/PageSelector/index.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import classnames from "classnames";
 import './page-selector.css';
 import Locker from '../Locker';
+import Errorer from '../Errorer';
 
 function PageThumbnail(_ref) {
   var _metadata$find, _metadata$find$call;
@@ -16,7 +17,8 @@ function PageThumbnail(_ref) {
       onMetadataChange = _ref.onMetadataChange,
       _ref$metadataConfigs = _ref.metadataConfigs,
       metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs,
-      isLocked = _ref.isLocked;
+      isLocked = _ref.isLocked,
+      error = _ref.error;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -41,7 +43,9 @@ function PageThumbnail(_ref) {
       'ps-page-thumbnail-disabled': isLocked
     }),
     onClick: onClick
-  }, isLocked && React.createElement(Locker, null), React.createElement("div", {
+  }, isLocked && React.createElement(Locker, null), error && React.createElement(Errorer, {
+    errorMessage: error.message
+  }), React.createElement("div", {
     className: "ps-page-thumbnail-image-wrapper"
   }, React.createElement("img", {
     src: src,
@@ -83,6 +87,18 @@ function PageThumbnail(_ref) {
   })));
 }
 
+function isLocked(page) {
+  var _Date$parse;
+
+  var lockedUntil = page.lockedUntil; // needs to be defined and greater than current time
+
+  if (((_Date$parse = Date.parse(lockedUntil)) === null || _Date$parse === void 0 ? void 0 : _Date$parse.valueOf()) > new Date().valueOf()) {
+    return true;
+  }
+
+  return false;
+}
+
 function PageSelector(_ref3) {
   var pages = _ref3.pages,
       onPageClick = _ref3.onPageClick,
@@ -91,9 +107,7 @@ function PageSelector(_ref3) {
       recalcActive = _ref3.recalcActive,
       saveActive = _ref3.saveActive,
       onMetadataChange = _ref3.onMetadataChange,
-      metadataConfigs = _ref3.metadataConfigs,
-      _ref3$lockedImages = _ref3.lockedImages,
-      lockedImages = _ref3$lockedImages === void 0 ? [] : _ref3$lockedImages;
+      metadataConfigs = _ref3.metadataConfigs;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -134,7 +148,8 @@ function PageSelector(_ref3) {
   }, pages.map(function (page, idx) {
     return React.createElement(PageThumbnail, {
       key: "".concat(page.id),
-      isLocked: lockedImages.includes(page.id),
+      isLocked: isLocked(page),
+      error: page.syncError,
       src: page.src,
       isActive: page.isActive,
       onClick: function onClick() {

package/package.json

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

package/utils/default-locked-until.js

@@ -0,0 +1,6 @@
+export default function defaultLockedUntil() {
+  var now = new Date();
+  now.setDate(now.getDate() + 1); // Add 1 day to current date
+
+  return now;
+}

package/utils/photosToImages.js

@@ -76,7 +76,8 @@ function photosToImages(photos) {
       thumbnail: photo.thumbnail.key,
       name: photo.fullsize.key,
       regions: modelResultsToRegions(photo.modelResults.v1),
-      metadata: photo.metadata
+      metadata: photo.metadata,
+      lockedUntil: photo.lockedUntil
     };
   });
 }

package/utils/saveable-actions-enum.js

@@ -0,0 +1,3 @@
+var reacalcActionsEnum = ["MOUSE_UP_RESIZE_BOX", "DELETE_REGION", "DELETE_GROUP", "MOUSE_UP_MOVE_REGION"];
+var saveableActionsEnum = [reacalcActionsEnum, "SELECT_CLASSIFICATION", "CHANGE_REGION", "UPDATE_REGIONS", "UPDATE_METADATA", "UPDATE_ALBUM_METADATA"];
+export { saveableActionsEnum, reacalcActionsEnum };

package/utils/sleep.js

@@ -0,0 +1,7 @@
+var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, ms);
+  });
+};
+
+export default sleep;