@searpent/react-image-annotate 2.0.12 → 2.0.16

package/Annotator/index.js

@@ -17,7 +17,7 @@ import videoReducer from "./reducers/video-reducer.js";
 function extractAllowedGroups(images) {
   var allowedGroups = [];
   images.forEach(function (image) {
-    return image.regions.forEach(function (_ref) {
+    return image.regions && image.regions.forEach(function (_ref) {
       var groupId = _ref.groupId;
 
       if (!allowedGroups.includes(groupId)) {
@@ -84,7 +84,8 @@ export var Annotator = function Annotator(_ref2) {
       hideNotEditingLabel = _ref2.hideNotEditingLabel,
       showEditor = _ref2.showEditor,
       showPageSelector = _ref2.showPageSelector,
-      clsColors = _ref2.clsColors,
+      _ref2$clsColors = _ref2.clsColors,
+      clsColors = _ref2$clsColors === void 0 ? {} : _ref2$clsColors,
       groupColors = _ref2.groupColors,
       onRecalc = _ref2.onRecalc,
       onSave = _ref2.onSave,

package/ClassSelectionMenu/index.js

@@ -109,6 +109,7 @@ export var ClassSelectionMenu = function ClassSelectionMenu(_ref6) {
     expandedByDefault: true
   }, regionClsList.map(function (label, index) {
     return React.createElement(LabelContainer, {
+      key: label,
       className: classnames({
         selected: label === selectedCls
       }),

package/Editor/annotation-plugin/annotation.js

@@ -4,10 +4,9 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 /**
  * Build styles
  */
-require('./annotation.css').toString(); // Possible classes
+import './annotation.css'; // Possible classes
 // ================
 
-
 var Annotation =
 /*#__PURE__*/
 function () {

package/GroupsEditorSidebarBox/index.js

@@ -27,9 +27,9 @@ var GroupItem = function GroupItem(_ref2) {
 
 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("div", null, React.createElement("h2", null, "Groups"), groups.map(function (g, idx) {
     return React.createElement(GroupItem, {
-      key: g,
+      key: "".concat(g, "-").concat(idx),
       group: g
     });
   }));

package/MainLayout/index.js

@@ -276,7 +276,7 @@ export var MainLayout = function MainLayout(_ref4) {
     var _i$metadata;
 
     return {
-      id: idx,
+      id: "".concat(idx),
       src: i.src,
       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) {
@@ -362,19 +362,19 @@ export var MainLayout = function MainLayout(_ref4) {
     iconSidebarItems: !state.enabledTools ? [] : [{
       name: "select",
       helperText: "Select" + getHotkeyHelpText("select_tool"),
-      alwaysShowing: true
+      alwaysShowing: false
     }, {
       name: "pan",
       helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
-      alwaysShowing: true
+      alwaysShowing: false
     }, {
       name: "zoom",
       helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
-      alwaysShowing: true
+      alwaysShowing: false
     }, {
       name: "show-tags",
       helperText: "Show / Hide Tags",
-      alwaysShowing: true
+      alwaysShowing: false
     }, {
       name: "create-point",
       helperText: "Add Point" + getHotkeyHelpText("create_point")
@@ -395,7 +395,7 @@ export var MainLayout = function MainLayout(_ref4) {
       helperText: "Add Keypoints (Pose)"
     }, state.fullImageSegmentationMode && {
       name: "show-mask",
-      alwaysShowing: true,
+      alwaysShowing: false,
       helperText: "Show / Hide Mask"
     }, {
       name: "modify-allowed-area",
@@ -405,19 +405,23 @@ export var MainLayout = function MainLayout(_ref4) {
     }),
     rightSidebarItems: [debugModeOn && React.createElement(DebugBox, {
       state: debugModeOn,
-      lastAction: state.lastAction
+      lastAction: state.lastAction,
+      key: "debug-box"
     }), state.taskDescription && React.createElement(TaskDescription, {
-      description: state.taskDescription
+      description: state.taskDescription,
+      key: "task-description"
     }), state.regionClsList && React.createElement(ClassSelectionMenu, {
       selectedCls: state.selectedCls,
       regionClsList: state.regionClsList,
-      onSelectCls: action("SELECT_CLASSIFICATION", "cls")
+      onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
+      key: "class-selection-menu"
     }), state.labelImages && React.createElement(TagsSidebarBox, {
       currentImage: activeImage,
       imageClsList: state.imageClsList,
       imageTagList: state.imageTagList,
       onChangeImage: action("CHANGE_IMAGE", "delta"),
-      expandedByDefault: true
+      expandedByDefault: true,
+      key: "tags-sidebar-box"
     }),, // (state.images?.length || 0) > 1 && (
     //   <ImageSelector
     //     onSelect={action("SELECT_REGION", "region")}
@@ -436,23 +440,28 @@ export var MainLayout = function MainLayout(_ref4) {
       regions: activeImage ? activeImage.regions : emptyArr,
       onSelectRegion: action("SELECT_REGION", "region"),
       onDeleteRegion: action("DELETE_REGION", "region"),
-      onChangeRegion: action("CHANGE_REGION", "region")
+      onChangeRegion: action("CHANGE_REGION", "region"),
+      key: "region-selector"
     }), state.keyframes && React.createElement(KeyframesSelector, {
       onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
       onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
       onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
       currentTime: state.currentVideoTime,
       duration: state.videoDuration,
-      keyframes: state.keyframes
+      keyframes: state.keyframes,
+      key: "key-frame-selector"
     }), !hideHistory && React.createElement(HistorySidebarBox, {
       history: state.history,
-      onRestoreHistory: action("RESTORE_HISTORY")
+      onRestoreHistory: action("RESTORE_HISTORY"),
+      key: "history-sidebar"
     }), React.createElement(MetadataEditor, {
       state: state,
-      onMetadataChange: onMetadataChange
+      onMetadataChange: onMetadataChange,
+      key: "metadata-editor"
     }), React.createElement(GroupsEditor, {
       groups: state.allowedGroups,
-      onAddGroup: onAddGroup
+      onAddGroup: onAddGroup,
+      key: "groups-editor"
     })].filter(Boolean)
   }, canvas), showEditor && React.createElement(EditorWrapper, {
     id: "editor-wrapper"

package/MetadataEditorSidebarBox/index.js

@@ -51,7 +51,7 @@ var MetadataList = function MetadataList(_ref3) {
       metadata = _ref3.metadata,
       imageIndex = _ref3.imageIndex,
       onMetadataChange = _ref3.onMetadataChange;
-  return React.createElement("div", null, React.createElement("h2", null, title), metadata.map(function (_ref4) {
+  return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
     var key = _ref4.key,
         value = _ref4.value;
     return React.createElement(MetadataItem, {

package/PageSelector/index.js

@@ -1,8 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import classnames from "classnames";
-
-require('./page-selector.css').toString();
+import './page-selector.css';
 
 function PageThumbnail(_ref) {
   var src = _ref.src,
@@ -54,7 +53,22 @@ function PageSelector(_ref2) {
     onClick: onSave,
     disabled: !saveActive,
     className: "success"
-  }, "Save")), React.createElement("div", {
+  }, "Save"), 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"))), React.createElement("div", {
     className: "pages"
   }, pages.map(function (page, idx) {
     var _page$metadata;
@@ -62,7 +76,7 @@ function PageSelector(_ref2) {
     return React.createElement("div", {
       className: "page-thumbnail__wrapper"
     }, React.createElement(PageThumbnail, {
-      key: page.id,
+      key: "".concat(page.id),
       src: page.src,
       isActive: page.isActive,
       onClick: function onClick() {
@@ -73,7 +87,9 @@ function PageSelector(_ref2) {
     }, 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", {
+      return React.createElement("div", {
+        key: key
+      }, React.createElement("label", {
         htmlFor: key
       }, key), React.createElement("input", {
         id: key,
@@ -88,24 +104,7 @@ function PageSelector(_ref2) {
         }
       }));
     })));
-  })), 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"))));
+  })));
 }
 
 PageSelector.defaultProps = {

package/RegionLabel/index.js

@@ -43,12 +43,12 @@ export var RegionLabel = function RegionLabel(_ref) {
   };
 
   if (hideNotEditingLabel && !editing) return null;
-  var allowedGroupsForSelect = allowedGroups.map(function (g) {
+  var allowedGroupsForSelect = allowedGroups ? allowedGroups.map(function (g) {
     return {
       value: "".concat(g),
       label: "".concat(g)
     };
-  });
+  }) : [];
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(Paper, {

package/RegionShapes/index.js

@@ -249,7 +249,7 @@ export var WrappedRegionList = memo(function (_ref19) {
   }).map(function (r) {
     var Component = RegionComponents[r.type];
     return React.createElement(Component, {
-      key: r.regionId,
+      key: r.id,
       region: r,
       iw: iw,
       ih: ih,

package/SettingsProvider/index.js

@@ -7,6 +7,7 @@ var defaultSettings = {
   showHighlightBox: true,
   wasdMode: true
 };
+var DEFAULT_GROUP_COLORS = ["#3853F1", "#F6E54C", "#39D33C", "#CF24CF", "#22E3ED", "#EF3029"];
 export var SettingsContext = createContext(defaultSettings);
 
 var pullSettingsFromLocalStorage = function pullSettingsFromLocalStorage() {
@@ -32,7 +33,8 @@ export var useSettings = function useSettings() {
 export var SettingsProvider = function SettingsProvider(_ref) {
   var children = _ref.children,
       clsColors = _ref.clsColors,
-      groupColors = _ref.groupColors;
+      _ref$groupColors = _ref.groupColors,
+      groupColors = _ref$groupColors === void 0 ? DEFAULT_GROUP_COLORS : _ref$groupColors;
 
   var _useState = useState(_objectSpread({}, function () {
     return pullSettingsFromLocalStorage();

package/ShortcutsManager/index.js

@@ -3,7 +3,7 @@ import { HotKeys } from "react-hotkeys";
 export var defaultHotkeys = [{
   id: "select_tool",
   description: "Switch to the Select Tool",
-  binding: "escape"
+  binding: "e"
 }, {
   id: "zoom_tool",
   description: "Select the Zoom Tool",

package/hooks/use-colors.js

@@ -56,6 +56,10 @@ var useColors = function useColors() {
       groupColors = _useSettings.groupColors;
 
   var clsColor = function clsColor(cls) {
+    if (!clsColors) {
+      return DEFAULT_GROUP_COLOR;
+    }
+
     if (clsColors[cls]) {
       return clsColors[cls];
     }

package/package.json

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