@searpent/react-image-annotate 2.0.8 → 2.0.11

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

@@ -1144,6 +1144,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,148 @@
+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;
+  // const handleDelete = e => {
+  //   e.preventDefault()
+  //   const { value } = e.target
+  //   console.log("deleting group:", value)
+  // }
+  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" // marginBottom: "1rem",
+    // "& > label": {
+    //   fontSize: "1rem",
+    //   marginBottom: ".5rem",
+    //   textTransform: "capitalize"
+    // }
+
+  };
+});
+
+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

@@ -300,7 +300,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
   }, React.createElement("div", {
     style: {
       width: "100%",
-      height: "100%",
+      height: "100vh",
       maxHeight: "calc(100vh - 68px)",
       position: "relative",
       overflow: "hidden",

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";
@@ -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();
@@ -223,7 +223,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({
@@ -447,6 +447,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/page-selector.css

@@ -50,6 +50,15 @@
   width: 100%;
 }
 
+.bottom-buttons button:hover {
+  cursor: pointer;
+}
+
+.bottom-buttons button:disabled {
+  pointer-events: none;
+  opacity: .5;
+}
+
 .bottom-buttons button.info {
   background-color: transparent;
   border-radius: 0.5rem;

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";
@@ -40,6 +41,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, {
@@ -137,10 +144,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/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.8",
+  "version": "2.0.11",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",

package/site.css

@@ -0,0 +1,5 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}