@searpent/react-image-annotate 2.0.3 → 2.0.6

package/Annotator/index.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useReducer } from "react";
@@ -63,8 +65,16 @@ export var Annotator = function Annotator(_ref) {
       onImagesChange = _ref.onImagesChange,
       groups = _ref.groups,
       onGroupSelect = _ref.onGroupSelect,
-      selectedGroupId = _ref.selectedGroupId,
-      hideHistory = _ref.hideHistory;
+      hideHistory = _ref.hideHistory,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      showEditor = _ref.showEditor,
+      showPageSelector = _ref.showPageSelector,
+      clsColors = _ref.clsColors,
+      groupColors = _ref.groupColors,
+      onRecalc = _ref.onRecalc,
+      onSave = _ref.onSave,
+      allowedGroups = _ref.allowedGroups,
+      metadata = _ref.metadata;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -105,6 +115,10 @@ export var Annotator = function Annotator(_ref) {
   } : {
     videoSrc: videoSrc,
     keyframes: keyframes
+  }, {
+    imagesUpdatedAt: null,
+    imagesSavedAt: null,
+    metadata: metadata
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -129,23 +143,94 @@ export var Annotator = function Annotator(_ref) {
       cls: cls
     });
   });
+
+  var handleSaveClick =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = _asyncToGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+
+              if (onSave) {
+                onSave();
+                dispatchToReducer({
+                  type: "IMAGES_SAVED",
+                  savedAt: new Date()
+                });
+              }
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSaveClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleRecalcClick = function handleRecalcClick(e) {
+    e.preventDefault();
+
+    if (onRecalc) {
+      onRecalc();
+    }
+  };
+
+  var handleMetadataChange = function handleMetadataChange(_ref3) {
+    var name = _ref3.name,
+        value = _ref3.value,
+        imageIndex = _ref3.imageIndex;
+    dispatchToReducer({
+      type: "UPDATE_METADATA",
+      name: name,
+      value: value,
+      imageIndex: imageIndex
+    });
+  }; // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
+
+
   useEffect(function () {
+    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION"].includes(state.lastAction.type)) {
+      return;
+    }
+
     if (onImagesChange) {
-      onImagesChange({
-        selectedImage: selectedImage,
-        images: state.images
-      });
+      onImagesChange(state.images);
     }
 
+    dispatchToReducer({
+      type: "IMAGES_UPDATED",
+      updatedAt: new Date()
+    });
+  }, [onImagesChange, state.images, state.lastAction]);
+  useEffect(function () {
     if (selectedImage === undefined) return;
     dispatchToReducer({
       type: "SELECT_IMAGE",
       imageIndex: selectedImage,
       image: state.images[selectedImage]
-    });
-  }, [onImagesChange, selectedImage, state.images]);
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
-  return React.createElement(SettingsProvider, null, React.createElement(MainLayout, {
+
+  var _ref4 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref5 = _slicedToArray(_ref4, 2),
+      recalcActive = _ref5[0],
+      saveActive = _ref5[1];
+
+  return React.createElement(SettingsProvider, {
+    clsColors: clsColors,
+    groupColors: groupColors
+  }, React.createElement(MainLayout, {
     RegionEditLabel: RegionEditLabel,
     alwaysShowNextButton: Boolean(onNextImage),
     alwaysShowPrevButton: Boolean(onPrevImage),
@@ -162,8 +247,16 @@ export var Annotator = function Annotator(_ref) {
     hideSave: hideSave,
     groups: groups,
     onGroupSelect: onGroupSelect,
-    selectedGroupId: selectedGroupId,
-    hideHistory: hideHistory
+    hideHistory: hideHistory,
+    hideNotEditingLabel: hideNotEditingLabel,
+    showEditor: showEditor,
+    showPageSelector: showPageSelector,
+    onRecalc: handleRecalcClick,
+    onSave: handleSaveClick,
+    saveActive: recalcActive,
+    recalcActive: saveActive,
+    allowedGroups: allowedGroups,
+    onMetadataChange: handleMetadataChange
   }));
 };
 export default Annotator;

package/Annotator/reducers/general-reducer.js

@@ -13,6 +13,7 @@ import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon";
 import clamp from "clamp";
 import getLandmarksWithTransform from "../../utils/get-landmarks-with-transform";
 import setInLocalStorage from "../../utils/set-in-local-storage";
+import onlyUnique from "../../utils/filter-only-unique";
 
 var getRandomId = function getRandomId() {
   return Math.random().toString().split(".")[1];
@@ -183,10 +184,25 @@ export default (function (state, action) {
         var regions = _toConsumableArray(activeImage.regions || []).map(function (r) {
           return _objectSpread({}, r, {
             highlighted: r.id === region.id,
+            groupHighlighted: r.groupId && r.groupId === region.groupId ? true : false,
             editingLabels: r.id === region.id
           });
         });
 
+        var selectedGroupIds = regions.filter(function (i) {
+          return i.highlighted;
+        }).map(function (r) {
+          return r.groupId || '';
+        }).filter(onlyUnique);
+
+        if (selectedGroupIds.length === 1) {
+          state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["selectedGroupId"]), selectedGroupIds[0]);
+        }
+
+        if (selectedGroupIds.length === 0) {
+          state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["selectedGroupId"]), null);
+        }
+
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), regions);
       }
 
