@searpent/react-image-annotate 2.3.3 → 2.3.4

package/Annotator/examplePhotos.js

@@ -750,7 +750,7 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
+        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-1\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
         "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
         "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
       }, {
@@ -762,7 +762,7 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
+        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-2\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
         "groupId": "1",
         "id": "2615bf87-7247-4bde-a0f9-45413034a6a6"
       }]

package/Annotator/index.js

@@ -213,7 +213,37 @@ export var Annotator = function Annotator(_ref) {
         });
       }
     }
-  }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // handle save of image
+  }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // Automatically save image shortly after specific metadata fields change
+  // (ArticleType, PreviousArticleId), but debounce so we don't save on every keystroke.
+
+  useEffect(function () {
+    var _state$images;
+
+    var lastAction = state.lastAction;
+
+    if (!lastAction || lastAction.type !== "UPDATE_METADATA" || lastAction.name !== "articleType" && lastAction.name !== "previousArticleId" || isNaN(lastAction.imageIndex)) {
+      return;
+    }
+
+    var imageIndex = lastAction.imageIndex;
+    var image = (_state$images = state.images) === null || _state$images === void 0 ? void 0 : _state$images[imageIndex];
+    if (!image) return;
+    var timeoutId = setTimeout(function () {
+      var _state$images2;
+
+      var latestImage = (_state$images2 = state.images) === null || _state$images2 === void 0 ? void 0 : _state$images2[imageIndex];
+      if (!latestImage) return;
+      dispatchToReducer({
+        type: "SAVE_IMAGE",
+        image: _objectSpread({}, latestImage),
+        triggerRecalc: false,
+        toSaveMetadata: []
+      });
+    }, 800);
+    return function () {
+      clearTimeout(timeoutId);
+    };
+  }, [state.lastAction, state.images]); // handle save of image
 
   useEffect(function () {
     if (state.toSaveImage !== null) {

package/package.json

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