@searpent/react-image-annotate 2.0.24 → 2.0.26

package/Annotator/index.js

@@ -13,83 +13,70 @@ 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";
-
-function extractAllowedGroups(images) {
-  var allowedGroups = [];
-  images.forEach(function (image) {
-    return image.regions && image.regions.forEach(function (_ref) {
-      var groupId = _ref.groupId;
-
-      if (!allowedGroups.includes(groupId)) {
-        allowedGroups.push(groupId);
-      }
-    });
-  });
-  return allowedGroups;
-}
-
-export var Annotator = function Annotator(_ref2) {
-  var images = _ref2.images,
-      allowedArea = _ref2.allowedArea,
-      _ref2$selectedImage = _ref2.selectedImage,
-      selectedImage = _ref2$selectedImage === void 0 ? images && images.length > 0 ? 0 : undefined : _ref2$selectedImage,
-      showPointDistances = _ref2.showPointDistances,
-      pointDistancePrecision = _ref2.pointDistancePrecision,
-      _ref2$showTags = _ref2.showTags,
-      showTags = _ref2$showTags === void 0 ? getFromLocalStorage("showTags", true) : _ref2$showTags,
-      _ref2$enabledTools = _ref2.enabledTools,
-      enabledTools = _ref2$enabledTools === void 0 ? ["select", "create-point", "create-box", "create-polygon", "create-line", "create-expanding-line", "show-mask"] : _ref2$enabledTools,
-      _ref2$selectedTool = _ref2.selectedTool,
-      selectedTool = _ref2$selectedTool === void 0 ? "select" : _ref2$selectedTool,
-      _ref2$regionTagList = _ref2.regionTagList,
-      regionTagList = _ref2$regionTagList === void 0 ? [] : _ref2$regionTagList,
-      _ref2$regionClsList = _ref2.regionClsList,
-      regionClsList = _ref2$regionClsList === void 0 ? [] : _ref2$regionClsList,
-      _ref2$imageTagList = _ref2.imageTagList,
-      imageTagList = _ref2$imageTagList === void 0 ? [] : _ref2$imageTagList,
-      _ref2$imageClsList = _ref2.imageClsList,
-      imageClsList = _ref2$imageClsList === void 0 ? [] : _ref2$imageClsList,
-      _ref2$keyframes = _ref2.keyframes,
-      keyframes = _ref2$keyframes === void 0 ? {} : _ref2$keyframes,
-      _ref2$taskDescription = _ref2.taskDescription,
-      taskDescription = _ref2$taskDescription === void 0 ? "" : _ref2$taskDescription,
-      _ref2$fullImageSegmen = _ref2.fullImageSegmentationMode,
-      fullImageSegmentationMode = _ref2$fullImageSegmen === void 0 ? false : _ref2$fullImageSegmen,
-      RegionEditLabel = _ref2.RegionEditLabel,
-      videoSrc = _ref2.videoSrc,
-      _ref2$videoTime = _ref2.videoTime,
-      videoTime = _ref2$videoTime === void 0 ? 0 : _ref2$videoTime,
-      videoName = _ref2.videoName,
-      onExit = _ref2.onExit,
-      onNextImage = _ref2.onNextImage,
-      onPrevImage = _ref2.onPrevImage,
-      keypointDefinitions = _ref2.keypointDefinitions,
-      _ref2$autoSegmentatio = _ref2.autoSegmentationOptions,
-      autoSegmentationOptions = _ref2$autoSegmentatio === void 0 ? {
+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"
-  } : _ref2$autoSegmentatio,
-      hideHeader = _ref2.hideHeader,
-      hideHeaderText = _ref2.hideHeaderText,
-      hideNext = _ref2.hideNext,
-      hidePrev = _ref2.hidePrev,
-      hideClone = _ref2.hideClone,
-      hideSettings = _ref2.hideSettings,
-      hideFullScreen = _ref2.hideFullScreen,
-      hideSave = _ref2.hideSave,
-      allowComments = _ref2.allowComments,
-      onImagesChange = _ref2.onImagesChange,
-      groups = _ref2.groups,
-      onGroupSelect = _ref2.onGroupSelect,
-      hideHistory = _ref2.hideHistory,
-      hideNotEditingLabel = _ref2.hideNotEditingLabel,
-      showEditor = _ref2.showEditor,
-      showPageSelector = _ref2.showPageSelector,
-      _ref2$clsColors = _ref2.clsColors,
-      clsColors = _ref2$clsColors === void 0 ? {} : _ref2$clsColors,
-      groupColors = _ref2.groupColors,
-      onRecalc = _ref2.onRecalc,
-      onSave = _ref2.onSave,
-      metadata = _ref2.metadata;
+  } : _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,
+      onRecalc = _ref.onRecalc,
+      onSave = _ref.onSave,
+      metadata = _ref.metadata;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -98,7 +85,6 @@ export var Annotator = function Annotator(_ref2) {
     if (selectedImage === -1) selectedImage = undefined;
   }
 
