Skip to content

Commit 8ba0037

Browse files
josepdecidjosepdecid
committed
Add the option to hide all the header buttons and update the Readme with the new options.
1 parent 915beea commit 8ba0037

File tree

3 files changed

+80
-39
lines changed

3 files changed

+80
-39
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ All of the following properties can be defined on the Annotator...
7373
| `onExit` | `MainLayoutState => any` | Called when "Save" is called. | |
7474
| `RegionEditLabel` | `Node` | React Node overriding the form to update the region (see [`RegionLabel`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js)) | |
7575
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
76+
| `hidePrev` | `boolean` | Hide `Previous Image` button from the header bar. | `false` |
77+
| `hideNext` | `boolean` | Hide `Next Image` button from the header bar. | `false` |
78+
| `hideClone` | `boolean` | Hide `Clone` button from the header bar. | `false` |
79+
| `hideSettings` | `boolean` | Hide `Settings` button from the header bar. | `false` |
80+
| `hideFullScreen` | `boolean` | Hide `FullScreen/Window` button from the header bar. | `false` |
81+
| `hideSave` | `boolean` | Hide `Save` button from the header bar. | `false` |
7682

7783
## Developers
7884

‎src/Annotator/index.js

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
// @flow
22

3-
import React, { useReducer, useEffect } from "react"
4-
import type { Node } from "react"
5-
import MainLayout from "../MainLayout"
63
import type {
7-
ToolEnum,
4+
Action,
85
Image,
9-
Mode,
106
MainLayoutState,
11-
Action,
7+
Mode,
8+
ToolEnum,
129
} from "../MainLayout/types"
10+
import React, { useEffect, useReducer } from "react"
11+
import makeImmutable, { without } from "seamless-immutable"
12+
1313
import type { KeypointsDefinition } from "../ImageCanvas/region-tools"
14+
import MainLayout from "../MainLayout"
15+
import type { Node } from "react"
1416
import SettingsProvider from "../SettingsProvider"
15-
1617
import combineReducers from "./reducers/combine-reducers.js"
1718
import generalReducer from "./reducers/general-reducer.js"
18-
import imageReducer from "./reducers/image-reducer.js"
19-
import videoReducer from "./reducers/video-reducer.js"
19+
import getFromLocalStorage from "../utils/get-from-local-storage"
2020
import historyHandler from "./reducers/history-handler.js"
21-
21+
import imageReducer from "./reducers/image-reducer.js"
2222
import useEventCallback from "use-event-callback"
23-
import makeImmutable, { without } from "seamless-immutable"
24-
import getFromLocalStorage from "../utils/get-from-local-storage"
23+
import videoReducer from "./reducers/video-reducer.js"
2524

