@searpent/react-image-annotate 2.0.14 → 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) {
@@ -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,
@@ -77,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() {
@@ -88,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,

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/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.14",
+  "version": "2.0.16",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",

package/Editor/annotation-plugin/annotation.css

@@ -1,46 +0,0 @@
-/**
- * Plugin styles
- */
-.ce-header {
-  padding: 0.6em 0 3px;
-  margin: 0;
-  line-height: 1.25em;
-  outline: none;
-}
-
-.ce-header p,
-.ce-header div {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-/**
- * Styles for Plugin icon in Toolbar
- */
-.ce-header__icon {}
-
-.ce-header[contentEditable=true][data-placeholder]::before {
-  position: absolute;
-  content: attr(data-placeholder);
-  color: #707684;
-  font-weight: normal;
-  display: none;
-  cursor: text;
-}
-
-.ce-header[contentEditable=true][data-placeholder]:empty::before {
-  display: block;
-}
-
-.ce-header[contentEditable=true][data-placeholder]:empty:focus::before {
-  display: none;
-}
-
-/* Custom overwrite */
-.cdx-settings-button {
-  width: 100% !important;
-}
-
-.ce-settings__plugin-zone {
-  padding: 0 .25rem;
-}

package/PageSelector/page-selector.css

@@ -1,198 +0,0 @@
-.page-selector {
-  height: 100vh;
-  overflow-y: scroll;
-  max-width: 10%;
-  transition: max-width .5s;
-}
-
-.page-selector--opened {
-  max-width: 20%;
-}
-
-.pages {
-  list-style: none;
-  padding: 1rem;
-}
-
-.page-thumbnail__wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-.page-thumbnail {
-  margin-bottom: 1rem;
-  border-radius: .25rem !important;
-  overflow: hidden;
-  filter: grayscale(1);
-  transition: transform .2s;
-  opacity: .5;
-}
-
-.page-thumbnail:hover {
-  box-shadow: 0 0 2rem 0 #8898aa !important;
-  filter: grayscale(0);
-  transform: scale(1.015);
-  cursor: pointer;
-  opacity: 1;
-}
-
-.page-thumbnail-is-active {
-  filter: grayscale(0);
-  opacity: 1;
-}
-
-.page-thumbnail img {
-  width: 100%;
-}
-
-.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;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  z-index: 100;
-}
-
-.top-buttons button {
-  margin-bottom: 1rem;
-  width: 100%;
-}
-
-.top-buttons button:hover {
-  cursor: pointer;
-}
-
-.top-buttons button:disabled {
-  pointer-events: none;
-  opacity: .5;
-}
-
-.top-buttons button.info {
-  background-color: transparent;
-  border-radius: 0.5rem;
-  background-image: linear-gradient(310deg, #627594, #a8b8d8);
-  color: white;
-  border: none;
-  padding: 0.5rem 0;
-}
-
-.top-buttons button.success {
-  color: white;
-  background-image: linear-gradient(310deg, #2dce89, #2dcecc);
-  border-radius: 0.5rem;
-  border: none;
-  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;
-  bottom: 0;
-  width: 100%;
-  height: 10%;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
-  padding: .5rem 0;
-}
-
-.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;
-}