@searpent/react-image-annotate 2.0.10 → 2.0.13

package/Annotator/examplePhotos.js

@@ -776,6 +776,12 @@ var examplePhotos = [{
   "metadata": [{
     "key": "page",
     "value": "1"
+  }, {
+    "key": "section",
+    "value": "lokální zpravodajství"
+  }, {
+    "key": "mutation",
+    "value": "hřensko"
   }]
 }, {
   "id": "431fc636-d6d1-4e20-a35b-cc7a201c1833",

package/Annotator/index.js

@@ -13,68 +13,82 @@ 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";
-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$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 ? {
+
+function extractAllowedGroups(images) {
+  var allowedGroups = [];
+  images.forEach(function (image) {
+    return 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 ? {
     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,
-      clsColors = _ref.clsColors,
-      groupColors = _ref.groupColors,
-      onRecalc = _ref.onRecalc,
-      onSave = _ref.onSave,
-      allowedGroups = _ref.allowedGroups,
-      metadata = _ref.metadata;
+  } : _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,
+      clsColors = _ref2.clsColors,
+      groupColors = _ref2.groupColors,
+      onRecalc = _ref2.onRecalc,
+      onSave = _ref2.onSave,
+      metadata = _ref2.metadata;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -83,6 +97,7 @@ export var Annotator = function Annotator(_ref) {
     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({
@@ -118,7 +133,8 @@ export var Annotator = function Annotator(_ref) {
   }, {
     imagesUpdatedAt: null,
     imagesSavedAt: null,
-    metadata: metadata
+    metadata: metadata,
+    allowedGroups: allowedGroups || []
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -147,7 +163,7 @@ export var Annotator = function Annotator(_ref) {
   var handleSaveClick =
   /*#__PURE__*/
   function () {
-    var _ref2 = _asyncToGenerator(
+    var _ref3 = _asyncToGenerator(
     /*#__PURE__*/
     _regeneratorRuntime.mark(function _callee(e) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -179,7 +195,7 @@ export var Annotator = function Annotator(_ref) {
     }));
 
     return function handleSaveClick(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
@@ -191,16 +207,23 @@ export var Annotator = function Annotator(_ref) {
     }
   };
 
-  var handleMetadataChange = function handleMetadataChange(_ref3) {
-    var name = _ref3.name,
-        value = _ref3.value,
-        imageIndex = _ref3.imageIndex;
+  var handleMetadataChange = function handleMetadataChange(_ref4) {
+    var name = _ref4.name,
+        value = _ref4.value,
+        imageIndex = _ref4.imageIndex;
     dispatchToReducer({
       type: "UPDATE_METADATA",
       name: name,
       value: value,
       imageIndex: imageIndex
     });
+  };
+
+  var handleAddGroup = function handleAddGroup(group) {
+    dispatchToReducer({
+      type: "ADD_GROUP",
+      group: group
+    });
   }; // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
 
 
@@ -228,10 +251,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 _ref5 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref6 = _slicedToArray(_ref5, 2),
+      recalcActive = _ref6[0],
+      saveActive = _ref6[1];
 
   return React.createElement(SettingsProvider, {
     clsColors: clsColors,
@@ -261,8 +284,8 @@ export var Annotator = function Annotator(_ref) {
     onSave: handleSaveClick,
     saveActive: recalcActive,
     recalcActive: saveActive,
-    allowedGroups: allowedGroups,
-    onMetadataChange: handleMetadataChange
+    onMetadataChange: handleMetadataChange,
+    onAddGroup: handleAddGroup
   }));
 };
 export default Annotator;

package/Annotator/reducers/general-reducer.js

@@ -926,6 +926,15 @@ export default (function (state, action) {
         }));
       }
 
+    case "DELETE_GROUP":
+      {
+        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;
+        }));
+      }
+
     case "DELETE_SELECTED_REGION":
       {
         return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), (activeImage.regions || []).filter(function (r) {
@@ -1144,6 +1153,13 @@ export default (function (state, action) {
         }
       }
 
+    case "ADD_GROUP":
+      {
+        var group = action.group;
+        var newAllowedGroups = [].concat(_toConsumableArray(state.allowedGroups), [group]);
+        return setIn(state, ["allowedGroups"], newAllowedGroups);
+      }
+
     default:
       break;
   }

package/GroupsEditorSidebarBox/index.js

@@ -0,0 +1,137 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { memo, useState } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import FilterNoneIcon from '@mui/icons-material/FilterNone';
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+var theme = createTheme();
+var GroupItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: "1rem",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5rem",
+      textTransform: "capitalize"
+    }
+  };
+});
+
+var GroupItem = function GroupItem(_ref2) {
+  var group = _ref2.group;
+  return React.createElement(GroupItemDiv, null, group);
+};
+
+var GroupList = function GroupList(_ref3) {
+  var groups = _ref3.groups;
+  return React.createElement("div", null, React.createElement("h2", null, "Groups"), groups.map(function (g) {
+    return React.createElement(GroupItem, {
+      key: g,
+      group: g
+    });
+  }));
+};
+
+var AddGroupFormDiv = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    display: "flex",
+    flexDirection: "row"
+  };
+});
+
+var AddGroupFrom = function AddGroupFrom(_ref5) {
+  var onAddGroup = _ref5.onAddGroup;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setValue(e.target.value);
+  };
+
+  var handleSubmit = function handleSubmit(e) {
+    e.preventDefault();
+    onAddGroup(value);
+    setValue('');
+  };
+
+  return React.createElement(AddGroupFormDiv, null, React.createElement("form", {
+    onSubmit: handleSubmit,
+    style: {
+      display: "flex",
+      paddingRight: "6px"
+    }
+  }, React.createElement("input", {
+    type: "text",
+    value: value,
+    name: "new-group",
+    placeholder: "New group name",
+    onChange: handleChange,
+    style: {
+      marginRight: "1rem"
+    }
+  }), React.createElement("input", {
+    type: "submit",
+    value: "Create group"
+  })));
+};
+
+var DivContainer = styled("div")(function (_ref6) {
+  var theme = _ref6.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 GroupsEditorSidebarBox = function GroupsEditorSidebarBox(_ref7) {
+  var groups = _ref7.groups,
+      onAddGroup = _ref7.onAddGroup;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Groups",
+    icon: React.createElement(FilterNoneIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(DivContainer, null, React.createElement("h2", null, "Add new group"), React.createElement(AddGroupFrom, {
+    onAddGroup: onAddGroup
+  }), React.createElement(GroupList, {
+    groups: groups
+  }))));
+};
+export default memo(GroupsEditorSidebarBox);

package/ImageCanvas/index.js

@@ -96,6 +96,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
       onSelectRegion = _ref2.onSelectRegion,
       onBeginMovePoint = _ref2.onBeginMovePoint,
       onDeleteRegion = _ref2.onDeleteRegion,
+      onDeleteGroup = _ref2.onDeleteGroup,
       onChangeVideoTime = _ref2.onChangeVideoTime,
       onChangeVideoPlaying = _ref2.onChangeVideoPlaying,
       onRegionClassAdded = _ref2.onRegionClassAdded,
@@ -349,6 +350,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
     onChangeRegion: onChangeRegion,
     onCloseRegionEdit: onCloseRegionEdit,
     onDeleteRegion: onDeleteRegion,
+    onDeleteGroup: onDeleteGroup,
     layoutParams: layoutParams,
     imageSrc: imageSrc,
     RegionEditLabel: RegionEditLabel,
@@ -365,6 +367,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
     allowedTags: regionTagList,
     onChange: onChangeRegion,
     onDelete: onDeleteRegion,
+    onDeleteGroup: onDeleteGroup,
     editing: true,
     region: highlightedRegion,
     imageSrc: imageSrc,

package/MainLayout/index.js

@@ -18,6 +18,7 @@ import SettingsDialog from "../SettingsDialog";
 import TagsSidebarBox from "../TagsSidebarBox";
 import TaskDescription from "../TaskDescriptionSidebarBox";
 import MetadataEditor from "../MetadataEditorSidebarBox";
+import GroupsEditor from "../GroupsEditorSidebarBox";
 import Workspace from "react-material-workspace-layout/Workspace";
 import classnames from "classnames";
 import getActiveImage from "../Annotator/reducers/get-active-image";
@@ -32,7 +33,7 @@ import { useSettings } from "../SettingsProvider";
 import { withHotKeys } from "react-hotkeys";
 import Editor from "../Editor";
 import regionsToBlocks from '../utils/regions-to-blocks';
-import PagesSelector from "../PageSelector"; // import Fullscreen from "../Fullscreen"
+import PageSelector from "../PageSelector"; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -113,9 +114,8 @@ export var MainLayout = function MainLayout(_ref4) {
       recalcActive = _ref4$recalcActive === void 0 ? false : _ref4$recalcActive,
       _ref4$saveActive = _ref4.saveActive,
       saveActive = _ref4$saveActive === void 0 ? false : _ref4$saveActive,
-      _ref4$allowedGroups = _ref4.allowedGroups,
-      allowedGroups = _ref4$allowedGroups === void 0 ? {} : _ref4$allowedGroups,
-      onMetadataChange = _ref4.onMetadataChange;
+      onMetadataChange = _ref4.onMetadataChange,
+      onAddGroup = _ref4.onAddGroup;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -209,6 +209,7 @@ export var MainLayout = function MainLayout(_ref4) {
     onBeginRegionEdit: action("OPEN_REGION_EDITOR", "region"),
     onCloseRegionEdit: action("CLOSE_REGION_EDITOR", "region"),
     onDeleteRegion: action("DELETE_REGION", "region"),
+    onDeleteGroup: action("DELETE_GROUP", "groupId"),
     onBeginBoxTransform: action("BEGIN_BOX_TRANSFORM", "box", "directions"),
     onBeginMovePolygonPoint: action("BEGIN_MOVE_POLYGON_POINT", "polygon", "pointIndex"),
     onBeginMoveKeypoint: action("BEGIN_MOVE_KEYPOINT", "region", "keypointId"),
@@ -223,7 +224,7 @@ export var MainLayout = function MainLayout(_ref4) {
     onRegionClassAdded: onRegionClassAdded,
     allowComments: state.allowComments,
     hideNotEditingLabel: hideNotEditingLabel,
-    allowedGroups: allowedGroups
+    allowedGroups: state.allowedGroups
   }));
   var onClickIconSidebarItem = useEventCallback(function (item) {
     dispatch({
@@ -280,7 +281,8 @@ export var MainLayout = function MainLayout(_ref4) {
       isActive: idx === state.selectedImage,
       pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : _i$metadata.find(function (md) {
         return md.key === "page";
-      }).value) || null
+      }).value) || null,
+      metadata: i.metadata || []
     };
   });
 
