@searpent/react-image-annotate 2.0.76 → 2.0.78

package/Annotator/index.js

@@ -0,0 +1,417 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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, { useCallback, 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";
+import generalReducer from "./reducers/general-reducer.js";
+import getFromLocalStorage from "../utils/get-from-local-storage";
+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,
+      _ref$selectedImage = _ref.selectedImage,
+      selectedImage = _ref$selectedImage === void 0 ? images && images.length > 0 ? 0 : undefined : _ref$selectedImage,
+      showPointDistances = _ref.showPointDistances,
+      pointDistancePrecision = _ref.pointDistancePrecision,
+      _ref$showTags = _ref.showTags,
+      showTags = _ref$showTags === void 0 ? getFromLocalStorage("showTags", true) : _ref$showTags,
+      _ref$enabledTools = _ref.enabledTools,
+      enabledTools = _ref$enabledTools === void 0 ? ["select", "create-point", "create-box", "create-polygon", "create-line", "create-expanding-line", "show-mask"] : _ref$enabledTools,
+      _ref$selectedTool = _ref.selectedTool,
+      selectedTool = _ref$selectedTool === void 0 ? "select" : _ref$selectedTool,
+      _ref$regionTagList = _ref.regionTagList,
+      regionTagList = _ref$regionTagList === void 0 ? [] : _ref$regionTagList,
+      _ref$regionClsList = _ref.regionClsList,
+      regionClsList = _ref$regionClsList === void 0 ? [] : _ref$regionClsList,
+      _ref$imageTagList = _ref.imageTagList,
+      imageTagList = _ref$imageTagList === void 0 ? [] : _ref$imageTagList,
+      _ref$imageClsList = _ref.imageClsList,
+      imageClsList = _ref$imageClsList === void 0 ? [] : _ref$imageClsList,
+      _ref$keyframes = _ref.keyframes,
+      keyframes = _ref$keyframes === void 0 ? {} : _ref$keyframes,
+      _ref$taskDescription = _ref.taskDescription,
+      taskDescription = _ref$taskDescription === void 0 ? "" : _ref$taskDescription,
+      _ref$help = _ref.help,
+      help = _ref$help === void 0 ? "" : _ref$help,
+      _ref$fullImageSegment = _ref.fullImageSegmentationMode,
+      fullImageSegmentationMode = _ref$fullImageSegment === void 0 ? false : _ref$fullImageSegment,
+      RegionEditLabel = _ref.RegionEditLabel,
+      videoSrc = _ref.videoSrc,
+      _ref$videoTime = _ref.videoTime,
+      videoTime = _ref$videoTime === void 0 ? 0 : _ref$videoTime,
+      videoName = _ref.videoName,
+      onExit = _ref.onExit,
+      onNextImage = _ref.onNextImage,
+      onPrevImage = _ref.onPrevImage,
+      keypointDefinitions = _ref.keypointDefinitions,
+      _ref$autoSegmentation = _ref.autoSegmentationOptions,
+      autoSegmentationOptions = _ref$autoSegmentation === void 0 ? {
+    type: "autoseg"
+  } : _ref$autoSegmentation,
+      hideHeader = _ref.hideHeader,
+      hideHeaderText = _ref.hideHeaderText,
+      hideNext = _ref.hideNext,
+      hidePrev = _ref.hidePrev,
+      hideClone = _ref.hideClone,
+      hideSettings = _ref.hideSettings,
+      hideFullScreen = _ref.hideFullScreen,
+      hideSave = _ref.hideSave,
+      allowComments = _ref.allowComments,
+      onImagesChange = _ref.onImagesChange,
+      groups = _ref.groups,
+      onGroupSelect = _ref.onGroupSelect,
+      hideHistory = _ref.hideHistory,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      showEditor = _ref.showEditor,
+      showPageSelector = _ref.showPageSelector,
+      _ref$clsColors = _ref.clsColors,
+      clsColors = _ref$clsColors === void 0 ? {} : _ref$clsColors,
+      groupColors = _ref.groupColors,
+      onSelectedImageChange = _ref.onSelectedImageChange,
+      albumMetadata = _ref.albumMetadata,
+      metadataConfigs = _ref.metadataConfigs,
+      _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) {
+      return img.src === selectedImage;
+    });
+    if (selectedImage === -1) selectedImage = undefined;
+  }
+
+  var annotationType = images ? "image" : "video";
+
+  var _useReducer = useReducer(historyHandler(combineReducers(annotationType === "image" ? imageReducer : videoReducer, generalReducer)), makeImmutable(_objectSpread({
+    annotationType: annotationType,
+    showTags: showTags,
+    allowedArea: allowedArea,
+    showPointDistances: showPointDistances,
+    pointDistancePrecision: pointDistancePrecision,
+    selectedTool: selectedTool,
+    fullImageSegmentationMode: fullImageSegmentationMode,
+    autoSegmentationOptions: autoSegmentationOptions,
+    mode: null,
+    taskDescription: taskDescription,
+    help: help,
+    showMask: true,
+    labelImages: imageClsList.length > 0 || imageTagList.length > 0,
+    regionClsList: regionClsList,
+    regionTagList: regionTagList,
+    imageClsList: imageClsList,
+    imageTagList: imageTagList,
+    currentVideoTime: videoTime,
+    enabledTools: enabledTools,
+    history: [],
+    videoName: videoName,
+    keypointDefinitions: keypointDefinitions,
+    allowComments: allowComments
+  }, annotationType === "image" ? {
+    selectedImage: selectedImage,
+    images: images,
+    selectedImageFrameTime: images && images.length > 0 ? images[0].frameTime : undefined
+  } : {
+    videoSrc: videoSrc,
+    keyframes: keyframes
+  }, {
+    imagesUpdatedAt: null,
+    imagesSavedAt: null,
+    albumMetadata: albumMetadata,
+    metadataConfigs: metadataConfigs,
+    toPollImages: _toConsumableArray(images.filter(function (i) {
+      return i.lockedUntil;
+    }).map(function (i) {
+      return i.id;
+    })),
+    toSaveImage: null
+  }))),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatchToReducer = _useReducer2[1];
+
+  var dispatch = useEventCallback(function (action) {
+    if (action.type === "HEADER_BUTTON_CLICKED") {
+      if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
+        return onExit(without(state, "history"));
+      } else if (action.buttonName === "Next" && onNextImage) {
+        return onNextImage(without(state, "history"));
+      } else if (action.buttonName === "Prev" && onPrevImage) {
+        return onPrevImage(without(state, "history"));
+      }
+    }
+
+    dispatchToReducer(action);
+  });
+  var onRegionClassAdded = useEventCallback(function (cls) {
+    dispatchToReducer({
+      type: "ON_CLS_ADDED",
+      cls: cls
+    });
+  });
+
+  var handleMetadataChange = function handleMetadataChange(params) {
+    dispatchToReducer(_objectSpread({
+      type: "UPDATE_METADATA"
+    }, params));
+  };
+
+  var handleAddGroup = function handleAddGroup(group) {
+    dispatchToReducer({
+      type: "ADD_GROUP",
+      group: group
+    });
+  };
+
+  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,
+        previouslySelectedImage = state.previouslySelectedImage,
+        lastAction = state.lastAction;
+
+    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 _ref3 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee(image, triggerRecalc, albumMetadata) {
+          var _ref4, lockedUntil;
+
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_INIT",
+                    imageId: image.id
+                  });
+                  _context.prev = 1;
+                  _context.next = 4;
+                  return save({
+                    image: image,
+                    triggerRecalc: triggerRecalc,
+                    albumMetadata: albumMetadata
+                  });
+
+                case 4:
+                  _ref4 = _context.sent;
+                  lockedUntil = _ref4.lockedUntil;
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_SUCCESS",
+                    imageId: image.id,
+                    lockedUntil: lockedUntil
+                  });
+                  _context.next = 12;
+                  break;
+
+                case 9:
+                  _context.prev = 9;
+                  _context.t0 = _context["catch"](1);
+                  dispatchToReducer({
+                    type: "IMAGE_UPDATE_FAIL",
+                    imageId: image.id,
+                    error: _context.t0
+                  });
+
+                case 12:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[1, 9]]);
+        }));
+
+        return function saveHandler(_x, _x2, _x3) {
+          return _ref3.apply(this, arguments);
+        };
+      }();
+
+      var _state$toSaveImage = state.toSaveImage,
+          image = _state$toSaveImage.image,
+          triggerRecalc = _state$toSaveImage.triggerRecalc,
+          toSaveMetadata = _state$toSaveImage.toSaveMetadata;
+      saveHandler(image, triggerRecalc, toSaveMetadata);
+    }
+  }, [save, state.toSaveImage]); // polling of images
+
+  useEffect(function () {
+    if (state.toPollImages.length > 0) {
+      var polledImages = state.toPollImages.reduce(function (acc, imageId) {
+        function pollImage(_x4, _x5) {
+          return _pollImage.apply(this, arguments);
+        } // make recursive calling of polling function
+
+
+        function _pollImage() {
+          _pollImage = _asyncToGenerator(
+          /*#__PURE__*/
+          _regeneratorRuntime.mark(function _callee2(fetchImage, imageId) {
+            var tries,
+                _ref5,
+                image,
+                _args2 = arguments;
+
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    tries = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 5;
+
+                    if (!(tries === 0)) {
+                      _context2.next = 4;
+                      break;
+                    }
+
+                    dispatchToReducer({
+                      type: "IMAGE_POLL_TIMEOUT",
+                      imageId: imageId
+                    });
+                    return _context2.abrupt("return");
+
+                  case 4:
+                    _context2.next = 6;
+                    return fetchImage({
+                      imageId: imageId
+                    });
+
+                  case 6:
+                    _ref5 = _context2.sent;
+                    image = _ref5.image;
+
+                    if (image.lockedUntil) {
+                      _context2.next = 11;
+                      break;
+                    }
+
+                    dispatchToReducer({
+                      type: "IMAGE_POLL_SUCCESS",
+                      image: image
+                    });
+                    return _context2.abrupt("return");
+
+                  case 11:
+                    _context2.next = 13;
+                    return sleep(5000);
+
+                  case 13:
+                    _context2.next = 15;
+                    return pollImage(fetchImage, imageId, tries - 1);
+
+                  case 15:
+                    return _context2.abrupt("return", _context2.sent);
+
+                  case 16:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+          return _pollImage.apply(this, arguments);
+        }
+
+        pollImage(fetchImage, imageId, 10);
+        return imageId;
+      }, []);
+      dispatchToReducer({
+        type: "IMAGE_POLL_INIT",
+        imageIds: polledImages
+      });
+    }
+  }, [fetchImage, state.toPollImages]);
+  useEffect(function () {
+    if (selectedImage === undefined) return;
+    dispatchToReducer({
+      type: "SELECT_IMAGE",
+      imageIndex: selectedImage,
+      image: state.images[selectedImage]
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onImagesChange, selectedImage]);
+  if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
+
+  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,
+    groupColors: groupColors
+  }, React.createElement(MainLayout, {
+    RegionEditLabel: RegionEditLabel,
+    alwaysShowNextButton: Boolean(onNextImage),
+    alwaysShowPrevButton: Boolean(onPrevImage),
+    state: state,
+    dispatch: dispatch,
+    onRegionClassAdded: onRegionClassAdded,
+    hideHeader: hideHeader,
+    hideHeaderText: hideHeaderText,
+    hideNext: hideNext,
+    hidePrev: hidePrev,
+    hideClone: hideClone,
+    hideSettings: hideSettings,
+    hideFullScreen: hideFullScreen,
+    hideSave: hideSave,
+    groups: groups,
+    onGroupSelect: onGroupSelect,
+    hideHistory: hideHistory,
+    hideNotEditingLabel: hideNotEditingLabel,
+    showEditor: showEditor,
+    showPageSelector: showPageSelector,
+    saveActive: recalcActive,
+    recalcActive: saveActive,
+    onMetadataChange: handleMetadataChange,
+    onAddGroup: handleAddGroup,
+    onRecalcClick: handleRecalcClicked
+  }));
+};
+export default Annotator;

package/Annotator/reducers/combine-reducers.js

@@ -0,0 +1,14 @@
+export default (function () {
+  for (var _len = arguments.length, reducers = new Array(_len), _key = 0; _key < _len; _key++) {
+    reducers[_key] = arguments[_key];
+  }
+
+  return function (state, action) {
+    for (var _i = 0, _reducers = reducers; _i < _reducers.length; _i++) {
+      var reducer = _reducers[_i];
+      state = reducer(state, action);
+    }
+
+    return state;
+  };
+});

package/Annotator/reducers/convert-expanding-line-to-polygon.js

@@ -0,0 +1,73 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+function clamp(num, min, max) {
+  return num <= min ? min : num >= max ? max : num;
+}
+
+export default (function (expandingLine) {
+  var expandingWidth = expandingLine.expandingWidth || 0.005;
+  var pointPairs = expandingLine.points.map(function (_ref, i) {
+    var x = _ref.x,
+        y = _ref.y,
+        angle = _ref.angle,
+        width = _ref.width;
+
+    if (!angle) {
+      var n = expandingLine.points[clamp(i + 1, 0, expandingLine.points.length - 1)];
+      var p = expandingLine.points[clamp(i - 1, 0, expandingLine.points.length - 1)];
+      angle = Math.atan2(p.x - n.x, p.y - n.y) + Math.PI / 2;
+    }
+
+    var dx = Math.sin(angle) * (width || expandingWidth) / 2;
+    var dy = Math.cos(angle) * (width || expandingWidth) / 2;
+    return [{
+      x: x + dx,
+      y: y + dy
+    }, {
+      x: x - dx,
+      y: y - dy
+    }];
+  });
+  var firstSection = pointPairs.map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        p1 = _ref3[0],
+        p2 = _ref3[1];
+
+    return p1;
+  });
+  var secondSection = pointPairs.map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        p1 = _ref5[0],
+        p2 = _ref5[1];
+
+    return p2;
+  }).asMutable();
+  secondSection.reverse();
+  var newPoints = firstSection.concat(secondSection).map(function (_ref6) {
+    var x = _ref6.x,
+        y = _ref6.y;
+    return [x, y];
+  });
+  return _objectSpread({}, expandingLine, {
+    type: "polygon",
+    open: false,
+    points: newPoints,
+    unfinished: undefined,
+    candidatePoint: undefined // let { expandingWidth = 0.005, points } = region
+    // expandingWidth = points.slice(-1)[0].width || expandingWidth
+    // const lastPoint = points.slice(-1)[0]
+    // return (
+    //   <>
+    //     <polygon
+    //       points={
+    //         .map((p) => `${p.x * iw} ${p.y * ih}`)
+    //         .join(" ")}
+    // return {
+    //   ...expandingLine,
+    //   unfinished: undefined,
+    //   candidatePoint: undefined,
+    // }
+
+  });
+});

package/{src/Annotator → Annotator}/reducers/fix-twisted.js

@@ -1,6 +1,4 @@
-// @flow
-
-export default (pointsWithAngles) => {
+export default (function (pointsWithAngles) {
   // Adjacent angles should not have an angular distance of more than Math.PI
-  return pointsWithAngles
-}
+  return pointsWithAngles;
+});