2625
type Props = {
2726
taskDescription?: string,
@@ -52,6 +51,10 @@ type Props = {
5251
hideHeaderText?: boolean,
5352
hideNext?: boolean,
5453
hidePrev?: boolean,
54+
hideClone?: boolean,
55+
hideSettings?: boolean,
56+
hideFullScreen?: boolean,
57+
hideSave?: boolean
5558
}
5659

5760
export const Annotator = ({
@@ -91,6 +94,10 @@ export const Annotator = ({
9194
hideHeaderText,
9295
hideNext,
9396
hidePrev,
97+
hideClone,
98+
hideSettings,
99+
hideFullScreen,
100+
hideSave,
94101
allowComments,
95102
}: Props) => {
96103
if (typeof selectedImage === "string") {
@@ -187,6 +194,10 @@ export const Annotator = ({
187194
hideHeaderText={hideHeaderText}
188195
hideNext={hideNext}
189196
hidePrev={hidePrev}
197+
hideClone={hideClone}
198+
hideSettings={hideSettings}
199+
hideFullScreen={hideFullScreen}
200+
hideSave={hideSave}
190201
/>
191202
</SettingsProvider>
192203
)

‎src/MainLayout/index.js

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,54 @@
11
// @flow
22

3-
import React, { useRef, useCallback } from "react"
4-
import type { Node } from "react"
3+
import type { Action, MainLayoutState } from "./types"
4+
import { FullScreen, useFullScreenHandle } from "react-full-screen"
5+
import React, { useCallback, useRef } from "react"
56
import { makeStyles, styled } from "@material-ui/core/styles"
7+
8+
import ClassSelectionMenu from "../ClassSelectionMenu"
9+
import DebugBox from "../DebugSidebarBox"
10+
import HistorySidebarBox from "../HistorySidebarBox"
611
import ImageCanvas from "../ImageCanvas"
7-
import styles from "./styles"
8-
import type { MainLayoutState, Action } from "./types"
9-
import useKey from "use-key-hook"
10-
import classnames from "classnames"
11-
import { useSettings } from "../SettingsProvider"
12-
import SettingsDialog from "../SettingsDialog"
13-
// import Fullscreen from "../Fullscreen"
14-
import { FullScreen, useFullScreenHandle } from "react-full-screen"
15-
import getActiveImage from "../Annotator/reducers/get-active-image"
16-
import useImpliedVideoRegions from "./use-implied-video-regions"
17-
import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
18-
import { withHotKeys } from "react-hotkeys"
19-
import iconDictionary from "./icon-dictionary"
12+
import ImageSelector from "../ImageSelectorSidebarBox"
2013
import KeyframeTimeline from "../KeyframeTimeline"
21-
import Workspace from "react-material-workspace-layout/Workspace"
22-
import DebugBox from "../DebugSidebarBox"
23-
import TagsSidebarBox from "../TagsSidebarBox"
2414
import KeyframesSelector from "../KeyframesSelectorSidebarBox"
25-
import TaskDescription from "../TaskDescriptionSidebarBox"
15+
import type { Node } from "react"
2616
import RegionSelector from "../RegionSelectorSidebarBox"
27-
import ImageSelector from "../ImageSelectorSidebarBox"
28-
import HistorySidebarBox from "../HistorySidebarBox"
29-
import useEventCallback from "use-event-callback"
17+
import SettingsDialog from "../SettingsDialog"
18+
import TagsSidebarBox from "../TagsSidebarBox"
19+
import TaskDescription from "../TaskDescriptionSidebarBox"
20+
import Workspace from "react-material-workspace-layout/Workspace"
21+
import classnames from "classnames"
22+
import getActiveImage from "../Annotator/reducers/get-active-image"
3023
import getHotkeyHelpText from "../utils/get-hotkey-help-text"
31-
import ClassSelectionMenu from "../ClassSelectionMenu"
24+
import iconDictionary from "./icon-dictionary"
25+
import styles from "./styles"
26+
import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
27+
import useEventCallback from "use-event-callback"
28+
import useImpliedVideoRegions from "./use-implied-video-regions"
29+
import useKey from "use-key-hook"
30+
import { useSettings } from "../SettingsProvider"
31+
import { withHotKeys } from "react-hotkeys"
32+
33+
// import Fullscreen from "../Fullscreen"
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
3252

3353
const emptyArr = []
3454
const useStyles = makeStyles(styles)
@@ -70,6 +90,10 @@ export const MainLayout = ({
7090
hideHeaderText,
7191
hideNext = false,
7292
hidePrev = false,
93+
hideClone = false,
94+
hideSettings = false,
95+
hideFullScreen = false,
96+
hideSave = false
7397
}: Props) => {
7498
const classes = useStyles()
7599
const settings = useSettings()
@@ -256,10 +280,10 @@ export const MainLayout = ({
256280
: !state.videoPlaying
257281
? { name: "Play" }
258282
: { name: "Pause" },
259-
!nextImageHasRegions && activeImage.regions && { name: "Clone" },
260-
{ name: "Settings" },
261-
state.fullScreen ? { name: "Window" } : { name: "Fullscreen" },
262-
{ name: "Save" },
283+
!hideClone && !nextImageHasRegions && activeImage.regions && { name: "Clone" },
284+
!hideSettings && { name: "Settings" },
285+
!hideFullScreen && (state.fullScreen ? { name: "Window" } : { name: "Fullscreen" }),
286+
!hideSave && { name: "Save" },
263287
].filter(Boolean)}
264288
onClickHeaderItem={onClickHeaderItem}
265289
onClickIconSidebarItem={onClickIconSidebarItem}

0 commit comments

Comments
 (0)