@@ -314,13 +316,14 @@ export var MainLayout = function MainLayout(_ref4) {
       display: 'flex',
       flexDirection: 'row'
     }
-  }, showPageSelector && React.createElement(PagesSelector, {
+  }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
     onPageClick: handlePageClick,
     onRecalc: onRecalc,
     onSave: onSave,
     saveActive: saveActive,
-    recalcActive: recalcActive
+    recalcActive: recalcActive,
+    onMetadataChange: onMetadataChange
   }), React.createElement(Workspace, {
     allowFullscreen: true,
     iconDictionary: iconDictionary,
@@ -356,7 +359,7 @@ export var MainLayout = function MainLayout(_ref4) {
     onClickHeaderItem: onClickHeaderItem,
     onClickIconSidebarItem: onClickIconSidebarItem,
     selectedTools: [state.selectedTool, state.showTags && "show-tags", state.showMask && "show-mask"].filter(Boolean),
-    iconSidebarItems: [{
+    iconSidebarItems: !state.enabledTools ? [] : [{
       name: "select",
       helperText: "Select" + getHotkeyHelpText("select_tool"),
       alwaysShowing: true
@@ -447,6 +450,9 @@ export var MainLayout = function MainLayout(_ref4) {
     }), React.createElement(MetadataEditor, {
       state: state,
       onMetadataChange: onMetadataChange
+    }), React.createElement(GroupsEditor, {
+      groups: state.allowedGroups,
+      onAddGroup: onAddGroup
     })].filter(Boolean)
   }, canvas), showEditor && React.createElement(EditorWrapper, {
     id: "editor-wrapper"

package/PageSelector/index.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
 import classnames from "classnames";
 
 require('./page-selector.css').toString();
@@ -25,17 +26,26 @@ function PageThumbnail(_ref) {
   }, pageNumber)));
 }
 
-function PagesSelector(_ref2) {
+function PageSelector(_ref2) {
   var pages = _ref2.pages,
       onPageClick = _ref2.onPageClick,
       onRecalc = _ref2.onRecalc,
       onSave = _ref2.onSave,
       recalcActive = _ref2.recalcActive,
-      saveActive = _ref2.saveActive;
+      saveActive = _ref2.saveActive,
+      onMetadataChange = _ref2.onMetadataChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMetadata = _useState2[0],
+      setShowMetadata = _useState2[1];
+
   return React.createElement("div", {
-    className: "page-selector"
+    className: classnames('page-selector', {
+      'page-selector--opened': showMetadata
+    })
   }, React.createElement("div", {
-    className: "bottom-buttons"
+    className: "top-buttons"
   }, React.createElement("button", {
     onClick: onRecalc,
     disabled: !recalcActive,
@@ -47,18 +57,58 @@ function PagesSelector(_ref2) {
   }, "Save")), React.createElement("div", {
     className: "pages"
   }, pages.map(function (page, idx) {
-    return React.createElement(PageThumbnail, {
+    var _page$metadata;
+
+    return React.createElement("div", {
+      className: "page-thumbnail__wrapper"
+    }, React.createElement(PageThumbnail, {
       key: page.id,
       src: page.src,
       isActive: page.isActive,
       onClick: function onClick() {
         return onPageClick(idx);
       }
-    });
-  })));
+    }), showMetadata && React.createElement("div", {
+      className: "page-thumbnail__metadata"
+    }, React.createElement("h5", null, "Metadata"), page === null || page === void 0 ? void 0 : (_page$metadata = page.metadata) === null || _page$metadata === void 0 ? void 0 : _page$metadata.map(function (_ref3) {
+      var key = _ref3.key,
+          value = _ref3.value;
+      return React.createElement(React.Fragment, null, React.createElement("label", {
+        htmlFor: key
+      }, key), React.createElement("input", {
+        id: key,
+        type: "text",
+        value: value,
+        onChange: function onChange(e) {
+          return onMetadataChange({
+            name: key,
+            value: e.target.value,
+            imageIndex: idx
+          });
+        }
+      }));
+    })));
+  })), React.createElement("div", {
+    className: "bottom-buttons"
+  }, React.createElement("div", {
+    className: "show-metadata-wrapper"
+  }, React.createElement("label", {
+    className: "switch mr-2"
+  }, React.createElement("input", {
+    id: "show-metadata",
+    type: "checkbox",
+    value: showMetadata,
+    onChange: function onChange() {
+      return setShowMetadata(function (prev) {
+        return !prev;
+      });
+    }
+  }), React.createElement("span", {
+    className: "slider round"
+  })), React.createElement("label", null, "Metadata"))));
 }
 
