@searpent/react-image-annotate 2.0.11 → 2.0.12

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,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

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

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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,96 +0,0 @@
-.page-selector {
-  height: 100vh;
-  overflow-y: scroll;
-  width: 10%;
-}
-
-.pages {
-  list-style: none;
-  padding: 1rem;
-}
-
-.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);
-  cursor: pointer;
-  opacity: 1;
-}
-
-.page-thumbnail-is-active {
-  filter: grayscale(0);
-  opacity: 1;
-}
-
-.page-thumbnail img {
-  width: 100%;
-}
-
-.bottom-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;
-}
-
-.bottom-buttons button {
-  margin-bottom: 1rem;
-  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;
-  background-image: linear-gradient(310deg, #627594, #a8b8d8);
-  color: white;
-  border: none;
-  padding: 0.5rem 0;
-}
-
-.bottom-buttons button.success {
-  color: white;
-  background-image: linear-gradient(310deg, #2dce89, #2dcecc);
-  border-radius: 0.5rem;
-  border: none;
-  padding: 0.5rem 0;
-}
-
-
-.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;
-}

package/site.css

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