@@ -762,9 +778,10 @@ export default (function (state, action) {
         }
 
         var _regions = _toConsumableArray(getIn(state, pathToActiveImage).regions || []).map(function (r) {
-          return setIn(r, ["editingLabels"], false).setIn(["highlighted"], false);
+          return setIn(r, ["editingLabels"], false).setIn(["highlighted"], false).setIn(["groupHighlighted"], false);
         }).concat(newRegion ? [newRegion] : []);
 
+        state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["selectedGroupId"]), null);
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), _regions);
       }
 
@@ -1050,6 +1067,83 @@ export default (function (state, action) {
         break;
       }
 
+    case "UPDATE_REGIONS":
+      {
+        var imageIndex = action.imageIndex,
+            _newRegions = action.regions;
+        var updatedRegions = state.images[imageIndex].regions.map(function (r) {
+          var updatedRegion = _newRegions.find(function (i) {
+            return i.id === r.id;
+          });
+
+          if (!updatedRegion) {
+            return r;
+          }
+
+          return _objectSpread({}, r, {
+            cls: updatedRegion.cls,
+            text: updatedRegion.text
+          });
+        }); // TODO: add mutation of order and deletion of regions - SI-1967
+
+        return setIn(state, ["images", imageIndex, "regions"], updatedRegions);
+      }
+
+    case "IMAGES_UPDATED":
+      {
+        var updatedAt = action.updatedAt;
+        return setIn(state, ["imagesUpdatedAt"], updatedAt);
+      }
+
+    case "IMAGES_SAVED":
+      {
+        var savedAt = action.savedAt;
+        return setIn(state, ["imagesSavedAt"], savedAt);
+      }
+
+    case "UPDATE_METADATA":
+      {
+        var name = action.name,
+            value = action.value,
+            _imageIndex = action.imageIndex;
+
+        if (isNaN(_imageIndex)) {
+          var _state$metadata;
+
+          // update global metadata
+          var metadataIndex = (_state$metadata = state.metadata) === null || _state$metadata === void 0 ? void 0 : _state$metadata.findIndex(function (mt) {
+            return mt.key === name;
+          });
+
+          if (metadataIndex < 0) {
+            console.error("can't find metadata by key \"".concat(name, "\""));
+            return;
+          }
+
+          return setIn(state, ["metadata", metadataIndex], {
+            key: name,
+            value: value
+          });
+        } else {
+          var _state$images$_imageI, _state$images$_imageI2;
+
+          // update local metadata of imageIndex
+          var _metadataIndex = (_state$images$_imageI = state.images[_imageIndex]) === null || _state$images$_imageI === void 0 ? void 0 : (_state$images$_imageI2 = _state$images$_imageI.metadata) === null || _state$images$_imageI2 === void 0 ? void 0 : _state$images$_imageI2.findIndex(function (mt) {
+            return mt.key === name;
+          });
+
+          if (_metadataIndex < 0) {
+            console.error("can't find metadata by key \"".concat(name, "\""));
+            return;
+          }
+
+          return setIn(state, ["images", _imageIndex, "metadata", _metadataIndex], {
+            key: name,
+            value: value
+          });
+        }
+      }
+
     default:
       break;
   }