-  var allowedGroups = extractAllowedGroups(images);
   var annotationType = images ? "image" : "video";
 
   var _useReducer = useReducer(historyHandler(combineReducers(annotationType === "image" ? imageReducer : videoReducer, generalReducer)), makeImmutable(_objectSpread({
@@ -112,6 +98,7 @@ export var Annotator = function Annotator(_ref2) {
     autoSegmentationOptions: autoSegmentationOptions,
     mode: null,
     taskDescription: taskDescription,
+    help: help,
     showMask: true,
     labelImages: imageClsList.length > 0 || imageTagList.length > 0,
     regionClsList: regionClsList,
@@ -134,8 +121,7 @@ export var Annotator = function Annotator(_ref2) {
   }, {
     imagesUpdatedAt: null,
     imagesSavedAt: null,
-    metadata: metadata,
-    allowedGroups: allowedGroups || []
+    metadata: metadata
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -164,7 +150,7 @@ export var Annotator = function Annotator(_ref2) {
   var handleSaveClick =
   /*#__PURE__*/
   function () {
-    var _ref3 = _asyncToGenerator(
+    var _ref2 = _asyncToGenerator(
     /*#__PURE__*/
     _regeneratorRuntime.mark(function _callee(e) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -196,7 +182,7 @@ export var Annotator = function Annotator(_ref2) {
     }));
 
     return function handleSaveClick(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
 
@@ -208,10 +194,10 @@ export var Annotator = function Annotator(_ref2) {
     }
   };
 
-  var handleMetadataChange = function handleMetadataChange(_ref4) {
-    var name = _ref4.name,
-        value = _ref4.value,
-        imageIndex = _ref4.imageIndex;
+  var handleMetadataChange = function handleMetadataChange(_ref3) {
+    var name = _ref3.name,
+        value = _ref3.value,
+        imageIndex = _ref3.imageIndex;
     dispatchToReducer({
       type: "UPDATE_METADATA",
       name: name,
@@ -252,10 +238,10 @@ export var Annotator = function Annotator(_ref2) {
   }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
 
-  var _ref5 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
-      _ref6 = _slicedToArray(_ref5, 2),
-      recalcActive = _ref6[0],
-      saveActive = _ref6[1];
+  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,

package/Annotator/reducers/general-reducer.js

@@ -14,6 +14,8 @@ 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";
+import regionsGroups from '../../utils/regions-groups';
+import nextGroupId from "../../utils/next-group-id";
 
 var getRandomId = function getRandomId() {
   return Math.random().toString().split(".")[1];
@@ -128,6 +130,26 @@ export default (function (state, action) {
 
     case "SELECT_CLASSIFICATION":
       {
+        var _state$images$state$s;
+
+        // if there is selected region, set its cls
+        var selectedRegionId = (_state$images$state$s = state.images[state.selectedImage].regions.find(function (r) {
+          return r.highlighted === true;
+        })) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.id;
+
+        if (selectedRegionId) {
+          var newRegions = activeImage.regions.map(function (r) {
+            if (r.id === selectedRegionId) {
+              return _objectSpread({}, r, {
+                cls: action.cls
+              });
+            } else {
+              return r;
+            }
+          });
+          state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), newRegions);
+        }
+
         return setIn(state, ["selectedCls"], action.cls);
       }
 
@@ -185,7 +207,7 @@ export default (function (state, action) {
           return _objectSpread({}, r, {
             highlighted: r.id === region.id,
             groupHighlighted: r.groupId && r.groupId === region.groupId ? true : false,
-            editingLabels: r.id === region.id
+            editingLabels: region.ctrlKey ? r.id === region.id : false
           });
         });
 
@@ -516,6 +538,8 @@ export default (function (state, action) {
 
     case "MOUSE_DOWN":
       {
+        var _state$regionClsList;
+
         if (!activeImage) return state;
         var _x = action.x,
             _y = action.y;
@@ -610,7 +634,7 @@ export default (function (state, action) {
         }
 
         var newRegion;
-        var defaultRegionCls = state.selectedCls,
+        var defaultRegionCls = state.selectedCls || ((_state$regionClsList = state.regionClsList) === null || _state$regionClsList === void 0 ? void 0 : _state$regionClsList[0]),
             defaultRegionColor = "#ff0000";
 
         var _clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls);
@@ -638,6 +662,21 @@ export default (function (state, action) {
 
           case "create-box":
             {
+              var _state4, _state4$images$state$, _state4$images$state$2, _state4$images$state$3;
+
+              var groupId = (_state4 = state) === null || _state4 === void 0 ? void 0 : (_state4$images$state$ = _state4.images[state.selectedImage]) === null || _state4$images$state$ === void 0 ? void 0 : (_state4$images$state$2 = _state4$images$state$.regions) === null || _state4$images$state$2 === void 0 ? void 0 : (_state4$images$state$3 = _state4$images$state$2.find(function (r) {
+                return r.highlighted === true;
+              })) === null || _state4$images$state$3 === void 0 ? void 0 : _state4$images$state$3.groupId;
+              var groupSelected = true;
+
+              if (isNaN(groupId)) {
+                var _state5, _state5$images$state$;
+
+                var groupIds = regionsGroups((_state5 = state) === null || _state5 === void 0 ? void 0 : (_state5$images$state$ = _state5.images[state.selectedImage]) === null || _state5$images$state$ === void 0 ? void 0 : _state5$images$state$.regions);
+                groupId = nextGroupId(groupIds);
+                groupSelected = false;
+              }
+
               state = saveToHistory(state, "Create Box");
               newRegion = {
                 type: "box",
@@ -649,11 +688,13 @@ export default (function (state, action) {
                 editingLabels: false,
                 color: defaultRegionColor,
                 cls: defaultRegionCls,
-                id: getRandomId()
+                id: getRandomId(),
+                groupHighlighted: true,
+                groupId: groupId
               };
               state = setIn(state, ["mode"], {
                 mode: "RESIZE_BOX",
-                editLabelEditorAfter: true,
+                editLabelEditorAfter: !groupSelected,
                 regionId: newRegion.id,
                 freedom: [1, 1],
                 original: {
@@ -778,7 +819,7 @@ export default (function (state, action) {
         }
 
         var _regions = _toConsumableArray(getIn(state, pathToActiveImage).regions || []).map(function (r) {
-          return setIn(r, ["editingLabels"], false).setIn(["highlighted"], false).setIn(["groupHighlighted"], false);
+          return setIn(r, ["editingLabels"], false).setIn(["highlighted"], false).setIn([state.selectedTool === 'create-box' ? undefined : 'groupHighlighted'], false);
         }).concat(newRegion ? [newRegion] : []);
 
         state = setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["selectedGroupId"]), null);
@@ -790,12 +831,12 @@ export default (function (state, action) {
         var _x2 = action.x,
             _y2 = action.y;
 
-        var _state4 = state,
-            _state4$mouseDownAt = _state4.mouseDownAt,
-            _mouseDownAt2 = _state4$mouseDownAt === void 0 ? {
+        var _state6 = state,
+            _state6$mouseDownAt = _state6.mouseDownAt,
+            _mouseDownAt2 = _state6$mouseDownAt === void 0 ? {
           x: _x2,
           y: _y2
-        } : _state4$mouseDownAt;
+        } : _state6$mouseDownAt;
 
         if (!state.mode) return state;
         state = setIn(state, ["mouseDownAt"], null);
@@ -892,7 +933,8 @@ export default (function (state, action) {
         var _regionIndex16 = getRegionIndex(action.region);
 
         if (_regionIndex16 === null) return state;
-        var newRegions = setIn(activeImage.regions.map(function (r) {
+
+        var _newRegions = setIn(activeImage.regions.map(function (r) {
           return _objectSpread({}, r, {
             highlighted: false,
             editingLabels: false
@@ -901,7 +943,8 @@ export default (function (state, action) {
           highlighted: true,
           editingLabels: true
         }));
-        return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), newRegions);
+
+        return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), _newRegions);
       }
 
     case "CLOSE_REGION_EDITOR":
@@ -928,10 +971,10 @@ export default (function (state, action) {
 
     case "DELETE_GROUP":
       {
-        var groupId = action.groupId;
-        if (groupId === null || groupId === undefined) return state;
+        var _groupId = action.groupId;
+        if (_groupId === null || _groupId === undefined) return state;
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), (activeImage.regions || []).filter(function (r) {
-          return r.groupId !== groupId;
+          return r.groupId !== _groupId;
         }));
       }
 
@@ -1029,8 +1072,8 @@ export default (function (state, action) {
 
     case "CANCEL":
       {
-        var _state5 = state,
-            mode = _state5.mode;
+        var _state7 = state,
+            mode = _state7.mode;
 
         if (mode) {
           switch (mode.mode) {
@@ -1079,9 +1122,9 @@ export default (function (state, action) {
     case "UPDATE_REGIONS":
       {
         var imageIndex = action.imageIndex,
-            _newRegions = action.regions;
+            _newRegions2 = action.regions;
         var updatedRegions = state.images[imageIndex].regions.map(function (r) {
-          var updatedRegion = _newRegions.find(function (i) {
+          var updatedRegion = _newRegions2.find(function (i) {
             return i.id === r.id;
           });
 
@@ -1155,9 +1198,14 @@ export default (function (state, action) {
 
     case "ADD_GROUP":
       {
-        var group = action.group;
-        var newAllowedGroups = [].concat(_toConsumableArray(state.allowedGroups), [group]);
-        return setIn(state, ["allowedGroups"], newAllowedGroups);
+        // FIXME: remove this branch
+        return state; // const { group } = action;
+        // const newAllowedGroups = []
+        // return setIn(
+        //   state,
+        //   ["allowedGroups"],
+        //   newAllowedGroups
+        // )
       }
 
     default:

package/HelpSidebarBox/index.js

@@ -0,0 +1,58 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import HelpIcon from '@mui/icons-material/Help';
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+import Markdown from "react-markdown";
+var theme = createTheme();
+var MarkdownContainer = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var HelpSidebarBox = function HelpSidebarBox(_ref2) {
+  var help = _ref2.help;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Help",
+    icon: React.createElement(HelpIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: help && help !== "" ? false : true
+  }, React.createElement(MarkdownContainer, null, React.createElement(Markdown, {
+    source: help
+  }))));
+};
+export default memo(HelpSidebarBox);

package/HighlightBox/index.js

@@ -79,7 +79,9 @@ export var HighlightBox = function HighlightBox(_ref) {
         return onBeginMovePoint(r);
       }
 
-      if (e.button === 0 && !createWithPrimary) return onSelectRegion(r);
+      if (e.button === 0 && !createWithPrimary) return onSelectRegion(_objectSpread({}, r, {
+        ctrlKey: e.ctrlKey
+      }));
       mouseEvents.onMouseDown(e);
     }
   } : {}, {

package/MainLayout/index.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { styled } from "@mui/material/styles";
@@ -17,6 +17,7 @@ import RegionSelector from "../RegionSelectorSidebarBox";
 import SettingsDialog from "../SettingsDialog";
 import TagsSidebarBox from "../TagsSidebarBox";
 import TaskDescription from "../TaskDescriptionSidebarBox";
+import Help from "../HelpSidebarBox";
 import MetadataEditor from "../MetadataEditorSidebarBox";
 import GroupsEditor from "../GroupsEditorSidebarBox";
 import Workspace from "react-material-workspace-layout/Workspace";
@@ -33,7 +34,8 @@ import { useSettings } from "../SettingsProvider";
 import { withHotKeys } from "react-hotkeys";
 import Editor from "../Editor";
 import regionsToBlocks from '../utils/regions-to-blocks';
-import PageSelector from "../PageSelector"; // import Fullscreen from "../Fullscreen"
+import PageSelector from "../PageSelector";
+import regionsGroups from '../utils/regions-groups'; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -190,6 +192,9 @@ export var MainLayout = function MainLayout(_ref5) {
       e.target.focus();
     }
   }, []);
+  var allowedGroups = useMemo(function () {
+    return regionsGroups(state.images[state.selectedImage].regions);
+  }, [state.images, state.selectedImage]);
   var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
     showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
     key: state.selectedImage,
@@ -235,7 +240,7 @@ export var MainLayout = function MainLayout(_ref5) {
     onRegionClassAdded: onRegionClassAdded,
     allowComments: state.allowComments,
     hideNotEditingLabel: hideNotEditingLabel,
-    allowedGroups: state.allowedGroups
+    allowedGroups: allowedGroups
   }));
   var onClickIconSidebarItem = useEventCallback(function (item) {
     dispatch({
@@ -424,6 +429,9 @@ export var MainLayout = function MainLayout(_ref5) {
     }), state.taskDescription && React.createElement(TaskDescription, {
       description: state.taskDescription,
       key: "task-description"
+    }), state.help && React.createElement(Help, {
+      help: state.help,
+      key: "help"
     }), state.regionClsList && React.createElement(ClassSelectionMenu, {
       selectedCls: state.selectedCls,
       regionClsList: state.regionClsList,
@@ -473,7 +481,7 @@ export var MainLayout = function MainLayout(_ref5) {
       onMetadataChange: onMetadataChange,
       key: "metadata-editor"
     }), React.createElement(GroupsEditor, {
-      groups: state.allowedGroups,
+      groups: allowedGroups,
       onAddGroup: onAddGroup,
       key: "groups-editor"
     })].filter(Boolean)

package/PageSelector/page-selector.css

@@ -154,7 +154,7 @@
   justify-content: center;
   align-items: center;
   background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
-  padding: .5rem 0;
+  padding: 12px 0;
 }
 
 .page-number {

package/package.json

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

package/utils/next-group-id.js

@@ -0,0 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+function nextGroupId(groupIds) {
+  var numberIds = _toConsumableArray(groupIds.filter(function (i) {
+    return !isNaN(i);
+  }).map(function (i) {
+    return parseInt(i);
+  })).sort();
+
+  return (numberIds[numberIds.length - 1] + 1).toString();
+}
+
+export default nextGroupId;

package/utils/regions-groups.js

@@ -0,0 +1,19 @@
+function regionsGroups(regions) {
+  if (!regions) {
+    return [];
+  }
+
+  var groups = regions.reduce(function (prev, curr) {
+    var groupId = curr.groupId;
+
+    if (prev.includes(groupId)) {
+      return prev;
+    }
+
+    prev.push(groupId);
+    return prev;
+  }, []);
+  return groups;
+}
+
+export default regionsGroups;