Add lock/hide all buttons to region list

src/Annotator/reducers/general-reducer.js

@@ -131,10 +131,9 @@ export default (state, action) => {
         return produce(
           modifyRegion(polygon, {
             points: polygon.points.slice(0, -1),
-            editingLabels: true,
             open: false,
           }),
-          s => {s.mode = null}
+          s => {s.mode = {mode: "CLOSE_POLYGON", regionId: polygon.id}}
         )
       } else {
         state = saveToHistory(state, i18next.t("move.polypoint"))
@@ -319,7 +318,8 @@ export default (state, action) => {
         case "MOVE_POLYGON_POINT": {
           return {...state, mode: null}
         }
-        case "MOVE_LINE_POINT": {
+        case "MOVE_LINE_POINT":
+        case "CLOSE_POLYGON": {
           return produce(
             modifyRegion(state.mode.regionId, { editingLabels: true }),
             s => {s.mode = null}

src/Localization/translation-de-DE.js

@@ -2,6 +2,10 @@ const translationDeDE = {
   "menu.classifications": "Klassifizierungen",
   "menu.history": "Verlauf",
   "menu.regions": "Regionen",
+  "regions.lock.all": "Alle sperren",
+  "regions.unlock.all": "Alle entsperren",
+  "regions.hide.all": "Alle ausblenden",
+  "regions.show.all": "Alle einblenden",
   "error.image": "Bild konnte nicht geladen werden.",
   "no.history": "Kein Verlauf vorhanden",
   "desc.class": "Klassen",

src/Localization/translation-en-EN.js

@@ -2,6 +2,10 @@ const translationEnEN = {
   "menu.classifications": "Classifications",
   "menu.history": "History",
   "menu.regions": "Regions",
+  "regions.lock.all": "Lock all",
+  "regions.unlock.all": "Unlock all",
+  "regions.hide.all": "Hide all",
+  "regions.show.all": "Show all",
   "error.image": "Could not load image",
   "no.history": "No History Yet",
   "desc.class": "Class",

src/RegionSelectorSidebarBox/index.jsx

@@ -1,11 +1,12 @@
 // @flow
 
-import {memo} from "react"
+import {memo, useState} from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import {createTheme, styled, ThemeProvider} from "@mui/material/styles"
 import {grey} from "@mui/material/colors"
 import RegionIcon from "@mui/icons-material/PictureInPicture"
 import Grid from "@mui/material/Grid"
+import Button from "@mui/material/Button"
 import TrashIcon from "@mui/icons-material/Delete"
 import LockIcon from "@mui/icons-material/Lock"
 import UnlockIcon from "@mui/icons-material/LockOpen"
@@ -22,6 +23,7 @@ const theme = createTheme()
 
 const ChipSpan = styled('span')(() => styles.chip)
 const RowDiv = styled('div')(() => styles.row)
+const ButtonRowDiv = styled('div')(() => styles.buttonRow)
 const ContainerDiv = styled('div')(() => styles.container)
 
 const Chip = ({color, text}) => {
@@ -161,6 +163,21 @@ export const RegionSelectorSidebarBox = ({
 
   const {t} = useTranslation();
 
+  const [allLocked, setAllLocked] = useState(false)
+  const [allHidden, setAllHidden] = useState(false)
+
+  const toggleLockAll = () => {
+    const next = !allLocked
+    setAllLocked(next)
+    regions.forEach((r) => onChangeRegion({...r, locked: next}))
+  }
+
+  const toggleHideAll = () => {
+    const next = !allHidden
+    setAllHidden(next)
+    regions.forEach((r) => onChangeRegion({...r, visible: !next}))
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <SidebarBoxContainer
@@ -171,6 +188,24 @@ export const RegionSelectorSidebarBox = ({
         noScroll={true}
       >
         <ContainerDiv>
+          <ButtonRowDiv>
+            <Button
+              className="batchButton"
+              size="small"
+              onClick={toggleLockAll}
+              startIcon={allLocked ? <UnlockIcon /> : <LockIcon />}
+            >
+              {allLocked ? t("regions.unlock.all") : t("regions.lock.all")}
+            </Button>
+            <Button
+              className="batchButton"
+              size="small"
+              onClick={toggleHideAll}
+              startIcon={allHidden ? <VisibleIcon /> : <VisibleOffIcon />}
+            >
+              {allHidden ? t("regions.show.all") : t("regions.hide.all")}
+            </Button>
+          </ButtonRowDiv>
           {regions.map((r, i) => (
             <MemoRow
               key={r.id}

src/RegionSelectorSidebarBox/styles.js

@@ -21,6 +21,25 @@ export default {
       },
     },
   },
+  buttonRow: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 4,
+    padding: 4,
+    borderBottom: `1px solid ${grey[200]}`,
+    "& .batchButton": {
+      flex: 1,
+      fontSize: 11,
+      fontWeight: "bold",
+      color: grey[700],
+      textTransform: "none",
+      minWidth: 0,
+      "& .MuiButton-startIcon > svg": {
+        width: 16,
+        height: 16,
+      },
+    },
+  },
   row: {
     padding: 4,
     cursor: "pointer",