@searpent/react-image-annotate 2.0.11 → 2.0.14

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/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) {

package/GroupsEditorSidebarBox/index.js

@@ -22,11 +22,6 @@ var GroupItemDiv = styled("div")(function (_ref) {
 
 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);
 };
 
@@ -44,13 +39,7 @@ var AddGroupFormDiv = styled("div")(function (_ref4) {
   var theme = _ref4.theme;
   return {
     display: "flex",
-    flexDirection: "row" // marginBottom: "1rem",
-    // "& > label": {
-    //   fontSize: "1rem",
-    //   marginBottom: ".5rem",
-    //   textTransform: "capitalize"
-    // }
-
+    flexDirection: "row"
   };
 });
 

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

@@ -33,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();
@@ -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"),
@@ -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,22 +359,22 @@ 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
+      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")
@@ -392,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",

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,
@@ -44,21 +54,59 @@ function PagesSelector(_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) {
-    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
+          });
+        }
+      }));
+    })));
   })));
 }
 
-PagesSelector.defaultProps = {
+PageSelector.defaultProps = {
   onPageClick: function onPageClick() {},
   onRecalc: function onRecalc() {},
   onSave: function onSave() {},
@@ -66,4 +114,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.015);
   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

@@ -8,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";
@@ -30,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);
 
@@ -106,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,

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/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/package.json

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

package/site.css

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