-PagesSelector.defaultProps = {
+PageSelector.defaultProps = {
   onPageClick: function onPageClick() {},
   onRecalc: function onRecalc() {},
   onSave: function onSave() {},
@@ -66,4 +116,4 @@ PagesSelector.defaultProps = {
   saveActive: false,
   pageNumber: undefined
 };
-export default PagesSelector;
+export default PageSelector;

package/PageSelector/page-selector.css

@@ -1,7 +1,12 @@
 .page-selector {
   height: 100vh;
   overflow-y: scroll;
-  width: 10%;
+  max-width: 10%;
+  transition: max-width .5s;
+}
+
+.page-selector--opened {
+  max-width: 20%;
 }
 
 .pages {
@@ -9,6 +14,12 @@
   padding: 1rem;
 }
 
+.page-thumbnail__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
 .page-thumbnail {
   margin-bottom: 1rem;
   border-radius: .25rem !important;
@@ -21,6 +32,7 @@
 .page-thumbnail:hover {
   box-shadow: 0 0 2rem 0 #8898aa !important;
   filter: grayscale(0);
+  transform: scale(1.075);
   cursor: pointer;
   opacity: 1;
 }
@@ -34,7 +46,15 @@
   width: 100%;
 }
 
-.bottom-buttons {
+.page-thumbnail__metadata {
+  padding: 1rem;
+}
+
+.page-thumbnail__metadata * {
+  display: block;
+}
+
+.top-buttons {
   background: linear-gradient(#8898aa, rgba(255, 255, 255, 0));
   position: sticky;
   top: 0;
@@ -45,21 +65,21 @@
   z-index: 100;
 }
 
-.bottom-buttons button {
+.top-buttons button {
   margin-bottom: 1rem;
   width: 100%;
 }
 
-.bottom-buttons button:hover {
+.top-buttons button:hover {
   cursor: pointer;
 }
 
-.bottom-buttons button:disabled {
+.top-buttons button:disabled {
   pointer-events: none;
   opacity: .5;
 }
 
-.bottom-buttons button.info {
+.top-buttons button.info {
   background-color: transparent;
   border-radius: 0.5rem;
   background-image: linear-gradient(310deg, #627594, #a8b8d8);
@@ -68,7 +88,7 @@
   padding: 0.5rem 0;
 }
 
-.bottom-buttons button.success {
+.top-buttons button.success {
   color: white;
   background-image: linear-gradient(310deg, #2dce89, #2dcecc);
   border-radius: 0.5rem;
@@ -76,6 +96,17 @@
   padding: 0.5rem 0;
 }
 
+.bottom-buttons {
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  z-index: 100;
+}
+
 
 .page-number-wrapper {
   position: absolute;
@@ -93,4 +124,75 @@
 .page-number {
   font-size: 1.5rem;
   font-weight: 800;
+}
+
+/* toggle */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #2196F3;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.show-metadata-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mr-2 {
+  margin-right: 1rem;
 }

package/RegionLabel/index.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import React, { useRef, memo } from "react";
 import Paper from "@mui/material/Paper";
@@ -7,7 +8,8 @@ import styles from "./styles";
 import classnames from "classnames";
 import IconButton from "@mui/material/IconButton";
 import Button from "@mui/material/Button";
-import TrashIcon from "@mui/icons-material/Delete";
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import CheckIcon from "@mui/icons-material/Check";
 import TextField from "@mui/material/TextField";
 import Select from "react-select";
@@ -29,7 +31,8 @@ export var RegionLabel = function RegionLabel(_ref) {
       onRegionClassAdded = _ref.onRegionClassAdded,
       allowComments = _ref.allowComments,
       hideNotEditingLabel = _ref.hideNotEditingLabel,
-      allowedGroups = _ref.allowedGroups;
+      allowedGroups = _ref.allowedGroups,
+      onDeleteGroup = _ref.onDeleteGroup;
   var classes = useStyles();
   var commentInputRef = useRef(null);
 
@@ -40,6 +43,12 @@ export var RegionLabel = function RegionLabel(_ref) {
   };
 
   if (hideNotEditingLabel && !editing) return null;
+  var allowedGroupsForSelect = allowedGroups.map(function (g) {
+    return {
+      value: "".concat(g),
+      label: "".concat(g)
+    };
+  });
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(Paper, {
@@ -99,7 +108,24 @@ export var RegionLabel = function RegionLabel(_ref) {
     },
     size: "small",
     variant: "outlined"
-  }, React.createElement(TrashIcon, {
+  }, React.createElement(DeleteOutlineIcon, {
+    style: {
+      marginTop: -8,
+      width: 16,
+      height: 16
+    }
+  })), React.createElement(IconButton, {
+    onClick: function onClick() {
+      return onDeleteGroup(region.groupId);
+    },
+    tabIndex: -1,
+    style: {
+      width: 22,
+      height: 22
+    },
+    size: "small",
+    variant: "outlined"
+  }, React.createElement(DeleteForeverIcon, {
     style: {
       marginTop: -8,
       width: 16,
@@ -137,10 +163,10 @@ export var RegionLabel = function RegionLabel(_ref) {
       }));
     },
     placeholder: "Group",
-    value: allowedGroups.filter(function (g) {
+    value: allowedGroupsForSelect.find(function (g) {
       return g.value === region.groupId;
     }),
-    options: allowedGroups
+    options: _toConsumableArray(allowedGroupsForSelect)
   }), (allowedTags || []).length > 0 && React.createElement("div", {
     style: {
       marginTop: 4

package/RegionSelectAndTransformBoxes/index.js

@@ -11,8 +11,10 @@ var TransformGrabber = styled("div")(function (_ref) {
   return {
     width: 8,
     height: 8,
-    zIndex: 2,
-    border: "2px solid #FFF",
+    zIndex: 10,
+    backgroundColor: "#454545",
+    border: "2px solid black",
+    borderRadius: "50%",
     position: "absolute"
   };
 });

package/RegionSelectorSidebarBox/index.js

@@ -18,6 +18,7 @@ import VisibleOffIcon from "@mui/icons-material/VisibilityOff";
 import styles from "./styles";
 import classnames from "classnames";
 import isEqual from "lodash/isEqual";
+import useColors from "../hooks/use-colors";
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return styles;
@@ -151,6 +152,11 @@ var Row = function Row(_ref4) {
       color = _ref4.color,
       cls = _ref4.cls,
       index = _ref4.index;
+
+  var _useColors = useColors(),
+      groupColor = _useColors.groupColor;
+
+  var gc = groupColor(r.groupId);
   return React.createElement(RowLayout, {
     header: false,
     highlighted: highlighted,
@@ -160,7 +166,7 @@ var Row = function Row(_ref4) {
     order: "#".concat(index + 1),
     classification: React.createElement(Chip, {
       text: cls || "",
-      color: color || "#ddd"
+      color: color || gc || "lime"
     }),
     area: "",
     trash: React.createElement(TrashIcon, {

package/RegionShapes/index.js

@@ -56,7 +56,7 @@ var RegionComponents = {
         width: Math.max(region.w * iw, 0),
         height: Math.max(region.h * ih, 0),
         stroke: colorAlpha(clsColor(region.cls), 0.85),
-        fill: region.groupHighlighted ? colorAlpha(groupColor(region.groupId), 0.85) : colorAlpha(groupColor(region.groupId), 0.5)
+        fill: region.groupHighlighted ? colorAlpha(clsColor(region.cls), 0.15) : colorAlpha(groupColor(region.groupId), 0.5)
       }));
     } else {
       return React.createElement("g", {

package/RegionTags/index.js

@@ -29,6 +29,7 @@ export var RegionTags = function RegionTags(_ref) {
       onChangeRegion = _ref.onChangeRegion,
       onCloseRegionEdit = _ref.onCloseRegionEdit,
       onDeleteRegion = _ref.onDeleteRegion,
+      onDeleteGroup = _ref.onDeleteGroup,
       layoutParams = _ref.layoutParams,
       imageSrc = _ref.imageSrc,
       RegionEditLabel = _ref.RegionEditLabel,
@@ -128,6 +129,7 @@ export var RegionTags = function RegionTags(_ref) {
       onChange: onChangeRegion,
       onClose: onCloseRegionEdit,
       onDelete: onDeleteRegion,
+      onDeleteGroup: onDeleteGroup,
       editing: region.editingLabels,
       region: region,
       regions: regions,

package/hooks/use-colors.js

@@ -1,4 +1,5 @@
 import { useSettings } from "../SettingsProvider";
+var DEFAULT_GROUP_COLOR = "#32CD32";
 
 function defaultClsColor(cls) {
   switch (cls) {
@@ -49,28 +50,6 @@ function defaultClsColor(cls) {
   }
 }
 
-function defaultGroupColor(groupId) {
-  switch (groupId) {
-    case "0":
-      return "#FDDFDF";
-
-    case "1":
-      return "#FCF7DE";
-
-    case "2":
-      return "#DEFDE0";
-
-    case "3":
-      return "#DEF3FD";
-
-    case "4":
-      return "#F0DEFD";
-
-    default:
-      return "#F0DEFD";
-  }
-}
-
 var useColors = function useColors() {
   var _useSettings = useSettings(),
       clsColors = _useSettings.clsColors,
@@ -84,12 +63,8 @@ var useColors = function useColors() {
     return defaultClsColor(cls);
   };
 
-  var groupColor = function groupColor(groupId) {
-    if (groupColors[groupId]) {
-      return groupColors[groupId];
-    }
-
-    return defaultGroupColor(groupId);
+  var groupColor = function groupColor(idx) {
+    return groupColors[idx % groupColors.length] || DEFAULT_GROUP_COLOR;
   };
 
   return {

package/package.json

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